修改生产界面

hw-ui/package.json

@@ -48,6 +48,8 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "less": "^4.2.0",
+    "less-loader": "5.0.0",
     "moment": "^2.29.4",
     "nprogress": "0.2.0",
     "qs": "^6.11.2",

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

@@ -1,73 +1,287 @@
 <template>
   <div class="app-container">
+    <div class="headTitle">京源环保生产管理系统</div>
 
-    <div class="chartBox1">
-      <div class="title"></div>
+    <div class="chartBox chartBox1">
+      <div class="title">派工信息</div>
       <div class="chart">
-        <Chart ref="chart1"></Chart>
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          max-height="19.13vw"
+          :cell-style="{textAlign:'center'}"
+          :header-cell-style="{textAlign:'center'}"
+        >
+          <el-table-column
+            label="序号"
+            type="index"
+            width="50"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="workOrderNumber"
+            label="工单编号"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="plan"
+            label="计划"
+            width="100"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="practical"
+            label="实际"
+            width="100"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="difference"
+            label="差异"
+            width="100"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="deliveryTime"
+            label="交付时间"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            width="120"
+          >
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                size="small"
+              >
+                条码打印
+              </el-button>
+              <el-button
+                type="text"
+                size="small"
+              >
+                开始
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <div class="chartBox chartBox2">
+      <div class="title">库存统计</div>
+      <div class="chart">
+        <Chart ref="chart2"></Chart>
       </div>
     </div>
