更新修改

package.json

@@ -43,6 +43,7 @@
 		"core-js": "3.8.1",
 		"echarts": "4.9.0",
 		"echarts-liquidfill": "^2.0.2",
+		"echarts5": "npm:echarts@^5.2.2",
 		"element-ui": "2.15.6",
 		"file-saver": "2.0.5",
 		"flv.js": "^1.6.2",

src/views/bigScreen/management/index.vue

@@ -3,19 +3,19 @@
     <div class="left1">
       <left1></left1>
     </div>
-    <!-- <div class="left2">
+    <div class="left2">
       <left2></left2>
-    </div> -->
+    </div>
     <!-- <div class="bg1"></div> -->
 
     <div class="center1">
-      <!-- <center1></center1> -->
+      <center1></center1>
     </div>
     <!-- <div class="center2">
 			<center2></center2>
 		</div> -->
     <div class="right1">
-      <!-- <right1></right1> -->
+      <right1></right1>
     </div>
 
     <div class="right2">

src/views/bigScreen/management/left1.vue

@@ -644,6 +644,7 @@ export default {
 
 <style lang="scss" scoped>
 ::v-deep.el-pagination button {
+  display: none;
   color: #fff !important;
   background-color: unset !important;
 }

src/views/bigScreen/management/right2.vue

@@ -96,6 +96,7 @@ import bigScreenTabs from "../components/bigScreenTabs/index.vue";
 import colorList from "@/utils/colorPalette";
 
 import echarts from "echarts";
+import * as echarts5 from "echarts5";
 require("echarts/theme/macarons"); // echarts theme
 import resize from "../../dashboard/mixins/resize";
 export default {
@@ -305,6 +306,15 @@ export default {
         }
       });
     },
