1

src/views/home/components/TargetSituation/index.vue

@@ -5,13 +5,13 @@
       <div>
         <el-select
           size="mini"
-          style="width: 70px; margin-right: 10px"
+          style="width: 100px; margin-right: 10px"
           v-model="queryParams.type"
           @change="dateTypeChange"
           placeholder="请选择时间纬度"
         >
-          <el-option label="年" value="reportYear"></el-option>
+          <el-option label="按年展示" value="reportYear"></el-option>
-          <el-option label="月" value="reportDate"></el-option>
+          <el-option label="按月展示" value="reportDate"></el-option>
         </el-select>
 
         <el-date-picker
@@ -28,7 +28,7 @@
         </el-date-picker>
         <el-select
           size="mini"
-          style="width: 100px; margin-left: 10px"
+          style="width: 120px; margin-left: 10px"
           v-model="zdlx"
           @change="dateLxChange"
           placeholder="请选择"
@@ -40,6 +40,21 @@
             :value="ite.key"
           ></el-option>
         </el-select>
+        <el-select
+          v-if="queryParams.type == 'reportDate'"
+          size="mini"
+          style="width: 120px; margin-left: 10px"
+          v-model="currentCompany"
+          @change="dateCpChange"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="(ite, i) in cpList"
+            :key="i"
+            :label="ite"
+            :value="ite"
+          ></el-option>
+        </el-select>
       </div>
     </div>
     <div
@@ -107,12 +122,22 @@ export default {
           value2: { 0: "errorStopTimeMonth", 1: "errorStopMonth" },
         },
       ],
+      currentCompany: "",
+      cpList: [],
     };
   },
   mounted() {
     this.getList();
   },
   methods: {
+    dateCpChange(e) {
+      this.currentCompany = e;
+      if (this.queryParams.type == "reportYear") {
+        this.initEcharts();
+      } else {
+        this.initEcharts2();
+      }
+    },
     dateTypeChange(e) {
       this.queryParams.type = e;
       this.dataList = [];
@@ -133,10 +158,15 @@ export default {
         this.dataList = response.rows.filter(
           (ite) => ite.companyName != "总计"
         );
+        this.cpList = this.dataList.map((ite) => ite.companyName);
+        this.currentCompany = this.cpList ? this.cpList[0] : "";
         this.loading = false;
         if (this.queryParams.type == "reportYear") {
           this.initEcharts();
         } else {
+          this.currentCompany = this.dataList
+            ? this.dataList[0].companyName
+            : "";
           this.initEcharts2();
         }
       });
@@ -178,6 +208,7 @@ export default {
           color: "#fff",
         },
         legend: {
+          top: "10",
           textStyle: {
             color: "#fff",
           },
@@ -186,7 +217,7 @@ export default {
           left: "2%", //图表距离容器左侧多少距离
           right: "2%", //图表距离容器右侧侧多少距离
           bottom: "5%", //图表距离容器上面多少距离
-          top: "8%", //图表距离容器下面多少距离
+          top: "10%", //图表距离容器下面多少距离
           containLabel: true,
         },
         xAxis: {
@@ -218,10 +249,14 @@ export default {
       });
     },
     initEcharts2() {
+      let data = [];
       let legend = [];
       let series = [];
+      data = this.dataList.filter(
+        (ite) => ite.companyName == this.currentCompany
+      );
       const zdlx = this.yearTypeList.find((ite) => ite.key == this.zdlx).value2;
-      this.dataList.forEach((e, i) => {
+      data.forEach((e, i) => {
         legend.push(e.companyName);
         series.push(
           {
@@ -270,14 +305,14 @@ export default {
               const value = item.value; // 数据值
               const marker = item.marker; // 标志图形
               result += `${marker}${seriesName}: ${value}<br/>`;
-              if (i % 2 == 0) {
+              // if (i % 2 == 0) {
-                const zxl = Number(params[1].value) / Number(params[0].value);
-                result += `${params[0].marker}执行率: ${
-                  zxl.toFixed(2) * 100
-                }%<br/>`;
-              }
-            });
 
+              // }
+            });
+            const zxl = Number(params[1].value) / Number(params[0].value);
+            result += `${params[0].marker}执行率: ${
+              zxl.toFixed(2) * 100
+            }%<br/>`;
             return result;
           },
           // width: 320, // 设置tooltip宽度