Merge branch 'sl' of http://61.161.152.110:10101/r/electronic-map into wsy

src/api/axios.js

@@ -25,7 +25,7 @@ axios.defaults.withCredentials = true;
   });
 
  */
-export function requestData (options) {
+export function requestData(options) {
   return new Promise((resolve, reject) => {
 
     if (options.showLoading) {
@@ -49,7 +49,7 @@ export function requestData (options) {
       withCredentials: true,
       crossDomain: true,
       baseURL: options.baseURL || window.__MODE__.baseURL || '/api/',
-      timeout: options.timeout || 3000, // 请求超时时间 - 3s
+      timeout: options.timeout || 30000, // 请求超时时间 - 3s
     });
 
     // 请求拦截器
@@ -81,10 +81,8 @@ export function requestData (options) {
           msg: (response.data && response.data.msg) || ("请求出错[" + response.data.code + "]")
         });
 
-        setTimeout(() => {
-          // window.location.reload();
-          // window.__STATICVUE__.$router.replace('/login');
-        }, 1000);
+        // window.location.reload();
+        // window.__STATICVUE__.$router.replace('/login');
 
       } else if (response.data.code === 200) { // 请求成功 code
 

src/assets/icon/svg/flash.svg

@@ -0,0 +1,3 @@
+<svg t="1627370439460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2198" width="200" height="200">
+    <path d="M754.4 490.2l-194.7-40.4 83.2-283.1-373.3 367.1 194.7 40.4-83.2 283.1 373.3-367.1z" fill="#2c2c2c" p-id="2199"></path>
+</svg>

src/assets/styles/app.less

@@ -96,3 +96,7 @@
 .blur {
   backdrop-filter: blur(3px);
 }
+
+.pointer {
+  cursor: pointer;
+}

src/components/chart/line/table-line-chart.vue

@@ -46,13 +46,13 @@ export default {
   },
   computed: {
     xdata() {
-      return this.list.map((t) => {
-        return t.text;
+      return this.list.map((t,index) => {
+        return t.text || index;
       });
     },
     values() {
       return this.list.map((t) => {
-        return t.value;
+        return t.value || t;
       });
     },
   },

src/views/Demo.vue

@@ -247,6 +247,14 @@
         </el-table-column>
       </el-table-column>
     </el-table>
+
+    <div>
+      <el-table class="custom-table" :data="treeTableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+        <el-table-column prop="date" label="日期" sortable width="180"> </el-table-column>
+        <el-table-column prop="name" label="姓名" sortable width="180"> </el-table-column>
+        <el-table-column prop="address" label="地址"> </el-table-column>
+      </el-table>
+    </div>
   </el-scrollbar>
 
   <!--  icon -->
@@ -2543,6 +2551,46 @@ export default {
           },
         ],
       },
+      treeTableData: [
+        {
+          id: 1,
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          id: 2,
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          id: 3,
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+          children: [
+            {
+              id: 31,
+              date: "2016-05-01",
+              name: "王小虎",
+              address: "上海市普陀区金沙江路 1519 弄",
+            },
+            {
+              id: 32,
+              date: "2016-05-01",
+              name: "王小虎",
+              address: "上海市普陀区金沙江路 1519 弄",
+            },
+          ],
+        },
+        {
+          id: 4,
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
     };
   },
   created() {

src/views/HealthControl/Health5.vue

@@ -89,6 +89,7 @@ export default {
     },
     // 跳转按钮
     onClickJump(item){
+      console.warn(item);
        this.$router.push({
         path: `/health/health0/${item.wpId}/${item.wtId}`
       });

src/views/Home/Home.vue

@@ -39,6 +39,7 @@
           :data="fcmap"
           :xtData="xtmap"
           @mapClick="changeShowType"
+          @backStation="onBackStation"
         ></Map>
       </div>
       <div class="top-right-panel">
@@ -766,6 +767,7 @@ export default {
       },
       dialogType: null,
       wpId: "0",
+      wpName: "",  //安全天数下面的场站名
       fcmap: {},
       xtmap: {},
       dialogShow: false,
@@ -1003,6 +1005,9 @@ export default {
 
     // 点击地图展示类型
     changeShowType(wpId, planBtnName) {
+      console.log('changeShowType wpId: ' + wpId)
+      console.log('changeShowType planBtnName: ' + planBtnName)
+      this.wpName = planBtnName;
       this.planBtnName = planBtnName;
       this.jczbmap = {};
       clearInterval(this.timmer);
@@ -1034,6 +1039,19 @@ export default {
       });
     },
 
+    // 点击安全天数下的场站按钮重置数据
+    onBackStation(){
+      if (this.wpId.indexOf("FDC") == -1){
+        clearInterval(this.timmer);
+        this.timmer = null;
+        this.wpId = this.wpId.substring(0, this.wpId.indexOf("0")) + "_FDC";
+        this.requestData(false);
+        this.timmer = setInterval(() => {
+          this.requestData(false);
+        }, this.$store.state.websocketTimeSec);
+      }
+    },
+
     // 显示功率复核图表
     showPowerChart(res) {
       this.dialogTitle = res.dialogTitle;

src/views/Home/components/map.vue

@@ -26,7 +26,7 @@
       </div>
     </div>
     <div class="name-box" v-if="currentMode != 'NX'">
-      <div class="name-box-title">{{ currentTitle }}</div>
+      <div class="name-box-title" @click="onBackStation">{{ currentTitle }}</div>
       <div class="name-box-period" v-show="currentPeriod != 'ZERO'">
         <span class="name-box-period-label">期次：</span>
         <span class="name-box-period-value"
@@ -290,6 +290,11 @@ export default {
       this.currentPeriod = period;
       this.currentMode = "SUB";
     },
+    // 返回当前场站
+    onBackStation(){
+      this.currentPeriod = "ZERO"
+      this.$emit("backStation");
+    }
   },
   watch: {
     wpId(res) {
@@ -357,6 +362,7 @@ export default {
       font-weight: 400;
       color: #ffffff;
       line-height: 1;
+      cursor: pointer;
     }
 
     .name-box-period {

src/views/Home/components/map/MHS_FDC.vue

@@ -135,7 +135,7 @@
         fill="#119933"
         opacity="0"
         class="map-float"
-        data-period="二期"
+        data-period="MHS02_GC,麻黄山二期"
       />
       <path
         d="M473.4,384.8c-3,0-6,0-9,0c-5-2.6-10-5.3-15-7.8c-3.4-1.7-7.1-2.6-11-3c-8.9-0.9-17.8-1.8-26.7-2.9c-5-0.6-9.7-2.2-14-5
@@ -156,7 +156,7 @@
         fill="#119933"
         opacity="0"
         class="map-float"
-        data-period="一期"
+        data-period="MHS01_GC,麻黄山一期"
       />
       <g
         class="item-label"
@@ -320,9 +320,11 @@ export default {
     changeshowType(id, planBtnName) {
       this.activeId = id;
       this.$emit("clickFj", id, planBtnName);
+      this.$emit("changePeriod", "麻黄山", planBtnName.substring(planBtnName.length - 2));
     },
     clickFj(id, planBtnName) {
       this.$emit("clickFj", id, planBtnName);
+      this.$emit("changePeriod", "麻黄山", planBtnName.substring(planBtnName.length - 2));
     },
     click: function (id) {
       this.activeId = id;
@@ -350,7 +352,10 @@ export default {
           });
           elsImage[index].style.display = "block";
           let period = this.getAttribute("data-period");
-          that.$emit("changePeriod", "麻黄山", period);
+          let strs = period.split(",");
+          that.$emit("changePeriod", "麻黄山", strs[1].substring(strs[1].length - 2));
+          that.changeshowType(strs[0], strs[1]);
+          that.$emit("clickFj", strs[0], strs[1]);
           this.style.opacity = 0;
         });
       });

src/views/Home/components/map/NSS_FDC.vue

@@ -155,7 +155,7 @@
             fill="#119933"
             opacity="0"
             class="map-float"
-            data-period="三期"
+            data-period="NSS03_GC,牛首三期"
           />
           <path
             d="M68,294c-5,0-10,0-15,0c-11.1-6.4-24-10.3-31.5-21.9c-0.4-0.7-1.2-1.2-1.9-1.5c-8.6-3.4-10.2-11.6-10.4-18.8
@@ -181,7 +181,7 @@
             fill="#119933"
             opacity="0"
             class="map-float"
-            data-period="二期"
+            data-period="NSS02_GC,牛首二期"
           />
           <path
             d="M573,171c0,8,0,16,0,24c-0.9,1.8-1.8,3.6-1.8,5.6c0,4.1-2.3,6.9-4.9,9.9c-5.1,5.8-11.7,7.9-18.9,8.7
@@ -200,7 +200,7 @@
             fill="#119933"
             opacity="0"
             class="map-float"
-            data-period="一期"
+            data-period="NSS01_GC,牛首一期"
           />
         </g>
       </g>
@@ -495,9 +495,11 @@ export default {
     changeshowType(id, planBtnName) {
       this.activeId = id;
       this.$emit("clickFj", id, planBtnName);
+      this.$emit("changePeriod", "牛首山", planBtnName.substring(planBtnName.length - 2));
     },
     clickFj(id, planBtnName) {
       this.$emit("clickFj", id, planBtnName);
+      this.$emit("changePeriod", "牛首山", planBtnName.substring(planBtnName.length - 2));
     },
     click: function (id) {
       this.activeId = id;
@@ -528,7 +530,10 @@ export default {
           });
           elsImage[index].style.display = "block";
           let period = this.getAttribute("data-period");
-          that.$emit("changePeriod", "牛首山", period);
+          let strs = period.split(",");
+          that.$emit("changePeriod", "牛首山", strs[1].substring(strs[1].length - 2));
+          that.changeshowType(strs[0], strs[1]);
+          that.$emit("clickFj", strs[0], strs[1]);
           this.style.opacity = 0.2;
         });
       });

src/views/Home/components/map/QS_FDC.vue

@@ -145,7 +145,7 @@
             fill="#119933"
             opacity="0"
             class="map-float"
-            data-period="一期"
+            data-period="QS01_GC,青山一期"
           />
           <path
             d="M122,61c4.3,0,8.7,0,13,0c3.7,0.7,7.5,1.2,11.2,2c10.9,2.5,20.9,7,28.7,15.1c6.3,6.6,11.4,14.4,19.2,19.5
@@ -161,7 +161,7 @@
             fill="#119933"
             opacity="0"
             class="map-float"
-            data-period="二期"
+            data-period="QS02_GC,青山二期"
           />
           <path
             d="M408,371c-0.7,0-1.3,0-2,0c-3.6-2.1-7.4-2.6-11.5-2c-2.9,0.4-6.9,1.4-8.2-1.8c-2-5-6.1-5.6-10.2-6.9
@@ -184,7 +184,7 @@
             fill="#119933"
             opacity="0"
             class="map-float"
-            data-period="三期"
+            data-period="QS03_GC,青山三期"
           />
         </g>
       </g>
@@ -458,9 +458,11 @@ export default {
     changeshowType(id, planBtnName) {
       this.activeId = id;
       this.$emit("clickFj", id, planBtnName);
+      this.$emit("changePeriod", "青山", planBtnName.substring(planBtnName.length - 2));
     },
     clickFj(id, planBtnName) {
       this.$emit("clickFj", id, planBtnName);
+      this.$emit("changePeriod", "青山", planBtnName.substring(planBtnName.length - 2));
     },
     click: function (id) {
       this.activeId = id;
@@ -491,7 +493,10 @@ export default {
           });
           elsImage[index].style.display = "block";
           let period = this.getAttribute("data-period");
-          that.$emit("changePeriod", "青山", period);
+          let strs = period.split(",");
+          that.$emit("changePeriod", "青山", strs[1].substring(strs[1].length - 2));
+          that.changeshowType(strs[0], strs[1]);
+          that.$emit("clickFj", strs[0], strs[1]);
           this.style.opacity = 0.2;
         });
       });

src/views/Home/components/map/SBQ_FDC.vue

@@ -159,7 +159,7 @@
             fill="#119933"
             opacity="0"
             class="map-float"
-            data-period="二期"
+            data-period="SBQ02_GC,石板泉二期"
           />
           <path
             d="M9,316c-3,0-7.2,1.2-8.7-0.3C-1.2,314.2,0,310,0,307c1.9-4.8,2.3-9.8,1.6-14.8c-0.8-6.4,0.9-11.8,4.3-16.9
@@ -181,7 +181,7 @@
             fill="#119933"
             opacity="0"
             class="map-float"
-            data-period="三期"
+            data-period="SBQ03_GC,石板泉三期"
           />
           <path
             d="M499,40c1,0,2,0,3,0c1.3,1,2.6,2.1,3.9,3c4.2,2.6,9.2,4.6,11.8,9c2,3.3,4.5,4.6,7.9,5.3c7.9,1.7,14.3,5.4,19.6,11.8
@@ -198,7 +198,7 @@
             fill="#119933"
             opacity="0"
             class="map-float"
-            data-period="四期"
+            data-period="SBQ04_GC,石板泉四期"
           />
           <path
             d="M698,207c0,8.7,0,17.3,0,26c-3.9,2.6-8.3,5.4-8.5,10.5c-0.3,8.1-4.6,12.7-11,16.8c-5.4,3.5-9.4,9.3-15.5,11.6
@@ -221,7 +221,7 @@
             fill="#119933"
             opacity="0"
             class="map-float"
-            data-period="一期"
+            data-period="SBQ01_GC,石板泉一期"
           />
         </g>
       </g>
@@ -578,9 +578,11 @@ export default {
     changeshowType(id, planBtnName) {
       this.activeId = id;
       this.$emit("clickFj", id, planBtnName);
+      this.$emit("changePeriod", "石板泉", planBtnName.substring(planBtnName.length - 2));
     },
     clickFj(id, planBtnName) {
       this.$emit("clickFj", id, planBtnName);
+      this.$emit("changePeriod", "石板泉", planBtnName.substring(planBtnName.length - 2));
     },
     click: function (id) {
       this.activeId = id;
@@ -611,7 +613,10 @@ export default {
           });
           elsImage[index].style.display = "block";
           let period = this.getAttribute("data-period");
-          that.$emit("changePeriod", "石板泉", period);
+          let strs = period.split(",");
+          that.$emit("changePeriod", "石板泉", strs[1].substring(strs[1].length - 2));
+          that.changeshowType(strs[0], strs[1]);
+          that.$emit("clickFj", strs[0], strs[1]);
           this.style.opacity = 0.2;
         });
       });

src/views/Home/components/map/XS_FDC.vue

@@ -134,7 +134,7 @@
             fill="#119933"
             opacity="0"
             class="map-float"
-            data-period="二期"
+            data-period="XS02_GC,香山二期"
           />
           <path
             d="M592,14c1.7,0,3.3,0,5,0c2,2.3,4.7,3.7,7.4,5c7,3.4,14.2,6.6,21.2,10.2c11.2,5.7,19.3,13.5,17.5,27.5c-0.3,2.6,0,5.3,0.1,8
@@ -156,7 +156,7 @@
             fill="#119933"
             opacity="0"
             class="map-float"
-            data-period="一期"
+            data-period="XS01_GC,香山一期"
           />
         </g>
       </g>
@@ -325,9 +325,11 @@ export default {
     changeshowType(id, planBtnName) {
       this.activeId = id;
       this.$emit("clickFj", id, planBtnName);
+      this.$emit("changePeriod", "香山", planBtnName.substring(planBtnName.length - 2));
     },
     clickFj(id, planBtnName) {
       this.$emit("clickFj", id, planBtnName);
+      this.$emit("changePeriod", "香山", planBtnName.substring(planBtnName.length - 2));
     },
     click: function (id) {
       this.activeId = id;
@@ -358,7 +360,10 @@ export default {
           });
           elsImage[index].style.display = "block";
           let period = this.getAttribute("data-period");
-          that.$emit("changePeriod", "香山", period);
+          let strs = period.split(",");
+          that.$emit("changePeriod", "香山", strs[1].substring(strs[1].length - 2));
+          that.changeshowType(strs[0], strs[1]);
+          that.$emit("clickFj", strs[0], strs[1]);
           this.style.opacity = 0.2;
         });
       });

src/views/LightMatrix3/LightMatrix3.vue

@@ -81,22 +81,23 @@
                 <div class="card-right">
                   <div class="num">
                     <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
-                      <SvgIcon svgid="svg-W"></SvgIcon>
+                      <SvgIcon svgid="svg-P"></SvgIcon>
                     </i>
-                    <span>{{ cItem.gl }}</span>
+                    <span>{{ cItem.fs }}</span>
                   </div>
                   <div class="num">
                     <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
-                      <SvgIcon svgid="svg-R"></SvgIcon>
+                      <SvgIcon svgid="svg-W"></SvgIcon>
                     </i>
-                    <span>{{ cItem.fdjzs.toFixed(2) }}</span>
+                    <span>{{ cItem.gl }}</span>
                   </div>
                   <div class="num">
                     <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
-                      <SvgIcon svgid="svg-P"></SvgIcon>
+                      <SvgIcon svgid="svg-R"></SvgIcon>
                     </i>
-                    <span>{{ cItem.fs }}</span>
+                    <span>{{ cItem.fdjzs.toFixed(2) }}</span>
                   </div>
+             
                 </div>
               </div>
             </div>

src/views/NewPages/power-benchmarking.vue

@@ -1,5 +1,146 @@
 <template>
   <div class="power-benchmarking-page">
+    <div class="static">
+      <div class="static-main">
+        <span class="dot top-left"></span>
+        <span class="dot bottom-left"></span>
+        <span class="dot top-rignt"></span>
+        <span class="dot bottom-right"></span>
+        <div class="icon">
+          <i class="svg-icon svg-icon-balck">
+            <svg-icon :svgid="'svg-flash'" />
+          </i>
+        </div>
+        <div class="info">
+          <div class="title">累计增发电量</div>
+          <div class="value">666.66</div>
+          <div class="unit">kwh</div>
+        </div>
+      </div>
+      <div class="static-items" style="flex:0 0 867px;">
+        <div class="static-items-title">
+          <i class="svg-icon svg-icon-green">
+            <svg-icon :svgid="'svg-flash'" />
+          </i>
+          理论电量平衡分析法
+        </div>
+        <div class="items">
+          <div class="item" v-for="index of 6" :key="index">
+            <div class="title">风能利用率</div>
+            <div class="value">30%</div>
+            <div class="up-down">
+              <div class="up-down-item">
+                <span class="name">周</span>
+                <span class="icon">
+                  <i class="svg-icon svg-icon-sm svg-icon-yellow">
+                    <svg-icon :svgid="'svg-arrow-up-1'" />
+                  </i>
+                </span>
+                <span class="value">2%</span>
+              </div>
+              <div class="up-down-item">
+                <span class="name">环</span>
+                <span class="icon">
+                  <i class="svg-icon svg-icon-sm svg-icon-green">
+                    <svg-icon :svgid="'svg-arrow-dpwn-1'" />
+                  </i>
+                </span>
+                <span class="value">2%</span>
+              </div>
+            </div>
+            <div class="percent">
+              <div class="percent-box">
+                <div class="percent-bar bg-green" style="width:24%;"></div>
+                <div class="sj" style="left: calc(24% - 3px);"></div>
+              </div>
+              <div class="value">24%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="static-items" style="flex:0 0 430px;">
+        <div class="static-items-title">
+          <i class="svg-icon svg-icon-green">
+            <svg-icon :svgid="'svg-flash'" />
+          </i>
+          理论电量平衡分析法
+        </div>
+        <div class="items">
+          <div class="item" v-for="index of 3" :key="index">
+            <div class="title">风能利用率</div>
+            <div class="value">30%</div>
+            <div class="up-down">
+              <div class="up-down-item">
+                <span class="name">周</span>
+                <span class="icon">
+                  <i class="svg-icon svg-icon-sm svg-icon-yellow">
+                    <svg-icon :svgid="'svg-arrow-up-1'" />
+                  </i>
+                </span>
+                <span class="value">2%</span>
+              </div>
+              <div class="up-down-item">
+                <span class="name">环</span>
+                <span class="icon">
+                  <i class="svg-icon svg-icon-sm svg-icon-green">
+                    <svg-icon :svgid="'svg-arrow-dpwn-1'" />
+                  </i>
+                </span>
+                <span class="value">2%</span>
+              </div>
+            </div>
+            <div class="percent">
+              <div class="percent-box">
+                <div class="percent-bar bg-green" style="width:24%;"></div>
+                <div class="sj" style="left: calc(24% - 3px);"></div>
+              </div>
+              <div class="value">24%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="static-items" style="flex:0 0 430px;">
+        <div class="static-items-title">
+          <i class="svg-icon svg-icon-green">
+            <svg-icon :svgid="'svg-flash'" />
+          </i>
+          理论电量平衡分析法
+        </div>
+        <div class="items">
+          <div class="item" v-for="index of 3" :key="index">
+            <div class="title">风能利用率</div>
+            <div class="value">30%</div>
+            <div class="up-down">
+              <div class="up-down-item">
+                <span class="name">周</span>
+                <span class="icon">
+                  <i class="svg-icon svg-icon-sm svg-icon-yellow">
+                    <svg-icon :svgid="'svg-arrow-up-1'" />
+                  </i>
+                </span>
+                <span class="value">2%</span>
+              </div>
+              <div class="up-down-item">
+                <span class="name">环</span>
+                <span class="icon">
+                  <i class="svg-icon svg-icon-sm svg-icon-green">
+                    <svg-icon :svgid="'svg-arrow-dpwn-1'" />
+                  </i>
+                </span>
+                <span class="value">2%</span>
+              </div>
+            </div>
+            <div class="percent">
+              <div class="percent-box">
+                <div class="percent-bar bg-green" style="width:24%;"></div>
+                <div class="sj" style="left: calc(24% - 3px);"></div>
+              </div>
+              <div class="value">24%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="top">
       <div class="top-left">
         <div class="top-left-header">
@@ -35,7 +176,7 @@
             <div class="right-btn" :class="{ active: btnIndex == 1 }" @click="rightBtnClick(1)">光伏</div>
           </div>
         </div>
