From 24501b0ac02cc41d810ef5cd869418ee7fcb9e84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Sat, 22 Jan 2022 16:33:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                 | 183 +++++------
 src/views/bigScreen/management/index.vue     |   8 +-
 src/views/bigScreen/management/left1.vue     |   1 +
 src/views/bigScreen/management/right2.vue    | 322 ++++++++++---------
 src/views/bigScreen/qualityManage/center.vue |   6 +-
 5 files changed, 262 insertions(+), 258 deletions(-)

diff --git a/package.json b/package.json
index 9bfddec..15d4703 100644
--- a/package.json
+++ b/package.json
@@ -1,93 +1,94 @@
 {
-  "name": "ruoyi",
-  "version": "3.7.0",
-  "description": "科研生产展示平台",
-  "author": "商挈",
-  "license": "MIT",
-  "scripts": {
-    "dev": "vue-cli-service serve",
-    "build:prod": "vue-cli-service build",
-    "build:stage": "vue-cli-service build --mode staging",
-    "preview": "node build/index.js --preview",
-    "lint": "eslint --ext .js,.vue src"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "src/**/*.{js,vue}": [
-      "eslint --fix",
-      "git add"
-    ]
-  },
-  "keywords": [
-    "vue",
-    "admin",
-    "dashboard",
-    "element-ui",
-    "boilerplate",
-    "admin-template",
-    "management-system"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://gitee.com/y_project/RuoYi-Vue.git"
-  },
-  "dependencies": {
-    "@antv/g2plot": "^2.3.40",
-    "@riophae/vue-treeselect": "0.4.0",
-    "axios": "0.21.0",
-    "clipboard": "2.0.6",
-    "core-js": "3.8.1",
-    "echarts": "4.9.0",
-    "echarts-liquidfill": "^2.0.2",
-    "element-ui": "2.15.6",
-    "file-saver": "2.0.5",
-    "flv.js": "^1.6.2",
-    "fuse.js": "6.4.3",
-    "highlight.js": "9.18.5",
-    "js-beautify": "1.13.0",
-    "js-cookie": "2.2.1",
-    "js-md5": "^0.7.3",
-    "jsencrypt": "3.0.0-rc.1",
-    "nprogress": "0.2.0",
-    "quill": "1.3.7",
-    "screenfull": "5.0.2",
-    "sortablejs": "1.10.2",
-    "vue": "2.6.12",
-    "vue-count-to": "1.0.13",
-    "vue-cropper": "0.5.5",
-    "vue-meta": "^2.4.0",
-    "vue-router": "3.4.9",
-    "vue-seamless-scroll": "^1.1.23",
-    "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "4.4.6",
-    "@vue/cli-plugin-eslint": "4.4.6",
-    "@vue/cli-service": "4.4.6",
-    "babel-eslint": "10.1.0",
-    "chalk": "4.1.0",
-    "connect": "3.6.6",
-    "eslint": "7.15.0",
-    "eslint-plugin-vue": "7.2.0",
-    "lint-staged": "10.5.3",
-    "runjs": "4.4.2",
-    "sass": "1.32.13",
-    "sass-loader": "10.1.1",
-    "script-ext-html-webpack-plugin": "2.1.5",
-    "svg-sprite-loader": "5.1.1",
-    "vue-template-compiler": "2.6.12"
-  },
-  "engines": {
-    "node": ">=8.9",
-    "npm": ">= 3.0.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ]
+	"name": "ruoyi",
+	"version": "3.7.0",
+	"description": "科研生产展示平台",
+	"author": "商挈",
+	"license": "MIT",
+	"scripts": {
+		"dev": "vue-cli-service serve",
+		"build:prod": "vue-cli-service build",
+		"build:stage": "vue-cli-service build --mode staging",
+		"preview": "node build/index.js --preview",
+		"lint": "eslint --ext .js,.vue src"
+	},
+	"husky": {
+		"hooks": {
+			"pre-commit": "lint-staged"
+		}
+	},
+	"lint-staged": {
+		"src/**/*.{js,vue}": [
+			"eslint --fix",
+			"git add"
+		]
+	},
+	"keywords": [
+		"vue",
+		"admin",
+		"dashboard",
+		"element-ui",
+		"boilerplate",
+		"admin-template",
+		"management-system"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://gitee.com/y_project/RuoYi-Vue.git"
+	},
+	"dependencies": {
+		"@antv/g2plot": "^2.3.40",
+		"@riophae/vue-treeselect": "0.4.0",
+		"axios": "0.21.0",
+		"clipboard": "2.0.6",
+		"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",
+		"fuse.js": "6.4.3",
+		"highlight.js": "9.18.5",
+		"js-beautify": "1.13.0",
+		"js-cookie": "2.2.1",
+		"js-md5": "^0.7.3",
+		"jsencrypt": "3.0.0-rc.1",
+		"nprogress": "0.2.0",
+		"quill": "1.3.7",
+		"screenfull": "5.0.2",
+		"sortablejs": "1.10.2",
+		"vue": "2.6.12",
+		"vue-count-to": "1.0.13",
+		"vue-cropper": "0.5.5",
+		"vue-meta": "^2.4.0",
+		"vue-router": "3.4.9",
+		"vue-seamless-scroll": "^1.1.23",
+		"vuedraggable": "2.24.3",
+		"vuex": "3.6.0"
+	},
+	"devDependencies": {
+		"@vue/cli-plugin-babel": "4.4.6",
+		"@vue/cli-plugin-eslint": "4.4.6",
+		"@vue/cli-service": "4.4.6",
+		"babel-eslint": "10.1.0",
+		"chalk": "4.1.0",
+		"connect": "3.6.6",
+		"eslint": "7.15.0",
+		"eslint-plugin-vue": "7.2.0",
+		"lint-staged": "10.5.3",
+		"runjs": "4.4.2",
+		"sass": "1.32.13",
+		"sass-loader": "10.1.1",
+		"script-ext-html-webpack-plugin": "2.1.5",
+		"svg-sprite-loader": "5.1.1",
+		"vue-template-compiler": "2.6.12"
+	},
+	"engines": {
+		"node": ">=8.9",
+		"npm": ">= 3.0.0"
+	},
+	"browserslist": [
+		"> 1%",
+		"last 2 versions"
+	]
 }
diff --git a/src/views/bigScreen/management/index.vue b/src/views/bigScreen/management/index.vue
index 7f563eb..0173b73 100644
--- a/src/views/bigScreen/management/index.vue
+++ b/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">
diff --git a/src/views/bigScreen/management/left1.vue b/src/views/bigScreen/management/left1.vue
index 5c10bd7..1fcbf4e 100644
--- a/src/views/bigScreen/management/left1.vue
+++ b/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;
 }
