发电场站生产实时运营管理平台， 经济运行菜单下风电分析与光伏分析菜单下增加状态转换分析页面与状态时间分析页面并服务联调；

package.json

@@ -16,7 +16,7 @@
     "@antv/x6": "^1.24.4",
     "@arcgis/core": "^4.19.3",
     "@element-plus/icons-vue": "^0.2.4",
-    "@open-wc/webpack-import-meta-loader": "git+https://github.com/KmjKoishi/webpack-import-meta-loader-fixed.git",
+    "@open-wc/webpack-import-meta-loader": "^0.4.7",
     "animate.css": "3.5",
     "axios": "^0.21.1",
     "cesium": "1.78.0",
@@ -110,4 +110,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}

src/api/monthlyPerformanceAnalysis.js

@@ -386,3 +386,23 @@ export function getPrAnalysis(params) {
     method: "GET",
   });
 }
+
+// ------------------------------------------------------------状态转换分析------------------------------------------------------------------------
+export function getApiphotovoltaiclist(params) {
+  return request({
+    baseURL: process.env.VUE_APP_TEST,
+    url: `/photovoltaic/state_time`,
+    method: "GET",
+    params: params
+  });
+}
+
+// ------------------------------------------------------------状态时间分析------------------------------------------------------------------------
+export function getApiphotovoltaicTimelist(params) {
+  return request({
+    baseURL: process.env.VUE_APP_TEST,
+    url: `/photovoltaic/state_transition`,
+    method: "GET",
+    params: params
+  });
+}

src/router/index.js

@@ -957,6 +957,32 @@ export const asyncRoutes = [
               permissions: ["jn_glqx_glqxnh"],
             },
           },
+          {
+            path: "stateTransition",
+            component: () =>
+              import(
+                "@/views/economicsOperation/windAnalyse/stateTransition/index.vue"
+              ),
+            name: "stateTransition",
+            meta: {
+              title: "状态转换分析",
+              icon: "",
+              permissions: ["jn_glqx_glqxnh"],
+            },
+          },
+          {
+            path: "timeTransition",
+            component: () =>
+              import(
+                "@/views/economicsOperation/windAnalyse/timeTransition/index.vue"
+              ),
+            name: "timeTransition",
+            meta: {
+              title: "状态时间分析",
+              icon: "",
+              permissions: ["jn_glqx_glqxnh"],
+            },
+          },
         ],
       },
       //光伏分析
@@ -1035,6 +1061,32 @@ export const asyncRoutes = [
               permissions: ["jn_glqx_glqxnh"],
             },
           },
