看板修改

js/chart.js

@@ -1,25 +1,13 @@
 // 绘制中间动态环图
-const drawWorkShopChart = (myChart, datas) => {
+const drawWorkShopChart = (datas) => {
     const options = [];
     let number = 50;
     datas.forEach((item) => {
-        const obj = { value: number, name: item.name };
+        const obj = { value: number, name: item.name,...item };
         options.push(obj);
         number += 10;
     });
     const workShopOption = {
-        title: [{
-            show: true,
-            text: "",
-            textStyle: {
-                color: "white",
-                fontSize: 24,
-                fontWeight: "bold"
-            },
-            top: "48%",
-            left: "26%"
-        },
-        ],
         series: [
             {
                 name: 'pie',
@@ -39,23 +27,16 @@ const drawWorkShopChart = (myChart, datas) => {
                     show: false,
                     position: 'center'
                 },
-                emphasis: {
-                    label: {
-                        show: true,
-                        fontSize: 24,
-                        fontWeight: "bold",
-                    },
-                },
                 labelLine: {
                     show: false
                 },
                 selectedMode: 'single',
-                selectedOffset: 20,
+                selectedOffset: 6,
                 // 选中的样式
                 select: {
                     label: {
                         show: true,
-                        fontSize: 24,
+                        fontSize: 20,
                         fontWeight: 'bold',
                         color: "#ffffff"
                     },
@@ -64,37 +45,6 @@ const drawWorkShopChart = (myChart, datas) => {
             }
         ]
     };
-    workShopOption.title[0].text = workShopOption.series[0].data[0].name;
-    window.dispatchEvent(
-        new CustomEvent("onmessageChange", {
-            detail: {
-                warehouseId: datas[0].id
-            },
-        })
-    );
-    let index = 1;
-    window.timeTicket = window.setInterval(() => {
-        if (index > datas.length - 1) {
-            index = 0
-        }
-        myChart.dispatchAction({
-            type: 'select',
-            seriesIndex: 0,
-            dataIndex: index
-        });
-
-        window.dispatchEvent(
-            new CustomEvent("onmessageChange", {
-                detail: {
-                    warehouseId: datas[index].id
-                },
-            })
-        );
-        myChart.setOption({
-            title: [{ text: '' }],
-        });
-        index++
-    }, 6000 * 10 * 1)
 
     return workShopOption
 }
@@ -157,7 +107,7 @@ const drawMalfunctionNumber = () => {
                     padding: [0, 0, 0, 0],
                     textStyle: {
                         color: '#ffffff',
-                        fontSize: '14',
+                        fontSize: '12',
                     }
                 },
                 data: yName
@@ -172,7 +122,7 @@ const drawMalfunctionNumber = () => {
                     margin: 10,
                     textStyle: {
                         color: '#ffffff',
-                        fontSize: '14',
+                        fontSize: '12',
                     }
                 },
                 data: number,
@@ -269,7 +219,7 @@ const drawMalfunctionChart = () => {
             icon: "rect",
             right: 0,
             textStyle: {
-                fontSize: 14,
+                fontSize: 12,
                 fontFamily: "PingFangSC, PingFang SC",
                 fontWeight: 400,
                 color: "#ffffff",
@@ -283,13 +233,13 @@ const drawMalfunctionChart = () => {
             boundaryGap: false,
             data: stateData.xData,
             nameTextStyle: {
-                fontSize: 14,
+                fontSize: 12,
                 fontFamily: "PingFangSC, PingFang SC",
                 fontWeight: 400,
                 color: "#ffffff",
             },
             axisLabel: {
-                fontSize: 14,
+                fontSize: 12,
                 fontFamily: "PingFangSC, PingFang SC",
                 fontWeight: 400,
                 color: "#ffffff",
@@ -299,13 +249,13 @@ const drawMalfunctionChart = () => {
             type: "value",
             name: "数量",
             nameTextStyle: {
-                fontSize: 14,
+                fontSize: 12,
                 fontFamily: "PingFangSC, PingFang SC",
                 fontWeight: 400,
                 color: "#ffffff",
             },
             axisLabel: {
-                fontSize: 14,
+                fontSize: 12,
                 fontFamily: "PingFangSC, PingFang SC",
                 fontWeight: 400,
                 color: "#ffffff",
@@ -600,7 +550,7 @@ const drawMaintainChart = () => {
                         formatter: (e) => {
                             return e.value / 1000 * 100 + '%';
                         },
-                        fontSize: 16,
+                        fontSize: 12,
                         color: '#ffffff',
                         offset: [0, -10],
                     },
@@ -652,7 +602,7 @@ const drawOutInChart = () => {
             axisLabel: {
                 interval: 0,
                 color: '#ffffff',
-                fontSize: 16
+                fontSize: 14
             },
         },
         yAxis: {
@@ -661,7 +611,7 @@ const drawOutInChart = () => {
                 margin: 30,
                 show: true,
                 color: '#ffffff',
-                fontSize: 16
+                fontSize: 14
             },
             axisTick: {
                 show: false,
@@ -752,12 +702,12 @@ const drawCountChart = (dieCountChart, data) => {
                 fontWeight: "400",
                 rich: {
                     a: {
-                        fontSize: 30,
+                        fontSize: 24,
                         color: "#00baff",
                         fontWeight: "600",
                     },
                     c: {
-                        fontSize: 40,
+                        fontSize: 30,
                         color: "#00baff",
                         padding: [6, 4],
                     },
@@ -795,13 +745,13 @@ const drawCountChart = (dieCountChart, data) => {
                 radius: ["23%", "28%"],
                 avoidLabelOverlap: false,
                 hoverAnimation: true,
-                minAngle:26,
-                color: ["#50aee4", "#f90c29", "#2f67f6", "#0d2983",'#7979f7'],
+                minAngle: 26,
+                color: ["#50aee4", "#f90c29", "#2f67f6", "#0d2983", '#7979f7'],
                 label: {
                     normal: {
-                        show:true,
+                        show: true,
                         formatter: "{b} {c}",
-                        fontSize: 16,
+                        fontSize: 14,
                         fontWeight: 600,
                         color: "#ffffff",
                     },
@@ -829,7 +779,7 @@ const drawCountChart = (dieCountChart, data) => {
                 emphasis: {
                     label: {
                         show: true,
-                        fontSize: 13,
+                        fontSize: 16,
                         fontWeight: "bold",
                     },
                 },
@@ -1095,22 +1045,6 @@ const drawCountChart = (dieCountChart, data) => {
         return dataArr;
     }
 
-    // function doing() {
-    //     let option1 = dieCountChart.getOption();
-    //     option1.series[2].startAngle = option1.series[2].startAngle + 10;
-    //     option1.series[4].startAngle = option1.series[4].startAngle - 10;
-    //     option1.series[5].startAngle = option1.series[5].startAngle + 5;
-    //     dieCountChart.setOption(option1);
-    // }
-
-    // function startTimer() {
-    //     timer = setInterval(doing, 100);
-    // }
-
-    // 过渡完成后开始动画
-    // dieCountChart.on("finished", () => {
-    //     setTimeout(startTimer, 0);
-    // });
     return option2
 
 }

js/common.js

@@ -4,7 +4,7 @@ const getRootPath = () => {
     const localhostPath = protocol + '//' + host;
 
     return 'http://192.168.1.106:8083';
-    // return localhostPath;s
+    // return localhostPath;
 
 }
 // 获取API的地址

js/util.js

@@ -20,11 +20,9 @@ const getElement = (id) => {
 }
 
 // 获取url参数
-const getQueryString = (name) => {
-  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
-  var r = window.location.search.substr(1).match(reg);
-  if (r != null) {
-      return unescape(r[2]);
-  }
-  return null;
+const getQueryString = () => {
+  let urlStr = window.location.href.split("?")[1];
+  const urlSearchParams = new URLSearchParams(urlStr);
+  const result = Object.fromEntries(urlSearchParams.entries());
+  return result;
 }

templates/mouldBoard.html

@@ -2,10 +2,12 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <meta
+    <meta name="viewport" content="width=1920">
+    <!-- <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"
+    /> -->
+
     <title>index</title>
     <script type="text/javascript" src="../plugin/jquery.min.js"></script>
     <script type="text/javascript" src="../plugin/echarts.min.js"></script>
@@ -143,17 +145,16 @@
             warehouse: null,
             workShopDatas: null,
             warehouseId: null,
+            warehouseName: "",
           };
         },
         methods: {
           // 创建并渲染中间车间环图
           createWorkShopChart() {
             const _self = this;
-            const workShopOption = drawWorkShopChart(
-              _self.workShopChart,
-              _self.workShopDatas
-            );
+            const workShopOption = drawWorkShopChart(_self.workShopDatas);
             initChart(_self.workShopChart, workShopOption);
+            _self.getBoardInfo();
           },
 
           // 创建并渲染左下角模检具数量图
@@ -241,18 +242,21 @@
             this.maintainChart.setOption({
               series: [
                 { type: "custom", name: "时效", data: yData },
-                { type: "bar", name: "比例", data: yData,
+                {
+                  type: "bar",
+                  name: "比例",
+                  data: yData,
                   label: {
                     normal: {
                       formatter: (e) => {
-                        if(value == 0){
+                        if (value == 0) {
                           value = 1;
                         }
-                        return e.value / value * 100 + '%';
+                        return (e.value / value) * 100 + "%";
                       },
-                    }
-                  }},
-
+                    },
+                  },
+                },
               ],
             });
           },
@@ -300,9 +304,13 @@
           }, 200),
 
           // 获取当前展示的仓库id
-          getWarehouseId({ detail }) {
+          getWarehouseId() {
             const _self = this;
-            _self.warehouseId = detail.warehouseId;
+            // 看板盒子从url获取
+            // const params = getQueryString();
+            // _self.warehouseId = params.warehouseId;
+            // apk 安装包写死（需要多个页面）
+            _self.warehouseId = 460335910907969;
           },
 
           // 获取所有车间信息
@@ -311,7 +319,15 @@
             const url = "/api/WarehouseResource/queryAllWarehouse";
             ajaxGet(url).then((success) => {
               if (success.errorCode === 0) {
-                _self.workShopDatas = success.datas;
+                if (success.datas) {
+                  success.datas.forEach((item) => {
+                    if (item.id == _self.warehouseId) {
+                      item.selected = true;
+                      _self.warehouseName = item.name;
+                    }
+                  });
+                  _self.workShopDatas = success.datas;
+                }
                 _self.createWorkShopChart();
               } else {
                 console.log(success.errorMessage);
@@ -320,10 +336,10 @@
           },
 
           // 获取看板信息
-          getBoardInfo(warehouseId) {
+          getBoardInfo() {
             const _self = this;
             const url = "/api/BulletinBoardResource/queryBoardByWarehouse";
-            const params = [["warehouseId", warehouseId]];
+            const params = [["warehouseId", _self.warehouseId]];
             ajaxGet(url, params).then((success) => {
               if (success.errorCode === 0) {
                 if (success.data) {
@@ -336,7 +352,9 @@
                     success.data; // 右下角出入库
 
                   // 更新左上角
-                  _self.count = boardInventoryQuantityDto;
+                  if (boardInventoryQuantityDto) {
+                    _self.count = boardInventoryQuantityDto;
+                  }
                   // 更新左下角
                   if (count && count.length > 0) {
                     _self.updateCountChart(count);
@@ -367,14 +385,6 @@
             chart && chart.dispose();
           },
         },
-        watch: {
-          warehouseId(newVal, oldValue) {
-            var _self = this;
-            if (newVal !== oldValue) {
-              _self.getBoardInfo(newVal);
-            }
-          },
-        },
         mounted() {
           const _self = this;
           _self.outInChart = getElement("outInChart");
@@ -383,7 +393,7 @@
           _self.maintainChart = getElement("maintainChart");
           _self.malfunctionChart = getElement("malfunctionChart");
           _self.malfunctionNumber = getElement("malfunctionNumber");
-
+          _self.getWarehouseId();
           _self.getAllWarehouse();
           _self.$nextTick(() => {
             _self.createCountChart();
@@ -394,11 +404,14 @@
             window.addEventListener("resize", _self.cancalDebounce);
             window.addEventListener("onmessageChange", _self.getWarehouseId);
           });
+          _self.timer = setInterval(() => {
+            _self.getBoardInfo();
+          }, 6000 * 10);
         },
         beforeUnmount() {
           const _self = this;
-          window.clearInterval(window.timeTicket);
-          window.timeTicket = null;
+          clearInterval(_self.timer);
+          _self.timer = null;
           _self.disposeChart(_self.outInChart);
           _self.disposeChart(_self.workShopChart);
           _self.disposeChart(_self.maintainChart);

templates/workShopBoard.html

@@ -145,7 +145,8 @@
 
         mounted() {
           const _self = this;
-          this.warehouseId = getQueryString("warehouseId");
+          const params = getQueryString();
+          _self.warehouseId = params.warehouseId;
           _self.getTableDatas();
           _self.getWarehouseInfo();
           _self.timer = setInterval(() => {