显示

src/views/bpm/vis-page/productionSchedule.vue

@@ -8,8 +8,7 @@
   >
     <div class="box-container">
       <div class="box-header">
-        <div class="logo">
-        </div>
+        <div class="logo"> </div>
         <div class="title"> 生产进度看板 </div>
         <div class="time">
           <span
@@ -72,6 +71,7 @@
           <dv-scroll-board
             v-if="isFlag"
             :config="config"
+            ref="dvScrollBoard"
             style="width: 90%; height: 87%; transform: translate(5%, 1%)"
           />
         </div>
@@ -85,7 +85,11 @@
   import * as echarts from 'echarts';
   import { component } from 'vue-fullscreen';
   import { isFullscreen } from 'ele-admin';
-  import { count, getSalesFinishListAPI, completionCount } from '@/api/mes/productionSchedule'
+  import {
+    count,
+    getSalesFinishListAPI,
+    completionCount
+  } from '@/api/mes/productionSchedule';
 
   export default {
     name: 'index',
@@ -216,17 +220,17 @@
           {
             titleName: '生产总数',
             titleUnit: '',
-            value: '0',
+            value: '0'
           },
           {
             titleName: '待生产数量',
             titleUnit: '',
-            value: '0',
+            value: '0'
           },
           {
             titleName: '已完成数量',
             titleUnit: '',
-            value: '0',
+            value: '0'
           },
           // {
           //   titleName: '工时统计',
@@ -237,7 +241,7 @@
           {
             titleName: '生产中数量',
             titleUnit: '',
-            value: '',
+            value: ''
           }
         ],
         monthlySalesVolumeOption: {
@@ -272,16 +276,18 @@
               }
             }
           },
-          yAxis: [{
-            type: 'value',
-            axisLabel: {
-              textStyle: {
-                color: '#fff', // 修改字体颜色为红色
-                fontSize: '0.7rem',
-                fontFamily: 'AlibabaPuHuiTi' // 修改字体为Arial
+          yAxis: [
+            {
+              type: 'value',
+              axisLabel: {
+                textStyle: {
+                  color: '#fff', // 修改字体颜色为红色
+                  fontSize: '0.7rem',
+                  fontFamily: 'AlibabaPuHuiTi' // 修改字体为Arial
+                }
               }
-            }
-          }, {
+            },
+            {
               type: 'value',
               max: 100,
               min: 0,
@@ -292,9 +298,10 @@
                   fontFamily: 'AlibabaPuHuiTi' // 修改字体为Arial
                 },
                 show: true,
-                formatter: "{value}%", //右侧Y轴文字显示
+                formatter: '{value}%' //右侧Y轴文字显示
               }
-            }],
+            }
+          ],
           series: []
         },
         monthlyOutputOption: {
@@ -354,7 +361,7 @@
           data: [],
           align: ['center', 'center', 'center', 'center', 'center', 'center'],
           headerBGC: '#031d42',
-          columnWidth: [110,200],
+          // columnWidth: [90,160,160],
           headerHeight: 20,
           oddRowBGC: '#031d42',
           evenRowBGC: '#031d42',
@@ -438,17 +445,32 @@
       /* 全屏切换 */
       onFullscreen() {
         this.isFullscreen = !this.isFullscreen;
+        this.$nextTick(() => {
+          setTimeout(() => {
+            let width =
+              this.$refs.dvScrollBoard && this.$refs.dvScrollBoard.width;
+
+            if (width) {
+              console.log(width);
+              this.$set(
+                this.config,
+                'columnWidth',
+                [10, 18, 13, 37, 12, 10].map((value) => (value * width) / 100)
+              );
+            }
+          });
+        });
       },
       //获取头部统计
       async getAllAmount() {
-        let rest = await count({factoriesId: 0});
+        let rest = await count({ factoriesId: 0 });
         this.borderData.forEach(async (item) => {
           if (item.titleName === '生产总数') {
             item.value = rest.formingNum || 0;
           } else if (item.titleName === '待生产数量') {
             item.value = rest.pendingProductionCount || 0;
           } else if (item.titleName === '已完成数量') {
-            item.value = rest.formedNum || 0; 
+            item.value = rest.formedNum || 0;
           } else if (item.titleName === '生产中数量') {
             item.value = rest.inProgressWorkOrderCount || 0;
           }
@@ -461,7 +483,7 @@
           startDate: new Date().getFullYear() + '-01-01',
           endDate: new Date().getFullYear() + '-12-31',
           factoriesId: 0
-        }
+        };
         let data = await completionCount(params);
         let series = [
           {
@@ -487,7 +509,7 @@
             name: '合格率',
             data: [],
             type: 'line',
-            yAxisIndex: 1,
+            yAxisIndex: 1
           }
         ];
         this.monthlySalesVolumeOption.xAxis.data = data.map(
@@ -496,9 +518,9 @@
         series.forEach((item) => {
           item.data = data.map((i) => {
             if (item.field === 'qualifiedRate' && i['formedNum'] > 0) {
-              return 100
+              return 100;
             }
-            return  i[item.field]
+            return i[item.field];
           });
         });
         this.monthlySalesVolumeOption.series = series;
@@ -510,7 +532,7 @@
           startDate: new Date().getFullYear() + '-01-01',
           endDate: new Date().getFullYear() + '-12-31',
           factoriesId: 0
-        }
+        };
         let data = await completionCount(params);
         let series = [
           {
@@ -532,7 +554,9 @@
             }
           }
         ];
