堡座BI

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "serve": "vue-cli-service serve",
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
@@ -10,11 +11,14 @@
   "dependencies": {
     "@jiaminghi/data-view": "^2.4.4",
     "axios": "^1.6.2",
-    "echarts": "^5.5.1",
+    "chart.js": "^4.4.7",
+    "echarts": "^5.6.0",
+    "element-ui": "^2.15.14",
     "less": "^3.9.0",
     "less-loader": "^5.0.0",
     "vue": "^2.6.10",
-    "vue-seamless-scroll": "^1.1.23"
+    "vue-seamless-scroll": "^1.1.23",
+    "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.8.0",

src/App.vue

@@ -1,24 +1,18 @@
 <template>
   <div id="app">
-    <datav />
+    <datav   />
   </div>
 </template>
 
 <script>
-
+import datav from './components/baozuo-demo/index.vue' 
-//永盛版本
-//import datav from './components/datav/index.vue'
-
-//堡座demo版本
-import datav from './components/baozuo-demo/index.vue'
 
 export default {
   name: 'app',
   components: {
-    datav
+    datav 
   },
-  data () {
+  computed: { 
-    return {}
   }
 }
 </script>

src/api.js

@@ -1,6 +1,8 @@
 import axios from 'axios'
 
 const api = {
+ 
+  
   // 定义API接口地址
   // baseURL: process.env.NODE_ENV === 'production' ? '/api/' : 'http://localhost:3000/',
   // GET请求示例
@@ -8,8 +10,8 @@ const api = {
   baseURL2: 'http://39.101.165.228:9001',
 
   //永盛
-  _baseURL: 'http://123.207.37.67:9001',
+  baseURL2: 'http://123.207.37.67:9001',
-  _baseURL2: 'http://123.207.37.67:9001',
+  baseURL22: 'http://123.207.37.67:9001',
 
 
   get (url) {
@@ -23,24 +25,34 @@ const api = {
     })
   },
   // POST请求示例
-  post (url, data) {
+  post (url, data, token) {
-    return new Promise((resolve, reject) => {
+    const headers = {}
+    if (token) {
+      headers['Token'] = token
+    }
+    return new Promise((resolve, reject) => { 
       axios({
         method: 'post',
         url: this.baseURL + url,
-        data: data
+        data: data,
+        headers: headers
       })
         .then(response => resolve(response.data))
         .catch(error => reject(error))
     })
   },
   // POST请求示例
-  post2 (url, data) {
+  post2 (url, data, token) {
+    const headers = {}
+    if (token) {
+      headers['Token'] = token
+    }
     return new Promise((resolve, reject) => {
       axios({
         method: 'post',
         url: this.baseURL2 + url,
-        data: data
+        data: data,
+        headers: headers
       })
         .then(response => resolve(response.data))
         .catch(error => reject(error))

src/components/baozuo-demo/BottomCharts.vue

@@ -1,14 +1,22 @@
 <template>
   <div class="bottom-charts">
-    <div class="bc-chart-item" v-if="isChange">
+    <div style="width: 100%;" v-if="dataType == '整机'">
-      <div class="bcci-header">机芯派工单执行进度</div>
+      <div class="bc-chart-item">
-      <dv-scroll-board :config="config1" style="height:90%;margin-left: 2%;width:96%" />
+        <div class="bcci-header">整机派工单执行进度</div>
+        <dv-scroll-board :config="config3" style="height:90%;margin-left: 2%;width:96%" />
+      </div>
     </div>
-    <!-- <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" /> -->
+    <div style="width: 100%;" v-else>
+      <div class="bc-chart-item" v-if="isChange">
+        <div class="bcci-header">机芯派工单执行进度</div>
+        <dv-scroll-board :config="config1" style="height:90%;margin-left: 2%;width:96%" />
+      </div>
+      <!-- <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" /> -->
 
-    <div class="bc-chart-item" v-if="!isChange">
+      <div class="bc-chart-item" v-if="!isChange">
-      <div class="bcci-header">盖板派工单执行进度</div>
+        <div class="bcci-header">盖板派工单执行进度</div>
-      <dv-scroll-board :config="config2" style="height:90%;margin-left: 2%;width:96%" />
+        <dv-scroll-board :config="config2" style="height:90%;margin-left: 2%;width:96%" />
+      </div>
     </div>
   </div>
 </template>
@@ -21,7 +29,12 @@ export default {
   components: {
     LabelTag
   },
+  props: {
+    dataType: {
+    }
+  },
   data() {
+    let _this  = this;
     function generateRandomData(N, title) {
       const data = [];
       let date = new Date(); // 从今天的日期开始
@@ -67,7 +80,7 @@ export default {
           }
 
 
-          
+
         }
 
         //随机三个百分比 从大到小
@@ -75,34 +88,50 @@ export default {
         const completionRate2 = Math.floor(Math.random() * 100);
         const completionRate3 = Math.floor(Math.random() * 100);
         const newDataItem = [];
-        // 创建新的数据项
+        if(_this.dataType == '整机') {
-        if(title === 'U1机芯'){
           newDataItem = [
-          `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
+            `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
-          title,  // 固定值
+            title,  // 固定值
-          formattedDate,  // 日期
+            formattedDate,  // 日期
-          orderQuantity,  // 订单量
+            orderQuantity,  // 订单量
-          completionRate,  // 完成率
+            completionRate,  // 完成率
-          createProgressCircle(100),
+            createProgressCircle(100),
-          createProgressCircle(completionRate2),
+            createProgressCircle(100),
-          createProgressCircle(0),
+            createProgressCircle(completionRate2),
-          completedQuantity  // 完成数量
+            createProgressCircle(completionRate2),
-        ];
+            createProgressCircle(completionRate2),
-        }else{
+            createProgressCircle(completionRate2),
-           newDataItem = [
+            completedQuantity  // 完成数量
-          `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
+          ];
-          title,  // 固定值
-          formattedDate,  // 日期
-          orderQuantity,  // 订单量
-          completionRate,  // 完成率
-          createProgressCircle(100),
-          createProgressCircle(completionRate2),
-          createProgressCircle(completionRate2),
-          createProgressCircle(0),
-          completedQuantity  // 完成数量
-        ];
         }
-        
+        // 创建新的数据项
+        else if (title === 'U1机芯') {
+          newDataItem = [
+            `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
+            title,  // 固定值
+            formattedDate,  // 日期
+            orderQuantity,  // 订单量
+            completionRate,  // 完成率
+            createProgressCircle(100),
+            createProgressCircle(completionRate2),
+            createProgressCircle(0),
+            completedQuantity  // 完成数量
+          ];
+        } else {
+          newDataItem = [
+            `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
+            title,  // 固定值
+            formattedDate,  // 日期
+            orderQuantity,  // 订单量
+            completionRate,  // 完成率
+            createProgressCircle(100),
+            createProgressCircle(completionRate2),
+            createProgressCircle(completionRate2),
+            createProgressCircle(0),
+            completedQuantity  // 完成数量
+          ];
+        }
+
 
         data.push(newDataItem);
 
@@ -112,34 +141,43 @@ export default {
       return data;
     }
 
-
     return {
       isChange: true,
       config1: {
-        header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度','组装','QC','老化','剩下数量'],
+        header:['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '组装', 'QC', '老化', '剩下数量'],
         data: generateRandomData(60, 'U1机芯'),
         index: true,
-        columnWidth: [50],
+        headerHeight: 50,
+        columnWidth: [80, 300],
         align: ['center'],
-        waitTime: 30000,
+        //waitTime: 300000,
       },
 
       config2: {
-        header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度','组装','安规','综合测试','老化','剩下数量'],
+        header:  ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '组装', '安规', '综合测试', '老化', '剩下数量'],
         data: generateRandomData(30, 'U1盖板'),
+        headerHeight: 50,
         index: true,
-        columnWidth: [50],
+        columnWidth: [80, 300],
         align: ['center']
       },
 
+      config3: { 
 
+        header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '上陶瓷', '气密性QC', '整机组装', '功能QC', '全外观QC', '包装'] ,
+        data: generateRandomData(30, 'U1C智能坐便器[220V]'),
+        headerHeight: 50,
+        index: true,
+        columnWidth: [80, 300],
+        align: ['center']
+      },
     }
   },
   created() {
     let that = this;
-    timer = setInterval(()=>{
+    timer = setInterval(() => {
       that.isChange = !that.isChange
-    },60000)
+    }, 60000)
   },
   beforeDestroy() {
     clearInterval(timer)
@@ -187,17 +225,19 @@ export default {
     left: 0%;
   }
 }
+
 .circle-progress {
   top: 50%;
   transform: translateY(-50%);
-    width: 50px;
+  width: 50px;
-    height: 50px;
+  height: 50px;
-    border-radius: 50%;
+  border-radius: 50%;
-    position: relative;
+  position: relative;
-    // background: conic-gradient(from 90deg at 50% 50%, transparent 0, rgba(18, 3, 117, 0.107) 0);
+  // background: conic-gradient(from 90deg at 50% 50%, transparent 0, rgba(18, 3, 117, 0.107) 0);
-    transition: all 0.5s ease;
+  transition: all 0.5s ease;
-    border: 6px solid;
+  border: 6px solid;
-  }
+}
+
 .circle-content {
   position: absolute;
   top: 50%;
@@ -206,18 +246,21 @@ export default {
   font-size: 0.16rem;
   color: #333;
 }
-.circle-img{
+
+.circle-img {
   width: 80%;
   height: 80%;
   background-image: url('./img/icon_success.png');
   background-repeat: no-repeat;
-  background-size:contain;
+  background-size: contain;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.ceil{
+
-  font-size: 0.2rem;
+.ceil,
+.header-item {
+  font-size: 0.3rem;
 }
 </style>

src/components/baozuo-demo/CenterCmp copy.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="center-cmp">
+    <div class="cc-header" v-if="false"> 
+      <dv-decoration-1 style="width:200px;height:50px;" />
+    </div>
+
+    <div class="cc-details">
+      <div>本月总产量</div>
+      <div class="card">1</div>
+      <div class="card">1</div>
+      <div class="card">3</div>
+      <div class="card">7</div>
+    </div>
+
+    <div class="cc-main-container">
+      <div class="ccmc-left">
+        <div class="station-info">
+          本月派工数<span class="station-value">1120</span>
+        </div>
+        <div class="station-info">
+          本月未完成派工数<span class="station-value">600</span>
+        </div>
+        <div class="station-info">
+          本月派工完成率<span class="station-value">60%</span>
+        </div>
+        <div class="station-info">
+          保养台数<span class="station-value">32/40</span>
+        </div>
+        <div class="station-info"  v-if="dataType !=='整机'">
+          机芯备料进度<span class="station-value">45/122</span>
+        </div>
+      </div>
+
+      <dv-active-ring-chart class="ccmc-middle" :config="config" />
+
+      <div class="ccmc-right">
+        <div class="station-info">
+         今天产量 <span class="station-value">60</span>
+        </div>
+        <div class="station-info">
+        直通率  <span class="station-value">93%</span>
+        </div>
+        <div class="station-info">
+        今日不良数  <span class="station-value">2</span>
+        </div>
+        <div class="station-info">
+       返工数   <span class="station-value">2</span>
+        </div>
+        <div class="station-info" v-if="dataType =='整机'">
+          整机备料进度<span class="station-value">54/145</span>
+        </div>
+        <div class="station-info" v-else>
+          盖板备料进度<span class="station-value">68/168</span>
+        </div>
+      </div>
+
+      <LabelTag :config="labelConfig" />
+    </div>
+  </div>
+</template>
+
+<script>
+import LabelTag from './LabelTag'
+
+export default {
+  name: 'CenterCmp',
+  components: {
+    LabelTag
+  },
+  props: { 
+    dataType: {
+    }
+  },
+  data () {
+    return {
+      config: {
+        data:  
+        [
+          {
+            name: '机芯缺陷占比',
+            value: 42
+          },
+          {
+            name: '盖板缺陷占比',
+            value: 58
+          }
+        ],
+        color: ['#00baff', '#3de7c9', '#ffc530', '#469f4b'],
+        lineWidth: 30,
+        radius: '55%',
+        activeRadius: '60%'
+      },
+
+      labelConfig: {
+        data: ['机芯缺陷占比', '盖板缺陷占比' ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.center-cmp {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  padding: 0px;
+  display: flex;
+  flex-direction: column;
+
+  .station-value{
+    color: #0777e0;margin-left: 4px;
+  }
+  .cc-header {
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 30px;
+  }
+
+  .cc-details {
+    height: 120px;
+    display: flex;
+    justify-content: center;
+    font-size: 32px;
+    align-items: center;
+
+    .card {
+      background-color: rgba(4,49,128,.6);
+      color: #08e5ff;
+      height: 70px;
+      width: 70px;
+      font-size: 45px;
+      font-weight: bold;
+      line-height: 70px;
+      text-align: center;
+      margin: 10px;
+    }
+  }
+
+  .cc-main-container {
+    position: relative;
+    flex: 1;
+    display: flex;
+
+    .ccmc-middle {
+      width: 50%;
+      height: 90%;
+
+      .active-ring-name {
+        font-size: 20px !important;
+      }
+    }
+
+    .ccmc-left, .ccmc-right {
+      width: 25%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      font-size: 24px;
+
+      span {
+        font-size: 40px;
+        font-weight: bold;
+      }
+
+      .station-info {
+        height: 80px;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .ccmc-left {
+      align-items: flex-end;
+
+      margin-top: -100px;
+      span {
+        margin-left: 20px;
+      }
+    }
+
+    .ccmc-right {
+      align-items: flex-start;
+      margin-top: -100px;
+      span {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .label-tag {
+    position: absolute;
+    width: 500px;
+    height: 30px;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/components/baozuo-demo/CenterCmp.vue

@@ -14,34 +14,20 @@
 
     <div class="cc-main-container">
       <div class="ccmc-left">
-        <div class="station-info">
+        <div class="station-info" v-for="(item, index) in leftData" :key="index">
-          本月派工数<span>1120</span>
+          <img :src="item.icon" alt="icon" class="station-icon">
-        </div>
+          <div class="station-name">{{ item.name }}</div>
-        <div class="station-info">
+          <div class="station-value">{{ item.value }}</div>
-          本月未完成派工数<span>600</span>
-        </div>
-        <div class="station-info">
-          本月派工完成率<span>60%</span>
-        </div>
-        <div class="station-info">
-          保养台数<span>32/40</span>
         </div>
       </div>
 
       <dv-active-ring-chart class="ccmc-middle" :config="config" />
 
       <div class="ccmc-right">
-        <div class="station-info">
+        <div class="station-info" v-for="(item, index) in rightData" :key="index">
-          <span>60</span>今天产量
+          <img :src="item.icon" alt="icon" class="station-icon">
-        </div>
+          <div class="station-name">{{ item.name }}</div>
-        <div class="station-info">
+          <div class="station-value">{{ item.value }}</div>
-          <span>20%</span>直通率
-        </div>
-        <div class="station-info">
-          <span>4</span>今日不良数
-        </div>
-        <div class="station-info">
-          <span>5</span>返工数
         </div>
       </div>
 
@@ -58,7 +44,58 @@ export default {
   components: {
     LabelTag
   },
-  data () {
+  props: { 
+    dataType: {
+      type: String,
+      default: ''
+    }
+  },
+  data () { 
+    // 定义原始数据
+    const originalLeftData = [
+      { icon: require(`@/img/icons/1.png`), name: '本月派工数', value: '1120' },
+      { icon: require(`@/img/icons/2.png`), name: '本月未完成派工数', value: '600' },
+      { icon: require(`@/img/icons/3.png`), name: '本月派工完成率', value: '60%' }
+    ];
+
+    const originalRightData = [
+      { icon: require(`@/img/icons/6.png`), name: '今天产量', value: '60' },
+      { icon: require(`@/img/icons/7.png`), name: '直通率', value: '93%' },
+      { icon: require(`@/img/icons/8.png`), name: '今日不良数', value: '2' }
+    ];
+
+    // 将数值加倍（支持多次加倍）
+    const doubleValue = (value) => {
+      if (typeof value === 'string' && !isNaN(value)) {
+        return (parseFloat(value) * 2).toString();
+      } else if (typeof value === 'string' && value.includes('%')) {
+        return `${(parseFloat(value) * 2)}%`;
+      }
+      return value;
+    };
+
+    // 第一次加倍
+    const doubledLeftData = originalLeftData.map(item => ({
+      ...item,
+      value: doubleValue(item.value)
+    }));
+
+    const doubledRightData = originalRightData.map(item => ({
+      ...item,
+      value: doubleValue(item.value)
+    }));
+
+    // 第二次加倍
+    const quadrupledLeftData = doubledLeftData.map(item => ({
+      ...item,
+      value: doubleValue(item.value)
+    }));
+
+    const quadrupledRightData = doubledRightData.map(item => ({
+      ...item,
+      value: doubleValue(item.value)
+    }));
+
     return {
       config: {
         data: [
@@ -78,8 +115,11 @@ export default {
       },
 
       labelConfig: {
-        data: ['机芯缺陷占比', '盖板缺陷占比' ]
+        data: ['机芯缺陷占比', '盖板缺陷占比']
-      }
+      },
+
+      leftData: quadrupledLeftData,
+      rightData: quadrupledRightData
     }
   }
 }
@@ -94,6 +134,26 @@ export default {
   display: flex;
   flex-direction: column;
 
+  .station-icon {
+    width: 80px;
+    height: 80px;
+    margin-bottom: 18px;
+  }
+
+  .station-name {
+    font-size: 16px;
+    color: #ffffff;
+    text-align: center;
+    margin-bottom: 4px;
+  }
+
+  .station-value {
+    font-size: 20px;
+    font-weight: bold;
+    color: #0777e0;
+    text-align: center;
+  }
+
   .cc-header {
     height: 70px;
     display: flex;
@@ -128,7 +188,7 @@ export default {
     display: flex;
 
     .ccmc-middle {
-      width: 50%;
+      width: 33%;
       height: 90%;
 
       .active-ring-name {
@@ -137,38 +197,26 @@ export default {
     }
 
     .ccmc-left, .ccmc-right {
-      width: 25%;
+      width: 33%;
       display: flex;
       flex-direction: column;
       justify-content: center;
-      font-size: 24px;
+      align-items: center;
-
-      span {
-        font-size: 40px;
-        font-weight: bold;
-      }
 
       .station-info {
-        height: 80px;
         display: flex;
+        flex-direction: column;
         align-items: center;
+        margin: 10px 0;
       }
     }
 
     .ccmc-left {
-      align-items: flex-end;
+      margin-top: -100px;
-
-      span {
-        margin-left: 20px;
-      }
     }
 
     .ccmc-right {
-      align-items: flex-start;
+      margin-top: -100px;
-
-      span {
-        margin-right: 20px;
-      }
     }
   }
 
@@ -181,4 +229,4 @@ export default {
     transform: translateX(-50%);
   }
 }
-</style>
+</style>

src/components/baozuo-demo/LeftChart1.vue

@@ -1,10 +1,30 @@
 <template>
-  <div id="rose-chart">  
+  <div id="rose-chart"  style="flex:1" >
     <div :id="pieId" class="pie-chart-container"></div>
   </div>
 </template>
 
 <script>
+
+function getRecentWeekDates() {
+    const dates = [];
+    const today = new Date();
+    
+    for (let i = 6; i >= 0; i--) {
+        const date = new Date(today);
+        date.setDate(today.getDate() - i);
+        
+        const month = date.getMonth() + 1; // 月份从0开始，所以要加1
+        const day = date.getDate();
+        
+        // 格式化为 'MM-DD'
+        const formattedDate = `${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
+        dates.push(formattedDate);
+    }
+    
+    return dates;
+}
+
 import * as echarts from 'echarts';
 export default {
   name: 'RoseChart',
@@ -14,11 +34,13 @@ export default {
     },
     chartData: {
       type: Object,
+    },
+    dataType: {
     }
   },
   data() {
     return {
-      option: {} 
+      option: {}
     }
   },
   methods: {
@@ -29,17 +51,17 @@ export default {
       this.option = {
         title: {
           text: '近一周产量趋势',
-          textStyle:{
+          textStyle: {
-            color:'#fff'
+            color: '#fff'
           }
         },
         tooltip: {
           trigger: 'axis'
         },
         legend: {
-          data: ['机芯1线', '机芯2线', '盖板线', '整机线'],
+          data: this.dataType == '整机' ? ['整机线'] : ['机芯1线', '机芯2线', '盖板线'],
-          textStyle:{
+          textStyle: {
-            color:'#fff'
+            color: '#fff'
           }
         },
         grid: {
@@ -47,51 +69,56 @@ export default {
           right: '4%',
           bottom: '3%',
           containLabel: true
-        }, 
+        },
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          axisLine:{
+          axisLine: {
-              lineStyle:{
+            lineStyle: {
-                color:'#fff'
+              color: '#fff'
-              }
+            }
-            },
+          },
-          data: ['12-06', '12-07', '12-08', '12-09', '12-10', '12-11', '12-12']
+          data:  getRecentWeekDates()
         },
         yAxis: {
           type: 'value',
-          axisLine:{
+          axisLine: {
-              lineStyle:{
+            lineStyle: {
-                color:'#fff'
+              color: '#fff'
-              }
+            }
-            },
+          },
         },
-        series: [
+        series:
-          {
+          this.dataType == '整机' ?
-            name: '机芯1线',
+            [
-            type: 'line',
+              {
-            stack: 'Total',
+                name: '整机线',
-            data: [120, 132, 101, 134, 90, 230, 210]
+                type: 'line',
-          },
+                stack: 'Total',
-          {
+                data: [133, 162, 191, 134, 130, 230, 310]
-            name: '机芯2线',
+              }
-            type: 'line',
+            ] :
-            stack: 'Total',
+            [
-            data: [150, 142, 111, 114, 120, 120, 110]
+
-          },
+              {
-          {
+                name: '机芯1线',
-            name: '盖板线',
+                type: 'line',
-            type: 'line',
+                stack: 'Total',
-            stack: 'Total',
+                data: [120, 132, 101, 134, 90, 230, 210]
-            data: [130, 232, 201, 154, 190, 330, 410]
+              },
-          },
+              {
-          {
+                name: '机芯2线',
-            name: '整机线',
+                type: 'line',
-            type: 'line',
+                stack: 'Total',
-            stack: 'Total',
+                data: [150, 142, 111, 114, 120, 120, 110]
-            data: [133, 162, 191, 134, 130, 230, 310]
+              },
-          }
+              {
-        ]
+                name: '盖板线',
+                type: 'line',
+                stack: 'Total',
+                data: [130, 232, 201, 154, 190, 330, 410]
+              }
+            ]
       };
       myChart.setOption(this.option);
     },
@@ -114,9 +141,9 @@ export default {
 </script>
 
 <style lang="less">
-#rose-chart {  
+#rose-chart {
   box-sizing: border-box;
-  color: white; 
+  color: white;
 
   .pie-chart-container {
     height: 100%

src/components/baozuo-demo/LeftChart2.vue

@@ -1,10 +1,27 @@
 <template>
-  <div id="rose-chart2">
+  <div id="rose-chart2"  style="flex:1" >
     <div :id="pieId" class="pie-chart-container"></div>
   </div>
 </template>
 
 <script>
+function getRecentSixMonths() {
+    const months = [];
+    const today = new Date();
+
+    for (let i = 5; i >= 0; i--) {
+        const date = new Date(today);
+        date.setMonth(today.getMonth() - i);
+
+        const month = date.getMonth() + 1; // 月份从0开始，所以要加1
+
+        // 格式化为 'X月'
+        const formattedMonth = `${month}月`;
+        months.push(formattedMonth);
+    }
+
+    return months;
+}
 import * as echarts from 'echarts';
 export default {
   name: 'RoseChart',
@@ -14,6 +31,8 @@ export default {
     },
     chartData: {
       type: Object,
+    },
+    dataType: {
     }
   },
   data() {
@@ -41,7 +60,7 @@ export default {
           trigger: 'axis',
         },
         legend: {
-          data: ['机芯1线', '机芯2线', '盖板线'],
+          data: this.dataType == '整机' ?['机芯1线', '机芯2线', '盖板线'] : ['整机线'],
           textStyle:{
             color:'#fff'
           }
@@ -58,7 +77,7 @@ export default {
               }
             },
             // prettier-ignore
-            data: ['6月', '7月', '8月', '9月', '10月', '11月'],
+            data:getRecentSixMonths(),
           },
         ],
         yAxis: [
@@ -71,7 +90,27 @@ export default {
             },
           }
         ],
-        series: [
+        series:
+        this.dataType == '整机' ?
+        [
+          {
+            name: '整机线',
+            type: 'bar',
+            data: [
+            75, 65, 68, 69, 40, 82
+            ],
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            },
+            markLine: {
+              data: [{ type: 'average', name: 'Avg' }]
+            }
+          }
+        ]:
+        [
           {
             name: '机芯1线',
             type: 'bar',

src/components/baozuo-demo/RightChart1.vue

@@ -8,6 +8,10 @@
 <script>
 export default {
   name: 'RightChart1',
+  props: { 
+    dataType: {
+    }
+  },
   data () {
     function generateRandomData(N, title) {
       const data = [];
@@ -26,7 +30,7 @@ export default {
 
         // 创建新的数据项
         const newDataItem = [
-          `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
+          //`PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
           title,  // 固定值 
           orderQuantity,  // 订单量 
           completedQuantity  // 完成数量
@@ -39,12 +43,21 @@ export default {
       }
       return data;
     }
+    let data = [];
+    
+    ['U1电源线压板', '接地线[160mm]', '硅胶管[4*7，50cm,棕色]', '卡箍[内径7.5mm]', '防倒流器[进气口倾斜45度]', '硅胶管[5*8,90mm]', '卡箍[内径7.5mm]', '夜灯[灯光蓝色,360±5mm长度,2P黄色插头]', '卡箍[内径7.5mm]', 'U1烘干上壳', '扎带[3*10]', '即热器电源线[24cm]', '发热丝[220V]', '大泵电源线[连接线,450mm]', '脚感[连接线,600mm]', '硅胶管[4*7,120mm]', '卡箍[内径7.5mm]', '进水2分管[900mm]', '分配阀[2进4出,1直3弯]', '气泵[线长40cm,减震棉2mm]', '盘头自攻螺丝[4*30,304不锈钢,平尾]', '盘头机牙螺丝[4*6,带垫片,430不锈钢]', 'U1线卡', '漏保电源线[220V,10A]', '硅胶管[4*7,230mm]', '盘头机牙螺丝[4*6,带垫片,430不锈钢]', '风机', '硅胶管[4*7,150mm]', '水杀菌[线长度220mm±5mm]', '硅胶管[4*7,120mm]', '硅胶管[4*7,140mm]', '出泡头[带10cm硅胶管]', '即热器', 'U1气泵压板', '减压阀', '主控板', '喷杆[35电机,塑料喷杆,硅胶管140mm]', 'U1单边水箱防水罩', '接地铜片[20*20]', '盘头自攻螺丝[4*10,430不锈钢]', '盘头自攻螺丝[4*9,430不锈钢,平尾]', 'U1底座[白色]', 'U1烘干下壳'].forEach(a=>{
+
+      data = [...data,...generateRandomData(1, a)];
+    })
+
     return {
       config: {
-        header: ['工单号', '物料名称', '备料数', '欠数料'],
+        header: [
-        data: generateRandomData(60, 'U1电源线压板'),
+          //'工单号',
-        index: true,
+         '物料名称', '备料数', '欠数料'],
-        columnWidth: [50],
+        data: data,
+           index: false,
+        columnWidth: [300],
         align: ['center']
       },
     }

src/components/baozuo-demo/index.vue

@@ -9,63 +9,79 @@
       <dv-border-box-1 class="main-container" style="height: 50%;">
 
 
-        <div class="rmc-top-container">
+        <div class="rmc-top-container" v-if="switchType == 1">
-
+          <dv-border-box-3 class="rmctc-left-container" style="height:100%;display: flex;">
-          <dv-border-box-3 class="rmctc-left-container"  style="height:100%" > 
+            <Left-Chart-1 :dataType="dataType" :pieId="'leftchar1'"/>
-            <Left-Chart-1 :pieId="'leftchar1'" style="height:50%" />
+            <Left-Chart-2 :dataType="dataType" :pieId="'leftchar2'"   />
-            <Left-Chart-2 :pieId="'leftchar2'"  style="height:40%;margin-top: 10%;"  /> 
           </dv-border-box-3>
-          <dv-border-box-3 class="rmctc-middle-container">
+          <div class="rmctc-right-container" v-if="false" >
-
-            <Center-Cmp />
-
-          </dv-border-box-3>
-
-          <div class="rmctc-right-container">
             <dv-border-box-3 class="rmctc-chart-1">
-
+              <Right-Chart-1 :dataType="dataType" />
-              <Right-Chart-1 />
+            </dv-border-box-3>
-
-            </dv-border-box-3> 
           </div>
         </div>
+        <div class="rmc-top-container" v-if="switchType == 2">
+          <dv-border-box-3 class="rmctc-middle-container">
+            <Center-Cmp :dataType="dataType" />
+          </dv-border-box-3>
+        </div>
 
       </dv-border-box-1>
 
-      
-      <dv-border-box-4 class="rmc-bottom-container"  style="height: 45%;">
 
-          <Bottom-Charts />
+      <dv-border-box-4 class="rmc-bottom-container" style="height: 45%;">
 
-        </dv-border-box-4>
+        <Bottom-Charts :dataType="dataType" />
 
-            </dv-full-screen-container>
+      </dv-border-box-4>
-          </div>
+
+    </dv-full-screen-container>
+  </div>
 </template>
 
 <script>
 import topHeader from './topHeader'
 import LeftChart1 from './LeftChart1'
-import LeftChart2 from './LeftChart2' 
+import LeftChart2 from './LeftChart2'
 
 import CenterCmp from './CenterCmp'
 
-import RightChart1 from './RightChart1' 
+import RightChart1 from './RightChart1'
 
 import BottomCharts from './BottomCharts'
 
 export default {
   name: 'DataView',
+
   components: {
     topHeader,
     LeftChart1,
-    LeftChart2, 
+    LeftChart2,
     CenterCmp,
-    RightChart1, 
+    RightChart1,
     BottomCharts
+  }, 
+  created() {
+     // 获取 URL 查询参数并设置 dataType
+     const queryParams = new URLSearchParams(window.location.search);
+    const dataTypeParam = queryParams.get('q');
+    
+    if (dataTypeParam === '1') {
+      this.dataType = '整机';
+    } else {
+      this.dataType = ''; // 如果不是 '1'，则设置为空
+    }
+
+    setInterval(() => {
+      this.switchType = this.switchType == 1 ? 2 : 1
+    }, 1000099); // 10000 毫秒 = 10 秒
   },
   data() {
-    return {}
+    return {
+      dataType:'',
+      dataType2:'整机',
+      switchType: 2
+    }
   }
 }
 </script>
@@ -111,7 +127,7 @@ export default {
   }
 
   .main-container {
-    
+
 
     .border-box-content {
       padding: 20px;
@@ -119,7 +135,7 @@ export default {
       display: flex;
     }
   }
- 
+
 
   .right-main-container {
     width: 75%;
@@ -129,24 +145,26 @@ export default {
 
   .rmc-top-container {
     height: 100%;
-    width:100%;
+    width: 100%;
     display: flex;
   }
 
   .rmctc-left-container {
-    width: 25%; 
+    width: 100%;
     padding: 10px;
     box-sizing: border-box;
 
     .border-box-content {
-      flex-direction: column;
+      flex-direction: row;
     }
   }
+
   .rmctc-middle-container {
-    width: 50%;
+    width: 100%;
   }
+
   .rmctc-right-container {
-    width: 25%;
+    width: 50%;
   }
 
   .rmc-bottom-container {
@@ -154,7 +172,7 @@ export default {
 
   }
 
-  .rmctc-chart-1  {
+  .rmctc-chart-1 {
     height: 100%;
   }
 }

src/components/bi/BarChart.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="bar-chart" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'BarChart',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      mockData: {
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          data: [120, 200, 150, 80, 70, 110, 130],
+          type: 'bar',
+          itemStyle: {
+            color: '#409EFF'
+          }
+        }]
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption(this.mockData)
+      window.addEventListener('resize', this.resizeHandler)
+    },
+    resizeHandler() {
+      this.chart.resize()
+    }
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.resizeHandler)
+    if (this.chart) {
+      this.chart.dispose()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bar-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/bi/index.js

@@ -0,0 +1,7 @@
+import BarChart from './BarChart.vue'
+import StackedBarChart from './StackedBarChart.vue'
+
+export default {
+  BarChart,
+  StackedBarChart
+}

src/components/datav/index.js

@@ -0,0 +1,21 @@
+import BarChart from './barChart.vue'
+import StackedBarChart from './barChart.vue'
+import DynamicBarChart from './barChart.vue'
+import PieChart from './roseChart.vue'
+import RingChart from './roseChart.vue'
+import RoseChart from './roseChart.vue'
+import LineChart from './scrollBoard.vue'
+import AreaChart from './scrollBoard.vue'
+import StackedLineChart from './scrollBoard.vue'
+
+export default {
+  BarChart,
+  StackedBarChart,
+  DynamicBarChart,
+  PieChart,
+  RingChart,
+  RoseChart,
+  LineChart,
+  AreaChart,
+  StackedLineChart
+}

src/main.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 
 import './assets/common.less'
 
@@ -9,18 +11,19 @@ import api from './api'
 
 Vue.config.productionTip = false
 Vue.prototype.$api = api
-  function resizeFont() {
+Vue.use(ElementUI)
-    const designWidth = 1920; // 设计稿宽度，例如iPhone 6的宽度
+function resizeFont() {
-    const maxWidth = 1920; // 最大支持宽度
+  const designWidth = 1920; // 设计稿宽度，例如iPhone 6的宽度
-    const screenWidth = Math.min(window.innerWidth, maxWidth);
+  const maxWidth = 1920; // 最大支持宽度
-    const scale = screenWidth / designWidth;
+  const screenWidth = Math.min(window.innerWidth, maxWidth);
-    document.documentElement.style.fontSize = `${100 * scale}px`;
+  const scale = screenWidth / designWidth;
-  }
+  document.documentElement.style.fontSize = `${100 * scale}px`;
-  // 初始调用
+}
-  resizeFont();
+// 初始调用
-  // 监听窗口大小变化
+resizeFont();
-  window.addEventListener('resize', resizeFont);
+// 监听窗口大小变化
-let fontSize = function(res) {
+window.addEventListener('resize', resizeFont);
+let fontSize = function (res) {
   let clientWidth =
     window.innerWidth ||
     document.documentElement.clientWidth ||
@@ -32,7 +35,7 @@ let fontSize = function(res) {
 Vue.prototype.$fontSize = fontSize
 Vue.use(dataV)
 Vue.use(scroll)
-Vue.use(scroll,{componentName: 'scroll-seamless'})
+Vue.use(scroll, { componentName: 'scroll-seamless' })
 new Vue({
   render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Designer from '@/pages/bi/designer.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  mode: 'history',
+  routes: [
+    {
+      path: '/designer',
+      name: 'Designer',
+      component: Designer
+    }
+  ]
+})