修改看板地址

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

@@ -1,30 +1,83 @@
 <template>
   <div class="app-container">
     <div class="headTitle">京源生产监控平台</div>
-    <div class="time">{{
-        time
-      }}
-    </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: 12%">
+          编号
+        </div>
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 36%">
+          生产工单
+        </div>
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 14%">
+          计划数量
+        </div>
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 14%">
+          实际数量
+        </div>
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
+          差异值
+        </div>
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
+          完成率
+        </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: 12%"
+            >
+              {{ item.no }}
+            </div>
+            <div
+              class="scrollTableItem" style="width:36%"
+            >
+              {{ item.orderCode }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 14%"
+            >
+              {{ item.planAmount }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 14%"
+            >
+              {{ item.completeAmount }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 12%"
+            >
+              {{ item.quantityAmount }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 12%"
+            >
+              {{ item.finishingRate }}%
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
     <div class="chart1">
       <Chart key="chart1" ref="chart1"></Chart>
     </div>
     <div class="chart2">
-      <div v-for="(i,k) in 10" class="item">
+      <Chart key="chart2" ref="chart2"></Chart>
-        <div style="top: 25%;left:5%" class="block">人员{{ k }}</div>
-        <div style="top: 50%;left:5%" class="block">工序：切割</div>
-        <div style="top: 75%;left:5%" class="block">产品计划数量：10000</div>
-        <div style="text-align: right;top: 25%;right:5%" class="block">8888</div>
-        <div style="text-align: right;top: 50%;right:5%" class="block">88%</div>
-        <div style="text-align: right;top: 75%;right:5%;width: 50%;height: 0.8vw" class="block">
-          <el-progress :format="()=>{return ''}" :percentage="88"></el-progress>
-        </div>
-      </div>
     </div>
     <div class="chart3">
       <Chart key="chart3" ref="chart3"></Chart>
@@ -32,6 +85,19 @@
     <div class="chart4">
       <Chart key="chart4" ref="chart4"></Chart>
     </div>
+    <div class="num1 num1_1" style="top: 17%;left: 31.1%;color:#5fc2f2">{{ topData.planAmount[0] }}</div>
+    <div class="num1 num1_2" style="top: 17%;left:34.1%;color:#5fc2f2">{{ topData.planAmount[1] }}</div>
+    <div class="num1 num1_3" style="top: 17%;left:37%;color:#5fc2f2">{{ topData.planAmount[2] }}</div>
+    <div class="num1 num1_4" style="top: 17%;left:40%;color:#5fc2f2">{{ topData.planAmount[3] }}</div>
+    <div class="num1 num1_5" style="top: 17%;left:45.6%;color:#59ee7b">{{ topData.completeAmount[0] }}</div>
+    <div class="num1 num1_6" style="top: 17%;left:48.6%;color:#59ee7b">{{ topData.completeAmount[1] }}</div>
+    <div class="num1 num1_7" style="top: 17%;left:51.5%;color:#59ee7b">{{ topData.completeAmount[2] }}</div>
+    <div class="num1 num1_8" style="top: 17%;left:54.5%;color:#59ee7b">{{ topData.completeAmount[3] }}</div>
+    <div class="num1 num1_9" style="top: 17%;left:60%;color:#f60008">{{ topData.diff[0] }}</div>
+    <div class="num1 num1_10" style="top: 17%;left:63%;color:#f60008">{{ topData.diff[1] }}</div>
+    <div class="num1 num1_11" style="top: 17%;left:65.9%;color:#f60008">{{ topData.diff[2] }}</div>
+    <div class="num1 num1_12" style="top: 17%;left:68.9%;color:#f60008">{{ topData.diff[3] }}</div>
+    <div class="state" :style="`background-color:${LineStatus?'#ffff00':'#ff0000'}`"></div>
   </div>
 </template>
 
@@ -63,17 +129,16 @@ export default {
         completeAmount: [0, 0, 0, 0],
         diff: [0, 0, 0, 0]
       },
-      time: parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}'),
       title: [
-        '工序生产进度',
+        '工单计划',
-        '工序名称对比',
+        '小时产量',
         '七日产量对比',
-        ' ',
+        '粉尘数据走势',
-        ' ',
+        '设备时长统计',
-        ' ',
+        '计划数量:',
-        ' ',
+        '完成数量:',
-        ' ',
+        '差异值:',
-        ' '
+        '产线状态:'
       ],
       titlePosition: [
         {
@@ -85,7 +150,7 @@ export default {
           left: 75
         },
         {
-          top: 70.3,
+          top: 63,
           left: 5.5
         },
         {
@@ -127,14 +192,13 @@ export default {
     }
   },
   mounted() {
-    setInterval(() => {
-      this.time = parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}')
-    }, 1000)
     this.getData()
 
     window.onresize = () => {
       this.$refs.chart1.chart.resize()
+      this.$refs.chart2.chart.resize()
       this.$refs.chart3.chart.resize()
+      this.$refs.chart4.chart.resize()
     }
   },
   methods: {
@@ -151,81 +215,117 @@ export default {
           }
         })
       })
-      this.$refs.chart1.setData({
+      selectLatestWorkOrder().then(e => {
-        tooltip: {},
+        this.topData.planAmount = [...[0, 0, 0, 0], ...(e.data.planAmount || 0).toString().split('')].slice(-4)
-        radar: {
+        this.topData.completeAmount = [...[0, 0, 0, 0], ...(e.data.completeAmount || 0).toString().split('')].slice(-4)
-          indicator: [
+        this.topData.diff = [...[0, 0, 0, 0], ...Math.abs((parseFloat(e.data.planAmount) - parseFloat(e.data.completeAmount)) || 0).toString().split('')].slice(-4)
-            { name: '打磨', max: 6500 },
-            { name: '折弯', max: 16000 },
-            { name: '组装', max: 30000 },
-            { name: '下料', max: 38000 },
-            { name: '机加', max: 52000 },
-            { name: '1', max: 25000 }
-          ]
-        },
-        series: [
-          {
-            name: '时间',
-            type: 'radar',
-            // areaStyle: {normal: {}},
-            data: [
-              {
-                value: [4300, 10000, 28000, 35000, 50000, 19000],
-                name: '时间'
-              }
-            ]
-          }
-        ]
       })
-      this.$refs.chart3.setData({
+      getLineStatus().then(e => {
-        grid: {
+        this.LineStatus = e.msg === 'True'
-          top: 30,
+      })
-          left: '2%',
+      getHourProduction().then(e => {
-          right: '5%',
+        this.$refs.chart1.setData({
-          bottom: '2%',
+          tooltip: {
-          containLabel: true
+            trigger: 'axis',
-        },
+            axisPointer: {
-        legend: {
+              // 坐标轴指示器，坐标轴触发有效
-          textStyle: {
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-            color: '#fff'
+            }
-          }
-        },
-
-        tooltip: {
-          trigger: 'axis'
-        },
-        xAxis: {
-          type: 'category',
-          data: [1, 2, 3],
-          axisLabel: {
-            margin: 10,
-            color: '#ffffff63'
           },
-          axisLine: {
+          grid: {
-            show: false
+            left: '0',
+            right: '4%',
+            bottom: '0',
+            top: 20,
+            containLabel: true
           },
-          axisTick: {
+          xAxis: {
-            show: true,
+            type: 'category',
-            lineStyle: {
+            data: e.data.map(v => v.hour),
-              color: '#ffffff1f'
+            axisLine: {
+              lineStyle: {
+                color: 'white'
+              }
+            },
+            axisLabel: {
+              // interval: 0,
+              // rotate: 40,
+              textStyle: {
+                fontFamily: 'Microsoft YaHei'
+              }
             }
           },
-          splitLine: {
+
-            show: true,
+          yAxis: {
-            lineStyle: {
-              type: 'dashed',
-              color: '#ffffff1f'
-            }
-          }
-        },
-        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: e.data.map(v => v.amount)
+            }
+          ]
+        })
+      })
+      getDayProduction().then(e => {
+        this.$refs.chart2.setData({
+          grid: {
+            top: 30,
+            left: '2%',
+            right: '5%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: e.data.map(v => v.day),
             axisLabel: {
               margin: 10,
               color: '#ffffff63'
             },
-
+            axisLine: {
+              show: false
+            },
             axisTick: {
               show: true,
               lineStyle: {
@@ -233,53 +333,376 @@ export default {
               }
             },
             splitLine: {
-              show: true,
+              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: {
+                show: false
+              },
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: '#eb64fb'
+                      },
+                      {
+                        offset: 1,
+                        color: '#3fbbff0d'
+                      }
+                    ],
+                    false
+                  )
+                }
+              },
+              data: e.data.map(v => v.instock_amount)
+            }
+          ]
+        })
+      })
+      dustAnalysis().then(e => {
+        this.$refs.chart3.setData({
+          grid: {
+            top: 30,
+            left: '2%',
+            right: '5%',
+            bottom: '2%',
+            containLabel: true
+          },
+          legend: {
+            textStyle: {
+              color: '#fff'
+            }
+          },
+
+          tooltip: {
+            trigger: 'axis'
+          },
+          xAxis: {
+            type: 'category',
+            data: e.data.map(v => parseTime(v.recodeTime)),
+            axisLabel: {
+              margin: 10,
+              color: '#ffffff63'
             },
             axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: true,
               lineStyle: {
-                color: '#fff',
+                color: '#ffffff1f'
-                width: 2
-              }
-            }
-          }
-        ],
-        series: [
-          {
-            name: '1',
-            type: 'line',
-            smooth: true, //是否平滑曲线显示
-            showAllSymbol: true,
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: {
-              normal: {
-                color: '#fff' // 线条颜色
               }
             },
-            label: {
+            splitLine: {
               show: true,
-              position: 'top',
+              lineStyle: {
-              textStyle: {
+                type: 'dashed',
-                color: '#fff'
+                color: '#ffffff1f'
               }
+            }
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisLabel: {
+                margin: 10,
+                color: '#ffffff63'
+              },
+
+              axisTick: {
+                show: true,
+                lineStyle: {
+                  color: '#ffffff1f'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: 'dashed',
+                  color: '#ffffff1f'
+                }
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#fff',
+                  width: 2
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              name: 'pm1',
+              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: e.data.map(v => v.pm1)
             },
-            itemStyle: {
+            {
-              color: 'red',
+              name: 'pm2',
-              borderColor: '#fff',
+              type: 'line',
-              borderWidth: 3
+              smooth: true, //是否平滑曲线显示
-            },
+              showAllSymbol: true,
-            tooltip: {
+              symbol: 'circle',
-              // show: false,
+              symbolSize: 6,
+              lineStyle: {
+                normal: {
+                  color: '#f0f' // 线条颜色
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: '#fff'
+                }
+              },
+              itemStyle: {
+                color: 'red',
+                borderColor: '#fff',
+                borderWidth: 3
+              },
+              tooltip: {
+                // show: false,
+              },
+              data: e.data.map(v => v.pm2)
             },
-            data: [1, 2, 3]
+            {
-          }
+              name: 'pm10',
-        ]
+              type: 'line',
+              smooth: true, //是否平滑曲线显示
+              showAllSymbol: true,
+              symbol: 'circle',
+              symbolSize: 6,
+              lineStyle: {
+                normal: {
+                  color: '#ff0' // 线条颜色
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: '#fff'
+                }
+              },
+              itemStyle: {
+                color: 'red',
+                borderColor: '#fff',
+                borderWidth: 3
+              },
+              tooltip: {
+                // show: false,
+              },
+              data: e.data.map(v => v.pm10)
+            }
+          ]
+        })
       })
+      deviceTimeCount().then(e => {
+        console.log(e)
+        this.$refs.chart4.setData({
+          grid: {
+            top: 30,
+            left: '2%',
+            right: '5%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: e.data.map(v => parseTime(v.hour)),
+            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: {
+                show: false
+              },
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: '#eb64fb'
+                      },
+                      {
+                        offset: 1,
+                        color: '#3fbbff0d'
+                      }
+                    ],
+                    false
+                  )
+                }
+              },
+              data: e.data.map(v => v.timeCount)
+            }
+          ]
+        })
+      })
     }
   }
 }