-        <group-table :customClass="'table'" :data="eltableData" :height="'420px'" :pageSize="10" @headerClick="headerClick"></group-table>
+        <group-table :customClass="'table'" :data="eltableData" :height="'280px'" :pageSize="10" @headerClick="headerClick"></group-table>
       </div>
       <div class="top-right">
         <div class="rank-title">
@@ -46,7 +187,7 @@
           排行榜
         </div>
         <div class="rank-block"></div>
-        <group-table :customClass="'rank-table'" :data="greenTable" :height="'420px'">
+        <group-table :customClass="'rank-table'" :data="greenTable" :height="'280px'">
           <template v-slot:rank="scope">
             <div class="rank-index" :class="'index-' + scope.row.rank">
               {{ scope.row.rank }}
@@ -57,17 +198,18 @@
     </div>
     <div class="bottom">
       <panel :title="'指标分析'">
-        <multiple-bar-chart :list="barData" :height="'calc(100vh - 630px)'" :units="['功率数值（kW）']" />
+        <multiple-bar-chart :list="barData" :height="'calc(100vh - 660px)'" :units="['功率数值（kW）']" />
       </panel>
     </div>
   </div>
 </template>
 <script>
 import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 import Panel from "../../components/coms/panel/panel.vue";
 import groupTable from "../../components/coms/table/group-table.vue";
 export default {
-  components: { groupTable, Panel, MultipleBarChart },
+  components: { groupTable, Panel, MultipleBarChart, SvgIcon },
   data() {
     let that = this;
     return {
@@ -546,6 +688,179 @@ export default {
 
 <style lang="less">
 .power-benchmarking-page {
+  .static {
+    display: flex;
+    height: 162px;
+    margin-bottom: 8px;
+
+    .static-main {
+      position: relative;
+      flex: 0 0 150px;
+      height: 162px;
+      border: 1px solid fade(@green, 60);
+      padding: 8px;
+      background: fade(@gray, 20);
+      margin-right: 8px;
+
+      .dot {
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background: @green;
+
+        &.top-left {
+          top: 5px;
+          left: 5px;
+        }
+
+        &.bottom-left {
+          bottom: 5px;
+          left: 5px;
+        }
+
+        &.top-rignt {
+          top: 5px;
+          right: 5px;
+        }
+
+        &.bottom-right {
+          bottom: 5px;
+          right: 5px;
+        }
+      }
+
+      .icon {
+        height: 40px;
+        margin: 8px 0;
+        display: flex;
+        justify-content: center;
+
+        i {
+          width: 36px;
+          height: 36px;
+          padding: 2px;
+          background: @green;
+          border-radius: 100%;
+          border: 4px solid @gray;
+
+          svg {
+            width: 24px;
+            height: 24px;
+            use {
+              fill: #000;
+            }
+          }
+        }
+      }
+
+      .info {
+        text-align: center;
+        .title {
+          font-size: 18px;
+          margin-bottom: 12px;
+        }
+
+        .value {
+          font-size: 18px;
+          color: @green;
+          margin-bottom: 4px;
+        }
+
+        .unit {
+          padding: 0 8px;
+          text-align: right;
+        }
+      }
+    }
+
+    .static-items {
+      border: 1px solid fade(@gray, 60);
+      margin-right: 8px;
+
+      .static-items-title {
+        text-align: center;
+        line-height: 27px;
+        height: 27px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: @green;
+      }
+
+      .items {
+        display: flex;
+
+        .item {
+          flex: 0 0 138px;
+          height: 133px;
+          margin-left: 8px;
+          background: fade(@gray, 20);
+          text-align: center;
+          padding: 8px;
+
+          & > .title {
+            font-size: 14px;
+            color: @gray-l;
+          }
+
+          & > .value {
+            font-size: 18px;
+            font-family: @font-family-num;
+            margin: 8px 0;
+          }
+
+          & > .up-down {
+            display: flex;
+            justify-content: space-around;
+            margin: 8px 0;
+
+            .up-down-item {
+              flex: 1 0 auto;
+              display: flex;
+              align-items: center;
+              justify-content: space-around;
+            }
+          }
+
+          & > .percent {
+            display: flex;
+            .percent-box {
+              position: relative;
+              height: 10px;
+              border: 1px solid @gray;
+              margin-right: 8px;
+              width: calc(100% - 38px);
+              padding: 2px;
+              margin-top: 2px;
+
+              .percent-bar {
+                height: 4px;
+              }
+
+              .sj {
+                position: absolute;
+                border-style: solid;
+                border-width: 5px 3px 5px 3px;
+                border-color: transparent transparent @green transparent;
+                width: 0px;
+                height: 0px;
+                top: 8px;
+              }
+            }
+          }
+
+          &:first-child {
+            margin-left: 0px;
+          }
+        }
+      }
+
+      &:last-child {
+        margin-right: 0px;
+      }
+    }
+  }
+
   .top {
     display: flex;
     margin-bottom: 16px;

src/views/SandTable/SandTable.vue

@@ -5,119 +5,27 @@
         <StBack></StBack>
         <ThreeModel1 class="three-model-layer" @when="when"></ThreeModel1>
         <div class="sand-table-left" v-if="showPanel">
-            <div class="com-panel-sand">
-                <div class="com-panel-sand-header font-sm white">
-                    <div class="sand-time">{{sandTime}}</div>
-                    <div class="sand-date mg-b-8">{{sandDate}}</div>
-                </div>
-                <div class="com-panel-body">
-                    <div class="weather-box">
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-天气1" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">天气</div>
-                                <div class="font-lg green">多云转晴</div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-温度1" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">温度</div>
-                                <div>
-                                    <span class="font-lg green">26</span>
-                                    <span class="font-sm white mg-l-8">℃</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-风速" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">风向</div>
-                                <div>
-                                    <span class="font-lg green">4-5</span>
-                                    <span class="font-sm white mg-l-8">级 西北风</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-能见度" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">能见度</div>
-                                <div>
-                                    <span class="font-lg green">20</span>
-                                    <span class="font-sm white mg-l-8">KM</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-湿度1" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">湿度</div>
-                                <div>
-                                    <span class="font-lg green">75.0</span>
-                                    <span class="font-sm white mg-l-8">%</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-气压1" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">气压</div>
-                                <div>
-                                    <span class="font-lg green">994</span>
-                                    <span class="font-sm white mg-l-8">kPa</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-日出1" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">日出时间</div>
-                                <div class="font-lg green">04:36</div>
-                            </div>
-                        </div>
-                        <div class="weather-item">
-                            <div class="weather-icon">
-                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
-                                    <svg-icon svgid="svg-日落1" />
-                                </div>
-                            </div>
-                            <div class="weather-info">
-                                <div class="font-sm white">日落时间</div>
-                                <div class="font-lg green">18:50</div>
-                            </div>
-                        </div>
+            <PanelSand class="left-panel" title="气象预测" subTitle="AM10:52  实况">
+                <weather class="pd-t-16" />
+            </PanelSand>
+            <PanelSand class="left-panel mg-t-16" title="等级评估">
+                <RankTable :data="levelTableData"></RankTable>
+            </PanelSand>
+            <PanelSand class="left-panel mg-t-16" title="等级评估">
+                <RankTable :data="levelTableData"></RankTable>
+            </PanelSand>
+            <PanelSandToolbar class="left-panel mg-t-16" title="部件">
+                <template v-slot:tools>
+                    <div class="exchange" @click="exchange1">
+                        <span :class="exchangeBtn1 ? 'gray' : 'green'">次数</span>
+                        <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
+                        <span :class="exchangeBtn1 ? 'green' : 'gray'">库存</span>
                     </div>
-                </div>
-            </div>
+                </template>
+                <template v-slot:default>
+                    <RadarPieChart height="20.6vh" />
+                </template>
+            </PanelSandToolbar>
         </div>
         <div class="sand-table-right" v-if="showPanel">
             <PanelSand class="right-panel" title="板块标题">
@@ -179,61 +87,12 @@
                 </template>
             </PanelSandToolbar>
         </div>
-        <div class="sand-table-bottom">
-            <div class="stb-chart-panel">
-                <PercentCard2></PercentCard2>
-            </div>
-            <div class="stb-chart-panel">
-                <PercentCard2 title="年计划完成率"></PercentCard2>
-            </div>
-            <div class="stb-count-panel">
-                <div class="stb-count-panel-icon">日</div>
-                <div class="stb-count-panel-info mg-l-16">
-                    <div class="white font-sm">今日预测发电量</div>
-                    <div class="mg-t-8">
-                        <span class="green font-num font-lg">994.76</span>
-                        <span class="white font-sm mg-l-8">kWh</span>
-                    </div>
-                </div>
-            </div>
-            <div class="stb-count-panel">
-                <div class="stb-count-panel-icon">月</div>
-                <div class="stb-count-panel-info mg-l-16">
-                    <div class="white font-sm">月预测发电量</div>
-                    <div class="mg-t-8">
-                        <span class="green font-num font-lg">994.76</span>
-                        <span class="white font-sm mg-l-8">kWh</span>
-                    </div>
-                </div>
-            </div>
-            <div class="stb-count-panel">
-                <div class="stb-count-panel-icon">
-                    <div class="svg-icon svg-icon-sm svg-icon-gray-l">
-                        <svg-icon svgid="svg-风速" />
-                    </div>
-                </div>
-                <div class="stb-count-panel-info mg-l-16">
-                    <div class="white font-sm">风速</div>
-                    <div class="mg-t-8">
-                        <span class="green font-num font-lg">994.76</span>
-                        <span class="white font-sm mg-l-8">kWh</span>
-                    </div>
-                </div>
-            </div>
-            <div class="stb-count-panel">
-                <div class="stb-count-panel-icon">
-                    <div class="svg-icon svg-icon-sm svg-icon-gray-l">
-                        <svg-icon svgid="svg-功率" />
-                    </div>
-                </div>
-                <div class="stb-count-panel-info mg-l-16">
-                    <div class="white font-sm">功率</div>
-                    <div class="mg-t-8">
-                        <span class="green font-num font-lg">994.76</span>
-                        <span class="white font-sm mg-l-8">kWh</span>
-                    </div>
-                </div>
-            </div>
+        <div class="sand-table-bottom" v-if="showPanel">
+            <Ppanel title="利用小时"></Ppanel>
+            <Ppanel title="设备可利用率" class="stb-p"></Ppanel>
+            <Ppanel title="MTBF" class="stb-p"></Ppanel>
+            <Ppanel title="MTTR" class="stb-p"></Ppanel>
+            <Ppanel title="MTTF" class="stb-p"></Ppanel>
         </div>
     </div>
 </template>
@@ -242,11 +101,12 @@
 import ThreeModel1 from "./component/ThreeModel1.vue";
 import PanelSand from "@com/coms/panel/panel-sand.vue";
 import PanelSandToolbar from "@com/coms/panel/panel-sand-toolbar.vue";
+import Weather from "./component/weather.vue";
 import StBack from "./component/st-back.vue";
 import Table from "@com/coms/table/table.vue";
+import RankTable from "./component/rank-table.vue";
+import Ppanel from "./component/p-panel.vue";
 import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
-import SvgIcon from "@com/coms/icon/svg-icon.vue";
-import PercentCard2 from "@com/coms/cards/percent-card-2.0.1.vue";
 
 export default {
     // 名称
@@ -256,11 +116,12 @@ export default {
         ThreeModel1,
         PanelSand,
         PanelSandToolbar,
+        Weather,
         Table,
         RadarPieChart,
         StBack,
-        SvgIcon,
-        PercentCard2,
+        RankTable,
+        Ppanel,
     },
     // 数据
     data() {
@@ -268,6 +129,7 @@ export default {
             videoShow: true,
             showPanel: false,
             exchangeBtn: false,
+            exchangeBtn1: false,
             ForecastPower: [
                 {
                     name: "今日预测电量",
@@ -340,8 +202,39 @@ export default {
                     },
                 ],
             },
-            sandTime: "00:00:00",
-            sandDate: "0000年00月00日 星期日",
+            levelTableData: {
+                column: [{
+                    name: "编号",
+                    field: "no",
+                },{
+                    name: "等级",
+                    field: "level",
+                },{
+                    name: "分数",
+                    field: "score",
+                }],
+                data: [{
+                    no: "MHS_A01",
+                    level: "AAA",
+                    score: 98,
+                },{
+                    no: "MHS_A02",
+                    level: "AAA",
+                    score: 95,
+                },{
+                    no: "MHS_A01",
+                    level: "AA",
+                    score: 94,
+                },{
+                    no: "MHS_A02",
+                    level: "BB",
+                    score: 92,
+                },{
+                    no: "MHS_A01",
+                    level: "BB",
+                    score: 90,
+                }],
+            },
         };
     },
     // 函数
@@ -352,26 +245,8 @@ export default {
         exchange: function () {
             this.exchangeBtn = !this.exchangeBtn;
         },
-        initDateTime: function () {
-            const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
-            const setDateTime = () => {
-                let myDate = new Date();
-                let year = myDate.getFullYear();
-                let month = myDate.getMonth() + 1;
-                month = month < 10 ? `0${month}` : month;
-                let day = myDate.getDate();
-                day = day < 10 ? `0${day}` : day;
-                let xq = days[myDate.getDay()];
-                let hour = myDate.getHours();
-                let minute = myDate.getMinutes();
-                minute = minute < 10 ? `0${minute}` : minute;
-                let second = myDate.getSeconds();
-                second = second < 10 ? `0${second}` : second;
-                this.sandTime = `${hour}:${minute}:${second}`;
-                this.sandDate = `${year}年${month}月${day}日 ${xq}`;
-                window.requestAnimationFrame(setDateTime);
-            };
-            setDateTime();
+        exchange1: function () {
+            this.exchangeBtn1 = !this.exchangeBtn1;
         },
     },
     // 生命周期钩子
@@ -386,7 +261,6 @@ export default {
     },
     mounted() {
         // 渲染后
-        this.initDateTime();
     },
     beforeUpdate() {
         // 数据更新前
@@ -403,79 +277,6 @@ export default {
     height: 91.667vh;
     position: relative;
 
-    .com-panel-sand {
-        background: #53626826;
-        padding: 0 1.481vh 1.481vh 1.481vh;
-        border-top: 1px solid #15a952;
-        position: relative;
-        // width: 18.519vh;
-
-        &::after {
-            content: "";
-            position: absolute;
-            width: 5px;
-            height: 5px;
-            background: #15a952;
-            right: -2.5px;
-            top: -2.5px;
-        }
-
-        .com-panel-sand-header {
-            text-align: left;
-            position: relative;
-            padding: 0.833vh 0;
-            border-bottom: 1px solid #15a95266;
-
-            .sand-time {
-                color: #15A952;
-                font-weight: 400;
-                font-size: 24px;
-            }
-
-            .sand-date {
-                font-size: 12px;
-                font-weight: 400;
-                color: #FFFFFF;
-            }
-
-            &::after,
-            &::before {
-                content: "";
-                position: absolute;
-                bottom: -1px;
-                width: 15px;
-                height: 1px;
-                background: #15a952;
-            }
-
-            &::after {
-                left: 0;
-            }
-
-            &::before {
-                right: 0;
-            }
-
-            .com-panel-sand-sub-title {
-                position: absolute;
-                right: 0;
-                top: 0.833vh;
-            }
-        }
-
-        .weather-box {
-            .weather-item {
-                display: flex;
-                align-items: center;
-                margin-top: 16px;
-
-                .weather-icon {
-                    margin-right: 12px;
-                }
-            }
-        }
-    }
-
     .i3dback {
         position: fixed;
         z-index: -1;
@@ -486,7 +287,7 @@ export default {
     }
 
     .i3dcloud {
-        position: fixed;
+        position: absolute;
         z-index: 2;
         width: 100vw;
         height: 100vh;
@@ -495,7 +296,7 @@ export default {
     }
 
     .left-panel {
-        width: 36.852vh;
+        width: 360px;
     }
 
     .right-panel {
@@ -525,53 +326,13 @@ export default {
 
     .sand-table-bottom {
         position: absolute;
-        left: 18vh;
+        right: calc(50vw - 50.463vh);
         bottom: 0;
         z-index: 2;
         display: flex;
 
-        .stb-chart-panel {
-            background: #53626826;
-            margin-right: 4px;
-            padding: 0 16px;
-            height: 64px;
-        }
-
-        .stb-count-panel {
-            margin: 0 16px;
-            display: flex;
-            height: 64px;
-            align-items: center;
-
-            .stb-count-panel-icon {
-                width: 37px;
-                height: 37px;
-                background: #5362684D;
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 20px;
-                color: #94A4AB;
-
-                &::after,
-                &::before {
-                    content: '';
-                    position: absolute;
-                    width: 3px;
-                    height: 3px;
-                    background: #15A952;
-                    top: 17px;
-                }
-
-                &::after {
-                    left: -3px;
-                }
-
-                &::before {
-                    right: -3px;
-                }
-            }
+        .stb-p {
+            margin-left: 0.926vh;
         }
     }
 
@@ -583,7 +344,8 @@ export default {
         padding: 0;
         
         .pre-img {
-            width: 98%;
+            width: 95%;
+            height: 8.657vh;
         }
     }
 

src/views/SandTable/SandTable_old1.vue

@@ -0,0 +1,613 @@
+<template>
+    <div class="sand-table">
+        <img :src="require('@assets/png/3dback.png')" class="i3dback">
+        <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud">
+        <StBack></StBack>
+        <ThreeModel1 class="three-model-layer" @when="when"></ThreeModel1>
+        <div class="sand-table-left" v-if="showPanel">
+            <div class="com-panel-sand">
+                <div class="com-panel-sand-header font-sm white">
+                    <div class="sand-time">{{sandTime}}</div>
+                    <div class="sand-date mg-b-8">{{sandDate}}</div>
+                </div>
+                <div class="com-panel-body">
+                    <div class="weather-box">
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-天气1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">天气</div>
+                                <div class="font-lg green">多云转晴</div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-温度1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">温度</div>
+                                <div>
+                                    <span class="font-lg green">26</span>
+                                    <span class="font-sm white mg-l-8">℃</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-风速" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">风向</div>
+                                <div>
+                                    <span class="font-lg green">4-5</span>
+                                    <span class="font-sm white mg-l-8">级 西北风</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-能见度" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">能见度</div>
+                                <div>
+                                    <span class="font-lg green">20</span>
+                                    <span class="font-sm white mg-l-8">KM</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-湿度1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">湿度</div>
+                                <div>
+                                    <span class="font-lg green">75.0</span>
+                                    <span class="font-sm white mg-l-8">%</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-气压1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">气压</div>
+                                <div>
+                                    <span class="font-lg green">994</span>
+                                    <span class="font-sm white mg-l-8">kPa</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-日出1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">日出时间</div>
+                                <div class="font-lg green">04:36</div>
+                            </div>
+                        </div>
+                        <div class="weather-item">
+                            <div class="weather-icon">
+                                <div class="svg-icon svg-icon-lg svg-icon-white other-icon">
+                                    <svg-icon svgid="svg-日落1" />
+                                </div>
+                            </div>
+                            <div class="weather-info">
+                                <div class="font-sm white">日落时间</div>
+                                <div class="font-lg green">18:50</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="sand-table-right" v-if="showPanel">
+            <PanelSand class="right-panel" title="板块标题">
+                <el-row>
+                    <el-col :span="12" class="pre-img-box">
+                        <img v-if="!videoShow" class="pre-img" :src="require('@assets/png/p1.jpg')" />
+                        <video v-if="videoShow" class="pre-img" width="179" height="100" controls>
+                            <source :src="require('@assets/png/p.mp4')" type="video/mp4">
+                            您的浏览器不支持 video 标签。
+                        </video>
+                    </el-col>
+                    <el-col :span="12" class="pre-img-box">
+                        <img class="pre-img" :src="require('@assets/png/p2.jpg')" />
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12" class="pre-img-box">
+                        <img class="pre-img" :src="require('@assets/png/p3.jpg')" />
+                    </el-col>
+                    <el-col :span="12" class="pre-img-box">
+                        <img class="pre-img" :src="require('@assets/png/p4.jpg')" />
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12" class="pre-img-box">
+                        <img class="pre-img" :src="require('@assets/png/p5.jpg')" />
+                    </el-col>
+                    <el-col :span="12" class="pre-img-box">
+                        <img class="pre-img" :src="require('@assets/png/p6.jpg')" />
+                    </el-col>
+                </el-row>
+            </PanelSand>
+            <PanelSand class="right-panel mg-t-16" title="板块标题">
+                <div class="person-info-box mg-t-16">
+                    <img class="header mg-r-8 bg-green" :src="require('@assets/logo.png')" />
+                    <div class="person-info">
+                        <div class="green font-lg" style="font-weight: bold;">张三</div>
+                        <div class="white font-sm">
+                            <span>职务：高级检修工</span>
+                            <span class="mg-l-16">当前任务编号 000000</span>
+                        </div>
+                        <div class="white font-sm">平均检修时间 <span class="green">5</span> 小时</div>
+                    </div>
+                </div>
+                <div class="table mg-t-8">
+                    <Table :data="tableData" />
+                </div>
+            </PanelSand>
+            <PanelSandToolbar class="right-panel mg-t-16" title="风险隐患详情">
+                <template v-slot:tools>
+                    <div class="exchange" @click="exchange">
+                        <span :class="exchangeBtn ? 'gray' : 'green'">预警</span>
+                        <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
+                        <span :class="exchangeBtn ? 'green' : 'gray'">时长</span>
+                    </div>
+                </template>
+                <template v-slot:default>
+                    <RadarPieChart height="21vh" />
+                </template>
+            </PanelSandToolbar>
+        </div>
+        <div class="sand-table-bottom">
+            <div class="stb-chart-panel">
+                <PercentCard2></PercentCard2>
+            </div>
+            <div class="stb-chart-panel">
+                <PercentCard2 title="年计划完成率"></PercentCard2>
+            </div>
+            <div class="stb-count-panel">
+                <div class="stb-count-panel-icon">日</div>
+                <div class="stb-count-panel-info mg-l-16">
+                    <div class="white font-sm">今日预测发电量</div>
+                    <div class="mg-t-8">
+                        <span class="green font-num font-lg">994.76</span>
+                        <span class="white font-sm mg-l-8">kWh</span>
+                    </div>
+                </div>
+            </div>
+            <div class="stb-count-panel">
+                <div class="stb-count-panel-icon">月</div>
+                <div class="stb-count-panel-info mg-l-16">
+                    <div class="white font-sm">月预测发电量</div>
+                    <div class="mg-t-8">
+                        <span class="green font-num font-lg">994.76</span>
+                        <span class="white font-sm mg-l-8">kWh</span>
+                    </div>
+                </div>
+            </div>
+            <div class="stb-count-panel">
+                <div class="stb-count-panel-icon">
+                    <div class="svg-icon svg-icon-sm svg-icon-gray-l">
+                        <svg-icon svgid="svg-风速" />
+                    </div>
+                </div>
+                <div class="stb-count-panel-info mg-l-16">
+                    <div class="white font-sm">风速</div>
+                    <div class="mg-t-8">
+                        <span class="green font-num font-lg">994.76</span>
+                        <span class="white font-sm mg-l-8">kWh</span>
+                    </div>
+                </div>
+            </div>
+            <div class="stb-count-panel">
+                <div class="stb-count-panel-icon">
+                    <div class="svg-icon svg-icon-sm svg-icon-gray-l">
+                        <svg-icon svgid="svg-功率" />
+                    </div>
+                </div>
+                <div class="stb-count-panel-info mg-l-16">
+                    <div class="white font-sm">功率</div>
+                    <div class="mg-t-8">
+                        <span class="green font-num font-lg">994.76</span>
+                        <span class="white font-sm mg-l-8">kWh</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ThreeModel1 from "./component/ThreeModel1.vue";
+import PanelSand from "@com/coms/panel/panel-sand.vue";
+import PanelSandToolbar from "@com/coms/panel/panel-sand-toolbar.vue";
+import StBack from "./component/st-back.vue";
+import Table from "@com/coms/table/table.vue";
+import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import PercentCard2 from "@com/coms/cards/percent-card-2.0.1.vue";
+
+export default {
+    // 名称
+    name: "SandTable",
+    // 使用组件
+    components: {
+        ThreeModel1,
+        PanelSand,
+        PanelSandToolbar,
+        Table,
+        RadarPieChart,
+        StBack,
+        SvgIcon,
+        PercentCard2,
+    },
+    // 数据
+    data() {
+        return {
+            videoShow: true,
+            showPanel: false,
+            exchangeBtn: false,
+            ForecastPower: [
+                {
+                    name: "今日预测电量",
+                    value: 103.62,
+                    total: 150,
+                },
+                {
+                    name: "月预测发电量",
+                    value: 98.62,
+                    total: 100,
+                },
+            ],
+            tableData: {
+                column: [
+                    {
+                        name: "标题",
+                        field: "v1",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "标题",
+                        field: "v2",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "标题",
+                        field: "v3",
+                        width: "150px",
+                        is_num: false,
+                        is_light: false,
+                    },
+                    {
+                        name: "标题",
+                        field: "v4",
+                        is_num: false,
+                        is_light: false,
+                    },
+                ],
+                data: [
+                    {
+                        v1: "内容内容",
+                        v2: "内容内容",
+                        v3: "内容内容内容内容内容",
+                        v4: "内容内容",
+                        is_light: false,
+                    },
+                    {
+                        v1: "内容内容",
+                        v2: "内容内容",
+                        v3: "内容内容内容内容内容",
+                        v4: "内容内容",
+                        is_light: false,
+                    },
+                    {
+                        v1: "内容内容",
+                        v2: "内容内容",
+                        v3: "内容内容内容内容内容",
+                        v4: "内容内容",
+                        is_light: false,
+                    },
+
+                    {
+                        v1: "内容内容",
+                        v2: "内容内容",
+                        v3: "内容内容内容内容内容",
+                        v4: "内容内容",
+                        is_light: false,
+                    },
+                ],
+            },
+            sandTime: "00:00:00",
+            sandDate: "0000年00月00日 星期日",
+        };
+    },
+    // 函数
+    methods: {
+        when: function() {
+            this.showPanel = true;
+        },
+        exchange: function () {
+            this.exchangeBtn = !this.exchangeBtn;
+        },
+        initDateTime: function () {
+            const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
+            const setDateTime = () => {
+                let myDate = new Date();
+                let year = myDate.getFullYear();
+                let month = myDate.getMonth() + 1;
+                month = month < 10 ? `0${month}` : month;
+                let day = myDate.getDate();
+                day = day < 10 ? `0${day}` : day;
+                let xq = days[myDate.getDay()];
+                let hour = myDate.getHours();
+                let minute = myDate.getMinutes();
+                minute = minute < 10 ? `0${minute}` : minute;
+                let second = myDate.getSeconds();
+                second = second < 10 ? `0${second}` : second;
+                this.sandTime = `${hour}:${minute}:${second}`;
+                this.sandDate = `${year}年${month}月${day}日 ${xq}`;
+                window.requestAnimationFrame(setDateTime);
+            };
+            setDateTime();
+        },
+    },
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+        this.initDateTime();
+    },
+    beforeUpdate() {
+        // 数据更新前
+    },
+    updated() {
+        // 数据更新后
+    },
+};
+</script>
+
+<style lang="less">
+.sand-table {
+    width: 100%;
+    height: 91.667vh;
+    position: relative;
+
+    .com-panel-sand {
+        background: #53626826;
+        padding: 0 1.481vh 1.481vh 1.481vh;
+        border-top: 1px solid #15a952;
+        position: relative;
+        // width: 18.519vh;
+
+        &::after {
+            content: "";
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            background: #15a952;
+            right: -2.5px;
+            top: -2.5px;
+        }
+
+        .com-panel-sand-header {
+            text-align: left;
+            position: relative;
+            padding: 0.833vh 0;
+            border-bottom: 1px solid #15a95266;
+
+            .sand-time {
+                color: #15A952;
+                font-weight: 400;
+                font-size: 24px;
+            }
+
+            .sand-date {
+                font-size: 12px;
+                font-weight: 400;
+                color: #FFFFFF;
+            }
+
+            &::after,
+            &::before {
+                content: "";
+                position: absolute;
+                bottom: -1px;
+                width: 15px;
+                height: 1px;
+                background: #15a952;
+            }
+
+            &::after {
+                left: 0;
+            }
+
+            &::before {
+                right: 0;
+            }
+
+            .com-panel-sand-sub-title {
+                position: absolute;
+                right: 0;
+                top: 0.833vh;
+            }
+        }
+
+        .weather-box {
+            .weather-item {
+                display: flex;
+                align-items: center;
+                margin-top: 16px;
+
+                .weather-icon {
+                    margin-right: 12px;
+                }
+            }
+        }
+    }
+
+    .i3dback {
+        position: fixed;
+        z-index: -1;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+    }
+
+    .i3dcloud {
+        position: absolute;
+        z-index: 2;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+    }
+
+    .left-panel {
+        width: 36.852vh;
+    }
+
+    .right-panel {
+        width: 36.852vh;
+    }
+
+    .three-model-layer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+    }
+
+    .sand-table-left {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 2;
+    }
+
+    .sand-table-right {
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 2;
+    }
+
+    .sand-table-bottom {
+        position: absolute;
+        left: 18vh;
+        bottom: 0;
+        z-index: 2;
+        display: flex;
+
+        .stb-chart-panel {
+            background: #53626826;
+            margin-right: 4px;
+            padding: 0 16px;
+            height: 64px;
+        }
+
+        .stb-count-panel {
+            margin: 0 16px;
+            display: flex;
+            height: 64px;
+            align-items: center;
+
+            .stb-count-panel-icon {
+                width: 37px;
+                height: 37px;
+                background: #5362684D;
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 20px;
+                color: #94A4AB;
+
+                &::after,
+                &::before {
+                    content: '';
+                    position: absolute;
+                    width: 3px;
+                    height: 3px;
+                    background: #15A952;
+                    top: 17px;
+                }
+
+                &::after {
+                    left: -3px;
+                }
+
+                &::before {
+                    right: -3px;
+                }
+            }
+        }
+    }
+
+    .pre-img-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 0.556vh;
+        padding: 0;
+        
+        .pre-img {
+            width: 98%;
+        }
+    }
+
+    .person-info-box {
+        display: flex;
+
+        .header {
+            width: 75px;
+        }
+    }
+
+    .table {
+        width: calc(100% + 2.963vh);
+        margin-left: -1.481vh;
+        margin-bottom: -1.481vh;
+
+        .com-table thead tr th,
+        .com-table tr td {
+            padding: 0.556vh 0;
+        }
+    }
+
+    .exchange {
+        cursor: pointer;
+    }
+}
+</style>

src/views/SandTable/component/ThreeModel1.vue

@@ -209,7 +209,7 @@ export default {
         // 灯光
         initLight: function() {
             // let light = new THREE.PointLight(0xffffff, 2);
-            let light = new THREE.AmbientLight(0xffffff, 1);
+            let light = new THREE.AmbientLight(0xffffff, 5);
             // light.position.set(50, 50, 50);
             scene.add(light);
         },
@@ -309,6 +309,18 @@ export default {
                     let light = gltf.scene.children[0].children[0];
                     rootNode.remove(light);
                     this.setLightPosition(rootNode, light);
+                },
+                (xhr) => {},
+                function(error) {
+                    console.error("load error!" + error.getWebGLErrorMessage());
+                }
+            );
+            loaderGround.load(
+                "static/3d/build.gltf",
+                (gltf) => {
+                    gltf.scene.position.set(10, 0, -50);
+                    scene.add(gltf.scene);
+                    gltf.scene.rotateY(120);
                     scene.onAfterRender = () => {
                         this.$emit("when");
                         this.$refs.pageLoading.hide();
@@ -322,6 +334,22 @@ export default {
         },
         // 改变元素底盘的颜色（带底盘的）
         changeObjectColor: function (obj, colorName) {
+            for (let i = 1; i <= 4; i++) {
+                let c = obj.getObjectByName(`${obj.name}_c_${i}`);
+                c.material = new THREE.MeshBasicMaterial({
+                    color: 0xf0f0f0,
+                    opacity: 0.8,
+                    transparent: true,
+                });
+            }
+            let leaf = obj.getObjectByName(`${obj.name}_leaf`);
+            for (let chind of leaf.children) {
+                chind.material = new THREE.MeshBasicMaterial({
+                    color: 0xf0f0f0,
+                    opacity: 0.8,
+                    transparent: true,
+                });
+            }
             let chassis = obj.getObjectByName(`${obj.name}_chassis`);
             let color = this.colors.find(t => t.colorName == colorName || t.state == colorName || t.stateName == colorName).color;
             chassis.material = new THREE.MeshBasicMaterial({
@@ -346,6 +374,20 @@ export default {
         setFanName: function (obj, name) {
             obj.name = name;
             obj.userData.name = name;
+            // "Cylinder881" "Cone277"
+            let Cylinder881 = obj.getObjectByName("Cylinder881");
+            let Cylinder882 = obj.getObjectByName("Cylinder882");
+            let Cylinder883 = obj.getObjectByName("Cylinder883");
+            let Cone277 = obj.getObjectByName("Cone277");
+            Cylinder881.name = `${name}_c_1`;
+            Cylinder881.userData.name = `${name}_c_1`;
+            Cylinder882.name = `${name}_c_2`;
+            Cylinder882.userData.name = `${name}_c_2`;
+            Cylinder883.name = `${name}_c_3`;
+            Cylinder883.userData.name = `${name}_c_3`;
+            Cone277.name = `${name}_c_4`;
+            Cone277.userData.name = `${name}_c_4`;
+            // "Box719")
             let fanBig1_1 = obj.getObjectByName("Box719");
             let fanBig1_2 = obj.getObjectByName("Box720");
             let fanBig1_3 = obj.getObjectByName("Box721");
@@ -469,13 +511,13 @@ export default {
             obj.remove(Box665);
             // 大武口
             let light_dwk = obj.clone(true);
-            light_dwk.position.set(-6, 0.13, -53);
+            light_dwk.position.set(-6, 0.13, -50);
             this.setLightName(light_dwk, "light_dwk");
             rootNode.add(light_dwk);
             this.htmlLayer[5].position = light_dwk.position;
             // 平罗
             let light_pl = obj.clone(true);
-            light_pl.position.set(-3, 0.13, -60);
+            light_pl.position.set(-3, 0.13, -55);
             this.setLightName(light_pl, "light_pl");
             rootNode.add(light_pl);
             this.htmlLayer[6].position = light_pl.position;
@@ -602,7 +644,7 @@ export default {
 .three-model {
     position: relative;
     overflow: hidden;
-    left: -112px;
+    // left: -112px;
 
     .map-3d {
         position: absolute;

src/views/SandTable/component/p-panel.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="p-panel">
+        <div class="p-panel-title font-sm">{{ title }}</div>
+        <div class="p-panel-body">
+            <div class="pp-info">
+                <div class="pp-info-days mg-r-16">
+                    <span class="font-num green font-lg pp-info-days-num">{{ days }}</span>
+                    <span class="gray font-sm">{{ daysUnit }}</span>
+                </div>
+                <div class="pp-info-data mg-l-16">
+                    <span class="gray-l font-sm">{{ data1Str }}</span>
+                    <span class="pp-icon-l svg-icon" :class="data1IconClass">
+                        <svg-icon :svgid="data1Icon" />
+                    </span>
+                    <span class="gray-l font-sm">{{ data2Str }}</span>
+                    <span class="pp-icon-r svg-icon" :class="data2IconClass">
+                        <svg-icon :svgid="data2Icon" />
+                    </span>
+                </div>
+            </div>
+            <div class="pp-data">
+                <div class="pp-tip" :style="'margin-left: ' + (data*100) + '%'">
+                    <div class="pp-tip-data font-sm">{{ flip ? ((1 - data) * 100).toFixed(2) + "%" : (data * 100).toFixed(2) + "%" }}</div>
+                    <div class="pp-tip-icon"><i class="el-icon-caret-bottom font-sm" :style="'color: ' + dataColor"></i></div>
+                </div>
+                <div class="pp-data-box" :style="'border-color: ' + dataColor + '4d; background: ' + backColor + ';'">
+                    <div class="pp-data-split" v-for="index of 20" :key="index"></div>
+                    <div class="pp-data-num" :style="'width: ' + (data*100) + '%; background: ' + dataColor + ';'"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+export default {
+    // 名称
+    name: "Ppanel",
+    // 使用组件
+    components: {
+        SvgIcon,
+    },
+    // 传入参数
+    props: {
+        title: {
+            type: String,
+            default: "利用小时",
+        },
+        days: {
+            type: Number,
+            default: 88.5,
+        },
+        daysUnit: {
+            type: String,
+            default: "天",
+        },
+        data1Str: {
+            type: String,
+            default: "环",
+        },
+        data1IconClass: {
+            type: String,
+            default: "svg-icon-sm svg-icon-green",
+        },
+        data1Icon: {
+            type: String,
+            default: "svg-arrow-up-1",
+        },
+        data2Str: {
+            type: String,
+            default: "同",
+        },
+        data2Icon: {
+            type: String,
+            default: "svg-arrow-dpwn-1",
+        },
+        data2IconClass: {
+            type: String,
+            default: "svg-icon-sm svg-icon-yellow",
+        },
+        data: {
+            type: Number,
+            default: 0.75,
+        },
+        flip: {
+            type: Boolean,
+            default: false,
+        },
+        dataColor: {
+            type: String,
+            default: "#05BB4C",
+        },
+        backColor: {
+            type: String,
+            default: "#4B55AE",
+        },
+    },
+    emits: {},
+    // 数据
+    data() {
+        return {};
+    },
+    // 函数
+    methods: {},
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+    },
+    beforeUpdate() {},
+    updated() {},
+};
+</script>
+
+<style lang="less">
+.p-panel {
+    background: #272e3d66;
+
+    .font-sm {
+        font-size: 12px;
+    }
+
+    .p-panel-title {
+        height: 2.778vh;
+        line-height: 2.778vh;
+        text-align: center;
+        color: #ffffff;
+        border-bottom: 1px solid #ffffff66;
+    }
+
+    .p-panel-body {
+        .pp-info {
+            padding-top: 1.111vh;
+            display: flex;
+
+            .pp-info-days-num {
+                padding: 1.204vh 0.926vh 0 1.944vh;
+            }
+
+            .pp-info-data {
+                margin-left: auto;
+
+                .pp-icon-l {
+                    padding: 1.111vh 2.037vh 0 0.556vh;
+                }
+
+                .pp-icon-r {
+                    padding: 1.111vh 0.833vh 0 0.556vh;
+                }
+            }
+        }
+
+        .pp-data {
+            padding: 0.741vh 0.556vh 1.389vh 0.556vh;
+            .pp-tip {
+                display: inline-block;
+
+                .pp-tip-data,
+                .pp-tip-icon {
+                    margin-left: -100%;
+                    text-align: center;
+                }
+
+                .pp-tip-icon {
+                    margin-top: -0.37vh;
+                }
+            }
+
+            .pp-data-box {
+                height: 0.741vh;
+                width: 200px;
+                border: 1px solid;
+                position: relative;
+                display: flex;
+                transform: skewX(-25deg);
+
+                .pp-data-split {
+                    width: 10px;
+                    height: 100%;
+                    z-index: 2;
+                    
+                    +.pp-data-split {
+                        border-left: 1px solid #172F2E;
+                    }
+                }
+
+                .pp-data-num {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    height: 100%;
+                    z-index: 1;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/SandTable/component/rank-table.vue

@@ -0,0 +1,285 @@
+<template>
+    <table class="com-table rank-table">
+        <thead>
+            <tr>
+                <th>排名</th>
+                <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" :style="{ width: col.width }" @click="onSort(col)">
+                    {{ col.name }}
+                </th>
+            </tr>
+        </thead>
+        <el-scrollbar>
+            <tbody :style="{ height: height }">
+                <tr v-for="(row, index) of tableData" :key="index" :class="'rank rank' + index">
+                    <td class="rank-index">
+                        <span>{{ index + 1 }}</span>
+                    </td>
+                    <td
+                        v-for="(col, i) of data.column"
+                        :key="i"
+                        :style="{ width: col.width }"
+                        :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
+                        @mouseleave="leave()"
+                    >
+                        <component :is="col.type ? col.type : 'span'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)">
+                        </component>
+                    </td>
+                </tr>
+            </tbody>
+        </el-scrollbar>
+        <el-pagination
+            class="mg-t-8"
+            v-if="pageable"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :total="data.total"
+            v-bind="elPaggingProps"
+        >
+        </el-pagination>
+    </table>
+</template>
+
+<script>
+export default {
+    // 名称
+    name: "ComTable",
+    // 使用组件
+    components: {},
+    // 传入参数
+    props: {
+        /**
+        *   {
+                column: [{
+                    name: "风机名称",
+                    field: "name",
+                    type:'div',
+                    width:'', // 宽度
+                    is_num: false, // 是否为数字
+                    is_light: false, // 是否高亮
+                    template:function(){ }
+                    click:function(){} //点击事件
+                    sortable:fasle // 排序
+                    // 新增用于在表格中使用动态三方组件
+                    type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
+                    props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
+                },{
+                    name: "冷却风温度",
+                    field: "lqf",
+                    is_num: true,
+                    is_light: false
+                }],
+                data: [{
+                    name: "1E01",
+                    lqf: 15.78,
+                    is_light: false
+                }],
+                total:200
+            }
+        */
+        data: Object,
+        // hover 样式
+        showHover: {
+            type: Boolean,
+            default: true,
+        },
+        // 列高亮
+        showColHover: {
+            type: Boolean,
+            default: false,
+        },
+        canScroll: {
+            type: Boolean,
+            default: true,
+        },
+        pageSize: {
+            type: Number,
+            default: 0,
+        },
+        height: {
+            type: String,
+            default: "",
+        },
+        // 新增 支持 pagging 组件
+        elPaggingProps: {
+            type: Object,
+            default: () => {
+                return {
+                    layout: "total, sizes, prev, pager, next, jumper",
+                    // "page-sizes": [100, 200, 300, 400],
+                };
+            },
+        },
+    },
+    // 自定义事件
+    emits: {
+        // 分页事件
+        onPagging: null,
+    },
+    // 数据
+    data() {
+        return {
+            hoverRow: -1,
+            hoverCol: -1,
+            sortCol: "",
+            sortType: "",
+            currentPage: 1,
+        };
+    },
+    computed: {
+        tableData() {
+            let that = this;
+            if (this.sortCol == "") {
+                return this.data.data;
+            } else {
+                let data = this.data.data;
+
+                data.sort((a, b) => {
+                    let rev = 1;
+                    if (that.sortType == "ASC") rev = 1;
+                    else if (that.sortType == "DESC") rev = -1;
+
+                    if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+                    if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+                    return 0;
+                });
+                return data;
+            }
+        },
+        pageable() {
+            return this.pageSize != 0;
+        },
+        pages() {
+            if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+            else return 0;
+        },
+        startRow() {
+            if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+            else return 0;
+        },
+        endRow() {
+            if (this.pageable) return this.currentPage * this.pageSize;
+            else return this.data.data.length;
+        },
+    },
+    // 函数
+    methods: {
+        onClick(col, data) {
+            if (col.click) col.click(event, data);
+        },
+        onSort(col) {
+            if (col.sortable == true) {
+                this.sortCol = col.field;
+                switch (this.sortType) {
+                    case "":
+                        this.sortType = "DESC";
+                        break;
+                    case "DESC":
+                        this.sortType = "ASC";
+                        break;
+                    case "ASC":
+                        this.sortType = "";
+                        break;
+                }
+            }
+        },
+        template(col, data) {
+            if (!col.template) return data;
+            else return col.template(data);
+        },
+        hover(row, col) {
+            if (this.showHover) {
+                this.hoverRow = row;
+                if (this.showColHover) this.hoverCol = col;
+            }
+        },
+        leave() {
+            this.hoverRow = -1;
+            this.hoverCol = -1;
+        },
+        handleCurrentChange(val) {
+            this.currentPage = val;
+            this.$emit("onPagging", {
+                pageIndex: this.currentPage,
+                pageSize: this.pageSize,
+                start: this.startRow,
+                end: this.endRow,
+            });
+        },
+    },
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+    },
+    beforeUpdate() {},
+    updated() {},
+};
+</script>
+
+<style lang="less">
+.rank-table {
+    thead tr th {
+        color: #ffffff;
+    }
+
+    .rank {
+        background: transparent !important;
+        border-bottom: 1px solid #5362684d;
+
+        td {
+            height: 2.593vh;
+            line-height: 2.593vh;
+            padding: 0;
+            color: #ffffff;
+
+            &.rank-index {
+                span {
+                    width: 1.852vh;
+                    height: 1.852vh;
+                    display: flex;
+                    margin: 0.37vh auto;
+                    background: #414E64;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+        }
+    }
+
+    .rank.rank0 td {
+        color: #EDB32F;
+
+        &.rank-index span {
+            background: #EDB32F;
+            color: #FFFFFF;
+        }
+    }
+
+    .rank.rank1 td {
+        color: #05BB4C;
+
+        &.rank-index span {
+            background: #05BB4C;
+            color: #FFFFFF;
+        }
+    }
+
+    .rank.rank2 td {
+        color: #4B55AE;
+
+        &.rank-index span {
+            background: #4B55AE;
+            color: #FFFFFF;
+        }
+    }
+}
+</style>

src/views/SandTable/component/st-back.vue

@@ -138,7 +138,8 @@ export default {
     height: 872px;
     position: fixed;
     z-index: 0;
-    left: calc(50% - 436px - 112px);
+    // left: calc(50% - 436px - 112px);
+    left: calc(50% - 436px);
     top: calc(50% - 436px);
     transform: rotateX(45deg);
 

src/views/SandTable/component/weather.vue

@@ -84,15 +84,15 @@ export default {
 .weather {
   .weather-info {
     display: flex;
-    margin-bottom: 1.481vh;
+    margin-bottom: 0.741vh;
 
     .weather-icon {
-      width: 5.5556vh;
-      height: 5.5556vh;
+      width: 4.63vh;
+      height: 4.63vh;
       margin: 0 1.481vh;
     }
     .temperature {
-      font-size: 2.778vh;
+      font-size: 2.407vh;
     }
     .other span {
       font-size: @fontsize-s;
@@ -107,11 +107,11 @@ export default {
     .text {
       color: @font-color;
       font-size: 12px;
-      margin-bottom: 8px;
+      // margin-bottom: 0.741vh;
     }
 
     .value {
-      margin: 8px 0;
+      margin: 0.741vh 0 0 0;
     }
 
     .other-icon {

src/views/Status/Status.vue

@@ -7,7 +7,7 @@
     <div class="table-box">
       <ComTable :data="tableData"></ComTable>
     </div>
-  </div>
+  </div> 
 </template>
 
 <script>

src/views/WindSite/components/gax6.vue

@@ -1,901 +0,0 @@
-<template>
-  <div class="gax6"></div>
-</template>
-
-<script>
-import { Graph } from '@antv/x6'
-import customNode from './customNode.js'
-
-export default {
-  // 名称
-  name: 'gax6',
-  // 使用组件
-  components: {},
-  // 传入参数
-  props: {},
-  // 自定义事件
-  emits: {},
-  // 数据
-  data() {
-    return {
-      graph: null,
-      color: {
-        red: '#b30461',
-        yellow: '#cbaa07'
-      },
-      data: [
-        {
-          id: 'M111',
-          x: 912.5,
-          y: 175,
-          type: 'switch',
-          state: 0,
-          direction: 'top'
-        },
-        {
-          id: 'M101',
-          x: 803,
-          y: 299,
-          type: 'switch',
-          state: 0,
-          direction: 'top'
-        },
-        {
-          id: 'M102',
-          x: 1023,
-          y: 299,
-          type: 'switch',
-          state: 0,
-          direction: 'top'
-        },
-        {
-          id: 'M301',
-          x: 803,
-          y: 380,
-          type: 'switch',
-          state: 1,
-          direction: 'top'
-        },
-        {
-          id: 'M302',
-          x: 1023,
-          y: 380,
-          type: 'switch',
-          state: 1,
-          direction: 'top'
-        },
-        {
-          id: 'M314',
-          x: 738,
-          y: 497,
-          type: 'switch',
-          state: 1,
-          direction: 'top'
-        },
-        {
-          id: 'M315',
-          x: 803,
-          y: 497,
-          type: 'switch',
-          state: 0,
-          direction: 'top'
-        },
-        {
-          id: 'M323',
-          x: 868,
-          y: 497,
-          type: 'switch',
-          state: 1,
-          direction: 'top'
-        },
-        {
-          id: 'M322',
-          x: 1023,
-          y: 497,
-          type: 'switch',
-          state: 0,
-          direction: 'top'
-        }
-      ],
-      labels: [
-        {
-          id: 'mmx',
-          shape: 'tag-text-r',
-          x: 862,
-          y: 50,
-          label: '南风线'
-        },
-        {
-          id: '110kvmx',
-          shape: 'simple-text',
-          x: 772.5,
-          y: 200,
-          label: '110kV 母线'
-        },
-        {
-          id: '35kv1mx',
-          shape: 'simple-text',
-          x: 724,
-          y: 408,
-          label: '35kV I母线'
-        },
-        {
-          id: '35kv2mx',
-          shape: 'simple-text-r',
-          x: 1102,
-          y: 408,
-          label: '35kV II母线'
-        },
-        {
-          id: 'L111',
-          shape: 'simple-text',
-          x: 930,
-          y: 155,
-          label: '111'
-        },
-        {
-          id: 'L102',
-          shape: 'simple-text',
-          x: 1040,
-          y: 278,
-          label: '102'
-        },
-        {
-          id: 'L302',
-          shape: 'simple-text',
-          x: 1040,
-          y: 358,
-          label: '302'
-        },
-        {
-          id: 'L101',
-          shape: 'simple-text-r',
-          x: 785,
-          y: 278,
-          label: '101'
-        },
-        {
-          id: 'L301',
-          shape: 'simple-text-r',
-          x: 785,
-          y: 358,
-          label: '301'
-        },
-        {
-          id: 'L314',
-          shape: 'simple-text-r',
-          x: 725,
-          y: 470,
-          label: '314'
-        },
-        {
-          id: 'L315',
-          shape: 'simple-text-r',
-          x: 790,
-          y: 470,
-          label: '315'
-        },
-        {
-          id: 'L323',
-          shape: 'simple-text-r',
-          x: 850,
-          y: 470,
-          label: '323'
-        },
-        {
-          id: 'L322',
-          shape: 'simple-text-r',
-          x: 1005,
-          y: 470,
-          label: '322'
-        },
-        {
-          id: 'zb_1',
-          shape: 'tag-text-s',
-          x: 680,
-          y: 320,
-          label: '#1主变'
-        },
-        {
-          id: 'zb_2',
-          shape: 'tag-text-s',
-          x: 1080,
-          y: 320,
-          label: '#2主变'
-        },
-        {
-          id: 'jddl_1',
-          shape: 'tag-text',
-          x: 90,
-          y: 555,
-          label: '#1集电线路'
-        },
-        {
-          id: 'jddl_3',
-          shape: 'tag-text',
-          x: 1640,
-          y: 555,
-          label: '#4集电线路'
-        },
-        {
-          id: 'jddl_2',
-          shape: 'tag-text',
-          x: 90,
-          y: 815,
-          label: '#2集电线路'
-        },
-        {
-          id: 'jddl_4',
-          shape: 'tag-text',
-          x: 1640,
-          y: 815,
-          label: '#3集电线路'
-        }
-      ],
-      fans: [
-        {
-          id: '001',
-          shape: 'fan-blue',
-          x: 90,
-          y: 510,
-          label: '001'
-        },
-        {
-          id: '002',
-          shape: 'fan-gray',
-          x: 140,
-          y: 510,
-          label: '002'
-        },
-        {
-          id: '003',
-          shape: 'fan-orange',
-          x: 190,
-          y: 510,
-          label: '003'
-        },
-        {
-          id: '004',
-          shape: 'fan-red',
-          x: 240,
-          y: 510,
-          label: '004'
-        },
-        {
-          id: '005',
-          shape: 'fan-green',
-          x: 290,
-          y: 510,
-          label: '005'
-        },
-        {
-          id: '006',
-          shape: 'fan-green',
-          x: 340,
-          y: 510,
-          label: '006'
-        },
-        {
-          id: '007',
-          shape: 'fan-green',
-          x: 390,
-          y: 510,
-          label: '007'
-        },
-        {
-          id: '008',
-          shape: 'fan-green',
-          x: 440,
-          y: 510,
-          label: '008'
-        },
-        {
-          id: '009',
-          shape: 'fan-green',
-          x: 490,
-          y: 510,
-          label: '009'
-        },
-        {
-          id: '010',
-          shape: 'fan-green',
-          x: 540,
-          y: 510,
-          label: '010'
-        },
-        {
-          id: '011',
-          shape: 'fan-green',
-          x: 590,
-          y: 510,
-          label: '011'
-        },
-
-        {
-          id: '012',
-          shape: 'fan-green',
-          x: 90,
-          y: 770,
-          label: '012'
-        },
-        {
-          id: '013',
-          shape: 'fan-green',
-          x: 140,
-          y: 770,
-          label: '013'
-        },
-        {
-          id: '014',
-          shape: 'fan-green',
-          x: 190,
-          y: 770,
-          label: '014'
-        },
-        {
-          id: '015',
-          shape: 'fan-green',
-          x: 240,
-          y: 770,
-          label: '015'
-        },
-        {
-          id: '016',
-          shape: 'fan-green',
-          x: 290,
-          y: 770,
-          label: '016'
-        },
-        {
-          id: '017',
-          shape: 'fan-green',
-          x: 340,
-          y: 770,
-          label: '017'
-        },
-        {
-          id: '018',
-          shape: 'fan-green',
-          x: 390,
-          y: 770,
-          label: '018'
-        },
-        {
-          id: '019',
-          shape: 'fan-green',
-          x: 440,
-          y: 770,
-          label: '019'
-        },
-        {
-          id: '020',
-          shape: 'fan-green',
-          x: 490,
-          y: 770,
-          label: '020'
-        },
-        {
-          id: '021',
-          shape: 'fan-green',
-          x: 540,
-          y: 770,
-          label: '021'
-        },
-        {
-          id: '022',
-          shape: 'fan-green',
-          x: 590,
-          y: 770,
-          label: '022'
-        },
-
-        {
-          id: '034',
-          shape: 'fan-green',
-          x: 1200,
-          y: 510,
-          label: '034'
-        },
-        {
-          id: '035',
-          shape: 'fan-green',
-          x: 1250,
-          y: 510,
-          label: '035'
-        },
-        {
-          id: '036',
-          shape: 'fan-green',
-          x: 1300,
-          y: 510,
-          label: '036'
-        },
-        {
-          id: '037',
-          shape: 'fan-green',
-          x: 1350,
-          y: 510,
-          label: '037'
-        },
-        {
-          id: '038',
-          shape: 'fan-green',
-          x: 1400,
-          y: 510,
-          label: '038'
-        },
-        {
-          id: '039',
-          shape: 'fan-green',
-          x: 1450,
-          y: 510,
-          label: '039'
-        },
-        {
-          id: '040',
-          shape: 'fan-green',
-          x: 1500,
-          y: 510,
-          label: '040'
-        },
-        {
-          id: '041',
-          shape: 'fan-green',
-          x: 1550,
-          y: 510,
-          label: '041'
-        },
-        {
-          id: '042',
-          shape: 'fan-green',
-          x: 1600,
-          y: 510,
-          label: '042'
-        },
-        {
-          id: '043',
-          shape: 'fan-green',
-          x: 1650,
-          y: 510,
-          label: '043'
-        },
-       
-
-        // {
-        //     id: "fanA23-m",
-        //     shape: "fan-green",
-        //     x: 1150,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA24-m",
-        //     shape: "fan-green",
-        //     x: 1200,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA25-m",
-        //     shape: "fan-green",
-        //     x: 1250,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA26-m",
-        //     shape: "fan-green",
-        //     x: 1300,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA27-m",
-        //     shape: "fan-green",
-        //     x: 1350,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA28-m",
-        //     shape: "fan-green",
-        //     x: 1400,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA29-m",
-        //     shape: "fan-green",
-        //     x: 1450,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA31-m",
-        //     shape: "fan-green",
-        //     x: 1600,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA32-m",
-        //     shape: "fan-green",
-        //     x: 1650,
-        //     y: 640,
-        //     label: "A01",
-        // },{
-        //     id: "fanA33-m",
-        //     shape: "fan-green",
-        //     x: 1700,
-        //     y: 640,
-        //     label: "A01",
-        // },
-
-        {
-          id: '023',
-          shape: 'fan-green',
-          x: 1100,
-          y: 770,
-          label: '023'
-        },
-        {
-          id: '024',
-          shape: 'fan-green',
-          x: 1150,
-          y: 770,
-          label: '024'
-        },
-        {
-          id: '025',
-          shape: 'fan-green',
-          x: 1200,
-          y: 770,
-          label: '025'
-        },
-        {
-          id: '026',
-          shape: 'fan-green',
-          x: 1250,
-          y: 770,
-          label: '026'
-        },
-        {
-          id: '027',
-          shape: 'fan-green',
-          x: 1300,
-          y: 770,
-          label: '027'
-        },
-        {
-          id: '028',
-          shape: 'fan-green',
-          x: 1350,
-          y: 770,
-          label: '028'
-        },
-        {
-          id: '029',
-          shape: 'fan-green',
-          x: 1400,
-          y: 770,
-          label: '029'
-        },
-        {
-          id: '030',
-          shape: 'fan-green',
-          x: 1450,
-          y: 770,
-          label: '030'
-        },
-        {
-          id: '031',
-          shape: 'fan-green',
-          x: 1500,
-          y: 770,
-          label: '031'
-        },
-        {
-          id: '032',
-          shape: 'fan-green',
-          x: 1550,
-          y: 770,
-          label: '032'
-        },
-        {
-          id: '033',
-          shape: 'fan-green',
-          x: 1600,
-          y: 770,
-          label: '033'
-        }
-      ]
-    }
-  },
-  // 函数
-  methods: {
-    requestPower(showLoading) {
-      let that = this;
-      that.API.requestData({
-        showLoading,
-        method: "POST",
-        subUrl: "monitor/findGeneralAppearance",
-        data: {
-          wpId: that.wpId,
-        },
-        success(res) {
-          res.data.fjmap[0].forEach((e) => {
-            that.fans.forEach(i=>{
-              if(e.wtnum == i.id){
-                   if(e.fjzt=0)
-                   {
-                      i.shape ='fan-green'
-                   }else  if(e.fjzt=1)
-                   {
-                      i.shape ='fan-blue'
-                   }else  if(e.fjzt=2)
-                   {
-                      i.shape ='fan-red'
-                   }else  if(e.fjzt=3)
-                   {
-                      i.shape ='fan-gray'
-                   }else  if(e.fjzt=4)
-                   {
-                      i.shape ='fan-orange'
-                   }else  if(e.fjzt=5)
-                   {
-                      i.shape ='fan-green'
-                   }else  if(e.fjzt=6)
-                   {
-                      i.shape ='fan-green'
-                   }
-                 
-                }
-            });
-          });
-
-        },
-      });
-    },
-    initGraph: function() {
-      this.graph = new Graph({
-        container: this.$el, // 画布的容器
-        // width: undefined, // 默认使用容器宽度
-        // height: undefined, // 默认使用容器高度
-        autoResize: true, // boolean | Element | Document 是否监听容器大小改变，并自动更新画布大小 默认监听画布容器，也可以指定监听的元素
-        mousewheel: {
-          enabled: true,
-          modifiers: []
-        },
-        scroller: {
-          enabled: true,
-          pannable: true
-        },
-        interacting: false
-      })
-      this.graph.zoomTo(0.8)
-    },
-    initData: function() {
-      const data = {
-        nodes: [
-          {
-            id: 'back-line1',
-            x: 80,
-            y: 400,
-            shape: 'path',
-            attrs: {
-              body: {
-                d: `M942.9,99.76v44.39H1666
-                                M788,99.76V400.3c1.81,1.53,3.69,1.21,5.49,1.21H1666
-                                M723,99.76V401.51H1
-                                M658.11,99.76v44.39H1
-                                M803.52,34.42H643.62
-                                M1023.39,34.42H863.49
-                                M723.07,-19V33.42
-                                M942.94,-19V33.42
-                                M658.11,35.91V66.84
-                                M723,35.91V66.84
-                                M788,35.91V66.84
-                                M942.9,35.91V66.84`,
-                fill: 'transparent',
-                stroke: '#cbaa07',
-                'stroke-width': 3
-              }
-            },
-            movable: false
-          },
-          {
-            id: 'back-line2',
-            x: 772.5,
-            y: 100,
-            shape: 'path',
-            attrs: {
-              body: {
-                d: `M281,123.82H1
-                                M140,75v49
-                                M140,1V48.73
-                                M30.4,125.31v47
-                                M249.63,125.31v47`,
-                            fill: "transparent",
-                            stroke: "#b30461",
-                            "stroke-width": 3,
-                        },
-                    },
-                    movable: false,
-                },{
-                    id: "main-change-1",
-                    x: 803,
-                    y: 300,
-                    shape: "main-change",
-                    movable: false,
-                },{
-                    id: "main-change-2",
-                    x: 1023,
-                    y: 300,
-                    shape: "main-change",
-                    movable: false,
-                },{
-                    id: "top-arrow",
-                    x: 912.5,
-                    y: 86,
-                    shape: "arrow-vertical-top-left",
-                    attrs: {
-                        line: {
-                            height: 0,
-                        },
-                        arrow: {
-                            fill: "#b30461",
-                            refY: 0,
-                        }
-                    },
-                    movable: false,
-                }] 
-            };
-            this.data.forEach(item => {
-                switch (item.type) {
-                    case "switch":
-                        item.shape = `switch-${item.state == 0 ? 'break' : 'close'}`
-                        break;
-                    case "handcart":
-                        item.shape = `handcart${item.state1}${item.state2}`
-                        break;
-                    default:
-                        break;
-                }
-                let shape = `${item.shape}-${item.direction}`;
-                let node = {
-                    id: item.id,
-                    x: item.x,
-                    y: item.y,
-                    shape: shape,
-                    movable: false,
-                }
-                data.nodes.push(node);
-            })
-            this.labels.forEach(item => {
-                let node = {
-                    id: item.id,
-                    x: item.x,
-                    y: item.y,
-                    shape: item.shape,
-                    attrs: {
-                        label: {
-                            text: item.label,
-                        },
-                    },
-                    movable: false,
-                }
-                switch (item.shape) {
-                    case "form-text":
-                        node.attrs.value = {
-                            text: item.value,
-                        }
-                        break;
-                
-                    default:
-                        break;
-                }
-                data.nodes.push(node);
-            })
-            this.fans.forEach(item => {
-                let node = {
-                    id: item.id,
-                    x: item.x,
-                    y: item.y,
-                    shape: item.shape,
-                    attrs: {
-                        label: {
-                            text: item.label,
-                        },
-                    },
-                    movable: false,
-                }
-                data.nodes.push(node);
-            })
-            this.graph.fromJSON(data);
-            this.graph.centerContent();
-            setTimeout(() => {
-                this.changeFanNodeById("fanA06", "fan-purple", "A01");
-                setTimeout(() => {
-                    this.changeFanNodeById("fanA06", "fan-white", "A01");
-                    setTimeout(() => {
-                        this.changeFanNodeById("fanA06", "fan-purple-stop", "A01");
-                    }, 2000);
-                }, 2000);
-            }, 2000);
-        },
-        // 通过id修改风机节点 fan-green fan-gray fan-blue fan-orange fan-red fan-purple fan-purple-stop fan-white
-        changeFanNodeById: function (id, shape, label) {
-            var view = this.graph.getMountedViews();
-            var node = view.find(t => t.cell.id == id);
-            node.cell.remove();
-            var cell = this.graph.createNode({
-                id: id,
-                shape: shape,
-                x: node.cell.position().x,
-                y: node.cell.position().y,
-                attrs: {
-                    label: {
-                        text: label,
-                    },
-                },
-            });
-            this.graph.addCell(cell);
-        },
-        initX6: function () {
-            // 注册自定义节点
-            customNode.register();
-            this.initGraph();
-            this.initData();
-        },
-    },
-    // 生命周期钩子
-    beforeCreate() {
-        // 创建前
-    },
-    created() {
-        // 创建后
-    },
-    beforeMount() {
-        // 渲染前
-    },
-    mounted() {
-        // 渲染后
-        this.initX6();
-    },
-    beforeUpdate() {
-        // 数据更新前
-    },
-    initX6: function() {
-      // 注册自定义节点
-      customNode.register()
-      this.initGraph()
-      this.initData()
-    
-  },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-    this.initX6()
-    this.wpId = this.$route.params.wpId;
-    this.requestPower(false);
-  },
-  watch: {
-    $route(res) {
-      console.warn("router变化");
-      this.wpId = res.params.wpId;
-      this.requestPower(false);
-
-    },
-  },
-  beforeUpdate() {
-    // 数据更新前
-  },
-  updated() {
-    // 数据更新后
-  }
-}
-</script>
-
-<style lang="less" scoped>
-</style>

src/views/WindSite/components/generalappearance/xh/previewPicture.vue

@@ -1,732 +0,0 @@
-<template>
-  <div class="pop-up-main">
-    <div class="paln-box">
-      <div
-        class="movableItem"
-        :style="{ width: width, height: height }"
-        @mousewheel="rollImg($event)"
-        @mousedown="drag($event, 1)"
-        ref="bigImage"
-      >
-        <!-- 图片不可选中 或不可拖拽到新标签打开-->
-        <slot
-          name="svg"
-          oncontextmenu="return false;"
-          onselectstart="return false;"
-          draggable="false"
-        ></slot>
-        <template v-if="isEdit && iconWidth">
-          <img
-            ref="signImage"
-            :src="iconImgUrl"
-            @mousedown="dragSign($event, key)"
-            v-for="(item, key) in equipment"
-            :key="key"
-            :style="{
-              top: equipment[key].top + '%',
-              left: equipment[key].left + '%',
-              width: iconWidth,
-              height: iconHeight,
-            }"
-            class="equipment"
-          />
-        </template>
-        <el-popover
-          width="200"
-          placement="bottom-start"
-          trigger="hover"
-          :close-delay="100"
-          content="暂无描述"
-          v-else-if="!isEdit && iconWidth && arrIcon.length == equipment.length"
-          v-for="(item, key) in equipment"
-          :key="key"
-          popper-class="preview-popover"
-        >
-          <!-- &&arrIcon.length==equipment.length -->
-          <template>
-            <div v-if="equipment[key].describe" class="describe">
-              <p class="describe-top">
-                {{ equipment[key].describe.deviceName }}
-              </p>
-              <p class="describe-center">
-                {{ equipment[key].describe.remark }}
-              </p>
-              <p class="describe-bottom">
-                {{ equipment[key].describe.location }}
-              </p>
-            </div>
-          </template>
-          <!-- <img oncontextmenu="return false;" onselectstart="return false;" draggable="false" slot="reference"
-						ref="signImage" :src="$baseUrl + equipment[key].iconImgUrl"
-						:style="{top:equipment[key].top+'%',left:equipment[key].left+'%',width:arrIcon[key].iconWidth,height:arrIcon[key].iconHeight}"
-						class="equipment" /> -->
-        </el-popover>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    equipment: {
-      type: Array,
-      default: () => {
-        return [
-          {
-            iconImgUrl: "",
-            top: 0,
-            left: 0,
-          },
-        ];
-      },
-    },
-    isEdit: {
-      default: false,
-    },
-    imgUrl: {},
-  },
-
-  data() {
-    return {
-      // 定时器
-      timer: "",
-      // 图片加载失败
-      imgOnerror: false,
-      imgIndex: 0,
-      isChange: true,
-      // 图片显示默认大小
-      width: "1400px",
-      height: "0px",
-      // 可缩小倍数,为空则可无限缩小
-      minification: 3,
-      // 可放大倍数 为空则可无限放大
-      magnification: "",
-      bigMaxWidth: 1600,
-      bigMaxHeight: 800,
-
-      // 小图标信息
-      iconImgUrl: "",
-      iconWidth: "",
-      // 存储每个小图标处理好的宽高
-      iconHeight: "",
-      arrIcon: [],
-      iconMaxWidth: 32,
-      iconMaxHeight: 32,
-      tog: 1,
-    };
-  },
-  methods: {
-    // 获取图片大小
-    getImgInfo(
-      imgUrl,
-      MaxWidth,
-      MaxHeight,
-      StrWidth,
-      StrHeight,
-      Array = false,
-      arr,
-      num = 0
-    ) {
-      var img = new Image();
-
-      // img.src = imgUrl;
-      img = document.getElementsByClassName("svg");
-      let _this = this;
-      img.onerror = () => {
-        // console.log("加载失败！！", _this.arrIcon.length);
-        // console.log(imgUrl, MaxWidth, MaxHeight, StrWidth, StrHeight);
-        _this.imgOnerror = true;
-        _this.imgIndex =
-          _this.arrIcon.length - 1 < 0 ? 0 : _this.arrIcon.length - 1;
-        this.timer = setTimeout(() => {
-          if (num <= 5) {
-            _this.getImgInfo(
-              imgUrl,
-              MaxWidth,
-              MaxHeight,
-              StrWidth,
-              StrHeight,
-              Array,
-              arr,
-              num + 1
-            );
-          }
-          clearInterval(this.timer);
-        }, 2000);
-      };
-      img.onload = function (e) {
-        //  显示时 初始 最大宽度
-        let maxWidth = MaxWidth;
-        //  显示时 初始 最大高度
-        let maxHeight = MaxHeight;
-        if (
-          e.path[0].naturalWidth <= maxWidth &&
-          e.path[0].naturalHeight <= maxHeight
-        ) {
-          _this[StrWidth] = e.path[0].naturalWidth + "px";
-          _this[StrHeight] = e.path[0].naturalHeight + "px";
-        } else {
-          _this[StrWidth] = e.path[0].naturalWidth + "px";
-          _this[StrHeight] = e.path[0].naturalHeight + "px";
-          if (
-            e.path[0].naturalWidth > maxWidth &&
-            e.path[0].naturalHeight <= maxHeight
-          ) {
-            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
-            _this[StrWidth] = "1600px";
-            _this[StrHeight] = maxWidth / ratio + "px";
-          } else if (
-            e.path[0].naturalWidth <= maxWidth &&
-            e.path[0].naturalHeight > maxHeight
-          ) {
-            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
-            _this[StrWidth] = maxHeight * ratio + "px";
-            _this[StrHeight] = "800px";
-          } else if (
-            e.path[0].naturalWidth > maxWidth &&
-            e.path[0].naturalHeight > maxHeight
-          ) {
-            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
-            let w = maxWidth;
-            let h = w / ratio;
-            if (h > maxHeight) {
-              let ratio2 = w / h;
-              h = maxHeight;
-              w = h * ratio2;
-            }
-            _this[StrWidth] = w + "px";
-            _this[StrHeight] = h + "px";
-          }
-        }
-        if (Array) {
-          _this[arr].push({
-            iconWidth: _this[StrWidth],
-            iconHeight: _this[StrHeight],
-          });
-          // console.log(
-          // 	"tow#################################arrIcon",
-          // 	_this[arr].length
-          // );
-        }
-        // _this[StrWidth] = `${e.path[0].naturalWidth}px`;
-        // _this[StrHeight] = `${e.path[0].naturalHeight}px`;
-        // vm.$set(vm.imgInfo, "width", img.width);
-        // vm.$set(vm.imgInfo, "height", img.height);
-        // console.log("打印图片信息", imgUrl, _this[StrWidth], _this[StrHeight]); // 打印图片信息
-
-        // console.log("打印图片信息", e.path[0].naturalHeight); // 打印图片信息
-        // console.log("打印图片信息", e); // 打印图片信息
-        // console.log("打印图片信息this.width", _this[StrWidth]); // 打印图片信息
-        // console.log("打印图片信息this.height", _this[StrHeight]); // 打印图片信息
-      };
-    },
-    // 缩放
-    rollImg() {
-      var that = this;
-      // var oImg = document.getElementsByClassName("movableItem")[0];
-      var oImg = this.$refs.bigImage;
-      // console.log(
-      // 	"length",
-      // 	document.getElementsByClassName("movableItem").length
-      // );
-      // console.log("oImg", oImg);
-      var _this = this;
-
-      function fnWheel(obj, fncc) {
-        obj.onmousewheel = fn;
-        if (obj.addEventListener) {
-          obj.addEventListener("DOMMouseScroll", fn, false);
-        }
-
-        function fn(ev) {
-          var oEvent = ev || window.event;
-          var down = true;
-          if (oEvent.detail) {
-            down = oEvent.detail > 0;
-          } else {
-            down = oEvent.wheelDelta < 0;
-          }
-          if (fncc) {
-            fncc.call(this, down, oEvent);
-          }
-          if (oEvent.preventDefault) {
-            oEvent.preventDefault();
-          }
-          return false;
-        }
-      }
-      fnWheel(oImg, function (down, oEvent) {
-        var oldWidth = this.offsetWidth;
-        var oldHeight = this.offsetHeight;
-        var oldLeft = this.offsetLeft;
-        var oldTop = this.offsetTop;
-        var parent = oEvent.path[2];
-        // 获取父元素距离页面可视区域的位置
-        var parentLeft = parent.getBoundingClientRect().left;
-        var parentTop = parent.getBoundingClientRect().top;
-        // 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的left）/ 本身宽度
-        var scaleX = (oEvent.clientX - parentLeft - oldLeft) / oldWidth; //比例
-        var scaleY = (oEvent.clientY - parentTop - oldTop) / oldHeight;
-
-        let nowWidth = this.style.width.split("p")[0];
-        let initWidth = _this.width.split("p")[0];
-        let initHeight = _this.height.split("p")[0];
-
-        let miniFlag = true;
-        let magniFlag = true;
-        if (_this.minification) {
-          // 限制缩小范围
-          if (nowWidth <= parseInt(initWidth / _this.minification)) {
-            miniFlag = false;
-            // console.log("限制缩小范围");
-            // console.log(
-            // 	"限制缩小范围",
-            // 	nowWidth,
-            // 	parseInt(initWidth / _this.minification)
-            // );
-            this.style.width = parseInt(initWidth / _this.minification) + "px";
-            this.style.height =
-              parseInt(initHeight / _this.minification) + "px";
-          }
-          if (_this.magnification) {
-            // 限制放大范围
-            if (nowWidth >= parseInt(initWidth * _this.magnification)) {
-              magniFlag = false;
-              // console.log("限制放大范围");
-              this.style.width =
-                parseInt(initWidth * _this.magnification) + "px";
-              this.style.height =
-                parseInt(initHeight * _this.magnification) + "px";
-            }
-          }
-        }
-
-        if (down && miniFlag) {
-          // console.log("缩小");
-          this.style.width = parseInt(this.offsetWidth * 0.9) + "px";
-          this.style.height = parseInt(this.offsetHeight * 0.9) + "px";
-
-          that.width = parseInt(this.offsetWidth * 0.9) + "px";
-          that.height = parseInt(this.offsetHeight * 0.9) + "px";
-        } else if (!down && magniFlag) {
-          // console.log("放大");
-          this.style.width = parseInt(this.offsetWidth * 1.1) + "px";
-          this.style.height = parseInt(this.offsetHeight * 1.1) + "px";
-          that.width = parseInt(this.offsetWidth * 1.1) + "px";
-          that.height = parseInt(this.offsetHeight * 1.1) + "px";
-        }
-        var newWidth = this.offsetWidth;
-        var newHeight = this.offsetHeight;
-
-        // 新的相对位置left = 原先的相对位置left - 比例 *（本身新的宽度-旧的宽度）
-        this.style.left =
-          Math.round(this.offsetLeft - scaleX * (newWidth - oldWidth)) + "px";
-        this.style.top =
-          Math.round(this.offsetTop - scaleY * (newHeight - oldHeight)) + "px";
-      });
-      // console.log(that.width)
-    },
-    // },
-    //拖拽
-    drag(ev) {
-      // var ie = document.all;
-      // console.log(ev / 0);
-
-      var nn6 = document.getElementById && !document.all;
-      var isdrag = false;
-      var y, x;
-      var nTY, nTX;
-      var oDragObj;
-
-      function moveMouse(e) {
-        if (isdrag) {
-          oDragObj.style.top =
-            (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
-          oDragObj.style.left =
-            (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
-          return false;
-        }
-      }
-
-      function initDrag(e) {
-        // console.log("点击图片initDrag");
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className != "movableItem"
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className == "movableItem") {
-          isdrag = true;
-          oDragObj = oDragHandle;
-          // 父元素宽高
-          let width = e.path[2].offsetWidth;
-          let height = e.path[2].offsetHeight;
-          // 这里判断第一次获取不到style 样式 默认为 居中50%
-          if (oDragObj.style.top == "") {
-            // nTY = parseInt((50 * height) / 100 + 0);
-            nTY = 0;
-            nTX = parseInt((50 * width) / 100 + 0);
-          } else {
-            nTY = parseInt(oDragObj.style.top + 0);
-            nTX = parseInt(oDragObj.style.left + 0);
-          }
-          y = nn6 ? e.clientY : event.clientY;
-          x = nn6 ? e.clientX : event.clientX;
-          oDragObj.style.cursor = "move";
-          document.onmousemove = moveMouse;
-          return false;
-        }
-      }
-      document.onmousemove = initDrag;
-      // document.onmouseup = new Function("isdrag=false");
-      document.onmouseup = function (e) {
-        isdrag = false;
-        document.onmousemove = null;
-        document.onmouseup = null;
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className != "movableItem"
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className == "movableItem") {
-          oDragObj = oDragHandle;
-          oDragObj.style.cursor = "Default";
-        }
-      };
-      ev = event || window.event;
-
-      // 取消事件冒泡行为
-      // window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
-    },
-    // 拖拽标记
-    // eslint-disable-next-line no-unused-vars
-    dragSign(ev, key) {
-      var nn6 = document.getElementById && !document.all;
-      var isdrag = false;
-      var y, x;
-      var nTY, nTX;
-      var oDragObj;
-      let _this = this;
-
-      function moveMouse(e) {
-        if (isdrag) {
-          this.equipmentKey = key;
-          // console.log("thisequipmentKey", this.equipmentKey);
-
-          let widthItem = e.path[1].style.width.split("p");
-          let heightItem = e.path[1].style.height.split("p");
-          let width = widthItem[0];
-          // eslint-disable-next-line no-unused-vars
-          let height = heightItem[0];
-          let top =
-            ((nn6
-              ? (nTY / 100) * height + e.clientY - y
-              : (nTY / 100) * height + event.clientY - y) /
-              height) *
-            100;
-          let left =
-            ((nn6
-              ? (nTX / 100) * width + e.clientX - x
-              : (nTX / 100) * width + event.clientX - x) /
-              width) *
-            100;
-
-          if (top >= 0 && top <= 100) {
-            _this.equipment[key].top = top;
-          }
-          if (left >= 0 && left <= 100) {
-            _this.equipment[key].left = left;
-          }
-
-          return false;
-        }
-      }
-      // eslint-disable-next-line no-unused-vars
-      function initDrag(e) {
-        // console.log("_this", _this);
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className.indexOf("equipment") == -1
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className.indexOf("equipment") != -1) {
-          isdrag = true;
-          oDragObj = oDragHandle;
-          // 父元素宽高
-          let width = e.path[1].offsetWidth;
-          let height = e.path[1].offsetHeight;
-          // console.log(width, height);
-          console.log("oDragObj.style", oDragObj.style);
-          // 这里判断第一次获取不到style 样式 默认为 居中50%
-          if (oDragObj.style.top == "") {
-            nTY = parseInt((50 * height) / 100 + 0);
-            nTX = parseInt((50 * width) / 100 + 0);
-          } else if (oDragObj.style.top.indexOf("%") != -1) {
-            nTY = oDragObj.style.top.split("%")[0];
-            nTX = oDragObj.style.left.split("%")[0];
-          } else {
-            nTY = parseInt(oDragObj.style.top + 0);
-            nTX = parseInt(oDragObj.style.left + 0);
-          }
-          y = nn6 ? e.clientY : event.clientY;
-          x = nn6 ? e.clientX : event.clientX;
-
-          oDragObj.style.cursor = "move";
-          document.onmousemove = moveMouse;
-          return false;
-        }
-      }
-
-      // document.onmousedown = initDrag;
-      document.onmousemove = initDrag;
-
-      document.onmouseup = function (e) {
-        isdrag = false;
-        document.onmousemove = null;
-        document.onmouseup = null;
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className != "equipment"
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className == "equipment") {
-          oDragObj = oDragHandle;
-          oDragObj.style.cursor = "Default";
-        }
-      };
-
-      // _this.equipmentKey = key;
-      // _this.equipment[_this.equipmentKey].left = l;
-      // _this.equipment[_this.equipmentKey].top = t;
-      ev = event || window.event;
-
-      // 取消事件冒泡行为
-      window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
-    },
-  },
-
-  watch: {
-    equipment() {
-      if (this.equipment.length != 0) {
-        this.arrIcon = [];
-        let finish = true;
-        this.equipment.filter((item) => {
-          if (!item.iconImgUrl) {
-            finish = false;
-          }
-          return true;
-        });
-        console.log("finish", finish);
-        if (finish) {
-          this.equipment.filter((item, index) => {
-            if (index >= this.imgIndex) {
-              console.log("iconImgUrl", this.equipment[index].iconImgUrl);
-              this.getImgInfo(
-                this.$baseUrl + item.iconImgUrl,
-                this.iconMaxWidth,
-                this.iconMaxHeight,
-                "iconWidth",
-                "iconHeight",
-                true,
-                "arrIcon"
-              );
-            }
-            // console.log("22filter", index);
-            return true;
-          });
-        }
-      }
-    },
-  },
-  created() {
-    this.getImgInfo(
-      this.imgUrl,
-      this.bigMaxWidth,
-      this.bigMaxHeight,
-      "width",
-      "height"
-    );
-    if (this.equipment.length != 0) {
-      this.arrIcon = [];
-      let finish = true;
-      this.equipment.filter((item) => {
-        if (!item.iconImgUrl) {
-          finish = false;
-        }
-        return true;
-      });
-      // console.log("finish", finish);
-      if (finish) {
-        this.equipment.filter((item, index) => {
-          if (index >= this.imgIndex) {
-            console.log("iconImgUrl", this.equipment[index].iconImgUrl);
-            this.getImgInfo(
-              this.$baseUrl + item.iconImgUrl,
-              this.iconMaxWidth,
-              this.iconMaxHeight,
-              "iconWidth",
-              "iconHeight",
-              true,
-              "arrIcon"
-            );
-          }
-          // console.log("22filter", index);
-          return true;
-        });
-      }
-    }
-
-    this.iconImgUrl = JSON.parse(
-      JSON.stringify(this.$baseUrl + this.equipment[0].iconImgUrl)
-    );
-    // console.log("imgUrl", this.imgUrl);
-    // console.log("equipment", this.equipment);
-    // //禁止鼠标右键
-    // document.oncontextmenu = function() {
-    //   return false;
-    // };
-  },
-};
-</script>
-<style lang="less">
-.preview-popover {
-  background-color: #d3edf7dd;
-  padding: 12px;
-
-  .popper__arrow::after {
-    border-bottom-color: #d3edf7dd !important;
-  }
-
-  .describe {
-    p {
-      padding-bottom: 5px;
-
-      &:last-child {
-        padding-bottom: 0px;
-      }
-    }
-
-    .describe-top {
-      // color: sandybrown;
-      // color: red;
-      color: rgb(21, 110, 110);
-    }
-
-    .describe-center {
-      color: rgb(79, 21, 206);
-    }
-
-    .describe-bottom {
-      color: rgb(30, 31, 29);
-    }
-  }
-}
-</style>
-<style lang="less" scoped>
-.pop-up-main {
-  width: 100%;
-  height: calc(100vh - 18vh);
-  overflow-y: hidden;
-
-  .paln-box {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .movableItem {
-      position: absolute;
-      // top: 75%;
-      left: 50%;
-      transform: translate(-50%, -10%);
-
-      img,
-      .svg {
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-      }
-
-      .equipment {
-        position: absolute;
-        top: 0;
-        left: 0;
-        transform: translate(-50%, -50%);
-        z-index: 2;
-        font-size: 40px;
-        // color: red;
-        // background: blue;
-        zoom: 1;
-      }
-    }
-
-    .shuaxin {
-      position: absolute;
-      z-index: 2;
-      font-size: 40px;
-      top: 20px;
-      left: 20px;
-      cursor: pointer;
-
-      &:hover {
-        color: yellowgreen;
-      }
-    }
-
-    .equipment {
-      color: white;
-    }
-
-    &/deep/.el-button {
-      z-index: 2;
-      position: absolute;
-      bottom: 60px;
-      right: 20px;
-      width: 60px;
-      height: 35px;
-
-      span {
-        display: inline-block;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-
-      i {
-        display: inline-block;
-        position: absolute;
-        top: 50%;
-        left: 25%;
-        transform: translate(-50%, -50%);
-      }
-    }
-  }
-}
-
-// body {
-// 		height: 100%;
-// 		overflow: hidden;
-// 		margin: 0;
-// 		padding: 0;
-// 	}
-</style>

src/views/WindSite/components/generalappearance/xs/xs.vue

@@ -5,7 +5,7 @@
         <previewPicture v-if="datas">
           <template v-slot:svg>
             <svg
-              clas="svg"
+              class="svg"
               version="1.0"
               id="图层_1"
               xmlns="http://www.w3.org/2000/svg"
@@ -7107,8 +7107,7 @@
   </div>
 </template>
 <script>
-import previewPicture from "./previewPicture.vue";
-// import { BoosterStation } from "./BoosterStation";
+import previewPicture from "../previewPicture.vue";
 export default {
   components: {
     previewPicture,

src/views/WindSite/components/generalappearance/xs/previewPicture.vue

@@ -1,732 +0,0 @@
-<template>
-  <div class="pop-up-main">
-    <div class="paln-box">
-      <div
-        class="movableItem"
-        :style="{ width: width, height: height }"
-        @mousewheel="rollImg($event)"
-        @mousedown="drag($event, 1)"
-        ref="bigImage"
-      >
-        <!-- 图片不可选中 或不可拖拽到新标签打开-->
-        <slot
-          name="svg"
-          oncontextmenu="return false;"
-          onselectstart="return false;"
-          draggable="false"
-        ></slot>
-        <template v-if="isEdit && iconWidth">
-          <img
-            ref="signImage"
-            :src="iconImgUrl"
-            @mousedown="dragSign($event, key)"
-            v-for="(item, key) in equipment"
-            :key="key"
-            :style="{
-              top: equipment[key].top + '%',
-              left: equipment[key].left + '%',
-              width: iconWidth,
-              height: iconHeight,
-            }"
-            class="equipment"
-          />
-        </template>
-        <el-popover
-          width="200"
-          placement="bottom-start"
-          trigger="hover"
-          :close-delay="100"
-          content="暂无描述"
-          v-else-if="!isEdit && iconWidth && arrIcon.length == equipment.length"
-          v-for="(item, key) in equipment"
-          :key="key"
-          popper-class="preview-popover"
-        >
-          <!-- &&arrIcon.length==equipment.length -->
-          <template>
-            <div v-if="equipment[key].describe" class="describe">
-              <p class="describe-top">
-                {{ equipment[key].describe.deviceName }}
-              </p>
-              <p class="describe-center">
-                {{ equipment[key].describe.remark }}
-              </p>
-              <p class="describe-bottom">
-                {{ equipment[key].describe.location }}
-              </p>
-            </div>
-          </template>
-          <!-- <img oncontextmenu="return false;" onselectstart="return false;" draggable="false" slot="reference"
-						ref="signImage" :src="$baseUrl + equipment[key].iconImgUrl"
-						:style="{top:equipment[key].top+'%',left:equipment[key].left+'%',width:arrIcon[key].iconWidth,height:arrIcon[key].iconHeight}"
-						class="equipment" /> -->
-        </el-popover>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    equipment: {
-      type: Array,
-      default: () => {
-        return [
-          {
-            iconImgUrl: "",
-            top: 0,
-            left: 0,
-          },
-        ];
-      },
-    },
-    isEdit: {
-      default: false,
-    },
-    imgUrl: {},
-  },
-
-  data() {
-    return {
-      // 定时器
-      timer: "",
-      // 图片加载失败
-      imgOnerror: false,
-      imgIndex: 0,
-      isChange: true,
-      // 图片显示默认大小
-      width: "1400px",
-      height: "0px",
-      // 可缩小倍数,为空则可无限缩小
-      minification: 3,
-      // 可放大倍数 为空则可无限放大
-      magnification: "",
-      bigMaxWidth: 1600,
-      bigMaxHeight: 800,
-
-      // 小图标信息
-      iconImgUrl: "",
-      iconWidth: "",
-      // 存储每个小图标处理好的宽高
-      iconHeight: "",
-      arrIcon: [],
-      iconMaxWidth: 32,
-      iconMaxHeight: 32,
-      tog: 1,
-    };
-  },
-  methods: {
-    // 获取图片大小
-    getImgInfo(
-      imgUrl,
-      MaxWidth,
-      MaxHeight,
-      StrWidth,
-      StrHeight,
-      Array = false,
-      arr,
-      num = 0
-    ) {
-      var img = new Image();
-
-      // img.src = imgUrl;
-      img = document.getElementsByClassName("svg");
-      let _this = this;
-      img.onerror = () => {
-        // console.log("加载失败！！", _this.arrIcon.length);
-        // console.log(imgUrl, MaxWidth, MaxHeight, StrWidth, StrHeight);
-        _this.imgOnerror = true;
-        _this.imgIndex =
-          _this.arrIcon.length - 1 < 0 ? 0 : _this.arrIcon.length - 1;
-        this.timer = setTimeout(() => {
-          if (num <= 5) {
-            _this.getImgInfo(
-              imgUrl,
-              MaxWidth,
-              MaxHeight,
-              StrWidth,
-              StrHeight,
-              Array,
-              arr,
-              num + 1
-            );
-          }
-          clearInterval(this.timer);
-        }, 2000);
-      };
-      img.onload = function (e) {
-        //  显示时 初始 最大宽度
-        let maxWidth = MaxWidth;
-        //  显示时 初始 最大高度
-        let maxHeight = MaxHeight;
-        if (
-          e.path[0].naturalWidth <= maxWidth &&
-          e.path[0].naturalHeight <= maxHeight
-        ) {
-          _this[StrWidth] = e.path[0].naturalWidth + "px";
-          _this[StrHeight] = e.path[0].naturalHeight + "px";
-        } else {
-          _this[StrWidth] = e.path[0].naturalWidth + "px";
-          _this[StrHeight] = e.path[0].naturalHeight + "px";
-          if (
-            e.path[0].naturalWidth > maxWidth &&
-            e.path[0].naturalHeight <= maxHeight
-          ) {
-            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
-            _this[StrWidth] = "1600px";
-            _this[StrHeight] = maxWidth / ratio + "px";
-          } else if (
-            e.path[0].naturalWidth <= maxWidth &&
-            e.path[0].naturalHeight > maxHeight
-          ) {
-            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
-            _this[StrWidth] = maxHeight * ratio + "px";
-            _this[StrHeight] = "800px";
-          } else if (
-            e.path[0].naturalWidth > maxWidth &&
-            e.path[0].naturalHeight > maxHeight
-          ) {
-            let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
-            let w = maxWidth;
-            let h = w / ratio;
-            if (h > maxHeight) {
-              let ratio2 = w / h;
-              h = maxHeight;
-              w = h * ratio2;
-            }
-            _this[StrWidth] = w + "px";
-            _this[StrHeight] = h + "px";
-          }
-        }
-        if (Array) {
-          _this[arr].push({
-            iconWidth: _this[StrWidth],
-            iconHeight: _this[StrHeight],
-          });
-          // console.log(
-          // 	"tow#################################arrIcon",
-          // 	_this[arr].length
-          // );
-        }
-        // _this[StrWidth] = `${e.path[0].naturalWidth}px`;
-        // _this[StrHeight] = `${e.path[0].naturalHeight}px`;
-        // vm.$set(vm.imgInfo, "width", img.width);
-        // vm.$set(vm.imgInfo, "height", img.height);
-        // console.log("打印图片信息", imgUrl, _this[StrWidth], _this[StrHeight]); // 打印图片信息
-
-        // console.log("打印图片信息", e.path[0].naturalHeight); // 打印图片信息
-        // console.log("打印图片信息", e); // 打印图片信息
-        // console.log("打印图片信息this.width", _this[StrWidth]); // 打印图片信息
-        // console.log("打印图片信息this.height", _this[StrHeight]); // 打印图片信息
-      };
-    },
-    // 缩放
-    rollImg() {
-      var that = this;
-      // var oImg = document.getElementsByClassName("movableItem")[0];
-      var oImg = this.$refs.bigImage;
-      // console.log(
-      // 	"length",
-      // 	document.getElementsByClassName("movableItem").length
-      // );
-      // console.log("oImg", oImg);
-      var _this = this;
-
-      function fnWheel(obj, fncc) {
-        obj.onmousewheel = fn;
-        if (obj.addEventListener) {
-          obj.addEventListener("DOMMouseScroll", fn, false);
-        }
-
-        function fn(ev) {
-          var oEvent = ev || window.event;
-          var down = true;
-          if (oEvent.detail) {
-            down = oEvent.detail > 0;
-          } else {
-            down = oEvent.wheelDelta < 0;
-          }
-          if (fncc) {
-            fncc.call(this, down, oEvent);
-          }
-          if (oEvent.preventDefault) {
-            oEvent.preventDefault();
-          }
-          return false;
-        }
-      }
-      fnWheel(oImg, function (down, oEvent) {
-        var oldWidth = this.offsetWidth;
-        var oldHeight = this.offsetHeight;
-        var oldLeft = this.offsetLeft;
-        var oldTop = this.offsetTop;
-        var parent = oEvent.path[2];
-        // 获取父元素距离页面可视区域的位置
-        var parentLeft = parent.getBoundingClientRect().left;
-        var parentTop = parent.getBoundingClientRect().top;
-        // 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的left）/ 本身宽度
-        var scaleX = (oEvent.clientX - parentLeft - oldLeft) / oldWidth; //比例
-        var scaleY = (oEvent.clientY - parentTop - oldTop) / oldHeight;
-
-        let nowWidth = this.style.width.split("p")[0];
-        let initWidth = _this.width.split("p")[0];
-        let initHeight = _this.height.split("p")[0];
-
-        let miniFlag = true;
-        let magniFlag = true;
-        if (_this.minification) {
-          // 限制缩小范围
-          if (nowWidth <= parseInt(initWidth / _this.minification)) {
-            miniFlag = false;
-            // console.log("限制缩小范围");
-            // console.log(
-            // 	"限制缩小范围",
-            // 	nowWidth,
-            // 	parseInt(initWidth / _this.minification)
-            // );
-            this.style.width = parseInt(initWidth / _this.minification) + "px";
-            this.style.height =
-              parseInt(initHeight / _this.minification) + "px";
-          }
-          if (_this.magnification) {
-            // 限制放大范围
-            if (nowWidth >= parseInt(initWidth * _this.magnification)) {
-              magniFlag = false;
-              // console.log("限制放大范围");
-              this.style.width =
-                parseInt(initWidth * _this.magnification) + "px";
-              this.style.height =
-                parseInt(initHeight * _this.magnification) + "px";
-            }
-          }
-        }
-
-        if (down && miniFlag) {
-          // console.log("缩小");
-          this.style.width = parseInt(this.offsetWidth * 0.9) + "px";
-          this.style.height = parseInt(this.offsetHeight * 0.9) + "px";
-
-          that.width = parseInt(this.offsetWidth * 0.9) + "px";
-          that.height = parseInt(this.offsetHeight * 0.9) + "px";
-        } else if (!down && magniFlag) {
-          // console.log("放大");
-          this.style.width = parseInt(this.offsetWidth * 1.1) + "px";
-          this.style.height = parseInt(this.offsetHeight * 1.1) + "px";
-          that.width = parseInt(this.offsetWidth * 1.1) + "px";
-          that.height = parseInt(this.offsetHeight * 1.1) + "px";
-        }
-        var newWidth = this.offsetWidth;
-        var newHeight = this.offsetHeight;
-
-        // 新的相对位置left = 原先的相对位置left - 比例 *（本身新的宽度-旧的宽度）
-        this.style.left =
-          Math.round(this.offsetLeft - scaleX * (newWidth - oldWidth)) + "px";
-        this.style.top =
-          Math.round(this.offsetTop - scaleY * (newHeight - oldHeight)) + "px";
-      });
-      // console.log(that.width)
-    },
-    // },
-    //拖拽
-    drag(ev) {
-      // var ie = document.all;
-      // console.log(ev / 0);
-
-      var nn6 = document.getElementById && !document.all;
-      var isdrag = false;
-      var y, x;
-      var nTY, nTX;
-      var oDragObj;
-
-      function moveMouse(e) {
-        if (isdrag) {
-          oDragObj.style.top =
-            (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
-          oDragObj.style.left =
-            (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
-          return false;
-        }
-      }
-
-      function initDrag(e) {
-        // console.log("点击图片initDrag");
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className != "movableItem"
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className == "movableItem") {
-          isdrag = true;
-          oDragObj = oDragHandle;
-          // 父元素宽高
-          let width = e.path[2].offsetWidth;
-          let height = e.path[2].offsetHeight;
-          // 这里判断第一次获取不到style 样式 默认为 居中50%
-          if (oDragObj.style.top == "") {
-            // nTY = parseInt((50 * height) / 100 + 0);
-            nTY = 0;
-            nTX = parseInt((50 * width) / 100 + 0);
-          } else {
-            nTY = parseInt(oDragObj.style.top + 0);
-            nTX = parseInt(oDragObj.style.left + 0);
-          }
-          y = nn6 ? e.clientY : event.clientY;
-          x = nn6 ? e.clientX : event.clientX;
-          oDragObj.style.cursor = "move";
-          document.onmousemove = moveMouse;
-          return false;
-        }
-      }
-      document.onmousemove = initDrag;
-      // document.onmouseup = new Function("isdrag=false");
-      document.onmouseup = function (e) {
-        isdrag = false;
-        document.onmousemove = null;
-        document.onmouseup = null;
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className != "movableItem"
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className == "movableItem") {
-          oDragObj = oDragHandle;
-          oDragObj.style.cursor = "Default";
-        }
-      };
-      ev = event || window.event;
-
-      // 取消事件冒泡行为
-      // window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
-    },
-    // 拖拽标记
-    // eslint-disable-next-line no-unused-vars
-    dragSign(ev, key) {
-      var nn6 = document.getElementById && !document.all;
-      var isdrag = false;
-      var y, x;
-      var nTY, nTX;
-      var oDragObj;
-      let _this = this;
-
-      function moveMouse(e) {
-        if (isdrag) {
-          this.equipmentKey = key;
-          // console.log("thisequipmentKey", this.equipmentKey);
-
-          let widthItem = e.path[1].style.width.split("p");
-          let heightItem = e.path[1].style.height.split("p");
-          let width = widthItem[0];
-          // eslint-disable-next-line no-unused-vars
-          let height = heightItem[0];
-          let top =
-            ((nn6
-              ? (nTY / 100) * height + e.clientY - y
-              : (nTY / 100) * height + event.clientY - y) /
-              height) *
-            100;
-          let left =
-            ((nn6
-              ? (nTX / 100) * width + e.clientX - x
-              : (nTX / 100) * width + event.clientX - x) /
-              width) *
-            100;
-
-          if (top >= 0 && top <= 100) {
-            _this.equipment[key].top = top;
-          }
-          if (left >= 0 && left <= 100) {
-            _this.equipment[key].left = left;
-          }
-
-          return false;
-        }
-      }
-      // eslint-disable-next-line no-unused-vars
-      function initDrag(e) {
-        // console.log("_this", _this);
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className.indexOf("equipment") == -1
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className.indexOf("equipment") != -1) {
-          isdrag = true;
-          oDragObj = oDragHandle;
-          // 父元素宽高
-          let width = e.path[1].offsetWidth;
-          let height = e.path[1].offsetHeight;
-          // console.log(width, height);
-          console.log("oDragObj.style", oDragObj.style);
-          // 这里判断第一次获取不到style 样式 默认为 居中50%
-          if (oDragObj.style.top == "") {
-            nTY = parseInt((50 * height) / 100 + 0);
-            nTX = parseInt((50 * width) / 100 + 0);
-          } else if (oDragObj.style.top.indexOf("%") != -1) {
-            nTY = oDragObj.style.top.split("%")[0];
-            nTX = oDragObj.style.left.split("%")[0];
-          } else {
-            nTY = parseInt(oDragObj.style.top + 0);
-            nTX = parseInt(oDragObj.style.left + 0);
-          }
-          y = nn6 ? e.clientY : event.clientY;
-          x = nn6 ? e.clientX : event.clientX;
-
-          oDragObj.style.cursor = "move";
-          document.onmousemove = moveMouse;
-          return false;
-        }
-      }
-
-      // document.onmousedown = initDrag;
-      document.onmousemove = initDrag;
-
-      document.onmouseup = function (e) {
-        isdrag = false;
-        document.onmousemove = null;
-        document.onmouseup = null;
-        var oDragHandle = nn6 ? e.target : event.srcElement;
-        var topElement = "HTML";
-        while (
-          oDragHandle.tagName != topElement &&
-          oDragHandle.className != "equipment"
-        ) {
-          oDragHandle = nn6
-            ? oDragHandle.parentNode
-            : oDragHandle.parentElement;
-        }
-        if (oDragHandle.className == "equipment") {
-          oDragObj = oDragHandle;
-          oDragObj.style.cursor = "Default";
-        }
-      };
-
-      // _this.equipmentKey = key;
-      // _this.equipment[_this.equipmentKey].left = l;
-      // _this.equipment[_this.equipmentKey].top = t;
-      ev = event || window.event;
-
-      // 取消事件冒泡行为
-      window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
-    },
-  },
-
-  watch: {
-    equipment() {
-      if (this.equipment.length != 0) {
-        this.arrIcon = [];
-        let finish = true;
-        this.equipment.filter((item) => {
-          if (!item.iconImgUrl) {
-            finish = false;
-          }
-          return true;
-        });
-        console.log("finish", finish);
-        if (finish) {
-          this.equipment.filter((item, index) => {
-            if (index >= this.imgIndex) {
-              console.log("iconImgUrl", this.equipment[index].iconImgUrl);
-              this.getImgInfo(
-                this.$baseUrl + item.iconImgUrl,
-                this.iconMaxWidth,
-                this.iconMaxHeight,
-                "iconWidth",
-                "iconHeight",
-                true,
-                "arrIcon"
-              );
-            }
-            // console.log("22filter", index);
-            return true;
-          });
-        }
-      }
-    },
-  },
-  created() {
-    this.getImgInfo(
-      this.imgUrl,
-      this.bigMaxWidth,
-      this.bigMaxHeight,
-      "width",
-      "height"
-    );
-    if (this.equipment.length != 0) {
-      this.arrIcon = [];
-      let finish = true;
-      this.equipment.filter((item) => {
-        if (!item.iconImgUrl) {
-          finish = false;
-        }
-        return true;
-      });
-      // console.log("finish", finish);
-      if (finish) {
-        this.equipment.filter((item, index) => {
-          if (index >= this.imgIndex) {
-            console.log("iconImgUrl", this.equipment[index].iconImgUrl);
-            this.getImgInfo(
-              this.$baseUrl + item.iconImgUrl,
-              this.iconMaxWidth,
-              this.iconMaxHeight,
-              "iconWidth",
-              "iconHeight",
-              true,
-              "arrIcon"
-            );
-          }
-          // console.log("22filter", index);
-          return true;
-        });
-      }
-    }
-
-    this.iconImgUrl = JSON.parse(
-      JSON.stringify(this.$baseUrl + this.equipment[0].iconImgUrl)
-    );
-    // console.log("imgUrl", this.imgUrl);
-    // console.log("equipment", this.equipment);
-    // //禁止鼠标右键
-    // document.oncontextmenu = function() {
-    //   return false;
-    // };
-  },
-};
-</script>
-<style lang="less">
-.preview-popover {
-  background-color: #d3edf7dd;
-  padding: 12px;
-
-  .popper__arrow::after {
-    border-bottom-color: #d3edf7dd !important;
-  }
-
-  .describe {
-    p {
-      padding-bottom: 5px;
-
-      &:last-child {
-        padding-bottom: 0px;
-      }
-    }
-
-    .describe-top {
-      // color: sandybrown;
-      // color: red;
-      color: rgb(21, 110, 110);
-    }
-
-    .describe-center {
-      color: rgb(79, 21, 206);
-    }
-
-    .describe-bottom {
-      color: rgb(30, 31, 29);
-    }
-  }
-}
-</style>
-<style lang="less" scoped>
-.pop-up-main {
-  width: 100%;
-  height: calc(100vh - 18vh);
-  overflow-y: hidden;
-
-  .paln-box {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .movableItem {
-      position: absolute;
-      // top: 75%;
-      left: 50%;
-      transform: translate(-50%, -10%);
-
-      img,
-      .svg {
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-      }
-
-      .equipment {
-        position: absolute;
-        top: 0;
-        left: 0;
-        transform: translate(-50%, -50%);
-        z-index: 2;
-        font-size: 40px;
-        // color: red;
-        // background: blue;
-        zoom: 1;
-      }
-    }
-
-    .shuaxin {
-      position: absolute;
-      z-index: 2;
-      font-size: 40px;
-      top: 20px;
-      left: 20px;
-      cursor: pointer;
-
-      &:hover {
-        color: yellowgreen;
-      }
-    }
-
-    .equipment {
-      color: white;
-    }
-
-    &/deep/.el-button {
-      z-index: 2;
-      position: absolute;
-      bottom: 60px;
-      right: 20px;
-      width: 60px;
-      height: 35px;
-
-      span {
-        display: inline-block;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-
-      i {
-        display: inline-block;
-        position: absolute;
-        top: 50%;
-        left: 25%;
-        transform: translate(-50%, -50%);
-      }
-    }
-  }
-}
-
-// body {
-// 		height: 100%;
-// 		overflow: hidden;
-// 		margin: 0;
-// 		padding: 0;
-// 	}
-</style>

src/views/WindSite/pages/GeneralAppearance.vue

@@ -1,256 +1,283 @@
 <template>
-  <div class="general-appearance">
-    <div class="btn-group-tabs">
-      <BtnGroup2
-        :btnGroups="btnGroups"
-        :rowIndex="rowIndex"
-        :index="selectIndex"
-        @select="select"
-      ></BtnGroup2>
-    </div>
-    <div class="panel-title">
-      <div class="panel-title-name">
-        <!-- <span class="svg-icon svg-icon-green svg-icon-sm">
-          <SvgIcon svgid="svg-wind-site"></SvgIcon>
-        </span>
-        <span class="green">某某某风电场总貌</span> -->
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/black.png" />
-          <span class="sub-title gray">接入台数</span>
-          <span class="sub-count font-num white">{{ wpnumMap.jrts }}</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/green.png" />
-          <span class="sub-title green">待机台数</span>
-          <span class="sub-count font-num green">{{ wpnumMap.djts }}</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/blue.png" />
-          <span class="sub-title blue">并网台数</span>
-          <span class="sub-count font-num blue">{{ wpnumMap.yxts }}</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/purple.png" />
-          <span class="sub-title pink">限电台数</span>
-          <span class="sub-count font-num pink">{{ wpnumMap.xdts }}</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/red.png" />
-          <span class="sub-title red">故障台数</span>
-          <span class="sub-count font-num red">{{ wpnumMap.gzts }}</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/orange.png" />
-          <span class="sub-title orange">检修台数</span>
-          <span class="sub-count font-num orange">{{ wpnumMap.whts }}</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/black.png" />
-          <span class="sub-title gray">离线台数</span>
-          <span class="sub-count font-num gray">{{ wpnumMap.lxts }}</span>
-        </div>
-      </div>
-    </div>
-    <!-- <gax6 class="general-appearance-body"></gax6> -->
-    <div>
-      <XS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'XS_FDC'" />
-      <XH class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'XH_GDC'" />
-    </div>
-  </div>
+	<div class="general-appearance">
+		<div class="btn-group-tabs">
+			<BtnGroup2 :btnGroups="btnGroups" :rowIndex="rowIndex" :index="selectIndex" @select="select"></BtnGroup2>
+		</div>
+		<div class="panel-title">
+			<div class="panel-title-name">
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/black.png" />
+					<span class="sub-title gray">接入台数</span>
+					<span class="sub-count font-num white">{{ wpnumMap.jrts }}</span>
+				</div>
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/green.png" />
+					<span class="sub-title green">待机台数</span>
+					<span class="sub-count font-num green">{{ wpnumMap.djts }}</span>
+				</div>
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/blue.png" />
+					<span class="sub-title blue">并网台数</span>
+					<span class="sub-count font-num blue">{{ wpnumMap.yxts }}</span>
+				</div>
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/purple.png" />
+					<span class="sub-title pink">限电台数</span>
+					<span class="sub-count font-num pink">{{ wpnumMap.xdts }}</span>
+				</div>
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/red.png" />
+					<span class="sub-title red">故障台数</span>
+					<span class="sub-count font-num red">{{ wpnumMap.gzts }}</span>
+				</div>
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/orange.png" />
+					<span class="sub-title orange">检修台数</span>
+					<span class="sub-count font-num orange">{{ wpnumMap.whts }}</span>
+				</div>
+				<div class="sub-title-item">
+					<img src="../../../assets/map/fan/black.png" />
+					<span class="sub-title gray">离线台数</span>
+					<span class="sub-count font-num gray">{{ wpnumMap.lxts }}</span>
+				</div>
+			</div>
+			<div class="query-actions btnR" v-if="wpId == 'PL01_GC' || wpId == 'PL02_GC'">
+				<button class="btn" :class="wpId == 'PL01_GC'?'green':''" @click="pl('PL01_GC')">平罗一期</button>
+				<button class="btn" :class="wpId == 'PL02_GC'?'green':''" @click="pl('PL02_GC')">平罗二期</button>
+			</div>
+		</div>
+		<div>
+			<MHS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'MHS_FDC'" />
+			<NSS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'NSS_FDC'" />
+			<QS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'QS_FDC'" />
+			<SBQ class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'SBQ_FDC'" />
+			<XS class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'XS_FDC'" />
+			<XH class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'XH_GDC'" />
+			<DWK class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'DWK_GDC'" />
+			<PL1 class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'PL01_GC'" />
+			<PL2 class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'PL02_GC'" />
+			<MCH class="general-appearance-body" :data="fjmap" :zmmap="zmmap" v-if="wpId === 'MCH_GDC'" />
+		</div>
+	</div>
 </template>
 
 <script>
-import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
-// import gax6 from "../components/gax6.vue";
-import XS from "../components/generalappearance/xs/xs.vue";
-import XH from "../components/generalappearance/xh/xh.vue";
-export default {
-  // 名称
-  name: "GeneralAppearance",
-  // 使用组件
-  components: {
-    // gax6,
-    BtnGroup2,
-    XS,
-    XH
-  },
-  // 数据
-  data() {
-    return {
-      timmer: undefined,
-      wpId: undefined, //场站
-      wpnumMap: {}, //风机监视数量
-      fjmap: [], //场站风机详情
-      zmmap: {},
-      selectIndex: 0,
-      rowIndex: 0,
-      btnGroups: [
-        {
-          icon: "svg-wind-site",
-          btns: [],
-        },
-        {
-          icon: "svg-photovoltaic",
-          btns: [],
-        },
-      ],
-    };
-  },
-  created() {
-    let that = this;
-    that.wpId = that.$route.params.wpId;
-    that.$nextTick(() => {
-      that.getWp();
-      that.timmer = setInterval(() => {
-        that.requestData();
-      }, that.$store.state.websocketTimeSec);
-    });
-  },
-  // 函数
-  methods: {
-    select(res) {
-      this.$router.replace({
-        path: `/monitor/windsite/generalappearance/${res.code}`,
-      });
-    },
-    getWp() {
-      let that = this;
-      that.API.requestData({
-        method: "GET",
-        subUrl: "powercompare/windfarmAllAjax",
-        success(res) {
-          let btnGroup = [
-            {
-              icon: "svg-wind-site",
-              btns: [],
-            },
-            {
-              icon: "svg-photovoltaic",
-              btns: [],
-            },
-          ];
+	import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
+	import MHS from "../components/generalappearance/mhs.vue";
+	import NSS from "../components/generalappearance/nss.vue";
+	import QS from "../components/generalappearance/qs.vue";
+	import SBQ from "../components/generalappearance/sbq.vue";
+	import XS from "../components/generalappearance/xs.vue";
+	import XH from "../components/generalappearance/xh.vue";
+	import DWK from "../components/generalappearance/dwk.vue";
+	import PL1 from "../components/generalappearance/pl1.vue";
+	import PL2 from "../components/generalappearance/pl2.vue";
+	import MCH from "../components/generalappearance/mch.vue";
+	export default {
+		// 名称
+		name: "GeneralAppearance",
+		// 使用组件
+		components: {
+			BtnGroup2,
+			MHS,
+			NSS,
+			QS,
+			SBQ,
+			XS,
+			XH,
+			DWK,
+			PL1,
+			PL2,
+			MCH
+		},
+		// 数据
+		data() {
+			return {
+				timmer: undefined,
+				wpId: undefined, //场站
+				wpnumMap: {}, //风机监视数量
+				fjmap: [], //场站风机详情
+				zmmap: {},
+				selectIndex: 0,
+				rowIndex: 0,
+				btnGroups: [{
+						icon: "svg-wind-site",
+						btns: [],
+					},
+					{
+						icon: "svg-photovoltaic",
+						btns: [],
+					},
+				],
+			};
+		},
+		created() {
+			let that = this;
+			that.wpId = that.$route.params.wpId;
+			that.$nextTick(() => {
+				that.getWp();
+				that.timmer = setInterval(() => {
+					that.requestData();
+				}, that.$store.state.websocketTimeSec);
+			});
+		},
+		// 函数
+		methods: {
+			select(res) {
+				this.$router.replace({
+					path: `/monitor/windsite/generalappearance/${res.code}`,
+				});
+			},
+			getWp() {
+				let that = this;
+				that.API.requestData({
+					method: "GET",
+					subUrl: "powercompare/windfarmAllAjax",
+					success(res) {
+						let btnGroup = [{
+								icon: "svg-wind-site",
+								btns: [],
+							},
+							{
+								icon: "svg-photovoltaic",
+								btns: [],
+							},
+						];
 
-          res.data.forEach((ele, index) => {
-            if (ele.id.indexOf("FDC") !== -1) {
-              btnGroup[0].btns.push({
-                text: ele.name,
-                code: ele.id,
-              });
-            } else {
-              btnGroup[1].btns.push({
-                text: ele.name,
-                code: ele.id,
-              });
-            }
-          });
+						res.data.forEach((ele, index) => {
+							if (ele.id.indexOf("FDC") !== -1) {
+								btnGroup[0].btns.push({
+									text: ele.name,
+									code: ele.id,
+								});
+							} else {
+								if (ele.id == "PL_GDC") {
+									ele.id = 'PL01_GC';
+								}
+								btnGroup[1].btns.push({
+									text: ele.name,
+									code: ele.id,
+								});
+							}
+						});
 
-          that.btnGroups = btnGroup;
-          that.renderBtnActiveIndex();
-        },
-      });
-    },
-    requestData() {
-      let that = this;
-      that.API.requestData({
-        method: "POST",
-        subUrl: "monitor/findGeneralAppearance",
-        data: {
-          wpId: that.wpId,
-        },
-        success(res) {
-          if (res.code == 200) {
-            that.wpnumMap = res.data.fczbmap.jczbmap;
-            that.fjmap = res.data.fjmap[0];
-            that.zmmap = res.data.zmmap;
-          }
-        },
-      });
-    },
-    renderBtnActiveIndex() {
-      this.btnGroups.forEach((pEle, pIndex) => {
-        pEle.btns.forEach((cEle, cIndex) => {
-          if (cEle.code === this.wpId) {
-            this.rowIndex = pIndex;
-            this.selectIndex = cIndex;
-          }
-        });
-      });
-    },
-  },
-  unmounted() {
-    clearInterval(this.timmer);
-    this.timmer = null;
-  },
-  watch: {
-    $route(res) {
-      this.wpId = res.params.wpId;
-      if (res.params.wpId) {
-        this.requestData();
-        this.renderBtnActiveIndex();
-      }
-    },
-  },
-};
+						that.btnGroups = btnGroup;
+						that.renderBtnActiveIndex();
+					},
+				});
+			},
+			requestData() {
+				let that = this;
+				that.API.requestData({
+					method: "POST",
+					subUrl: "monitor/findGeneralAppearance",
+					data: {
+						wpId: that.wpId,
+					},
+					success(res) {
+						if (res.code == 200) {
+							that.wpnumMap = res.data.fczbmap.jczbmap;
+							that.fjmap = res.data.fjmap[0];
+							that.zmmap = res.data.zmmap;
+						}
+					},
+				});
+			},
+			renderBtnActiveIndex() {
+				this.btnGroups.forEach((pEle, pIndex) => {
+					pEle.btns.forEach((cEle, cIndex) => {
+						if (cEle.code === this.wpId) {
+							this.rowIndex = pIndex;
+							this.selectIndex = cIndex;
+						}
+					});
+				});
+			},
+			pl(a) { //单指平罗2个总貌
+				this.$router.replace({
+					path: `/monitor/windsite/generalappearance/${a}`,
+				});
+			}
+		},
+		unmounted() {
+			clearInterval(this.timmer);
+			this.timmer = null;
+		},
+		watch: {
+			$route(res) {
+				this.wpId = res.params.wpId;
+				if (res.params.wpId) {
+					this.requestData();
+					this.renderBtnActiveIndex();
+				}
+			},
+		},
+	};
 </script>
 
 <style lang="less" scoped>
-.general-appearance {
-  width: 100%;
-  height: calc(100vh - 90px);
-  display: flex;
-  flex-direction: column;
+	.general-appearance {
+		width: 100%;
+		height: calc(100vh - 90px);
+		display: flex;
+		flex-direction: column;
 
-  .btn-group-tabs {
-    display: flex;
-    flex-direction: row;
-  }
+		.btn-group-tabs {
+			display: flex;
+			flex-direction: row;
+		}
 
-  .general-appearance-body {
-    flex-grow: 1;
-  }
+		.btnR {
+			flex: 1;
+			text-align: end;
+		}
 
-  .panel-title {
-    width: 100%;
-    background-color: fade(@darkgray, 40%);
-    margin-top: 1.481vh;
-    padding: 6px;
-    display: flex;
-    align-items: center;
+		.general-appearance-body {
+			flex-grow: 1;
+		}
 
-    .panel-title-name {
-      color: @green;
-      display: flex;
-      align-items: center;
-      line-height: 0;
-      font-size: 0;
+		.panel-title {
+			width: 100%;
+			background-color: fade(@darkgray, 40%);
+			margin-top: 1.481vh;
+			padding: 6px;
+			display: flex;
+			align-items: center;
 
-      i,
-      span {
-        margin: 0 0 0 1.481vh;
-        line-height: 0;
-        font-size: 13px;
-      }
-    }
+			.panel-title-name {
+				color: @green;
+				display: flex;
+				align-items: center;
+				line-height: 0;
+				font-size: 0;
 
-    .sub-title-item {
-      display: flex;
-      align-items: center;
-      margin-left: 16px;
+				i,
+				span {
+					margin: 0 0 0 1.481vh;
+					line-height: 0;
+					font-size: 13px;
+				}
+			}
 
-      .sub-title {
-        font-size: 13px;
-        margin-left: 6px;
-      }
+			.sub-title-item {
+				display: flex;
+				align-items: center;
+				margin-left: 16px;
 
-      .sub-count {
-        font-size: 13px;
-        font-weight: 500;
-      }
+				.sub-title {
+					font-size: 13px;
+					margin-left: 6px;
+				}
 
-      img {
-        height: 31px;
-      }
-    }
-  }
-}
+				.sub-count {
+					font-size: 13px;
+					font-weight: 500;
+				}
+
+				img {
+					height: 31px;
+				}
+			}
+		}
+	}
 </style>

src/views/WindSite/pages/Map1.vue

@@ -424,6 +424,8 @@ export default {
         tilt: 65, // 俯视角
         scale: 15000,
         rotation: 180,
+        ox: 0,
+        oy: 0,
       },
       tempImg: require("@assets/temp1.png"),
       syzImg: require("@assets/png/booster-station.png"),

src/views/layout/Header.vue

@@ -34,15 +34,16 @@ export default {
           isActive: true
         },
         {
-          id: 'decision1',
+          id: 'decision',
           text: '经济运行',
-          path: '/decision1',
+          path: '/decision/pb',
           isActive: false
         },
         {
           id: 'health',
           text: '智慧检修',
-          path: '/health',
+          // path: '/sandtable',
+          path: '/health/sandtable',
           isActive: false
         },
         // {
@@ -58,10 +59,10 @@ export default {
           isActive: false
         },
         {
-          id: 'bdzcx',
-          text: '智能报表',
-          path: '/bdzcx',
-          isActive: false
+          id: "bdzcx",
+          text: "智能报表",
+          path: "/reportPandect",
+          isActive: false,
         },
         {
           id: 'realSearch',

src/views/layout/Menu.vue

@@ -106,64 +106,69 @@ export default {
         }
         ,
         {
-          id: 'decision1',
+          id: 'decision',
           text: '经济运行',
           data: [
-            ,
+             {
+              text: '经济运行首页',
+              icon: 'svg-wind-site',
+              // path: '/monitor/sandtable'
+               path: '/decision/pb'
+            },
             {
               text: '对标管理',
               icon: 'svg-matrix',
-              path: '/decision1',
+              path: '/decision/decision1',
               children: [
                 {
                   text: '风机绩效榜',
                   icon: 'svg-wind-site',
-                  path: '/decision1'
+                  path: '/decision/decision1'
                 },
                 {
                   text: '五项损失率',
                   icon: 'svg-wind-site',
-                  path: '/decision2'
+                  path: '/decision/decision2'
                 },
                 {
                   text: '场内对标',
                   icon: 'svg-wind-site',
-                  path: '/decision2Cndb'
+                  path: '/decision/decision2Cndb'
                 },
                 {
                   text: '场际对标',
                   icon: 'svg-wind-site',
-                  path: '/decision2Cjdb'
+                  path: '/decision/decision2Cjdb'
                 },
                 {
                   text: '项目对标',
                   icon: 'svg-wind-site',
-                  path: '/decision2Xmdb'
+                  path: '/decision/decision2Xmdb'
                 },
                 {
                   text: '线路对标',
                   icon: 'svg-wind-site',
-                  path: '/decision2Xldb'
+                  path: '/decision/decision2Xldb'
                 },
                 {
                   text: '性能对标',
                   icon: 'svg-wind-site',
-                  path: '/decision3'
+                  path: '/decision/decision3'
                 },
                 {
                   text: '值际对标',
                   icon: 'svg-wind-site',
-                  path: '/decision4'
+                  path: '/decision/decision4'
                 },
                 {
                   text: '单机横向对比',
                   icon: 'svg-matrix',
-                  path: '/decision3db'
+                  path: '/decision/decision3db'
                 },
                 {
                   text: '操作指令统计',
                   icon: 'svg-matrix',
-                  path: '/decision4czzl'
+                  path: '/decision/decision4czzl'
                 }
               ]
             }, // 三率管理
@@ -262,7 +267,7 @@ export default {
                   path: '/new/mttr'
                 },
                 {
-                  text: '复位及时率',
+                  text: '复位分析',
                   icon: 'svg-wind-site',
                   path: '/new/zfwjsl'
                 },
@@ -304,6 +309,28 @@ export default {
                   path: '/singleAnalysis'
                 },
               ],
+            },
+            {
+              text: '气象分析',
+              icon: 'svg-wind-site',
+              path: '/new/fs'
+            },
+            {
+              text: '电量预测',
+              icon: 'svg-wind-site',
+              path: '/nhycfsdl',
+              children: [
+                {
+                  text: '预测拟合风速电量',
+                  icon: 'svg-wind-site',
+                  path: '/nhycfsdl'
+                },
+                {
+                  text: '修正预测风速电量',
+                  icon: 'svg-wind-site',
+                  path: '/xzycfsdl'
+                }
+              ]
             }
             // {
             //   text: "单机分析",
@@ -336,12 +363,31 @@ export default {
             {
               text: '沙盘',
               icon: 'svg-wind-site',
-              path: '/spt'
+              // path: '/monitor/sandtable'
+               path: '/health/sandtable'
             },
             {
               text: '等级评估',
               icon: 'svg-wind-site',
-              path: '/djpg'
+              path: '/assess/index'
+            },
+            {
+              text: '故障诊断',
+              icon: 'svg-wind-site',
+              path: '/malfunctionDiagnose',
+              children: [
+                {
+                  text: '故障诊断',
+                  icon: 'svg-wind-site',
+                  path: '/malfunctionDiagnose'
+                },
+                {
+                  text: '故障回溯',
+                  icon: 'svg-wind-site',
+                  path: '/malfunctionRecall'
+                },
+               
+              ]
             },
             {
               text: '健康管理',
@@ -397,7 +443,7 @@ export default {
                 {
                   text: '偏航对风分析',
                   icon: 'svg-wind-site',
-                  path: '/nxfx2'
+                  path: '/phdffx'
                 },
                 {
                   text: '切入切出分析',
@@ -441,7 +487,12 @@ export default {
                   text: '故障评判分析',
                   icon: 'svg-wind-site',
                   path: '/malfunctionStatistics'
-                }
+                },
+                {
+                  text: '部件评判分析',
+                  icon: 'svg-wind-site',
+                  path: '/bjgltjb'
+                },
               ]
             },
             {
@@ -460,7 +511,7 @@ export default {
                   path: '/windAnalysis/fx'
                 }
               ]
-            }
+            },
           ]
         },
         {
@@ -517,7 +568,7 @@ export default {
                 {
                   text: '全局监视',
                   icon: 'svg-wind-site',
-                  path: '/new/personnel'
+                  path: '/globalMonitor'
                 }
               ]
             }
@@ -527,7 +578,11 @@ export default {
           id: 'bdzcx',
           text: '智能报表',
           data: [
-            // 统计分析
+            ,            {
+              text: '报表首页',
+              icon: 'svg-wind-site',
+              path: '/reportPandect'
+            },// 统计分析
             {
               text: '统计分析',
               icon: 'svg-matrix',

src/views/malfunctionDiagnose/index.vue

@@ -95,13 +95,26 @@
       custom-class="modal"
       :close-on-click-modal="true"
     >
-      <el-tree
-        style="height: 600px; overflow-y: scroll"
-        node-key="activeId"
+      <el-table
         :data="treeData"
-        :default-expanded-keys="['0']"
-        :props="{ children: 'children', label: 'name' }"
-      ></el-tree>
+        style="width: 100%; height: 600px"
+        row-key="id"
+        border
+        default-expand-all
+        :expand-row-keys="['0']"
+        :tree-props="{ children: 'children' }"
+      >
+        <el-table-column
+          prop="name"
+          label="项目名称"
+          sortable
+        ></el-table-column>
+        <el-table-column
+          prop="judegVulue"
+          label="状态"
+          sortable
+        ></el-table-column>
+      </el-table>
     </el-dialog>
   </div>
 </template>
@@ -266,7 +279,7 @@ export default {
           values: item.judegvulue,
         },
         success(res) {
-          res.data[0].activeId = "0";
+          res.data[0].id = "0";
           that.treeData = res.data;
           that.dialogShow = true;
         },

src/views/malfunctionRecall/index.vue

@@ -102,23 +102,40 @@
     <div>
       <ComTable :data="tableData" height="85vh"></ComTable>
     </div>
+    <div>
+      <el-dialog
+        title="故障诊断"
+        v-model="dialogVisible"
+        width="1400px"
+        top="10vh"
+        custom-class="modal hide-header"
+        :close-on-click-modal="false"
+        :before-close="onClickDialogClose"
+      >
+        <fault-diagnosis :data="rowitem"/>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
 <script>
 import ComTable from "@com/coms/table/table.vue";
+import FaultDiagnosis from "../HealthControl/fault-diagnosis.vue";
 
 export default {
-  components: { ComTable },
+  components: { ComTable, FaultDiagnosis },
   data() {
+    const that = this;
     return {
       value1: "",
       value2: "",
       wpId: "",
       wpArray: [],
+      rowitem: "",
       wpName: "",
       wtId: "",
       type: "2",
+      dialogVisible: false,
       tableData: {
         column: [
           {
@@ -129,7 +146,7 @@ export default {
           },
           {
             name: "机组",
-            field: "wtName",
+            field: "windTurbineId",
             is_num: false,
             is_light: false,
           },
@@ -171,7 +188,9 @@ export default {
             template() {
               return "<el-button type='text' style='cursor: pointer;'>回溯</el-button>";
             },
-            click(e, row) {},
+             click(e, row) {
+              that.onClickOption(row);
+            },
           },
         ],
         data: [],
@@ -279,7 +298,7 @@ export default {
               for (var i = 0; i < data.length; i++) {
                 let obj = {
                   wpName: data[i].wpName,
-                  wtName: data[i].wtName,
+                  windTurbineId: data[i].windTurbineId,
                   stopTime: new Date(data[i].stopTime).formatDate(
                     "yyyy-MM-dd hh:mm:ss"
                   ),
@@ -301,6 +320,15 @@ export default {
         },
       });
     },
+    // 回放按钮
+    onClickOption(row) {
+      this.rowitem = row
+      this.dialogVisible = true;
+    },
+    // 关闭弹窗
+    onClickDialogClose() {
+      this.dialogVisible = false;
+    },
   },
 };
 </script>

src/views/malfunctionStatistics/index.vue

@@ -23,7 +23,7 @@
       </div>
     </div>
     <div class="df-table curTable">
-      <el-table :data="tableData.data" height="78vh" max-height="78vh" stripe style="width: 100%" :border="true">
+      <el-table :data="tableData.data" height="88vh" max-height="88vh" stripe style="width: 100%" :border="true">
         <el-table-column :show-overflow-tooltip="true" prop="wtname" width="150px" label="风机"></el-table-column>
         <el-table-column :show-overflow-tooltip="true" :label="tableTitle">
           <el-table-column :show-overflow-tooltip="true" label="近一天">

src/views/report/bjgltjb.vue

@@ -0,0 +1,33 @@
+<template>
+  <div style="height:100%">
+    <iframe :src="url" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
+  </div>
+    
+</template>
+
+<script>
+
+
+export default {
+  data(){
+    return {
+      url: "http://10.155.32.4:8000/bi47/showreport.do?resid=EBI$12$VZCQU9AYVZPOYRQZLRNI9SUUMUZTM6LU$1$31RYFKYI87X7U9L1YQLVYUA2SU1XJQIU.rpttpl&id=admin&pw=gdnxfd123&showmenu=false&showparams=true&calcnow=true --disable-features=SameSiteByDefaultCookies "
+    }
+  }
+}
+</script>
+  
+<style lang="less" scope>
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.knowledge-2 {
+  .el-select {
+    width: 200px;
+  }
+  .el-input {
+    width: 200px;
+  }
+}
+</style>
+

src/views/report/nhycfsdl.vue

@@ -0,0 +1,33 @@
+<template>
+  <div style="height:100%">
+    <iframe :src="url" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
+  </div>
+    
+</template>
+
+<script>
+
+
+export default {
+  data(){
+    return {
+      url: "http://10.155.32.4:8000/bi47/showreport.do?resid=EBI$12$VZCQU9AYVZPOYRQZLRNI9SUUMUZTM6LU$1$MQLFVUNLPDTDNISQ5IBLI1YLSNQCBFF8.rpttpl&id=admin&pw=gdnxfd123&showmenu=false&showparams=true&calcnow=true --disable-features=SameSiteByDefaultCookies "
+    }
+  }
+}
+</script>
+  
+<style lang="less" scope>
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.knowledge-2 {
+  .el-select {
+    width: 200px;
+  }
+  .el-input {
+    width: 200px;
+  }
+}
+</style>
+

src/views/report/xzycfsdl.vue

@@ -0,0 +1,33 @@
+<template>
+  <div style="height:100%">
+    <iframe :src="url" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
+  </div>
+    
+</template>
+
+<script>
+
+
+export default {
+  data(){
+    return {
+      url: "http://10.155.32.4:8000/bi47/showreport.do?resid=EBI$12$VZCQU9AYVZPOYRQZLRNI9SUUMUZTM6LU$1$XK4I8NQQCWCWZ1UKB46CY8QMNLKUTJSW.rpttpl&id=admin&pw=gdnxfd123&showmenu=false&showparams=true&calcnow=true --disable-features=SameSiteByDefaultCookies "
+    }
+  }
+}
+</script>
+  
+<style lang="less" scope>
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.knowledge-2 {
+  .el-select {
+    width: 200px;
+  }
+  .el-input {
+    width: 200px;
+  }
+}
+</style>
+

src/views/reportPandect/index.vue

@@ -0,0 +1,335 @@
+<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"
+    >
+      <!-- card-1 -->
+      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
+        <div class="itemBox">
+          <p class="itemTitle">统计分析</p>
+          <iframe
+            class="iframe"
+            width="100%"
+            height="100%"
+            src="http://10.155.32.4:8070/analysis/#/"
+          />
+        </div>
+      </el-carousel-item>
+
+      <!-- card-2 -->
+      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
+        <div class="itemBox">
+          <p class="itemTitle">
+            自定义报表
+            <i
+              class="itemMoreBtn el-icon-more"
+              @click="jumpUrl('/fdczzdy')"
+            ></i>
+          </p>
+          <div style="margin-top: 200px">
+            <div class="inline" @click="jumpUrl('/fdczzdy')">
+              <div class="l">风电场站自定义</div>
+              <div class="r r4">
+                <span>4</span>
+              </div>
+            </div>
+            <div class="inline" @click="jumpUrl('/fdxmzdy')">
+              <div class="l">风电项目自定义</div>
+              <div class="r r2">
+                <span>2</span>
+              </div>
+            </div>
+            <div class="inline" @click="jumpUrl('/gfczzdy')">
+              <div class="l">光伏场站自定义</div>
+              <div class="r r1">
+                <span>1</span>
+              </div>
+            </div>
+            <div class="inline" @click="jumpUrl('/gfxmzdy')">
+              <div class="l">光伏场项目定义</div>
+              <div class="r r1">
+                <span>1</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-carousel-item>
+
+      <!-- card-3 -->
+      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
+        <div class="itemBox">
+          <p class="itemTitle">
+            固定报表
+            <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/oafd')"></i>
+          </p>
+          <div class="imageBox">
+            <div class="imgItem" @click="jumpUrl('/oafd')">
+              <el-image class="img" src="./static/img/oa日报.png" fit="fill" />
+              <p class="imgTitle">OA日报(风电)</p>
+            </div>
+            <div class="imgItem" @click="jumpUrl('/xnyrb')">
+              <el-image
+                class="img"
+                src="./static/img/新能源日报.png"
+                fit="fill"
+              />
+              <p class="imgTitle">新能源日报</p>
+            </div>
+            <div class="imgItem" @click="jumpUrl('/missfdrb')">
+              <el-image
+                class="img"
+                src="./static/img/miss日报.png"
+                fit="fill"
+              />
+              <p class="imgTitle">国电电力MISS日报</p>
+            </div>
+            <div class="imgItem" @click="jumpUrl('/xnyfdscyb')">
+              <el-image
+                class="img"
+                src="./static/img/新能源生产月报.png"
+                fit="fill"
+              />
+              <p class="imgTitle">新能源风电生产月报</p>
+            </div>
+            <div class="imgItem" @click="jumpUrl('/mhsscyb')">
+              <el-image
+                class="img"
+                src="./static/img/麻黄山生产月报.png"
+                fit="fill"
+              />
+              <p class="imgTitle">麻黄山生产月报</p>
+            </div>
+            <div class="imgItem" @click="jumpUrl('/nssscyb')">
+              <el-image
+                class="img"
+                src="./static/img/牛首山生产月报.png"
+                fit="fill"
+              />
+              <p class="imgTitle">牛首山生产月报</p>
+            </div>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import $ from "jquery";
+export default {
+  // 名称
+  name: "cutAnalyse",
+
+  // 数据
+  data() {
+    const that = this;
+    return {};
+  },
+
+  // 函数
+  methods: {
+    // 切换走马灯，并重新渲染样式
+    changeSwiper(index) {
+      this.$nextTick(() => {
+        const swiperDom = $(".swiperBox .el-carousel__item");
+        swiperDom
+          .eq(index)
+          .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).css({
+              background: "rgb(4, 12, 11)",
+              border: "1px solid rgba(5, 187, 76, 0.5)",
+            });
+          }
+        }
+      });
+    },
+
+    // 页面跳转
+    jumpUrl(url) {
+      this.$router.push(url);
+    },
+  },
+
+  created() {},
+
+  mounted() {
+    this.$nextTick(() => {
+      this.changeSwiper(1);
+    });
+  },
+
+  unmounted() {},
+};
+</script>
+
+<style lang="less" scoped>
+.swiperBox,
+.itemBox {
+  width: 100%;
+  height: 100%;
+  font-size: 20px;
+
+  .itemTitle {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    .itemMoreBtn {
+      cursor: pointer;
+      font-size: 22px;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+
+  .inline {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 24px;
+    margin-bottom: 30px;
+    width: 100%;
+    margin: 0 0 30px 0;
+    transition: 0.2s;
+
+    .l {
+      color: #b3bdc0;
+      width: 46%;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-right: 4%;
+      transition: 0.2s;
+    }
+
+    .r {
+      color: #05bb4c;
+      position: relative;
+      width: 46%;
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      margin-left: 4%;
+
+      &::after {
+        content: "";
+        position: absolute;
+        height: 10px;
+        left: 30px;
+        top: calc(50% - 5px);
+        background-color: #edbf03;
+        border-radius: 2px;
+      }
+    }
+
+    .r1::after {
+      width: 30px;
+    }
+
+    .r2::after {
+      width: 60px;
+    }
+
+    .r3::after {
+      width: 90px;
+    }
+
+    .r4::after {
+      width: 120px;
+    }
+
+    &:hover {
+      width: 80%;
+      margin: 0 10% 30px 10%;
+      color: #05bb4c;
+      transition: 0.2s;
+    }
+
+    &:hover .l {
+      color: #05bb4c;
+      transition: 0.2s;
+    }
+  }
+
+  .imageBox {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 100px;
+
+    .imgItem {
+      cursor: pointer;
+      border: none;
+      margin-right: 1%;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      flex-direction: column;
+      width: 32%;
+
+      .img {
+        width: 100%;
+        height: 150px;
+        border: 1px solid #b3bdc0;
+        transition: 0.2s;
+
+        &:hover {
+          border: 1px solid #05bb4c;
+          transition: 0.2s;
+        }
+      }
+
+      p {
+        width: 100%;
+        font-size: 16px;
+        color: #b3bdc0;
+        text-align: center;
+        transition: 0.2s;
+      }
+
+      &:hover p {
+        transition: 0.2s;
+        color: #05bb4c;
+      }
+    }
+  }
+
+  .iframe {
+    border: 0;
+    overflow: scroll;
+    background: #fff;
+  }
+}
+</style>
+
+<style lang="less">
+.itemBox {
+  .el-form-item,
+  .el-form-item__label {
+    font-size: 16px;
+  }
+
+  .el-form-item__label {
+    text-align: left;
+  }
+}
+</style>

src/views/warn/xdgl.vue

@@ -1,229 +1,392 @@
 <template>
-  <div class="knowledge-2">
-    <div class="query mg-b-8">
-      <div class="query-items">
-        <div class="query-item">
-          <div class="lable">场站：</div>
-          <div class="search-input">
-            <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select">
-              <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="query-item">
-            <div class="lable">开始日期：</div>
-            <div class="search-input">
-              <el-date-picker v-model="value1" @change="BeginChange(value1)" type="date" value-format="YYYY-MM-DD"
-                placeholder="选择日期" popper-class="date-select">
-              </el-date-picker>
-            </div>
-          </div>
-          <div class="query-item">
-            <div class="lable">结束日期：</div>
-            <div class="search-input">
-              <el-date-picker v-model="value2" @change="EndChange(value2)" type="date" value-format="YYYY-MM-DD"
-                placeholder="选择日期" popper-class="date-select">
-              </el-date-picker>
-              <div class="unit svg-icon svg-icon-gray">
-                <svg-icon :svgid="''" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="query-actions" style="margin-right: 1500px">
-        <button class="btn green" @click="onClickSearch">查询</button>
-      </div>
-    </div>
-    <div>
-      <ComTable :data="tableData" height="85vh"></ComTable>
-    </div>
-  </div>
+	<div class="knowledge-2">
+		<div class="query mg-b-8">
+			<div class="query-items">
+				<div class="query-item">
+					<div class="lable">场站：</div>
+					<div class="search-input">
+						<el-select v-model="wpId" clearable placeholder="请选择" popper-class="select">
+							<el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
+						</el-select>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="query-item">
+						<div class="lable">开始日期：</div>
+						<div class="search-input">
+							<el-date-picker v-model="value1" @change="BeginChange(value1)" type="date"
+								value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+							</el-date-picker>
+						</div>
+					</div>
+					<div class="query-item">
+						<div class="lable">结束日期：</div>
+						<div class="search-input">
+							<el-date-picker v-model="value2" @change="EndChange(value2)" type="date"
+								value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+							</el-date-picker>
+							<div class="unit svg-icon svg-icon-gray">
+								<svg-icon :svgid="''" />
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="query-actions" style="margin-right: 1500px">
+				<button class="btn green" @click="onClickSearch">查询</button>
+			</div>
+		</div>
+		<div>
+			<ComTable :data="tableData" height="85vh"></ComTable>
+		</div>
+		<el-dialog title="限电事件" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal"
+			:close-on-click-modal="false">
+			<table class="com-table tabLog">
+				<tr>
+					<td class="light"> 限电原因：</td>
+					<td>{{main.description}}</td>
+					<td class="light"> 限电类型：</td>
+					<td>{{main.stopTypeId}}</td>
+				</tr>
+				<tr>
+					<td class="light"> 限电指令：</td>
+					<td>{{main.brownoutsdirective}}</td>
+					<td class="light"> 当时风速(m/s)：</td>
+					<td>{{main.windspeed}}</td>
+				</tr>
+				<tr>
+					<td class="light"> 限电负荷(MW)：</td>
+					<td>{{main.limitload}}</td>
+					<td class="light"> 当时负荷(MW)：</td>
+					<td>{{main.thisload}}</td>
+				</tr>
+				<tr>
+					<td class="light"> 限电时刻：</td>
+					<td>{{new Date(main.stoptime).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
+					<td class="light"> 恢复时刻：</td>
+					<td>{{new Date(main.starttime).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
+				</tr>
+				<tr>
+					<td class="light"> 限电损失电量(KWh)：</td>
+					<td colspan="3">{{main.losspower}}</td>
+				</tr>
+			</table>
+			<div class="header">
+				<span class="herder-info">
+					限电事件记录
+				</span>
+			</div>
+			<ComTable :data="tableList" height="40vh"></ComTable>
+		</el-dialog>
+	</div>
 </template>
 
 <script>
-import ComTable from "@com/coms/table/table.vue";
+	import ComTable from "@com/coms/table/table.vue";
 
-export default {
-  components: { ComTable },
-  data () {
-    return {
-      value1: "",
-      value2: "",
-      wpId: "",
-      wpArray: [],
-      tableData: {
-        column: [
-          {
-            name: "编号",
-            field: "id",
-             width: "50px",
-            is_num: true,
-            is_light: false,
-          },
-          {
-            name: "限电时刻",
-            field: "stopTime",
-              width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "恢复时刻",
-            field: "startTime",
-             width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "停机类型",
-            field: "stopTypeId",
-             width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "限电时间",
-            field: "stopHours",
-             width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "损失电量(kWh)",
-            field: "lossPower",
-             width: "150px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "限电原因",
-            field: "description",
-             width: "200px",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "关联风机",
-            field: "wts",
-            is_num: false,
-            is_light: false,
-          },
-        ],
-        data: [],
-      },
-    };
-  },
-  created () {
-    // this.requestSafeList();
-    this.value1 = new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd");
-    this.value2 = this.getTime(2);
-    this.getWp();
-    this.requestSafeList();
-  },
-  methods: {
-    getTime (val) { //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
-      var date = new Date();
-      var year = date.getFullYear(),
-        month = date.getMonth() + 1,
-        day = date.getDate();
-      month >= 1 && month <= 9 ? (month = '0' + month) : '';
-      day >= 0 && day <= 9 ? (day = '0' + day) : '';
-      var begin = year + '-' + month + '-01';
-      var end = year + '-' + month + '-' + day;
-      if (val == 1) {
-        return begin;
-      } else if (val == 2) {
-        return end;
-      }
-    },
-    // 获取风场
-    getWp (reGetWp) {
-      let that = this;
-      that.API.requestData({
-        baseURL: "http://10.155.32.4:9001",
-        subUrl: "benchmarking/wplist",
-        success (res) {
-          that.wpArray = res.data;
-          that.wpId = res.data[0].id;
-          that.wpName = res.data[0].wpId;
-          // that.getWt(that.wpId, reGetWp);
-        }
-      });
-    },
+	export default {
+		components: {
+			ComTable
+		},
+		data() {
+			const that = this;
+			return {
+				value1: "",
+				value2: "",
+				wpId: "",
+				wpArray: [],
+				dialogVisible: false,
+				main:[],
+				tableList:{
+					column: [{
+							name: "编号",
+							field: "index",
+							width: "50px",
+							is_num: true,
+							is_light: false,
+						},
+						{
+							name: "风机",
+							field: "windturbineid",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "限电时刻",
+							field: "stopTime",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "恢复时刻",
+							field: "startTime",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "停机小时数",
+							field: "stophours",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "损失电量(KWh)",
+							field: "losspower",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+					],
+					data: [],
+				},
+				tableData: {
+					column: [{
+							name: "编号",
+							field: "index",
+							width: "50px",
+							is_num: true,
+							is_light: false,
+						},
+						{
+							name: "限电时刻",
+							field: "stopTime",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "恢复时刻",
+							field: "startTime",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "停机类型",
+							field: "stopTypeId",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "限电时间",
+							field: "stopHours",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "损失电量(kWh)",
+							field: "lossPower",
+							width: "150px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "限电原因",
+							field: "description",
+							width: "200px",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "关联风机",
+							field: "wts",
+							is_num: false,
+							is_light: false,
+						},
+						{
+							name: "操作",
+							field: "cz",
+							width: "50px",
+							is_num: false,
+							is_light: false,
+							template: function() {
+								return "<a class='action'>详情</a>";
+							},
+							click: function(event, data) {
+								that.API.requestData({
+									method: "POST",
+									subUrl: "/brownouts/getBrownouts",
+									data: {
+										mainId: data.id
+									},
+									success(res) {
+										if (res.code == 200) {
+											that.main = res.data.main;
+											
+											that.tableList.data = [];
+											if (res.data.list.length) {
+												let data = res.data.list;
+												for (var i = 0; i < data.length; i++) {
+													let obj = {
+														index: i + 1,
+														windturbineid:data[i].windturbineid,
+														stopTime: new Date(data[i].stoptime).formatDate("yyyy-MM-dd hh:mm:ss"),
+														startTime: new Date(data[i].starttime).formatDate("yyyy-MM-dd hh:mm:ss"),
+														stophours: data[i].stophours,
+														losspower: data[i].losspower
+													};
+													that.tableList.data.push(obj);
+													that.dialogVisible = true;
+												}
+											}
+										}
+									},
+								});
+							}
+						}
+					],
+					data: [],
+				},
+			};
+		},
+		created() {
+			// this.requestSafeList();
+			this.value1 = new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd");
+			this.value2 = this.getTime(2);
+			this.getWp();
+			this.requestSafeList();
+		},
+		methods: {
+			getTime(val) { //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
+				var date = new Date();
+				var year = date.getFullYear(),
+					month = date.getMonth() + 1,
+					day = date.getDate();
+				month >= 1 && month <= 9 ? (month = '0' + month) : '';
+				day >= 0 && day <= 9 ? (day = '0' + day) : '';
+				var begin = year + '-' + month + '-01';
+				var end = year + '-' + month + '-' + day;
+				if (val == 1) {
+					return begin;
+				} else if (val == 2) {
+					return end;
+				}
+			},
+			// 获取风场
+			getWp(reGetWp) {
+				let that = this;
+				that.API.requestData({
+					baseURL: "http://10.155.32.4:9001",
+					subUrl: "benchmarking/wplist",
+					success(res) {
+						that.wpArray = res.data;
+						that.wpId = res.data[0].id;
+						that.wpName = res.data[0].wpId;
+						// that.getWt(that.wpId, reGetWp);
+					}
+				});
+			},
 
 
-    BeginChange (vl) {
-      this.value1 = vl;
-    },
-    EndChange (vl) {
-      this.value2 = vl;
-    },
-    typeChange (vl) {
-      this.type = vl;
-    },
-    // 搜索按钮
-    onClickSearch () {
-      this.requestSafeList();
-    },
-    // 获取限电事间
-    requestSafeList () {
-      let that = this;
+			BeginChange(vl) {
+				this.value1 = vl;
+			},
+			EndChange(vl) {
+				this.value2 = vl;
+			},
+			typeChange(vl) {
+				this.type = vl;
+			},
+			// 搜索按钮
+			onClickSearch() {
+				this.requestSafeList();
+			},
+			// 获取限电事间
+			requestSafeList() {
+				let that = this;
 
-      let data = {
-        tablepar: {
-          pageNum: 1,
-          pageSize: 1000,
-        },
-        beginDate: that.value1,
-        endDate: that.value2,
-        wpId: that.wpId,
-      };
+				let data = {
+					tablepar: {
+						pageNum: 1,
+						pageSize: 1000,
+					},
+					beginDate: that.value1,
+					endDate: that.value2,
+					wpId: that.wpId,
+				};
 
-
-
-      this.API.requestData({
-        method: "POST",
-        subUrl: "/brownouts/getBrownoutsList",
-        data,
-        success (res) {
-          if (res.code == 200) {
-            that.tableData.data = [];
-            if (res.data.list.length) {
-              let data = res.data.list;
-              for (var i = 0; i < data.length; i++) {
-                let obj = {
-                  id: i + 1,
-                  stopTime: new Date(data[i].stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
-                  startTime: new Date(data[i].startTime).formatDate("yyyy-MM-dd hh:mm:ss"),
-                  stopTypeId: data[i].stopTypeId,
-                  stopHours: data[i].stopHours,
-                  lossPower: data[i].lossPower,
-                  description: data[i].description,
-                  wts: data[i].wts,
-                };
-                that.tableData.data.push(obj);
-              }
-            }
-          }
-        },
-      });
-    },
-  },
-};
+				this.API.requestData({
+					method: "POST",
+					subUrl: "/brownouts/getBrownoutsList",
+					data,
+					success(res) {
+						if (res.code == 200) {
+							that.tableData.data = [];
+							if (res.data.list.length) {
+								let data = res.data.list;
+								for (var i = 0; i < data.length; i++) {
+									let obj = {
+										index: i + 1,
+										id: data[i].id,
+										stopTime: new Date(data[i].stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
+										startTime: new Date(data[i].startTime).formatDate("yyyy-MM-dd hh:mm:ss"),
+										stopTypeId: data[i].stopTypeId,
+										stopHours: data[i].stopHours,
+										lossPower: data[i].lossPower,
+										description: data[i].description,
+										wts: data[i].wts,
+									};
+									that.tableData.data.push(obj);
+								}
+							}
+						}
+					},
+				});
+			},
+		},
+	};
 </script>
 
 <style lang="less" scope>
-@titleGray: #9ca5a8;
-@rowGray: #606769;
-@darkBack: #536268;
-.knowledge-2 {
-  .el-select {
-    width: 200px;
-  }
-  .el-input {
-    width: 200px;
-  }
-}
+	@titleGray: #9ca5a8;
+	@rowGray: #606769;
+	@darkBack: #536268;
+
+	.knowledge-2 {
+		.el-select {
+			width: 200px;
+		}
+
+		.el-input {
+			width: 200px;
+		}
+
+		.action {
+			text-decoration: underline;
+			color: @green;
+			cursor: pointer;
+		}
+
+		.com-table.tabLog {
+			tr {
+				height: 40px;
+			}
+
+			.light {
+				width: 10.5rem;
+				color: #05bb4c;
+			}
+		}
+		.header {
+			display: flex;
+			width: 100%;
+			height: 40px;
+			line-height: 40px;
+			background: fade(@gray, 60);
+			color: @white;
+		
+			.herder-info {
+				flex: 1 0 25%;
+				font-size: @fontsize-s;
+				padding-left: 1rem;
+				&:last-child {
+					flex: 1 0 50%;
+				}
+			}
+		}
+	}
 </style>

src/views/warnStatistics/index.vue

@@ -23,7 +23,7 @@
       </div>
     </div>
     <div class="df-table curTable">
-      <el-table :data="tableData.data" height="78vh" max-height="78vh" stripe style="width: 100%" :border="true">
+      <el-table :data="tableData.data" height="88vh" max-height="88vh" stripe style="width: 100%" :border="true">
         <el-table-column :show-overflow-tooltip="true" prop="wtname" label="风机" width="150px"></el-table-column>
         <el-table-column :show-overflow-tooltip="true" :label="tableTitle">
           <el-table-column :show-overflow-tooltip="true" label="近一天">