修改生产界面

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

@@ -1,8 +1,8 @@
 <template>
   <div class="app-container">
     <div class="headTitle">京源生产监控平台</div>
-    <div class="title" v-for="(i,k) in title"
+    <div v-for="(i,k) in title" :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
-         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
+         class="title">
       {{ i }}
     </div>
     <div class="table1">
@@ -610,6 +610,7 @@ export default {
   top: 0;
   left: 0;
 }
+
 .headTitle {
   position: absolute;
   top: 5%;
@@ -627,6 +628,7 @@ export default {
   font-size: 1vw;
   letter-spacing: 2px;
 }
+
 .num1 {
   position: absolute;
   font-size: 2vw;
@@ -684,6 +686,7 @@ export default {
   height: 29%;
 
 }
+
 .state {
   position: absolute;
   transform: translate(-50%, -50%);

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

@@ -1,9 +1,87 @@
 <template>
   <div class="app-container">
+    <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)+'%'"
+         class="title">
+      {{ i }}
+    </div>
+    <div class="table1">
+      <div style="background-color: #094170">
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 10%">
+          编号
+        </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
+        :class-option="scrollTableOption"
+        :data="scrollTableData"
+        class="case-item"
+        style="height: calc(100% - 30px);overflow: hidden;"
+      >
+        <div
+          v-for="(item, index) in scrollTableData"
+          :key="index"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
+            <div
+              class="scrollTableItem" style="width: 10%">
+              {{ item.value1 }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 23.333%">
+              {{ item.value2 }}
+            </div>
+            <div
+              class="scrollTableItem">
+              {{ item.value3 }}
+            </div>
+            <div
+              class="scrollTableItem">
+              {{ item.value4 }}
+            </div>
+            <div
+              class="scrollTableItem">
+              {{ item.value5 }}
+            </div>
+            <div
+              class="scrollTableItem">
+              {{ item.value6 }}
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+    <div class="chart1">
+      <Chart key="chart1" ref="chart1"></Chart>
+    </div>
+    <div class="chart2">
+      <Chart key="chart2" ref="chart2"></Chart>
+    </div>
+    <div class="chart3">
+      <Chart key="chart3" ref="chart3"></Chart>
+    </div>
+    <div class="chart4">
+      <Chart key="chart4" ref="chart4"></Chart>
+    </div>
   </div>
 </template>
 
 <script>
+import vueSeamlessScroll from "vue-seamless-scroll";
 import Chart from '@/components/board/Chart'
 import * as echarts from 'echarts'
 
@@ -11,13 +89,63 @@ const vw = (document.documentElement.clientWidth || document.body.clientWidth) /
 export default {
   name: 'Board1',
   components: {
+    vueSeamlessScroll,
     Chart
   },
   data() {
-    return {}
+    return {
+      title: [
+        '库存总量统计',
+        '库位动态',
+        '物料时效统计',
+        '库位原理统计',
+      ],
+      titlePosition: [
+        {
+          top: 11.3,
+          left: 5.5
+        },
+        {
+          top: 11.3,
+          left: 75
+        },
+        {
+          top: 63,
+          left: 5.5
+        },
+        {
+          top: 63,
+          left: 30.5
+        },
+      ],
+      scrollTableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 0,
+      },
+      scrollTableData: Array(50).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,
+          value3: val1,
+          value4: val2,
+          value5: val3,
+          value6: val4,
+        }
+      }),
+    }
   },
   mounted() {
-    this.$refs.chart2.setData({
+    this.$refs.chart1.setData({
       tooltip: {
         trigger: 'axis',
         axisPointer: {
@@ -98,87 +226,336 @@ export default {
         }
       ]
     })
-    this.$refs.chart4.setData({
+    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: {
+            color: "#ffffff1f",
+          },
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            type: 'dashed',
+            color: "#ffffff1f",
+          },
+        },
+      },
+      yAxis: [
+        {
+          type: "value",
+          axisLabel: {
+            margin: 10,
+            color: "#ffffff63",
+          },
+
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: "#ffffff1f",
+            },
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: 'dashed',
+              color: "#ffffff1f",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+              width: 2,
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "产量",
+          type: "line",
+          smooth: true, //是否平滑曲线显示
+          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: {
-        trigger: 'axis',
+            show: false,
-        axisPointer: {
+          },
-          // 坐标轴指示器，坐标轴触发有效
+          areaStyle: {
-          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            normal: {
-        }
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "#eb64fb",
+                  },
+                  {
+                    offset: 1,
+                    color: "#3fbbff0d",
                   },
+                ],
+                false
+              ),
+            },
+          },
+          data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
+        },
+      ],
+    })
+    this.$refs.chart3.setData({
       grid: {
-        left: '0',
+        top: 30,
-        right: '4%',
+        left: "2%",
-        bottom: '0',
+        right: "5%",
-        top: 20,
+        bottom: "2%",
-        containLabel: true
+        containLabel: true,
       },
       xAxis: {
-        type: 'category',
+        type: "category",
-        data: [1, 2, 3, 4, 5, 6],
+        data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
+        axisLabel: {
+          margin: 10,
+          color: "#ffffff63",
+        },
         axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: true,
           lineStyle: {
-            color: 'white'
+            color: "#ffffff1f",
-          }
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: "#ffffff1f",
+          },
         },
+      },
+      yAxis: [
+        {
+          type: "value",
           axisLabel: {
-          // interval: 0,
+            margin: 10,
-          // rotate: 40,
+            color: "#ffffff63",
-          textStyle: {
-            fontFamily: 'Microsoft YaHei'
-          }
-        }
           },
 
-      yAxis: {
+          axisTick: {
-        type: 'value',
+            show: true,
+            lineStyle: {
+              color: "#ffffff1f",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: "#ffffff1f",
+            },
+          },
           axisLine: {
+            lineStyle: {
+              color: "#fff",
+              width: 2,
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "产量",
+          type: "line",
+          smooth: true, //是否平滑曲线显示
+          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,
+          },
+          data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
+        },
+      ],
+    })
+    this.$refs.chart4.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: {
-            color: 'white'
+            color: "#ffffff1f",
-          }
+          },
         },
         splitLine: {
-          show: false
+          show: false,
+          lineStyle: {
+            type: 'dashed',
+            color: "#ffffff1f",
           },
-        axisLabel: {}
         },