diff --git a/src/views/bigScreen/management/right2.vue b/src/views/bigScreen/management/right2.vue
index 36c1185..8bb042a 100644
--- a/src/views/bigScreen/management/right2.vue
+++ b/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"],
-            },
-            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 },
-              },
+              data: [
+                "隔热",
+                "稀土",
+                "其他",
+                "隔热完成率",
+                "稀土完成率",
+                "其他完成率",
+              ],
             },
+            // 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: [
-              {
-                type: "category",
-                axisTick: { show: false },
-                position: "bottom",
-                data: ["2012", "", "", "", ""],
-                axisLine: {
-                  lineStyle: {
-                    color: "rgb(255, 255, 255)",
+              ...monthList.map((e, i) => {
+                return {
+                  type: "category",
+                  axisTick: { show: false },
+                  position: "bottom",
+                  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",
-                type: "bar",
-                barGap: 0,
-                label: labelOption,
-                xAxisIndex: 0,
-                data: [320],
+                name: "隔热完成率",
+                type: "line",
+                yAxisIndex: 1,
+                smooth: false,
+                data: newRate[0],
+                itemStyle: {
+                  normal: {
+                    color: colorList[0],
+                  },
+                },
+                symbol: "none",
               },
               {
-                name: "Steppe",
-                type: "bar",
-                label: labelOption,
-                xAxisIndex: 0,
-                data: [220],
+                name: "稀土完成率",
+                type: "line",
+                yAxisIndex: 1,
+                smooth: false,
+                data: newRate[1],
+                itemStyle: {
+                  normal: {
+                    color: colorList[1],
+                  },
+                },
+                symbol: "none",
               },
               {
-                name: "Desert",
-                type: "bar",
-                label: labelOption,
-                xAxisIndex: 0,
-                data: [332],
-              },
-              {
-                name: "Forest",
-                type: "bar",
-                barGap: 0,
-                label: labelOption,
-                xAxisIndex: 1,
-                data: ["", 320],
-              },
-              {
-                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],
+                name: "其他完成率",
+                type: "line",
+                yAxisIndex: 1,
+                smooth: false,
+                data: newRate[2],
+                itemStyle: {
+                  normal: {
+                    color: colorList[2],
+                  },
+                },
+                symbol: "none",
               },
             ],
           });
diff --git a/src/views/bigScreen/qualityManage/center.vue b/src/views/bigScreen/qualityManage/center.vue
index 30dda90..c44d2ab 100644
--- a/src/views/bigScreen/qualityManage/center.vue
+++ b/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.leakCheckRate.toFixed(2)
+              >{{ dataInfo.realErrorCheckRate }}%/{{
+                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>