+          {
+            path: "gfstateTransition",
+            component: () =>
+              import(
+                "@/views/economicsOperation/photovoltaicAnalyse/stateTransition/index.vue"
+              ),
+            name: "gfstateTransition",
+            meta: {
+              title: "状态转换分析",
+              icon: "",
+              permissions: ["jn_glqx_glqxnh"],
+            },
+          },
+          {
+            path: "gftimeTransition",
+            component: () =>
+              import(
+                "@/views/economicsOperation/photovoltaicAnalyse/timeTransition/index.vue"
+              ),
+            name: "gftimeTransition",
+            meta: {
+              title: "状态时间分析",
+              icon: "",
+              permissions: ["jn_glqx_glqxnh"],
+            },
+          },
         ],
       }, //管控效率
       {

src/views/economicsOperation/photovoltaicAnalyse/stateTransition/index.vue

@@ -0,0 +1,434 @@
+<template>
+  <div class="gfstateTransition">
+    <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">
+          时间：
+          <el-date-picker
+            v-model="pickerTimer"
+            type="datetimerange"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            date-format="YYYY/MM/DD ddd"
+            time-format="A hh:mm:ss"
+          />
+        </div>
+        <div class="but">
+          <el-button round size="mini" class="buttons" @click="seachData"
+            >搜索</el-button
+          >
+        </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
+          size="mini"
+          height="calc(100% - 40px)"
+          ref="Eval_table"
+          style="width: 100%"
+        >
+        <el-table-column prop="deviceId" label="风机名称" align="center" />
+            <el-table-column label="待机时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.standbyTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="并网时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.gridConnectionTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="故障时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.faultTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="检修时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.maintenanceTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="限电时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.powerLimitTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="受累时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.faultTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="离线时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.offlineTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>            
+            <el-table-column label="合计时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.total }}</span>
+                </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 {
+  getApiphotovoltaiclist,
+  getApicompanyslist,
+  getApiwpByCplistlist
+} from "@/api/monthlyPerformanceAnalysis";
+import dayjs from "dayjs";
+export default {
+  name: "PerformanceAssess",
+  data() {
+    return {
+      companyVal: "",
+      companyOptions: [],
+      stationVal: "",
+      stationOptions: [],
+      pickerTimer: [],
+      EvaluationData: [],
+      page: {
+        currentPage: 1,
+        pagesize: 21,
+        total: 0,
+      },
+    };
+  },
+  mounted() {
+    this.getCompanyData();   
+    this.pickerTimer = [
+        new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(0,0,0,0)),
+        new Date(new Date(new Date().getTime()).setHours(0,0,0,0))
+    ]
+  },
+  computed: {
+    pageHeight() {
+      return {
+        height: document.documentElement.clientHeight - 130 + "px",
+      };
+    },
+  },
+  methods: {
+    handlePageChange(val) {
+      this.page.currentPage = val;
+      this.seachData();
+    },
+    // 获取公司列表
+    async getCompanyData() {
+      this.companyOptions = [];
+      const { data: datas } = await getApicompanyslist();
+      this.companyOptions = datas.data;
+      this.companyVal = datas.data[0]?.id;
+      this.getStationData();
+    },
+    changeCompan(val) {
+      this.companyVal = val;
+      this.stationOptions = [];
+      this.stationVal = "";
+      this.getStationData();
+    },
+    // 获取场站列表
+    async getStationData() {
+      this.stationOptions = [];
+      let params = {
+        type: -2,
+        companyid: this.companyVal,
+      };
+      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 = {
+        stationId: this.stationVal,
+        type: 'IN',
+        startTime: this.pickerTimer[0].getTime(),
+        endTime: this.pickerTimer[1].getTime(),
+        pageNum: this.page.currentPage,
+        pageSize: this.page.pagesize,
+      };
+      const { data: datas } = await getApiphotovoltaiclist(params);
+      this.EvaluationData = datas.data
+      this.page.total = datas.total;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.gfstateTransition {
+  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>

src/views/economicsOperation/photovoltaicAnalyse/timeTransition/index.vue

@@ -0,0 +1,491 @@
+<template>
+  <div class="timeTransition">
+    <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">
+          时间：
+          <el-date-picker
+            v-model="pickerTimer"
+            type="datetimerange"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            date-format="YYYY/MM/DD ddd"
+            time-format="A hh:mm:ss"
+          />
+        </div>
+        <div class="but">
+          <el-button round size="mini" class="buttons" @click="seachData"
+            >搜索</el-button
+          >
+        </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
+          size="mini"
+          height="calc(100% - 40px)"
+          ref="Eval_table"
+          style="width: 100%"
+        >
+            <el-table-column prop="stationId" label="场站" align="center" width="100">
+              <template #default="{ row }">
+                <span>{{ '#'+row.stationId }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="状态">
+              <template #default="{ row }">
+                <div style="width: 100%;">
+                  <span v-for="(it,index) in row.data" :key="index" class="comStr"
+                  :style="{width: `${Number(it.time/((pickerTimer[1].getTime()-pickerTimer[0].getTime())/1000).toFixed(2))*100}%`}"
+                  :title="`${it.stationId}在${getTimedate(it.startTime)}至${getTimedate(it.endTime)}是${eventData(it.event)}状态`"
+                  :class="rowState(it)"></span>
+                </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 {
+  getApiphotovoltaicTimelist,
+  getApicompanyslist,
+  getApiwpByCplistlist
+} from "@/api/monthlyPerformanceAnalysis";
+import dayjs from "dayjs";
+export default {
+  name: "PerformanceAssess",
+  data() {
+    return {
+      companyVal: "",
+      companyOptions: [],
+      stationVal: "",
+      stationOptions: [],
+      pickerTimer: [],
+      EvaluationData: [],
+      page: {
+        currentPage: 1,
+        pagesize: 21,
+        total: 0,
+      },
+    };
+  },
+  mounted() {
+    this.getCompanyData();   
+    this.pickerTimer = [
+        new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(0,0,0,0)),
+        new Date(new Date(new Date().getTime()).setHours(0,0,0,0))
+    ]
+  },
+  computed: {
+    pageHeight() {
+      return {
+        height: document.documentElement.clientHeight - 130 + "px",
+      };
+    },
+  },
+  methods: {
+    getTimedate(time) {
+      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
+    },
+    eventData(event) {
+      let showStr = ''
+      if (event === 0) {
+        showStr = '待机'
+      } else if (event === 1) {
+        showStr = '并网'
+      } else if (event === 2) {
+        showStr = '故障'
+      } else if (event === 3) {
+        showStr = '检修'
+      } else if (event === 4) {
+        showStr = '限电'
+      } else if (event === 5) {
+        showStr = '受累'
+      } else if (event === 6) {
+        showStr = '离线'
+      }
+      return showStr
+    },
+    handlePageChange(val) {
+      this.page.currentPage = val;
+      this.seachData();
+    },
+    // 获取公司列表
+    async getCompanyData() {
+      this.companyOptions = [];
+      const { data: datas } = await getApicompanyslist();
+      this.companyOptions = datas.data;
+      this.companyVal = datas.data[0]?.id;
+      this.getStationData();
+    },
+    changeCompan(val) {
+      this.companyVal = val;
+      this.stationOptions = [];
+      this.stationVal = "";
+      this.getStationData();
+    },
+    // 获取场站列表
+    async getStationData() {
+      this.stationOptions = [];
+      let params = {
+        type: -2,
+        companyid: this.companyVal,
+      };
+      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();
+    },
+    rowState(row) {
+      let showStr = ''
+      if (row.event === 0) {
+        showStr = 'daijiStr'
+      } else if (row.event === 1) {
+        showStr = 'bingwangStr'
+      } else if (row.event === 2) {
+        showStr = 'guzhangStr'
+      } else if (row.event === 3) {
+        showStr = 'jianxiuStr'
+      } else if (row.event === 4) {
+        showStr = 'xiandianStr'
+      } else if (row.event === 5) {
+        showStr = 'shouleiStr'
+      } else if (row.event === 6) {
+        showStr = 'lixianStr'
+      }
+      return showStr
+    },
+    seachData() {
+      this.getTableData();
+    },
+    async getTableData() {
+      let params = {
+        stationId: this.stationVal,
+        type: 'IN',
+        startTime: this.pickerTimer[0].getTime(),
+        endTime: this.pickerTimer[1].getTime(),
+        pageNum: this.page.currentPage,
+        pageSize: this.page.pagesize,
+      };
+      const { data: datas } = await getApiphotovoltaicTimelist(params);
+      if (datas && datas.data) {
+        let arr =[]
+        for(let i in datas.data) {
+          let obj = {
+            stationId: i.substring(1),
+            data: datas.data[i]
+          }
+          arr.push(obj)
+        }
+        this.EvaluationData = arr.sort(this.sortBy('stationId'))
+      }
+      this.page.total = datas.data.total;
+    },
+    sortBy(stationId) {
+      return (x, y) =>{
+        return x[stationId]- y[stationId]
+      }
+    }
+  },
+};
+</script>
+
+<style lang="less">
+.timeTransition {
+  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;
+          }
+        }
+      }
+    }
+    .comStr{
+      display: inline-block;
+      // width: 10px;
+      height: 20px;
+    }
+    .daijiStr{
+      background: #1c99ff;
+    }
+    .bingwangStr{
+      background: #05bb4c;
+    }
+    .guzhangStr{
+      background: #ba3237;
+    }
+    .jianxiuStr{
+      background: #e17d24;
+    }
+    .xiandianStr{
+      background: #c530c8;
+    }
+    .shouleiStr{
+      background: #ffffff;
+    }
+    .lixianStr{
+      background: #606769;
+    }
+
+    .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>

src/views/economicsOperation/windAnalyse/stateTransition/index.vue

@@ -0,0 +1,434 @@
+<template>
+  <div class="stateTransition">
+    <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">
+          时间：
+          <el-date-picker
+            v-model="pickerTimer"
+            type="datetimerange"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            date-format="YYYY/MM/DD ddd"
+            time-format="A hh:mm:ss"
+          />
+        </div>
+        <div class="but">
+          <el-button round size="mini" class="buttons" @click="seachData"
+            >搜索</el-button
+          >
+        </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
+          size="mini"
+          height="calc(100% - 40px)"
+          ref="Eval_table"
+          style="width: 100%"
+        >
+            <el-table-column prop="deviceId" label="风机名称" align="center" />
+            <el-table-column label="待机时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.standbyTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="并网时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.gridConnectionTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="故障时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.faultTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="检修时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.maintenanceTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="限电时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.powerLimitTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="受累时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.faultTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="离线时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.offlineTime.toFixed(2) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="合计时间(H)" align="center">
+              <template #default="{ row }">
+                    <span>{{ row.total }}</span>
+                </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 {
+  getApiphotovoltaiclist,
+  getApicompanyslist,
+  getApiwpByCplistlist
+} from "@/api/monthlyPerformanceAnalysis";
+import dayjs from "dayjs";
+export default {
+  name: "PerformanceAssess",
+  data() {
+    return {
+      companyVal: "",
+      companyOptions: [],
+      stationVal: "",
+      stationOptions: [],
+      pickerTimer: [],
+      EvaluationData: [],
+      page: {
+        currentPage: 1,
+        pagesize: 21,
+        total: 0,
+      },
+    };
+  },
+  mounted() {
+    this.getCompanyData();   
+    this.pickerTimer = [
+        new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(0,0,0,0)),
+        new Date(new Date(new Date().getTime()).setHours(0,0,0,0))
+    ]
+  },
+  computed: {
+    pageHeight() {
+      return {
+        height: document.documentElement.clientHeight - 130 + "px",
+      };
+    },
+  },
+  methods: {
+    handlePageChange(val) {
+      this.page.currentPage = val;
+      this.seachData();
+    },
+    // 获取公司列表
+    async getCompanyData() {
+      this.companyOptions = [];
+      const { data: datas } = await getApicompanyslist();
+      this.companyOptions = datas.data;
+      this.companyVal = datas.data[0]?.id;
+      this.getStationData();
+    },
+    changeCompan(val) {
+      this.companyVal = val;
+      this.stationOptions = [];
+      this.stationVal = "";
+      this.getStationData();
+    },
+    // 获取场站列表
+    async getStationData() {
+      this.stationOptions = [];
+      let params = {
+        type: -1,
+        companyid: this.companyVal,
+      };
+      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 = {
+        stationId: this.stationVal,
+        type: 'WT',
+        startTime: this.pickerTimer[0].getTime(),
+        endTime: this.pickerTimer[1].getTime(),
+        pageNum: this.page.currentPage,
+        pageSize: this.page.pagesize,
+      };
+      const { data: datas } = await getApiphotovoltaiclist(params);
+      this.EvaluationData = datas.data
+      this.page.total = datas.total;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.stateTransition {
+  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>

src/views/economicsOperation/windAnalyse/timeTransition/index.vue

@@ -0,0 +1,491 @@
+<template>
+  <div class="gftimeTransition">
+    <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">
+          时间：
+          <el-date-picker
+            v-model="pickerTimer"
+            type="datetimerange"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            date-format="YYYY/MM/DD ddd"
+            time-format="A hh:mm:ss"
+          />
+        </div>
+        <div class="but">
+          <el-button round size="mini" class="buttons" @click="seachData"
+            >搜索</el-button
+          >
+        </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
+          size="mini"
+          height="calc(100% - 40px)"
+          ref="Eval_table"
+          style="width: 100%"
+        >
+            <el-table-column prop="stationId" label="场站" align="center" width="100">
+              <template #default="{ row }">
+                <span>{{ '#'+row.stationId }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="状态">
+              <template #default="{ row }">
+                <div style="width: 100%;">
+                  <span v-for="(it,index) in row.data" :key="index" class="comStr"
+                  :style="{width: `${Number(it.time/((pickerTimer[1].getTime()-pickerTimer[0].getTime())/1000).toFixed(2))*100}%`}"
+                  :title="`${it.stationId}在${getTimedate(it.startTime)}至${getTimedate(it.endTime)}是${eventData(it.event)}状态`"
+                  :class="rowState(it)"></span>
+                </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 {
+  getApiphotovoltaicTimelist,
+  getApicompanyslist,
+  getApiwpByCplistlist
+} from "@/api/monthlyPerformanceAnalysis";
+import dayjs from "dayjs";
+export default {
+  name: "PerformanceAssess",
+  data() {
+    return {
+      companyVal: "",
+      companyOptions: [],
+      stationVal: "",
+      stationOptions: [],
+      pickerTimer: [],
+      EvaluationData: [],
+      page: {
+        currentPage: 1,
+        pagesize: 21,
+        total: 0,
+      },
+    };
+  },
+  mounted() {
+    this.getCompanyData();   
+    this.pickerTimer = [
+        new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(0,0,0,0)),
+        new Date(new Date(new Date().getTime()).setHours(0,0,0,0))
+    ]
+  },
+  computed: {
+    pageHeight() {
+      return {
+        height: document.documentElement.clientHeight - 130 + "px",
+      };
+    },
+  },
+  methods: {
+    getTimedate(time) {
+      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
+    },
+    eventData(event) {
+      let showStr = ''
+      if (event === 0) {
+        showStr = '待机'
+      } else if (event === 1) {
+        showStr = '并网'
+      } else if (event === 2) {
+        showStr = '故障'
+      } else if (event === 3) {
+        showStr = '检修'
+      } else if (event === 4) {
+        showStr = '限电'
+      } else if (event === 5) {
+        showStr = '受累'
+      } else if (event === 6) {
+        showStr = '离线'
+      }
+      return showStr
+    },
+    handlePageChange(val) {
+      this.page.currentPage = val;
+      this.seachData();
+    },
+    // 获取公司列表
+    async getCompanyData() {
+      this.companyOptions = [];
+      const { data: datas } = await getApicompanyslist();
+      this.companyOptions = datas.data;
+      this.companyVal = datas.data[0]?.id;
+      this.getStationData();
+    },
+    changeCompan(val) {
+      this.companyVal = val;
+      this.stationOptions = [];
+      this.stationVal = "";
+      this.getStationData();
+    },
+    // 获取场站列表
+    async getStationData() {
+      this.stationOptions = [];
+      let params = {
+        type: -1,
+        companyid: this.companyVal,
+      };
+      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();
+    },
+    rowState(row) {
+      let showStr = ''
+      if (row.event === 0) {
+        showStr = 'daijiStr'
+      } else if (row.event === 1) {
+        showStr = 'bingwangStr'
+      } else if (row.event === 2) {
+        showStr = 'guzhangStr'
+      } else if (row.event === 3) {
+        showStr = 'jianxiuStr'
+      } else if (row.event === 4) {
+        showStr = 'xiandianStr'
+      } else if (row.event === 5) {
+        showStr = 'shouleiStr'
+      } else if (row.event === 6) {
+        showStr = 'lixianStr'
+      }
+      return showStr
+    },
+    seachData() {
+      this.getTableData();
+    },
+    async getTableData() {
+      let params = {
+        stationId: this.stationVal,
+        type: 'WT',
+        startTime: this.pickerTimer[0].getTime(),
+        endTime: this.pickerTimer[1].getTime(),
+        pageNum: this.page.currentPage,
+        pageSize: this.page.pagesize,
+      };
+      const { data: datas } = await getApiphotovoltaicTimelist(params);
+      if (datas && datas.data) {
+        let arr =[]
+        for(let i in datas.data) {
+          let obj = {
+            stationId: i.substring(1),
+            data: datas.data[i]
+          }
+          arr.push(obj)
+        }
+        this.EvaluationData = arr.sort(this.sortBy('stationId'))
+      }
+      this.page.total = datas.data.total;
+    },
+    sortBy(stationId) {
+      return (x, y) =>{
+        return x[stationId]- y[stationId]
+      }
+    }
+  },
+};
+</script>
+
+<style lang="less">
+.gftimeTransition {
+  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;
+          }
+        }
+      }
+    }
+    .comStr{
+      display: inline-block;
+      // width: 10px;
+      height: 20px;
+    }
+    .daijiStr{
+      background: #1c99ff;
+    }
+    .bingwangStr{
+      background: #05bb4c;
+    }
+    .guzhangStr{
+      background: #ba3237;
+    }
+    .jianxiuStr{
+      background: #e17d24;
+    }
+    .xiandianStr{
+      background: #c530c8;
+    }
+    .shouleiStr{
+      background: #ffffff;
+    }
+    .lixianStr{
+      background: #606769;
+    }
+
+    .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>