安全监视模块页面自适应完成

.env.development

@@ -1,10 +1,10 @@
 
-VUE_APP_API=http://192.168.1.108:6060
-VUE_APP_Matrix=http://192.168.1.108:6060
+# VUE_APP_API=http://192.168.1.108:6060
+# VUE_APP_Matrix=http://192.168.1.108:6060
 
-# VUE_APP_API=http://10.81.3.153:6060
-# # 经济运行 安全监视 
-# VUE_APP_Matrix=http://10.81.3.153:6060
+VUE_APP_API=http://10.81.3.153:6060
+# 经济运行 安全监视 
+VUE_APP_Matrix=http://10.81.3.153:6060
 
 
 VUE_APP_ADAPTERURL=http://10.81.3.155:8011

src/App.vue

@@ -1,5 +1,13 @@
 <template>
-  <div v-if="!showSisView">
+  <div
+    v-if="!showSisView"
+    id="screen"
+    :style="{
+      width: `${style.width}px`,
+      height: `${style.height}px`,
+      transform: `${style.transform}`,
+    }"
+  >
     <div v-if="isLogined" class="main">
       <div class="header-body" v-if="hideHeard === '0'">
         <div class="header-title" @click="handleClickJump()">
@@ -24,8 +32,10 @@
         :class="{ hover: isShowMenu }"
         @mouseenter="showMenu"
         @mouseleave="hideMenu"
-        v-show="$store.state.themeName === 'dark'&& $store.state.menuData.length"
-        v-if="hideMenus === '0' "
+        v-show="
+          $store.state.themeName === 'dark' && $store.state.menuData.length
+        "
+        v-if="hideMenus === '0'"
       >
         <Menu :root="root" />
       </div>
@@ -90,7 +100,7 @@
  <login-page  @onLogin="login" />
    </div> -->
 
-  <sisView v-else />
+  <!-- <sisView v-else /> -->
 </template>
 
 <script>
