新增光伏性能评价页面、新增报警弹窗图标文件(未实现功能)

src/App.vue

@@ -83,20 +83,26 @@
       >
         <router-view />
       </div>
+      <!-- <div
+        @mousedown="startDrag"
+        :style="{ left: x + 'px', top: y + 'px' }"
+        style="cursor: pointer; position: absolute; z-index: 999"
+      >
+        <el-badge :value="data1" class="item">
+          <div class="alarmDeligo" @click.stop="displayAlarm('1')">
+            <img src="@assets/imgs/gjfc.png" class="trans" />
+            <img src="@assets/imgs/gjfcl.png" />
+          </div>
+        </el-badge>
+      </div>
+      <deligo-alarm-list
+        ref="deligoChild"
+        :displayAlarms="displayAlarms"
+        v-if="displayAlarms == true"
+      ></deligo-alarm-list> -->
     </div>
     <div v-else class="login"><login-page @onLogin="login" /></div>
   </div>
-
-  <!-- <div v-else-if="!isLogined" class="login">
-    <login-page />
-  </div> -->
-  <!-- <login-page v-if="!showSisView && !isLogined" @onLogin="login" /> -->
-  <!-- <div v-else-if="token == ''">
-    {{token}}
- <login-page  @onLogin="login" />
-   </div> -->
-
-  <!-- <sisView v-else /> -->
 </template>
 
 <script>
@@ -107,6 +113,7 @@ import LoginPage from "./views/layout/login-page.vue";
 import sisView from "./views/sisView/index.vue";
 import { GetBoosterlist } from "@/api/factoryMonitor/index.js";
 import { getApiWeatherstation } from "@/api/monthlyPerformanceAnalysis";
