其他-首页。数据查询绑定接口，添加页面跳转

src/views/Others/index.vue

@@ -1,41 +1,19 @@
 <template>
   <div class="swiperBox">
-    <el-carousel
-      style="width: 100%; margin: 5vh 0"
-      trigger="click"
-      type="card"
-      height="80vh"
-      :autoplay="false"
-      indicator-position="none"
-      :initial-index="1"
-      arrow="none"
-      @change="changeSwiper"
-    >
+    <el-carousel style="width: 100%; margin: 5vh 0" trigger="click" type="card" height="80vh" :autoplay="false" indicator-position="none" :initial-index="1" arrow="none" @change="changeSwiper">
       <!-- card-1 -->
       <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
-        <div class="itemBox">
+        <div class="itemBox" @click="jumpUrl('/others/realSearch')">
           <p class="itemTitle">
             数据查询
             <!-- <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i> -->
           </p>
           <div class="df-table">
-            <ComTable height="30vh" :data="tableData1" :pageSize="20">
-            </ComTable>
-          </div>
-          <!-- <div class="imageBox">
-            <div class="imgItem" @click="jumpUrl('/realSearch')">
-              <el-image class="img" src="./static/img/oa日报.png" fit="fill" />
-              <p class="imgTitle">测点数据查询</p>
-            </div>
-            <div class="imgItem" @click="jumpUrl('/historySearch')">
-              <el-image
-                class="img"
-                src="./static/img/新能源日报.png"
-                fit="fill"
-              />
-              <p class="imgTitle">测点历史数据查询</p>
+            <div class="sjcx-item" v-for="(value, key) in wppointColumn" :key="key">
+              <div class="sjcx-name">{{value}}</div>
+              <div class="sjcx-value">{{wppointnum[key]}}</div>
             </div>
-          </div> -->
+          </div>
         </div>
       </el-carousel-item>
 
@@ -50,44 +28,6 @@
             <ComTable height="30vh" :data="tableData2" :pageSize="20">
             </ComTable>
           </div>
-          <!-- <div class="imageBox1">
-            <div class="imgItem1" @click="jumpUrl('/new/alarmcenter')">
-              <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
-              <p class="imgTitle">预警管理</p>
-            </div>
-            <div class="imgItem1" @click="jumpUrl('/new/tjsj')">
-              <el-image
-                class="img1"
-                src="./static/img/新能源日报.png"
-                fit="fill"
-              />
-              <p class="imgTitle">停机事件管理</p>
-            </div>
-            <div class="imgItem1" @click="jumpUrl('/new/xdgl')">
-              <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
-              <p class="imgTitle">限电管理</p>
-            </div>
-            <div class="imgItem1" @click="jumpUrl('/alarmCenter/boosterAlarm')">
-              <el-image
-                class="img1"
-                src="./static/img/新能源日报.png"
-                fit="fill"
-              />
-              <p class="imgTitle">升压站报警</p>
-            </div>
-            <div class="imgItem1" @click="jumpUrl('/alarmCenter/scadaAlarm')">
-              <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
-              <p class="imgTitle">SCADA报警</p>
-            </div>
-            <div class="imgItem1" @click="jumpUrl('/alarmCenter/customAlarm')">
-              <el-image
-                class="img1"
-                src="./static/img/新能源日报.png"
-                fit="fill"
-              />
-              <p class="imgTitle">自定义报警</p>
-            </div>
-          </div> -->
         </div>
       </el-carousel-item>
 
@@ -184,6 +124,20 @@ export default {
   data() {
     const that = this;
     return {
+      wppointnum: {},
+      wppointColumn: {
+        MHS_FDC: "麻黄山风电场",
+        NSS_FDC: "牛首山风电场",
+        QS_FDC: "青山风电场",
+        SBQ_FDC: "石板泉风电场",
+        XS_FDC: "香山风电场",
+        DWK_GDC: "大武口电站",
+        PL_GDC: "平罗光伏电站",
+        XH_GDC: "宣和光伏发电站",
+        MCH_GDC: "马场湖光发伏电站",
+        JSFW: "计算服务测点",
+      },
+
       tableData1: {
         column: [
           {
@@ -302,12 +256,9 @@ export default {
           .css({ background: "rgb(4, 12, 11)", border: "1px solid #05bb4c" });
         for (let i = 0; i < swiperDom.length; i++) {
           if (i !== index) {
-            swiperDom
-              .eq(i)
-              .find(".el-carousel__mask")
-              .css({
-                background: "rgb(4, 12, 11)",
-              });
+            swiperDom.eq(i).find(".el-carousel__mask").css({
+              background: "rgb(4, 12, 11)",
+            });
             swiperDom.eq(i).css({
               background: "rgb(4, 12, 11)",
               border: "1px solid rgba(5, 187, 76, 0.5)",
@@ -393,7 +344,6 @@ export default {
           timeDate: "风机预警",
           value: "1",
         },
-        
       ];
       that.tableData2.data = tableArr2;
       console.log("tableData2:", that.tableData2);
@@ -436,7 +386,7 @@ export default {
         },
       ];
       that.tableData3.data = tableArr3;
-         console.log("tableData3:", that.tableData3);
+      console.log("tableData3:", that.tableData3);
 
       let tableArr4 = [
         {
@@ -461,7 +411,17 @@ export default {
         },
       ];
       that.tableData4.data = tableArr4;
-         console.log("tableData4:", that.tableData4);
+      console.log("tableData4:", that.tableData4);
+    },
+    getWppointnum() {
+      const that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "yaw/getWppointnum",
+        success(res) {
+          that.wppointnum = res.data;
+        },
+      });
     },
   },
 
@@ -473,6 +433,7 @@ export default {
       this.changeSwiper(1);
     });
     that.getTableData();
+    this.getWppointnum();
   },
 
   unmounted() {},
@@ -506,6 +467,31 @@ export default {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+    .sjcx-item:nth-child(2n) {
+      background-color: rgba(96, 103, 105, 0.2);
+    }
+    .sjcx-item:hover {
+      color: #05bb4c;
+    }
+    .sjcx-item {
+      cursor: pointer;
+      // background-color: #edbf03;
+      display: flex;
+      height: 6.68vh;
+      line-height: 6.68vh;
+      font-size: 18pt;
+      text-align: center;
+      color: #9ca5a8;
+      .sjcx-name {
+        // background-color:aqua;
+        flex: 0 0 50%;
+      }
+      .sjcx-value {
+        // text-align: left;
+        // background-color:rosybrown;
+        flex: 0 0 50%;
+      }
+    }
   }
   .itemTitle {
     width: 100%;