@@ -122,6 +132,11 @@ export default {
       menuData: [],
       hideMenus: "0",
       hideHeard: "0",
+      style: {
+        width: "1920",
+        height: "1080",
+        transform: "scaleY(1) scaleX(1) translate(-50%, -50%)",
+      },
     };
   },
   computed: {
@@ -165,8 +180,25 @@ export default {
     //   });
     // });
   },
-
+  mounted() {
+    let that = this;
+    that.setScale();
+    /*窗口改变事件*/
+    $(window).resize(() => {
+      that.setScale();
+    });
+  },
   methods: {
+    getScale() {
+      const w = window.innerWidth / this.style.width;
+      const h = window.innerHeight / this.style.height;
+      return { x: w, y: h };
+    },
+    setScale() {
+      let scale = this.getScale();
+      this.style.transform =
+        "scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";
+    },
     // 切换子系统事件
     HeaderMenuClick(data) {
       this.root = data.id;
@@ -252,7 +284,14 @@ export default {
 
 <style lang="less">
 @import "./assets/styles/main.less";
-
+#screen {
+  z-index: 100;
+  transform-origin: 0 0;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transition: 0.3s;
+}
 * {
   box-sizing: border-box;
 
@@ -285,10 +324,10 @@ body {
   font-size: @fontsize;
   font-family: @defalut-font-family;
 }
-@menuWidth: 5.37vh;
+@menuWidth: 51.28px;
 @headerHeight: 59px;
 .main {
-  width: 100vw;
+  width: 100%;
   height: 100%;
   display: flex;
   flex-wrap: wrap;
@@ -317,7 +356,7 @@ body {
     position: absolute;
     flex: 0 0 @menuWidth;
     width: @menuWidth;
-    height: calc(100vh - @headerHeight);
+    height: calc(100% - @headerHeight);
     // height: calc(100vh - 59px);
     top: @headerHeight;
     // top: 59px;
@@ -337,9 +376,9 @@ body {
     }
   }
   .main-body {
-    flex: 0 0 calc(100vw);
-    max-width: calc(100vw);
-    height: calc(100vh - @headerHeight);
+    flex: 0 0 100%;
+    max-width: 100%;
+    height: calc(100% - @headerHeight);
     // padding: 1.481vh;
     // transition: flex 0.1s, margin-left 0.1s;
     // transition-timing-function: ease-in-out;
@@ -386,8 +425,8 @@ body {
   }
 }
 .login {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   background: url("~@/assets/login-bg.png") no-repeat;
   background-size: cover;
   position: relative;

src/api/zhbj/index.js

@@ -7,7 +7,9 @@ export function GetTableData(data) {
     url: `/alarm/history/findAlarmlist?begin=${data.begin}&end=${
       data.end
     }&alarmType=${data.alarmType}&stationid=${data.stationid}${
-      data.alarmType == "windturbine" ? `&deviceid=${data.deviceid}` : ""
+      data.alarmType == "windturbine" || data.alarmType == "inverter"
+        ? `&deviceid=${data.deviceid}`
+        : ""
     }&pageNum=${data.pageNum}&pageSize=${data.pageSize}&description=${
       data.description
     }`,

src/assets/styles/theme/dark/dark-jsc.css

@@ -55,7 +55,7 @@
 }
 #appBody.dark .header-menu .header-menu-list .header-menu-item.active {
   background: linear-gradient(to top, rgba(5, 187, 76, 0.5), rgba(5, 187, 76, 0));
-  border: 0.093vh solid #05bb4c;
+  border: 1px solid #05bb4c;
   transition: color 0.25s ease-in-out;
 }
 #appBody.dark .coulometric-analysis .card-1 .card-icon svg use {

src/assets/styles/theme/light/jjyx.css

@@ -124,14 +124,14 @@
   color: #36348e;
 }
 #appBody.light .newspan:hover::after {
-  border: 0.093vh solid #36348e;
+  border: 1px solid #36348e;
 }
 #appBody.light .active {
   background: linear-gradient(to top, rgba(54, 52, 142, 0.5), rgba(54, 52, 142, 0));
   color: #36348e;
 }
 #appBody.light .active::after {
-  border: 0.093vh solid #36348e;
+  border: 1px solid #36348e;
 }
 #appBody.light .el-month-table td .cell:hover,
 #appBody.light .el-date-picker__header-label.active,

src/assets/styles/theme/light/jjyx.less

@@ -161,7 +161,7 @@
     color: @deepblue;
   }
   .newspan:hover::after {
-    border: 0.093vh solid @deepblue;
+    border: 1px solid @deepblue;
   }
   .active {
     background: linear-gradient(
@@ -172,7 +172,7 @@
     color: @deepblue;
   }
   .active::after {
-    border: 0.093vh solid @deepblue;
+    border: 1px solid @deepblue;
   }
 
   .el-month-table td .cell:hover,

src/components/alarm/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-model="dialogVisible" width="80%" top="4vh">
+  <el-dialog v-model="dialogVisible" width="80%" top="120px">
     <template #title>
       <div class="dialog-title">
         <img class="dialog-title-img" src="@/assets/imgs/dialog-title.png" />
@@ -13,7 +13,7 @@
           :data="tableData"
           stripe
           size="mini"
-          height="48vh"
+          height="450px"
           ref="fitting_table"
           style="width: 100%"
         >
@@ -69,12 +69,14 @@ export default {
       },
       wtid: "",
       wpid: "",
+      wtype: 0,
     };
   },
   created() {},
   methods: {
     // 初始化弹窗数据
-    openDialog(wtid, wpid) {
+    openDialog(wtid, wpid, type) {
+      this.wtype = type;
       this.wtid = wtid;
       this.wpid = wpid;
       if (wtid && wpid) {
@@ -84,9 +86,9 @@ export default {
     },
     getTableData() {
       GetTableData({
-        begin: dayjs().startOf('day').format("YYYY-MM-DD HH:mm:ss"),
+        begin: dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
         end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
-        alarmType: "windturbine",
+        alarmType: this.wtype == -1 ? "windturbine" : "inverter",
         stationid: this.wpid,
         deviceid: this.wtid,
         pageNum: this.page.currentPage,

src/components/chart/bar/list-bar-chart2-home.vue

@@ -161,7 +161,7 @@ export default {
             label: {
               normal: {
                 show: true,
-                position: [0, util.vh("-20")],
+                position: [0, -20],
                 formatter: function (param) {
                   return param.data.value;
                 },

src/components/chart/pie/dash-pie-chart.vue

@@ -73,16 +73,16 @@ export default {
           text: this.unit,
           subtext: this.title,
           subtextStyle: {
-            fontSize: 12,
+            fontSize: 14,
             color: "#fff",
           },
           x: "45%",
-          y: "62%",
+          y: "56%",
           z: 8,
           textAlign: "center",
           textStyle: {
             color:'#999',
-            fontSize: util.vh(12),
+            fontSize: 12,
             fontWeight: "normal",
           },
         },
@@ -116,7 +116,7 @@ export default {
                   ],
                   [1, "transparent"],
                 ],
-                width: util.vh(12),
+                width: 12,
               },
             },
             axisLabel: {
@@ -185,7 +185,7 @@ export default {
           {
             name: "外部刻度",
             type: "gauge",
-            //  center: ['20%', '50%'],
+             center: ['50%', '49.5%'],
             radius: "100%",
             min: this.min, //最小刻度
             max: this.max, //最大刻度
@@ -196,7 +196,7 @@ export default {
               show: true,
               // 仪表盘刻度线
               lineStyle: {
-                width: util.vh(1),
+                width: 1,
                 color: [
                   [
                     1,
@@ -220,9 +220,9 @@ export default {
                 color: $("#appBody").is(".dark")
                   ? partten.getColor("green")
                   : "rgb(57, 54, 143)", //用颜色渐变函数不起作用
-                width: util.vh(1),
+                width: 1,
               },
-              length: util.vh(4),
+              length: 4,
             }, //刻度样式
             splitLine: {
               show: false,
@@ -238,7 +238,7 @@ export default {
           {
             type: "pie",
             radius: ["0", "40%"],
-            center: ["50%", "50%"],
+            center: ["50%", "49.5%"],
             z: 8,
             animation: false,
             hoverAnimation: false,
@@ -258,7 +258,7 @@ export default {
                     color: $("#appBody").is(".dark")
                       ? partten.getColor(this.color)
                       : "rgb(57, 54, 143)",
-                    fontSize: util.vh(12),
+                    fontSize: 12,
                     fontWeight: "bold",
                     position: "center",
                     show: true,
@@ -273,7 +273,7 @@ export default {
           {
             name: "内部阴影",
             type: "gauge",
-            radius: "90%",
+            radius: "95%",
             splitNumber: 10,
             axisLine: {
               lineStyle: {
@@ -322,8 +322,8 @@ export default {
           // 光环
           {
             type: "pie",
-            radius: "40%",
-            center: ["50%", "50%"],
+            radius: "55%",
+            center: ["50%", "49.5%"],
             animationType: "scale",
             animation: false,
             label: {
@@ -347,7 +347,7 @@ export default {
                   shadowColor: $("#appBody").is(".dark")
                     ? partten.getColor(this.color)
                     : "rgb(57, 54, 143)",
-                  shadowBlur: util.vh(20),
+                  shadowBlur: 20,
                 },
               },
             ],

src/components/chart/powerEcharts.vue

@@ -1,6 +1,12 @@
 <template>
   <!--    72小时功率曲线-->
-  <div class="powerTitle" v-if="showTitle">24小时功率曲线</div>
+  <div
+    class="powerTitle"
+    :style="{ 'margin-bottom': orient ? '10px' : '' }"
+    v-if="showTitle"
+  >
+    24小时功率曲线
+  </div>
   <div id="main" :style="{ width: width, height: height }"></div>
 </template>
 
@@ -40,6 +46,7 @@ export default {
       type: Number,
       default: 1,
     },
+    orient: String,
   },
   mounted() {
     this.$nextTick(() => {
@@ -73,13 +80,13 @@ export default {
           },
         },
         legend: {
-          top: "6%",
-          right: "2%",
+          top: this.orient ? "0" : "6%",
+          right: this.orient ? "16%" : "2%",
           textStyle: {
             fontSize: "12",
             color: "#A4A4A5",
           },
-          orient: "vertical",
+          orient: this.orient ? this.orient : "vertical",
           icon: "roundRect",
           itemWidth: 5,
           itemHeight: 5,

src/components/headerNav/index.vue

@@ -166,7 +166,7 @@ export default {
   height: 35px;
   display: flex;
   align-items: center;
-  margin: 16px 0 16px 20px;
+  margin: 16px 0 16px 30px;
 }
 .tab-box {
   display: inline-block;

src/components/lightDetial/index.vue

@@ -168,7 +168,8 @@ export default {
     $route: {
       handler(val) {
         if (
-          val.path.includes("lightmatrix") || val.path.includes("photovoltaicFacility")
+          val.path.includes("lightmatrix") ||
+          val.path.includes("photovoltaicFacility")
         ) {
           this.colorFlag = true;
         }
@@ -330,7 +331,11 @@ export default {
     //打开报警页面
     handleAlarm(wtInfo) {
       this.$refs.alarmDialog &&
-        this.$refs.alarmDialog.openDialog(wtInfo.wtid, this.wpid);
+        this.$refs.alarmDialog.openDialog(
+          wtInfo.wtid,
+          this.wpid,
+          this.wtInfo.wtType
+        );
     },
   },
 };

src/components/qushi/dialogCheck.vue

@@ -209,7 +209,7 @@ export default {
       left: "",
       top: "",
       dialogFull: false,
-      chartHeight: "43vh",
+      chartHeight: "480px",
     };
   },
   async created() {

src/components/qushi/lineCharts.vue

@@ -17,7 +17,7 @@ export default {
     },
     height: {
       type: String,
-      default: "13.889vh",
+      default: "450px",
     },
     interval: {
       type: Number,

src/components/qushi/qushiDialog.vue

@@ -3,7 +3,7 @@
     <el-dialog
       class="dialogs"
       width="85%"
-      top="8vh"
+      top="120px"
       v-model="dialogCurveVisible"
       :show-close="true"
       @close="handleClose"
@@ -15,12 +15,12 @@
           <!--                    <i class="el-icon-full-screen"  @click="c"></i>-->
         </div>
       </template>
-      <div class="dialog-body" style="height: 51vh; width: 100%">
-        <div style="margin-top: -20px; margin-bottom: 20px">
+      <div class="dialog-body" style="height: 480px; width: 100%">
+        <div style="margin-top: -8px; margin-bottom: 20px">
           <div
             style="
-              height: 5vh;
-              line-height: 5vh;
+              height: 20px;
+              line-height: 20px;
               flex-direction: row;
               align-items: center;
               display: flex;
@@ -34,6 +34,7 @@
                     v-model="starttime"
                     type="datetime"
                     placeholder="选择日期"
+                    popper-class="date-select"
                     format="YYYY-MM-DD HH:mm:ss"
                   >
                   </el-date-picker>
@@ -45,6 +46,7 @@
                   <el-date-picker
                     v-model="endtime"
                     type="datetime"
+                    popper-class="date-select"
                     placeholder="选择日期"
                     format="YYYY-MM-DD HH:mm:ss"
                   >
@@ -127,7 +129,7 @@
           class="table-fixed tables"
           ref="multipleTable"
           :cell-style="tagCellStyle"
-          height="23vh"
+          height="230px"
           fit
           stripe
         >
@@ -212,7 +214,7 @@
           <div class="title">{{ ysetName }}</div>
         </div>
       </template>
-      <div class="dialog-body mentuese metse" style="height: 35vh">
+      <div class="dialog-body mentuese metse" style="height: 320px">
         <el-table
           :data="tagDatas"
           class="table-fixed tables"
@@ -378,7 +380,7 @@ export default {
       visibles: "",
       cilent: "",
       dialogFull: false,
-      chartHeight: "43vh",
+      chartHeight: "420px",
       tagNames: "",
       pointIds: "",
       searchFlag: false, //判断是否重置多坐标
@@ -727,7 +729,10 @@ export default {
                 }
               }
 
-              let maxValue = vals.sort((i, j) => i - j).reverse()[0].toFixed(2);
+              let maxValue = vals
+                .sort((i, j) => i - j)
+                .reverse()[0]
+                .toFixed(2);
               let minValue = vals.sort((i, j) => i - j)[0].toFixed(2);
               let totalValue = 0;
               for (var k = 0; k < vals.length; k++) {

src/components/windDetail/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bodys" :style="{ height: showHeight }">
+  <div class="bodys">
     <div class="edge" v-if="Object.keys(monitorInfo).length">
       <div class="info" style="position: relative">
         <div
@@ -213,7 +213,7 @@
       <div class="part-info">
         <div
           class="part-body"
-          :style="{ 'max-height': partHeight }"
+          style="max-height: 220px"
           v-if="partDInfos.length"
         >
           <div class="monitoring-item">
@@ -240,7 +240,7 @@
         </div>
         <div
           class="part-body"
-          :style="{ 'max-height': partHeight }"
+          style="max-height: 220px"
           v-if="partAInfos.length"
         >
           <div class="monitoring-item">
@@ -267,59 +267,6 @@
         </div>
       </div>
     </div>
-    <el-dialog
-      class="dialogs"
-      :destroy-on-close="true"
-      v-model="dialogVisible"
-      width="90%"
-      top="4vh"
-      :show-close="true"
-    >
-      <template #title>
-        <div class="dialog-title">
-          <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
-          <div class="title">{{ reliable?.SBMC }}</div>
-        </div>
-      </template>
-      <div class="body dialog-body" style="height: 77vh; display: flex">
-        <img class="dialog-img" src="@assets/imgs/dialog.png" />
-        <div class="videoPlayer" id="ifVideo" style="width: 87%; height: 100%">
-          <iframe
-            id="ifrId"
-            :src="videoTit[indexe].url"
-            scrolling="no"
-            style="width: 100%; height: 100%"
-          ></iframe>
-        </div>
-        <ul style="overflow-y: scroll; margin-left: 20px">
-          <div style="margin-bottom: 10px; color: #1c98fe; font-size: 16px">
-            监控列表(<span style="color: #f5f7fa">{{ videoTit.length }}</span
-            >)
-          </div>
-          <li
-            class="icLi"
-            v-for="(item, index) in videoTit"
-            style="
-              cursor: pointer;
-              width: 180px;
-              height: 40px;
-              font-size: 14px;
-              margin-left: 10px;
-              line-height: 40px;
-              text-align: center;
-              margin-top: 20px;
-            "
-            @click="clickVideo(index)"
-            :class="indexe == index ? 'actives' : ''"
-            :key="index"
-          >
-            <p>
-              {{ item.name }}
-            </p>
-          </li>
-        </ul>
-      </div>
-    </el-dialog>
     <alarmDialog ref="alarmDialog" />
   </div>
 </template>
@@ -626,7 +573,7 @@ export default {
     //打开报警页面
     handleAlarm(id) {
       this.$refs.alarmDialog &&
-        this.$refs.alarmDialog.openDialog(id, this.wpid);
+        this.$refs.alarmDialog.openDialog(id, this.wpid, this.windInfo.wtType);
     },
     clickVideo(index) {
       this.indexe = index;
@@ -655,7 +602,7 @@ export default {
   display: flex;
   flex-direction: row;
   width: 100%;
-
+  height: 100%;
   .edge {
     width: 18%;
     display: flex;
@@ -917,7 +864,7 @@ export default {
 
         .part-item {
           width: 100%;
-          height: 14vh;
+          height: calc(100% - 42px);
           overflow-y: scroll;
         }
 

src/views/Home/components/map.vue

@@ -9,7 +9,7 @@
       :isShows="false"
     />
     <!-- 山西左侧信息 -->
-    <div v-if="currentTitle != '全国'">
+    <div v-if="currentTitle != '全国'" class="sx-left-box">
       <div class="security-days safe_power">
         <div class="text">安全天数:</div>
         <div class="num">
@@ -72,6 +72,7 @@
         class="qjny-info safe_power"
         @mouseenter="switchShow = true"
         @mouseleave="switchShow = false"
+        :style="{ width: tabShow == 0 ? '406px' : 'calc(170px + 20px)' }"
       >
         <ul>
           <li v-show="tabShow == -1 || tabShow == 0">
@@ -325,8 +326,10 @@
         <power-echarts
           :CurveValues="CurveValues"
           width="680px"
+          height="220px"
           :unit="'MW'"
           :ratio="1000"
+          :orient="'horizontal'"
         />
       </div>
     </div>
@@ -734,6 +737,7 @@
       <el-dialog
         class="dialogs"
         width="80%"
+        top="100px"
         v-model="dialogElectric"
         :show-close="true"
       >
@@ -743,7 +747,7 @@
             <div class="title">{{ showName }}</div>
           </div>
         </template>
-        <div class="dialog-body" style="height: 40vh">
+        <div class="dialog-body" style="height: 500px">
           <img class="dialog-img" src="@assets/imgs/dialog.png" />
           <div class="date">
             <div
@@ -771,7 +775,7 @@
           <BarCharts
             :list="barList"
             width="100%"
-            height="45vh"
+            height="500px"
             :ratio="10000"
             :showLegend="true"
             :top="30"
@@ -785,7 +789,7 @@
         </div>
       </el-dialog>
 
-      <Row type="flex" style="margin-bottom: 20px">
+      <Row type="flex" style="margin-bottom: 30px">
         <Col :span="24">
           <div class="model-bg-new">
             <div class="titles">
@@ -806,7 +810,7 @@
       <!-- 风电场 -->
       <Row
         type="flex"
-        style="margin-bottom: 20px"
+        style="margin-bottom: 30px"
         v-if="activeTab == -1 || activeTab == 0"
       >
         <Col :span="24">
@@ -923,11 +927,7 @@
         </Col>
       </Row>
       <!-- 光电站 -->
-      <Row
-        type="flex"
-        style="margin-bottom: 20px"
-        v-if="activeTab == -2 || activeTab == 0"
-      >
+      <Row type="flex" v-if="activeTab == -2 || activeTab == 0">
         <Col :span="24">
           <div class="model-bg-new-right">
             <div class="infos">
@@ -1036,6 +1036,7 @@
     <el-dialog
       class="dialogs"
       width="80%"
+      top="120px"
       v-model="dialogGroupRealname"
       :show-close="true"
       destroy-on-close
@@ -1046,19 +1047,19 @@
           <div class="title">{{ showName }}</div>
         </div>
       </template>
-      <div class="dialog-body" style="height: 40vh">
+      <div class="dialog-body" style="height: 500px">
         <img class="dialog-img" src="@assets/imgs/dialog.png" />
         <windChartCom
           :windCurveValues="groupList"
           :unit="'MW'"
           :CurveTitle="chartName"
           width="100%"
-          height="38vh"
+          height="480px"
           chartId="windChar"
         />
       </div>
     </el-dialog>
-    <div v-if="currentTitle != '全国'">
+    <div class="sx-right-box" v-if="currentTitle != '全国'">
       <!-- 山西右侧信息 -->
       <div class="card wind_card">
         <el-row>
@@ -1281,6 +1282,7 @@
       <el-dialog
         class="dialogs"
         width="70%"
+        top="120px"
         v-model="dialogVisible"
         :show-close="true"
         destroy-on-close
@@ -1291,13 +1293,13 @@
             <div class="title">{{ showName }}</div>
           </div>
         </template>
-        <div class="dialog-body" style="height: 40vh">
+        <div class="dialog-body" style="height: 500px">
           <img class="dialog-img" src="@assets/imgs/dialog.png" />
           <windChartCom
             :windCurveValues="chartsData"
             :CurveTitle="showName"
             :unit="unit"
-            height="38vh"
+            height="480px"
             chartId="windChar"
           />
         </div>
@@ -1306,6 +1308,7 @@
       <el-dialog
         class="dialogs"
         width="80%"
+        top="120px"
         v-model="dialogElectric"
         :show-close="true"
       >
@@ -1315,7 +1318,7 @@
             <div class="title">{{ showName }}</div>
           </div>
         </template>
-        <div class="dialog-body" style="height: 40vh">
+        <div class="dialog-body" style="height: 500px">
           <img class="dialog-img" src="@assets/imgs/dialog.png" />
           <div class="date" v-if="showkey === 'electric'">
             <div
@@ -1358,7 +1361,7 @@
           </div>
           <BarCharts
             :list="barList"
-            height="45vh"
+            height="500px"
             :ratio="10000"
             :showLegend="true"
             :top="30"
@@ -1512,9 +1515,9 @@ export default {
         wpId.includes("FDC") || wpId.includes("GDC") ? wpId : wpId + activeTab;
       this.requestData();
       this.findProjectPlan();
-      this.timmer = setInterval(() => {
-        this.requestData();
-      }, 5000);
+      //   this.timmer = setInterval(() => {
+      //     this.requestData();
+      //   }, 5000);
 
       this.timmer2 = setInterval(() => {
         this.findProjectPlan(); //发电量
@@ -2398,7 +2401,7 @@ p {
 
   .leftBox {
     margin-top: 20px;
-    margin-left: 20px;
+    margin-left: 30px;
     .model-bg {
       width: 100%;
       min-height: 135px;
@@ -2465,21 +2468,22 @@ p {
     }
     .new-home {
       .energy-system-box {
-        position: absolute;
-        left: 20px;
+        // position: absolute;
+        // left: 20px;
+        margin-bottom: 30px;
+        // margin-left: 15px;
         width: 400px;
         box-sizing: border-box;
         background-color: rgba(3, 5, 9, 0.5);
         &.box1 {
-          top: 270px;
+          //   top: 270px;
+          margin-top: 20px;
         }
         &.box2 {
-          //   top: 500px;
-          top: 450px;
+          //   top: 450px;
         }
         &.box3 {
-          //   top: 730px;
-          top: 690px;
+          //   top: 690px;
         }
         .energy-system-content {
           padding: 5px 5px 15px 5px;
@@ -2590,13 +2594,14 @@ p {
           }
         }
         .text {
-          font-size: 20px;
+          font-size: 28px;
           color: @write;
         }
 
         .num {
           color: @green;
           font-size: 35px;
+          margin-top: 12px;
           .unit {
             font-size: 24px;
             position: relative;
@@ -2950,10 +2955,10 @@ p {
     width: 200px;
 
     .name-box-title {
-      font-size: 2.222vh;
+      font-size: 25px;
       font-weight: 400;
       color: #ffffff;
-      line-height: 1;
+    //   line-height: 1;
       cursor: pointer;
     }
 

src/views/Home/components/map/svg-map-nx.vue

@@ -153,7 +153,7 @@
         xlink:href="#effects-svg-path"
       ></use>
 
-      <g :opacity="o">
+      <g :opacity="o" class="map-dt">
         <image
           v-if="$store.state.themeName === 'dark'"
           style="overflow: visible"
@@ -4223,9 +4223,7 @@ export default {
       let province = this.mapList.find((item) => name == item.text);
       return province.code;
     },
-    clickIncident(data) {
-
-    },
+    clickIncident(data) {},
     mouseoverIncident(data) {
       this.mapDataContentState = data;
     },

src/views/Home/components/power-review-home.vue

@@ -8,7 +8,8 @@
           :unit="item.unit"
           :value="item.value"
           :max="item.max"
-          height="10vh"
+          height="98px"
+          width="100%"
           @click="openDialog(item.dialogTitle)"
         />
       </Col>

src/views/Home/index.vue

@@ -21,7 +21,7 @@ export default {
 
 <style lang="less">
 .top-distance {
-  top: 97px !important;
+  //   top: 97px !important;
 }
 .el-col + .el-col {
   padding-left: 0;
@@ -93,25 +93,25 @@ export default {
   }
   @keyframes safe_power {
     0% {
-      left: -320px;
+      transform: translateX(-100px);
     }
 
-    20% {
-      left: -300px;
-    }
     100% {
-      left: 48px;
+      transform: translateX(0);
     }
   }
   .safe_power {
-    animation: safe_power 2.5s linear;
+    animation: safe_power 1.5s linear;
+  }
+  .sx-left-box {
+    padding-left: 30px;
   }
   .security-days {
-    position: absolute;
-    top: 65px;
-    left: 37px;
-    font-weight: 400;
-    z-index: 4;
+    // position: absolute;
+    // top: 65px;
+    // left: 37px;
+    // font-weight: 400;
+    // z-index: 4;
     .text {
       font-size: 20px;
       font-family: Microsoft YaHei;
@@ -164,13 +164,14 @@ export default {
     }
   }
   .qjny-info {
+    // width: 406px;
     background: rgba(0, 0, 0, 0.3);
     border-radius: 8px;
-    top: 340px;
-    position: absolute;
+    margin-top: 20px;
+    position: relative;
     padding: 20px 10px;
     z-index: 5;
-    left: 37px;
+    // left: 37px;
     .qty_img {
       position: relative;
       left: -39px;
@@ -277,12 +278,13 @@ export default {
   .ecoName {
     width: 406px;
     height: 138px;
+    margin-top: 30px;
     background: rgba(0, 0, 0, 0.3);
     border-radius: 8px;
-    top: 570px;
-    position: absolute;
+    // top: 570px;
+    // position: absolute;
     z-index: 4;
-    left: 37px;
+    // left: 37px;
 
     .ecoTitle {
       width: 350px;
@@ -345,41 +347,42 @@ export default {
     }
   }
   .my_echarts {
-    width: 700px;
-    height: 180px;
+    width: 600px;
+    height: 250px;
+    margin-top: 30px;
     background: rgba(0, 0, 0, 0.3);
     border-radius: 6px;
-    position: absolute;
-    top: 730px;
-    left: 37px;
+    // position: absolute;
+    // top: 730px;
+    // left: 37px;
     z-index: 4;
   }
   @keyframes card {
     0% {
-      right: -360px;
-    }
-
-    20% {
-      right: -300px;
+      right: -100px;
     }
 
     100% {
       right: 37px;
     }
   }
+  .sx-right-box {
+    position: absolute;
+    right: 37px;
+    width: 434px;
+    top: 67px;
+    z-index: 5;
+    animation: card 1.5s linear;
+  }
 
   .card {
-    width: 434px;
     background: rgba(0, 0, 0, 0.3);
     padding: 25px;
-    position: absolute;
-    right: 37px;
-    animation: card 2.5s linear;
   }
   .wind_card {
     z-index: 5;
     height: 158px;
-    top: 38px;
+    margin-bottom: 30px;
     .el-col {
       flex: 1;
       position: relative;
@@ -431,10 +434,8 @@ export default {
   }
   .electric_card {
     height: 320px;
-    top: 217px;
-    right: 37px;
-    z-index: 5;
-
+    position: relative;
+    margin-bottom: 30px;
     .el-row {
       align-items: center;
       margin-bottom: 31px;
@@ -1324,10 +1325,10 @@ export default {
 
 .right {
   width: 450px;
-  height: 100px;
+  //   height: 100px;
   position: absolute;
   right: 25px;
-  top: 25px;
+  top: 73px;
   z-index: 2;
 }
 

src/views/layout/Header.vue

@@ -39,7 +39,12 @@
         </el-dropdown>
       </li>
       <li class="header-menu-user-title">
-        <el-tooltip effect="dark" content="后台管理系统" placement="bottom">
+        <el-tooltip
+          effect="dark"
+          content="后台管理系统"
+          placement="bottom"
+          popper-class="admin-set-tooltip"
+        >
           <i class="svg-icon svg-icon-sm svg-icon-white" @click="goToAdmin">
             <SvgIcon svgid="svg-admin-set"></SvgIcon>
           </i>
@@ -198,7 +203,7 @@ export default {
         let jiami = encrypt(getCookie("jiami")).replace(/\+/g, " ");
         console.log(jiami);
 
-        // let url = `http://192.168.1.110:3002/#/check?username=${getCookie(
+        // let url = `http://192.168.1.112:3002/#/check?username=${getCookie(
         //   "username"
         // )}&jiami=${jiami}`;
         let url = `http://10.81.3.154:8083/#/check?username=${getCookie(
@@ -279,7 +284,11 @@ export default {
   },
 };
 </script>
-
+<style>
+.admin-set-tooltip {
+  font-size: 14px !important;
+}
+</style>
 <style lang="less" scoped>
 .header-menu {
   display: flex;
@@ -405,7 +414,7 @@ export default {
   }
 
   .header-menu-user {
-    width: 16.667vh;
+    width: 140px;
     height: 100%;
     margin: 0;
     padding: 0;
@@ -422,13 +431,13 @@ export default {
       cursor: pointer;
 
       i {
-        margin: 0 0.741vh;
+        margin: 0 5px;
 
-        font-size: 14px;
+        font-size: 16px;
       }
       .el-dropdown-link {
         color: #05bb4c;
-        font-size: 14px;
+        font-size: 16px;
       }
     }
   }
@@ -444,6 +453,7 @@ export default {
     border-radius: 3px;
     .el-dropdown-menu__item {
       color: #dfeef1;
+      font-size: 14px !important;
       &:hover {
         color: #05bb4c;
       }

src/views/layout/Menu.vue

@@ -701,7 +701,7 @@ export default {
 
 <style lang="less">
 .menu {
-  padding-top: 1.481vh;
+  padding-top: 20px;
   z-index: 3001;
 
   .menu-list {
@@ -710,7 +710,7 @@ export default {
     list-style: none;
 
     .menu-item {
-      padding: 1.481vh 0;
+      padding: 20px 0;
       text-align: center;
 
       .menu-icon {
@@ -726,7 +726,7 @@ export default {
   }
 
   i {
-    font-size: 2.222vh;
+    font-size: 16px;
     color: rgba(255, 255, 255, 50%);
   }
 }
@@ -734,10 +734,10 @@ export default {
 .sub-menu {
   position: absolute;
   top: 0;
-  left: 5.3704vh;
+  left: 50px;
   width: 158px;
   height: 100%;
-  padding-top: 1.481vh;
+  padding-top: 10px;
   background: fade(#192a26, 75);
   border-right: 1px solid fade(@green, 50);
   box-shadow: inset 11px 0px 20px 0px fade(#021412, 60);
@@ -758,8 +758,8 @@ export default {
         display: flex;
         width: 100%;
         height: 100%;
-        padding: 0 1.4815vh;
-        font-size: @fontsize-s;
+        padding: 0 20px;
+        font-size: 14px;
         text-decoration: unset;
         white-space: nowrap;
         .menu-icon {

src/views/stateMonitor/LightMatrix/index.vue

@@ -235,6 +235,7 @@
       v-loading="loading"
       element-loading-background="rgba(4, 12, 11, 0.8)"
       element-loading-text="加载中..."
+      style="height: calc(100% - 62px)"
     >
       <div
         class="wind_power_plant"
@@ -368,8 +369,9 @@
             :class="getColor(subItem?.status)"
             :key="index"
             @click="goDetails(subItem, item.czlx, item.wpid)"
-            >{{ subItem.wtname }}</span
-          >
+            >{{ subItem.wtname }}
+            <!-- <i class="lock"></i> -->
+          </span>
         </div>
       </div>
     </el-scrollbar>
@@ -388,21 +390,19 @@
         <div class="title">设备详情</div>
       </div>
     </template>
-    <div class="dialog-body" style="height: 77vh">
+    <div class="dialog-body" style="height: 800px">
       <img class="dialog-img" src="@assets/imgs/dialog.png" />
       <windDetail
         v-show="wtType == -1"
         :wind="wind"
         :wtType="wtType"
         :flag="flag"
-        showHeight="77vh"
       ></windDetail>
       <lightDetail
         v-show="wtType == -2"
         :wind="wind"
         :wtType="wtType"
         :flag="flag"
-        showHeight="77vh"
       ></lightDetail>
     </div>
   </el-dialog>
@@ -616,522 +616,13 @@ export default {
   },
 };
 </script>
-
 <style lang="less" scoped>
-.light-matrix {
-  height: calc(100vh - 59px - 67px);
-  display: flex;
-  flex-direction: column;
-  padding: 0 16px;
-
-  p {
-    margin: 0;
-  }
-  .el-header {
-    height: 78px;
-    //   margin-top: 10px;
-    background-color: #fff;
-    border-radius: 5px 5px 0 0;
-
-    .el-row {
-      align-items: center;
-      height: 100%;
-
-      .el-col {
-        width: 40px;
-
-        div {
-          text-align: center;
-        }
-        .fd-header1,
-        .fd-header2 {
-          display: flex;
-          position: relative;
-          .el-col {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            .active-b {
-              border: 1px solid transparent;
-              padding: 4px 10px;
-              position: relative;
-              .left_p {
-                width: 12px;
-                height: 12px;
-                position: absolute;
-                left: -1px;
-                top: -1px;
-              }
-
-              .right_p {
-                width: 12px;
-                height: 12px;
-                position: absolute;
-                left: 61px;
-                top: 35px;
-              }
-              .yuan {
-                font-family: AgencyFB-Reg;
-                line-height: 20px;
-                display: flex;
-
-                > p:first-of-type {
-                  width: 13px;
-                  height: 13px;
-                  border: 1px solid transparent;
-                  position: absolute;
-                  top: 9px;
-                  left: 10px;
-                }
-
-                > p:last-of-type {
-                  margin-left: 20px;
-                }
-
-                .circle {
-                  display: inline-block;
-                  width: 4px;
-                  height: 4px;
-                  vertical-align: middle;
-                  margin-right: 10px;
-                  position: absolute;
-                  top: 3.5px;
-                  left: 3px;
-                }
-              }
-            }
-          }
-          .el-col.fd-img,
-          .el-col.gf-img {
-            flex: 1.5 0 auto;
-            display: flex;
-            color: #b3b3b3;
-            align-items: none;
-            //   border: 0;
-            //   padding: 0;
-            .imgs {
-              margin-right: 20px;
-            }
-            .titles {
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-              font-size: 14px;
-              color: #0d1e1c;
-              font-weight: bold;
-              p {
-                font-size: 16px;
-                margin-top: 5px;
-              }
-            }
-          }
-          .el-col.fd-img {
-            .qty_imgs {
-              position: absolute;
-              left: 11px;
-              top: 12px;
-              animation: move 1s infinite linear;
-            }
-            @keyframes move {
-              0% {
-                top: 12px;
-              }
-
-              20% {
-                top: 11px;
-              }
-
-              40% {
-                top: 10px;
-              }
-
-              80% {
-                top: 11px;
-              }
-
-              100% {
-                top: 12px;
-              }
-            }
-          }
-          // 待机
-          .el-col:nth-child(2) {
-            color: #1c99ff;
-            .active_bor {
-              border: 1px solid #1c99ff;
-              .left_p {
-                border-left: 1.5px solid #ffffff;
-                border-top: 1.5px solid #ffffff;
-              }
-
-              .right_p {
-                border-right: 1.5px solid #ffffff;
-                border-bottom: 1.5px solid #ffffff;
-              }
-              div {
-                > p:first-of-type {
-                  border: 1px solid #1c99ff !important;
-                }
-              }
-            }
-            .circle {
-              background-color: #1c99ff;
-            }
-          }
-          //并网
-          .el-col:nth-child(3) {
-            color: #05bb4c;
-            .active_bor {
-              border: 1px solid #05bb4c;
-              .left_p {
-                border-left: 1.5px solid #ffffff;
-                border-top: 1.5px solid #ffffff;
-              }
-
-              .right_p {
-                border-right: 1.5px solid #ffffff;
-                border-bottom: 1.5px solid #ffffff;
-              }
-              div {
-                > p:first-of-type {
-                  border: 1px solid #05bb4c !important;
-                }
-              }
-            }
-            .circle {
-              background-color: #05bb4c;
-            }
-          }
-          // 故障
-          .el-col:nth-child(4) {
-            color: #ba3237;
-            .active_bor {
-              border: 1px solid #ba3237;
-              .left_p {
-                border-left: 1.5px solid #ffffff;
-                border-top: 1.5px solid #ffffff;
-              }
-
-              .right_p {
-                border-right: 1.5px solid #ffffff;
-                border-bottom: 1.5px solid #ffffff;
-              }
-              div {
-                > p:first-of-type {
-                  border: 1px solid #ba3237 !important;
-                }
-              }
-            }
-            .circle {
-              background-color: #ba3237;
-            }
-          }
-          // 检修
-          .el-col:nth-child(5) {
-            color: #e17d24;
-            .active_bor {
-              border: 1px solid #e17d24;
-              .left_p {
-                border-left: 1.5px solid #ffffff;
-                border-top: 1.5px solid #ffffff;
-              }
-
-              .right_p {
-                border-right: 1.5px solid #ffffff;
-                border-bottom: 1.5px solid #ffffff;
-              }
-              div {
-                > p:first-of-type {
-                  border: 1px solid #e17d24 !important;
-                }
-              }
-            }
-            .circle {
-              background-color: #e17d24;
-            }
-          }
-          // 限电
-          .el-col:nth-child(6) {
-            color: #c530c8;
-            .active_bor {
-              border: 1px solid #c530c8;
-              .left_p {
-                border-left: 1.5px solid #ffffff;
-                border-top: 1.5px solid #ffffff;
-              }
-
-              .right_p {
-                border-right: 1.5px solid #ffffff;
-                border-bottom: 1.5px solid #ffffff;
-              }
-              div {
-                > p:first-of-type {
-                  border: 1px solid #c530c8 !important;
-                }
-              }
-            }
-            .circle {
-              background-color: #c530c8;
-            }
-          }
-          // 受累
-          .el-col:nth-child(7) {
-            color: #0d1e1c;
-            .active_bor {
-              border: 1px solid #0d1e1c;
-              .left_p {
-                border-left: 1.5px solid #ffffff;
-                border-top: 1.5px solid #ffffff;
-              }
-
-              .right_p {
-                border-right: 1.5px solid #ffffff;
-                border-bottom: 1.5px solid #ffffff;
-              }
-              div {
-                > p:first-of-type {
-                  border: 1px solid #0d1e1c !important;
-                }
-              }
-            }
-            .circle {
-              background-color: #0d1e1c;
-            }
-          }
-          // 离线
-          .el-col:nth-child(8) {
-            color: #929ca3;
-            .active_bor {
-              border: 1px solid #929ca3;
-              .left_p {
-                border-left: 1.5px solid #ffffff;
-                border-top: 1.5px solid #ffffff;
-              }
-
-              .right_p {
-                border-right: 1.5px solid #ffffff;
-                border-bottom: 1.5px solid #ffffff;
-              }
-              div {
-                > p:first-of-type {
-                  border: 1px solid #929ca3 !important;
-                }
-              }
-            }
-            .circle {
-              background-color: #929ca3;
-            }
-          }
-        }
-
-        .fd-header2 {
-          .el-col.gf-img {
-            .qty_img {
-              position: absolute;
-              left: 11px;
-              top: 18px;
-              animation: moves 1s infinite linear;
-            }
-
-            @keyframes moves {
-              0% {
-                top: 18px;
-              }
-
-              20% {
-                top: 17px;
-              }
-
-              40% {
-                top: 16px;
-              }
-
-              80% {
-                top: 17px;
-              }
-
-              100% {
-                top: 18px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .data_statistics {
-    width: 100%;
-    height: 32px;
-    line-height: 32px;
-    // background-color: rgba(0, 24, 68, 0.8);
-    background-color: rgba(96, 103, 105, 0.4);
-    padding: 0 12px;
-
-    .icon-photovoltaic {
-      color: #ff8100;
-    }
-
-    .el-col {
-      height: 32px;
-    }
-    .el-col + .el-col {
-      padding-left: 0;
-    }
-    .el-col:first-child {
-      flex: 0 0 auto;
-      margin-right: 10px;
-      font-family: AgencyFB-Reg;
-      color: #05bb4c;
-      font-size: 14px;
-      i {
-        margin-right: 5px;
-        font-size: 15px;
-        position: relative;
-        top: 3px;
-      }
-    }
-
-    .el-col:not(:first-child) {
-      flex: 1 0 auto;
-      color: #b3b3b3;
-      display: flex;
-      align-items: center;
-
-      span {
-        font-family: Arial;
-        color: #9ca5a8;
-        font-size: 12px;
-        // display: inline-block;
-        width: 45px;
-        text-align: left;
-        margin-left: 5px;
-        vertical-align: middle;
-      }
-    }
-
-    .el-col:nth-child(2) {
-      span {
-        color: #fff;
-      }
-    }
-
-    .el-col:nth-child(3) {
-      span {
-        color: #1c99ff;
-      }
-    }
-
-    .el-col:nth-child(4) {
-      span {
-        color: #05bb4c;
-      }
-    }
-
-    .el-col:nth-child(5) {
-      span {
-        color: #ba3237;
-      }
-    }
-
-    .el-col:nth-child(6) {
-      span {
-        color: #e17d24;
-      }
-    }
-
-    .el-col:nth-child(7) {
-      span {
-        color: #c530c8;
-      }
-    }
-
-    .el-col:nth-child(8) {
-      span {
-        color: #ffffff;
-      }
-    }
-
-    .el-col:nth-child(9) {
-      span {
-        color: #606769;
-      }
-    }
-  }
-
-  .data_views {
-    padding: 5px 0;
-    display: grid;
-    justify-content: space-between;
-    grid-template-columns: repeat(auto-fill, 44px);
-
-    span {
-      cursor: pointer;
-      display: inline-block;
-      min-width: 44px;
-      height: 22px;
-      line-height: 22px;
-      text-align: center;
-      border-radius: 2px;
-      margin-bottom: 3px;
-      margin-right: 4px;
-      font-size: 13px;
-    }
-
-    .card_hover {
-      background: #1a7ccd;
-    }
-    // 待机
-    .blue {
-      color: #1c99ff;
-      border-color: #1c99ff;
-    }
-    // 并网
-    .green {
-      color: #05bb4c;
-      border-color: #05bb4c;
-    }
-    // 限电
-    .pink {
-      color: #c530c8;
-      border-color: #c530c8;
-    }
-    // 故障
-    .red {
-      color: #fff;
-      border-color: #ba3237;
-      background-color: #ba3237;
-    }
-    // 检修
-    .orange {
-      color: #e17d24;
-      border-color: #e17d24;
-    }
-    // 受累
-    .write {
-      color: #ffffff;
-      border-color: rgba(255, 255, 255, 1);
-    }
-    // 离线
-    .gray {
-      color: #a7a7a7;
-      border-color: #606769;
-      background-color: rgba(96, 103, 105, 0.2);
-    }
-
-    .line_ll {
-      color: #ffffff !important;
-      border-color: #606701 !important;
-      background-color: #606239 !important;
-    }
-  }
-}
-// ---------------------------------------------------------------------------
 .dark-matrix {
-  height: calc(100vh - 59px - 67px);
+  height: calc(100% - 59px);
   padding: 0 16px;
   display: flex;
   flex-direction: column;
+  padding-bottom: 10px;
   p {
     margin: 0;
   }
@@ -1585,6 +1076,16 @@ export default {
       margin-bottom: 3px;
       margin-right: 4px;
       font-size: 13px;
+      position: relative;
+      .lock {
+        width: 0;
+        height: 0;
+        border-top: 8px solid #fff;
+        border-right: 8px solid transparent;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
     }
 
     .card_hover {

src/views/stateMonitor/factoryMonitor/photovoltaic/lightBoosterStation/components/previewPicture.vue

@@ -646,7 +646,7 @@ export default {
 <style lang="less" scoped>
 .pop-up-main {
   width: 100%;
-  height: calc(100vh - 13vh);
+  height: 100%;
   overflow-y: hidden;
 
   .paln-box {

src/views/stateMonitor/factoryMonitor/photovoltaic/lightBoosterStation/index.vue

@@ -1,6 +1,6 @@
 <template>
   <headerButton :type="stationType" @renderData="renderData" />
-  <div>
+  <div style="height: calc(100% - 57px)">
     <!-- 光伏 *************** -->
 
     <!-- 繁峙均然 -->

src/views/stateMonitor/factoryMonitor/photovoltaic/lightMatrix/index.vue

@@ -94,7 +94,7 @@
       </div>
       <div
         style="
-          height: calc(100vh - 207px);
+          height: calc(100% - 78px);
           overflow-y: auto;
           background-color: rgba(0, 0, 0, 0.45);
           padding: 5px;
@@ -131,8 +131,9 @@
                   <div class="info">
                     <div
                       class="card-left"
-                      @click="handleLeftClick(val, value.id)"
+                      @click="handleLeftClick(val, matrixOther.czid)"
                     >
+                      <!-- <i class="lock"></i> -->
                       <div class="card-name">{{ val.name }}</div>
                       <i
                         class="svg-icon svg-icon-sm"
@@ -230,9 +231,9 @@
           <div class="title">设备详情</div>
         </div>
       </template>
-      <div class="dialog-body" style="height: 77vh">
+      <div class="dialog-body" style="height: 800px">
         <img class="dialog-img" src="@assets/imgs/dialog.png" />
-        <LightDetail :wind="wind" :flag="flag" showHeight="77vh"></LightDetail>
+        <LightDetail :wind="wind" :flag="flag"></LightDetail>
       </div>
     </el-dialog>
     <qushi-dialog ref="child" :chartName="chartName"></qushi-dialog>
@@ -581,7 +582,7 @@ export default {
           });
       }
     },
-    // 点击左侧数据弹出曲线
+    // 点击左侧数据弹出详情
     handleLeftClick(wt, wpid) {
       this.displayMatrix = true;
       this.$nextTick(() => {
@@ -594,7 +595,7 @@ export default {
         };
         this.flag = true;
       });
-      //   this.$refs.windDetail.start(wt);
+      // this.$refs.windDetail.start(wt);
     },
     // 点击设备右侧数据弹出曲线
     handleRightClick(wtid) {
@@ -914,8 +915,8 @@ p {
 .matrix-body {
   display: flex;
   flex-direction: column;
-  height: 100%;
-
+  height: calc(100% - 57px);
+  padding-bottom: 10px;
   .body-title {
     display: flex;
     flex-direction: row;
@@ -1379,7 +1380,17 @@ p {
             display: flex;
             flex-direction: column;
             align-items: center;
-
+            position: relative;
+            justify-content: center;
+            .lock {
+              width: 0;
+              height: 0;
+              border-top: 8px solid #fff;
+              border-right: 8px solid transparent;
+              position: absolute;
+              top: 0;
+              left: 0;
+            }
             .card-name {
               font-size: 13px;
               font-family: Arial;

src/views/stateMonitor/factoryMonitor/photovoltaic/lightMatrixMonitor/index.vue

@@ -1,193 +1,205 @@
 <template>
-  <div>
-    <headerButton @renderData="renderData" :type="-2" />
-    <div class="matrix-body">
-      <div class="body-title">
-        <div class="base-inf">
-          <div class="title-name">
-            <div class="imgs">
-              <img src="@assets/imgs/downg.png" />
-              <img src="@assets/imgs/ptyup.png" class="qty_img" />
+  <headerButton @renderData="renderData" :type="-2" />
+  <div class="matrix-body">
+    <div class="body-title">
+      <div class="base-inf">
+        <div class="title-name">
+          <div class="imgs">
+            <img src="@assets/imgs/downg.png" />
+            <img src="@assets/imgs/ptyup.png" class="qty_img" />
+          </div>
+          <div class="base-num" @click="handleClick('all')">
+            <div class="ic-nam">
+              <i class="svg-icon svg-icon-sm svg-icon-white">
+                <SvgIcon svgid="svg-station-surveillance"></SvgIcon
+              ></i>
+              <p class="base-name">{{ singleMatrixInfo?.wpname }}</p>
             </div>
-            <div class="base-num" @click="handleClick('all')">
-              <div class="ic-nam">
-                <i class="svg-icon svg-icon-sm svg-icon-white">
-                  <SvgIcon svgid="svg-station-surveillance"></SvgIcon
-                ></i>
-                <p class="base-name">{{ singleMatrixInfo?.wpname }}</p>
-              </div>
 
-              <div class="ic-fan">
-                <i class="svg-icon svg-icon-sm svg-icon-white">
-                  <SvgIcon svgid="svg-photovoltaic"></SvgIcon
-                ></i>
-                <p class="nums">{{ singleMatrixInfo?.jrts }}</p>
-              </div>
+            <div class="ic-fan">
+              <i class="svg-icon svg-icon-sm svg-icon-white">
+                <SvgIcon svgid="svg-photovoltaic"></SvgIcon
+              ></i>
+              <p class="nums">{{ singleMatrixInfo?.jrts }}</p>
             </div>
           </div>
-          <div class="matrix-status">
-            <div
-              class="title-status"
-              :class="item.color"
-              v-for="(item, index) in titleList"
-              :key="index"
-            >
-              <div class="status-first" @click="handleClick(item.value1)">
-                <div class="matrix-status-left">{{ item.name }}</div>
-                <div class="matrix-status-right">
-                  {{ singleMatrixInfo[item.code] }}
-                </div>
+        </div>
+        <div class="matrix-status">
+          <div
+            class="title-status"
+            :class="item.color"
+            v-for="(item, index) in titleList"
+            :key="index"
+          >
+            <div class="status-first" @click="handleClick(item.value1)">
+              <div class="matrix-status-left">{{ item.name }}</div>
+              <div class="matrix-status-right">
+                {{ singleMatrixInfo[item.code] }}
               </div>
-              <div class="status-end" @click="handleClick(item.value2)">
-                <div class="matrix-status-left">
-                  <i
-                    class="svg-icon svg-icon-sm"
-                    :class="
-                      $store.state.themeName === 'dark'
-                        ? 'svg-icon-' + item.color
-                        : 'white'
-                    "
-                  >
-                    <SvgIcon :svgid="item.icon1"></SvgIcon>
-                  </i>
-                  {{ item.text1 }}
-                </div>
-                <div class="matrix-status-right">
-                  {{ singleMatrixInfo[item.code1] }}
-                </div>
+            </div>
+            <div class="status-end" @click="handleClick(item.value2)">
+              <div class="matrix-status-left">
+                <i
+                  class="svg-icon svg-icon-sm"
+                  :class="
+                    $store.state.themeName === 'dark'
+                      ? 'svg-icon-' + item.color
+                      : 'white'
+                  "
+                >
+                  <SvgIcon :svgid="item.icon1"></SvgIcon>
+                </i>
+                {{ item.text1 }}
               </div>
-              <div class="status-end" @click="handleClick(item.value3)">
-                <div class="matrix-status-left">
-                  <i
-                    class="svg-icon svg-icon-sm"
-                    :class="
-                      $store.state.themeName === 'dark'
-                        ? 'svg-icon-' + item.color
-                        : 'white'
-                    "
-                  >
-                    <SvgIcon :svgid="item.icon2"></SvgIcon>
-                  </i>
-                  {{ item.text2 }}
-                </div>
-                <div class="matrix-status-right">
-                  {{ singleMatrixInfo[item.code2] }}
-                </div>
+              <div class="matrix-status-right">
+                {{ singleMatrixInfo[item.code1] }}
               </div>
             </div>
-          </div>
-        </div>
-        <div
-          class="unpaid"
-          @click="handleStationCurveClick(singleMatrixInfo.wpid)"
-        >
-          <div class="unpaid-list">
-            <div
-              class="unpaid-item"
-              v-for="(item, index) in unpaidList"
-              :key="index"
-            >
-              <div class="percent">{{ item.text }}</div>
-              <div class="nums">
-                {{
-                  singleMatrixInfo[item.code]
-                    ? item.code == "speed"
-                      ? singleMatrixInfo[item.code]?.toFixed(2)
-                      : (singleMatrixInfo[item.code] / 1000)?.toFixed(2)
-                    : 0
-                }}
+            <div class="status-end" @click="handleClick(item.value3)">
+              <div class="matrix-status-left">
+                <i
+                  class="svg-icon svg-icon-sm"
+                  :class="
+                    $store.state.themeName === 'dark'
+                      ? 'svg-icon-' + item.color
+                      : 'white'
+                  "
+                >
+                  <SvgIcon :svgid="item.icon2"></SvgIcon>
+                </i>
+                {{ item.text2 }}
+              </div>
+              <div class="matrix-status-right">
+                {{ singleMatrixInfo[item.code2] }}
               </div>
             </div>
           </div>
         </div>
       </div>
       <div
-        style="
-          height: calc(100vh - 207px);
-          overflow-y: auto;
-          background-color: rgba(0, 0, 0, 0.45);
-          padding: 5px;
-          border-radius: 0 0 5px 5px;
-        "
+        class="unpaid"
+        @click="handleStationCurveClick(singleMatrixInfo.wpid)"
       >
-        <div
-          class="matrixs"
-          v-for="(value, indexe) in showMatrixList"
-          :key="indexe"
-        >
-          <div class="matrix-title">
-            <div class="matrix-svg">
-              <i class="svg-icon svg-icon-sm svg-icon-orange">
-                <SvgIcon svgid="svg-issue"></SvgIcon
-              ></i>
-              <span class="station-name">{{ value.name }}</span>
+        <div class="unpaid-list">
+          <div
+            class="unpaid-item"
+            v-for="(item, index) in unpaidList"
+            :key="index"
+          >
+            <div class="percent">{{ item.text }}</div>
+            <div class="nums">
+              {{
+                singleMatrixInfo[item.code]
+                  ? item.code == "speed"
+                    ? singleMatrixInfo[item.code]?.toFixed(2)
+                    : (singleMatrixInfo[item.code] / 1000)?.toFixed(2)
+                  : 0
+              }}
             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style="
+        height: calc(100% - 78px);
+        overflow-y: auto;
+        background-color: rgba(0, 0, 0, 0.45);
+        padding: 5px;
+        border-radius: 0 0 5px 5px;
+      "
+    >
+      <div
+        class="matrixs"
+        v-for="(value, indexe) in showMatrixList"
+        :key="indexe"
+      >
+        <div class="matrix-title">
+          <div class="matrix-svg">
+            <i class="svg-icon svg-icon-sm svg-icon-orange">
+              <SvgIcon svgid="svg-issue"></SvgIcon
+            ></i>
+            <span class="station-name">{{ value.name }}</span>
+          </div>
 
-            <div class="indicator">
-              <div
-                class="sub-title-item"
-                :class="{ active: index >= 7 }"
-                v-for="(item, index) in subTitleDatas"
-                :key="index"
-                @click="handleIndicatorClick(value.id)"
+          <div class="indicator">
+            <div
+              class="sub-title-item"
+              :class="{ active: index >= 7 }"
+              v-for="(item, index) in subTitleDatas"
+              :key="index"
+              @click="handleIndicatorClick(value.id)"
+            >
+              <span>{{ item.text }}</span>
+              <span
+                class="sub-value"
+                :style="{ color: item.color }"
+                :class="item.cls"
               >
-                <span>{{ item.text }}</span>
-                <span
-                  class="sub-value"
-                  :style="{ color: item.color }"
-                  :class="item.cls"
-                >
-                  {{
-                    index >= 7
-                      ? item.ratio
-                        ? (
-                            Number(value[item.key] ? value[item.key] : "0") /
-                            item.ratio
-                          ).toFixed(2)
-                        : Number(
-                            value[item.key] ? value[item.key] : "0"
-                          ).toFixed(2)
+                {{
+                  index >= 7
+                    ? item.ratio
+                      ? (
+                          Number(value[item.key] ? value[item.key] : "0") /
+                          item.ratio
+                        ).toFixed(2)
                       : Number(value[item.key] ? value[item.key] : "0").toFixed(
-                          0
+                          2
                         )
-                  }}</span
-                >
-              </div>
+                    : Number(value[item.key] ? value[item.key] : "0").toFixed(0)
+                }}</span
+              >
             </div>
           </div>
+        </div>
 
-          <div
-            class="line_all"
-            v-for="(mes, index) in value?.lineVos"
-            :key="index"
-          >
-            <div class="line-namebox">
-              <div class="line-name">
-                {{ mes.name }}
-              </div>
+        <div
+          class="line_all"
+          v-for="(mes, index) in value?.lineVos"
+          :key="index"
+        >
+          <div class="line-namebox">
+            <div class="line-name">
+              {{ mes.name }}
             </div>
-            <div class="line-list">
+          </div>
+          <div class="line-list">
+            <div
+              class="matrix-item"
+              v-for="(val, indexes) in mes?.wtDataList"
+              :key="indexes"
+            >
+              <!--  风机颜色判断-->
               <div
-                class="matrix-item"
-                v-for="(val, indexes) in mes?.wtDataList"
-                :key="indexes"
+                class="matrix-card"
+                style="cursor: pointer"
+                :class="
+                  val.status !== '' && colorList[val.status]
+                    ? colorList[Number(val.status)]
+                    : 'gray'
+                "
               >
-                <!--  风机颜色判断-->
-                <div
-                  class="matrix-card"
-                  style="cursor: pointer"
-                  :class="
-                    val.status !== '' && colorList[val.status]
-                      ? colorList[Number(val.status)]
-                      : 'gray'
-                  "
-                >
-                  <div class="info">
-                    <div
-                      class="card-left"
-                      @click="handleLeftClick(val, value.id)"
+                <div class="info">
+                  <div
+                    class="card-left"
+                    @click="handleLeftClick(val, stationCode)"
+                  >
+                    <!-- <i class="lock"></i> -->
+                    <div class="card-name">{{ val.wtname }}</div>
+                    <i
+                      class="svg-icon svg-icon-sm"
+                      :class="
+                        val.status === 4 || val.status === 5
+                          ? 'svg-icon-white'
+                          : `svg-icon-${colorList[Number(val.status)]}`
+                      "
                     >
-                      <div class="card-name">{{ val.wtname }}</div>
+                      <SvgIcon :svgid="mapping[Number(val.status)]"></SvgIcon
+                    ></i>
+                  </div>
+                  <div class="dashed" />
+                  <div class="card-right" @click="handleRightClick(val.wtid)">
+                    <div class="right-item">
                       <i
                         class="svg-icon svg-icon-sm"
                         :class="
@@ -196,81 +208,62 @@
                             : `svg-icon-${colorList[Number(val.status)]}`
                         "
                       >
-                        <SvgIcon :svgid="mapping[Number(val.status)]"></SvgIcon
+                        <SvgIcon svgid="svg-P"></SvgIcon
                       ></i>
-                    </div>
-                    <div class="dashed" />
-                    <div class="card-right" @click="handleRightClick(val.wtid)">
-                      <div class="right-item">
-                        <i
-                          class="svg-icon svg-icon-sm"
-                          :class="
-                            val.status === 4 || val.status === 5
-                              ? 'svg-icon-white'
-                              : `svg-icon-${colorList[Number(val.status)]}`
-                          "
-                        >
-                          <SvgIcon svgid="svg-P"></SvgIcon
-                        ></i>
-                        <div class="right-value">
-                          {{
-                            val.power
-                              ? val && Number(val.power)?.toFixed(2)
-                              : "0.00"
-                          }}
-                        </div>
+                      <div class="right-value">
+                        {{
+                          val.power
+                            ? val && Number(val.power)?.toFixed(2)
+                            : "0.00"
+                        }}
                       </div>
-                      <div class="right-item">
-                        <i
-                          class="svg-icon svg-icon-sm"
-                          :class="
-                            val.status === 4 || val.status === 5
-                              ? 'svg-icon-white'
-                              : `svg-icon-${colorList[Number(val.status)]}`
-                          "
-                        >
-                          <SvgIcon svgid="svg-A"></SvgIcon
-                        ></i>
-                        <div class="right-value">
-                          {{
-                            val.current
-                              ? Number(val.current)?.toFixed(2)
-                              : "0.00"
-                          }}
-                        </div>
+                    </div>
+                    <div class="right-item">
+                      <i
+                        class="svg-icon svg-icon-sm"
+                        :class="
+                          val.status === 4 || val.status === 5
+                            ? 'svg-icon-white'
+                            : `svg-icon-${colorList[Number(val.status)]}`
+                        "
+                      >
+                        <SvgIcon svgid="svg-A"></SvgIcon
+                      ></i>
+                      <div class="right-value">
+                        {{
+                          val.current ? Number(val.current)?.toFixed(2) : "0.00"
+                        }}
                       </div>
-                      <div class="right-item">
-                        <i
-                          class="svg-icon svg-icon-sm"
-                          :class="
-                            val.status === 4 || val.status === 5
-                              ? 'svg-icon-white'
-                              : `svg-icon-${colorList[Number(val.status)]}`
-                          "
-                        >
-                          <SvgIcon svgid="svg-V"></SvgIcon
-                        ></i>
-                        <div class="right-value">
-                          {{
-                            val.voltage
-                              ? Number(val.voltage)?.toFixed(2)
-                              : "0.00"
-                          }}
-                        </div>
+                    </div>
+                    <div class="right-item">
+                      <i
+                        class="svg-icon svg-icon-sm"
+                        :class="
+                          val.status === 4 || val.status === 5
+                            ? 'svg-icon-white'
+                            : `svg-icon-${colorList[Number(val.status)]}`
+                        "
+                      >
+                        <SvgIcon svgid="svg-V"></SvgIcon
+                      ></i>
+                      <div class="right-value">
+                        {{
+                          val.voltage ? Number(val.voltage)?.toFixed(2) : "0.00"
+                        }}
                       </div>
                     </div>
                   </div>
-                  <div class="matrix-progress">
-                    <div
-                      class="progress-block"
-                      :style="{
-                        width: (val.rate > 100 ? 100 : val.rate) + '%',
-                      }"
-                      :class="
-                        findUpColor(ratelist, parseInt(Number(val.ssqfzt)) + 1)
-                      "
-                    ></div>
-                  </div>
+                </div>
+                <div class="matrix-progress">
+                  <div
+                    class="progress-block"
+                    :style="{
+                      width: (val.rate > 100 ? 100 : val.rate) + '%',
+                    }"
+                    :class="
+                      findUpColor(ratelist, parseInt(Number(val.ssqfzt)) + 1)
+                    "
+                  ></div>
                 </div>
               </div>
             </div>
@@ -278,27 +271,27 @@
         </div>
       </div>
     </div>
-    <el-dialog
-      class="dialogs"
-      width="90%"
-      top="40px"
-      v-model="displayMatrix"
-      :show-close="true"
-      destroy-on-close
-    >
-      <template #title>
-        <div class="dialog-title">
-          <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
-          <div class="title">设备详情</div>
-        </div>
-      </template>
-      <div class="dialog-body" style="height: 77vh">
-        <img class="dialog-img" src="@assets/imgs/dialog.png" />
-        <LightDetail :wind="wind" :flag="flag" showHeight="77vh"></LightDetail>
-      </div>
-    </el-dialog>
-    <qushi-dialog ref="child" :chartName="chartName"></qushi-dialog>
   </div>
+  <el-dialog
+    class="dialogs"
+    width="90%"
+    top="40px"
+    v-model="displayMatrix"
+    :show-close="true"
+    destroy-on-close
+  >
+    <template #title>
+      <div class="dialog-title">
+        <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
+        <div class="title">设备详情</div>
+      </div>
+    </template>
+    <div class="dialog-body" style="height: 800px">
+      <img class="dialog-img" src="@assets/imgs/dialog.png" />
+      <LightDetail :wind="wind" :flag="flag"></LightDetail>
+    </div>
+  </el-dialog>
+  <qushi-dialog ref="child" :chartName="chartName"></qushi-dialog>
 </template>
 
 <script>
@@ -1141,8 +1134,8 @@ p {
 .matrix-body {
   display: flex;
   flex-direction: column;
-  height: 100%;
-
+  height: calc(100% - 57px);
+  padding-bottom: 10px;
   .body-title {
     display: flex;
     flex-direction: row;
@@ -1515,7 +1508,6 @@ p {
         display: flex;
         flex-direction: row;
         align-items: center;
-        width: 93%;
         height: 100%;
         margin-left: 30px;
         white-space: nowrap;
@@ -1606,7 +1598,16 @@ p {
             display: flex;
             flex-direction: column;
             align-items: center;
-
+            position: relative;
+            .lock {
+              width: 0;
+              height: 0;
+              border-top: 8px solid #fff;
+              border-right: 8px solid transparent;
+              position: absolute;
+              top: 0;
+              left: 0;
+            }
             .card-name {
               font-size: 13px;
               font-family: Arial;

src/views/stateMonitor/factoryMonitor/photovoltaic/lighthome/index.vue

@@ -3,90 +3,12 @@
     <headerButton type="-2" @renderData="renderData" />
     <div class="content">
       <div class="first">
-        <div class="weather" :style="heightCalculate" id="ifVideo">
-          <div class="weather-item" :style="weatherWidth">
-            <div class="station-name">
-              {{ stationName }}
-            </div>
-            <div class="temperature">
-              <img
-                class="temperature-img"
-                v-if="weather.weather === '少云'"
-                src="@assets/imgs/cloudy.png"
-              />
-              <img
-                class="temperature-img"
-                v-if="weather.weather === '多云'"
-                src="@assets/imgs/morecloudy.png"
-              />
-              <img
-                class="temperature-img"
-                v-if="weather.weather === '阴'"
-                src="@assets/imgs/overcast.png"
-              />
-              <img
-                class="temperature-img"
-                v-if="weather.weather === '雨'"
-                src="@assets/imgs/rain.png"
-              />
-              <img
-                class="temperature-img"
-                v-if="weather.weather === '晴'"
-                src="@assets/imgs/sun.png"
-              />
-
-              <div class="temperature-item">
-                <span class="temperature-value"> {{ weather?.temp }} ℃</span>
-                <span>{{ weather.weather }}</span>
-              </div>
-            </div>
-            <div class="other">
-              {{ weather?.visibility }}M
-              <div class="other-value">能见度</div>
-            </div>
-            <div class="other">
-              {{ weather?.humidity }}%
-              <div class="other-value">湿度</div>
-            </div>
-            <div class="other">
-              {{ weather?.pressure }}kPa
-              <div class="other-value">气压</div>
-            </div>
-          </div>
+        <div class="weather" id="ifVideo">
           <div class="viedo" :style="veidoWidth">
-            <div class="videoPlayer" id="videoContainer" v-if="pageType == 1">
-              <video
-                id="video"
-                controls
-                controlsList="nofullscreen nodownload"
-                muted="muted"
-                autoplay="autoplay"
-                loop
-              >
-                <source :src="pageUrl" type="video/mp4" />
-              </video>
-            </div>
-            <div
-              class="videoPlayer"
-              id="videoContainer"
-              v-else-if="pageType == 2"
-            >
-              <iframe
-                id="ifrId"
-                :src="pageUrl"
-                scrolling="no"
-                style="width: 100%; height: 100%"
-              ></iframe>
-            </div>
-            <img
-              class="viedo-img"
-              v-else
-              v-imageerror="defaultImg"
-              :src="pageUrl"
-            />
+            <img class="viedo-img" v-imageerror="defaultImg" :src="pageUrl" />
           </div>
         </div>
-        <div class="status" :style="heightCalculate">
+        <div class="status">
           <div class="indicator-title">
             <div class="point point-left bottom"></div>
             <div class="point point-right bottom"></div>
@@ -144,10 +66,7 @@
             </div>
           </div>
         </div>
-        <div
-          class="power"
-          :style="screenHeight > 1000 ? 'height: 28vh' : 'height: 24vh'"
-        >
+        <div class="power">
           <div class="indicator-title">
             <div class="point point-left bottom"></div>
             <div class="point point-right bottom"></div>
@@ -155,7 +74,7 @@
           </div>
           <div
             class="echarts"
-            style="width: 100%; margin-top: 10px"
+            style="width: 100%; height: calc(100% - 39px); margin-top: 10px"
             v-if="showFlag"
           >
             <power-echarts
@@ -164,14 +83,14 @@
               :ratio="1000"
               width="100%"
               unit="MW"
-              :height="screenHeight > 1000 ? '23vh' : '19vh'"
+              height="100%"
               :showTitle="false"
             />
           </div>
         </div>
       </div>
       <div class="first">
-        <div class="base-info" :style="heightCalculate">
+        <div class="base-info">
           <div class="base-info-left">
             <div class="top">
               日发电量
@@ -246,7 +165,7 @@
             </div>
           </div>
         </div>
-        <div class="status" :style="heightCalculate">
+        <div class="status">
           <div class="indicator-title">
             <div class="point point-left bottom"></div>
             <div class="point point-right bottom"></div>
@@ -280,26 +199,23 @@
           <!-- <div class="circle"></div> -->
           <PieChart
             width="100%"
-            height="240px"
+            height="100%"
             :ratio="10000"
             unit="万kWh"
             :lossPower="lossPower"
           ></PieChart>
         </div>
-        <div
-          class="power"
-          :style="screenHeight > 1000 ? 'height: 28vh' : 'height: 24vh'"
-        >
+        <div class="power">
           <div class="indicator-title">
             <div class="point point-left bottom"></div>
             <div class="point point-right bottom"></div>
             <div class="status-title">日发电量</div>
           </div>
-          <div v-if="showFlag" style="width: 100%">
+          <div style="width: 100%; height: calc(100% - 39px); margin-top: 10px">
             <BarCharts
               :list="barList"
               width="100%"
-              :height="screenHeight > 1000 ? '23vh' : '19vh'"
+              height="100%"
               :ratio="10000"
               :showLegend="false"
               :units="units"
@@ -337,22 +253,19 @@
             </div>
           </div>
         </div>
-        <div
-          class="contrast"
-          :style="screenHeight > 1000 ? 'height: 28vh' : 'height: 24vh'"
-        >
+        <div class="contrast">
           <div class="indicator-title">
             <div class="point point-left point-right bottom"></div>
             <div class="point point-right bottom"></div>
             <div>今日和昨日出力对比</div>
           </div>
-          <div v-if="showFlag" style="width: 100%; margin-top: 10px">
+          <div style="width: 100%; margin-top: 10px; height: calc(100% - 39px)">
             <LineCharts
               class="charts-item"
               :list="contrastList"
               width="100%"
               :ratio="1000"
-              :height="screenHeight > 1000 ? '23vh' : '19vh'"
+              height="100%"
               :unit="'MW'"
               :showLegend="true"
             />
@@ -1007,10 +920,6 @@ export default {
 .body {
   height: 100%;
 }
-.windPowerContent {
-  height: 100%;
-  width: calc(100% - 60px);
-}
 
 .title-bar {
   width: 100%;
@@ -1098,7 +1007,7 @@ export default {
   flex-direction: column;
   align-items: center;
   width: 36%;
-  height: 88vh;
+  height: calc(100% - 10px);
   margin-right: 21px;
 
   .weather {
@@ -1187,7 +1096,7 @@ export default {
 
   .status {
     width: 100%;
-    height: 310px;
+    height: 300px;
     background-color: rgba(96, 103, 105, 0.2);
     margin-bottom: 20px;
     display: flex;
@@ -1195,21 +1104,9 @@ export default {
     align-items: center;
     position: relative;
     border-radius: 5px;
-
-    .circle {
-      position: absolute;
-      width: 160px;
-      height: 160px;
-      border-radius: 50%;
-      border: 2px solid #157cec;
-      left: 158px;
-      top: 80px;
-      box-shadow: 0px 0px 12px 0px #157cec inset;
-    }
-
     .status-concent {
       width: 90%;
-      height: 80%;
+      height: calc(100% - 39px);
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -1432,17 +1329,12 @@ export default {
 
   .power {
     width: 100%;
-    height: 273px;
+    height: calc(100% - 301px - 300px - 40px);
     background-color: rgba(96, 103, 105, 0.2);
     border-radius: 5px;
     display: flex;
     flex-direction: column;
     align-items: center;
-
-    .windChar {
-      width: 100%;
-      height: 100%;
-    }
   }
 
   .base-info {
@@ -1650,11 +1542,11 @@ export default {
   flex-direction: column;
   align-items: center;
   width: 25.5%;
-  height: 88vh;
+  height: calc(100% - 10px);
 
   .info {
     width: 100%;
-    height: 580px;
+    height: 621px;
     background-color: rgba(96, 103, 105, 0.2);
     border-radius: 5px;
     margin-bottom: 20px;
@@ -1687,7 +1579,7 @@ export default {
 
   .contrast {
     width: 100%;
-    height: 273px;
+    height: calc(100% - 621px - 20px);
     background-color: rgba(96, 103, 105, 0.2);
     border-radius: 5px;
     display: flex;

src/views/stateMonitor/factoryMonitor/photovoltaic/photovoltaicFacility/index.vue

@@ -82,22 +82,25 @@ export default {
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
+  padding-bottom: 10px;
 }
 .content {
   display: flex;
   flex-direction: row;
   width: 100%;
+  height: calc(100% - 57px);
   .station {
     width: 250px;
-    height: 87vh;
+    height: 100%;
     // background-color: rgba(0, 0, 0, 0.45);
     background-color: rgba(96, 103, 105, 0.2);
     border-radius: 8px;
   }
   .detail {
     width: calc(100% - 250px);
+    height: 100%;
     padding-left: 15px;
-    height: 87vh;
   }
 }
 </style>

src/views/stateMonitor/factoryMonitor/windPowerPlant/boosterStation/components/previewPicture.vue

@@ -646,7 +646,7 @@ export default {
 <style lang="less" scoped>
 .pop-up-main {
   width: 100%;
-  height: calc(100vh - 13vh);
+  height: 100%;
   overflow-y: hidden;
 
   .paln-box {

src/views/stateMonitor/factoryMonitor/windPowerPlant/boosterStation/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <headerButton :type="stationType"  @renderData="renderData" />
-  <div>
+  <headerButton :type="stationType" @renderData="renderData" />
+  <div style="height: calc(100% - 57px)">
     <!-- 风场 *************** -->
     <!-- 高家堰 -->
     <GJY class="booster-station-body" v-if="wpId === 'SXJ_KGDL_GJY_FDC_STA'" />
@@ -79,12 +79,14 @@ export default {
     };
   },
   methods: {
-   
     renderData(company, wpId) {
       this.wpId = wpId;
     },
   },
-  
 };
 </script>
-<style></style>
+<style>
+.booster-station-body {
+  height: 100%;
+}
+</style>

src/views/stateMonitor/factoryMonitor/windPowerPlant/draughtFan/index.vue

@@ -83,14 +83,17 @@ export default {
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
+  padding-bottom: 10px;
 }
 .content {
   display: flex;
   flex-direction: row;
   width: 100%;
+  height: calc(100% - 57px);
   .station {
     width: 250px;
-    height: 87vh;
+    height: 100%;
     // background-color: rgba(0, 0, 0, 0.45);
     background-color: rgba(96, 103, 105, 0.2);
     border-radius: 8px;
@@ -98,7 +101,7 @@ export default {
   .detail {
     width: calc(100% - 250px);
     padding-left: 15px;
-    height: 87vh;
+    height: 100%;
   }
 }
 </style>

src/views/stateMonitor/factoryMonitor/windPowerPlant/matrixMonitor/index.vue

@@ -1,193 +1,205 @@
 <template>
-  <div>
-    <headerButton @renderData="renderData" :type="-1" />
-    <div class="matrix-body">
-      <div class="body-title">
-        <div class="base-inf">
-          <div class="title-name">
-            <div class="imgs">
-              <img src="@assets/imgs/downF.png" />
-              <img src="@assets/imgs/windup.png" class="qty_img" />
+  <headerButton @renderData="renderData" :type="-1" />
+  <div class="matrix-body">
+    <div class="body-title">
+      <div class="base-inf">
+        <div class="title-name">
+          <div class="imgs">
+            <img src="@assets/imgs/downF.png" />
+            <img src="@assets/imgs/windup.png" class="qty_img" />
+          </div>
+          <div class="base-num" @click="handleClick('all')">
+            <div class="ic-nam">
+              <i class="svg-icon svg-icon-sm svg-icon-white">
+                <SvgIcon svgid="svg-station-surveillance"></SvgIcon
+              ></i>
+              <p class="base-name">{{ singleMatrixInfo?.wpname }}</p>
             </div>
-            <div class="base-num" @click="handleClick('all')">
-              <div class="ic-nam">
-                <i class="svg-icon svg-icon-sm svg-icon-white">
-                  <SvgIcon svgid="svg-station-surveillance"></SvgIcon
-                ></i>
-                <p class="base-name">{{ singleMatrixInfo?.wpname }}</p>
-              </div>
 
-              <div class="ic-fan">
-                <i class="svg-icon svg-icon-sm svg-icon-white">
-                  <SvgIcon svgid="svg-wind-site"></SvgIcon
-                ></i>
-                <p class="nums">{{ singleMatrixInfo?.jrts }}</p>
-              </div>
+            <div class="ic-fan">
+              <i class="svg-icon svg-icon-sm svg-icon-white">
+                <SvgIcon svgid="svg-wind-site"></SvgIcon
+              ></i>
+              <p class="nums">{{ singleMatrixInfo?.jrts }}</p>
             </div>
           </div>
-          <div class="matrix-status">
-            <div
-              class="title-status"
-              :class="item.color"
-              v-for="(item, index) in titleList"
-              :key="index"
-            >
-              <div class="status-first" @click="handleClick(item.value1)">
-                <div class="matrix-status-left">{{ item.name }}</div>
-                <div class="matrix-status-right">
-                  {{ singleMatrixInfo[item.code] }}
-                </div>
+        </div>
+        <div class="matrix-status">
+          <div
+            class="title-status"
+            :class="item.color"
+            v-for="(item, index) in titleList"
+            :key="index"
+          >
+            <div class="status-first" @click="handleClick(item.value1)">
+              <div class="matrix-status-left">{{ item.name }}</div>
+              <div class="matrix-status-right">
+                {{ singleMatrixInfo[item.code] }}
               </div>
-              <div class="status-end" @click="handleClick(item.value2)">
-                <div class="matrix-status-left">
-                  <i
-                    class="svg-icon svg-icon-sm"
-                    :class="
-                      $store.state.themeName === 'dark'
-                        ? 'svg-icon-' + item.color
-                        : 'white'
-                    "
-                  >
-                    <SvgIcon :svgid="item.icon1"></SvgIcon>
-                  </i>
-                  {{ item.text1 }}
-                </div>
-                <div class="matrix-status-right">
-                  {{ singleMatrixInfo[item.code1] }}
-                </div>
+            </div>
+            <div class="status-end" @click="handleClick(item.value2)">
+              <div class="matrix-status-left">
+                <i
+                  class="svg-icon svg-icon-sm"
+                  :class="
+                    $store.state.themeName === 'dark'
+                      ? 'svg-icon-' + item.color
+                      : 'white'
+                  "
+                >
+                  <SvgIcon :svgid="item.icon1"></SvgIcon>
+                </i>
+                {{ item.text1 }}
               </div>
-              <div class="status-end" @click="handleClick(item.value3)">
-                <div class="matrix-status-left">
-                  <i
-                    class="svg-icon svg-icon-sm"
-                    :class="
-                      $store.state.themeName === 'dark'
-                        ? 'svg-icon-' + item.color
-                        : 'white'
-                    "
-                  >
-                    <SvgIcon :svgid="item.icon2"></SvgIcon>
-                  </i>
-                  {{ item.text2 }}
-                </div>
-                <div class="matrix-status-right">
-                  {{ singleMatrixInfo[item.code2] }}
-                </div>
+              <div class="matrix-status-right">
+                {{ singleMatrixInfo[item.code1] }}
               </div>
             </div>
-          </div>
-        </div>
-        <div
-          class="unpaid"
-          @click="handleStationCurveClick(singleMatrixInfo.wpid)"
-        >
-          <div class="unpaid-list">
-            <div
-              class="unpaid-item"
-              v-for="(item, index) in unpaidList"
-              :key="index"
-            >
-              <div class="percent">{{ item.text }}</div>
-              <div class="nums">
-                {{
-                  singleMatrixInfo[item.code]
-                    ? item.code == "speed"
-                      ? singleMatrixInfo[item.code]?.toFixed(2)
-                      : (singleMatrixInfo[item.code] / 1000)?.toFixed(2)
-                    : 0
-                }}
+            <div class="status-end" @click="handleClick(item.value3)">
+              <div class="matrix-status-left">
+                <i
+                  class="svg-icon svg-icon-sm"
+                  :class="
+                    $store.state.themeName === 'dark'
+                      ? 'svg-icon-' + item.color
+                      : 'white'
+                  "
+                >
+                  <SvgIcon :svgid="item.icon2"></SvgIcon>
+                </i>
+                {{ item.text2 }}
+              </div>
+              <div class="matrix-status-right">
+                {{ singleMatrixInfo[item.code2] }}
               </div>
             </div>
           </div>
         </div>
       </div>
       <div
-        style="
-          height: calc(100vh - 207px);
-          overflow-y: auto;
-          background-color: rgba(0, 0, 0, 0.45);
-          padding: 5px;
-          border-radius: 0 0 5px 5px;
-        "
+        class="unpaid"
+        @click="handleStationCurveClick(singleMatrixInfo.wpid)"
       >
-        <div
-          class="matrixs"
-          v-for="(value, indexe) in showMatrixList"
-          :key="indexe"
-        >
-          <div class="matrix-title">
-            <div class="matrix-svg">
-              <i class="svg-icon svg-icon-sm svg-icon-green">
-                <SvgIcon svgid="svg-issue"></SvgIcon
-              ></i>
-              <span class="station-name">{{ value.name }}</span>
+        <div class="unpaid-list">
+          <div
+            class="unpaid-item"
+            v-for="(item, index) in unpaidList"
+            :key="index"
+          >
+            <div class="percent">{{ item.text }}</div>
+            <div class="nums">
+              {{
+                singleMatrixInfo[item.code]
+                  ? item.code == "speed"
+                    ? singleMatrixInfo[item.code]?.toFixed(2)
+                    : (singleMatrixInfo[item.code] / 1000)?.toFixed(2)
+                  : 0
+              }}
             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style="
+        height: calc(100% - 31px);
+        overflow-y: auto;
+        background-color: rgba(0, 0, 0, 0.45);
+        padding: 5px;
+        border-radius: 0 0 5px 5px;
+      "
+    >
+      <div
+        class="matrixs"
+        v-for="(value, indexe) in showMatrixList"
+        :key="indexe"
+      >
+        <div class="matrix-title">
+          <div class="matrix-svg">
+            <i class="svg-icon svg-icon-sm svg-icon-green">
+              <SvgIcon svgid="svg-issue"></SvgIcon
+            ></i>
+            <span class="station-name">{{ value.name }}</span>
+          </div>
 
-            <div class="indicator">
-              <div
-                class="sub-title-item"
-                :class="{ active: index >= 7 }"
-                v-for="(item, index) in subTitleDatas"
-                :key="index"
-                @click="handleIndicatorClick(value.id)"
+          <div class="indicator">
+            <div
+              class="sub-title-item"
+              :class="{ active: index >= 7 }"
+              v-for="(item, index) in subTitleDatas"
+              :key="index"
+              @click="handleIndicatorClick(value.id)"
+            >
+              <span>{{ item.text }}</span>
+              <span
+                class="sub-value"
+                :style="{ color: item.color }"
+                :class="item.cls"
               >
-                <span>{{ item.text }}</span>
-                <span
-                  class="sub-value"
-                  :style="{ color: item.color }"
-                  :class="item.cls"
-                >
-                  {{
-                    index >= 7
-                      ? item.ratio
-                        ? (
-                            Number(value[item.key] ? value[item.key] : "0") /
-                            item.ratio
-                          ).toFixed(2)
-                        : Number(
-                            value[item.key] ? value[item.key] : "0"
-                          ).toFixed(2)
+                {{
+                  index >= 7
+                    ? item.ratio
+                      ? (
+                          Number(value[item.key] ? value[item.key] : "0") /
+                          item.ratio
+                        ).toFixed(2)
                       : Number(value[item.key] ? value[item.key] : "0").toFixed(
-                          0
+                          2
                         )
-                  }}</span
-                >
-              </div>
+                    : Number(value[item.key] ? value[item.key] : "0").toFixed(0)
+                }}</span
+              >
             </div>
           </div>
+        </div>
 
-          <div
-            class="line_all"
-            v-for="(mes, index) in value?.lineVos"
-            :key="index"
-          >
-            <div class="line-namebox">
-              <div class="line-name">
-                {{ mes.name }}
-              </div>
+        <div
+          class="line_all"
+          v-for="(mes, index) in value?.lineVos"
+          :key="index"
+        >
+          <div class="line-namebox">
+            <div class="line-name">
+              {{ mes.name }}
             </div>
-            <div class="line-list">
+          </div>
+          <div class="line-list">
+            <div
+              class="matrix-item"
+              v-for="(val, indexes) in mes?.wtDataList"
+              :key="indexes"
+            >
+              <!--  风机颜色判断-->
               <div
-                class="matrix-item"
-                v-for="(val, indexes) in mes?.wtDataList"
-                :key="indexes"
+                class="matrix-card"
+                style="cursor: pointer"
+                :class="
+                  val.status !== '' && colorList[Number(val.status)]
+                    ? colorList[Number(val.status)]
+                    : 'gray'
+                "
               >
-                <!--  风机颜色判断-->
-                <div
-                  class="matrix-card"
-                  style="cursor: pointer"
-                  :class="
-                    val.status !== '' && colorList[Number(val.status)]
-                      ? colorList[Number(val.status)]
-                      : 'gray'
-                  "
-                >
-                  <div class="info">
-                    <div
-                      class="card-left"
-                      @click="handleLeftClick(val, value.id)"
+                <div class="info">
+                  <div
+                    class="card-left"
+                    @click="handleLeftClick(val, value.id)"
+                  >
+                    <!-- <i class="lock"></i> -->
+                    <div class="card-name">{{ val.wtname }}</div>
+                    <i
+                      class="svg-icon svg-icon-sm"
+                      :class="
+                        val.status === 4 || val.status === 5
+                          ? 'svg-icon-white'
+                          : `svg-icon-${colorList[Number(val.status)]}`
+                      "
                     >
-                      <div class="card-name">{{ val.wtname }}</div>
+                      <SvgIcon :svgid="mapping[Number(val.status)]"></SvgIcon
+                    ></i>
+                  </div>
+                  <div class="dashed" />
+                  <div class="card-right" @click="handleRightClick(val.wtid)">
+                    <div class="right-item">
                       <i
                         class="svg-icon svg-icon-sm"
                         :class="
@@ -196,79 +208,62 @@
                             : `svg-icon-${colorList[Number(val.status)]}`
                         "
                       >
-                        <SvgIcon :svgid="mapping[Number(val.status)]"></SvgIcon
+                        <SvgIcon svgid="svg-P"></SvgIcon
                       ></i>
-                    </div>
-                    <div class="dashed" />
-                    <div class="card-right" @click="handleRightClick(val.wtid)">
-                      <div class="right-item">
-                        <i
-                          class="svg-icon svg-icon-sm"
-                          :class="
-                            val.status === 4 || val.status === 5
-                              ? 'svg-icon-white'
-                              : `svg-icon-${colorList[Number(val.status)]}`
-                          "
-                        >
-                          <SvgIcon svgid="svg-P"></SvgIcon
-                        ></i>
-                        <div class="right-value">
-                          {{
-                            val.power
-                              ? val && Number(val.power)?.toFixed(2)
-                              : "0.00"
-                          }}
-                        </div>
+                      <div class="right-value">
+                        {{
+                          val.power
+                            ? val && Number(val.power)?.toFixed(2)
+                            : "0.00"
+                        }}
                       </div>
-                      <div class="right-item">
-                        <i
-                          class="svg-icon svg-icon-sm"
-                          :class="
-                            val.status === 4 || val.status === 5
-                              ? 'svg-icon-white'
-                              : `svg-icon-${colorList[Number(val.status)]}`
-                          "
-                        >
-                          <SvgIcon svgid="svg-W"></SvgIcon
-                        ></i>
-                        <div class="right-value">
-                          {{
-                            val.speed ? Number(val.speed)?.toFixed(2) : "0.00"
-                          }}
-                        </div>
+                    </div>
+                    <div class="right-item">
+                      <i
+                        class="svg-icon svg-icon-sm"
+                        :class="
+                          val.status === 4 || val.status === 5
+                            ? 'svg-icon-white'
+                            : `svg-icon-${colorList[Number(val.status)]}`
+                        "
+                      >
+                        <SvgIcon svgid="svg-W"></SvgIcon
+                      ></i>
+                      <div class="right-value">
+                        {{ val.speed ? Number(val.speed)?.toFixed(2) : "0.00" }}
                       </div>
-                      <div class="right-item">
-                        <i
-                          class="svg-icon svg-icon-sm"
-                          :class="
-                            val.status === 4 || val.status === 5
-                              ? 'svg-icon-white'
-                              : `svg-icon-${colorList[Number(val.status)]}`
-                          "
-                        >
-                          <SvgIcon svgid="svg-R"></SvgIcon
-                        ></i>
-                        <div class="right-value">
-                          {{
-                            val.transfer
-                              ? Number(val.transfer)?.toFixed(2)
-                              : "0.00"
-                          }}
-                        </div>
+                    </div>
+                    <div class="right-item">
+                      <i
+                        class="svg-icon svg-icon-sm"
+                        :class="
+                          val.status === 4 || val.status === 5
+                            ? 'svg-icon-white'
+                            : `svg-icon-${colorList[Number(val.status)]}`
+                        "
+                      >
+                        <SvgIcon svgid="svg-R"></SvgIcon
+                      ></i>
+                      <div class="right-value">
+                        {{
+                          val.transfer
+                            ? Number(val.transfer)?.toFixed(2)
+                            : "0.00"
+                        }}
                       </div>
                     </div>
                   </div>
-                  <div class="matrix-progress">
-                    <div
-                      class="progress-block"
-                      :style="{
-                        width: (val.rate > 100 ? 100 : val.rate) + '%',
-                      }"
-                      :class="
-                        findUpColor(ratelist, parseInt(Number(val.ssqfzt)) + 1)
-                      "
-                    ></div>
-                  </div>
+                </div>
+                <div class="matrix-progress">
+                  <div
+                    class="progress-block"
+                    :style="{
+                      width: (val.rate > 100 ? 100 : val.rate) + '%',
+                    }"
+                    :class="
+                      findUpColor(ratelist, parseInt(Number(val.ssqfzt)) + 1)
+                    "
+                  ></div>
                 </div>
               </div>
             </div>
@@ -276,27 +271,27 @@
         </div>
       </div>
     </div>
-    <el-dialog
-      class="dialogs"
-      width="90%"
-      top="40px"
-      v-model="displayMatrix"
-      :show-close="true"
-      destroy-on-close
-    >
-      <template #title>
-        <div class="dialog-title">
-          <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
-          <div class="title">设备详情</div>
-        </div>
-      </template>
-      <div class="dialog-body" style="height: 77vh">
-        <img class="dialog-img" src="@assets/imgs/dialog.png" />
-        <windDetail :wind="wind" :flag="flag" showHeight="77vh"></windDetail>
-      </div>
-    </el-dialog>
-    <qushi-dialog ref="child" :chartName="chartName"></qushi-dialog>
   </div>
+  <el-dialog
+    class="dialogs"
+    width="90%"
+    top="40px"
+    v-model="displayMatrix"
+    :show-close="true"
+    destroy-on-close
+  >
+    <template #title>
+      <div class="dialog-title">
+        <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
+        <div class="title">设备详情</div>
+      </div>
+    </template>
+    <div class="dialog-body" style="height: 800px">
+      <img class="dialog-img" src="@assets/imgs/dialog.png" />
+      <windDetail :wind="wind" :flag="flag"></windDetail>
+    </div>
+  </el-dialog>
+  <qushi-dialog ref="child" :chartName="chartName"></qushi-dialog>
 </template>
 
 <script>
@@ -717,7 +712,7 @@ export default {
     handleLeftClick(wt, wpid) {
       this.displayMatrix = true;
       this.$nextTick(() => {
-        this.wind = { ...wt, wtType: this.wtType, wpid };
+        this.wind = { ...wt, wtType: this.wtType, wpid, };
         this.flag = true;
       });
       //   this.$refs.windDetail.start(wt);
@@ -1150,8 +1145,8 @@ p {
 .matrix-body {
   display: flex;
   flex-direction: column;
-  height: 100%;
-
+  height: calc(100% - 57px);
+  padding-bottom: 10px;
   .body-title {
     display: flex;
     flex-direction: row;
@@ -1494,7 +1489,6 @@ p {
   .matrixs {
     width: 100%;
     margin-top: 7px;
-
     .matrix-title {
       display: flex;
       flex-direction: row;
@@ -1524,7 +1518,7 @@ p {
         display: flex;
         flex-direction: row;
         align-items: center;
-        width: 93%;
+        // width: 93%;
         height: 100%;
         margin-left: 30px;
         white-space: nowrap;
@@ -1615,7 +1609,16 @@ p {
             display: flex;
             flex-direction: column;
             align-items: center;
-
+            position: relative;
+            .lock {
+              width: 0;
+              height: 0;
+              border-top: 8px solid #fff;
+              border-right: 8px solid transparent;
+              position: absolute;
+              top: 0;
+              left: 0;
+            }
             .card-name {
               font-size: 14px;
               font-family: Arial;

src/views/stateMonitor/factoryMonitor/windPowerPlant/windhome/index.vue

@@ -3,90 +3,12 @@
     <headerButton type="-1" @renderData="renderData" />
     <div class="content">
       <div class="first">
-        <div class="weather" :style="heightCalculate" id="ifVideo">
-          <div class="weather-item" :style="weatherWidth">
-            <div class="station-name">
-              {{ stationName }}
-            </div>
-            <div class="temperature">
-              <img
-                class="temperature-img"
-                v-if="weather.weather === '少云'"
-                src="@assets/imgs/cloudy.png"
-              />
-              <img
-                class="temperature-img"
-                v-if="weather.weather === '多云'"
-                src="@assets/imgs/morecloudy.png"
-              />
-              <img
-                class="temperature-img"
-                v-if="weather.weather === '阴'"
-                src="@assets/imgs/overcast.png"
-              />
-              <img
-                class="temperature-img"
-                v-if="weather.weather === '雨'"
-                src="@assets/imgs/rain.png"
-              />
-              <img
-                class="temperature-img"
-                v-if="weather.weather === '晴'"
-                src="@assets/imgs/sun.png"
-              />
-
-              <div class="temperature-item">
-                <span class="temperature-value"> {{ weather?.temp }} ℃</span>
-                <span>{{ weather?.weather }}</span>
-              </div>
-            </div>
-            <div class="other">
-              {{ weather?.visibility }}M
-              <div class="other-value">能见度</div>
-            </div>
-            <div class="other">
-              {{ weather?.humidity }}%
-              <div class="other-value">湿度</div>
-            </div>
-            <div class="other">
-              {{ weather?.pressure }}kPa
-              <div class="other-value">气压</div>
-            </div>
-          </div>
-          <div class="viedo" :style="veidoWidth">
-            <div class="videoPlayer" id="videoContainer" v-if="pageType == 1">
-              <video
-                id="video"
-                controls
-                controlsList="nofullscreen nodownload"
-                muted="muted"
-                autoplay="autoplay"
-                loop
-              >
-                <source :src="pageUrl" type="video/mp4" />
-              </video>
-            </div>
-            <div
-              class="videoPlayer"
-              id="videoContainer"
-              v-else-if="pageType == 2"
-            >
-              <iframe
-                id="ifrId"
-                :src="pageUrl"
-                scrolling="no"
-                style="width: 100%; height: 100%"
-              ></iframe>
-            </div>
-            <img
-              class="viedo-img"
-              v-else
-              v-imageerror="defaultImg"
-              :src="pageUrl"
-            />
+        <div class="weather" id="ifVideo">
+          <div class="viedo">
+            <img class="viedo-img" v-imageerror="defaultImg" :src="pageUrl" />
           </div>
         </div>
-        <div class="status" :style="heightCalculate">
+        <div class="status">
           <div class="indicator-title">
             <div class="point point-left bottom"></div>
             <div class="point point-right bottom"></div>
@@ -144,10 +66,7 @@
             </div>
           </div>
         </div>
-        <div
-          class="power"
-          :style="screenHeight > 1050 ? 'height: 28vh' : 'height: 24vh'"
-        >
+        <div class="power">
           <div class="indicator-title">
             <div class="point point-left bottom"></div>
             <div class="point point-right bottom"></div>
@@ -155,7 +74,7 @@
           </div>
           <div
             class="echarts"
-            style="width: 100%; margin-top: 10px"
+            style="width: 100%; height: calc(100% - 39px); margin-top: 10px"
             v-if="showFlag"
           >
             <power-echarts
@@ -164,14 +83,14 @@
               :ratio="1000"
               width="100%"
               unit="MW"
-              :height="screenHeight > 1050 ? '23vh' : '19vh'"
+              height="100%"
               :showTitle="false"
             />
           </div>
         </div>
       </div>
       <div class="first">
-        <div class="base-info" :style="heightCalculate">
+        <div class="base-info">
           <div class="base-info-left">
             <div class="top">
               日发电量
@@ -248,7 +167,7 @@
             </div>
           </div>
         </div>
-        <div class="status" :style="heightCalculate">
+        <div class="status">
           <div class="indicator-title">
             <div class="point point-left bottom"></div>
             <div class="point point-right bottom"></div>
@@ -280,28 +199,27 @@
             </div>
           </div>
           <!-- <div class="circle"></div> -->
-          <PieChart
-            width="100%"
-            height="240px"
-            :ratio="10000"
-            unit="万kWh"
-            :lossPower="lossPower"
-          ></PieChart>
+          <div class="status-concent">
+            <PieChart
+              width="100%"
+              height="100%"
+              :ratio="10000"
+              unit="万kWh"
+              :lossPower="lossPower"
+            ></PieChart>
+          </div>
         </div>
-        <div
-          class="power"
-          :style="screenHeight > 1050 ? 'height: 28vh' : 'height: 24vh'"
-        >
+        <div class="power">
           <div class="indicator-title">
             <div class="point point-left bottom"></div>
             <div class="point point-right bottom"></div>
             <div class="status-title">日发电量</div>
           </div>
-          <div v-if="showFlag" style="width: 100%">
+          <div style="width: 100%; height: calc(100% - 39px); margin-top: 10px">
             <BarCharts
               :list="barList"
               width="100%"
-              :height="screenHeight > 1050 ? '23vh' : '19vh'"
+              height="100%"
               :ratio="10000"
               :showLegend="false"
               :units="units"
@@ -312,7 +230,7 @@
         </div>
       </div>
       <div class="last">
-        <div class="info" :style="screenHeight > 1050 ? '' : 'height: 579px'">
+        <div class="info">
           <div class="info-item" v-for="(item, index) in infoList" :key="index">
             <div class="last-left">{{ item.name }}</div>
             <div class="last-right" v-if="item.code === 'czlx'">风场</div>
@@ -339,22 +257,19 @@
             </div>
           </div>
         </div>
-        <div
-          class="contrast"
-          :style="screenHeight > 1050 ? 'height: 28vh' : 'height: 24vh'"
-        >
+        <div class="contrast">
           <div class="indicator-title">
             <div class="point point-left point-right bottom"></div>
             <div class="point point-right bottom"></div>
             <div>今日和昨日出力对比</div>
           </div>
-          <div v-if="showFlag" style="width: 100%; margin-top: 10px">
+          <div style="width: 100%; margin-top: 10px; height: calc(100% - 39px)">
             <LineCharts
               class="charts-item"
               :list="contrastList"
               width="100%"
               :ratio="1000"
-              :height="screenHeight > 1050 ? '23vh' : '19vh'"
+              height="100%"
               :unit="'MW'"
               :showLegend="true"
             >
@@ -681,15 +596,6 @@ export default {
         return "rotateZ(50deg)";
       }
     },
-    heightCalculate() {
-      return this.screenHeight > 1050 ? "" : "height: 280px";
-    },
-    veidoWidth() {
-      return this.weather.weather ? "width: 80%" : "width: 100%;";
-    },
-    weatherWidth() {
-      return this.weather.weather ? "width: 20%" : "display: none";
-    },
   },
   created() {},
   mounted() {
@@ -1012,12 +918,8 @@ export default {
 <style lang="less" scoped>
 .body {
   height: 100%;
+  padding-bottom: 10px;
 }
-.windPowerContent {
-  height: 100%;
-  width: calc(100% - 60px);
-}
-
 .title-bar {
   width: 100%;
   height: 25px;
@@ -1104,7 +1006,7 @@ export default {
   flex-direction: column;
   align-items: center;
   width: 36%;
-  height: 88vh;
+  height: calc(100% - 10px);
   margin-right: 21px;
 
   .weather {
@@ -1180,7 +1082,7 @@ export default {
 
     .viedo {
       height: 100%;
-
+      width: 100%;
       .viedo-img,
       #video,
       #videoContainer {
@@ -1192,7 +1094,7 @@ export default {
 
   .status {
     width: 100%;
-    height: 310px;
+    height: 300px;
     background-color: rgba(96, 103, 105, 0.2);
     margin-bottom: 20px;
     display: flex;
@@ -1200,21 +1102,11 @@ export default {
     align-items: center;
     position: relative;
     border-radius: 5px;
-
-    .circle {
-      position: absolute;
-      width: 160px;
-      height: 160px;
-      border-radius: 50%;
-      border: 2px solid #157cec;
-      left: 158px;
-      top: 80px;
-      box-shadow: 0px 0px 12px 0px #157cec inset;
-    }
+    padding-bottom: 20px;
 
     .status-concent {
       width: 90%;
-      height: 80%;
+      height: calc(100% - 39px);
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -1437,17 +1329,12 @@ export default {
 
   .power {
     width: 100%;
-    height: 293px;
+    height: calc(100% - 301px - 300px - 40px);
     background-color: rgba(96, 103, 105, 0.2);
     border-radius: 5px;
     display: flex;
     flex-direction: column;
     align-items: center;
-
-    .windChar {
-      width: 100%;
-      height: 100%;
-    }
   }
 
   .base-info {
@@ -1644,11 +1531,11 @@ export default {
   flex-direction: column;
   align-items: center;
   width: 25.5%;
-  height: 88vh;
+  height: calc(100% - 10px);
 
   .info {
     width: 100%;
-    height: 637px;
+    height: 621px;
     background-color: rgba(96, 103, 105, 0.2);
     border-radius: 5px;
     margin-bottom: 20px;
@@ -1681,7 +1568,7 @@ export default {
 
   .contrast {
     width: 100%;
-    height: 293px;
+    height: calc(100% - 621px - 20px);
     background-color: rgba(96, 103, 105, 0.2);
     border-radius: 5px;
     display: flex;

src/views/stateMonitor/index.vue

@@ -8,4 +8,6 @@ export default {
 };
 </script>
 
-<style></style>
+<style>
+
+</style>

src/views/stateMonitor/zhzb/zhzb.vue

@@ -14,7 +14,7 @@
         :data="stationData"
         :cell-style="cellStyle"
         :header-cell-style="headerStyle"
-        height="81vh"
+        height="calc(100% - 60px)"
         style="width: 100%"
         fit
         v-loading="loading"
@@ -547,11 +547,12 @@ export default {
 
 .synthesizeTargetSystem {
   padding: 0 20px;
+  height: calc(100% - 59px);
 }
 
 .systemData {
   width: 100%;
-  height: calc(100% - 70px);
+  height: 100%;
   background-color: rgba(0, 0, 0, 0.45);
   padding: 5px;
   //overflow: hidden;