+      },
+      yAxis: [
+        {
+          type: "value",
+          axisLabel: {
+            margin: 10,
+            color: "#ffffff63",
+          },
+
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: "#ffffff1f",
+            },
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: 'dashed',
+              color: "#ffffff1f",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+              width: 2,
+            },
+          },
+        },
+      ],
       series: [
         {
-          name: '数量',
+          name: "产量",
-          label: {
+          type: "line",
+          smooth: true, //是否平滑曲线显示
+          showAllSymbol: true,
+          symbol: "circle",
+          symbolSize: 6,
+          lineStyle: {
             normal: {
+              color: "#fff", // 线条颜色
+            },
+          },
+          label: {
             show: true,
-              position: 'top',
+            position: "top",
             textStyle: {
-                color: '#a8aab0',
+              color: "#fff",
-                fontStyle: 'normal',
+            },
-                fontFamily: '微软雅黑',
-                fontSize: 0.75 * vw
-              }
-            }
           },
-          type: 'bar',
-          barWidth: '30%',
-          barMaxWidth: 50,
           itemStyle: {
+            color: "red",
+            borderColor: "#fff",
+            borderWidth: 3,
+          },
+          tooltip: {
+            show: false,
+          },
+          areaStyle: {
             normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
                   {
                     offset: 0,
-                  color: '#39ffff'
+                    color: "#eb64fb",
                   },
                   {
                     offset: 1,
-                  color: '#5affa6'
+                    color: "#3fbbff0d",
-                }
-              ])
-            }
                   },
-          data: [1, 2, 3, 4, 5, 6]
+                ],
-        }
+                false
-      ]
+              ),
+            },
+          },
+          data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
+        },
+      ],
     })
+
+    window.onresize = () => {
+      this.$refs.chart1.chart.resize()
+      this.$refs.chart2.chart.resize()
+      this.$refs.chart3.chart.resize()
+      this.$refs.chart4.chart.resize()
+    }
   },
   methods: {}
 }
@@ -186,7 +563,7 @@ export default {
 <style lang="less" scoped>
 
 .app-container {
-  background-image: url("../../../assets/board/bg.jpg");
+  background-image: url("../../../assets/board/warehouseBg1.jpg");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width: 100%;
@@ -195,4 +572,74 @@ export default {
   top: 0;
   left: 0;
 }
+
+.headTitle {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  font-size: 1.5vw;
+  color: #d6eaed;
+  letter-spacing: 10px;
+}
+
+.title {
+  position: absolute;
+  transform: translateY(-50%);
+  color: #dddddd;
+  font-size: 1vw;
+  letter-spacing: 2px;
+}
+
+.table1 {
+  position: absolute;
+  top: 14.5%;
+  left: 3.3%;
+  width: 23.8%;
+  height: 45.5%;
+  color: #fff
+}
+
+.scrollTableItem {
+  display: inline-block;
+  width: calc(100% / 6);
+  text-align: center;
+  padding: 4px 0;
+  color: #fff9
+}
+
+.chart1 {
+  position: absolute;
+  top: 14.5%;
+  left: 73%;
+  width: 23.8%;
+  height: 45.5%;
+}
+
+.chart2 {
+  position: absolute;
+  top: 66%;
+  left: 3.3%;
+  width: 23.8%;
+  height: 29%;
+
+}
+
+.chart3 {
+  position: absolute;
+  top: 66%;
+  left: 28.4%;
+  width: 43.1%;
+  height: 29%;
+
+}
+
+.chart4 {
+  position: absolute;
+  top: 66%;
+  left: 73%;
+  width: 23.8%;
+  height: 29%;
+
+}
 </style>