1

src/views/lll/NYJCD.vue

@@ -1,5 +1,62 @@
 <template>
   <div class="box">
+    <div class="imgLeft">
+      <div
+        @click="goOne('1号生产线')"
+        :class="click1 == '1号生产线' ? 'active' : ''"
+      >
+        1号生产线
+      </div>
+      <div
+        @click="goOne('2号生产线')"
+        :class="click1 == '2号生产线' ? 'active' : ''"
+      >
+        2号生产线
+      </div>
+      <div
+        @click="goOne('3号生产线')"
+        :class="click1 == '3号生产线' ? 'active' : ''"
+      >
+        3号生产线
+      </div>
+      <div @click="goOne('配电室')" :class="click1 == '配电室' ? 'active' : ''">
+        配电室
+      </div>
+    </div>
+
+    <div class="imgRight">
+      <div
+        @click="goTwo('破碎系统')"
+        :class="click2 == '破碎系统' ? 'active' : ''"
+      >
+        破碎系统
+      </div>
+      <div
+        @click="goTwo('生料系统')"
+        :class="click2 == '生料系统' ? 'active' : ''"
+      >
+        生料系统
+      </div>
+      <div
+        @click="goTwo('回转窑系统')"
+        :class="click2 == '回转窑系统' ? 'active' : ''"
+      >
+        回转窑系统
+      </div>
+      <div
+        @click="goTwo('煤磨系统')"
+        :class="click2 == '煤磨系统' ? 'active' : ''"
+      >
+        煤磨系统
+      </div>
+      <div
+        @click="goTwo('水泥磨系统')"
+        :class="click2 == '水泥磨系统' ? 'active' : ''"
+      >
+        水泥磨系统
+      </div>
+    </div>
+
     <div class="left">
       <img src="../../assets/img/标题/能源监测-电.png" class="title" />
       <div class="qcssdh">
@@ -94,6 +151,8 @@ export default {
   data() {
     return {
       res: "月",
+      click1: "",
+      click2: "",
       option1: {
         xAxis: {
           type: "category",
@@ -341,6 +400,14 @@ export default {
       var myChart = this.$echarts.init(chartDom);
       myChart.setOption(option);
     },
+    goOne(a) {
+      this.click2 = "";
+      this.click1 = a;
+    },
+    goTwo(a) {
+      this.click1 = "";
+      this.click2 = a;
+    },
   },
   mounted() {
     this.defineEcharts("qcssdh", this.option1);
@@ -360,6 +427,43 @@ export default {
   justify-content: space-between;
   position: relative;
 }
+.imgLeft {
+  position: absolute;
+  left: 1300px;
+  top: 1500px;
+  div {
+    width: 457px;
+    height: 140px;
+    text-align: center;
+    line-height: 140px;
+    color: #fff;
+    font-size: 30px;
+    background-image: url("../../assets/nyjc/组 2 76.png");
+    margin: 37px;
+  }
+  .active {
+    background-image: url("../../assets/nyjc/组 276.png");
+  }
+}
+
+.imgRight {
+  position: absolute;
+  right: 1300px;
+  top: 1300px;
+  div {
+    width: 457px;
+    height: 140px;
+    text-align: center;
+    line-height: 140px;
+    color: #fff;
+    font-size: 30px;
+    background-image: url(../../assets/nyjc/组\ 277.png);
+    margin: 37px;
+  }
+  .active {
+    background-image: url("../../assets/nyjc/图层 1.png");
+  }
+}
 .left {
   width: 1237px;
   height: 2500px;

src/views/lll/NYJCS.vue

@@ -860,6 +860,13 @@ export default {
         ::v-deep .el-table__header th {
           border-bottom: none;
         }
+
+        /deep/ .el-table {
+          tr th,
+          tr td {
+            border-right: none;
+          }
+        }
       }
     }
     .tpt {