@@ -287,7 +710,7 @@ export default {
 <style lang="less" scoped>
 
 .app-container {
-  background-image: url("../../../assets/board/productionBg1_4.jpg");
+  background-image: url("../../../assets/board/productionBg1.jpg");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width: 100%;
@@ -321,27 +744,6 @@ export default {
   transform: translate(-50%, -50%);
 }
 
-.time {
-  position: absolute;
-  top: 10%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 1.5vw;
-  color: #eee;
-}
-
-.centerImg {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 30%;
-  height: 23.96vw;
-  background-image: url("../../../assets/board/center.png");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  transform: translate(-50%, -50%);
-}
-
 .table1 {
   position: absolute;
   top: 14.5%;
@@ -365,38 +767,35 @@ export default {
   top: 14.5%;
   left: 73%;
   width: 23.8%;
-  height: 51%;
+  height: 45.5%;
 }
 
 .chart2 {
-  //position: absolute;
-  //top: 66%;
-  //left: 3.3%;
-  //width: 23.8%;
-  //height: 29%;
-
   position: absolute;
-  top: 14.5%;
+  top: 66%;
   left: 3.3%;
   width: 23.8%;
-  height: 51%;
+  height: 29%;
-  overflow: auto;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
 
 }
 
 .chart3 {
   position: absolute;
-  top: 74%;
+  top: 66%;
-  left: 3.3%;
+  left: 28.4%;
-  width: 92.8%;
+  width: 43.1%;
-  height: 21%;
+  height: 29%;
 
 }
 
+.chart4 {
+  position: absolute;
+  top: 66%;
+  left: 73%;
+  width: 23.8%;
+  height: 29%;
+
+}
 
 .state {
   position: absolute;
@@ -408,26 +807,4 @@ export default {
   border-radius: 50%;
   background-color: #ffff00;
 }
-
-.status {
-  position: absolute;
-  top: 16%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 1.5vw;
-  color: #eee;
-}
-
-.item {
-  position: relative;
-  width: 100%;
-  height: 5vw;
-  border-bottom: 1px solid #ccc2;
-
-  .block {
-    position: absolute;
-    color: #ccc;
-    transform: translateY(-50%);
-  }
-}
 </style>