-        this.monthlyOutputOption.xAxis.data = data.map((item) => item.inProductDate);
+        this.monthlyOutputOption.xAxis.data = data.map(
+          (item) => item.inProductDate
+        );
         series.forEach((item) => {
           item.data = data.map((i) => i[item.field]);
         });
@@ -542,12 +566,12 @@
       //生产工单
       async getSalesFinishList() {
         /*serialNo	客户代号	string
-days	交付状态 N剩余N天 0已完成 -1延期	integer(int32)
-productName 名称	integer(int32)
-productCode	设备编码 1未采购2已采购3已入库	integer(int32)
-code	工单号	string
-taskName 当前工序	*/
-        let data = await getSalesFinishListAPI({factoriesId: 0});
+  days	交付状态 N剩余N天 0已完成 -1延期	integer(int32)
+  productName 名称	integer(int32)
+  productCode	设备编码 1未采购2已采购3已入库	integer(int32)
+  code	工单号	string
+  taskName 当前工序	*/
+        let data = await getSalesFinishListAPI({ factoriesId: 0 });
         this.config = {
           header: this.tableHeader.map(
             (item) =>
@@ -559,23 +583,25 @@ taskName 当前工序	*/
               for (let i in item) {
                 let div = '';
                 if (i === 'serialNo') {
-                  div = `<div class="white" style="font-size: 0.8rem;">${item[i] || '无'}</div>`;
+                  div = `<div class="white" style="font-size: 0.8rem;" title="${item[i]}">${
+                    item[i] || '无'
+                  }</div>`;
                   list[0] = div;
                 }
                 if (i === 'code') {
-                  div = `<div class="white" style="font-size: 0.8rem;">${item[i]}</div>`;
+                  div = `<div class="white" style="font-size: 0.8rem;" title="${item[i]}">${item[i]}</div>`;
                   list[1] = div;
                 }
                 if (i === 'productCode') {
-                  div = `<div class="yellow" style="font-size: 0.8rem;">${item[i]}</div>`;
+                  div = `<div class="yellow" style="font-size: 0.8rem;" title="${item[i]}">${item[i]}</div>`;
                   list[2] = div;
                 }
                 if (i === 'productName') {
-                    div = `<div class="white" style="font-size: 0.8rem;">${item[i]}</div>`;
-                    list[3] = div;
+                  div = `<div class="white" style="font-size: 0.8rem;" title="${item[i]}">${item[i]}</div>`;
+                  list[3] = div;
                 }
                 if (i === 'taskName') {
-                  div = `<div class="yellow" style="font-size: 0.8rem;">${item[i]}</div>`;
+                  div = `<div class="yellow" style="font-size: 0.8rem;" title="${item[i]}">${item[i]}</div>`;
                   list[4] = div;
                 }
                 if (i === 'days') {
@@ -588,7 +614,7 @@ taskName 当前工序	*/
                     div = `<div class="green" style="font-size: 0.8rem;">已完成</div>`;
                     list[5] = div;
                   }
-                  if (item[i] >  0) {
+                  if (item[i] > 0) {
                     div = `<div class="yellow" style="font-size: 0.8rem;">剩余${item[i]}天</div>`;
                     list[5] = div;
                   }
@@ -598,13 +624,23 @@ taskName 当前工序	*/
             }) ?? [],
           align: ['center', 'center', 'center', 'center', 'center', 'center'],
           headerBGC: '#031d42',
-          columnWidth: [100,200],
+          // columnWidth: [100,200,150,350,100,100],
           headerHeight: 30,
           oddRowBGC: '#031d42',
           evenRowBGC: '#031d42',
           waitTime: 5000,
           rowNum: 10
         };
+        this.$nextTick(() => {
+          let width = this.$refs.dvScrollBoard.width;
+          if (width) {
+            this.$set(
+              this.config,
+              'columnWidth',
+              [10, 18, 13, 37, 12, 10].map((value) => (value * width) / 100)
+            );
+          }
+        });
       },
       //实时更新日期
       updateTime() {
@@ -639,6 +675,15 @@ taskName 当前工序	*/
   };
 </script>
 <style lang="scss" scoped>
+  :deep(.ceil) {
+    // min-width: 100px;
+
+    > div {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
   .box-container {
     font-size: 16px;
     font-family: 'AlibabaPuHuiTi';
@@ -820,6 +865,4 @@ taskName 当前工序	*/
   .red {
     color: red;
   }
-
-
 </style>