修改生产界面

hw-ui/package.json

@@ -40,7 +40,7 @@
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
-    "echarts": "5.4.0",
+    "echarts": "5.5.0",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",

hw-ui/src/layout/index2.vue

@@ -1,18 +1,58 @@
 <template>
   <div>
     <router-view></router-view>
+    <div class="time" id="time">{{ time }}</div>
+    <div class="date" id="date">{{ date }}</div>
   </div>
 </template>
 
 <script>
 
+let getDateIntervalFun = null
 export default {
   name: 'BoardIndex',
   data() {
     return {
+      time: '',
+      date: ''
     }
   },
+  created() {
+    const getDate = () => {
+      let date = new Date()
+      let YYYY = date.getFullYear()
+      let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
+      let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
+      let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
+      let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
+      let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
+      this.date = `${YYYY} - ${MM} - ${dd}`
+      this.time = `${HH} : ${mm} : ${ss}`
+    }
+    getDate()
+    getDateIntervalFun = setInterval(getDate, 1000)
+  },
+  beforeDestroy() {
+    getDateIntervalFun = null
+  }
 }
 </script>
 <style scoped>
+.time, .date {
+  position: absolute;
+  font-size: 0.8vw;
+  color: #fcfcfc;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
+}
+
+.time {
+  top: 3.2%;
+  left: 85.8%;
+}
+
+.date {
+  top: 3.2%;
+  left: 94.1%;
+}
 </style>

hw-ui/src/views/board/warehouse/firstFloor.vue

@@ -1,29 +1,27 @@
 <template>
   <div class="app-container">
-    <div class="headTitle">京源生产监控平台</div>
+    <div class="headTitle">京源智能仓储监控平台</div>
-    <div v-for="(i,k) in title" :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
+    <div v-for="(i,k) in title"
+         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
          class="title">
       {{ i }}
     </div>
     <div class="table1">
-      <div style="background-color: #094170">
+      <div style="background-color: #094170aa">
-        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 10%">
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
-          编号
+          任务编号
-        </div>
-        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 23.333%">
-          生产工单
         </div>
         <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
-          计划数量
+          任务类型
         </div>
         <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
-          实际数量
+          物料名称
         </div>
         <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
-          差异值
+          库位编号
         </div>
         <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
-          完成率
+          时间
         </div>
       </div>
       <vue-seamless-scroll
@@ -36,13 +34,13 @@
           v-for="(item, index) in scrollTableData"
           :key="index"
         >
-          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
+          <div :style='"background-color:" + ((index % 2 === 0)? "#053460aa":"#032d57aa") '>
             <div
-              class="scrollTableItem" style="width: 10%">
+              class="scrollTableItem">
               {{ item.value1 }}
             </div>
             <div
-              class="scrollTableItem" style="width: 23.333%">
+              class="scrollTableItem">
               {{ item.value2 }}
             </div>
             <div
@@ -57,10 +55,6 @@
               class="scrollTableItem">
               {{ item.value5 }}
             </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value6 }}
-            </div>
           </div>
         </div>
       </vue-seamless-scroll>
@@ -77,6 +71,27 @@
     <div class="chart4">
       <Chart key="chart4" ref="chart4"></Chart>
     </div>
+    <div class="chart5">
+      <Chart key="chart5" ref="chart5"></Chart>
+    </div>
+    <div class="span1">可用库位占比</div>
+    <div class="span2">库存占用率</div>
+    <div class="info1">
+      <div class="infoSpan">当日入库量:</div>
+      <div class="infoSum" style="color:#bbc2c6;">1122</div>
+    </div>
+    <div class="info2">
+      <div class="infoSpan">当日入库量:</div>
+      <div class="infoSum" style="color:#a68b19;">1122</div>
+    </div>
+    <div class="info3">
+      <div class="infoSpan">当日入库量:</div>
+      <div class="infoSum" style="color:#01c038;">1122</div>
+    </div>
+    <div class="info4">
+      <div class="infoSpan">当日入库量:</div>
+      <div class="infoSum" style="color:#c0070c;">1122</div>
+    </div>
   </div>
 </template>
 