+
+    <div class="chartBox chartBox3">
+      <div class="title">计划明细</div>
+      <div class="chart">
+        <el-table
+          :data="tableData1"
+          style="width: 100%"
+          max-height="19.13vw"
+          :cell-style="{textAlign:'center'}"
+          :header-cell-style="{textAlign:'center'}"
+
+        >
+          <el-table-column
+            label="序号"
+            type="index"
+            width="50"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="planNumber"
+            label="计划编号"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="workOrderNumber"
+            label="工单编号"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="startTime"
+            label="开始时间"
+            width="200"
+          >
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            width="120"
+          >
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                size="small"
+              >
+                装配
+              </el-button>
+              <el-button
+                type="text"
+                size="small"
+                @click="dialogVisible = true"
+              >
+                领料
+              </el-button>
+              <el-button
+                type="text"
+                size="small"
+              >
+                扫描
+              </el-button>
+              <el-button
+                type="text"
+                size="small"
+              >
+                退料
+              </el-button>
+              <el-button
+                type="text"
+                size="small"
+                style="color: #f56c6c"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <div class="chartBox chartBox4">
+      <div class="title">当日产量</div>
+      <div class="chart">
+        <Chart ref="chart4"></Chart>
+      </div>
+    </div>
+
+    <div class="bottom">
+      <el-row>
+        <el-button type="primary">首页</el-button>
+        <el-button type="success">键盘</el-button>
+        <el-button type="info">最小化</el-button>
+        <el-button type="danger">退出</el-button>
+      </el-row>
+    </div>
+
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="30%">
+      <span>这是一段信息</span>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+  </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import Chart from "@/components/board/Chart";
+import Chart from '@/components/board/Chart'
 import * as echarts from 'echarts'
 
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
 export default {
-  name: "Board1",
+  name: 'Board1',
   components: {
     Chart
   },
   data() {
-    return {};
+    return {
+      dialogVisible: false,
+      tableData: [
+        {
+          workOrderNumber: '202401221413',
+          plan: '1000',
+          practical: '800',
+          difference: '200',
+          deliveryTime: '2024-01-01',
+        },
+        {
+          workOrderNumber: '202401221413',
+          plan: '1000',
+          practical: '800',
+          difference: '200',
+          deliveryTime: '2024-01-01',
+        },
+        {
+          workOrderNumber: '202401221413',
+          plan: '1000',
+          practical: '800',
+          difference: '200',
+          deliveryTime: '2024-01-01',
+        }
+      ],
+      tableData1: [
+        {
+          workOrderNumber: '202401221413',
+          planNumber: '202401221413-1',
+          startTime: '2024-01-01',
+        },
+        {
+          workOrderNumber: '202401221413',
+          planNumber: '202401221413-2',
+          startTime: '2024-01-01',
+        },
+        {
+          workOrderNumber: '202401221413',
+          planNumber: '202401221413-3',
+          startTime: '2024-01-01',
+        },
+      ]
+    }
   },
   mounted() {
-    this.$refs.chart1.setData({
+    this.$refs.chart2.setData({
       tooltip: {
-        trigger: "axis",
+        trigger: 'axis',
         axisPointer: {
           // 坐标轴指示器，坐标轴触发有效
-          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-        },
+          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+        }
       },
       grid: {
-        left: "0",
-        right: "4%",
-        bottom: "0",
+        left: '0',
+        right: '4%',
+        bottom: '0',
         top: 20,
-        containLabel: true,
+        containLabel: true
       },
       xAxis: {
-        type: "category",
+        type: 'category',
         data: [1, 2, 3, 4, 5, 6],
         axisLine: {
           lineStyle: {
-            color: "white",
-          },
+            color: 'white'
+          }
         },
         axisLabel: {
           // interval: 0,
           // rotate: 40,
           textStyle: {
-            fontFamily: "Microsoft YaHei",
-          },
-        },
+            fontFamily: 'Microsoft YaHei'
+          }
+        }
       },
 
       yAxis: {
-        type: "value",
+        type: 'value',
         axisLine: {
           show: false,
           lineStyle: {
-            color: "white",
-          },
+            color: 'white'
+          }
         },
         splitLine: {
-          show: false,
+          show: false
         },
-        axisLabel: {},
+        axisLabel: {}
       },
       series: [
         {
@@ -75,39 +289,120 @@ export default {
           label: {
             normal: {
               show: true,
-              position: "top",
+              position: 'top',
               textStyle: {
-                color: "#a8aab0",
-                fontStyle: "normal",
-                fontFamily: "微软雅黑",
-                fontSize: 0.75 * vw,
-              },
-            },
+                color: '#a8aab0',
+                fontStyle: 'normal',
+                fontFamily: '微软雅黑',
+                fontSize: 0.75 * vw
+              }
+            }
           },
-          type: "bar",
-          barWidth: "30%",
+          type: 'bar',
+          barWidth: '30%',
           barMaxWidth: 50,
           itemStyle: {
             normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
                   offset: 0,
-                  color: "#39ffff",
+                  color: '#39ffff'
                 },
                 {
                   offset: 1,
-                  color: "#5affa6",
+                  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>
 
@@ -122,11 +417,85 @@ export default {
   left: 0;
 }
 
+.headTitle {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  font-size: 1.5vw;
+  color: #d6eaed;
+  letter-spacing: 10px;
+}
+
+.el-table {
+  background-color: #fff0;
+}
+
+/deep/ .el-table .el-table__header-wrapper th {
+  background-color: #fff0;
+}
+
+/deep/ .el-table tr {
+  background-color: #fff0;
+}
+
+/deep/ .el-table .cell {
+  color: #fff
+}
+
+/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  background-color: #fff0;
+}
+
+.chartBox {
+  background-image: url("../../../assets/board/box.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  width: 46%;
+  height: 23.34vw;
+
+  .title {
+    position: absolute;
+    top: 8%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.2vw;
+    color: #ccc;
+  }
+
+  .chart {
+    position: absolute;
+    top: 16%;
+    left: 1%;
+    width: 98%;
+    height: 82%;
+  }
+}
+
 .chartBox1 {
+  top: 10%;
+  left: 2%;
+}
+
+.chartBox2 {
+  top: 10%;
+  right: 2%;
+}
+
+.chartBox3 {
+  top: 53%;
+  left: 2%;
+}
+
+.chartBox4 {
+  top: 53%;
+  right: 2%;
+}
+
+.bottom {
   position: absolute;
-  top: 23%;
-  left: 51%;
-  width: 45%;
-  height: 18.5%;
+  bottom: 1.5%;
+  left: 2%;
 }
 </style>