添加看板

hw-ui/package.json

@@ -61,6 +61,7 @@
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
+    "vue-seamless-scroll": "^1.1.23",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
     "xlsx": "^0.18.5"

hw-ui/src/api/board/fifthFloor.js

@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+
+
+// 获取计划
+export function getProductPlans(query) {
+  return request({
+    url: '/mes/api/getProductPlans',
+    method: 'get',
+    params: query
+  })
+}
+
+// 开始/继续
+export function startNextProductPlanDetail(query) {
+  return request({
+    url: '/mes/api/startNextProductPlanDetail',
+    method: 'post',
+    data: query
+  })
+}
+
+// 获取信息
+export function getNewestProductPlanDetail(query) {
+  return request({
+    url: '/mes/api/getNewestProductPlanDetail/',
+    method: 'get',
+    params: query
+  })
+}
+
+// 完成
+export function completeProductPlanDetail(query) {
+  return request({
+    url: '/mes/api/completeProductPlanDetail',
+    method: 'post',
+    data: query
+  })
+}

hw-ui/src/components/board/Chart.vue

@@ -10,9 +10,11 @@ export default {
   data() {
     return {
       chart: null,
+      chartOption: {}
     }
   },
   mounted() {
+
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -23,6 +25,7 @@ export default {
   },
   methods: {
     setData(option) {
+      this.chartOption = option
       this.initChart(option)
     },
     initChart(option) {

hw-ui/src/views/board/fifthFloor/index.vue

@@ -5,26 +5,33 @@
     <div class="chartBox chartBox1">
       <div class="title">工单信息</div>
       <div class="chart">
-        <div class="form1">
+        <div class="form">
-          <el-form label-position="right" label-width="80px" :model="form1">
+          <el-form :model="form" label-position="right" label-width="80px" size="mini">
+            <el-form-item label="明细编号">
+              <el-input v-model="form.planDetailCode" ></el-input>
+            </el-form-item>
             <el-form-item label="工单编号">
-              <el-input v-model="form1.name"></el-input>
+              <el-input v-model="form.planCode"></el-input>
             </el-form-item>
             <el-form-item label="物料编号">
-              <el-input v-model="form1.region"></el-input>
+              <el-input v-model="form.materialId"></el-input>
             </el-form-item>
             <el-form-item label="物料名称">
-              <el-input v-model="form1.type"></el-input>
+              <el-input v-model="form.materialName"></el-input>
-            </el-form-item>
-            <el-form-item label="扫码时间">
-              <el-input v-model="form1.type"></el-input>
             </el-form-item>
-            <el-form-item label="产品型号">
+            <el-form-item label="状态">
-              <el-input v-model="form1.type"></el-input>
+              <el-input v-model="form.planDetailStatus"></el-input>
             </el-form-item>
+            <!--            <el-form-item label="扫码时间">-->
+            <!--              <el-input v-model="form.materialId1"></el-input>-->
+            <!--            </el-form-item>-->
+            <!--            <el-form-item label="产品型号">-->
+            <!--              <el-input v-model="form.materialId1"></el-input>-->
+            <!--            </el-form-item>-->
           </el-form>
           <div style="text-align: center">
-            <el-button type="primary">图纸下发</el-button>
+            <el-button type="success">图纸下发</el-button>
+            <el-button type="primary" @click="accomplishPlan">完成</el-button>
           </div>
         </div>
 
@@ -55,11 +62,14 @@
       <div class="chart">
         <div class="whiteTable">
           <el-table
-            :data="tableData"
+            ref="table1"
-            style="width: 100%"
-            max-height="19.13vw"
             :cell-style="{textAlign:'center'}"
+            :data="tableData"
             :header-cell-style="{textAlign:'center'}"
+            highlight-current-row
+            max-height="19.13vw"
+            style="width: 100%"
+            @current-change="getOrderInfo"
 
           >
             <el-table-column
@@ -69,31 +79,40 @@
             >
             </el-table-column>
             <el-table-column
-              prop="workOrderNumber"
               label="工单编号"
+              prop="planCode"
+            >
+            </el-table-column>
+            <el-table-column
+              label="物料名称"
+              prop="materialName"
+              width="100"
             >
             </el-table-column>
             <el-table-column
-              prop="planNum"
               label="计划"
+              prop="planAmount"
               width="80"
             >
             </el-table-column>
             <el-table-column
-              prop="realNum"
               label="实际"
+              prop="completeAmount"
               width="80"
             >
             </el-table-column>
             <el-table-column
-              prop="quantityNum"
               label="差异"
+              prop="difference"
               width="80"
             >
+              <template slot-scope="scope">
+                {{ scope.row.planAmount - scope.row.completeAmount }}
+              </template>
             </el-table-column>
             <el-table-column
-              prop="startTime"
+              label="交付时间"
-              label="开始时间"
+              prop="planDeliveryDate"
               width="200"
             >
             </el-table-column>
@@ -102,24 +121,42 @@
               width="120"
             >
               <template slot-scope="scope">
-                <el-button
+
-                  type="text"
+                <el-popconfirm
-                  size="small"
+                  confirm-button-text='是'
+                  cancel-button-text='否'
+                  icon="el-icon-info"
+                  v-if="scope.row.completeAmount === 0"
+                  icon-color="red"
+                  @confirm="startNextProduction(scope.row)"
+                  title="确定开始计划吗？"
                 >
-                  开始
-                </el-button>
                   <el-button
-                  type="text"
                     size="small"
+                    type="text"
+                    slot="reference">开始</el-button>
+                </el-popconfirm>
+
+                <el-popconfirm
+                  confirm-button-text='是'
+                  cancel-button-text='否'
+                  icon="el-icon-info"
+                  v-if="scope.row.completeAmount !== 0 && scope.row.completeAmount < scope.row.planAmount"
+                  icon-color="red"
+                  @confirm="startNextProduction(scope.row)"
+                  title="确定继续计划吗？"
                 >
-                  退库
-                </el-button>
                   <el-button
+                    size="small"
                     type="text"
+                    slot="reference">继续</el-button>
+                </el-popconfirm>
+                <el-button
                   size="small"
-                  style="color: #f56c6c"
+                  type="text"
+                  style="margin-left: 4px"
                 >
-                  删除
+                  退库
                 </el-button>
               </template>
             </el-table-column>
@@ -128,6 +165,15 @@
       </div>
     </div>
 
+    <div>
+      <div class="roundBorder" style="top: 72%;left: 1.2%;">
+        <el-button :disabled="nowNum1 <= 1" circle icon="el-icon-back" size="mini" @click="pre1"></el-button>
+      </div>
+      <div class="roundBorder" style="top: 72%;left: 49%;">
+        <el-button :disabled="nowNum1 >= totalNum1" circle icon="el-icon-right" size="mini" @click="next1"></el-button>
+      </div>
+    </div>
+
     <div class="chartBox chartBox4">
       <div class="title">当日产量</div>
       <div class="chart">
@@ -138,19 +184,50 @@
     <div class="bottom">
       <el-row>
         <el-button type="primary">首页</el-button>
-        <el-button type="success">板材领料</el-button>
+        <el-button type="success" @click="getMaterialsModel = true">条码打印</el-button>
         <el-button type="info">SOP预览</el-button>
         <el-button type="danger">退出</el-button>
       </el-row>
     </div>
 
+    <el-dialog title="板材领料" :visible.sync="getMaterialsModel">
+      <el-form :model="form">
+        <el-form-item label="库位码" label-width="120px">
+          <el-input v-model="form.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="物料码" label-width="120px">
+          <el-input v-model="form.name" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="getMaterialsModel = false">取 消</el-button>
+        <el-button type="primary" @click="getMaterialsModel = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import Chart from '@/components/board/Chart'
 import * as echarts from 'echarts'
+import {
+  completeProductPlanDetail,
+  getNewestProductPlanDetail,
+  getProductPlans,
+  startNextProductPlanDetail
+} from "@/api/board/fifthFloor";
 
+const setState = (e)=>{
+  if(e === '1'){
+    return '未开始'
+  }
+  if(e === '2'){
+    return '已开始'
+  }
+  if(e === '3' || e === '9'){
+    return '已完成'
+  }
+}
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
 export default {
   name: 'Board1',
@@ -159,47 +236,215 @@ export default {
   },
   data() {
     return {
-      form: {
+      nowNum1: 1,
-        name: '',
+      totalNum1: 0,
-        region: '',
+      getMaterialsModel:false,
-        date1: '',
+      form: {},
-        date2: '',
+      tableData: [],
-        delivery: false,
+    }
-        type: [],
+  },
-        resource: '',
+  async mounted() {
-        desc: ''
+    const data = await getProductPlans({pageNum: 1, pageSize: 5}).then(e => {
-      },
+      this.tableData = e.rows
-      form1: {
+      this.totalNum1 = Math.ceil(e.total / 5)
-        name: '',
+      this.$refs.table1.setCurrentRow(e.rows[0]);
-        region: '',
+      this.getInfo(e.rows[0])
-        type: ''
+      getNewestProductPlanDetail({planId:e.rows[0].planId}).then(val=>{
-      },
+        this.form = val.data
-      tableData: [
+        this.form.materialId = e.rows[0].materialId
+        this.form.materialName = e.rows[0].materialName
+        this.form.planDetailStatus = setState(val.data.planDetailStatus)
+      })
+    })
+    this.$refs.chart2.setData({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          // 坐标轴指示器，坐标轴触发有效
+          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+        }
+      },
+      grid: {
+        left: '0',
+        right: '4%',
+        bottom: '0',
+        top: 20,
+        containLabel: true
+      },
+      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: [
         {
-          workOrderNumber: '202401221413',
+          name: '数量',
-          planNum: '1000',
+          label: {
-          realNum: '800',
+            normal: {
-          quantityNum: '200',
+              show: true,
-          startTime: '2024-01-01',
+              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, [
                 {
-          workOrderNumber: '202401221413',
+                  offset: 0,
-          planNum: '1000',
+                  color: '#39ffff'
-          realNum: '800',
-          quantityNum: '200',
-          startTime: '2024-01-01',
                 },
                 {
-          workOrderNumber: '202401221413',
+                  offset: 1,
-          planNum: '1000',
+                  color: '#5affa6'
-          realNum: '800',
+                }
-          quantityNum: '200',
+              ])
-          startTime: '2024-01-01',
+            }
           },
-      ],
+          data: [1, 2, 3, 4, 5, 6]
         }
+      ]
+    })
+    this.$refs.chart4.setData({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          // 坐标轴指示器，坐标轴触发有效
+          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+        }
+      },
+      grid: {
+        left: '0',
+        right: '4%',
+        bottom: '0',
+        top: 20,
+        containLabel: true
       },
-  mounted() {
+      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]
+        }
+      ]
+    })
+  },
+  methods: {
+    next1() {
+      this.nowNum1 += 1
+      getProductPlans({pageNum: this.nowNum1, pageSize: 5}).then(e => {
+        this.tableData = e.rows
+        this.totalNum1 = Math.ceil(e.total / 5)
+      })
+    },
+    pre1() {
+      this.nowNum1 -= 1
+      getProductPlans({pageNum: this.nowNum1, pageSize: 5}).then(e => {
+        this.tableData = e.rows
+        this.totalNum1 = Math.ceil(e.total / 5)
+      })
+    },
+    getOrderInfo(e){
+      this.getInfo(e)
+      getNewestProductPlanDetail({planId:e.planId}).then(val=>{
+        this.form = val.data
+        this.form.materialId = e.materialId
+        this.form.materialName = e.materialName
+        this.form.planDetailStatus = setState(val.data.planDetailStatus)
+      })
+    },
+    // 设置图表信息
+    getInfo(e) {
       this.$refs.chart1_1.setData({
         series: [
           {
@@ -222,7 +467,7 @@ export default {
             center: ["50%", "50%"],
             data: [
               {
-              value: 100,
+                value: e.planAmount === 0 ? 0.0001 : e.planAmount ,
                 label: {
                   normal: {
                     rich: {
@@ -241,7 +486,7 @@ export default {
                     formatter: function (params) {
                       return (
                         "{a|" +
-                      100 +
+                        (params.data.value === 0.0001 ? 0 : params.data.value) +
                         "}" +
                         "\n{b|计划}"
                       );
@@ -301,7 +546,7 @@ export default {
             center: ["50%", "50%"],
             data: [
               {
-              value: 100,
+                value: e.completeAmount === 0 ? 0.0001 : e.completeAmount ,
                 label: {
                   normal: {
                     rich: {
@@ -320,7 +565,7 @@ export default {
                     formatter: function (params) {
                       return (
                         "{a|" +
-                      100 +
+                        (params.data.value === 0.0001 ? 0 : params.data.value) +
                         "}" +
                         "\n{b|实际}"
                       );
@@ -380,7 +625,7 @@ export default {
             center: ["50%", "50%"],
             data: [
               {
-              value: 100,
+                value: (e.planAmount - e.completeAmount) === 0 ? 0.0001 : (e.planAmount - e.completeAmount) ,
                 label: {
                   normal: {
                     rich: {
@@ -399,7 +644,7 @@ export default {
                     formatter: function (params) {
                       return (
                         "{a|" +
-                      100 +
+                        (params.data.value === 0.0001 ? 0 : params.data.value) +
                         "}" +
                         "\n{b|差异}"
                       );
@@ -459,7 +704,7 @@ export default {
             center: ["50%", "50%"],
             data: [
               {
-              value: 100,
+                value: ((e.completeAmount / e.planAmount)*100).toFixed(2),
                 label: {
                   normal: {
                     rich: {
@@ -478,7 +723,7 @@ export default {
                     formatter: function (params) {
                       return (
                         "{a|" +
-                      100 +
+                        (params.data.value === 0.0001 ? 0 : params.data.value) +
                         "%}" +
                         "\n{b|完成率}"
                       );
@@ -501,7 +746,7 @@ export default {
                 },
               },
               {
-              value: 0,
+                value: ((1-(e.completeAmount / e.planAmount))*100).toFixed(2),
                 name: "invisible",
                 itemStyle: {
                   normal: {
@@ -516,170 +761,47 @@ export default {
           },
         ],
       })
-    this.$refs.chart2.setData({
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          // 坐标轴指示器，坐标轴触发有效
-          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-        }
-      },
-      grid: {
-        left: '0',
-        right: '4%',
-        bottom: '0',
-        top: 20,
-        containLabel: true
-      },
-      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]
+    // 开始继续
-        }
+    async startNextProduction(e){
-      ]
+      const data = await startNextProductPlanDetail({planId: e.planId})
+      this.form = data.data
+      this.form.materialId = e.materialId
+      this.form.materialName = e.materialName
+      this.form.planDetailStatus = setState(data.data.planDetailStatus)
+    },
+    // 完成
+    accomplishPlan(){
+      this.$confirm('是否完成计划', '确认', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'success'
+      }).then(() => {
+        completeProductPlanDetail({
+          planDetailId: this.form.planDetailId
+        })
+          .then(() => {
+            this.$message({
+              type: 'success',
+              message: '已完成'
+            });
+            getProductPlans({pageNum: this.nowNum1, pageSize: 5}).then(e => {
+              this.tableData = e.rows
+              this.totalNum1 = Math.ceil(e.total / 5)
+              let data = e.rows.find(v=>v.planCode === this.form.planCode) || null
+              this.$refs.table1.setCurrentRow(data || e.rows[0]);
+              this.getInfo(data ||e.rows[0])
+            })
+          })
+      })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消'
+          });
         })
-    this.$refs.chart4.setData({
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          // 坐标轴指示器，坐标轴触发有效
-          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-        }
-      },
-      grid: {
-        left: '0',
-        right: '4%',
-        bottom: '0',
-        top: 20,
-        containLabel: true
-      },
-      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]
   }
-      ]
-    })
-  },
-  methods: {}
 }
 </script>
 <style lang="less" scoped>
@@ -722,6 +844,10 @@ export default {
     color: #fff
   }
 
+  /deep/ .current-row .cell {
+    color: #000
+  }
+
   /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
     background-color: #fff0;
   }
@@ -811,7 +937,7 @@ export default {
   left: 2%;
 }
 
-.form1 {
+.form {
   position: absolute;
   width: 50%;
   height: 100%;
@@ -831,4 +957,8 @@ export default {
     border-radius: 0;
   }
 }
+.roundBorder {
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
 </style>

hw-ui/src/views/board/fourthFloor/assemble.vue

@@ -192,7 +192,7 @@
         </el-form-item>
         <el-form-item label="领料仓库" >
           <el-select v-model="form.warehouseId" placeholder="请选择领料仓库" @change="form.wmsRawOutstockDetailList =[]">
-            <el-option v-for="item in warehouseList" :label="item.warehouseName" :value="item.warehouseId"></el-option>
+            <el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="领料原因">

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

@@ -0,0 +1,648 @@
+<template>
+  <div class="app-container">
+    <div class="headTitle">京源生产监控平台</div>
+    <div class="title" v-for="(i,k) in title"
+         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
+      {{ i }}
+    </div>
+    <div class="table1">
+      <div style="background-color: #094170">
+        <div class="scrollTableItem" style="font-weight: bold;width: 10%">
+          编号
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 23.333%">
+          生产工单
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;">
+          计划数量
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;">
+          实际数量
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;">
+          差异值
+        </div>
+        <div class="scrollTableItem" style="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'
+
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  name: 'Board1',
+  components: {
+    vueSeamlessScroll,
+    Chart
+  },
+  data() {
+    return {
+      title: [
+        '工单计划',
+        '小时产量',
+        '七日产量对比',
+        '设备OEE统计',
+        '设备时长统计',
+      ],
+      titlePosition: [
+        {
+          top: 11.3,
+          left: 5.5
+        },
+        {
+          top: 11.3,
+          left: 75
+        },
+        {
+          top: 63,
+          left: 5.5
+        },
+        {
+          top: 63,
+          left: 30.5
+        },
+        {
+          top: 63,
+          left: 75
+        },
+      ],
+      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.chart1.setData({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          // 坐标轴指示器，坐标轴触发有效
+          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+        }
+      },
+      grid: {
+        left: '0',
+        right: '4%',
+        bottom: '0',
+        top: 20,
+        containLabel: true
+      },
+      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: {
+            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: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
+        },
+      ],
+    })
+    this.$refs.chart3.setData({
+      grid: {
+        top: 30,
+        left: "2%",
+        right: "5%",
+        bottom: "2%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        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: true,
+          lineStyle: {
+            type:'dashed',
+            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: "产量",
+          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: "#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: [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: {}
+}
+</script>
+<style lang="less" scoped>
+
+.app-container {
+  background-image: url("../../../assets/board/productionBg1.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  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;
+}
+
+.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>

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

@@ -0,0 +1,198 @@
+<template>
+  <div class="app-container">
+  </div>
+</template>
+
+<script>
+import Chart from '@/components/board/Chart'
+import * as echarts from 'echarts'
+
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  name: 'Board1',
+  components: {
+    Chart
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    this.$refs.chart2.setData({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          // 坐标轴指示器，坐标轴触发有效
+          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+        }
+      },
+      grid: {
+        left: '0',
+        right: '4%',
+        bottom: '0',
+        top: 20,
+        containLabel: true
+      },
+      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.chart4.setData({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          // 坐标轴指示器，坐标轴触发有效
+          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+        }
+      },
+      grid: {
+        left: '0',
+        right: '4%',
+        bottom: '0',
+        top: 20,
+        containLabel: true
+      },
+      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]
+        }
+      ]
+    })
+  },
+  methods: {}
+}
+</script>
+<style lang="less" scoped>
+
+.app-container {
+  background-image: url("../../../assets/board/bg.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>