@@ -102,20 +117,20 @@ export default {
       ],
       titlePosition: [
         {
-          top: 11.3,
+          top: 19.7,
           left: 5.5
         },
         {
-          top: 11.3,
+          top: 19.7,
-          left: 75
+          left: 35.2
         },
         {
-          top: 63,
+          top: 59.8,
           left: 5.5
         },
         {
-          top: 63,
+          top: 59.8,
-          left: 30.5
+          left: 35.2
         },
       ],
       scrollTableOption: {
@@ -128,18 +143,13 @@ export default {
         singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
         waitTime: 0,
       },
-      scrollTableData: Array(50).fill('').map(function (i, k) {
+      scrollTableData: Array(4).fill('').map(function (i, k) {
-        let val1 = Math.ceil(Math.random() * 10000)
-        let val2 = val1 - Math.ceil(Math.random() * val1)
-        let val3 = val1 - val2
-        let val4 = ((val2 / val1) * 100).toFixed(2) + '%'
         return {
           value1: k + 1,
-          value2: "20230304" + k,
+          value2: '出库',
-          value3: val1,
+          value3: '物料1',
-          value4: val2,
+          value4: '000' + k,
-          value5: val3,
+          value5: '2024.03.04',
-          value6: val4,
         }
       }),
     }
@@ -147,104 +157,22 @@ export default {
   mounted() {
     this.$refs.chart1.setData({
       tooltip: {
-        trigger: 'axis',
+        trigger: "item",
-        axisPointer: {
-          // 坐标轴指示器，坐标轴触发有效
-          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-        }
       },
       grid: {
-        left: '0',
+        borderWidth: 0,
-        right: '4%',
+        top: "10%",
-        bottom: '0',
+        left: "10%",
-        top: 20,
+        right: "10%",
-        containLabel: true
+        bottom: "10%",
-      },
-      xAxis: {
-        type: 'category',
-        data: [1, 2, 3, 4, 5, 6],
-        axisLine: {
-          lineStyle: {
-            color: 'white'
-          }
       },
-        axisLabel: {
-          // interval: 0,
-          // rotate: 40,
-          textStyle: {
-            fontFamily: 'Microsoft YaHei'
-          }
-        }
-      },
-
       yAxis: {
-        type: 'value',
-        axisLine: {
-          show: false,
-          lineStyle: {
-            color: 'white'
-          }
-        },
-        splitLine: {
-          show: false
-        },
-        axisLabel: {}
-      },
-      series: [
-        {
-          name: '数量',
-          label: {
-            normal: {
-              show: true,
-              position: 'top',
-              textStyle: {
-                color: '#a8aab0',
-                fontStyle: 'normal',
-                fontFamily: '微软雅黑',
-                fontSize: 0.75 * vw
-              }
-            }
-          },
-          type: 'bar',
-          barWidth: '30%',
-          barMaxWidth: 50,
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: '#39ffff'
-                },
-                {
-                  offset: 1,
-                  color: '#5affa6'
-                }
-              ])
-            }
-          },
-          data: [1, 2, 3, 4, 5, 6]
-        }
-      ]
-    })
-    this.$refs.chart2.setData({
-      grid: {
-        top: 30,
-        left: "2%",
-        right: "5%",
-        bottom: "2%",
-        containLabel: true,
-      },
-      xAxis: {
         type: "category",
-        boundaryGap: false,
-        data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
         axisLabel: {
           margin: 10,
           color: "#ffffff63",
         },
-        axisLine: {
+
-          show: false,
-        },
         axisTick: {
           show: true,
           lineStyle: {
@@ -252,21 +180,29 @@ export default {
           },
         },
         splitLine: {
-          show: false,
+          show: true,
           lineStyle: {
             type: 'dashed',
             color: "#ffffff1f",
           },
         },
+        axisLine: {
+          lineStyle: {
+            color: "#fff3",
+            width: 2,
           },
-      yAxis: [
+        },
-        {
+        data: ['物料1', '物料2', '物料3'],
+      },
+      xAxis: {
         type: "value",
         axisLabel: {
           margin: 10,
           color: "#ffffff63",
         },
-
+        axisLine: {
+          show: false,
+        },
         axisTick: {
           show: true,
           lineStyle: {
@@ -274,84 +210,89 @@ export default {
           },
         },
         splitLine: {
-            show: false,
+          show: true,
           lineStyle: {
             type: 'dashed',
             color: "#ffffff1f",
           },
         },
-          axisLine: {
-            lineStyle: {
-              color: "#fff",
-              width: 2,
-            },
-          },
       },
-      ],
       series: [
         {
-          name: "产量",
+          name: "",
-          type: "line",
+          type: "bar",
-          smooth: true, //是否平滑曲线显示
+          barWidth: "40%",
-          showAllSymbol: true,
-          symbol: "circle",
-          symbolSize: 6,
-          lineStyle: {
-            normal: {
-              color: "#fff", // 线条颜色
-            },
-          },
-          label: {
-            show: true,
-            position: "top",
-            textStyle: {
-              color: "#fff",
-            },
-          },
           itemStyle: {
-            color: "red",
+
-            borderColor: "#fff",
-            borderWidth: 3,
-          },
-          tooltip: {
-            show: false,
-          },
-          areaStyle: {
-            normal: {
             color: new echarts.graphic.LinearGradient(
-                0,
               0,
               0,
               1,
+              0,
               [
                 {
                   offset: 0,
-                    color: "#eb64fb",
+                  color: "#0a2ad7",
                 },
                 {
                   offset: 1,
-                    color: "#3fbbff0d",
+                  color: "#138dd7",
                 },
               ],
               false
             ),
           },
+          data: [1, 2, 3],
         },
-          data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
+        {
+          name: "",
+          type: "pictorialBar",
+          barWidth: "40%",
+          symbolSize: [5, '100%'],
+          symbolPosition: 'end',
+          symbolOffset: [3, 0],
+          barGap: '-100%',
+          itemStyle: {
+            color: '#138dd7'
           },
-      ],
+          data: [1, 2, 3],
+        },
+      ]
     })
-    this.$refs.chart3.setData({
+    this.$refs.chart2.setData({
       grid: {
-        top: 30,
+        top: "10%",
-        left: "2%",
+        left: "5%",
         right: "5%",
-        bottom: "2%",
+        bottom: "10%",
-        containLabel: true,
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          label: {
+            show: true,
+          },
+        },
+      },
+      legend: {
+        data: ["出库", "入库"],
+        top: "0%",
+        textStyle: {
+          color: "#ffffff",
+        },
       },
       xAxis: {
-        type: "category",
+        data: [
-        data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
+          "物料1",
+          "物料2",
+          "物料3",
+          "物料4",
+          "物料5",
+          "物料6",
+          "物料7",
+          "物料8",
+        ],
         axisLabel: {
           margin: 10,
           color: "#ffffff63",
@@ -373,8 +314,7 @@ export default {
           },
         },
       },
-      yAxis: [
+      yAxis: {
-        {
         type: "value",
         axisLabel: {
           margin: 10,
@@ -396,156 +336,235 @@ export default {
         },
         axisLine: {
           lineStyle: {
-              color: "#fff",
+            color: "#fff3",
             width: 2,
           },
         },
       },
-      ],
       series: [
         {
-          name: "产量",
+          name: "出库",
-          type: "line",
+          type: "bar",
-          smooth: true, //是否平滑曲线显示
+          barWidth: '25%',
-          showAllSymbol: true,
+          itemStyle: {
-          symbol: "circle",
-          symbolSize: 6,
-          lineStyle: {
             normal: {
-              color: "#fff", // 线条颜色
+              color: new echarts.graphic.LinearGradient(
+                0,
+                1,
+                0,
+                0,
+                [
+                  {
+                    offset: 0,
+                    color: "#0a2ad7",
                   },
+                  {
+                    offset: 1,
+                    color: "#138dd7",
                   },
-          label: {
+                ],
-            show: true,
+                false
-            position: "top",
+              ),
-            textStyle: {
-              color: "#fff",
             },
           },
+          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
+        },
+        {
+          name: "入库",
+          type: "bar",
+          barWidth: '25%',
+          barGap: '20%',
           itemStyle: {
-            color: "red",
+            normal: {
-            borderColor: "#fff",
+              color: new echarts.graphic.LinearGradient(
-            borderWidth: 3,
+                0,
+                1,
+                0,
+                0,
+                [
+                  {
+                    offset: 0,
+                    color: "#159d40",
                   },
+                  {
+                    offset: 1,
+                    color: "#0bcb98",
+                  },
+                ],
+                false
+              ),
+            },
+          },
+          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
+        },
+        {
+          name: "",
           tooltip: {
-            show: false,
+            show: false
           },
-          data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
+          type: "pictorialBar",
+          barWidth: "25%",
+          symbolSize: ['100%', 5],
+          symbolPosition: 'end',
+          symbolOffset: ['-60%', -3],
+          itemStyle: {
+            color: '#138dd7'
           },
-      ],
+          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
-    })
-    this.$refs.chart4.setData({
-      grid: {
-        top: 30,
-        left: "2%",
-        right: "5%",
-        bottom: "2%",
-        containLabel: true,
         },
-      xAxis: {
+        {
-        type: "category",
+          name: "",
-        boundaryGap: false,
+          type: "pictorialBar",
-        data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
+          tooltip: {
-        axisLabel: {
+            show: false
-          margin: 10,
-          color: "#ffffff63",
           },
-        axisLine: {
+          barWidth: "25%",
-          show: false,
+          symbolSize: ['100%', 5],
+          symbolPosition: 'end',
+          symbolOffset: ['60%', -3],
+          itemStyle: {
+            color: '#0bcb98'
           },
-        axisTick: {
+          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
-          show: true,
-          lineStyle: {
-            color: "#ffffff1f",
         },
+      ],
+    })
+    this.$refs.chart3.setData({
+      tooltip: {
+        trigger: "item",
+        formatter: "{a} <br/>{b} : {c} ({d}%)",
+      },
+      legend: {
+        type: "scroll",
+        orient: "vertical",
+        left: "70%",
+        align: "left",
+        top: "middle",
+        textStyle: {
+          color: "#8C8C8C",
         },
-        splitLine: {
+        height: 250,
-          show: false,
-          lineStyle: {
-            type: 'dashed',
-            color: "#ffffff1f",
       },
+      series: [
+        {
+          name: "库存情况",
+          type: "pie",
+          radius: ["20%", "70%"],
+          center: ["35%", "50%"],
+          clockwise: false,
+          data: [
+            {
+              value: 45,
+              name: "已过期",
             },
+            {
+              value: 25,
+              name: "半年内",
             },
-      yAxis: [
             {
-          type: "value",
+              value: 15,
-          axisLabel: {
+              name: "三个月内",
-            margin: 10,
-            color: "#ffffff63",
             },
-
+            {
-          axisTick: {
+              value: 8,
-            show: true,
+              name: "一个月内",
-            lineStyle: {
-              color: "#ffffff1f",
             },
+          ],
+          label: {
+            normal: {
+              position: "inner",
+              textStyle: {
+                color: "#fff",
+                fontSize: 14,
               },
-          splitLine: {
+              formatter: (e) => {
-            show: false,
+                return e.percent.toFixed(2) + '%'
-            lineStyle: {
+              }
-              type: 'dashed',
-              color: "#ffffff1f",
             },
           },
-          axisLine: {
+          labelLine: {
-            lineStyle: {
+            normal: {
-              color: "#fff",
+              show: false,
-              width: 2,
             },
           },
         },
       ],
+    })
+    this.$refs.chart4.setData({
+      title: {
+        x: 'center',
+        y: 'center',
+        text: "75%",
+        textStyle: {
+          color: '#ccc',
+          fontSize: 1.5 * vw,
+        },
+      },
       series: [
         {
-          name: "产量",
+          type: "pie",
-          type: "line",
+          radius: ["47.5%", "55%"],
-          smooth: true, //是否平滑曲线显示
+          center: ["50%", "50%"],
-          showAllSymbol: true,
+          startAngle: 225,
-          symbol: "circle",
+          endAngle: -45,
-          symbolSize: 6,
+          color: ['#fa9800', "transparent"],
-          lineStyle: {
+          data: [
-            normal: {
+            {
-              color: "#fff", // 线条颜色
+              value: 75,
+              name: ''
             },
+            {
+              value: 25,
+              name: ''
             },
+          ],
           label: {
-            show: true,
+            show: false
-            position: "top",
+          },
-            textStyle: {
+          labelLine: {
-              color: "#fff",
+            normal: {
+              show: false,
             },
           },
-          itemStyle: {
-            color: "red",
-            borderColor: "#fff",
-            borderWidth: 3,
         },
-          tooltip: {
+      ],
-            show: false,
+    })
+    this.$refs.chart5.setData({
+      title: {
+        x: 'center',
+        y: 'center',
+        text: "75%",
+        textStyle: {
+          color: '#ccc',
+          fontSize: 1.5 * vw,
         },
-          areaStyle: {
+      },
-            normal: {
+      series: [
-              color: new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
         {
-                    offset: 0,
+          type: "pie",
-                    color: "#eb64fb",
+          radius: ["47.5%", "55%"],
+          center: ["50%", "50%"],
+          startAngle: 225,
+          endAngle: -45,
+          color: ['#00f79e', "transparent"],
+          data: [
+            {
+              value: 75,
+              name: '',
             },
             {
-                    offset: 1,
+              value: 25,
-                    color: "#3fbbff0d",
+              name: ''
             },
           ],
-                false
+          label: {
-              ),
+            // show: false
+          },
+          labelLine: {
+            normal: {
+              show: false,
             },
           },
-          data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
         },
       ],
     })
@@ -555,6 +574,7 @@ export default {
       this.$refs.chart2.chart.resize()
       this.$refs.chart3.chart.resize()
       this.$refs.chart4.chart.resize()
+      this.$refs.chart5.chart.resize()
     }
   },
   methods: {}
@@ -593,53 +613,122 @@ export default {
 
 .table1 {
   position: absolute;
-  top: 14.5%;
+  top: 66.5%;
-  left: 3.3%;
+  left: 67.3%;
-  width: 23.8%;
+  width: 27.8%;
-  height: 45.5%;
+  height: 27.5%;
   color: #fff
 }
 
 .scrollTableItem {
   display: inline-block;
-  width: calc(100% / 6);
+  width: calc(100% / 5);
   text-align: center;
-  padding: 4px 0;
+  padding: 14px 0;
   color: #fff9
 }
 
 .chart1 {
   position: absolute;
-  top: 14.5%;
+  top: 23%;
-  left: 73%;
+  left: 3.8%;
-  width: 23.8%;
+  width: 27.8%;
-  height: 45.5%;
+  height: 32%;
 }
 
 .chart2 {
   position: absolute;
-  top: 66%;
+  top: 23%;
-  left: 3.3%;
+  left: 33%;
-  width: 23.8%;
+  width: 63.8%;
-  height: 29%;
+  height: 32%;
 
 }
 
 .chart3 {
   position: absolute;
-  top: 66%;
+  top: 63%;
-  left: 28.4%;
+  left: 3.8%;
-  width: 43.1%;
+  width: 27.8%;
-  height: 29%;
+  height: 32%;
 
 }
 
 .chart4 {
   position: absolute;
-  top: 66%;
+  top: 64.6%;
-  left: 73%;
+  left: 33.9%;
-  width: 23.8%;
+  width: 16vw;
-  height: 29%;
+  height: 16vw;
+
+}
+
+.chart5 {
+  position: absolute;
+  top: 64.6%;
+  left: 48.8%;
+  width: 16vw;
+  height: 16vw;
+
+}
+
+.span1 {
+  position: absolute;
+  top: 86.3%;
+  left: 41.9%;
+  transform: translate(-50%, -50%);
+  color: #dddddd;
+  font-size: 1vw;
+}
+
+.span2 {
+  position: absolute;
+  top: 86.3%;
+  left: 56.8%;
+  transform: translate(-50%, -50%);
+  color: #dddddd;
+  font-size: 1vw;
+}
+
+.info1, .info2, .info3, .info4 {
+  position: absolute;
+  top: 11.9%;
+  width: 19.6%;
+  height: 5.8%;
+  transform: translate(-50%, -50%);
 
+  .infoSpan {
+    position: absolute;
+    transform: translate(-100%, -50%);
+    top: 50%;
+    left: 45%;
+    color: #ccc;
+    font-size: 1.1vw;
+  }
+
+  .infoSum {
+    position: absolute;
+    transform: translate(100%, -50%);
+    top: 50%;
+    left: 47%;
+    font-size: 1.1vw;
+  }
 }
+
+.info1 {
+  left: 13.1%;
+}
+
+.info2 {
+  left: 37.7%;
+}
+
+.info3 {
+  left: 62.3%;
+}
+
+.info4 {
+  left: 86.9%;
+}
+
 </style>