+import deligoAlarmList from "@/components/deligoAlarmList";
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
 import $ from "jquery";
 export default {
@@ -116,6 +123,7 @@ export default {
     LoginPage,
     sisView,
     SvgIcon,
+    deligoAlarmList,
   },
 
   data() {
@@ -137,6 +145,7 @@ export default {
       },
       // websocket相关
       socketObj: "", // websocket实例对象
+      socketObj1: "", // websocket实例对象
       //心跳检测
       heartCheck: {
         vueThis: this, // vue实例
@@ -169,7 +178,55 @@ export default {
       socketReconnectTimer: null, // 计时器对象——重连
       socketReconnectLock: false, // WebSocket重连的锁
       socketLeaveFlag: false, // 离开标记（解决 退出登录再登录 时出现的 多次相同推送 问题，出现的本质是多次建立了WebSocket连接）
+      //心跳检测
+      heartCheck1: {
+        vueThis1: this, // vue实例
+        timeout1: 30000, // 超时时间
+        timeoutObj1: null, // 计时器对象——向后端发送心跳检测
+        serverTimeoutObj1: null, // 计时器对象——等待后端心跳检测的回复
+        // 心跳检测重置
+        reset: function () {
+          clearTimeout(this.timeoutObj1);
+          clearTimeout(this.serverTimeoutObj1);
+          return this;
+        },
+        // 心跳检测启动
+        start: function () {
+          this.timeoutObj1 && clearTimeout(this.timeoutObj1);
+          this.serverTimeoutObj1 && clearTimeout(this.serverTimeoutObj1);
+          this.timeoutObj1 = setTimeout(() => {
+            // 这里向后端发送一个心跳检测，后端收到后，会返回一个心跳回复
+            this.vueThis1.socketObj1.send("HeartBeat");
+            console.log("发送心跳检测1");
+            this.serverTimeoutObj1 = setTimeout(() => {
+              // 如果超过一定时间还没重置计时器，说明websocket与后端断开了
+              console.log("未收到心跳检测回复1");
+              // 关闭WebSocket
+              this.vueThis1.socketObj1.close();
+            }, this.timeout1);
+          }, this.timeout1);
+        },
+      },
+      socketReconnectTimer1: null, // 计时器对象——重连
+      socketReconnectLock1: false, // WebSocket重连的锁
+      socketLeaveFlag1: false, // 离开标记（解决 退出登录再登录 时出现的 多次相同推送 问题，出现的本质是多次建立了WebSocket连接）
       alarmList: {},
+      dialogList: [],
+      //报警弹窗相关
+      x: null,
+      y: null,
+      displayAlarms: false,
+      indexNum: 0,
+      data1: 0,
+      dragging: false,
+      currentX: 0,
+      currentY: 0,
+      initialX: 0,
+      initialY: 0,
+      timer: null,
+      firstTime: null,
+      lastTime: null,
+      key: false,
     };
   },
   computed: {
@@ -184,6 +241,11 @@ export default {
     },
   },
   created() {
+    // var windowElement = document.getElementById("screen");
+    // var viewportWidth = windowElement.clientWidth;
+    // var viewportHeight = windowElement.clientHeight;
+    this.x = this.style.width - 82;
+    this.y = this.style.height - 82;
     let that = this;
     const themeName = that.$store.state.themeName;
     $("#appBody").attr(
@@ -202,12 +264,62 @@ export default {
       // 没有离开——重连
       // websocket重连
       this.socketReconnect();
+      //   this.socketReconnect1();
     }
   },
   unmounted() {
     console.log("离开标记", this.socketLeaveFlag);
   },
   methods: {
+    // 拖拽
+    startDrag(event) {
+      this.key = false;
+      this.firstTime = new Date().getTime();
+      event.preventDefault();
+      this.initialX = event.clientX - this.x;
+      this.initialY = event.clientY - this.y;
+      this.dragging = true;
+      document.addEventListener("mousemove", this.drag);
+      document.addEventListener("mouseup", this.stopDrag);
+    },
+    drag(event) {
+      if (!this.dragging) return;
+      this.currentX = event.clientX - this.initialX;
+
+      if (event.clientY - this.initialY < 0) {
+        this.currentY = 0;
+      } else {
+        this.currentY = event.clientY - this.initialY;
+      }
+      this.x = this.currentX;
+      this.y = this.currentY;
+    },
+    stopDrag() {
+      // 根据时间差判断click
+      this.lastTime = new Date().getTime();
+      if (this.lastTime - this.firstTime < 90) {
+        this.key = true;
+      }
+      if (this.currentX != 0 && this.currentY != 0) {
+        this.dragging = false;
+        document.removeEventListener("mouseup", this.stopDrag);
+        document.removeEventListener("mousemove", this.drag);
+      } else {
+        return;
+      }
+    },
+    displayAlarm(val) {
+      if (this.key) {
+        this.displayAlarms = !this.displayAlarms;
+        if (val == "1") {
+          setTimeout(() => {
+            this.$refs.deligoChild.getByEquipmentId();
+          }, 15);
+        }
+        document.removeEventListener("mouseup", this.stopDrag);
+        document.removeEventListener("mousemove", this.drag);
+      }
+    },
     getScale() {
       const w = window.innerWidth / this.style.width;
       const h = window.innerHeight / this.style.height;
@@ -307,7 +419,7 @@ export default {
       this.socketReconnectLock = true;
       this.socketReconnectTimer && clearTimeout(this.socketReconnectTimer);
       this.socketReconnectTimer = setTimeout(() => {
-        console.log("WebSocket:重连中...");
+        // console.log("WebSocket:重连中...");
         this.socketReconnectLock = false;
         // websocket启动
         this.createWebSocket();
@@ -315,19 +427,19 @@ export default {
     },
     // 连接成功建立的回调
     onopenCallback: function (event) {
-      console.log("WebSocket:已连接");
+      //   console.log("WebSocket:已连接");
       // 心跳检测重置
       this.heartCheck.reset().start();
     },
     // 连接发生错误的回调
     onerrorCallback: function (event) {
-      console.log("WebSocket:发生错误");
+      //   console.log("WebSocket:发生错误");
       // websocket重连
       this.socketReconnect();
     },
     // 连接关闭的回调
     oncloseCallback: function (event) {
-      console.log("WebSocket:已关闭");
+      //   console.log("WebSocket:已关闭");
       // 心跳检测重置
       this.heartCheck.reset();
       if (!this.socketLeaveFlag) {
@@ -338,11 +450,11 @@ export default {
     },
     // 向后端发送数据的回调
     onsendCallback: function () {
-      console.log("WebSocket:发送信息给后端");
+      //   console.log("WebSocket:发送信息给后端");
     },
     // 接收到消息的回调
     getMessageCallback: function (msg) {
-      console.log(msg);
+      //   console.log(msg);
       if (Object.keys(msg) && msg.data == "ok") {
         // 心跳回复——心跳检测重置
         // 收到心跳检测回复就说明连接正常
@@ -351,14 +463,108 @@ export default {
         this.heartCheck.reset().start();
       } else {
         // 普通推送——正常处理
-        console.log("收到推送消息");
+        // console.log("收到推送消息");
         let data = JSON.parse(msg.data);
         // 相关处理
-        console.log(data);
+        // console.log(data);
         this.alarmList = data;
         this.$store.commit("changeAlarmlist", data);
       }
     },
+    // websocket启动
+    createWebSocket1() {
+      //   let webSocketLink = `ws://192.168.1.102:6014/websocketBt/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`;
+      let webSocketLink1 = `ws://10.81.3.154:6014/websocket/${this.$store.state.user.userId}_${this.$store.state.user.authToken}`; // webSocket地址
+      try {
+        if ("WebSocket" in window) {
+          this.socketObj1 = new WebSocket(webSocketLink1);
+        }
+        // websocket事件绑定
+        this.socketEventBind1();
+      } catch (e) {
+        console.log("catch" + e);
+        // websocket重连
+        this.socketReconnect1();
+      }
+    },
+    // websocket事件绑定
+    socketEventBind1() {
+      // 连接成功建立的回调
+      this.socketObj1.onopen = this.onopenCallback1;
+      // 连接发生错误的回调
+      this.socketObj1.onerror = this.onerrorCallback1;
+      // 连接关闭的回调
+      this.socketObj1.onclose = this.oncloseCallback1;
+      // 向后端发送数据的回调
+      this.socketObj1.onsend = this.onsendCallback1;
+      // 接收到消息的回调
+      this.socketObj1.onmessage = this.getMessageCallback1;
+
+      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+      window.onbeforeunload = () => {
+        this.socketObj1.close();
+      };
+    },
+    // websocket重连
+    socketReconnect1() {
+      if (this.socketReconnectLock1) {
+        return;
+      }
+      this.socketReconnectLock1 = true;
+      this.socketReconnectTimer1 && clearTimeout(this.socketReconnectTimer1);
+      this.socketReconnectTimer1 = setTimeout(() => {
+        console.log("WebSocket1:重连中...");
+        this.socketReconnectLock1 = false;
+        // websocket启动
+        this.createWebSocket1();
+      }, 4000);
+    },
+    // 连接成功建立的回调
+    onopenCallback1: function (event) {
+      console.log("WebSocket1:已连接");
+      // 心跳检测重置
+      this.heartCheck1.reset().start();
+    },
+    // 连接发生错误的回调
+    onerrorCallback1: function (event) {
+      console.log("WebSocket1:发生错误");
+      // websocket重连
+      this.socketReconnect1();
+    },
+    // 连接关闭的回调
+    oncloseCallback1: function (event) {
+      console.log("WebSocket1:已关闭");
+      // 心跳检测重置
+      this.heartCheck1.reset();
+      if (!this.socketLeaveFlag1) {
+        // 没有离开——重连
+        // websocket重连
+        this.socketReconnect1();
+      }
+    },
+    // 向后端发送数据的回调
+    onsendCallback1: function () {
+      console.log("WebSocket1:发送信息给后端");
+    },
+    // 接收到消息的回调
+    getMessageCallback1: function (msg) {
+      console.log(msg);
+      if (Object.keys(msg) && msg.data == "ok") {
+        // 心跳回复——心跳检测重置
+        // 收到心跳检测回复就说明连接正常
+        console.log("收到心跳检测回复1");
+        // 心跳检测重置
+        this.heartCheck1.reset().start();
+      } else {
+        // 普通推送——正常处理
+        console.log("收到推送消息1");
+        let data = JSON.parse(msg.data);
+        // 相关处理
+        console.log(data);
+        // this.alarmList = data;
+        // this.$store.commit("changeAlarmlist", data);
+      }
+    },
   },
 
   watch: {
@@ -429,6 +635,28 @@ export default {
   top: 50%;
   transition: 0.3s;
 }
+.alarmDeligo {
+  z-index: 999;
+  position: relative;
+
+  img {
+    width: 43px;
+    max-width: 43px;
+    height: 43px;
+    z-index: 3;
+  }
+
+  img:first-child {
+    width: 53px;
+    height: 53px;
+    max-width: 53px;
+    top: -5px;
+    left: -5px;
+    position: absolute;
+    z-index: 3;
+  }
+}
+
 * {
   box-sizing: border-box;
 
@@ -573,6 +801,42 @@ body {
   background-size: cover;
   position: relative;
 }
+
+.el-badge__content--danger {
+  background: #ff4e00 !important;
+  border: none !important;
+}
+.el-badge__content.is-fixed {
+  top: 7px !important;
+  right: 14px !important;
+  z-index: 999 !important;
+}
+
+.trans {
+  animation: circleProgess 3s linear infinite;
+}
+
+@keyframes circleProgess {
+  0% {
+    transform: rotateZ(360deg);
+  }
+
+  25% {
+    transform: rotateZ(270deg);
+  }
+
+  50% {
+    transform: rotateZ(180deg);
+  }
+
+  75% {
+    transform: rotateZ(90deg);
+  }
+
+  100% {
+    transform: rotateZ(0deg);
+  }
+}
 .el-tree-node__content {
   height: 40px !important;
 }

src/assets/styles/dialog.less

@@ -1,3 +1,4 @@
+
 .modal {
   &.el-dialog {
     background: fade(#121d1c, 95);

src/components/deligoAlarmList/index.vue

@@ -0,0 +1,805 @@
+<template>
+  <div style="position: fixed; right: 0; bottom: 2px; z-index: 2">
+    <div
+      style="
+        width: 540px;
+        height: 510px;
+        border: 1px solid #00549a;
+        border-top: none;
+        background: rgba(11, 12, 12);
+        position: absolute;
+        bottom: 25px;
+        right: 17px;
+      "
+    >
+      <div
+        style="position: absolute; right: -1px; top: 1px; cursor: pointer"
+        @click="displayAlarm"
+      >
+        <!-- <img src="@assets/img/images/close.png"> -->
+      </div>
+      <div class="blge">
+        <div class="titleAlarm">
+          <div style="margin-left: 30px">
+            <!-- <img src="@assets/img/images/alarmicon.png"> -->
+          </div>
+          <div @click="handAll" style="margin-left: -20px; cursor: pointer">
+            <div style="font-size: 20px; font-family: Bicubik; color: #ffffff">
+              {{ handAlls.length }}
+            </div>
+            <div style="color: #ffffff; font-size: 14px">实时告警</div>
+          </div>
+
+          <div
+            :class="{ zhong: indexNum == 0 }"
+            @dblclick="ch()"
+            @click="handZhong(powerStation)"
+            style="margin-left: 50px; cursor: pointer"
+            class="lineList"
+          >
+            <p class="left_p"></p>
+            <p class="right_p"></p>
+            <div class="alarmNum" style="color: rgb(227, 47, 53)">
+              {{ indexNum1 }}
+            </div>
+            <div class="alarmdis">重度告警</div>
+          </div>
+          <div
+            :class="{ content: indexNum == 1 }"
+            style="cursor: pointer"
+            @dblclick="ch()"
+            @click="handContent"
+            class="lineList"
+          >
+            <p class="left_p"></p>
+            <p class="right_p"></p>
+            <div class="alarmNum" style="color: #e37b2f">
+              {{ indexNum2 }}
+            </div>
+            <div class="alarmdis">中度告警</div>
+          </div>
+          <div
+            :class="{ qing: indexNum == 2 }"
+            style="cursor: pointer"
+            @dblclick="ch()"
+            @click="handQing"
+            class="lineList"
+          >
+            <p class="left_p"></p>
+            <p class="right_p"></p>
+            <div class="alarmNum" style="color: #3681cd">
+              {{ indexNum3 }}
+            </div>
+            <div class="alarmdis">轻度告警</div>
+          </div>
+        </div>
+        <div class="dialog">
+          <div>
+            <el-table
+              @selection-change="handleSelectionChange"
+              select-on-indeterminate
+              ref="scrollTable"
+              :header-cell-style="handerMethod"
+              :data="powerStation"
+              size="mini"
+              stripe
+              @select="changeSelect"
+              height="322px"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                :align="'center'"
+                width="40"
+              ></el-table-column>
+              <el-table-column label="级别" :align="'center'" width="70">
+                <template v-slot="scope">
+                  <div
+                    style="width: 50px; margin: auto; border-radius: 3px"
+                    :style="{ color: scope.row.color, border: scope.row.bor }"
+                  >
+                    {{ scope.row.alarmLevel }}
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="alarmType"
+                label="告警类型"
+                :align="'center'"
+                width="65"
+              ></el-table-column>
+              <el-table-column
+                prop=""
+                label="告警名称"
+                :align="'center'"
+                width="170"
+              >
+                <template v-slot="scope">
+                  <div
+                    @click="hiddDetails(scope.row.id)"
+                    style="
+                      overflow: hidden;
+                      white-space: nowrap;
+                      width: 170px;
+                      cursor: pointer;
+                    "
+                  >
+                    {{ scope.row.alarmName }}
+                  </div>
+                </template>
+              </el-table-column>
+
+              <el-table-column
+                prop="startTime"
+                label="发生时间"
+                class-name="sssd"
+                :align="'center'"
+                width="145"
+              ></el-table-column>
+              <el-table-column type="selection" width="25" class-name="ssss">
+              </el-table-column>
+            </el-table>
+          </div>
+          <div style="margin-top: 20px">
+            <el-button @click="deleteon">删除</el-button>
+            <el-button class="determine" @click="sure">确认</el-button>
+          </div>
+        </div>
+      </div>
+      <div class="lineLeft"></div>
+    </div>
+    <el-dialog
+      width="50%"
+      top="120px"
+      v-model="displayDetails"
+      :show-close="true"
+      :destroy-on-close="true"
+    >
+      <template #title>
+        <div class="dialog-title">
+          <!-- <img class="dialog-title-img" src="@assets/img/images/dialog-title.png"/> -->
+          <div class="title" style="margin-top: 0">告警详情</div>
+        </div>
+      </template>
+      <!-- <img class="dialog-img" style="position:absolute;right: 0px;bottom: 40px"  src="@assets/img/images/dialog.png"/>-->
+
+      <div class="dialog-body" style="height: 58vh; padding: 0 15px">
+        <alarmMore :dareson="dareson" :lightCode="lightCode"></alarmMore>
+      </div>
+      <el-row style="position: absolute; bottom: 25px; right: 25px">
+        <el-button class="searchColor" type="primary" @click="sureMut" round
+          >确认</el-button
+        >
+        <el-button class="delecolor" round @click="cancelMultiys"
+          >取消</el-button
+        >
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { DateAlarmRecordsById } from "../../api/home";
+// import alarmMore from "../alarmMore";
+// import {
+//   GetRecordByAlarmId,
+//   GetyPowerstationId,
+// } from "../../api/factoryMonitor";
+
+export default {
+  name: "byPase", //首页标题栏
+  //   components: { alarmMore },
+  props: {
+    dareson: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      page: {
+        pagesize: 8,
+        currentPage: 1,
+        total: 0,
+      },
+      dareson: [],
+      displayDetails: false,
+      poverStat: [],
+      numList: 8,
+      indexNum: 3,
+      powerStation: [],
+      indexNum1: 0,
+      indexNum2: 0,
+      indexNum3: 0,
+      pageSize: 10,
+      handAlls: [],
+      de: false,
+      deCon: false,
+      deQing: false,
+      ss: "",
+      timer: null,
+      dede: [],
+      
+    };
+  },
+
+  created() {},
+  mounted() {
+    this.$nextTick(function () {
+      this.setColSpan();
+      this.addRollListener();
+    });
+  },
+
+  methods: {
+    setColSpan: function () {
+      var s = document.getElementsByClassName("ssss");
+      var x = document.getElementsByClassName("sssd");
+      x[0].colSpan = 2;
+      s[0].style.display = "none";
+      s[0].id = "delete";
+    },
+    addRollListener() {
+      const dom = this.$refs.scrollTable.$refs.bodyWrapper;
+      dom.addEventListener("scroll", () => {
+        const scrollTop = dom.scrollTop;
+        const offsetHeight = dom.offsetHeight;
+        const clientHeight = dom.clientHeight;
+        const scrollHeight = dom.scrollHeight;
+        if (
+          clientHeight + scrollTop + 1 > scrollHeight ||
+          offsetHeight + scrollTop >= scrollHeight
+        ) {
+          this.pageSize += 5;
+          let ss = this.deepClone(this.poverStat);
+          this.powerStation = ss.splice(0, this.pageSize);
+        }
+      });
+    },
+    sureMut() {
+      //   this.getyPowerstationId(this.dareson.id);
+    },
+
+    async getyPowerstationId(val) {
+      const data = await DateAlarmRecordsById({
+        alarmIds: val,
+        type: 0,
+      });
+      if (data) {
+        this.$message({
+          type: "success",
+          offset: 200,
+          center: true,
+          message: "确认成功!",
+        });
+        this.displayDetails = false;
+      }
+
+      if (data) {
+        this.$parent.getAlarmDataByPoweStations();
+        this.getByEquipmentId();
+      }
+    },
+
+    handleSelectionChange(rows) {
+      this.dede = rows;
+    },
+    checkSelectable(row, index) {
+      // return row.discount >= 0 && row.discount <= 10
+    },
+    cancelMultiys() {
+      this.displayDetails = false;
+    },
+    deleteon() {
+      this.$confirm("确认清除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          this.dateAlarmRecordsById("1");
+          this.$message({
+            type: "success",
+            message: "清除成功!",
+            offset: 200,
+            center: true,
+            customClass: "s",
+          });
+        })
+        .catch(() => {});
+    },
+    sure() {
+      this.dateAlarmRecordsById("0");
+    },
+    async dateAlarmRecordsById(val) {
+      const data = await DateAlarmRecordsById({
+        alarmIds: this.ss,
+        type: val,
+      });
+
+      if (data) {
+        if (val == "1") {
+        } else {
+          this.$message({
+            type: "success",
+            offset: 200,
+            center: true,
+            message: "确认成功!",
+          });
+        }
+        this.$parent.getAlarmDataByPoweStations();
+        this.getByEquipmentId();
+      }
+    },
+    changeSelect(selected, row) {
+      let arr = "";
+      selected.forEach((s) => {
+        arr += s.id + ",";
+      });
+      this.ss = arr;
+    },
+    displayAlarm() {
+      this.$parent.displayAlarm("2");
+    },
+    async hiddDetails(val) {
+      this.displayDetails = true;
+      const data = await GetRecordByAlarmId({
+        id: val,
+      });
+      if (data[0].alarmLevel == "1") {
+        data[0].alarmLevel = "重度告警";
+        data[0].color = "#E32F35";
+        data[0].bor = "1px solid #E32F35";
+      } else if (data[0].alarmLevel == "2") {
+        data[0].alarmLevel = "中度告警";
+        data[0].color = "#E37B2F";
+        data[0].bor = "1px solid #E37B2F";
+      } else if (data[0].alarmLevel == "3") {
+        data[0].alarmLevel = "轻度告警";
+        data[0].color = "#3681CD";
+        data[0].bor = "1px solid #3681CD";
+      }
+      if (data[0].alarmType == 1) {
+        data[0].names = "变位信号";
+      } else if (data[0].alarmType == 2) {
+        data[0].names = "通讯状态";
+      } else if (data[0].alarmType == 3) {
+        data[0].names = "异常报警";
+      } else if (data[0].alarmType == 4) {
+        data[0].names = "故障码报警";
+      } else if (data[0].alarmType == 5) {
+        data[0].names = "组合报警";
+      }
+      if (data[0].endTime == "") {
+        data[0].starts = "激活";
+      } else {
+        data[0].starts = "恢复";
+      }
+      if (data[0].conqType == "ZC") {
+        data[0].conqType = "组串式";
+      } else if (data[0].conqType == "JZ") {
+        data[0].conqType = "集中式";
+      }
+      this.dareson = data[0];
+    },
+
+    getColor(state) {
+      switch (state) {
+        case "1":
+          return "colored";
+        case "2":
+          return "colororigin";
+        case "3":
+          return "colorblue";
+      }
+    },
+
+    handleCurrentChange(val) {
+      this.page.currentPage = val;
+      let arr = this.deepClone(this.poverStat);
+      this.powerStation = arr.splice((val - 1) * this.numList, this.numList);
+      // this.getTableData();
+    },
+    handAll() {
+      this.indexNum = 3;
+      this.getByEquipmentId();
+    },
+    ch() {
+      clearTimeout(this.timer);
+      this.timer = null;
+      this.$refs.scrollTable.clearSelection();
+    },
+    async handZhong() {
+      this.indexNum = 0;
+
+      this.getByEquipmentId();
+      // if (arr1) {
+      //     arr1.forEach(row => {
+      //         this.$nextTick(() => {
+      //             this.$refs.scrollTable.toggleRowSelection(row);
+      //         })
+      //     });
+      // } else {
+      //     this.$refs.scrollTable.clearSelection();
+      // }
+
+      // this.changeSelect(this.powerStation)
+    },
+    toggleSelection(rows) {},
+    handContent() {
+      this.indexNum = 1;
+      this.getByEquipmentId();
+      // if (arr1) {
+      //     arr1.forEach(row => {
+      //         this.$nextTick(() => {
+      //             this.$refs.scrollTable.toggleRowSelection(row);
+      //         })
+      //     });
+      // } else {
+      //     this.$refs.scrollTable.clearSelection();
+      // }
+      //     this.changeSelect(arr1)
+    },
+    handQing() {
+      this.indexNum = 2;
+      this.getByEquipmentId();
+      // if (arr1) {
+      //     arr1.forEach(row => {
+      //         this.$nextTick(() => {
+      //             this.$refs.scrollTable.toggleRowSelection(row);
+      //         })
+      //     });
+      // } else {
+      //     this.$refs.scrollTable.clearSelection();
+      // }
+      //     this.changeSelect(arr1)
+    },
+    deepClone(ob) {
+      var obj = JSON.stringify(ob);
+      var objClone = JSON.parse(obj);
+      return objClone;
+    },
+    async getByEquipmentId() {
+      //   const data = await GetyPowerstationId({
+      //     equipment: "",
+      //     alarmName: "",
+      //     alarmType: "",
+      //     alarmLevel: "",
+      //     alarmStatus: 0,
+      //     firmStatus: 0,
+      //     startTime: "",
+      //     endTime: "",
+      //   });
+      //   if (JSON.stringify(data) != "{}") {
+      //     let arr1 = [];
+      //     let arr2 = [];
+      //     let arr3 = [];
+      //     data.forEach((s) => {
+      //       s.startTimes = s.startTime.slice(5).replace("-", "/");
+      //       if (s.levelCode == "1") {
+      //         arr1.push(s);
+      //         s.alarmLevel = "重";
+      //         s.color = "#E32F35";
+      //         s.bor = "1px solid #E32F35";
+      //       } else if (s.levelCode == "2") {
+      //         arr2.push(s);
+      //         s.alarmLevel = "中";
+      //         s.color = "#E37B2F";
+      //         s.bor = "1px solid #E37B2F";
+      //       } else if (s.levelCode == "3") {
+      //         arr3.push(s);
+      //         s.alarmLevel = "轻";
+      //         s.color = "#3681CD";
+      //         s.bor = "1px solid #3681CD";
+      //       }
+      //       if (s.endTime == "") {
+      //         s.status = "否";
+      //       } else {
+      //         s.status = "是";
+      //       }
+      //     });
+      //     if (this.indexNum == 0) {
+      //       this.poverStat = arr1;
+      //     } else if (this.indexNum == 1) {
+      //       this.poverStat = arr2;
+      //     } else if (this.indexNum == 2) {
+      //       this.poverStat = arr3;
+      //     } else if (this.indexNum == 3) {
+      //       this.poverStat = data;
+      //     }
+      //     this.indexNum1 = arr1.length;
+      //     this.indexNum2 = arr2.length;
+      //     this.indexNum3 = arr3.length;
+      //     this.handAlls = data;
+      //     let s = this.deepClone(this.poverStat);
+      //     this.poverStat = this.deepClone(data);
+      //     this.powerStation = s.splice(0, this.pageSize);
+      //   } else {
+      //     this.powerStation = [];
+      //   }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.colored {
+  color: rgb(227, 47, 53);
+  border: 1px solid rgb(227, 47, 53);
+}
+
+.colororigin {
+  color: #e37b2f;
+  border: 1px solid #e37b2f;
+}
+
+.colorblue {
+  color: #3681cd;
+  border: 1px solid #3681cd;
+}
+
+.blge {
+  width: 540px;
+  height: 102px;
+  //   background: url("../../assets/img/images/xuanfu.png") no-repeat;
+  background-size: cover;
+  background-position: 0 1px;
+}
+
+::v-deep .el-pager li.active {
+  background: rgba(0, 70, 199, 0.4);
+  color: #fff;
+}
+
+::v-deep .el-pagination button:disabled {
+  background: rgba(67, 81, 107, 0.2);
+}
+
+::v-deep .el-pagination .el-input--suffix .el-input__inner {
+  width: 76px;
+}
+
+::v-deep .el-pagination .btn-next,
+.el-pagination .btn-prevP {
+  background: rgba(67, 81, 107, 0.2);
+  color: #b3b3b3;
+}
+
+::v-deep .el-pager li {
+  background: rgba(67, 81, 107, 0.2);
+  color: #b3b3b3;
+}
+
+::v-deep .el-pagination .btn-prev {
+  background: rgba(67, 81, 107, 0.2);
+  color: #b3b3b3;
+}
+
+::v-deep .el-pagination .btn-next,
+.el-pagination .btn-prevP {
+  background: rgba(67, 81, 107, 0.2);
+  color: #b3b3b3;
+}
+::v-deep .el-pagination .el-input__suffix {
+  right: 27px;
+  top: -2px;
+}
+::v-deep .el-pagination__sizes {
+  margin: 0;
+}
+.dialog {
+  width: 540px;
+  height: 420px;
+  position: absolute;
+  right: 0;
+  top: 101px;
+  padding: 20px 10px 0px 10px;
+  border: 1px solid #00549a;
+  background: rgba(11, 12, 12);
+
+  ul {
+    margin: 0 20px;
+    width: 85%;
+
+    li {
+      display: flex;
+      height: 30px;
+      line-height: 30px;
+
+      div {
+        &:first-of-type {
+          width: 60px;
+          margin-left: 10px;
+        }
+
+        &:nth-of-type(2) {
+          width: 190px;
+          text-align: left;
+          color: #ffffff;
+          margin-left: 20px;
+        }
+
+        &:last-of-type {
+          width: 114px;
+          overflow: hidden;
+        }
+      }
+
+      &:nth-of-type(2n-1) {
+        background-color: rgba(83, 89, 104, 0.2);
+      }
+    }
+  }
+
+  .title {
+    width: 90%;
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+    color: #ffffff;
+    margin-left: 20px;
+    border-bottom: 1px solid #3a3f43;
+  }
+}
+
+::v-deep .el-table--mini .el-table__cell {
+  padding: 0px;
+}
+::v-deep .el-table__header .el-table__cell {
+  padding: 4px 0;
+}
+.alarmdis {
+  font-size: 13px;
+  color: #ffffff;
+}
+.alarmNum {
+  font-size: 16px;
+  font-family: Bicubik;
+}
+
+.titleAlarm {
+  width: 95%;
+  display: flex;
+  position: relative;
+  padding-top: 20px;
+  justify-content: space-around;
+
+  div {
+    width: 70px;
+    text-align: center;
+    height: 24px;
+    div:first-of-type {
+      margin-top: 10px;
+    }
+  }
+  .lineList {
+    width: 70px;
+    text-align: center;
+    height: 60px;
+  }
+}
+.zhong {
+  color: rgb(227, 47, 53);
+  position: relative;
+  border: 1px solid #6f6f6f;
+
+  .left_p {
+    width: 8px;
+    height: 8px;
+    border-left: 1px solid #ffffff;
+    border-top: 1px solid #ffffff;
+    position: absolute;
+    left: -1px;
+    top: -1px;
+  }
+
+  .right_p {
+    width: 8px;
+    height: 8px;
+    border-right: 1px solid #ffffff;
+    border-bottom: 1px solid #ffffff;
+    position: absolute;
+    left: 61px;
+    top: 51px;
+  }
+}
+
+.content {
+  color: #e37b2f;
+  position: relative;
+  border: 1px solid #6f6f6f;
+
+  .left_p {
+    width: 8px;
+    height: 8px;
+    border-left: 1px solid #ffffff;
+    border-top: 1px solid #ffffff;
+    position: absolute;
+    left: -1px;
+    top: -1px;
+  }
+
+  .right_p {
+    width: 8px;
+    height: 8px;
+    border-right: 1px solid #ffffff;
+    border-bottom: 1px solid #ffffff;
+    position: absolute;
+    left: 61px;
+    top: 51px;
+  }
+}
+
+.qing {
+  color: #3681cd;
+  position: relative;
+  border: 1px solid #6f6f6f;
+
+  .left_p {
+    width: 8px;
+    height: 8px;
+    border-left: 1px solid #ffffff;
+    border-top: 1px solid #ffffff;
+    position: absolute;
+    left: -1px;
+    top: -1px;
+  }
+
+  .right_p {
+    width: 8px;
+    height: 8px;
+    border-right: 1px solid #ffffff;
+    border-bottom: 1px solid #ffffff;
+    position: absolute;
+    left: 61px;
+    top: 51px;
+  }
+}
+::v-deep .el-button {
+  border: 1px solid #585e60;
+}
+.dialog {
+  ::v-deep .el-button {
+    margin-left: 30px;
+    width: 220px;
+    background: transparent;
+    border: 1px solid #585e60;
+    color: #ffffff;
+    font-size: 15px;
+  }
+}
+
+.determine {
+  border: 1px solid #1c99ff;
+  color: #1c99ff;
+}
+.lineLeft {
+}
+::v-deep .el-table .cell {
+  width: 100%;
+  white-space: nowrap;
+}
+.searchColor {
+  background: rgba(0, 70, 199, 0.5) !important;
+  color: #ffffff !important;
+}
+.delecolor {
+  background: rgba(67, 81, 107, 0.2) !important;
+  border: 1px solid #2a374f;
+}
+
+::v-deep .el-message--warning {
+  background: #090e19 !important;
+  box-shadow: 0 0 22px rgba(0, 70, 199, 0.2) inset !important;
+  border: 1px solid #094493 !important;
+}
+
+::v-deep .el-message--warning .el-message__content {
+  color: #ffffff !important;
+}
+
+::v-deep .el-message .el-icon-warning {
+  font-size: 16px;
+  color: #ffd02b !important;
+}
+</style>

src/router/index.js

@@ -599,17 +599,43 @@ export const asyncRoutes = [
       },
       //性能评估
       {
-        path: "performanceAssess",
+        path: "performanceEvalute",
         component: () =>
-          import(
-            "@/views/economicsOperation/performanceAnalyse/performanceAssess"
-          ),
-        name: "performanceAssess",
+          import("@/views/economicsOperation/performanceEvalute"),
+        name: "performanceEvalute",
         meta: {
           title: "性能评估",
           icon: "svg-fjfx",
           permissions: ["jn_xndjpg"],
         },
+        children: [
+          {
+            path: "performanceAssess",
+            component: () =>
+              import(
+                "@/views/economicsOperation/performanceEvalute/performanceAssess"
+              ),
+            name: "performanceAssess",
+            meta: {
+              title: "风电性能等级评估",
+              icon: "",
+              permissions: ["jn_glqx_glqxnh"],
+            },
+          },
+          {
+            path: "performanceEvaluation",
+            component: () =>
+              import(
+                "@/views/economicsOperation/performanceEvalute/performanceEvaluation"
+              ),
+            name: "performanceEvaluation",
+            meta: {
+              title: "光伏性能评价",
+              icon: "",
+              permissions: ["jn_glqx_qrqcfx"],
+            },
+          },
+        ],
       },
       //功率曲线
       {

src/views/economicsOperation/performanceEvalute/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: "performanceEvalute", //性能评估
+};
+</script>
+
+<style></style>

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

@@ -16,7 +16,7 @@
           >
           </el-option>
         </el-select>
-        <div class="tabCut">
+        <!-- <div class="tabCut">
           <div
             @click="changeBtn(val.id)"
             :class="tabEvent === val.id ? 'active' : ''"
@@ -25,7 +25,7 @@
           >
             <span>{{ val.name }}</span>
           </div>
-        </div>
+        </div> -->
         <div class="station">
           场站：
           <el-select

src/views/economicsOperation/performanceEvalute/performanceEvaluation/index.vue

@@ -0,0 +1,574 @@
+<template>
+  <div class="comprehensiveEvaluation">
+    <div class="Evaluation_topall">
+      <div class="Evaluation_top">
+        <el-select
+          size="mini"
+          v-model="companyVal"
+          placeholder="请选择"
+          @change="changeCompan"
+        >
+          <el-option
+            v-for="item in companyOptions"
+            :key="item.id"
+            :label="item.aname"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+        <div class="station">
+          场站：
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            clearable
+            @change="changeStation"
+          >
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="station">
+          时间
+          <div class="">
+            <el-date-picker
+              v-if="tabIndex == 0"
+              size="mini"
+              v-model="pickerTimer"
+              type="date"
+              value-format="YYYY-MM-DD"
+              placeholder="选择日期"
+              popper-class="date-select"
+              @change="historyTimer = pickerTimer"
+            >
+            </el-date-picker>
+            <el-date-picker
+              v-if="tabIndex == 1"
+              size="mini"
+              v-model="pickerTimer"
+              type="month"
+              value-format="YYYY-MM"
+              placeholder="选择月份"
+              popper-class="date-select"
+            >
+            </el-date-picker>
+            <el-date-picker
+              v-if="tabIndex == 2"
+              size="mini"
+              v-model="pickerTimer"
+              type="year"
+              value-format="YYYY"
+              placeholder="选择年份"
+              popper-class="date-select"
+            >
+            </el-date-picker>
+          </div>
+        </div>
+        <div class="but">
+          <el-button round size="mini" class="buttons" @click="seachData"
+            >搜索</el-button
+          >
+          <!-- <el-button
+            round
+            size="mini"
+            class="buttons"
+            @click="contrastFn"
+            :disabled="chooseList.length === 2 ? false : true"
+            >信息对比</el-button
+          > -->
+        </div>
+      </div>
+      <div class="selections">
+        <div
+          class="selections_btn"
+          @click="tabSelect(0)"
+          :class="{ active: tabIndex == 0 }"
+        >
+          日
+        </div>
+        <div
+          class="selections_btn"
+          @click="tabSelect(1)"
+          :class="{ active: tabIndex == 1 }"
+        >
+          月
+        </div>
+        <div
+          class="selections_btn"
+          @click="tabSelect(2)"
+          :class="{ active: tabIndex == 2 }"
+        >
+          年
+        </div>
+      </div>
+    </div>
+    <div
+      style="
+        background: rgba(0, 0, 0, 0.4);
+        height: calc(100% - 39px);
+        padding-bottom: 15px;
+      "
+    >
+      <div class="Evaluation_title clearfix">
+        <div class="leftContent floatLeft"><span>光伏性能评价</span></div>
+      </div>
+
+      <div class="economicTable1">
+        <el-table
+          :data="EvaluationData"
+          stripe
+          @selection-change="handleCurrentChange"
+          size="mini"
+          height="calc(100% - 40px)"
+          ref="Eval_table"
+          style="width: 100%"
+        >
+          <el-table-column type="selection" width="60" align="center">
+          </el-table-column>
+          <el-table-column prop="nemCode" label="设备编号" align="center">
+          </el-table-column>
+          <el-table-column
+            v-for="(item, index) in tableHeaderGf"
+            :key="index"
+            sortable
+            :prop="item.code"
+            :label="item.title"
+            align="center"
+          >
+            <!-- <template #header="scope">
+              <div>
+                {{
+                  scope.column.label.slice(0, scope.column.label.indexOf("("))
+                }}
+              </div>
+              <div>
+                {{ scope.column.label.slice(scope.column.label.indexOf("(")) }}
+              </div>
+            </template> -->
+          </el-table-column>
+        </el-table>
+        <div style="text-align: right">
+          <el-pagination
+            @current-change="handlePageChange"
+            :current-page="page.currentPage"
+            :page-size="page.pagesize"
+            layout="total, prev, pager, next, jumper"
+            :total="page.total"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  getApicompanyslist,
+  getApiwpByCplistlist,
+  getApiequipmentinfoDayList,
+} from "@/api/monthlyPerformanceAnalysis";
+// import historyDetail from "./historyDetail.vue";
+// import dayDetailInfo from "./dayDetailInfo.vue";
+import dayjs from "dayjs";
+export default {
+  name: "performanceEvaluation",
+  components: {
+    // historyDetail,
+    // dayDetailInfo,
+  },
+  data() {
+    return {
+      tabIndex: 0,
+      companyVal: "",
+      companyOptions: [],
+      stationVal: "",
+      stationOptions: [],
+      pickerTimer: "",
+      EvaluationData: [],
+      tableHeaderGf: [
+        // { title: "发电量(kWh)", code: "dayfdl" },
+        // { title: "理论发电量(kWh)", code: "dayllfdl" },
+        // { title: "光照强度(W/㎡)", code: "dayfs" },
+        // { title: "平均功率(KW)", code: "daygl" },
+        // { title: "故障损失(kWh)", code: "daygzssdl" },
+        // { title: "限电损失(kWh)", code: "dayxdssdl" },
+        // { title: "检修损失(kWh)", code: "daywhssdl" },
+        // { title: "性能损失(kWh)", code: "dayxnssdl" },
+        // { title: "利用小时数(h)", code: "daylyxs" },
+        // { title: "拟合优度(%)", code: "daynhyd" },
+        // { title: "可利用率(%)", code: "daysbklyl" },
+        // { title: "可用系数(%)", code: "daydxkyxs" },
+        // { title: "有效光时数(h)", code: "dayyxfss" },
+        // { title: "功率一致性(%)", code: "dayglyzxxs" },
+        { title: "离散率(%)", code: "dayglyzxxs" },
+        { title: "转换效率(%)", code: "dayglyzxxs" },
+        { title: "等价发电时(h)", code: "dayglyzxxs" },
+        { title: "设备可利用率(%)", code: "dayglyzxxs" },
+      ],
+      dialogVisible: false,
+      dialogTitle: "",
+      chooseList: [],
+      contrastVisible: false,
+      tabEvent: -2,
+      tabOptions: [
+        { id: -1, name: "风电" },
+        { id: -2, name: "光伏" },
+      ],
+      page: {
+        currentPage: 1,
+        pagesize: 21,
+        total: 0,
+      },
+      historyTimer: "",
+    };
+  },
+  created() {
+    this.getCompanyData();
+  },
+  computed: {
+    pageHeight() {
+      return {
+        height: document.documentElement.clientHeight - 130 + "px",
+      };
+    },
+  },
+  methods: {
+    handlePageChange(val) {
+      this.page.currentPage = val;
+      this.seachData();
+    },
+    // 切换tab
+    tabSelect(index) {
+      this.tabIndex = index;
+      if (this.tabIndex == 0) {
+        this.pickerTimer = dayjs().format("YYYY-MM-DD");
+      } else if (this.tabIndex == 1) {
+        this.pickerTimer = dayjs().format("YYYY-MM");
+      } else if (this.tabIndex == 2) {
+        this.pickerTimer = dayjs().format("YYYY");
+      }
+      this.historyTimer = dayjs().format("YYYY-MM-DD");
+      this.page.currentPage = 1;
+      this.seachData();
+    },
+    changeBtn(id) {
+      this.tabEvent = id;
+      this.stationVal = "";
+      this.stationOptions = [];
+      this.getStationData();
+      this.seachData();
+    },
+    // 获取公司列表
+    async getCompanyData() {
+      this.companyOptions = [];
+      this.pickerTimer = this.getchangeTime(new Date());
+      this.historyTimer = this.getchangeTime(new Date());
+      const { data: datas } = await getApicompanyslist();
+      this.companyOptions = datas.data;
+      this.companyVal = datas.data[1]?.id;
+      this.getStationData();
+    },
+    changeCompan(val) {
+      this.companyVal = val;
+      this.stationOptions = [];
+      this.stationVal = "";
+      this.getStationData();
+    },
+    // 获取场站列表
+    async getStationData() {
+      this.stationOptions = [];
+      let params = {
+        type: this.tabEvent,
+        companyid: 0,
+      };
+      const { data: datas } = await getApiwpByCplistlist(params);
+      this.stationOptions = datas.data;
+      this.stationVal = datas.data[0].id;
+      this.getTableData();
+    },
+    changeStation(val) {
+      this.stationVal = val;
+      this.getTableData();
+    },
+    seachData() {
+      this.getTableData();
+    },
+    async getTableData() {
+      let params = {
+        companyId: this.companyVal,
+        date: this.pickerTimer,
+        staType: -1,
+        types: this.tabIndex * 1 + 1,
+        wpId: this.stationVal,
+        type: this.tabEvent,
+        pageNum: this.page.currentPage,
+        pageSize: this.page.pagesize,
+      };
+      const { data: datas } = await getApiequipmentinfoDayList(params);
+      this.EvaluationData = datas.data.records;
+      this.page.total = datas.data.total;
+    },
+    handleCurrentChange(val) {
+      if (val.length > 2) {
+        let del_row = val.shift();
+        this.$refs.Eval_table.toggleRowSelection(del_row, false);
+      }
+      let arr = [];
+      val.forEach((item, index) => {
+        if (index < 2) {
+          arr.push(item);
+        }
+      });
+      this.chooseList = arr;
+    },
+    //转换时间
+    getchangeTime(date) {
+      var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      var d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      return y + "-" + m + "-" + d;
+    },
+    seachHistoryData(row) {
+      this.dialogVisible = true;
+      this.dialogTitle = "历史数据查询";
+      this.$nextTick(() => {
+        let startT =
+          new Date(this.historyTimer).getTime() - 10 * 24 * 60 * 60 * 1000;
+        this.$refs.windhistoryDetail.pickerTimer = [
+          this.getchangeTime(new Date(startT)),
+          this.historyTimer,
+        ];
+        this.$refs.windhistoryDetail.tabIndex = this.tabIndex * 1 + 1;
+        this.$refs.windhistoryDetail.tabEvent = this.tabEvent;
+        this.$refs.windhistoryDetail.init(row);
+      });
+    },
+    contrastFn() {
+      this.contrastVisible = true;
+      this.$nextTick(() => {
+        this.$refs.MessageContrast.tabIndex = this.tabIndex * 1 + 1;
+        this.$refs.MessageContrast.init();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.comprehensiveEvaluation {
+  padding: 0 20px;
+  height: 100%;
+
+  .Evaluation_title {
+    .leftContent {
+      width: 242px;
+      height: 41px;
+      line-height: 41px;
+      background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
+      span {
+        font-size: 16px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #05bb4c;
+        margin-left: 25px;
+      }
+    }
+    .floatLeft {
+      float: left;
+    }
+    .floatRight {
+      float: right;
+    }
+    .rightContent {
+      width: 212px;
+      height: 28px;
+      margin-top: 13px;
+      background: url("../../../../assets/imgs/title_right_bg.png");
+    }
+  }
+  .clearfix::after {
+    content: "";
+    clear: both;
+    height: 0;
+    line-height: 0;
+    visibility: hidden;
+    display: block;
+  }
+  .clearfix {
+    zoom: 1;
+  }
+  .Evaluation_topall {
+    display: flex;
+    justify-content: space-between;
+    .selections {
+      position: relative;
+      right: 120px;
+      display: flex;
+      margin-top: 10px;
+      .selections_btn {
+        flex: 0 0 55px;
+        text-align: center;
+        height: 33px;
+        line-height: 33px;
+        margin-right: 8px;
+        color: #b9b9b9;
+        font-size: 1.296vh;
+        background: fade(#606769, 20);
+        border: 1px solid fade(#606769, 20);
+        border-radius: 20px;
+        &:hover,
+        &.active {
+          background: fade(#05bb4c, 80);
+          border: 1px solid #05bb4c;
+          color: #fff;
+          cursor: pointer;
+        }
+      }
+    }
+    .Evaluation_top {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding-top: 10px;
+      padding-bottom: 10px;
+
+      .station {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #b3b3b3;
+        margin-right: 10px;
+        margin-left: 10px;
+      }
+
+      .search-input {
+        margin-left: 10px;
+        .el-input__inner {
+          width: 175px;
+        }
+        .el-input__suffix {
+          right: -50px;
+        }
+      }
+      .tabCut {
+        display: inline-block;
+        margin: 0 10px;
+
+        div {
+          display: inline-block;
+          width: 60px;
+          height: 27px;
+          border: 1px solid #274934;
+          text-align: center;
+          line-height: 25px;
+          cursor: pointer;
+        }
+
+        div:nth-child(1) {
+          border-radius: 13px 0px 0px 13px;
+          border-right-width: 0;
+        }
+
+        div:nth-child(2) {
+          border-radius: 0px 13px 13px 0px;
+        }
+
+        .active {
+          background-color: rgba(5, 187, 76, 0.9);
+          color: #fff;
+        }
+      }
+
+      .but {
+        display: flex;
+        flex-direction: row;
+        align-content: center;
+        margin-left: 20px;
+        .buttons:nth-child(1) {
+          background: rgba(5, 187, 76, 0.6);
+          border: 1px solid #3b6c53;
+          border-radius: 13px;
+          color: #fff;
+          &:hover {
+            background: rgba(5, 187, 76, 0.9);
+            border-radius: 13px;
+            color: #fff;
+          }
+        }
+        .buttons:nth-child(2) {
+          background: rgba(67, 81, 107, 0.3);
+          border: 1px solid #3b6c53;
+          border-radius: 13px;
+          font-size: 14px;
+          color: #b3b3b3;
+        }
+      }
+    }
+  }
+  .economicTable1 {
+    height: calc(100% - 40px);
+    .el-table--mini {
+      .el-table__header-wrapper {
+        .el-checkbox {
+          display: none;
+        }
+      }
+      .el-table__body-wrapper {
+        .el-checkbox {
+          .el-checkbox__input {
+            display: block;
+          }
+        }
+      }
+    }
+
+    .historyBtn {
+      background: #43516b;
+      border-radius: 15px;
+      margin-top: 5px;
+      border: 1px solid #43516b;
+      span {
+        color: #fff;
+      }
+    }
+  }
+  .el-overlay {
+    .el-overlay-dialog {
+      overflow-y: hidden !important;
+      .EvaluationhistoryModel {
+        margin-top: 0 !important;
+        .el-dialog__body {
+          height: calc(100% - 51px - 50px);
+        }
+      }
+      .contrastModal {
+        .el-dialog__header {
+          border: none;
+        }
+        .el-dialog__body {
+          padding-top: 10px;
+        }
+      }
+    }
+  }
+
+  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
+    color: #fff;
+  }
+  .el-picker__popper .el-date-table .in-range div {
+    background: #43516b;
+  }
+}
+</style>