update

package.json

@@ -11,7 +11,6 @@
     "@jiaminghi/data-view": "^2.10.0",
     "axios": "^1.6.8",
     "core-js": "^3.8.3",
-    "crypto-js": "^4.1.1",
     "echarts": "^5.5.0",
     "echarts4": "npm:echarts@^4.0.0",
     "element-ui": "^2.15.14",
@@ -38,6 +37,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-vue": "^8.0.3",
+    "postcss": "^8.4.49",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
     "vue-template-compiler": "^2.6.14"

src/App.vue

@@ -7,9 +7,9 @@
 </script>
 <style lang="scss">
 #app {
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-  // -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
-  // -moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale;
 }
 #nprogress .bar {
   background: #4b8df8 !important;

src/api/forwardDemand.js

@@ -1,4 +1,7 @@
 import request from "@/utils/request";
+
+// 前方需求分析
+
 // 1.需求计划与分析
 export function qfxqTable(params) {
   return request({

src/api/integration.js

@@ -1,2 +1,3 @@
 import request from "@/utils/request";
+
 // 小池集成

src/api/lineTableAnalysis.js

@@ -1,6 +1,8 @@
 import request from "@/utils/request";
 
 // 线表分析
+
+// 柱状图、折线图
 export function kbanXbjh(params) {
   return request({
     url: "/kban/xbjh",

src/api/monthPlan.js

@@ -1,10 +1,11 @@
 import request from "@/utils/request";
 
-// 中日程分析
+// 月度计划分析
+
 // 汇总表
-export function qfxqTable(params) {
+export function zrcTable(params) {
   return request({
-    url: "/kban/qfxqTable",
+    url: "/kban/zrcTable",
     method: "get",
     params,
   });

src/api/viewPDF.js

@@ -10,3 +10,13 @@ export function getProject(params) {
     params,
   });
 }
+
+// 根据查询条件获取pdf
+export function pdfList(params) {
+  return request({
+    url: "/kban/pdfList",
+    method: "get",
+    params,
+  });
+}
+

src/components/AmphiPosition/index.vue

@@ -185,22 +185,155 @@ export default {
         nf: this.formData.nf,
       }).then((res) => {
         let dataX = [];
-        let dataY = [];
+        let dataDayX = [];
         let legendData = [];
-        let seriesData = [];
+        let seriesData = [{}, {}, {}, {}, {}, {}];
-        res.data.forEach((item) => {
+        let dataY = [];
-          dataX.push(item.day);
+        let dateData = [];
-          dataY.push(item.sl);
+        let zyqList = res.data.reduce((prev, current) => {
-          legendData.push(item.zyq);
+          const key = current.zyq;
-          seriesData.push({
+          if (!prev[key]) {
-            name: item.zyq,
+            prev[key] = [];
-            type: "line",
+          }
-            stack: "Total",
+          prev[key].push(current);
-            data: item.sl,
+          return prev;
+        }, {});
+
+        // 获取所有作业区
+        legendData = Object.keys(zyqList);
+        dataX = this.getAllDatesOfCurrentMonth();
+
+        dataX.forEach((item, index) => {
+          dataDayX.push(item.slice(-2) + "日");
+          dataY.push({
+            day: item,
+            data: 0,
           });
+          dateData.push(0);
         });
+
+        // 循环数据
+        legendData.forEach((item, index) => {
+          if (item == "一区") {
+            let Y = JSON.parse(JSON.stringify(dataY));
+            for (let i = 0; i < Y.length; i++) {
+              let arry1 = Y[i];
+              let arry2 = zyqList[item].find((item) => item.day === arry1.day);
+              if (arry2) {
+                arry1.data = arry2.sl;
+              }
+            }
+            seriesData[0].data = Y;
+          } else if (item == "二区") {
+            let Y = JSON.parse(JSON.stringify(dataY));
+            for (let i = 0; i < Y.length; i++) {
+              let arry1 = Y[i];
+              let arry2 = zyqList[item].find((item) => item.day === arry1.day);
+              if (arry2) {
+                arry1.data = arry2.sl;
+              }
+            }
+            seriesData[1].data = Y;
+          } else if (item == "三区") {
+            let Y = JSON.parse(JSON.stringify(dataY));
+            for (let i = 0; i < Y.length; i++) {
+              let arry1 = Y[i];
+              let arry2 = zyqList[item].find((item) => item.day === arry1.day);
+              if (arry2) {
+                arry1.data = arry2.sl;
+              }
+            }
+            seriesData[2].data = Y;
+          } else if (item == "四区") {
+            let Y = JSON.parse(JSON.stringify(dataY));
+            for (let i = 0; i < Y.length; i++) {
+              let arry1 = Y[i];
+              let arry2 = zyqList[item].find((item) => item.day === arry1.day);
+              if (arry2) {
+                arry1.data = arry2.sl;
+              }
+            }
+            seriesData[3].data = Y;
+          } else if (item == "五区") {
+            let Y = JSON.parse(JSON.stringify(dataY));
+            for (let i = 0; i < Y.length; i++) {
+              let arry1 = Y[i];
+              let arry2 = zyqList[item].find((item) => item.day === arry1.day);
+              if (arry2) {
+                arry1.data = arry2.sl;
+              }
+            }
+            seriesData[4].data = Y;
+          } else if (item == "六区") {
+            let Y = JSON.parse(JSON.stringify(dataY));
+            for (let i = 0; i < Y.length; i++) {
+              let arry1 = Y[i];
+              let arry2 = zyqList[item].find((item) => item.day === arry1.day);
+              if (arry2) {
+                arry1.data = arry2.sl;
+              }
+            }
+            seriesData[5].data = Y;
+          }
+        });
+        var oneArr = [];
+        var twoArr = [];
+        var threeArr = [];
+        var fourArr = [];
+        var fiveArr = [];
+        var sixArr = [];
+        if (seriesData[0] && seriesData[0].data) {
+          seriesData[0].data.forEach((item) => {
+            oneArr.push(item.data);
+          });
+        } else {
+          oneArr = dateData;
+        }
+        if (seriesData[1] && seriesData[1].data) {
+          seriesData[1].data.forEach((item) => {
+            twoArr.push(item.data);
+          });
+        } else {
+          twoArr = dateData;
+        }
+        if (seriesData[2] && seriesData[2].data) {
+          seriesData[2].data.forEach((item) => {
+            threeArr.push(item.data);
+          });
+        } else {
+          threeArr = dateData;
+        }
+        if (seriesData[3] && seriesData[3].data) {
+          seriesData[3].data.forEach((item) => {
+            fourArr.push(item.data);
+          });
+        } else {
+          fourArr = dateData;
+        }
+        if (seriesData[4] && seriesData[4].data) {
+          seriesData[4].data.forEach((item) => {
+            fiveArr.push(item.data);
+          });
+        } else {
+          fiveArr = dateData;
+        }
+        if (seriesData[5] && seriesData[5].data) {
+          seriesData[5].data.forEach((item) => {
+            sixArr.push(item.data);
+          });
+        } else {
+          sixArr = dateData;
+        }
         //   折线图
-        this.TableLine(legendData, dataX, dataY, seriesData);
+        this.TableLine(
+          dataDayX,
+          oneArr,
+          twoArr,
+          threeArr,
+          fourArr,
+          fiveArr,
+          sixArr
+        );
       });
     },
     today_zyjhzx() {
@@ -578,7 +711,7 @@ export default {
         myChart.resize();
       });
     },
-    TableLine(legendData, dataX, dataY, seriesData) {
+    TableLine(dataX, oneArr, twoArr, threeArr, fourArr, fiveArr, sixArr) {
       var myChart = this.$echarts.init(document.getElementById("TableLine"));
 
       var option = {
@@ -594,7 +727,7 @@ export default {
           "#3ba272",
         ],
         legend: {
-          data: legendData,
+          data: ["一区", "二区", "三区", "四区", "五区", "六区"],
           top: "5%",
           textStyle: {
             color: "#e9ebee",
@@ -640,64 +773,34 @@ export default {
         },
         series: [
           {
-            name: "作业区1",
+            name: "一区",
             type: "line",
-            stack: "Total",
+            data: oneArr,
-            data: [
-              120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230, 4, 90,
-              230, 210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90,
-              230,
-            ],
           },
           {
-            name: "作业区2",
+            name: "二区",
             type: "line",
-            stack: "Total",
+            data: twoArr,
-            data: [
-              220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 4, 90, 230,
-              210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90, 230,
-              230,
-            ],
           },
           {
-            name: "作业区3",
+            name: "三区",
             type: "line",
-            stack: "Total",
+            data: threeArr,
-            data: [
-              120, 132, 101, 134, 130, 230, 210, 132, 101, 134, 90, 230, 4, 90,
-              230, 210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90,
-              230,
-            ],
           },
           {
-            name: "作业区4",
+            name: "四区",
             type: "line",
-            stack: "Total",
+            data: fourArr,
-            data: [
-              220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 4, 90, 230,
-              210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90, 230,
-              230,
-            ],
           },
           {
-            name: "作业区5",
+            name: "五区",
             type: "line",
-            stack: "Total",
+            data: fiveArr,
-            data: [
-              120, 132, 101, 134, 30, 230, 210, 132, 101, 134, 90, 230, 4, 90,
-              230, 210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90,
-              230,
-            ],
           },
           {
-            name: "作业区6",
+            name: "六区",
             type: "line",
-            stack: "Total",
+            data: sixArr,
-            data: [
-              220, 182, 591, 234, 290, 330, 310, 132, 101, 134, 90, 4, 90, 230,
-              210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90, 230,
-              230,
-            ],
           },
         ],
       };
@@ -706,6 +809,30 @@ export default {
         myChart.resize();
       });
     },
+    getAllDatesOfCurrentMonth() {
+      const today = new Date();
+      const firstDayOfMonth = new Date(
+        today.getFullYear(),
+        today.getMonth(),
+        1
+      );
+      const lastDayOfMonth = new Date(
+        today.getFullYear(),
+        today.getMonth() + 1,
+        0
+      );
+      const dates = [];
+
+      for (
+        let i = firstDayOfMonth;
+        i <= lastDayOfMonth;
+        i.setDate(i.getDate() + 1)
+      ) {
+        dates.push(this.$moment(new Date(i)).format("yyyy/MM/DD"));
+      }
+
+      return dates;
+    },
   },
 };
 </script>

src/components/ForwardDemand/index.vue

@@ -50,11 +50,11 @@
                   }}</el-col>
                   <el-col :span="4" class="col-right-border">批次数量</el-col>
                   <el-col :span="5" class="col-right-border"
-                    >{{ item.pcsl }} 吨</el-col
+                    >{{ item.pcsl }} 张</el-col
                   >
                   <el-col :span="3" class="col-right-border">重量</el-col>
                   <el-col :span="5" class="col-right-border-text"
-                    >{{ item.zl }} 吨</el-col
+                    >{{ hasDot(item.zl) }} 吨</el-col
                   >
                 </el-row>
               </vue-seamless-scroll>
@@ -74,15 +74,15 @@
               <div class="table-text">
                 <div>
                   <span class="span1">前方需求</span>
-                  <span class="span2-orage">{{ xqzlSum }}吨</span>
+                  <span class="span2-orage">{{ hasDot(xqzlSum) }}吨</span>
                 </div>
                 <div>
                   <span class="span1">月度计划</span>
-                  <span class="span2-orage">{{ jhzlSum }}吨</span>
+                  <span class="span2-orage">{{ hasDot(jhzlSum) }}吨</span>
                 </div>
                 <div>
                   <span class="span1">完工总量</span>
-                  <span class="span2-red">{{ wczlSum }}吨</span>
+                  <span class="span2-red">{{ hasDot(wczlSum) }}吨</span>
                 </div>
                 <div>
                   <span class="span1">需求与计划百分比</span>
@@ -115,6 +115,7 @@
 <script>
 import { qfxqTable, qfxqWc } from "@/api/forwardDemand";
 import VueSeamlessScroll from "vue-seamless-scroll";
+import { hasDot } from "@/utils/tool";
 export default {
   name: "ForwardDemand",
   components: {
@@ -122,6 +123,7 @@ export default {
   },
   data() {
     return {
+      hasDot,
       formData: {
         year: 2024,
       },
@@ -517,7 +519,9 @@ export default {
           .col-right-border-text {
             height: 2rem;
             line-height: 2rem;
-            text-align: center;
+            text-align: right;
+            padding-right: 10px;
+            padding-left: 10px;
             border-top: 1px solid #3490ba;
           }
         }

src/components/Integration/index.vue

@@ -26,10 +26,10 @@
                 :key="index"
               >
                 <div class="pop-left">
-                  <dv-border-box-9 class="datav-border">
+                  <dv-border-box-12 class="datav-border">
                     <div class="status-text">设备状态： 使用</div>
                     <div class="">加高套料图号： GHDLGFT</div>
-                  </dv-border-box-9>
+                  </dv-border-box-12>
                 </div>
                 <img :src="item.img" alt="" />
               </div>
@@ -42,10 +42,10 @@
               >
                 <div class="pop-left">
                   <!-- <dv-border-box-8 style="width: 200px;height: 100px;">dv-border-box-8</dv-border-box-8> -->
-                  <dv-border-box-9 class="datav-border">
+                  <dv-border-box-12 class="datav-border">
                     <div class="status-text">设备状态： 使用</div>
-                    <div class="">加高套料图号： GHDLGFT</div>
+                    <div class="">加工套料图号： GHDLGFT</div>
-                  </dv-border-box-9>
+                  </dv-border-box-12>
                 </div>
                 <img :src="item.img" alt="" />
               </div>

src/components/LineTableAnalysis/index.vue

@@ -104,8 +104,81 @@ export default {
       xbgtt({
         nf: this.formData.year,
       }).then((res) => {
+        let xbgttList = res.data.reduce((prev, current) => {
+          const key = current.dcCh;
+          if (!prev[key]) {
+            prev[key] = [];
+          }
+          prev[key].push(current);
+          return prev;
+        }, {});
+
+        // 获取所有船只
+        let dataY = Object.keys(xbgttList);
+
+        let xbListCopy = JSON.parse(JSON.stringify(xbgttList));
+        let ydListCopy = JSON.parse(JSON.stringify(xbgttList));
+
+        // 获取日期
+        let xbStartData = [];
+        let xbEndData = [];
+        let ydStartData = [];
+        let ydEndData = [];
+
+        dataY.forEach((item) => {
+          xbListCopy[item] = xbListCopy[item].filter((em) => {
+            return em.zl >= 0;
+          });
+          ydListCopy[item] = ydListCopy[item].filter((em) => {
+            return em.jhzl >= 0;
+          });
+
+          xbStartData.push(
+            new Date(
+              this.$moment().format("yyyy") +
+                "/" +
+                (xbListCopy[item] && xbListCopy[item][0].yf
+                  ? xbListCopy[item][0].yf
+                  : "") +
+                "/01"
+            )
+          );
+          xbEndData.push(
+            new Date(
+              this.$moment().format("yyyy") +
+                "/" +
+                (xbListCopy[item] && xbListCopy[item].length > 0
+                  ? xbListCopy[item][xbListCopy[item].length - 1].yf
+                  : "") +
+                "/01"
+            )
+          );
+
+          // =====
+          ydStartData.push(
+            new Date(
+              this.$moment().format("yyyy") +
+                "/" +
+                (ydListCopy[item] && ydListCopy[item].length > 0
+                  ? ydListCopy[item][0].yf
+                  : "") +
+                "/01"
+            )
+          );
+
+          ydEndData.push(
+            new Date(
+              this.$moment().format("yyyy") +
+                "/" +
+                (ydListCopy[item] && ydListCopy[item].length > 0
+                  ? ydListCopy[item][ydListCopy[item].length - 1].yf
+                  : "") +
+                "/01"
+            )
+          );
+        });
         // 船只分析甘特图
-        this.ShipBar();
+        this.ShipBar(dataY, xbStartData, xbEndData, ydStartData, ydEndData);
       });
     },
     TableLine() {
@@ -293,7 +366,7 @@ export default {
         myChart.resize();
       });
     },
-    ShipBar() {
+    ShipBar(dataY, xbStartData, xbEndData, ydStartData, ydEndData) {
       var myChart = this.$echarts4.init(document.getElementById("ShipBar"));
       var option = {
         legend: {
@@ -306,10 +379,10 @@ export default {
         },
         grid: {
           containLabel: true,
-          top: "10%",
+          top: "6%",
           left: "2%",
           right: "4%",
-          bottom: "3%",
+          bottom: "6%",
         },
         tooltip: {
           trigger: "axis",
@@ -326,33 +399,43 @@ export default {
             },
           },
           formatter: (params) => {
-            var res = params[0].name + "</br>";
+            if (params && params.length) {
-            var date0 = params[0].data;
+              var res = "";
-            var date1 = params[1].data;
+              var date0 = this.$moment(params[0].data).format("yyyy-MM");
-            var date2 = params[2].data;
+              var date1 =
-            var date3 = params[3].data;
+                params.length > 1
-            date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1);
+                  ? this.$moment(params[1].data).format("yyyy-MM")
-            date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1);
+                  : "";
-            date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1);
+              var date2 =
-
+                params.length > 2
-            date3 = date3.getFullYear() + "-" + (date3.getMonth() + 1);
+                  ? this.$moment(params[2].data).format("yyyy-MM")
-            res +=
+                  : "";
-              params[1].marker +
+              var date3 =
-              params[1].seriesName +
+                params.length > 3
+                  ? this.$moment(params[3].data).format("yyyy-MM")
+                  : "";
+              res =
+                params[0].name +
+                "</br>" +
+                (params.length > 1
+                  ? params[1].marker + params[1].seriesName
+                  : "") +
                 ":</br>" +
                 date0 +
                 "~" +
                 date1 +
-              "</br>";
+                "</br>" +
-            res +=
+                (params.length > 3
-              params[3].marker +
+                  ? params[3].marker + params[3].seriesName
-              params[3].seriesName +
+                  : "") +
                 ":</br>" +
                 date2 +
                 "~" +
                 date3 +
                 "</br>";
+
               return res;
+            }
           },
         },
         xAxis: {
@@ -365,7 +448,6 @@ export default {
             color: "#e4e4e4",
             formatter: (value) => {
               var date = new Date(value);
-              console.log();
               // 获取月份，并加1因为 JavaScript 中月份是从0开始的
               var month = date.getMonth() + 1;
               // 返回月份或不显示
@@ -389,18 +471,7 @@ export default {
           },
         },
         yAxis: {
-          data: [
+          data: dataY,
-            "船只1",
-            "船只2",
-            "船只3",
-            "船只4",
-            "船只5",
-            "船只6",
-            "船只7",
-            "船只8",
-            "船只9",
-            "船只10",
-          ],
           axisLabel: {
             color: "#e4e4e4",
           },
@@ -423,18 +494,7 @@ export default {
                 color: "rgba(0,0,0,0)",
               },
             },
-            data: [
+            data: xbStartData,
-              new Date("2024/01/01"),
-              new Date("2024/02/01"),
-              new Date("2024/03/01"),
-              new Date("2024/04/01"),
-              new Date("2024/04/01"),
-              new Date("2024/05/01"),
-              new Date("2024/06/01"),
-              new Date("2024/04/01"),
-              new Date("2024/06/01"),
-              new Date("2024/03/01"),
-            ],
           },
           {
             name: "线表计划",
@@ -446,18 +506,7 @@ export default {
                 color: "#1afffd",
               },
             },
-            data: [
+            data: xbEndData,
-              new Date("2024/10/01"),
-              new Date("2024/11/01"),
-              new Date("2024/11/01"),
-              new Date("2024/06/01"),
-              new Date("2024/10/01"),
-              new Date("2024/10/01"),
-              new Date("2024/12/01"),
-              new Date("2024/12/01"),
-              new Date("2024/08/01"),
-              new Date("2024/08/01"),
-            ],
           },
           {
             name: "月度计划（隐藏）",
@@ -468,18 +517,7 @@ export default {
                 color: "rgba(0,0,0,0)",
               },
             },
-            data: [
+            data: ydStartData,
-              new Date("2024/03"),
-              new Date("2024/09"),
-              new Date("2024/02"),
-              new Date("2024/10"),
-              new Date("2024/04"),
-              new Date("2024/04"),
-              new Date("2024/04"),
-              new Date("2024/07"),
-              new Date("2024/09"),
-              new Date("2024/09"),
-            ],
           },
           {
             name: "月度计划",
@@ -491,18 +529,7 @@ export default {
                 color: "#2e7cff",
               },
             },
-            data: [
+            data: ydEndData,
-              new Date("2024/09/01"),
-              new Date("2024/12/01"),
-              new Date("2024/05/01"),
-              new Date("2024/12/01"),
-              new Date("2024/08/01"),
-              new Date("2024/05/01"),
-              new Date("2024/11/01"),
-              new Date("2024/08/01"),
-              new Date("2024/11/01"),
-              new Date("2024/11/01"),
-            ],
           },
         ],
       };
@@ -592,7 +619,7 @@ export default {
         }
         .ShipBar {
           width: 100%;
-          height: calc(100% - 24px);
+          height: 100%;
         }
       }
     }

src/components/MonthPlan/index.vue

@@ -22,27 +22,23 @@
                 <tr>
                   <td class="table-sum-title">需求重量</td>
                   <td class="table-sum-text">
-                    {{ tableSumObj.xqzl ? tableSumObj.xqzl : 0 }}吨
+                    {{ tableSumObj.xqzl ? hasDot(tableSumObj.xqzl) : 0 }}吨
                   </td>
                   <td class="table-sum-title">订货清单重量</td>
                   <td class="table-sum-text">
-                    {{ tableSumObj.dhzl ? tableSumObj.dhzl : 0 }}吨
+                    {{ tableSumObj.dhzl ? hasDot(tableSumObj.dhzl) : 0 }}吨
                   </td>
                 </tr>
                 <tr>
                   <td class="table-sum-title">月度计划重量</td>
                   <td class="table-sum-text">
-                    {{ tableSumObj.jhzl ? tableSumObj.jhzl : 0 }}吨
+                    {{ tableSumObj.jhzl ? hasDot(tableSumObj.jhzl) : 0 }}吨
                   </td>
                   <td class="table-sum-title">完成重量</td>
                   <td class="table-sum-text">
-                    {{ tableSumObj.wczl ? tableSumObj.wczl : 0 }}吨
+                    {{ tableSumObj.wczl ? hasDot(tableSumObj.wczl) : 0 }}吨
                   </td>
                 </tr>
-              </table>
-            </div>
-            <div class="left-bottom-box">
-              <table class="table-sum">
                 <tr v-for="(item, index) in tableSumObj.detail" :key="index">
                   <td class="table-sum-title">船号</td>
                   <td class="table-sum-text">
@@ -55,6 +51,10 @@
                 </tr>
               </table>
             </div>
+            <!-- <div class="left-bottom-box">
+              <table class="table-sum">
+              </table>
+            </div> -->
           </div>
         </div>
       </div>
@@ -65,21 +65,21 @@
               <!-- 柱状图 -->
               <div class="right-top-title">月度计划数据分析</div>
               <el-row class="row">
-                <el-col :span="12">
+                <el-col :span="24">
                   <div id="DrawingBar" class="drawingBar"></div>
                 </el-col>
-                <el-col :span="12">
+                <!-- <el-col :span="12">
                   <div id="ForwardDemandBar" class="forwardDemandBar"></div
-                ></el-col>
+                ></el-col> -->
               </el-row>
-              <el-row class="row">
+              <!-- <el-row class="row">
                 <el-col :span="12">
                   <div id="MonthlyPlanBar" class="monthlyPlanBar"></div
                 ></el-col>
                 <el-col :span="12"
                   ><div id="FinishBar" class="finishBar"></div>
                 </el-col>
-              </el-row>
+              </el-row> -->
             </div>
           </div>
         </div>
@@ -89,16 +89,19 @@
               <!-- 饼图 -->
               <div class="right-bottom-title">月度计划数据分析</div>
               <el-row class="row">
-                <el-col :span="6">
+                <el-col :span="4">
                   <div id="DrawingPie" class="drawingPie"></div>
                 </el-col>
-                <el-col :span="6">
+                <el-col :span="4" :offset="1">
                   <div id="ForwardDemandPie" class="forwardDemandPie"></div>
                 </el-col>
-                <el-col :span="6">
+                <el-col :span="4" :offset="1">
+                  <div id="PlanFinishPie" class="planFinishPie"></div>
+                </el-col>
+                <el-col :span="4" :offset="1">
                   <div id="MonthlyPlanPie" class="monthlyPlanPie"></div>
                 </el-col>
-                <el-col :span="6">
+                <el-col :span="4">
                   <div id="FinishPie" class="finishPie"></div
                 ></el-col>
               </el-row>
@@ -110,11 +113,13 @@
   </div>
 </template>
 <script>
-import { qfxqTable } from "@/api/monthPlan";
+import { zrcTable } from "@/api/monthPlan";
+import { hasDot } from "@/utils/tool";
 export default {
   name: "MonthPlan",
   data() {
     return {
+      hasDot,
       tableSumList: [],
       tableSumObj: {},
       xbjhList: [],
@@ -136,128 +141,108 @@ export default {
     };
   },
   mounted() {
-    this.qfxqTable();
+    this.zrcTable();
   },
   methods: {
-    qfxqTable() {
+    zrcTable() {
-      qfxqTable().then((res) => {
+      zrcTable().then((res) => {
         this.tableSumObj = res.data;
-        this.DrawingBar();
+        var bgData = [res.data.xqzl, res.data.xqzl, res.data.xqzl, res.data.xqzl];
-        this.ForwardDemandBar();
+        var zlData = [ res.data.xqzl,res.data.dhzl, res.data.jhzl, res.data.wczl];
-        this.MonthlyPlanBar();
+
-        this.FinishBar();
+        this.DrawingBar(bgData,zlData);
-        this.DrawingPie(20, 45);
+        // this.ForwardDemandBar();
-        this.ForwardDemandPie(20, 45);
+        // this.MonthlyPlanBar();
-        this.MonthlyPlanPie(20, 45);
+        // this.finishBar();
-        this.FinishPie(20, 45);
+        this.drawingPie(res.data.ltsl, res.data.tzsl);
+        this.planFinishPie(res.data.jhzl, res.data.wczl);
+        this.forwardDemandPie(res.data.xqzl, res.data.dhzl);
+        this.monthlyPlanPie(res.data.xqzl, res.data.jhzl);
+        this.finishPie(res.data.xqzl, res.data.wczl);
       });
     },
-    DrawingBar() {
+    DrawingBar(bgData,zlData) {
       var myChart = this.$echarts.init(document.getElementById("DrawingBar"));
 
+     
       var option = {
-        color: ["#2e7cff", "#fc8452"],
+         // color: ["#2e7cff", "#fc8452"],
         tooltip: {
           trigger: "axis",
-        },
+          axisPointer: {
-        legend: {
+            type: "line",
-          data: ["线表计划", "月度计划"],
+            lineStyle: {
-          top: "5%",
+              color: "rgba(150,150,150,0.2)",
-          textStyle: {
+              width: 70,
-            color: "#e9ebee",
+              type: "solid",
+            },
+          },
+          formatter: (params) => {
+            var res = "";
+            res =
+              params[1].marker +
+              params[1].name +
+              "<br/>" +
+              params[0].seriesName +
+              "：" +
+              params[0].value +
+              "<br/>" +
+              params[1].name +
+              "：" +
+              params[1].value;
+            return res;
           },
         },
         grid: {
+          top: "10%",
           left: "2%",
           right: "2%",
-          bottom: "5%",
+          bottom: "15",
           containLabel: true,
         },
-        calculable: true,
         xAxis: [
           {
             type: "category",
-            data: this.monthList,
+            data: ["需求重量", "订货重量", "计划重量", "完成重量"],
             axisLabel: {
               color: "#e4e4e4",
             },
-            nameTextStyle: {
-              color: "#e4e4e4",
-              fontSize: 12,
-              padding: [0, 0, 0, 0],
-            },
           },
         ],
-        yAxis: [
+        yAxis: {
-          {
           type: "value",
           splitLine: {
             show: false,
-              lineStyle: {
-                color: "#064585",
-                // type: "dashed"
-              },
           },
           axisLabel: {
             color: "#e4e4e4",
           },
-            nameTextStyle: {
+          data: zlData,
-              color: "#e4e4e4",
-              fontSize: 12,
-              padding: [0, 30, 10, 0],
         },
-          },
-        ],
         series: [
           {
-            name: "线表计划",
+            name: "需求重量",
             type: "bar",
-            data: [34, 45, 67, 34, 45, 34, 12, 67, 34, 12, 34, 12],
+            barGap: "-100%",
-            markPoint: {
-              data: [
-                {
-                  type: "max",
-                  name: "Max",
             label: {
-                    show: true,
+              show: false,
-                    color: "#fff",
-                  },
-                },
-                {
-                  type: "min",
-                  name: "Min",
-                  label: {
-                    show: true,
-                    color: "#fff",
-                  },
             },
-              ],
+            barWidth: 40,
+            itemStyle: {
+              color: "#2e7cff",
             },
+            data: bgData, // 载入背景数据
+            z: 0,
           },
           {
-            name: "月度计划",
+            name: "完成数量",
             type: "bar",
-            data: [34, 45, 67, 34, 12, 34, 45, 67, 34, 12, 34, 12],
+            barWidth: 40,
-            markPoint: {
+            itemStyle: {
-              data: [
+              color: "#fc8452",
-                {
-                  type: "max",
-                  name: "Max",
-                  label: {
-                    show: true,
-                    color: "#fff",
-                  },
-                },
-                {
-                  type: "min",
-                  name: "Min",
-                  label: {
-                    show: true,
-                    color: "#fff",
-                  },
-                },
-              ],
             },
+            data: zlData, // 载入数据(内含自定义参数)
+            z: 1,
           },
         ],
       };
@@ -498,7 +483,7 @@ export default {
         myChart.resize();
       });
     },
-    FinishBar() {
+    finishBar() {
       var myChart = this.$echarts.init(document.getElementById("FinishBar"));
 
       var option = {
@@ -612,11 +597,62 @@ export default {
         myChart.resize();
       });
     },
-    DrawingPie(wclValue, wcValue) {
+    drawingPie(ltValue, tzValue) {
       var myChart = this.$echarts.init(document.getElementById("DrawingPie"));
       var option = {
         title: {
-          text: "中日程与图纸",
+          text: "来图与图纸分析",
+          left: "center",
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+            fontWeight: "normal",
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        color: ["#ff81cb", "#ff81cb"],
+        legend: {
+          show: true,
+          left: "center",
+          top: "10%",
+          textStyle: {
+            color: "#e9ebee",
+          },
+          itemWidth: 25,
+          itemHeight: 15,
+        },
+        series: [
+          {
+            name: "来图与图纸分析",
+            type: "pie",
+            radius: "50%",
+            center: ["50%", "50%"],
+            minAngle: tzValue && tzValue ? 20 : "",
+            avoidLabelOverlap: true,
+            data: [
+              { value: ltValue, name: "来图数量" },
+              { value: tzValue, name: "图纸数量" },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    planFinishPie(jhValue, wcValue) {
+      var myChart = this.$echarts.init(
+        document.getElementById("PlanFinishPie")
+      );
+
+      var option = {
+        title: {
+          text: "计划与完成分析",
           left: "center",
           bottom: "10%",
           textStyle: {
@@ -625,11 +661,11 @@ export default {
             fontWeight: "normal",
           },
         },
+        color: ["#2e7cff", "#91cc75"],
         tooltip: {
           trigger: "item",
           formatter: "{a} <br/>{b} : {c} ({d}%)",
         },
-        color: ["#ff7d0a", "#5470c6"],
         legend: {
           show: true,
           left: "center",
@@ -642,15 +678,15 @@ export default {
         },
         series: [
           {
-            name: "中日程与图纸",
+            name: "计划与完成分析",
             type: "pie",
             radius: "50%",
             center: ["50%", "50%"],
-            minAngle: wcValue && wclValue ? 20 : "",
+            minAngle: wcValue && wcValue ? 20 : "",
             avoidLabelOverlap: true,
             data: [
-              { value: wcValue, name: "完成量" },
+              { value: jhValue, name: "计划重量" },
-              { value: wclValue, name: "未完成量" },
+              { value: wcValue, name: "完成重量" },
             ],
           },
         ],
@@ -660,14 +696,14 @@ export default {
         myChart.resize();
       });
     },
-    ForwardDemandPie(wclValue, wcValue) {
+    forwardDemandPie(xqValue, dhValue) {
       var myChart = this.$echarts.init(
         document.getElementById("ForwardDemandPie")
       );
 
       var option = {
         title: {
-          text: "中日程与前方需求",
+          text: "需求与订货分析",
           left: "center",
           bottom: "10%",
           textStyle: {
@@ -676,7 +712,7 @@ export default {
             fontWeight: "normal",
           },
         },
-        color: ["#91cc75", "#2e7cff"],
+        color: ["#ff5c58", "#06b8f8"],
         tooltip: {
           trigger: "item",
           formatter: "{a} <br/>{b} : {c} ({d}%)",
@@ -693,15 +729,15 @@ export default {
         },
         series: [
           {
-            name: "中日程与前方需求",
+            name: "需求与订货分析",
             type: "pie",
             radius: "50%",
             center: ["50%", "50%"],
-            minAngle: wcValue && wclValue ? 20 : "",
+            minAngle: dhValue && dhValue ? 20 : "",
             avoidLabelOverlap: true,
             data: [
-              { value: wcValue, name: "完成量" },
+              { value: xqValue, name: "需求重量" },
-              { value: wclValue, name: "未完成量" },
+              { value: dhValue, name: "订货重量" },
             ],
           },
         ],
@@ -711,14 +747,14 @@ export default {
         myChart.resize();
       });
     },
-    MonthlyPlanPie(wclValue, wcValue) {
+    monthlyPlanPie(xqValue, jhValue) {
       var myChart = this.$echarts.init(
         document.getElementById("MonthlyPlanPie")
       );
 
       var option = {
         title: {
-          text: "中日程与月度计划",
+          text: "需求与月度计划分析",
           left: "center",
           bottom: "10%",
           textStyle: {
@@ -731,7 +767,7 @@ export default {
           trigger: "item",
           formatter: "{a} <br/>{b} : {c} ({d}%)",
         },
-        color: ["#feb602", "#5470c6"],
+        color: ["#5470c6", "#ffcb89"],
         legend: {
           show: true,
           left: "center",
@@ -744,15 +780,15 @@ export default {
         },
         series: [
           {
-            name: "中日程与月度计划",
+            name: "需求与月度计划分析",
             type: "pie",
             radius: "50%",
             center: ["50%", "50%"],
-            minAngle: wcValue && wclValue ? 20 : "",
+            minAngle: jhValue && jhValue ? 20 : "",
             avoidLabelOverlap: true,
             data: [
-              { value: wcValue, name: "完成量" },
+              { value: xqValue, name: "需求重量" },
-              { value: wclValue, name: "未完成量" },
+              { value: jhValue, name: "计划重量" },
             ],
           },
         ],
@@ -762,11 +798,11 @@ export default {
         myChart.resize();
       });
     },
-    FinishPie(wclValue, wcValue) {
+    finishPie(xqValue, wcValue) {
       var myChart = this.$echarts.init(document.getElementById("FinishPie"));
       var option = {
         title: {
-          text: "中日程与完成重量",
+          text: "需求与完成分析",
           left: "center",
           // left:"center",
           bottom: "10%",
@@ -794,16 +830,16 @@ export default {
         },
         series: [
           {
-            name: "中日程与完成重量",
+            name: "需求与完成分析",
             type: "pie",
             radius: "50%",
             center: ["50%", "50%"],
-            minAngle: wcValue && wclValue ? 20 : "",
+            minAngle: wcValue && wcValue ? 20 : "",
             minAngle: 20,
             avoidLabelOverlap: true,
             data: [
-              { value: wcValue, name: "完成量" },
+              { value: xqValue, name: "需求重量" },
-              { value: wclValue, name: "未完成量" },
+              { value: wcValue, name: "完成重量" },
             ],
           },
         ],
@@ -842,6 +878,20 @@ export default {
           text-align: center;
           margin: 0 auto;
         }
+        .table-sum {
+          width: 96%;
+          margin-left: 2%;
+          margin-top: 2%;
+          border-collapse: collapse;
+          color: #ffffff;
+          .table-sum-title {
+            font-size: 14px;
+          }
+          .table-sum-text {
+            font-weight: bold;
+            font-size: 16px;
+          }
+        }
       }
       .left-bottom-box {
         // border: 1px solid red;
@@ -874,7 +924,7 @@ export default {
       margin-left: 5px;
       //   柱状图
       .right-top-box {
-        height: 55%;
+        height: 50%;
         margin-bottom: 5px;
         .right-top-title {
           width: 32%;
@@ -888,8 +938,9 @@ export default {
           margin: 0 auto;
         }
         .row {
-          height: calc(50% - 12px);
+          height: calc(100% - 24px);
-          .el-col-12 {
+          .el-col-24 {
+            width: 100%;
             height: 100%;
 
             .drawingBar,
@@ -904,7 +955,7 @@ export default {
       }
       //   饼图
       .right-bottom-box {
-        height: 45%;
+        height: 50%;
         .right-bottom-title {
           width: 32%;
           height: 24px;
@@ -918,10 +969,11 @@ export default {
         }
         .row {
           height: calc(100% - 24px);
-          .el-col-6 {
+          .el-col-4 {
             height: 100%;
             .drawingPie,
             .forwardDemandPie,
+            .planFinishPie,
             .monthlyPlanPie,
             .finishPie {
               width: 100%;

src/components/RealTimeMonitor/index.vue

@@ -126,15 +126,15 @@
                 >
                   <div class="header-box-flex">
                     <div class="header-left-box">
-                      <div class="type-text">{{ item.msgType }}</div>
+                      <div class="type-text">
+                        {{ item.msgType == 41 ? "月度计划下发" : "" }}
+                        {{ item.subData1 }} {{ item.subData2 }}
+                      </div>
                       <div class="name-text">{{ item.subName }}</div>
                     </div>
                     <div class="time-text">{{ item.subTime }}</div>
                   </div>
-                  <div class="body">
+                  <div class="body"></div>
-                    <div class="body1">船号：{{ item.subData1 }}</div>
-                    <div>批量：{{ item.subData2 }}</div>
-                  </div>
                 </div>
               </vue-seamless-scroll>
             </div>
@@ -154,78 +154,74 @@
                 height="95%"
               >
                 <el-table-column type="index" label="序号" width="55" fixed />
-                <el-table-column prop="dcCh" label="船号" width="90" />
+                <el-table-column prop="dcCh" label="船号" width="80" />
-                <el-table-column prop="dcPl" label="批量" width="90" />
+                <el-table-column prop="dcPl" label="批量" width="70" />
-                <el-table-column prop="dcFd" label="分段号" width="90" />
+                <el-table-column prop="dcFd" label="分段号" width="80" />
-                <el-table-column prop="bs" label="板数" width="60" />
+                <el-table-column prop="bs" label="板数" width="50" />
-                <el-table-column prop="sl" label="上料" width="100" />
+                <el-table-column prop="sl" label="上料" width="95" />
-                <el-table-column prop="xcpw" label="型材抛丸" width="100" />
+                <el-table-column prop="xcpw" label="型材抛丸" width="80" />
-                <el-table-column prop="date" label="抛丸" width="100" />
+                <el-table-column prop="date" label="抛丸" width="70" />
-                <el-table-column prop="yklm" label="一垮龙门板数" width="100" />
+                <el-table-column prop="yklm" label="一垮龙门板数" width="95" />
-                <el-table-column prop="yksk" label="一垮数控板数" width="100" />
+                <el-table-column prop="yksk" label="一垮数控板数" width="95" />
                 <el-table-column
                   prop="ykpkjs"
                   label="坡口切割结束"
-                  width="100"
+                  width="95"
-                />
-                <el-table-column
-                  prop="eksk2"
-                  label="二跨龙门板数"
-                  width="100"
                 />
-                <el-table-column prop="eksk" label="二跨数控板数" width="100" />
+                <el-table-column prop="eksk2" label="二跨龙门板数" width="95" />
+                <el-table-column prop="eksk" label="二跨数控板数" width="95" />
                 <el-table-column
                   prop="ekskks"
                   label="数控切割开始"
-                  width="100"
+                  width="95"
                 />
                 <el-table-column
                   prop="ekpkjs"
                   label="坡口切割结束"
-                  width="100"
+                  width="95"
                 />
-                <el-table-column prop="sksk" label="三跨数控板数" width="100" />
+                <el-table-column prop="sksk" label="三跨数控板数" width="95" />
                 <el-table-column
                   prop="skskqgks"
                   label="数控切割开始"
-                  width="100"
+                  width="95"
                 />
                 <el-table-column
                   prop="skpkjs"
                   label="坡口切割结束"
-                  width="100"
+                  width="95"
                 />
-                <el-table-column prop="skpt" label="三跨平铁板数" width="100" />
+                <el-table-column prop="skpt" label="三跨平铁板数" width="95" />
-                <el-table-column prop="ptks" label="平铁切割开始" width="100" />
+                <el-table-column prop="ptks" label="平铁切割开始" width="95" />
-                <el-table-column prop="ptjs" label="平铁切割结束" width="100" />
+                <el-table-column prop="ptjs" label="平铁切割结束" width="95" />
                 <el-table-column
                   prop="qpt_zjs"
                   label="曲平铁转结束"
                   width="100"
                 />
-                <el-table-column prop="qptjs" label="曲平铁结束" width="100" />
+                <el-table-column prop="qptjs" label="曲平铁结束" width="90" />
-                <el-table-column prop="qwbjs" label="曲外板结束" width="100" />
+                <el-table-column prop="qwbjs" label="曲外板结束" width="90" />
-                <el-table-column prop="zl" label="组立" width="100" />
+                <el-table-column prop="zl" label="组立" width="70" />
-                <el-table-column prop="skbs" label="数控板数" width="100" />
+                <el-table-column prop="skbs" label="数控板数" width="70" />
                 <el-table-column
                   prop="skqgks"
                   label="数控切割开始"
-                  width="100"
+                  width="95"
                 />
                 <el-table-column
                   prop="pkqgjs"
                   label="坡口切割结束"
-                  width="100"
+                  width="95"
                 />
-                <el-table-column prop="mbjb" label="面板挤边" width="100" />
+                <el-table-column prop="mbjb" label="面板挤边" width="70" />
                 <el-table-column
                   prop="qkxcms"
                   label="七跨型材米数"
-                  width="100"
+                  width="95"
                 />
-                <el-table-column prop="xcmb" label="型材面板" width="100" />
+                <el-table-column prop="xcmb" label="型材面板" width="95" />
-                <el-table-column prop="gdjs" label="光电结束" width="100" />
+                <el-table-column prop="gdjs" label="光电结束" width="95" />
-                <el-table-column prop="fdxq" label="分段需求" width="100" />
+                <el-table-column prop="fdxq" label="分段需求" width="95" />
               </el-table>
             </div>
           </div>
@@ -293,13 +289,19 @@
           <div class="border-out">
             <div class="border-inner">
               <div class="right-top-title">本月计划汇总量</div>
-              <div class="right-top-flex">
               <div class="right-top-text">
-                  <div v-for="(item, index) in planList" :key="index">
+                <div
-                    <span>{{ item.name }}:</span> 计划:{{
+                  class="title-flex"
-                      item.zsl ? item.zsl : item.zsl
+                  v-for="(item, index) in planList"
-                    }}张 &nbsp; &nbsp;完成:{{ item.wcl ? item.wcl : 0 }}张
+                  :key="index"
+                >
+                  <div>
+                    <span>{{ item.name }}：</span>
+                  </div>
+                  <div class="title-plan">
+                    计划：{{ item.zsl ? item.zsl : 0 }}张
                   </div>
+                  <div class="title">完成：{{ item.wcl ? item.wcl : 0 }}张</div>
                 </div>
               </div>
             </div>
@@ -309,7 +311,7 @@
         <div class="right-center-box box-top">
           <div class="border-out">
             <div class="border-inner">
-              <dv-scroll-board ref="scrollTable2" :config="bottomConfig" />
+              <dv-scroll-board ref="scrollTable2" :config="tableConfig" />
             </div>
           </div>
         </div>
@@ -318,27 +320,27 @@
           <div class="border-out">
             <div class="border-inner">
               <div class="right-bottom-title">作业区完成情况</div>
-              <el-row :gutter="40">
+              <el-row>
-                <el-col :span="12">
+                <el-col :span="8">
                   <div id="FinishOnePie" class="FinishOnePie"></div>
                 </el-col>
-                <el-col :span="12">
+                <el-col :span="8">
                   <div id="FinishSecondPie" class="FinishSecondPie"></div>
                 </el-col>
-                <el-col :span="12">
+                <el-col :span="8">
                   <div id="FinishThreePie" class="FinishThreePie"></div>
                 </el-col>
-                <!-- </el-row>
+              </el-row>
-              <el-row> -->
+              <el-row>
-                <el-col :span="12">
+                <el-col :span="8">
                   <div id="FinishFourPie" class="FinishFourPie"></div>
                 </el-col>
-                <!-- <el-col :span="12">
+                <el-col :span="8">
                   <div id="FinishFivePie" class="FinishFivePie"></div>
-                </el-col> -->
+                </el-col>
-                <!-- <el-col :span="8">
+                <el-col :span="8">
                   <div id="FinishSixPie" class="FinishSixPie"></div>
-                </el-col> -->
+                </el-col>
               </el-row>
             </div>
           </div>
@@ -433,7 +435,7 @@ export default {
       // 6.计划总量
       planList: [],
       // 7.作业区执行情况
-      bottomConfig: {
+      tableConfig: {
         header: [
           "作业区",
           "船号",
@@ -445,6 +447,7 @@ export default {
           "完成人",
         ],
         data: [],
+        columnWidth: [45, 65, 40, 40, 88, 30, 70, 60],
         rowNum: 7,
         headerBGC: "#3490ba",
         oddRowBGC: "",
@@ -558,19 +561,30 @@ export default {
     zxqwcqk() {
       zxqwcqk().then((res) => {
         res.data.forEach((item) => {
+          let oneValue = [0, 0];
+          let secondValue = [0, 0];
+          let threeValue = [0, 0];
+          let fourValue = [0, 0];
+          let fiveValue = [0, 0];
+          let sixValue = [0, 0];
           if (item.zyq == "一区") {
-            this.FinishOnePie(item.wcl, item.wc);
           } else if (item.zyq == "二区") {
-            this.FinishSecondPie(item.wcl, item.wc);
+            oneValue = [item.wcl, item.wc];
           } else if (item.zyq == "三区") {
-            this.FinishThreePie(item.wcl, item.wc);
+            threeValue = [item.wcl, item.wc];
           } else if (item.zyq == "四区") {
-            this.FinishFourPie(item.wcl, item.wc);
+            fourValue = [item.wcl, item.wc];
           } else if (item.zyq == "五区") {
-            this.FinishFivePie(item.wcl, item.wc);
+            fiveValue = [item.wcl, item.wc];
           } else if (item.zyq == "六区") {
-            this.FinishSixPie(item.wcl, item.wc);
+            sixValue = [item.wcl, item.wc];
-          }
+          }
+          this.FinishOnePie(oneValue[0], oneValue[1]);
+          this.FinishSecondPie(secondValue[0], secondValue[1]);
+          this.FinishThreePie(threeValue[0], threeValue[1]);
+          this.FinishFourPie(fourValue[0], fourValue[1]);
+          this.FinishFivePie(fiveValue[0], fiveValue[1]);
+          this.FinishSixPie(sixValue[0], sixValue[1]);
         });
       });
     },
@@ -585,8 +599,8 @@ export default {
         },
         legend: {
           orient: "vertical",
-          x: "right",
           y: "10%",
+          right: "2%",
           data: ["白班", "二班"],
           textStyle: {
             color: "#e9ebee",
@@ -665,7 +679,7 @@ export default {
       var option = {
         title: {
           text: "作业一区",
-          left: "56%",
+          left: "50%",
           bottom: 0,
           textStyle: {
             color: "#fff",
@@ -686,7 +700,7 @@ export default {
           textStyle: {
             color: "#e9ebee",
           },
-          itemWidth: 20,
+          itemWidth: 10,
           itemHeight: 10,
         },
         series: [
@@ -723,7 +737,7 @@ export default {
       var option = {
         title: {
           text: "作业二区",
-          left: "56%",
+          left: "50%",
           // left: "center",
           bottom: 0,
           textStyle: {
@@ -745,7 +759,7 @@ export default {
           textStyle: {
             color: "#e9ebee",
           },
-          itemWidth: 20,
+          itemWidth: 10,
           itemHeight: 10,
         },
         series: [
@@ -783,7 +797,7 @@ export default {
       var option = {
         title: {
           text: "作业三区",
-          left: "56%",
+          left: "50%",
           // left:"center",
           bottom: 0,
           textStyle: {
@@ -805,7 +819,7 @@ export default {
           textStyle: {
             color: "#e9ebee",
           },
-          itemWidth: 20,
+          itemWidth: 10,
           itemHeight: 10,
         },
         series: [
@@ -843,7 +857,7 @@ export default {
       var option = {
         title: {
           text: "作业四区",
-          left: "56%",
+          left: "48%",
           // left:"center",
           bottom: 0,
           textStyle: {
@@ -865,7 +879,7 @@ export default {
           textStyle: {
             color: "#e9ebee",
           },
-          itemWidth: 20,
+          itemWidth: 10,
           itemHeight: 10,
         },
         series: [
@@ -904,7 +918,7 @@ export default {
       var option = {
         title: {
           text: "作业五区",
-          left: "53%",
+          left: "48%",
           bottom: 0,
           textStyle: {
             color: "#fff",
@@ -1233,7 +1247,7 @@ export default {
               display: flex;
               align-items: center;
               .type-text {
-                width: 150px;
+                // width: 150px;
                 background-image: url("@/assets/image/pushmessage_class.png");
                 background-size: 100%;
                 background-repeat: no-repeat;
@@ -1242,14 +1256,13 @@ export default {
                 white-space: nowrap;
                 line-height: 25px;
                 color: #fff;
-                font-size: 14px;
+                font-size: 11px;
                 text-align: center;
               }
               .name-text {
                 background-image: url("@/assets/image/pushmessage_level03.png");
                 background-size: 100%;
                 background-repeat: no-repeat;
-                line-height: 25px;
                 // width: 10rem;
                 padding-left: 0.5rem;
                 padding-right: 0.5rem;
@@ -1361,18 +1374,29 @@ export default {
           font-weight: bold;
           color: white;
         }
-        .right-top-flex {
-          height: 88%;
-          display: flex;
-          align-items: center;
         .right-top-text {
-            text-indent: 2ch;
+          height: 74%;
-            color: #10a4db;
+          display: flex;
-            font-size: 1.1rem;
+          flex-direction: column;
-            font-family: "data_Number";
+          justify-content: space-between;
+          margin-left: 5%;
+          color: #3490ba;
+          font-size: 16px;
+          padding: 3% 0;
+          .title-flex {
+            display: flex;
+            .title-plan {
+              width: 47%;
+            }
+            .title {
+              width: 53%;
+            }
             span {
+              width: 70px;
+              text-align: left;
+              display: inline-block;
               color: #fff !important;
-              font-size: 12px !important;
+              font-size: 14px !important;
             }
           }
         }
@@ -1437,6 +1461,14 @@ export default {
     border-top-left-radius: 10px !important;
     border-top-right-radius: 10px !important;
   }
+  .dv-scroll-board .header .header-item,
+  .dv-scroll-board .rows .ceil {
+    padding: 0 !important;
+    text-align: center !important;
+  }
+  .dv-scroll-board .rows .row-item {
+    font-size: 10px !important;
+  }
 
   .center-top-box {
     // .el-table th.el-table__cell {

src/components/ViewPDF/index.vue

@@ -3,12 +3,17 @@
   <div class="viewpdf-container">
     <!-- 筛选 -->
     <div class="formData-box">
-      <el-select v-model="formData.dcCh" size="mini" placeholder="请选择船号">
+      <el-select
+        v-model="formData.dcCh"
+        size="mini"
+        placeholder="请选择船号"
+        @change="dcChChange"
+      >
         <el-option
           v-for="(item, index) in dcChOptions"
           :key="index"
-          :label="item.label"
+          :label="item.dcCh"
-          :value="item.value"
+          :value="item.dcCh"
         >
         </el-option>
       </el-select>
@@ -16,62 +21,105 @@
         <el-option
           v-for="(item, index) in dcPlOptions"
           :key="index"
-          :label="item.label"
+          :label="item.dcPl"
-          :value="item.value"
+          :value="item.dcPl"
         >
         </el-option>
       </el-select>
-      <el-select v-model="formData.kw" size="mini" placeholder="请选择套料图">
-        <el-option label="四垮" :value="4"></el-option>
-        <el-option label="五垮" :value="5"></el-option>
-        <el-option label="六垮" :value="6"></el-option>
-      </el-select>
       <div class="query-btn" @click="queryBtn">确定</div>
     </div>
     <div class="viewpdf-box">
       <div class="border-out">
         <div class="border-inner">
-          <div class="viewpdf-flex">
+          <el-row :gutter="20">
-            <div class="left-box">
+            <el-col :span="6" v-for="(item, index) in pdfDataList" :key="index">
-              <div></div>
+              <dv-border-box-12>
-            </div>
+                <div class="viewpdf-flex" @click="pdfChange(item)">
-            <div class="right-box"></div>
+                  <img src="@/assets/image/KHCFDC_PDF.png" alt="" />
+                  <div class="pdf-title">{{ item }}</div>
                 </div>
+              </dv-border-box-12>
+            </el-col>
+          </el-row>
         </div>
       </div>
     </div>
+    <!-- pdf预览 -->
+    <el-dialog
+      title="预览"
+      :visible.sync="dialogVisible"
+      :modal="false"
+      width="60%"
+      :before-close="handleClose"
+    >
+      <pdf :src="pdfUrl"></pdf>
+    </el-dialog>
   </div>
 </template>
 <script>
-import { getProject } from "@/api/viewPDF";
+import { getProject, pdfList } from "@/api/viewPDF";
-// import pdf from 'vue-pdf'
+import pdf from "vue-pdf";
 export default {
   name: "ViewPDF",
-  // components:{
+  components: {
-  //   pdf
+    pdf,
-  // },
+  },
   data() {
     return {
       formData: {
         dcCh: "",
         dcPl: "",
       },
+      sumOptions: [],
       dcChOptions: [],
       dcPlOptions: [],
+      pdfDataList: [],
+      dialogVisible: false,
+      pdfUrl: "",
     };
   },
   mounted() {
-    this.queryBtn();
+    this.getProject();
   },
   methods: {
-    // 根据年份查询
     queryBtn() {
-      this.getProject();
+      this.pdfList();
     },
     getProject() {
-      getProject({
+      getProject().then((res) => {
-        nf: this.formData.year,
+        this.sumOptions = res.data;
-      }).then((res) => {});
+        const uniqueArr = res.data.reduce((accumulator, current) => {
+          const duplicate = accumulator.find(
+            (item) => item.dcCh === current.dcCh
+          );
+          if (!duplicate) {
+            return accumulator.concat([current]);
+          }
+          return accumulator;
+        }, []);
+        this.dcChOptions = uniqueArr;
+      });
+    },
+    pdfList() {
+      pdfList({
+        dcCh: this.formData.dcCh,
+        dcPl: this.formData.dcPl,
+      }).then((res) => {
+        this.pdfDataList = res.data;
+      });
+    },
+    dcChChange(value) {
+      this.formData.dcPl = "";
+      this.dcPlOptions = this.sumOptions.filter((item) => {
+        return item.dcCh == value;
+      });
+    },
+    pdfChange(item) {
+      this.pdfUrl = `http://kban.runpengsoft.com/upload/${this.formData.dcCh}/${this.formData.dcPl}/PDF/${item}.pdf`;
+      this.dialogVisible = true;
+    },
+    handleClose() {
+      this.dialogVisible = false;
     },
   },
 };
@@ -83,7 +131,7 @@ export default {
   padding-left: 5px;
   padding-right: 5px;
   .formData-box {
-    width: 450px !important;
+    width: 300px !important;
     margin-bottom: 18px;
   }
   .viewpdf-box {
@@ -92,10 +140,18 @@ export default {
     height: calc(100vh - 105px);
     .viewpdf-flex {
       display: flex;
+      align-items: center;
+      font-size: 20px;
+      color: #fff;
+      margin-top: 4%;
+      padding: 20px;
+      cursor: pointer;
+      img {
+        width: 50px;
       }
-    .left-box {
+      .pdf-title {
+        margin-left: 10px;
       }
-    .right-box {
     }
   }
 
@@ -117,9 +173,42 @@ export default {
     box-sizing: border-box;
     border: 2px solid #016ae0;
     border-radius: 10px;
+    padding: 0 1%;
   }
   .border-inner {
     background-color: rgba(2, 8, 23, 0.1);
   }
 }
+::v-deep {
+  .el-dialog {
+    display: flex;
+    flex-direction: column;
+    margin: 0 !important;
+    position: fixed;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    max-height: calc(100% - 30px) !important;
+    max-width: calc(100% - 30px) !important;
+    background-color: #134094 !important;
+    border: 1px solid #016ae0;
+  }
+  .el-dialog__title {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    color: #fff !important;
+  }
+  .el-dialog__body {
+    overflow-y: auto;
+    padding-top: 0 !important;
+    .el-select,
+    .el-date-editor.el-input {
+      width: 100% !important;
+    }
+  }
+  .el-dialog__headerbtn .el-dialog__close{
+    color: #fff !important;
+  }
+}
 </style>

src/layout/index.vue

@@ -1,11 +0,0 @@
-<template>
-  <div class="layout-container">
-    <router-view />
-  </div>
-</template>
-<script>
-export default {
-  name: "Layout",
-};
-</script>
-<style></style>

src/router/index.js

@@ -1,42 +1,18 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Layout from "@/layout";
 
 Vue.use(VueRouter);
 
-export const constantRoutes = [
+export const routes = [
-  {
-    path: "/redirect",
-    component: Layout,
-    children: [
-      {
-        path: "/redirect/:path(.*)",
-        component: () => import("@/views/redirect/index"),
-      },
-    ],
-  },
   {
     path: "/",
     component: () => import("../views/home/index.vue"),
-  },
+  }
-  {
-    path: "/404",
-    component: () => import("../views/errorPage/404.vue"),
-  },
-  {
-    path: "/500",
-    component: () => import("@/views/errorPage/500.vue"),
-  },
 ];
 
-export const routes = [
-  ...constantRoutes,
-  // 404页必须放在末尾！！！
-  { path: "*", redirect: "/404" },
-];
 const router = new VueRouter({
   mode: "hash",
-  routes,
+  routes
 });
 
 export default router;

src/store/index.js

@@ -5,24 +5,10 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-    cartNum: 0, //购物车数量
-    navBarIndex: 0, //默认菜单高亮
   },
   getters: {
-    cartNum(state) {
-      return state.cartNum;
-    },
-    navBarIndex(state) {
-      return state.navBarIndex;
-    },
   },
   mutations: {
-    CART_NUM: (state, cartNum) => {
-      state.cartNum = cartNum;
-    },
-    NAV_BAR_INDEX: (state, navBarIndex) => {
-      state.navBarIndex = navBarIndex;
-    },
   },
   actions: {},
   modules: {},

src/styles/font/font.css

@@ -1,6 +1,8 @@
 @font-face {
   font-family: "data_number";
   src: url("./data_number.ttf") format("truetype");
-  font-weight: normal;
+}
-  font-style: normal;
+@font-face {
+  font-family: "din-regular";
+  src: url("./DIN-Condensed.ttf") format("truetype");
 }

src/styles/index.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@import url(f:\ccgroup\gj-erp-kban-vue\src\styles\font\font.css);
+@import url(f:\gj-erp-kban-vue\src\styles\font\font.css);
 .el-input__inner {
   background-color: rgba(1, 1, 1, 0) !important;
   border: 2px solid #00c0ef !important;
@@ -7,21 +7,6 @@
   font-weight: bold;
 }
 
-.table-sum {
-  width: 96%;
-  border-collapse: collapse;
-  color: #ffffff;
-}
-
-.table-sum .table-sum-title {
-  font-size: 14px;
-}
-
-.table-sum .table-sum-text {
-  font-weight: bold;
-  font-size: 18px;
-}
-
 .table-sum tr td {
   border: 1px solid #5bc0de;
   padding-top: 0.3rem;
@@ -102,7 +87,7 @@
 
 ::-webkit-scrollbar-thumb {
   border-radius: 10px;
-  background: rgba(0, 0, 0, 0.3);
+  background: #fff;
   -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
 }
 

src/styles/index.min.css

@@ -1 +1 @@
-@import url(f:\ccgroup\gj-erp-kban-vue\src\styles\font\font.css);.el-input__inner{background-color:rgba(1,1,1,0) !important;border:2px solid #00c0ef !important;color:#72e3ff !important;font-weight:bold}.table-sum{width:96%;border-collapse:collapse;color:#ffffff}.table-sum .table-sum-title{font-size:14px}.table-sum .table-sum-text{font-weight:bold;font-size:18px}.table-sum tr td{border:1px solid #5bc0de;padding-top:0.3rem;padding-bottom:0.3rem;text-indent:10px}.formData-box{width:300px;position:relative;top:10px;display:flex}.formData-box .query-btn{height:22px;background-color:#00c0ef;color:white;border:#00cdff 2px solid;min-width:50px;border-radius:5px;margin-left:20px;text-align:center;font-size:14px;position:relative;top:2px;cursor:pointer}.formData-box .el-form-item__label{color:#fff}.el-select .el-input .el-select__caret{color:#00c0ef !important}.el-table,.el-table tr,.el-table__fixed-right::before,.el-table__fixed::before{background-color:rgba(1,1,1,0) !important}.el-table th,.el-table td{text-align:center !important;height:30px !important;padding:0 !important;color:#fff}.el-table-column--selection .cell{padding-left:0 !important;padding-right:0 !important}.el-table--border{border:none !important}.el-table .el-table__cell{padding:0 !important}.el-table--border::after,.el-table--group::after,.el-table::before{border:none !important;background-color:rgba(1,1,1,0) !important}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,0.3);-webkit-box-shadow:inset006pxrgba(0, 0, 0, 0.5)}::-webkit-scrollbar-corner{background:transparent !important}
+@import url(f:\gj-erp-kban-vue\src\styles\font\font.css);.el-input__inner{background-color:rgba(1,1,1,0) !important;border:2px solid #00c0ef !important;color:#72e3ff !important;font-weight:bold}.table-sum tr td{border:1px solid #5bc0de;padding-top:0.3rem;padding-bottom:0.3rem;text-indent:10px}.formData-box{width:300px;position:relative;top:10px;display:flex}.formData-box .query-btn{height:22px;background-color:#00c0ef;color:white;border:#00cdff 2px solid;min-width:50px;border-radius:5px;margin-left:20px;text-align:center;font-size:14px;position:relative;top:2px;cursor:pointer}.formData-box .el-form-item__label{color:#fff}.el-select .el-input .el-select__caret{color:#00c0ef !important}.el-table,.el-table tr,.el-table__fixed-right::before,.el-table__fixed::before{background-color:rgba(1,1,1,0) !important}.el-table th,.el-table td{text-align:center !important;height:30px !important;padding:0 !important;color:#fff}.el-table-column--selection .cell{padding-left:0 !important;padding-right:0 !important}.el-table--border{border:none !important}.el-table .el-table__cell{padding:0 !important}.el-table--border::after,.el-table--group::after,.el-table::before{border:none !important;background-color:rgba(1,1,1,0) !important}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{border-radius:10px;background:#fff;-webkit-box-shadow:inset006pxrgba(0, 0, 0, 0.5)}::-webkit-scrollbar-corner{background:transparent !important}

src/styles/index.scss

@@ -5,19 +5,6 @@
   color: #72e3ff !important;
   font-weight: bold;
 }
-.table-sum {
-  width: 96%;
-  // margin-left: 2%;
-  border-collapse: collapse;
-  color: #ffffff;
-  .table-sum-title {
-    font-size: 14px;
-  }
-  .table-sum-text {
-    font-weight: bold;
-    font-size: 18px;
-  }
-}
 .table-sum tr td {
   border: 1px solid #5bc0de;
   padding-top: 0.3rem;

src/utils/encryption.js

@@ -1,30 +0,0 @@
-import CryptoJS from "crypto-js";
-
-// 解密
-export function decrypt(word, keyStr) {
-  keyStr = keyStr || "ylhzabcdefghi066";
-  var key = CryptoJS.enc.Utf8.parse(keyStr);
-
-  var decrypt = CryptoJS.AES.decrypt(word, key, {
-    mode: CryptoJS.mode.ECB,
-    padding: CryptoJS.pad.Pkcs7,
-  });
-  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
-}
-
-// 加密
-export function encrypt(word, keyStr) {
-  keyStr = keyStr || "ylhzabcdefghi066";
-  if (!word) return "";
-  const key = CryptoJS.enc.Utf8.parse(keyStr);
-
-  const srcs = CryptoJS.enc.Utf8.parse(word);
-
-  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
-    mode: CryptoJS.mode.ECB,
-
-    padding: CryptoJS.pad.Pkcs7,
-  });
-
-  return encrypted.toString();
-}

src/utils/tool.js

@@ -0,0 +1,9 @@
+export function hasDot(num) {
+  // 保留小数点后两位
+  var result = num.toString().indexOf("."); // 查找是否含有小数点
+  if (result != -1) {
+    return num.toString().substring(0, result + 3); //有小数点保留两位小数
+  } else {
+    return num;
+  }
+}

src/views/errorPage/404.vue

@@ -1,233 +0,0 @@
-<template>
-  <div class="wscn-http404-container">
-    <div class="wscn-http404">
-      <div class="pic-404">
-        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
-        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
-      </div>
-      <div class="bullshit">
-        <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">~ ~ ~ ~ ~ ~ ~ ~
-          <!-- <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a> -->
-        </div>
-        <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">请您联系管理员，或者单击下面的按钮返回主页。</div>
-        <a href="" class="bullshit__return-home" @click="goHome">返回首页</a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'Page404',
-  computed: {
-    message() {
-      return '页面错误...'
-    }
-  },
-  methods: {
-    goHome() {
-      this.$router.push('/home')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.wscn-http404-container{
-  transform: translate(-50%,-50%);
-  position: absolute;
-  top: 40%;
-  left: 50%;
-}
-.wscn-http404 {
-  position: relative;
-  width: 1200px;
-  padding: 0 50px;
-  overflow: hidden;
-  .pic-404 {
-    position: relative;
-    float: left;
-    width: 600px;
-    overflow: hidden;
-    &__parent {
-      width: 100%;
-    }
-    &__child {
-      position: absolute;
-      &.left {
-        width: 80px;
-        top: 17px;
-        left: 220px;
-        opacity: 0;
-        animation-name: cloudLeft;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-      &.mid {
-        width: 46px;
-        top: 10px;
-        left: 420px;
-        opacity: 0;
-        animation-name: cloudMid;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1.2s;
-      }
-      &.right {
-        width: 62px;
-        top: 100px;
-        left: 500px;
-        opacity: 0;
-        animation-name: cloudRight;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-      @keyframes cloudLeft {
-        0% {
-          top: 17px;
-          left: 220px;
-          opacity: 0;
-        }
-        20% {
-          top: 33px;
-          left: 188px;
-          opacity: 1;
-        }
-        80% {
-          top: 81px;
-          left: 92px;
-          opacity: 1;
-        }
-        100% {
-          top: 97px;
-          left: 60px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudMid {
-        0% {
-          top: 10px;
-          left: 420px;
-          opacity: 0;
-        }
-        20% {
-          top: 40px;
-          left: 360px;
-          opacity: 1;
-        }
-        70% {
-          top: 130px;
-          left: 180px;
-          opacity: 1;
-        }
-        100% {
-          top: 160px;
-          left: 120px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudRight {
-        0% {
-          top: 100px;
-          left: 500px;
-          opacity: 0;
-        }
-        20% {
-          top: 120px;
-          left: 460px;
-          opacity: 1;
-        }
-        80% {
-          top: 180px;
-          left: 340px;
-          opacity: 1;
-        }
-        100% {
-          top: 200px;
-          left: 300px;
-          opacity: 0;
-        }
-      }
-    }
-  }
-  .bullshit {
-    position: relative;
-    float: left;
-    width: 300px;
-    padding: 30px 0;
-    overflow: hidden;
-    &__oops {
-      font-size: 32px;
-      font-weight: bold;
-      line-height: 40px;
-      color: #1482f0;
-      opacity: 0;
-      margin-bottom: 20px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-fill-mode: forwards;
-    }
-    &__headline {
-      font-size: 20px;
-      line-height: 24px;
-      color: #222;
-      font-weight: bold;
-      opacity: 0;
-      margin-bottom: 10px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.1s;
-      animation-fill-mode: forwards;
-    }
-    &__info {
-      font-size: 13px;
-      line-height: 21px;
-      color: grey;
-      opacity: 0;
-      margin-bottom: 30px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.2s;
-      animation-fill-mode: forwards;
-    }
-    &__return-home {
-      display: block;
-      float: left;
-      width: 110px;
-      height: 36px;
-      background: #1482f0;
-      border-radius: 100px;
-      text-align: center;
-      color: #ffffff;
-      opacity: 0;
-      font-size: 14px;
-      line-height: 36px;
-      cursor: pointer;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.3s;
-      animation-fill-mode: forwards;
-    }
-    @keyframes slideUp {
-      0% {
-        transform: translateY(60px);
-        opacity: 0;
-      }
-      100% {
-        transform: translateY(0);
-        opacity: 1;
-      }
-    }
-  }
-}
-</style>

src/views/errorPage/500.vue

@@ -1,106 +0,0 @@
-<template>
-  <div class="errPage-container">
-    <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
-      返回首页
-    </el-button>
-    <el-row class="row-flex">
-      <el-col :span="12">
-        <h1 class="text-jumbo text-ginormous">Oops!</h1>
-        <!-- gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面 -->
-        <h2>您没有权限访问该页面</h2>
-        <!-- <h6>如有不满请联系你领导</h6> -->
-        <ul class="list-unstyled">
-          <li>或者你可以去:</li>
-          <li class="link-type">
-            <router-link to="/home"> 回首页 </router-link>
-          </li>
-          <!-- <li class="link-type">
-            <a href="https://www.taobao.com/">随便看看</a>
-          </li> -->
-          <li>
-            <a href="#" @click.prevent="dialogVisible = true">点我看图</a>
-          </li>
-        </ul>
-      </el-col>
-      <el-col :span="12">
-        <img
-          :src="errGif"
-          width="313"
-          height="428"
-          alt="Girl has dropped her ice cream."
-        >
-      </el-col>
-    </el-row>
-    <el-dialog :visible.sync="dialogVisible" title="随便看">
-      <img :src="ewizardClap" class="pan-img">
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import errGif from '@/assets/401_images/401.gif'
-
-export default {
-  name: 'Page401',
-  data() {
-    return {
-      errGif: errGif + '?' + +new Date(),
-      ewizardClap:
-        'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
-      dialogVisible: false
-    }
-  },
-  methods: {
-    back() {
-      this.$router.push({ path: '/home' })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.errPage-container {
-  width: 800px;
-  max-width: 100%;
-  margin: 0 auto;
-  padding-top: 100px;
-  height: 100vh;
-  overflow: hidden;
-  .pan-back-btn {
-    background: #008489;
-    color: #fff;
-    border: none !important;
-  }
-  .row-flex{
-    display: flex;
-    align-items: center;
-  }
-  .pan-gif {
-    margin: 0 auto;
-    display: block;
-  }
-  .pan-img {
-    display: block;
-    margin: 0 auto;
-    width: 100%;
-  }
-  .text-jumbo {
-    font-size: 60px;
-    font-weight: 700;
-    color: #484848;
-  }
-  .list-unstyled {
-    font-size: 14px;
-    li {
-      padding-bottom: 5px;
-    }
-    a {
-      color: #008489;
-      text-decoration: none;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
-</style>

src/views/home/index.vue

@@ -4,6 +4,7 @@
     <div class="home-header">
       <div class="home-header-left">
         <div v-for="(item, index) in headerLeftList" :key="index">
+          <div class="home-header-flex">
             <div
               class="home-header-name"
               :class="leftActiveIndex == index ? 'home-header-name-active' : ''"
@@ -11,17 +12,21 @@
             >
               {{ item.name }}
             </div>
+            <div class="tab-border" v-if="leftActiveIndex == index"></div>
+          </div>
         </div>
       </div>
       <div class="home-header-right">
         <div v-for="(item, index) in headerRightList" :key="index">
+          <div class="home-header-flex">
             <div
               class="home-header-name"
-            :class="rightActiveIndex == index ? 'home-header-name-active' : ''"
               @click="headerRightChange(item, index)"
             >
               {{ item.name }}
             </div>
+            <div class="tab-border" v-if="rightActiveIndex == index"></div>
+          </div>
         </div>
       </div>
     </div>
@@ -88,7 +93,7 @@ export default {
     MonthPlan,
     AmphiPosition,
     Integration,
-    ViewPDF
+    ViewPDF,
   },
   data() {
     return {
@@ -121,8 +126,8 @@ export default {
         },
         {
           id: 7,
-          name:"查看PDF"
+          name: "查看PDF",
-        }
+        },
       ], //右侧tabs
       leftActiveIndex: 0,
       rightActiveIndex: 99,
@@ -168,6 +173,12 @@ export default {
       justify-content: space-between;
       margin-right: 3%;
     }
+    .home-header-flex {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
 
     .home-header-name {
       font-size: 14px;
@@ -184,7 +195,9 @@ export default {
         opacity: 1;
       }
     }
-    .home-header-name-active {
+    .tab-border {
+      width: 80%;
+      border-radius: 1px;
       border-bottom: 4px solid #4b8df8;
     }
   }

src/views/redirect/index.vue

@@ -1,12 +0,0 @@
-<script>
-export default {
-  created() {
-    const { params, query } = this.$route
-    const { path } = params
-    this.$router.replace({ path: '/' + path, query })
-  },
-  render: function(h) {
-    return h() // avoid warning message
-  }
-}
-</script>