智慧检修自适应完成

src/App.vue

@@ -5,7 +5,7 @@
     :style="{
       width: `${style.width}px`,
       height: `${style.height}px`,
-      transform: `${style.transform}`,
+      transform: `${style.transform}`
     }"
   >
     <div v-if="isLogined" class="main">
@@ -135,6 +135,7 @@ export default {
       style: {
         width: "1920",
         height: "1080",
+        fontsize: "16px",
         transform: "scaleY(1) scaleX(1) translate(-50%, -50%)",
       },
     };
@@ -192,12 +193,18 @@ export default {
     getScale() {
       const w = window.innerWidth / this.style.width;
       const h = window.innerHeight / this.style.height;
-      return { x: w, y: h };
+      const d = window.devicePixelRatio;
+      //   let f = 16;
+      //   if (d > 1) {
+      //     f = 18;
+      //   }
+      return { x: w, y: h,  };
     },
     setScale() {
       let scale = this.getScale();
       this.style.transform =
         "scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";
+      //   this.style.fontsize = scale.f;
     },
     // 切换子系统事件
     HeaderMenuClick(data) {

src/assets/styles/app.less

@@ -3,23 +3,23 @@
 }
 
 .pd-8 {
-  padding: 0.741vh;
+  padding: 10px;
 }
 
 .pd-t-8 {
-  padding-top: 0.741vh;
+  padding-top: 10px;
 }
 
 .pd-b-8 {
-  padding-bottom: 0.741vh;
+  padding-bottom: 10px;
 }
 
 .pd-l-8 {
-  padding-left: 0.741vh;
+  padding-left: 10px;
 }
 
 .pd-r-8 {
-  padding-right: 0.741vh;
+  padding-right: 10px;
 }
 
 .pd-16 {
@@ -42,42 +42,42 @@
 }
 
 .mg-8 {
-  margin: 0.741vh;
+  margin: 10px;
 }
 
 .mg-t-8 {
-  margin-top: 0.741vh;
+  margin-top: 10px;
 }
 
 .mg-b-8 {
-  margin-bottom: 0.741vh;
+  margin-bottom: 10px;
 }
 
 .mg-l-8 {
-  margin-left: 0.741vh;
+  margin-left: 10px;
 }
 
 .mg-r-8 {
-  margin-right: 0.741vh;
+  margin-right: 10px;
 }
 
 .mg-16 {
-  margin: 1.481vh;
+  margin: 15px;
 }
 .mg-t-16 {
-  margin-top: 1.481vh;
+  margin-top: 15px;
 }
 
 .mg-b-16 {
-  margin-bottom: 1.481vh;
+  margin-bottom: 15px;
 }
 
 .mg-l-16 {
-  margin-left: 1.481vh;
+  margin-left: 15px;
 }
 
 .mg-r-16 {
-  margin-right: 1.481vh;
+  margin-right: 15px;
 }
 
 .scroll {
@@ -100,4 +100,3 @@
 .pointer {
   cursor: pointer;
 }
-

src/assets/styles/el-override/el-table.less

@@ -28,7 +28,7 @@
       //   line-height: 27px;
       height: 37px;
       line-height: 37px;
-      font-size: 12px;
+      //   font-size: 12px;
       color: #b3bdc0;
 
       &.light,
@@ -68,7 +68,7 @@
     thead {
       color: @gray-l;
       font-weight: 500;
-      font-size: @fontsize-s;
+      font-size: 16px;
       border: 0px;
 
       th,
@@ -85,6 +85,7 @@
 
     .el-table__body {
       border: 0px;
+      font-size: 16px;
     }
 
     &.el-table--striped .el-table__body tr.el-table__row--striped {

src/assets/styles/table-form.less

@@ -9,7 +9,7 @@
       background: fade(@darkgray, 20);
     }
     td {
-      padding: 0.741vh;
+      padding: 10px;
       border: 0px;
       font-size: 12px;
       text-align: center;

src/assets/styles/table.less

@@ -26,7 +26,7 @@
         line-height: 30px;
         color: @titleGray;
         font-weight: 400;
-        font-size: @fontsize-s;
+        font-size: 16px;
         position: sticky;
         top: 0;
         cursor: pointer;
@@ -55,7 +55,7 @@
         padding: 4px;
         color: @rowGray;
         text-align: center;
-        font-size: @fontsize-s;
+        font-size: 16px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

src/components/coms/cards/card-1.vue

@@ -17,7 +17,6 @@
       {{ title }}
     </div>
   </div>
-
 </template>
 
 <script>
@@ -93,7 +92,7 @@ export default {
       margin-left: 5px;
 
       .value-text {
-        margin-right: 0.741vh;
+        margin-right: 10px;
         font-family: @font-family-num;
       }
 

src/components/coms/cards/percent-card-2.0.1.vue

@@ -76,7 +76,7 @@ export default {
   }
 
   .card-info {
-    margin: 0 0.741vh;
+    margin: 0 10px;
 
     .card-value {
       font-size: @fontsize-s;
@@ -84,7 +84,7 @@ export default {
       margin-top: 1.1111vh;
 
       .value-text {
-        margin-right: 0.741vh;
+        margin-right: 10px;
         font-family: @font-family-num;
       }
     }

src/components/coms/cards/percent-card-2.vue

@@ -12,11 +12,11 @@
     <div class="card-info">
       <div class="card-value">
         <span class="value-text gray">{{ TotalText }}</span>
-        <span class="white">{{ TotalValue.toFixed(2)  }}</span>
+        <span class="white">{{ TotalValue.toFixed(2) }}</span>
       </div>
       <div class="card-value">
         <span class="value-text gray">{{ ActualText }}</span>
-        <span class="white">{{ ActualValue*10  }}</span>
+        <span class="white">{{ ActualValue * 10 }}</span>
       </div>
     </div>
   </div>
@@ -27,9 +27,7 @@
 // 使用位置 驾驶舱首页 计划电量完成情况 中的百分比卡片
 import PercentBar from "../../chart/bar/percent-bar.vue";
 export default {
-    created() {
-    
-    },
+  created() {},
   components: {
     PercentBar,
   },
@@ -64,10 +62,10 @@ export default {
 
   computed: {
     percent() {
-      return (this.TotalValue=== 0 || this.ActualValue === 0)? 0 :parseInt((this.TotalValue / this.ActualValue) * 100);
+      return this.TotalValue === 0 || this.ActualValue === 0
+        ? 0
+        : parseInt((this.TotalValue / this.ActualValue) * 100);
     },
-
-  
   },
 };
 </script>
@@ -90,7 +88,7 @@ export default {
   .card-info {
     flex: auto;
     align-self: center;
-    margin-left: 0.741vh;
+    margin-left: 10px;
     margin-top: -2.2222vh;
 
     .card-value {
@@ -100,7 +98,7 @@ export default {
       white-space: nowrap;
 
       .value-text {
-        margin-right: 0.741vh;
+        margin-right: 10px;
         font-family: @font-family-num;
       }
     }

src/components/coms/collapse/collapse-list.vue

@@ -138,7 +138,7 @@ export default {
   },
   // 函数
   methods: {
-    actives(x,j) {
+    actives(x, j) {
       this.Nums = j;
       // console.log( this.Nums);
     },
@@ -216,7 +216,7 @@ export default {
     cursor: pointer;
 
     .box-text {
-      padding: 0.741vh 1.481vh;
+      padding: 10px 1.481vh;
       background: fade(@white, 10);
 
       &:hover {
@@ -229,14 +229,14 @@ export default {
       display: none;
 
       .item {
-        padding: 0.741vh 1.481vh;
+        padding: 10px 1.481vh;
         display: flex;
         align-items: center;
 
         .dot {
           display: inline-block;
-          width: 0.741vh;
-          height: 0.741vh;
+          width: 10px;
+          height: 10px;
           margin-right: 1.111vh;
         }
 

src/components/coms/list/list.vue

@@ -1,8 +1,19 @@
 <template>
-  <div class="com-list-box" :class="{ fill: height == 'fill', auto: height == 'auto' }">
+  <div
+    class="com-list-box"
+    :class="{ fill: height == 'fill', auto: height == 'auto' }"
+  >
     <div class="com-list-title" v-if="title != ''">{{ title }}</div>
     <div class="com-list-body">
-      <div class="con-list-item" v-for="(data, index) of list" :key="index" @click="select(index)" :class="data.color + ' ' + (activeIndex == index ? 'active' : '')">{{ data.text }}</div>
+      <div
+        class="con-list-item"
+        v-for="(data, index) of list"
+        :key="index"
+        @click="select(index)"
+        :class="data.color + ' ' + (activeIndex == index ? 'active' : '')"
+      >
+        {{ data.text }}
+      </div>
     </div>
   </div>
 </template>
@@ -75,7 +86,7 @@ export default {
   },
   // 函数
   methods: {
-    select: function(index) {
+    select: function (index) {
       this.activeIndex = index;
       this.$emit("select", this.list[index]);
     },
@@ -154,8 +165,8 @@ export default {
       &::after {
         content: "";
         position: absolute;
-        width: 0.741vh;
-        height: 0.741vh;
+        width: 10px;
+        height: 10px;
         left: 1.111vh;
         top: calc(50% - 0.37vh);
       }

src/components/coms/panel/panel-no-title.vue

@@ -67,7 +67,7 @@ export default {
       color: rgba(255, 255, 255, 0.8);
       flex: 1 1 auto;
       .panel-icon {
-        margin-right: 0.741vh;
+        margin-right: 10px;
       }
     }
 
@@ -75,7 +75,7 @@ export default {
       flex: 0 0 auto;
       color: #fff;
       opacity: 0.3;
-      padding: 0 0.741vh;
+      padding: 0 10px;
       font-size: @fontsize-s;
       letter-spacing: 0.093vh;
     }

src/components/coms/panel/panel2.vue

@@ -117,14 +117,14 @@ export default {
       color: @write;
 
       .panel-icon2 {
-        margin-right: 0.741vh;
+        margin-right: 10px;
       }
     }
 
     .panel-tools2 {
       color: #fff;
       opacity: 0.3;
-      padding: 0 0.741vh;
+      padding: 0 10px;
     }
   }
 

src/components/coms/progress-bar/progress-bar.vue

@@ -1,106 +1,112 @@
 <template>
-    <div class="progress-bar">
-        <div class="progress-bar-header">
-            <div class="progress-bar-title gray-l font-md">{{ title }}</div>
-            <div class="progress-bar-state" :class="'bg-' + color"></div>
-        </div>
-        <div class="progress-bar-body">
-            <div class="progress-bar-name">
-                <div class="progress-bar-text gray font-sm">{{ name }}</div>
-                <div class="progress-bar-progress font-md" :class="color">{{progress}}%</div>
-            </div>
-            <div class="progress-bar-box">
-                <div class="progress-bar-bar" :class="'bg-' + color" :style="'width: ' + progress + '%;'"></div>
-            </div>
+  <div class="progress-bar">
+    <div class="progress-bar-header">
+      <div class="progress-bar-title gray-l font-md">{{ title }}</div>
+      <div class="progress-bar-state" :class="'bg-' + color"></div>
+    </div>
+    <div class="progress-bar-body">
+      <div class="progress-bar-name">
+        <div class="progress-bar-text gray font-sm">{{ name }}</div>
+        <div class="progress-bar-progress font-md" :class="color">
+          {{ progress }}%
         </div>
+      </div>
+      <div class="progress-bar-box">
+        <div
+          class="progress-bar-bar"
+          :class="'bg-' + color"
+          :style="'width: ' + progress + '%;'"
+        ></div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: "progress-bar",
-    componentName: "progress-bar",
-    props: {
-        progress: {
-            type: Number,
-            default: 80,
-        },
-        color: {
-            type: String,
-            default: "green",
-        },
-        title: {
-            type: String,
-            default: "风机",
-        },
-        name: {
-            type: String,
-            default: "风机健康度",
-        },
+  name: "progress-bar",
+  componentName: "progress-bar",
+  props: {
+    progress: {
+      type: Number,
+      default: 80,
+    },
+    color: {
+      type: String,
+      default: "green",
     },
-    data() {},
-    methods: {},
+    title: {
+      type: String,
+      default: "风机",
+    },
+    name: {
+      type: String,
+      default: "风机健康度",
+    },
+  },
+  data() {},
+  methods: {},
 };
 </script>
 
 <style lang="less">
 .progress-bar {
-    width: 100%;
+  width: 100%;
 
-    .progress-bar-header {
-        width: 100%;
-        height: 3.148vh;
-        background: #53626833;
-        display: flex;
-        align-items: center;
-        padding: 0 1.852vh;
+  .progress-bar-header {
+    width: 100%;
+    height: 3.148vh;
+    background: #53626833;
+    display: flex;
+    align-items: center;
+    padding: 0 1.852vh;
 
-        .progress-bar-state {
-            width: 1.111vh;
-            height: 1.111vh;
-            border-radius: 50%;
-            margin-left: auto;
-            position: relative;
+    .progress-bar-state {
+      width: 1.111vh;
+      height: 1.111vh;
+      border-radius: 50%;
+      margin-left: auto;
+      position: relative;
 
-            &::after {
-                content: "";
-                width: 1.667vh;
-                height: 1.667vh;
-                border-radius: 50%;
-                background: #53626833;
-                position: absolute;
-                top: -0.278vh;
-                left: -0.278vh;
-            }
-        }
+      &::after {
+        content: "";
+        width: 1.667vh;
+        height: 1.667vh;
+        border-radius: 50%;
+        background: #53626833;
+        position: absolute;
+        top: -0.278vh;
+        left: -0.278vh;
+      }
     }
+  }
 
-    .progress-bar-body {
-        padding: 11px 20px;
+  .progress-bar-body {
+    padding: 11px 20px;
 
-        .progress-bar-name {
-            display: flex;
+    .progress-bar-name {
+      display: flex;
 
-            .progress-bar-progress {
-                margin-left: auto;
-            }
-        }
+      .progress-bar-progress {
+        margin-left: auto;
+      }
+    }
 
-        .progress-bar-box {
-            width: 100%;
-            height: 0.741vh;
-            background: #53626833;
-            margin-top: 0.741vh;
-            position: relative;
+    .progress-bar-box {
+      width: 100%;
+      height: 10px;
+      background: #53626833;
+      margin-top: 10px;
+      position: relative;
 
-            .progress-bar-bar {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                top: 0;
-                left: 0;
-            }
-        }
+      .progress-bar-bar {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+      }
     }
+  }
 }
 </style>

src/components/coms/table/table-page.vue

@@ -1,333 +1,346 @@
 <template>
-    <div class="table-page">
-        <div class="toolbar">
-            <div class="title" v-if="grid.title.show">
-                <i :class="grid.title.icon"></i>
-                <span>{{grid.title.text}}</span>
-            </div>
-            <div class="page-bar">
-                <span class="btn" @click="firstPage()">首页</span>
-                <span class="btn" @click="prevPage()">上一页</span>
-                <span v-for="(bar, index) of pageBar" :key="index" @click="gotoPage(bar)"
-                    :class="bar.type + ' ' + (bar.type != 'dot' && page == bar.text ? 'active' : '')">{{bar.text}}</span>
-                <span class="btn" @click="nextPage()">下一页</span>
-                <span class="btn" @click="lastPage()">尾页</span>
-            </div>
-            <div class="page-num">
-                <span>共</span>
-                <span>{{pages}}</span>
-                <span>页</span>
-                <span class="total">{{grid.data.total}}</span>
-                <span>条数据</span>
-            </div>
-            <div class="return" v-if="showReturn" @click="onReturn">
-                返回
-            </div>
-        </div>
-        <div class="sub-title" v-if="grid.subTitle.show">
-            <div class="text">{{grid.subTitle.text}}</div>
-            <div class="sub-text">{{grid.subTitle.subText}}</div>
-        </div>
-        <div class="ct">
-            <table class="com-table">
-                <thead>
-                    <tr>
-                        <th v-for="(col, index) of grid.column" :key="index" :class="{ 'light': col.is_light }">{{col.name}}
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="(row, index) of data" :key="index">
-                        <td v-for="(col, i) of grid.column" :key="i" :class="{ 'light': col.is_light || row.is_light, 'num': col.is_num }">
-                            {{row[col.field]}}</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+  <div class="table-page">
+    <div class="toolbar">
+      <div class="title" v-if="grid.title.show">
+        <i :class="grid.title.icon"></i>
+        <span>{{ grid.title.text }}</span>
+      </div>
+      <div class="page-bar">
+        <span class="btn" @click="firstPage()">首页</span>
+        <span class="btn" @click="prevPage()">上一页</span>
+        <span
+          v-for="(bar, index) of pageBar"
+          :key="index"
+          @click="gotoPage(bar)"
+          :class="
+            bar.type +
+            ' ' +
+            (bar.type != 'dot' && page == bar.text ? 'active' : '')
+          "
+          >{{ bar.text }}</span
+        >
+        <span class="btn" @click="nextPage()">下一页</span>
+        <span class="btn" @click="lastPage()">尾页</span>
+      </div>
+      <div class="page-num">
+        <span>共</span>
+        <span>{{ pages }}</span>
+        <span>页</span>
+        <span class="total">{{ grid.data.total }}</span>
+        <span>条数据</span>
+      </div>
+      <div class="return" v-if="showReturn" @click="onReturn">返回</div>
     </div>
-
+    <div class="sub-title" v-if="grid.subTitle.show">
+      <div class="text">{{ grid.subTitle.text }}</div>
+      <div class="sub-text">{{ grid.subTitle.subText }}</div>
+    </div>
+    <div class="ct">
+      <table class="com-table">
+        <thead>
+          <tr>
+            <th
+              v-for="(col, index) of grid.column"
+              :key="index"
+              :class="{ light: col.is_light }"
+            >
+              {{ col.name }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, index) of data" :key="index">
+            <td
+              v-for="(col, i) of grid.column"
+              :key="i"
+              :class="{ light: col.is_light || row.is_light, num: col.is_num }"
+            >
+              {{ row[col.field] }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        // 名称
-        name: "ComTable",
-        // 使用组件
-        components: {},
-        // 传入参数
-        props: {
-            grid: Object,
-            showReturn: Boolean
-        },
-        // 自定义事件
-        emits: {
-            onReturn: null,
-        },
-        // 数据
-        data() {
-            return {
-                pages: 0,
-                page: 1,
-                pageBar: [],
-                data: []
-            }
-        },
-        // 函数
-        methods: {
-            createPageBar: function() {
-                let pb = [];
-                const p = this.page;
-                const ps = this.pages;
-                if (p >= 4) {
-                    pb.push({
-                        type: "dot",
-                        text: "...",
-                    })
-                }
-                for (let i = p - 2; i <= p + 2 && i <= ps; i++) {
-                    if (i <= 0) {
-                        continue;
-                    }
-                    pb.push({
-                        type: "btn num",
-                        text: i,
-                    })
-                }
-                if (ps > p + 2) {
-                    pb.push({
-                        type: "dot",
-                        text: "...",
-                    })
-                }
-                this.pageBar = pb;
-            },
-            createData: function () {
-                let d = [];
-                let p = this.page;
-                let l = this.grid.limit;
-                let t = this.grid.data.list.length;
-                for (let i = l * (p - 1); i < l * (p - 1) + l && i < t; i++) {
-                    d.push(this.grid.data.list[i]);
-                }
-                this.data = d;
-            },
-            gotoPage: function(item) {
-                if (item.type != 'dot') {
-                    this.page = item.text;
-                    this.createPageBar();
-                    this.createData();
-                }
-            },
-            prevPage: function() {
-                let p = this.page - 1;
-                if (p > 0) {
-                    this.page = p;
-                    this.createPageBar();
-                    this.createData();
-                }
-            },
-            nextPage: function() {
-                let p = this.page + 1;
-                if (p <= this.pages) {
-                    this.page = p;
-                    this.createPageBar();
-                    this.createData();
-                }
-            },
-            firstPage: function() {
-                this.page = 1;
-                this.createPageBar();
-                this.createData();
-            },
-            lastPage: function() {
-                this.page = this.pages;
-                this.createPageBar();
-                this.createData();
-            },
-            onReturn: function() {
-                this.$emit('onReturn');
-            }
-        },
-        // 生命周期钩子
-        beforeCreate() {
-            // 创建前
-        },
-        created() {
-            // 创建后
-            this.pages = Math.ceil(this.grid.data.list.length / this.grid.limit);
-            this.createPageBar();
-            this.createData();
-        },
-        beforeMount() {
-            // 渲染前
-        },
-        mounted() {
-            // 渲染后
-        },
-        beforeUpdate() {
-            // 数据更新前
-        },
-        updated() {
-            // 数据更新后
-        },
-    }
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    grid: Object,
+    showReturn: Boolean,
+  },
+  // 自定义事件
+  emits: {
+    onReturn: null,
+  },
+  // 数据
+  data() {
+    return {
+      pages: 0,
+      page: 1,
+      pageBar: [],
+      data: [],
+    };
+  },
+  // 函数
+  methods: {
+    createPageBar: function () {
+      let pb = [];
+      const p = this.page;
+      const ps = this.pages;
+      if (p >= 4) {
+        pb.push({
+          type: "dot",
+          text: "...",
+        });
+      }
+      for (let i = p - 2; i <= p + 2 && i <= ps; i++) {
+        if (i <= 0) {
+          continue;
+        }
+        pb.push({
+          type: "btn num",
+          text: i,
+        });
+      }
+      if (ps > p + 2) {
+        pb.push({
+          type: "dot",
+          text: "...",
+        });
+      }
+      this.pageBar = pb;
+    },
+    createData: function () {
+      let d = [];
+      let p = this.page;
+      let l = this.grid.limit;
+      let t = this.grid.data.list.length;
+      for (let i = l * (p - 1); i < l * (p - 1) + l && i < t; i++) {
+        d.push(this.grid.data.list[i]);
+      }
+      this.data = d;
+    },
+    gotoPage: function (item) {
+      if (item.type != "dot") {
+        this.page = item.text;
+        this.createPageBar();
+        this.createData();
+      }
+    },
+    prevPage: function () {
+      let p = this.page - 1;
+      if (p > 0) {
+        this.page = p;
+        this.createPageBar();
+        this.createData();
+      }
+    },
+    nextPage: function () {
+      let p = this.page + 1;
+      if (p <= this.pages) {
+        this.page = p;
+        this.createPageBar();
+        this.createData();
+      }
+    },
+    firstPage: function () {
+      this.page = 1;
+      this.createPageBar();
+      this.createData();
+    },
+    lastPage: function () {
+      this.page = this.pages;
+      this.createPageBar();
+      this.createData();
+    },
+    onReturn: function () {
+      this.$emit("onReturn");
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+    this.pages = Math.ceil(this.grid.data.list.length / this.grid.limit);
+    this.createPageBar();
+    this.createData();
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
 </script>
 
 <style lang="less">
-    @titleGray: #9CA5A8;
-    @rowGray: #606769;
-    @darkBack: #536268;
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
 
-    .table-page {
-        display: flex;
-        flex-direction: column;
-        
-        .toolbar {
-            background-color: fade(@darkgray, 40%);
-            display: flex;
+.table-page {
+  display: flex;
+  flex-direction: column;
 
-            .title {
-                padding: 0.741vh 0;
-                color: @green;
-                font-size: @fontsize;
+  .toolbar {
+    background-color: fade(@darkgray, 40%);
+    display: flex;
 
-                i {
-                    margin: 0 0.556vh 0 1.481vh;
-                }
-            }
+    .title {
+      padding: 10px 0;
+      color: @green;
+      font-size: @fontsize;
 
-            .page-bar {
-                margin-left: auto;
-                font-size: @fontsize;
-                color: @gray;
-                display: flex;
-                align-items: center;
+      i {
+        margin: 0 0.556vh 0 1.481vh;
+      }
+    }
 
-                span {
-                    border-radius: 0.370vh;
-                    padding: 0.185vh 0.278vh;
-                    margin-right: 0.556vh;
+    .page-bar {
+      margin-left: auto;
+      font-size: @fontsize;
+      color: @gray;
+      display: flex;
+      align-items: center;
 
-                    &.btn {
-                        cursor: pointer;
+      span {
+        border-radius: 0.37vh;
+        padding: 0.185vh 0.278vh;
+        margin-right: 0.556vh;
 
-                        &:hover {
-                            color: @green;
-                            border-color: @green;
-                        }
-                    }
+        &.btn {
+          cursor: pointer;
+
+          &:hover {
+            color: @green;
+            border-color: @green;
+          }
+        }
+      }
+
+      .num {
+        font-weight: 600;
+        width: 2.315vh;
+        text-align: center;
+        border: 0.093vh solid @darkgray;
+
+        &.active {
+          color: @green;
+          border-color: @green;
+        }
+      }
+    }
 
-                }
+    .page-num {
+      margin-left: 1.481vh;
+      margin-right: 1.481vh;
+      font-size: @fontsize;
+      color: @gray;
+      display: flex;
+      align-items: center;
 
-                .num {
-                    font-weight: 600;
-                    width: 2.315vh;
-                    text-align: center;
-                    border: 0.093vh solid @darkgray;
+      .total {
+        margin-left: 10px;
+      }
+    }
 
-                    &.active {
-                        color: @green;
-                        border-color: @green;
-                    }
-                }
+    .return {
+      margin-right: 1.481vh;
+      font-size: @fontsize;
+      color: @gray;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
 
-            }
+      &:hover {
+        color: @green;
+      }
+    }
+  }
 
-            .page-num {
-                margin-left: 1.481vh;
-                margin-right: 1.481vh;
-                font-size: @fontsize;
-                color: @gray;
-                display: flex;
-                align-items: center;
+  .sub-title {
+    background-color: fade(@darkgray, 40%);
+    display: flex;
+    padding: 10px 2.222vh;
+    font-size: @fontsize;
+    margin-top: 1.481vh;
 
-                .total {
-                    margin-left: 0.741vh;
-                }
-            }
+    .text {
+      color: @write;
+    }
 
-            .return {
-                margin-right: 1.481vh;
-                font-size: @fontsize;
-                color: @gray;
-                display: flex;
-                align-items: center;
-                cursor: pointer;
+    .sub-text {
+      margin-left: auto;
+      color: @write;
+    }
+  }
 
-                &:hover {
-                    color: @green;
-                }
-            }
-        }
+  .ct {
+    flex-grow: 1;
+    overflow: auto;
+  }
 
-        .sub-title {
-            background-color: fade(@darkgray, 40%);
-            display: flex;
-            padding: 0.741vh 2.222vh;
-            font-size: @fontsize;
-            margin-top: 1.481vh;
+  .com-table {
+    width: 100%;
+    border-collapse: collapse;
 
-            .text {
-                color: @write;
-            }
+    thead {
+      tr {
+        th {
+          background-color: fade(@darkBack, 60%);
+          padding: 0.556vh 0;
+          color: @titleGray;
+          font-weight: 400;
+          font-size: @fontsize-s;
+          position: sticky;
+          top: 0;
 
-            .sub-text {
-                margin-left: auto;
-                color: @write;
-            }
+          &.light {
+            color: @green;
+          }
         }
-        
-        .ct {
-            flex-grow: 1;
-            overflow: auto;
+      }
+    }
+
+    tbody {
+      tr {
+        &:nth-child(2n) {
+          background-color: fade(@rowGray, 20%);
         }
-        
-        .com-table {
-            width: 100%;
-            border-collapse: collapse;
-        
-            thead {
-                tr {
-                    th {
-                        background-color: fade(@darkBack, 60%);
-                        padding: 0.556vh 0;
-                        color: @titleGray;
-                        font-weight: 400;
-                        font-size: @fontsize-s;
-                        position: sticky;
-                        top: 0;
-                        
-                        &.light {
-                            color: @green;
-                        }
-                    }
-                }
-            }
-        
-            tbody {
-                tr {
-                    &:nth-child(2n) {
-                        background-color: fade(@rowGray, 20%);
-                    }
-        
-                    td {
-                        padding: 0.556vh 0;
-                        color: @rowGray;
-                        text-align: center;
-                        font-size: @fontsize-s;
-                        
-                        &.light {
-                            color: @green;
-                        }
-                        
-                        &.num {
-                            font-family: "Bicubik";
-                            font-weight: 400;
-                        }
-                    }
-                }
-            }
+
+        td {
+          padding: 0.556vh 0;
+          color: @rowGray;
+          text-align: center;
+          font-size: @fontsize-s;
+
+          &.light {
+            color: @green;
+          }
+
+          &.num {
+            font-family: "Bicubik";
+            font-weight: 400;
+          }
         }
-        
+      }
     }
+  }
+}
 </style>

src/components/coms/table/table-qc.vue

@@ -13,31 +13,31 @@
         </th>
       </tr>
     </thead>
-    <el-scrollbar>
-      <tbody :style="{ height: height }">
-        <tr v-for="(row, index) of tableData" :key="index">
-          <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,
-            }"
-            @mouseenter="hover(row, col)"
-            @mouseleave="leave()"
-          >
-            <component
-              :is="col.type ? col.type : 'div'"
-              v-bind="col.props"
-              v-html="template(col, row[col.field])"
-              @click="onClick(col, row)"
-            ></component>
-          </td>
-        </tr>
-      </tbody>
-    </el-scrollbar>
+    <!-- <el-scrollbar> -->
+    <tbody>
+      <tr v-for="(row, index) of tableData" :key="index">
+        <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,
+          }"
+          @mouseenter="hover(row, col)"
+          @mouseleave="leave()"
+        >
+          <component
+            :is="col.type ? col.type : 'div'"
+            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"
@@ -504,9 +504,19 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .chart {
   width: 100%;
   height: 500px;
 }
+::v-deep.com-table {
+  height: calc(100% - 51px);
+  thead {
+    height: 24px;
+  }
+  tbody {
+    height: calc(100% - 24px);
+    overflow-y: auto;
+  }
+}
 </style>

src/components/coms/table/table-span.vue

@@ -2,12 +2,28 @@
   <table class="com-table">
     <thead>
       <tr>
-        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}<br v-if="col.unit != ''" />{{ col.unit }}</th>
+        <th
+          v-for="(col, index) of data.column"
+          :key="index"
+          :class="{ light: col.is_light }"
+        >
+          {{ col.name }}<br v-if="col.unit != ''" />{{ col.unit }}
+        </th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="(row, index) of data.data" :key="index">
-        <td :rowspan="rowspan(row, col)" :colspan="colspan(row, col)" v-for="(col, i) of data.column" :key="i" :class="{ light: col.is_light || row.is_light, num: col.is_num, remove: row[col.field] == '' }">
+        <td
+          :rowspan="rowspan(row, col)"
+          :colspan="colspan(row, col)"
+          v-for="(col, i) of data.column"
+          :key="i"
+          :class="{
+            light: col.is_light || row.is_light,
+            num: col.is_num,
+            remove: row[col.field] == '',
+          }"
+        >
           {{ row[col.field] || "a" }}
         </td>
       </tr>
@@ -34,7 +50,7 @@ export default {
   computed: {},
   // 函数
   methods: {
-    rowspan: function(row, col) {
+    rowspan: function (row, col) {
       if (row.row_span.length == 0) {
         return 1;
       } else {
@@ -46,7 +62,7 @@ export default {
         }
       }
     },
-    colspan: function(row, col) {
+    colspan: function (row, col) {
       if (row.col_span.length == 0) {
         return 1;
       } else {
@@ -94,7 +110,7 @@ export default {
     tr {
       th {
         background-color: fade(@darkBack, 60%);
-        padding: 0.741vh 0;
+        padding: 10px 0;
         color: @titleGray;
         font-weight: 400;
         font-size: @fontsize-s;

src/components/curveAnalyse/panel.vue

@@ -84,14 +84,14 @@ export default {
       color: fade(#fff, 75);
       flex: 1 1 auto;
       .panel-icon {
-        margin-right: 0.741vh;
+        margin-right: 10px;
       }
     }
 
     .panel-tools {
       flex: 0 0 auto;
       color: #ffffff4d;
-      padding: 0 0.741vh;
+      padding: 0 10px;
       font-size: 12px;
       letter-spacing: 0.093vh;
     }

src/views/Demo.vue

@@ -353,9 +353,40 @@
   <!-- 表格合并 -->
 
   <div v-if="currTab == 6" style="height: 70%">
-    <el-button type="text" @click="()=>{ tableMergeStyleShow = !tableMergeStyleShow; BASE.showMsg({type:'success',msg:'表格样式已切换'}); }">切换表格样式</el-button>
-    <el-button type="text" @click="()=>{ BASE.showMsg({type:'success',msg:'数据已刷新'}); createMergeTable(createSum); }">刷新表格数据</el-button>
-    <el-button type="text" @click="()=>{ createSum = !createSum; BASE.showMsg({type:createSum ? 'success' : 'warning',msg:`合计行已${createSum ? '显示' : '隐藏'}`}); createMergeTable(createSum); }">{{createSum ? "隐藏" : "显示"}}表格合计</el-button>
+    <el-button
+      type="text"
+      @click="
+        () => {
+          tableMergeStyleShow = !tableMergeStyleShow;
+          BASE.showMsg({ type: 'success', msg: '表格样式已切换' });
+        }
+      "
+      >切换表格样式</el-button
+    >
+    <el-button
+      type="text"
+      @click="
+        () => {
+          BASE.showMsg({ type: 'success', msg: '数据已刷新' });
+          createMergeTable(createSum);
+        }
+      "
+      >刷新表格数据</el-button
+    >
+    <el-button
+      type="text"
+      @click="
+        () => {
+          createSum = !createSum;
+          BASE.showMsg({
+            type: createSum ? 'success' : 'warning',
+            msg: `合计行已${createSum ? '显示' : '隐藏'}`,
+          });
+          createMergeTable(createSum);
+        }
+      "
+      >{{ createSum ? "隐藏" : "显示" }}表格合计</el-button
+    >
     <el-table
       style="width: 100%"
       height="100%"
@@ -2844,7 +2875,7 @@ export default {
       ],
       tableMergeData: [],
       createSum: false,
-      tableMergeStyleShow:true,
+      tableMergeStyleShow: true,
     };
   },
   created() {
@@ -2874,13 +2905,13 @@ export default {
   .tool-block {
     display: flex;
     align-items: center;
-    margin-left: 0.741vh;
+    margin-left: 10px;
 
     .legend {
       flex: auto;
-      width: 0.741vh;
-      height: 0.741vh;
-      margin-right: 0.741vh;
+      width: 10px;
+      height: 10px;
+      margin-right: 10px;
 
       &.long {
         width: 2.963vh;

src/views/HealthControl/Health4.vue

@@ -86,7 +86,7 @@ export default {
   .page-common-body {
     display: flex;
     flex-direction: row;
-    margin-top: 0.741vh;
+    margin-top: 10px;
 
     .page-common-body-router {
       overflow: auto;
@@ -134,7 +134,7 @@ export default {
           width: 3.889vh;
           height: 3.889vh;
           border-radius: 0.278vh;
-          margin-top: 0.741vh;
+          margin-top: 10px;
           display: flex;
           align-items: center;
           justify-content: center;

src/views/HealthControl/HealthTab1.vue

@@ -270,8 +270,11 @@ export default {
 
 <style lang="less" scope>
 .health-tab-1 {
+  height: 100%;
+
   .power-info {
     display: flex;
+    height: 350px;
     .info-tab {
       flex: 0 0 156px;
       display: flex;
@@ -367,6 +370,10 @@ export default {
   }
 
   .health-report {
+    height: calc(100% - 350px - 15px);
+    .health-report-panel {
+      height: 100%;
+    }
     // 健康报告 按钮样式
     .actions {
       display: flex;
@@ -404,7 +411,7 @@ export default {
     .report-items {
       display: flex;
       flex-wrap: wrap;
-      height: calc(100vh - 592px);
+      height: calc(100% - 30px);
 
       .item {
         flex: 0 0 calc(100% / 6 - 16px);
@@ -442,6 +449,7 @@ export default {
           font-size: @fontsize-s;
           color: @font-color;
           line-height: 1.5;
+          height: calc(100% - 37px);
           p {
             margin: 0;
             line-height: 2;

src/views/HealthControl/energyEfficAnalyse/evaluationAnalysis/index.vue

@@ -72,7 +72,7 @@
       class="custom-table"
       :data="tableData"
       style="width: 100%"
-      height="89vh"
+      height="calc(100% - 35px)"
     >
       <el-table-column type="index" label="序号" :width="75" align="center" />
       <el-table-column
@@ -234,9 +234,12 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.draught-fan-list {
+  height: 100%;
+  padding: 10px 20px 15px 20px;
+}
 .tableBox {
   width: 100%;
   overflow: auto;
 }
 </style>
-  

src/views/HealthControl/energyEfficAnalyse/healthPowerCurve/index.vue

@@ -61,14 +61,16 @@
         <button class="btn green" @click="search">搜索</button>
       </div>
     </div>
-    <ScatterLineChart
-      xTitle="风速(m/s)"
-      yTitle="功率(kw)"
-      :showLegend="true"
-      :height="'calc(100vh - 40px)'"
-      :lineData="chartLineData"
-      :data="chartData"
-    />
+    <div style="height: calc(100% - 40px); padding-bottom: 10px">
+      <ScatterLineChart
+        xTitle="风速(m/s)"
+        yTitle="功率(kw)"
+        :showLegend="true"
+        height="100%"
+        :lineData="chartLineData"
+        :data="chartData"
+      />
+    </div>
   </div>
 </template>
 
@@ -224,7 +226,7 @@ export default {
   height: 100%;
   display: flex;
   flex-direction: column;
-
+  padding: 10px 20px;
   .btn-group-tabs {
     display: flex;
     flex-direction: row;

src/views/HealthControl/energyEfficAnalyse/malfunctionAnalysis/index.vue

@@ -72,7 +72,7 @@
       class="custom-table"
       :data="tableData"
       style="width: 100%"
-      height="89vh"
+      height="calc(100% - 35px)"
     >
       <el-table-column type="index" label="序号" :width="75" align="center" />
       <el-table-column
@@ -118,7 +118,7 @@
 import api from "@api/economic/index.js";
 import axios from "axios";
 export default {
-    name:'malfunctionAnalysis',
+  name: "malfunctionAnalysis",
   data() {
     return {
       wpId: "",
@@ -235,9 +235,9 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.tableBox {
-  width: 100%;
-  overflow: auto;
+.draught-fan-list {
+  height: 100%;
+  padding: 10px 20px 15px 20px;
 }
 </style>
-  
+

src/views/HealthControl/energyEfficAnalyse/powerAnalysis/index.vue

@@ -72,7 +72,7 @@
       class="custom-table"
       :data="tableData"
       style="width: 100%"
-      height="89vh"
+      height="calc(100% - 35px)"
     >
       <el-table-column type="index" label="序号" :width="75" align="center" />
       <el-table-column
@@ -235,6 +235,10 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.draught-fan-list {
+  height: 100%;
+  padding: 10px 20px 15px 20px;
+}
 .tableBox {
   width: 100%;
   overflow: auto;

src/views/HealthControl/energyEfficAnalyse/qxpclfx/index.vue

@@ -1,5 +1,5 @@
-  <template>
-  <div>
+<template>
+  <div style="height: 100%; padding: 10px 20px">
     <div class="query mg-b-8">
       <div class="query-items">
         <div
@@ -57,7 +57,6 @@
       <ComTable
         :data="tableData"
         :pageSize="20"
-        height="73vh"
         v-loading="tableLoading"
         element-loading-text="拼命加载中.."
         element-loading-background="rgba(0, 0, 0, 0.8)"
@@ -202,6 +201,9 @@ export default {
 };
 </script>
 <style scoped>
+.table-box {
+  height: calc(100% - 80px);
+}
 .newsDiv {
   color: rgba(255, 255, 255, 0.75);
   background-color: rgba(255, 255, 255, 0.1);
@@ -263,4 +265,4 @@ export default {
   margin-bottom: 8px;
   padding: 1vh;
 }
-</style>
+</style>

src/views/HealthControl/energyEfficAnalyse/temperatureAnalysis/index.vue

@@ -72,7 +72,7 @@
       class="custom-table"
       :data="tableData"
       style="width: 100%"
-      height="89vh"
+      height="calc(100% - 35px)"
     >
       <el-table-column type="index" label="序号" :width="75" align="center" />
       <el-table-column
@@ -234,9 +234,12 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.draught-fan-list {
+  height: 100%;
+  padding: 10px 20px 15px 20px;
+}
 .tableBox {
   width: 100%;
   overflow: auto;
 }
 </style>
-  

src/views/HealthControl/energyEfficAnalyse/wtSaturability/index.vue

@@ -1,9 +1,27 @@
 <template>
   <div class="health">
     <div class="selections mg-b-16">
-      <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">总功率情况</div>
-      <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">月功率情况</div>
-      <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">日功率情况</div>
+      <div
+        class="item"
+        @click="tabSelect(0)"
+        :class="{ active: tabIndex == 0 }"
+      >
+        总功率情况
+      </div>
+      <div
+        class="item"
+        @click="tabSelect(1)"
+        :class="{ active: tabIndex == 1 }"
+      >
+        月功率情况
+      </div>
+      <div
+        class="item"
+        @click="tabSelect(2)"
+        :class="{ active: tabIndex == 2 }"
+      >
+        日功率情况
+      </div>
     </div>
     <div class="curHeight" v-if="tabIndex == 0">
       <Tab1 />
@@ -29,11 +47,11 @@ export default {
   components: {
     Tab1,
     Tab2,
-    Tab3
+    Tab3,
   },
 
   // 数据
-  data () {
+  data() {
     const that = this;
     return {
       tabIndex: 0,
@@ -42,27 +60,27 @@ export default {
 
   // 函数
   methods: {
-    tabSelect (state) {
+    tabSelect(state) {
       this.tabIndex = state;
     },
     // 请求服务
-    requestData () {
-      
-    }
+    requestData() {},
   },
 
-  created () {
+  created() {
     this.requestData();
   },
 
-  mounted () { },
+  mounted() {},
 
-  unmounted () { },
+  unmounted() {},
 };
 </script>
 
 <style lang="less" scope>
 .health {
+  height: 100%;
+  padding: 10px 20px;
   .selections {
     display: flex;
 
@@ -87,7 +105,7 @@ export default {
   }
 
   .curHeight {
-    height: 87vh;
+    height: calc(100% - 48px);
   }
 }
 </style>

src/views/HealthControl/energyEfficAnalyse/wtSaturability/tab1.vue

@@ -49,7 +49,7 @@
       </div>
     </div>
     <div class="df-table">
-      <ComTable height="47vh" style="height: 47vh" :data="tableData"></ComTable>
+      <ComTable :data="tableData"></ComTable>
       <div class="paginationBox">
         <el-pagination
           @current-change="currentChange"
@@ -61,7 +61,7 @@
       </div>
     </div>
     <Mlc
-      height="300px"
+      height="350px"
       :list="chartData"
       :units="chartUnit"
       :showLegend="true"
@@ -288,44 +288,35 @@ export default {
   display: flex;
   flex-direction: column;
 
-  .btn-group-tabs {
-    display: flex;
-    flex-direction: row;
-
-    .photovoltaic {
-      margin-left: 1.481vh;
-    }
-  }
-
   .df-table {
-    border: 0.093vh solid fade(@darkgray, 50%);
+    border: 1px solid fade(@darkgray, 50%);
     position: relative;
     overflow: auto;
     flex-grow: 1;
-    margin-top: 1.481vh;
-    height: 30vh;
-
+    height: calc(100% - 51px - 350px);
+    padding-bottom: 10px;
+    margin-bottom: 10px;
     &:before {
       content: "";
-      width: 0.37vh;
-      height: 0.37vh;
+      width: 3px;
+      height: 3px;
       background: @write;
       position: absolute;
-      left: 0.278vh;
-      top: 0.278vh;
+      left: 3px;
+      top: 3px;
     }
-
-    tbody {
-      height: calc(100vh - 166px);
+    .com-table {
+      height: calc(100% - 44px);
+      .el-scrollbar {
+        height: calc(100% - 33px);
+      }
+    }
+    .paginationBox {
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
     }
   }
 }
-
-.paginationBox {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 10px;
-}
 </style>

src/views/HealthControl/energyEfficAnalyse/wtSaturability/tab2.vue

@@ -62,7 +62,7 @@
       </div>
     </div>
     <div class="df-table">
-      <ComTable height="47vh" style="height: 47vh" :data="tableData"></ComTable>
+      <ComTable :data="tableData"></ComTable>
       <div class="paginationBox">
         <el-pagination
           @current-change="currentChange"
@@ -74,7 +74,7 @@
       </div>
     </div>
     <Mlc
-      height="300px"
+      height="350px"
       :list="chartData"
       :units="chartUnit"
       :showLegend="true"
@@ -146,7 +146,7 @@ export default {
       wpId: "",
       wtId: "",
       currentPage: 1,
-      pageSize: 10,
+      pageSize: 11,
       total: 0,
       editItem: {},
       dialogShow: false,
@@ -257,7 +257,7 @@ export default {
           year: new Date(this.recorddate).getFullYear(),
           month: new Date(this.recorddate).getMonth() + 1,
           pageNum: this.currentPage,
-          pageSize: 10,
+          pageSize: 11,
         })
         .then((res) => {
           if (res.data) this.tableData.data = res.data.records;
@@ -381,44 +381,37 @@ export default {
   display: flex;
   flex-direction: column;
 
-  .btn-group-tabs {
-    display: flex;
-    flex-direction: row;
-
-    .photovoltaic {
-      margin-left: 1.481vh;
-    }
-  }
-
   .df-table {
-    border: 0.093vh solid fade(@darkgray, 50%);
+    border: 1px solid fade(@darkgray, 50%);
     position: relative;
     overflow: auto;
     flex-grow: 1;
-    margin-top: 1.481vh;
-    height: 30vh;
+    height: calc(100% - 51px - 350px);
+    padding-bottom: 10px;
+    margin-bottom: 10px;
 
     &:before {
       content: "";
-      width: 0.37vh;
-      height: 0.37vh;
+      width: 3px;
+      height: 3px;
       background: @write;
       position: absolute;
-      left: 0.278vh;
-      top: 0.278vh;
+      left: 3px;
+      top: 3px;
     }
 
-    tbody {
-      height: calc(100vh - 166px);
+    .com-table {
+      height: calc(100% - 44px);
+      .el-scrollbar {
+        height: calc(100% - 33px);
+      }
+    }
+    .paginationBox {
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
     }
   }
 }
-
-.paginationBox {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 10px;
-}
 </style>

src/views/HealthControl/energyEfficAnalyse/wtSaturability/tab3.vue

@@ -62,7 +62,7 @@
       </div>
     </div>
     <div class="df-table">
-      <ComTable height="47vh" style="height: 47vh" :data="tableData"></ComTable>
+      <ComTable :data="tableData"></ComTable>
       <div class="paginationBox">
         <el-pagination
           @current-change="currentChange"
@@ -74,7 +74,7 @@
       </div>
     </div>
     <Mlc
-      height="300px"
+      height="350px"
       :list="chartData"
       :units="chartUnit"
       :showLegend="true"
@@ -83,7 +83,7 @@
       title="月风电功率编辑"
       v-model="dialogShow"
       width="85%"
-      top="10vh"
+      top="40px"
       custom-class="modal"
       :close-on-click-modal="true"
     >
@@ -379,44 +379,37 @@ export default {
   display: flex;
   flex-direction: column;
 
-  .btn-group-tabs {
-    display: flex;
-    flex-direction: row;
-
-    .photovoltaic {
-      margin-left: 1.481vh;
-    }
-  }
-
   .df-table {
-    border: 0.093vh solid fade(@darkgray, 50%);
+    border: 1px solid fade(@darkgray, 50%);
     position: relative;
     overflow: auto;
     flex-grow: 1;
-    margin-top: 1.481vh;
-    height: 30vh;
+    height: calc(100% - 51px - 350px);
+    padding-bottom: 10px;
+    margin-bottom: 10px;
 
     &:before {
       content: "";
-      width: 0.37vh;
-      height: 0.37vh;
+      width: 3px;
+      height: 3px;
       background: @write;
       position: absolute;
-      left: 0.278vh;
-      top: 0.278vh;
+      left: 3px;
+      top: 3px;
     }
 
-    tbody {
-      height: calc(100vh - 166px);
+    .com-table {
+      height: calc(100% - 44px);
+      .el-scrollbar {
+        height: calc(100% - 33px);
+      }
+    }
+    .paginationBox {
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
     }
   }
 }
-
-.paginationBox {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 10px;
-}
 </style>

src/views/HealthControl/healthDetail/index.vue

@@ -94,7 +94,7 @@ export default {
   .page-common-body {
     display: flex;
     flex-direction: row;
-    margin-top: 0.741vh;
+    margin-top: 10px;
 
     .page-common-body-router {
       overflow: auto;
@@ -142,7 +142,7 @@ export default {
           width: 3.889vh;
           height: 3.889vh;
           border-radius: 0.278vh;
-          margin-top: 0.741vh;
+          margin-top: 10px;
           display: flex;
           align-items: center;
           justify-content: center;

src/views/HealthControl/healthManagement/badStateAnalyse/index.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="pageBox">
     <wt-chooser @change="switchWt" :wpId="wpId" :wtId="wtId"></wt-chooser>
-    <simple-line-chart
-      :height="'100px'"
+    <div
+      style="height: calc((100% - 35px) / 5)"
       v-for="(item, index) in chartData"
       :key="index"
-      :title="item.title"
-      :data="item.data"
-      :color="item.color"
-      :lineTitle="item.lineTitle"
-    />
+    >
+      <simple-line-chart
+        width="100%"
+        height="100%"
+        :title="item.title"
+        :data="item.data"
+        :color="item.color"
+        :lineTitle="item.lineTitle"
+      />
+    </div>
   </div>
 </template>
 
@@ -113,14 +118,10 @@ export default {
 <style lang="less" scoped>
 .pageBox {
   width: 100%;
-  height: calc(100% - 1.481vh * 2);
+  height: 100%;
+  padding: 10px 30px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-
-  .chart {
-    width: 100%;
-    height: 25%;
-  }
 }
 </style>

src/views/HealthControl/healthManagement/first/index.vue

@@ -30,13 +30,13 @@
         已完成任务
       </div> -->
     </div>
-    <div v-if="tabIndex == 0">
+    <div v-if="tabIndex == 0" class="tabs">
       <health-tab-1 />
     </div>
-    <div v-if="tabIndex == 1">
+    <div v-if="tabIndex == 1" class="tabs">
       <health-tab-2 />
     </div>
-    <div v-if="tabIndex == 2">
+    <div v-if="tabIndex == 2" class="tabs">
       <health-tab-3 />
       <!-- <button class="btn" @click="dialogVisible = true">点击弹窗</button>
       <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
@@ -77,6 +77,12 @@ export default {
 
 <style lang="less" scope>
 .health {
+  height: 100%;
+  padding: 0 20px;
+  padding-bottom: 10px;
+  .tabs {
+    height: calc(100% - 41px);
+  }
   .selections {
     display: flex;
 

src/views/HealthControl/healthManagement/healthList/index.vue

@@ -54,8 +54,8 @@
           </tr>
         </thead>
       </table>
-      <el-scrollbar>
-        <div style="height: calc(100vh - 174px)">
+      <el-scrollbar style="height: calc(100% - 45px)">
+        <div style="height: 100%">
           <table style="width: 100%" border="0" cellspacing="0">
             <tbody>
               <tr v-for="(item, index) in tableData" :key="index">
@@ -200,7 +200,11 @@ export default {
 
 <style lang="less">
 .health-8 {
+  height: 100%;
+  padding: 10px 20px;
   .table {
+    height: calc(100% - 35px);
+    padding-bottom: 15px;
     tbody {
       tr:nth-child(2n) td {
         background-color: fade(@gray, 20%);

src/views/HealthControl/healthManagement/healthMatrix/index.vue

@@ -122,8 +122,11 @@ export default {
 
 <style lang="less">
 .health-5 {
+  height: 100%;
+  padding: 10px 30px;
+
   .health-matrix {
-    height: calc(100vh - 7vh);
+    height: 100%;
 
     .health-matrix-panel {
       margin-bottom: 8px;
@@ -154,9 +157,9 @@ export default {
 
             .legend {
               flex: auto;
-              width: 0.741vh;
-              height: 0.741vh;
-              margin-right: 0.741vh;
+              width: 10px;
+              height: 10px;
+              margin-right: 10px;
 
               &.long {
                 width: 2.963vh;

src/views/HealthControl/healthManagement/homepage/index.vue

@@ -317,6 +317,8 @@ export default {
 .health-2 {
   overflow-y: auto;
   height: 100%;
+  padding: 0 20px;
+  padding-bottom: 10px;
   // 电量健康情况
   .power-info {
     display: flex;
@@ -326,7 +328,7 @@ export default {
       display: flex;
       flex-direction: column;
       height: 287px;
-      margin-right: 1.4815vh;
+      margin-right: 15px;
 
       .tab {
         position: relative;
@@ -344,7 +346,7 @@ export default {
         align-items: center;
 
         i {
-          margin: 0 1.4815vh;
+          margin: 0 10px;
 
           svg use {
             fill: @gray-l;
@@ -400,7 +402,7 @@ export default {
         }
 
         & + .tab {
-          margin-top: 0.7407vh;
+          margin-top: 10px;
         }
 
         &:last-child {

src/views/HealthControl/healthManagement/overview/index.vue

@@ -89,7 +89,7 @@
     </div>
     <div class="mg-b-16 curStyle">
       <panel :title="'健康趋势'" :showLine="false">
-        <MultipleLineChart :list="statusData" :units="['']" :height="'150px'" />
+        <MultipleLineChart :list="statusData" :units="['']" :height="'260px'" />
       </panel>
       <div class="selections">
         <div
@@ -355,6 +355,9 @@ export default {
 
 <style lang="less">
 .health-6 {
+  height: 100%;
+  padding: 0 20px;
+  padding-bottom: 10px;
   .curStyle {
     position: relative;
 

src/views/Home/components/coulometric-analysis.vue

@@ -2,27 +2,42 @@
   <div class="coulometric-analysis">
     <tab @select="selectionItemClick" v-if="false" />
     <row style="margin-top: 36px">
-      <Col :span="12" style="padding-left: 7%;">
-      <div class="coulometric-info">
-        <svg-icon svgid="svg-arrow-up" class="icon green" />
-        <span class="title gray">增发电量</span>
-        <span class="value">{{ AddElectricity }}</span>
-      </div>
-      <percent-card :value="tsl_" color="green" title="提升率" />
+      <Col :span="12" style="padding-left: 7%">
+        <div class="coulometric-info">
+          <svg-icon svgid="svg-arrow-up" class="icon green" />
+          <span class="title gray">增发电量</span>
+          <span class="value">{{ AddElectricity }}</span>
+        </div>
+        <percent-card :value="tsl_" color="green" title="提升率" />
       </Col>
-      <Col :span="12" style="padding-left: 7%;">
-      <div class="coulometric-info">
-        <svg-icon svgid="svg-arrow-down" class="icon yellow" />
-        <span class="title gray">避免故障</span>
-        <span class="value">{{ bmgz_ }}次</span>
-      </div>
-      <percent-card :value="jdl_" color="yellow" title="降低率" />
+      <Col :span="12" style="padding-left: 7%">
+        <div class="coulometric-info">
+          <svg-icon svgid="svg-arrow-down" class="icon yellow" />
+          <span class="title gray">避免故障</span>
+          <span class="value">{{ bmgz_ }}次</span>
+        </div>
+        <percent-card :value="jdl_" color="yellow" title="降低率" />
       </Col>
     </row>
     <div class="rate">
-      <card-1 class="increase-info" title="设备可利用率" :value="sbklyl_" :isIncrease="sbklyl_ >= 0" />
-      <card-1 class="increase-info" title="风能利用率" :value="fnlyl_" :isIncrease="fnlyl_ >= 0" />
-      <card-1 class="increase-info" title="综合场用电率" :value="zhcydl_" :isIncrease="zhcydl_ >= 0" />
+      <card-1
+        class="increase-info"
+        title="设备可利用率"
+        :value="sbklyl_"
+        :isIncrease="sbklyl_ >= 0"
+      />
+      <card-1
+        class="increase-info"
+        title="风能利用率"
+        :value="fnlyl_"
+        :isIncrease="fnlyl_ >= 0"
+      />
+      <card-1
+        class="increase-info"
+        title="综合场用电率"
+        :value="zhcydl_"
+        :isIncrease="zhcydl_ >= 0"
+      />
     </div>
   </div>
 </template>
@@ -77,7 +92,7 @@ export default {
       // 提升率
       tsl_: 0,
       // 降低率
-      jdl_: '0',
+      jdl_: "0",
       // 风能利用率
       fnlyl_: 0,
       // 设备科利用率
@@ -98,9 +113,7 @@ export default {
     this.yhfj_ = this.yhfj;
   },
   methods: {
-    selectionItemClick(item) {
-
-    },
+    selectionItemClick(item) {},
   },
   watch: {
     bmgz(res) {
@@ -137,7 +150,7 @@ export default {
 
     .title {
       font-size: @fontsize;
-      margin-right: 0.741vh;
+      margin-right: 10px;
     }
 
     .value {
@@ -155,7 +168,7 @@ export default {
   .icon {
     width: 1.204vh;
     height: 1.204vh;
-    margin-right: 0.741vh;
+    margin-right: 10px;
 
     &.green use {
       fill: @green;

src/views/MalfunctionWarning/MalfunctionWarning.vue

@@ -635,10 +635,12 @@ export default {
         success(res) {
           if (res) {
             res.data.forEach((item) => {
-              that.allData.filter((val) => val.idString === item.faultIds)[0].labels =
-                item.faultcode;
-              that.allData.filter((items) => items.idString === item.faultIds)[0].ids =
-                item.idString;
+              that.allData.filter(
+                (val) => val.idString === item.faultIds
+              )[0].labels = item.faultcode;
+              that.allData.filter(
+                (items) => items.idString === item.faultIds
+              )[0].ids = item.idString;
             });
           }
         },
@@ -968,13 +970,13 @@ el-table__row > td {
     .tool-block {
       display: flex;
       align-items: center;
-      margin-left: 0.741vh;
+      margin-left: 10px;
 
       .legend {
         flex: auto;
-        width: 0.741vh;
-        height: 0.741vh;
-        margin-right: 0.741vh;
+        width: 10px;
+        height: 10px;
+        margin-right: 10px;
 
         &.long {
           width: 2.963vh;

src/views/NewPages/Matrix-Detail.vue

@@ -13,7 +13,12 @@
               <SvgIcon svgid="svg-wind-site"></SvgIcon>
             </span>
           </div>
-          <div class="item" :class="data.color" v-for="(data, index) of panel1Data.datas" :key="index">
+          <div
+            class="item"
+            :class="data.color"
+            v-for="(data, index) of panel1Data.datas"
+            :key="index"
+          >
             <div>{{ data.test }}</div>
             <div>{{ data.num }}</div>
           </div>
@@ -28,10 +33,18 @@
           <div class="item">
             <div class="loop"></div>
             <span class="svg-icon svg-icon-gray svg-icon-md">
-              <SvgIcon :svgid="'svg-photovoltaic'" style="margin: 3px 0px -3px 1px;"></SvgIcon>
+              <SvgIcon
+                :svgid="'svg-photovoltaic'"
+                style="margin: 3px 0px -3px 1px"
+              ></SvgIcon>
             </span>
           </div>
-          <div class="item" :class="data.color" v-for="(data, index) of panel2Data.datas" :key="index">
+          <div
+            class="item"
+            :class="data.color"
+            v-for="(data, index) of panel2Data.datas"
+            :key="index"
+          >
             <div>{{ data.test }}</div>
             <div>{{ data.num }}</div>
           </div>
@@ -46,7 +59,11 @@
               <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
             </i>
             <span>某某某风电场</span>
-            <div class="sub-title-item" v-for="(data, index) of table.subTitleDatas" :key="index">
+            <div
+              class="sub-title-item"
+              v-for="(data, index) of table.subTitleDatas"
+              :key="index"
+            >
               <span class="sub-title">{{ data.text }}</span>
               <span class="sub-count" :class="data.color">{{ data.num }}</span>
             </div>
@@ -484,7 +501,7 @@ export default {
           height: 0.556vh;
           background-color: @yellow;
           left: 1.204vh;
-          top: 0.741vh;
+          top: 10px;
         }
       }
 
@@ -573,7 +590,7 @@ export default {
     .panel-body {
       height: calc(100% - 7.407vh);
       padding: 0;
-    //   margin: 4px 0;
+      //   margin: 4px 0;
       width: 100%;
       display: flex;
       flex-direction: row;

src/views/SandTable/SandTable.vue

@@ -1413,7 +1413,7 @@ export default {
     }
 
     .value {
-      margin: 0.741vh 0 0 0;
+      margin: 10px 0 0 0;
     }
 
     .other-icon {

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

@@ -22,11 +22,7 @@
       </div>
       <div class="pp-data">
         <div class="pp-tip" :style="'margin-left: ' + mLeft(data) + '%'">
-          <div class="pp-tip-data font-sm">
-            {{
-              (data * 100).toFixed(2)
-            }}%
-          </div>
+          <div class="pp-tip-data font-sm">{{ (data * 100).toFixed(2) }}%</div>
           <div class="pp-tip-icon">
             <i
               class="el-icon-caret-bottom font-sm"
@@ -121,16 +117,16 @@ export default {
   // 函数
   methods: {
     mLeft: function (data) {
-        if (data > 0) {
-            const r = data * 100 / 2 + 50;
-            return r > 100 ? 100 : r;
-        } else if (data < 0) {
-            const r = 50 - ((0-data*100) / 2);
-            return r < 0 ? 0 : r;
-        } else {
-            return 50;
-        }
-    }
+      if (data > 0) {
+        const r = (data * 100) / 2 + 50;
+        return r > 100 ? 100 : r;
+      } else if (data < 0) {
+        const r = 50 - (0 - data * 100) / 2;
+        return r < 0 ? 0 : r;
+      } else {
+        return 50;
+      }
+    },
   },
   // 生命周期钩子
   beforeCreate() {
@@ -194,7 +190,7 @@ export default {
     }
 
     .pp-data {
-      padding: 0.741vh 0.556vh 1.389vh 0.556vh;
+      padding: 10px 0.556vh 1.389vh 0.556vh;
       .pp-tip {
         display: inline-block;
 
@@ -210,7 +206,7 @@ export default {
       }
 
       .pp-data-box {
-        height: 0.741vh;
+        height: 10px;
         width: 190px;
         border: 1px solid;
         position: relative;

src/views/SandTable/component/weather.vue

@@ -101,7 +101,7 @@ export default {
 .weather {
   .weather-info {
     display: flex;
-    margin-bottom: 0.741vh;
+    margin-bottom: 10px;
 
     .weather-icon {
       width: 4.63vh;
@@ -124,11 +124,11 @@ export default {
     .text {
       color: @font-color;
       font-size: 12px;
-      // margin-bottom: 0.741vh;
+      // margin-bottom: 10px;
     }
 
     .value {
-      margin: 0.741vh 0 0 0;
+      margin: 10px 0 0 0;
     }
 
     .other-icon {

src/views/WindSite/pages/Info/Base-Info.vue

@@ -14,8 +14,8 @@
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">机型</div>
-        <div class="tag-value">{{sourceMap?.model}}</div>
-        </div>
+        <div class="tag-value">{{ sourceMap?.model }}</div>
+      </div>
       <div class="wind-site-tag">
         <div class="tag-text">告警时间</div>
         <div class="tag-value">{{ sourceMap?.gxkmap?.bjsj }}</div>
@@ -31,45 +31,71 @@
         <el-row class="generation background mg-r-8">
           <div class="mg-r-8">
             <div class="generation-text">日发电量</div>
-            <div class="generation-value green" style="display:inline-block">{{ sourceMap?.JCXX && sourceMap?.JCXX.filter(item => item.code === 'RFDL')[0]?.value }}</div><span class="green" style="font-size:26px;margin-left: 0.37vh;">kWh</span>
+            <div class="generation-value green" style="display: inline-block">
+              {{
+                sourceMap?.JCXX &&
+                sourceMap?.JCXX.filter((item) => item.code === "RFDL")[0]?.value
+              }}
+            </div>
+            <span class="green" style="font-size: 26px; margin-left: 0.37vh"
+              >kWh</span
+            >
           </div>
           <el-row class="wind-site-state">
             <el-col :span="6" class="generation-item">
               <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
-              <div class="value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.ysbklyl }}</div>
+              <div class="value">
+                {{ sourceMap?.gxkmap && sourceMap?.gxkmap.ysbklyl }}
+              </div>
               <div class="text">月可利用率</div>
             </el-col>
             <el-col :span="6" class="generation-item">
               <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
-              <div class="value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.ygzxs }}</div>
+              <div class="value">
+                {{ sourceMap?.gxkmap && sourceMap?.gxkmap.ygzxs }}
+              </div>
               <div class="text">月故障小时数</div>
             </el-col>
             <el-col :span="6" class="generation-item">
               <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
-              <div class="value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.ytjxs }}</div>
+              <div class="value">
+                {{ sourceMap?.gxkmap && sourceMap?.gxkmap.ytjxs }}
+              </div>
               <div class="text">月待机小时数</div>
             </el-col>
             <el-col :span="6" class="generation-item">
               <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
-              <div class="value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.yyxxs }}</div>
+              <div class="value">
+                {{ sourceMap?.gxkmap && sourceMap?.gxkmap.yyxxs }}
+              </div>
               <div class="text">月发电小时数</div>
             </el-col>
           </el-row>
         </el-row>
       </el-col>
       <el-col :span="10" class="background">
-        <el-row type="flex" justify="center" :align="'middle'" class="power-load">
+        <el-row
+          type="flex"
+          justify="center"
+          :align="'middle'"
+          class="power-load"
+        >
           <!-- 功率复核 PowerLoad -->
           <el-col v-for="(item, index) in PowerLoad" :key="index" :span="6">
-            <dash-pie-chart :max="index===0?25:3000" :title="item.title" :value="powerObj[item.key]" height="9.722vh" />
+            <dash-pie-chart
+              :max="index === 0 ? 25 : 3000"
+              :title="item.title"
+              :value="powerObj[item.key]"
+              height="9.722vh"
+            />
           </el-col>
         </el-row>
       </el-col>
@@ -81,7 +107,7 @@
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
             <div class="svg-icon svg-icon-gray-l mg-r-16">
-              <svg-icon :svgid="'svg-base-info'" style="margin: 3px 0 -3px 0;" />
+              <svg-icon :svgid="'svg-base-info'" style="margin: 3px 0 -3px 0" />
             </div>
             <div class="title">发电机</div>
           </div>
@@ -101,7 +127,7 @@
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
             <div class="svg-icon svg-icon-gray-l mg-r-16">
-              <svg-icon :svgid="'svg-parameter'" style="margin: 6px 0 -6px 0;" />
+              <svg-icon :svgid="'svg-parameter'" style="margin: 6px 0 -6px 0" />
             </div>
             <div class="title">齿轮箱</div>
           </div>
@@ -117,12 +143,15 @@
             </table>
           </div>
         </div>
-        
+
         <!-- 温度信息 -->
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
             <div class="svg-icon svg-icon-gray-l mg-r-16">
-              <svg-icon :svgid="'svg-temperature-info'" style="margin: 3px -5px -3px 5px;" />
+              <svg-icon
+                :svgid="'svg-temperature-info'"
+                style="margin: 3px -5px -3px 5px"
+              />
             </div>
             <div class="title">液压信息</div>
           </div>
@@ -139,7 +168,7 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="12" style="padding-left:8px;">
+      <el-col :span="12" style="padding-left: 8px">
         <!-- 电网信息 -->
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
@@ -164,7 +193,10 @@
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
             <div class="svg-icon svg-icon-gray-l mg-r-16">
-              <svg-icon :svgid="'svg-pitch-info'" style="margin: 3px 0 -3px 0;padding: 2px;" />
+              <svg-icon
+                :svgid="'svg-pitch-info'"
+                style="margin: 3px 0 -3px 0; padding: 2px"
+              />
             </div>
             <div class="title">变桨信息</div>
           </div>
@@ -191,18 +223,17 @@ import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
 export default {
   name: "wind-site-base-info",
   components: { SvgIcon, DashPieChart },
-  props: {
-  },
-  data () {
+  props: {},
+  data() {
     return {
       pageReady: false,
-      sourceMap:{},
+      sourceMap: {},
       fdjmap: [],
       clxmap: [],
       bjmap: [],
       phmap: [],
       yymap: [],
-      powerObj:{},
+      powerObj: {},
       // 功率复核数据
       PowerLoad: [
         {
@@ -229,36 +260,51 @@ export default {
      * 清洗数据，将原数据处理成符合布局渲染的格式，其中：
      * @param { Array } array 传入的原数据
      * @param { Int } length 每行显示的数量
-    **/
-    rinseData (array = [], length) {
+     **/
+    rinseData(array = [], length) {
       let index = 0;
       let newArray = [];
 
       while (index < array.length) {
-        newArray.push(array.slice(index, index += length));
+        newArray.push(array.slice(index, (index += length)));
       }
 
       return newArray;
     },
-    dataDeal(value){
-      this.sourceMap = value
-      let baseObj = {}
-      baseObj.FJSSFS = value.JCXX.filter(item => item.code === 'FJSSFS')[0].value
-      baseObj.LLGL = value.JCXX.filter(item => item.code === 'LLGL')[0].value
-      baseObj.YFGL = value.JCXX.filter(item => item.code === 'YFGL')[0].value
-      baseObj.FJGL = value.JCXX.filter(item => item.code === 'FJGL')[0].value
-      this.powerObj = baseObj
-      this.fdjmap = this.rinseData(value.JCXX.filter(item => item.pointtype === 'JC'), 2)
-      this.clxmap = this.rinseData(value.JCXX.filter(item => item.pointtype === 'CLX'), 2)
-      this.bjmap = this.rinseData(value.JCXX.filter(item => item.pointtype === 'BJ'), 2)
-      this.phmap = this.rinseData(value.JCXX.filter(item => item.pointtype === 'PH'), 2)
-      this.yymap = this.rinseData(value.JCXX.filter(item => item.pointtype === 'YY'), 2)
-    }
-  },
-
-  mounted () {
+    dataDeal(value) {
+      this.sourceMap = value;
+      let baseObj = {};
+      baseObj.FJSSFS = value.JCXX.filter(
+        (item) => item.code === "FJSSFS"
+      )[0].value;
+      baseObj.LLGL = value.JCXX.filter((item) => item.code === "LLGL")[0].value;
+      baseObj.YFGL = value.JCXX.filter((item) => item.code === "YFGL")[0].value;
+      baseObj.FJGL = value.JCXX.filter((item) => item.code === "FJGL")[0].value;
+      this.powerObj = baseObj;
+      this.fdjmap = this.rinseData(
+        value.JCXX.filter((item) => item.pointtype === "JC"),
+        2
+      );
+      this.clxmap = this.rinseData(
+        value.JCXX.filter((item) => item.pointtype === "CLX"),
+        2
+      );
+      this.bjmap = this.rinseData(
+        value.JCXX.filter((item) => item.pointtype === "BJ"),
+        2
+      );
+      this.phmap = this.rinseData(
+        value.JCXX.filter((item) => item.pointtype === "PH"),
+        2
+      );
+      this.yymap = this.rinseData(
+        value.JCXX.filter((item) => item.pointtype === "YY"),
+        2
+      );
+    },
   },
 
+  mounted() {},
 };
 </script>
 
@@ -283,7 +329,7 @@ export default {
   // 风机信息 tag样式
   .wind-site-tag {
     flex: 1 1 auto;
-    padding: 0.37vh 0.741vh;
+    padding: 0.37vh 10px;
     display: flex;
     align-items: center;
     font-size: @fontsize-s;
@@ -292,7 +338,7 @@ export default {
     .tag-text {
       color: @gray;
       flex: 0 0 auto;
-      margin-right: 0.741vh;
+      margin-right: 10px;
       font-weight: 600;
     }
 
@@ -302,7 +348,7 @@ export default {
     }
 
     & + .wind-site-tag {
-      margin-left: 0.741vh;
+      margin-left: 10px;
     }
   }
   .el-col + .el-col {

src/views/WindSite/pages/Info/Info.vue

@@ -254,11 +254,13 @@ export default {
 
     // 获取报警信息
     getWarnInfo() {
-      api.findWtWarnInfo({
-        wtId: this.wtId,
-      }).then(res =>{
-        this.WarnData = res.data;
-      })
+      api
+        .findWtWarnInfo({
+          wtId: this.wtId,
+        })
+        .then((res) => {
+          this.WarnData = res.data;
+        });
     },
     // 点击左侧菜单
     clickMenu(res) {
@@ -352,7 +354,7 @@ export default {
         }
 
         & + .info-menu-item {
-          margin-left: 0.741vh;
+          margin-left: 10px;
         }
       }
     }

src/views/WindSite/pages/Info/Warning.vue

@@ -10,14 +10,25 @@
         <button class="btn empty-btn" @click="reset">重置</button>
       </el-row>
       <el-row class="options">
-        <el-col class="option-item" :span="8" v-for="(option, index) in options" :key="option" @click="onOptionClick(option, index)" :class="{ active: option.isActive }">
+        <el-col
+          class="option-item"
+          :span="8"
+          v-for="(option, index) in options"
+          :key="option"
+          @click="onOptionClick(option, index)"
+          :class="{ active: option.isActive }"
+        >
           <div class="count">{{ option.count }}</div>
           <div class="text">{{ option.text }}</div>
         </el-col>
       </el-row>
     </div>
     <div class="warning-list">
-      <Table :data="warning" :canScroll="true" :height="'calc(100vh - 560px)'"/>
+      <Table
+        :data="warning"
+        :canScroll="true"
+        :height="'calc(100vh - 560px)'"
+      />
     </div>
   </div>
 </template>
@@ -51,7 +62,7 @@ export default {
           {
             name: "报警状态",
             field: "data1",
-            template: function(data) {
+            template: function (data) {
               if (data === 1) return "<div class='error-state'></div>";
               else return "正常";
             },
@@ -184,11 +195,11 @@ export default {
       .search-input {
         background: transparent;
         border: 1px solid @darkgray;
-        padding: 0.741vh;
+        padding: 10px;
         color: @gray;
         outline: unset;
         border-radius: 0%;
-        margin-right: 0.741vh;
+        margin-right: 10px;
         height: 28px;
         line-height: 28px;
       }
@@ -199,7 +210,7 @@ export default {
       flex: 0 0 auto;
       background: transparent;
       border: 1px solid @darkgray;
-      // padding: 0.741vh 1.481vh;
+      // padding: 10px 1.481vh;
       color: @gray;
       font-size: 14px;
       cursor: pointer;
@@ -239,7 +250,7 @@ export default {
         }
 
         & + .option-item {
-          padding-left: 0.741vh;
+          padding-left: 10px;
         }
 
         &:nth-child(3n + 1) {
@@ -269,8 +280,8 @@ export default {
   .warning-list {
     height: 61.5vh;
     .error-state {
-      width: 0.741vh;
-      height: 0.741vh;
+      width: 10px;
+      height: 10px;
       border-radius: 50%;
       background-color: @red;
       margin: auto;
@@ -280,7 +291,6 @@ export default {
       padding: 0;
       font-size: 12px;
     }
-
   }
 }
 </style>

src/views/economicsOperation/monthElectricAnalyse/index.vue

@@ -41,16 +41,12 @@
       v-loading="loading"
       element-loading-background="rgba(4, 12, 11, 0.8)"
     >
+      <img src="@/assets/imgs/glycfx-bg.png" alt="" />
       <div class="line clearfix">
         <div class="leftContent">
           <span>{{ selectValue }}</span>
         </div>
       </div>
-      <div class="echarts">
-        <div class="chart-wrapper">
-          <BarCharts :list="list" width="100%" height="100%"></BarCharts>
-        </div>
-      </div>
       <div class="table-wrapper">
         <el-table
           :data="tableData"
@@ -64,6 +60,8 @@
             :label="item"
             :key="index"
             align="center"
+            :width="item == '指标名称' ? '200px' : ''"
+            show-overflow-tooltip
           >
             <template #default="scope">
               <span>
@@ -73,6 +71,11 @@
           </el-table-column>
         </el-table>
       </div>
+      <div class="echarts">
+        <div class="chart-wrapper">
+          <BarCharts :list="list" width="100%" height="100%"></BarCharts>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -284,9 +287,17 @@ export default {
   .parcel-content {
     width: 100%;
     height: calc(100% - 77px);
-    margin-top: 10px;
+    position: relative;
+    padding-top: 15px;
     // background: url("~@/assets/imgs/yfdl-bg.png") no-repeat;
-    // background-size: contain;
+    img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      //   min-width: 100%;
+      //   min-height: 100%;
+    }
     .line {
       .leftContent {
         width: 242px;
@@ -305,7 +316,7 @@ export default {
     }
 
     .echarts {
-      height: calc(100% - 300px - 45px);
+      height: calc(100% - 305px - 45px);
       padding: 0 20px;
       .chart-wrapper {
         height: 100%;
@@ -313,9 +324,10 @@ export default {
       }
     }
     .table-wrapper {
-      height: 300px;
+      height: 305px;
       width: 100%;
       padding: 0 20px;
+      padding-top: 10px;
     }
   }
 }

src/views/economicsOperation/performanceAnalyse/performanceAssess/dayDetailInfo.vue

@@ -522,7 +522,7 @@ export default {
             background: rgba(83, 89, 104, 0.1);
           }
           td {
-            padding: 0.741vh;
+            padding: 10px;
             border: 0px;
             font-size: 12px;
             text-align: center;

src/views/layout/Header.vue

@@ -204,7 +204,7 @@ export default {
         let jiami = encrypt(getCookie("jiami")).replace(/\+/g, " ");
         console.log(jiami);
 
-        // let url = `http://192.168.1.112:3002/#/check?username=${getCookie(
+        // let url = `http://192.168.1.117:3002/#/check?username=${getCookie(
         //   "username"
         // )}&jiami=${jiami}`;
         let url = `http://10.81.3.154:8083/#/check?username=${getCookie(
@@ -356,7 +356,7 @@ export default {
       cursor: pointer;
 
       i {
-        margin: 0 0.741vh;
+        margin: 0 10px;
         transition: all 0.3s;
       }
     }

src/views/stateMonitor/powerPredictMatrix/components/multiple-line-chart.vue

@@ -60,6 +60,7 @@ export default {
                     normal: {
                       width: 1,
                       color: ele.color,
+                      type: "dashed",
                     },
                     //   borderColor: "rgba(0,0,0,.4)",
                   },
@@ -83,7 +84,7 @@ export default {
                   smooth: true,
                   lineStyle: {
                     normal: {
-                      width: 1,
+                      width: 2,
                       color: ele.color,
                     },
                     //   borderColor: "rgba(0,0,0,.4)",

src/views/stateMonitor/powerPredictMatrix/index.vue

@@ -2,7 +2,11 @@
   <div class="page-wrapper">
     <!-- 头部按钮选项 -->
     <HeaderNav @firstRender="firstRender" :isAll="true" />
-    <div class="chart-wrapper">
+    <div
+      class="chart-wrapper"
+      v-loading="loading"
+      element-loading-background="rgba(4, 12, 11, 0.8)"
+    >
       <div
         class="chart-item"
         v-for="(item, index) in list"
@@ -132,6 +136,8 @@ export default {
       showWpid: "",
       isSearch: false,
       timer: null,
+      loading: false,
+      flag: false,
     };
   },
   components: {
@@ -145,20 +151,39 @@ export default {
   },
   mounted() {
     this.timer = setInterval(() => {
+      this.flag = true;
       this.init();
     }, 15 * 60 * 1000);
   },
+  unmounted() {
+    clearInterval(this.timer);
+    this.timer = null;
+  },
   methods: {
     firstRender(tab) {
       this.activeTab = tab;
+      clearInterval(this.timer);
+      this.timer = null;
+      this.flag = false;
       this.init();
+      this.timer = setInterval(() => {
+        this.flag = true;
+        this.init();
+      }, 15 * 60 * 1000);
     },
     init() {
+      if (this.flag) {
+        this.loading = false;
+      } else {
+        this.loading = true;
+      }
+
       GetAllPowerData({
         type: this.activeTab == -1 ? "F" : "G",
         beginDate: this.beginDate,
         endDate: this.endDate,
       }).then(({ code, data }) => {
+        this.loading = false;
         if (code == 200) {
           this.list = this.dealRes(data);
         }
@@ -190,9 +215,7 @@ export default {
       }
       return resData;
     },
-    typeFlag(activeTab) {
-      this.activeTab = activeTab;
-    },
+
     handleClick(name, id) {
       this.showName = name;
       this.showWpid = id;