+    setXdata(list, item, i) {
+      // ["", "", "2021", ""];
+      let arr = [];
+      for (let i = 0; i < list.length; i++) {
+        arr.push("");
+      }
+      arr[i] = item;
+      return arr;
+    },
     initChart2() {
       this.request({
         url: "/hx/operating/getCivilIndustryPic",
@@ -318,7 +328,6 @@ export default {
           // console.log(list.map(e=>(e.filter(e=> e.category == '其他')[0].realQuantity)))
           // console.log(list.filter(e => e.category == '其他').map(e => e.realQuantity))
           this.initChart3(categoryTotal);
-
           var app = {};
           var posList = [
             "left",
@@ -407,7 +416,7 @@ export default {
           };
 
           var labelOption = {
-            show: true,
+            show: false,
             position: app.config.position,
             distance: app.config.distance,
             align: app.config.align,
@@ -421,8 +430,66 @@ export default {
               },
             },
           };
+          let newData = [];
+          for (let i = 0; i < list.length; i++) {
+            const item = list[i];
+            const itemLength = item.length;
+            const listLength = list.length;
+            if (itemLength > listLength) listLength = itemLength;
+            for (let j = 0; j < itemLength; j++) {
+              let arr = Array.apply(null, Array(listLength)).map(() => "");
+              const item2 = item[j];
+              if (item2.realQuantity != 0 && item2.realQuantity != null) {
+                arr[i] = item2.realQuantity;
 
-          this.chart2 = echarts.init(this.$refs.chart2);
+                newData.push({
+                  barMaxWidth: 30,
+                  name: item2.category,
+                  type: "bar",
+                  barGap: 0,
+                  label: labelOption,
+                  xAxisIndex: i,
+                  data: arr.splice(0, i + 1),
+                });
+              }
+            }
+          }
+          let newRate = [[], [], []];
+          for (let i = 0; i < list.length; i++) {
+            const item = list[i];
+            for (let j = 0; j < item.length; j++) {
+              const item2 = item[j];
+              if (item2.category == "隔热") {
+                if (item2.quantityRate) {
+                  newRate[0].push(item2.quantityRate);
+                } else {
+                  newRate[0].push(0);
+                }
+              }
+              if (item2.category == "稀土") {
+                if (item2.quantityRate) {
+                  newRate[1].push(item2.quantityRate);
+                } else {
+                  newRate[1].push(0);
+                }
+              }
+              if (item2.category == "其他") {
+                if (item2.quantityRate) {
+                  newRate[2].push(item2.quantityRate);
+                } else {
+                  newRate[2].push(0);
+                }
+              }
+              // if (item2.realQuantity != 0 && item.planQuantity != 0) {
+              //   const rate = (item2.realQuantity / item2.planQuantity) * 100;
+              //   newRate[i].push(rate > 100 ? 100 : rate);
+              // } else {
+              //   newRate[i].push(0);
+              // }
+            }
+          }
+          console.log(newRate);
+          this.chart2 = echarts5.init(this.$refs.chart2);
           this.chart2.setOption({
             color: colorList,
             tooltip: {
@@ -457,94 +524,58 @@ export default {
               textStyle: {
                 color: "#fff",
               },
-              data: ["Forest", "Steppe", "Desert"],
+              data: [
-            },
+                "隔热",
-            toolbox: {
+                "稀土",
-              show: true,
+                "其他",
-              orient: "vertical",
+                "隔热完成率",
-              left: "right",
+                "稀土完成率",
-              top: "center",
+                "其他完成率",
-              feature: {
+              ],
-                mark: { show: true },
-                dataView: { show: true, readOnly: false },
-                magicType: {
-                  show: true,
-                  type: ["line", "bar", "stack", "tiled"],
-                },
-                restore: { show: true },
-                saveAsImage: { show: true },
-              },
             },
+            // echars 转折线和 echars下载
+            // toolbox: {
+            //   show: true,
+            //   orient: "vertical",
+            //   left: "right",
+            //   top: "center",
+            //   feature: {
+            //     mark: { show: true },
+            //     dataView: { show: true, readOnly: false },
+            //     magicType: {
+            //       show: true,
+            //       type: ["line", "bar", "stack", "tiled"],
+            //     },
+            //     restore: { show: true },
+            //     saveAsImage: { show: true },
+            //   },
+            // },
             dataZoom: {
               type: "slider",
               start: 0,
-              end: 50,
+              end: 100,
               textStyle: {
                 color: "#fff",
               },
             },
             xAxis: [
-              {
+              ...monthList.map((e, i) => {
+                return {
                   type: "category",
                   axisTick: { show: false },
                   position: "bottom",
-                data: ["2012", "", "", "", ""],
+                  data: this.setXdata(monthList, e, i),
                   axisLine: {
                     lineStyle: {
                       color: "rgb(255, 255, 255)",
                     },
                   },
-              },
+                };
-              {
+              }),
-                type: "category",
-                axisTick: { show: false },
-                position: "bottom",
-                data: ["", "2013", "", "", ""],
-                axisLine: {
-                  lineStyle: {
-                    color: "rgb(255, 255, 255)",
-                  },
-                },
-              },
-              {
-                type: "category",
-                axisTick: { show: false },
-                position: "bottom",
-                data: ["", "", "2014", "", ""],
-                axisLine: {
-                  lineStyle: {
-                    color: "rgb(255, 255, 255)",
-                  },
-                },
-              },
-              {
-                type: "category",
-                axisTick: { show: false },
-                position: "bottom",
-                data: ["", "", "", "2015", ""],
-                axisLine: {
-                  lineStyle: {
-                    color: "rgb(255, 255, 255)",
-                  },
-                },
-              },
-              {
-                type: "category",
-                axisTick: { show: false },
-                position: "bottom",
-                data: ["", "", "", "", "2016"],
-                axisLine: {
-                  lineStyle: {
-                    color: "rgb(255, 255, 255)",
-                  },
-                },
-              },
             ],
             yAxis: [
               {
                 min: 0,
-                max: 100,
-                interval: 20,
                 splitLine: {
                   show: true,
                   //  改变轴线颜色
@@ -562,96 +593,67 @@ export default {
                   },
                 },
               },
+              {
+                type: "value",
+                min: 0,
+                max: 100,
+                // interval: 5,
+                axisLabel: {
+                  formatter: "{value} %",
+                },
+                splitLine: {
+                  show: false, //不显示网格线
+                },
+                splitArea: {
+                  show: false, //不显示网格区域
+                },
+                axisLine: {
+                  lineStyle: {
+                    color: "rgb(255, 255, 255)",
+                  },
+                },
+              },
             ],
             series: [
+              ...newData,
               {
-                name: "Forest",
+                name: "隔热完成率",
-                type: "bar",
+                type: "line",
-                barGap: 0,
+                yAxisIndex: 1,
-                label: labelOption,
+                smooth: false,
-                xAxisIndex: 0,
+                data: newRate[0],
-                data: [320],
+                itemStyle: {
+                  normal: {
+                    color: colorList[0],
+                  },
+                },
+                symbol: "none",
               },
               {
-                name: "Steppe",
+                name: "稀土完成率",
-                type: "bar",
+                type: "line",
-                label: labelOption,
+                yAxisIndex: 1,
-                xAxisIndex: 0,
+                smooth: false,
-                data: [220],
+                data: newRate[1],
+                itemStyle: {
+                  normal: {
+                    color: colorList[1],
+                  },
+                },
+                symbol: "none",
               },
               {
-                name: "Desert",
+                name: "其他完成率",
-                type: "bar",
+                type: "line",
-                label: labelOption,
+                yAxisIndex: 1,
-                xAxisIndex: 0,
+                smooth: false,
-                data: [332],
+                data: newRate[2],
+                itemStyle: {
+                  normal: {
+                    color: colorList[2],
                   },
-              {
-                name: "Forest",
-                type: "bar",
-                barGap: 0,
-                label: labelOption,
-                xAxisIndex: 1,
-                data: ["", 320],
                 },
-              {
+                symbol: "none",
-                name: "Steppe",
-                type: "bar",
-                label: labelOption,
-                xAxisIndex: 1,
-                data: ["", 220],
-              },
-              {
-                name: "Desert",
-                type: "bar",
-                label: labelOption,
-                xAxisIndex: 1,
-                data: ["", 232],
-              },
-              {
-                name: "Forest",
-                type: "bar",
-                barGap: 0,
-                label: labelOption,
-                xAxisIndex: 2,
-                data: ["", "", 320],
-              },
-              {
-                name: "Steppe",
-                type: "bar",
-                label: labelOption,
-                xAxisIndex: 2,
-                data: ["", "", 420],
-              },
-              {
-                name: "Desert",
-                type: "bar",
-                label: labelOption,
-                xAxisIndex: 2,
-                data: ["", "", 232],
-              },
-              {
-                name: "Forest",
-                type: "bar",
-                barGap: 0,
-                label: labelOption,
-                xAxisIndex: 3,
-                data: ["", "", "", 320],
-              },
-              {
-                name: "Forest",
-                type: "bar",
-                barGap: 0,
-                label: labelOption,
-                xAxisIndex: 4,
-                data: ["", "", "", "", 620],
-              },
-              {
-                name: "Steppe",
-                type: "bar",
-                label: labelOption,
-                xAxisIndex: 4,
-                data: ["", "", "", "", 290],
               },
             ],
           });

src/views/bigScreen/qualityManage/center.vue

@@ -51,8 +51,8 @@
           <div><span style="font-weight: bold">产品错、漏检率</span></div>
           <div class="box">
             <span
-              >{{ dataInfo.errorCheckRate.toFixed(2) }}%/{{
+              >{{ dataInfo.realErrorCheckRate }}%/{{
-                dataInfo.leakCheckRate.toFixed(2)
+                dataInfo.targetErrorCheckRate
               }}%</span
             >
           </div>
@@ -72,7 +72,7 @@
         <div class="data-item">
           <div><span style="font-weight: bold">质量检查完成率</span></div>
           <div class="box">
-            <span>{{ dataInfo.checkCompleteRate }}</span
+            <span>{{ dataInfo.checkCompleteRate.toFixed(2) }}</span
             >%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">{{
               dataInfo.qualityNotificationCompleteTotal
             }}</span>