新增风资源分析页面并实现功能，风电场站切换按钮逻辑修改，综合分析下各页面样式调整，替换部分升压站文件

.env.development

@@ -4,8 +4,8 @@ VUE_APP_TEST=http://10.81.3.155:9002
 
 
 # VUE_APP_API=http://192.168.1.110:6060
-VUE_APP_API=http://10.81.3.153:6060
-# VUE_APP_API=http://192.168.1.103:6060
+# VUE_APP_API=http://10.81.3.153:6060
+VUE_APP_API=http://192.168.1.107:6060
 
 
 VUE_APP_ADAPTERURL=http://10.81.3.155:8011

src/api/monthlyPerformanceAnalysis.js

@@ -394,3 +394,35 @@ export function getVoltaicAnalysis(Data) {
     method: "GET",
   });
 }
+//查询光资源分析曲线
+export function getVoltaicAnalysisChart({ Data, wpid }) {
+  return request({
+    baseURL: process.env.VUE_APP_API,
+    url: `/analysisfx/GFGroupRealtime?Data=${Data}&wpid=${wpid}`,
+    method: "GET",
+  });
+}
+//查询风资源分析
+export function getWindAnalysis(Data) {
+  return request({
+    baseURL: process.env.VUE_APP_API,
+    url: `/analysisfx/fdanalysis?Data=${Data}`,
+    method: "GET",
+  });
+}
+//查询风资源分析曲线
+export function getWindAnalysisChart({Data,wpid}) {
+  return request({
+    baseURL: process.env.VUE_APP_API,
+    url: `/analysisfx/FDGroupRealtime?Data=${Data}&wpid=${wpid}`,
+    method: "GET",
+  });
+}
+//查询风资源分析雷达图
+export function getWindAnalysisRadarChart({Data,wpid}) {
+  return request({
+    baseURL: process.env.VUE_APP_API,
+    url: `/analysisfx/roses?Data=${Data}&wpid=${wpid}&mode=0`,
+    method: "GET",
+  });
+}

src/assets/styles/table.less

@@ -21,10 +21,10 @@
       width: 100%;
 
       th {
-        background-color: fade(@darkBack, 20%);
+        background-color: #282f31;
         height: 30px;
         line-height: 30px;
-        color: @titleGray;
+        color: #B3BDC0;
         font-weight: 400;
         font-size: 14px;
         position: sticky;
@@ -53,7 +53,7 @@
 
       td {
         padding: 4px;
-        color: @rowGray;
+        color: #b3bdc0;
         text-align: center;
         font-size: 14px;
         white-space: nowrap;

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

@@ -51,7 +51,7 @@
       :title="dialogTitle"
       v-model="dialogShow"
       width="70%"
-      top="10vh"
+      top="40px"
       custom-class="modal"
       :close-on-click-modal="true"
     >

src/router/index.js

@@ -1241,19 +1241,19 @@ export const asyncRoutes = [
               permissions: ["jn_jkgl_lhztfx"],
             },
           },
-          {
-            path: "wtSaturability",
-            component: () =>
-              import(
-                "@/views/HealthControl/healthManagement/wtSaturability/index.vue"
-              ),
-            name: "wtSaturability",
-            meta: {
-              title: "单机饱和度",
-              icon: "",
-              permissions: ["jn_nxfx_djbhd"],
-            },
-          },
+          //   {
+          //     path: "wtSaturability",
+          //     component: () =>
+          //       import(
+          //         "@/views/HealthControl/healthManagement/wtSaturability/index.vue"
+          //       ),
+          //     name: "wtSaturability",
+          //     meta: {
+          //       title: "单机饱和度",
+          //       icon: "",
+          //       permissions: ["jn_nxfx_djbhd"],
+          //     },
+          //   },
           {
             path: "temperatureAnalysis",
             component: () =>

src/views/economicsOperation/benchmarkingManagement/intervalBenchmarking/index.vue

@@ -374,9 +374,18 @@ export default {
     },
     tabClick(val) {
       this.tabIndex = val;
-      this.getStation(this.company);
-      this.stationObj = [];
-      this.gerCjdb();
+      if (val == -2) {
+        this.company = "SXJ_KGDL_GFFD_ZGS";
+        this.getStation(this.company);
+        this.stationObj = [];
+        this.gerCjdb();
+      } else {
+        this.company = this.companyOptions[0].id;
+        this.getStation(this.company);
+        this.stationObj = [];
+        this.gerCjdb();
+      }
+
       //   this.initialization()
     },
     initialization() {

src/views/economicsOperation/benchmarkingManagement/loseRate/index.vue

@@ -395,7 +395,13 @@ export default {
       this.lineObj = [];
       this.lineList = [];
       this.tableData = [];
-      this.getStation(this.company);
+      if (val == -2) {
+        this.company = "SXJ_KGDL_GFFD_ZGS";
+        this.getStation(this.company);
+      } else {
+        this.company = this.companyOptions[0].id;
+        this.getStation(this.company);
+      }
       //   this.gerWxssl();
     },
     initialization() {

src/views/economicsOperation/benchmarkingManagement/performanceRankingList/index.vue

@@ -113,9 +113,9 @@
         <el-button round size="mini" class="buttons" @click="getPerformance"
           >搜索</el-button
         >
-        <el-button round size="mini" class="buttons" @click="mxClick"
+        <!-- <el-button round size="mini" class="buttons" @click="mxClick"
           >明细</el-button
-        >
+        > -->
         <!-- <el-button round size="mini" class="buttons">导出</el-button> -->
       </div>
     </div>
@@ -436,7 +436,13 @@ export default {
         (this.projectList = []),
         (this.lineObj = ""),
         (this.lineList = []);
-      this.getStation(this.company);
+      if (data == -2) {
+        this.company = "SXJ_KGDL_GFFD_ZGS";
+        this.getStation(this.company);
+      } else {
+        this.company = this.companyOptions[0].id;
+        this.getStation(this.company);
+      }
       this.getPerformance();
     },
     typeClick(data) {

src/views/economicsOperation/benchmarkingManagement/projectBenchmarking/index.vue

@@ -387,6 +387,12 @@ export default {
       this.stationList = [];
       this.stationObj = [];
       this.projectObj = [];
+
+      if (val == -2) {
+        this.company = "SXJ_KGDL_GFFD_ZGS";
+      } else {
+        this.company = this.companyOptions[0].id;
+      }
       this.getStation(this.company);
       this.getXmdb();
     },

src/views/economicsOperation/benchmarkingManagement/siteBenchmarking/index.vue

@@ -673,6 +673,12 @@ export default {
     },
     tabClick(val) {
       this.tabIndex = val;
+
+      if (val == -2) {
+        this.company = "SXJ_KGDL_GFFD_ZGS";
+      } else {
+        this.company = this.companyOptions[0].id;
+      }
       this.getStation(this.company);
       this.gerCndb();
       //   this.initialization();

src/views/economicsOperation/benchmarkingManagement/wiringBenchmarking/index.vue

@@ -435,6 +435,11 @@ export default {
       this.stationObj = [];
       this.projectObj = [];
       this.lineObj = [];
+      if (val == -2) {
+        this.company = "SXJ_KGDL_GFFD_ZGS";
+      } else {
+        this.company = this.companyOptions[0].id;
+      }
       this.getStation(this.company);
       this.gerXldb();
     },

src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/barChart.vue

@@ -102,7 +102,7 @@ export default {
           inactiveColor: partten.getColor("gray"),
           textStyle: {
             fontSize: 12,
-            color: partten.getColor("grayl"),
+            color: "#93989A",
           },
         },
         grid: {

src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/photovoltaic.vue

@@ -48,7 +48,10 @@
 import barChart from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/barChart.vue";
 import lineCharts from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/lineCharts.vue";
 import dayjs from "dayjs";
-import { getVoltaicAnalysis } from "@/api/monthlyPerformanceAnalysis.js";
+import {
+  getVoltaicAnalysis,
+  getVoltaicAnalysisChart,
+} from "@/api/monthlyPerformanceAnalysis.js";
 import { FindGroupRealtime } from "@/api/home/home.js";
 export default {
   name: "Photovoltaic", //光资源分析
@@ -107,9 +110,9 @@ export default {
     },
     rowClick(row) {
       if (Object.keys(row).length) {
-        FindGroupRealtime({
-          wpId: row.wpid,
-          uniformCode: this.uniformCode,
+        getVoltaicAnalysisChart({
+          wpid: row.wpid,
+          Data: this.date,
         }).then((res) => {
           this.BASE.closeLoading();
           if (res.code == 200) {

src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/radar-chart.vue

@@ -0,0 +1,327 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+import dayjs from "dayjs";
+export default {
+  name: "wp-bar-chart",
+  componentName: "wp-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    chartName: { type: String },
+    // 传入数据
+    list: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      firstAnimation: true,
+    };
+  },
+  computed: {
+    series() {
+      let result = [];
+      result = this.list.length
+        ? [
+            ...this.list.map((o, index) => {
+              return {
+                type: "bar",
+                data: o,
+                coordinateSystem: "polar",
+                name: this.funText(index),
+                stack: "a",
+                emphasis: {
+                  focus: "series",
+                },
+              };
+            }),
+          ]
+        : [];
+      return result;
+    },
+  },
+  methods: {
+    funText(index) {
+      let str = "";
+      switch (index) {
+        case 0:
+          str = "0-2.5";
+          break;
+        case 1:
+          str = "2.5-5";
+          break;
+        case 2:
+          str = "5-7.5";
+          break;
+        case 3:
+          str = "7.5-10";
+          break;
+        case 4:
+          str = "10-12.5";
+          break;
+        case 5:
+          str = "12.5-15";
+          break;
+        case 6:
+          str = "15-17.5";
+          break;
+        case 7:
+          str = "17.5-20";
+          break;
+        case 8:
+          str = "20-22.5";
+          break;
+        case 9:
+          str = "22.5-25";
+          break;
+        case 10:
+          str = "25-inf";
+          break;
+      }
+      return str;
+    },
+    resize() {
+      this.initChart();
+    },
+    initChart() {
+      let chart = echarts.init(this.$el);
+      let option = {
+        color: [
+          "#626c91",
+          "#96dee8",
+          "#3fb1e3",
+          "#6be6c1",
+          "#a0a7e6",
+          "#c4ebad",
+          "#7efe7b",
+          "#fec80a",
+          "#e06702",
+          "#f20801",
+          "#7f0001",
+        ],
+        title: {
+          text: "",
+          subtext: "风速风向频次玫瑰图",
+          subtextStyle: {
+            fontSize: 16,
+            color: "#93989A",
+          },
+          top: 10,
+          left: "5%",
+        },
+        angleAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "N",
+            "",
+            "N-E",
+            "",
+            "E",
+            "",
+            "S-E",
+            "",
+            "S",
+            "",
+            "S-W",
+            "",
+            "W",
+            "",
+            "W-N",
+            "",
+          ],
+          axisLabel: {
+            fontSize: 13,
+            color: "#93989A",
+          },
+          splitLine: {
+            show: true,
+          },
+        },
+        radiusAxis: {
+          axisLabel: {
+            fontSize: 13,
+            color: "#93989A",
+          },
+        },
+        polar: {
+          radius: "70%",
+          center: ["60%", "50%"],
+        },
+        radar: {
+          radius: "70%",
+          center: ["60%", "50%"],
+          indicator: [
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+            {
+              text: "",
+              max: 1000,
+            },
+          ],
+          splitArea: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        tooltip: {
+          confine: true,
+          formatter: (params) => {
+            var mark = params.marker; //点
+            var seriesName = params.seriesName; //图例名称
+            var htmlStr = `<div style='margin-bottom:5px'>${mark} ${seriesName}m</div>`;
+
+            htmlStr += `<div style='margin-bottom:2px'>频次：${params.value}</div>`;
+
+            return htmlStr;
+          },
+        },
+        series: this.series,
+        legend: {
+          show: true,
+          orient: "vertical",
+          left: "5%",
+          itemWidth: 16,
+          itemHeight: 10,
+          textStyle: {
+            fontSize: 13,
+            color: "#93989A",
+          },
+          top: "middle",
+          data: [
+            "0-2.5",
+            "2.5-5",
+            "5-7.5",
+            "7.5-10",
+            "10-12.5",
+            "12.5-15",
+            "15-17.5",
+            "17.5-20",
+            "20-22.5",
+            "22.5-25",
+            "25-inf",
+          ],
+        },
+      };
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function () {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.$nextTick(() => {
+      this.id = "wp-chart-" + util.newGUID();
+    });
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+      this.firstAnimation = false;
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+
+  watch: {
+    "$store.state.themeName"() {
+      this.initChart();
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/wind.vue

@@ -8,73 +8,127 @@
           :prop="item.prop"
           :key="index"
           align="center"
-          @row-click="rowClick"
           show-overflow-tooltip
         >
+          <template #default="{ row }">
+            <span
+              style="cursor: pointer"
+              v-if="item.prop == 'name'"
+              @click.stop="rowClick(row, false)"
+              >{{ row[item.prop] }}
+            </span>
+            <span v-else>{{ row[item.prop] }}</span>
+          </template>
         </el-table-column>
       </el-table>
     </div>
-    <div class="chart-wrapper">
+    <div
+      class="chart-wrapper"
+      v-loading="chartLoading"
+      element-loading-text="加载中..."
+      element-loading-background="rgba(4, 12, 11, 0.8)"
+    >
       <div class="left-chart">
         <lineCharts
           :unit="'m/s'"
           :windCurveValues="lineChart"
-          :CurveTitle="chartName"
+          :CurveTitle="chartName + '实时风速'"
           width="100%"
           :color="'#05bb4c'"
           height="100%"
           chartId="wind-fs"
         />
       </div>
-      <div class="right-chart"></div>
+      <div class="right-chart">
+        <radarChart width="100%" height="100%" :list="radarChart" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import lineCharts from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/lineCharts.vue";
+import radarChart from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/radar-chart.vue";
 import dayjs from "dayjs";
-import { FindGroupRealtime } from "@/api/home/home.js";
+import {
+  getWindAnalysis,
+  getWindAnalysisChart,
+  getWindAnalysisRadarChart,
+} from "@/api/monthlyPerformanceAnalysis.js";
 export default {
   name: "Wind", //风资源分析
-  components: { lineCharts },
-  props: {},
+  components: { lineCharts, radarChart },
+  props: {
+    date: {
+      type: String,
+    },
+  },
   data() {
     return {
-      tableData: [...new Array(24)].map((i, index) => {
-        let a = Math.random() * (100 - 1 + 1) + 1;
-        return {
-          name: "#" + (index + 1),
-          pjfs: a.toFixed(2),
-          maxf: Math.random() * (100 - 1 + 1) + 1,
-          minf: Math.random() * (100 - 1 + 1) + 1,
-          pjfx: Math.random() * (100 - 1 + 1) + 1,
-        };
-      }),
+      chartLoading: false,
+      tableData: [],
       tableHead: [
         { prop: "name", label: "场站名称" },
-        { prop: "pjfs", label: "平均风速" },
-        { prop: "maxf", label: "最大风速" },
-        { prop: "minf", label: "最小风速" },
+        { prop: "pjfs", label: "平均风速(m/s)" },
+        { prop: "zdfs", label: "最大风速(m/s)" },
+        { prop: "zxfs", label: "最小风速(m/s)" },
         { prop: "pjfx", label: "平均风向" },
       ],
-      chartName: "实时风速",
-      lineChart: [...new Array(24)].map((i, index) => {
-        let a = Math.random() * (100 - 1 + 1) + 1;
-        return {
-          value: a.toFixed(2),
-          dateTime: dayjs()
-            .startOf("day")
-            .add(index, "hour")
-            .format("YYYY-MM-DD HH:mm"),
-        };
-      }),
-      uniformCode: "SSPJFS",
+      chartName: "",
+      lineChart: [],
+      radarChart: [],
     };
   },
+  created() {
+    this.getData(true);
+  },
   methods: {
-    rowClick(row) {
-      console.log(row);
+    rowClick(row, flag) {
+      console.log(row, flag);
+      if (flag) {
+        this.chartLoading = false;
+      } else {
+        this.chartLoading = true;
+      }
+      if (Object.keys(row).length) {
+        this.chartName = row.name;
+        this.getLineChart(row.wpid);
+        this.getRadarChart(row.wpid);
+      }
+    },
+    getData(val) {
+      this.BASE.showLoading();
+      getWindAnalysis(this.date).then((res) => {
+        if (res.code == 200) {
+          this.tableData = res.data ? res.data : [];
+          this.rowClick(this.tableData[0] || {}, val);
+        }
+      });
+    },
+    getLineChart(wpid) {
+      getWindAnalysisChart({ Data: this.date, wpid }).then((res) => {
+        if (res.code == 200) {
+          this.lineChart = res.data
+            ? res.data.map((item) => {
+                return {
+                  dateTime: dayjs(item.time).format("MM-DD HH:mm"),
+                  value: item.value6,
+                };
+              })
+            : [];
+        }
+        this.chartLoading = false;
+        this.BASE.closeLoading();
+      });
+    },
+    getRadarChart(wpid) {
+      getWindAnalysisRadarChart({ Data: this.date, wpid }).then((res) => {
+        if (res.code == 200) {
+          this.radarChart = res.data && res.data[0].count ? res.data[0].count : [];
+        }
+        this.chartLoading = false;
+        this.BASE.closeLoading();
+      });
     },
   },
 };
@@ -87,18 +141,22 @@ export default {
   display: flex;
   flex-direction: column;
   .table-wrapper {
-    height: calc(100% - 450px - 20px);
+    height: calc(100% - 390px - 20px);
     width: 100%;
     margin-bottom: 20px;
   }
   .chart-wrapper {
-    height: 450px;
+    height: 390px;
     display: flex;
     width: 100%;
     .left-chart {
       width: 65%;
       height: 100%;
     }
+    .right-chart {
+      width: 34%;
+      height: 100%;
+    }
   }
 }
 </style>

src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/index.vue

@@ -14,20 +14,6 @@
           <span>{{ val.name }}</span>
         </div>
       </div>
-      <!-- <el-select
-        size="mini"
-        v-model="station"
-        placeholder="请选择"
-        style="margin-left: 15px"
-      >
-        <el-option
-          v-for="item in stationOptions"
-          :key="item.id"
-          :label="item.aname"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select> -->
       <el-date-picker
         size="mini"
         type="date"
@@ -58,7 +44,6 @@
 import Wind from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/wind.vue";
 import Photovoltaic from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/photovoltaic.vue";
 import dayjs from "dayjs";
-import { GetStationByCompany } from "@/api/factoryMonitor/index.js";
 export default {
   name: "WindAndPhotovoltaic", //风光资源分析
   components: { Wind, Photovoltaic },
@@ -67,41 +52,27 @@ export default {
       station: "",
       stationOptions: [],
       date: dayjs().format("YYYY-MM-DD"),
-      tabIndex: -2,
+      tabIndex: -1,
       tabOptions: [
         { id: -1, name: "风电" },
         { id: -2, name: "光伏" },
       ],
     };
   },
-  created() {
-    this.getStation();
-  },
+  mounted() {},
   computed: {
     selectValue() {
       return this.tabIndex == -1 ? "风资源分析" : "光资源分析";
     },
   },
   methods: {
-    getStation() {
-      GetStationByCompany({ companyids: 0, type: this.tabIndex }).then(
-        ({ data: res, code }) => {
-          if (res.code == 200) {
-            this.stationOptions = res.data;
-            this.station = this.stationOptions[0]?.id || "";
-            // this.getDatas();
-          }
-        }
-      );
-    },
     tabClick(tab) {
       this.tabIndex = tab;
       this.selectValue = tab == -1 ? "风资源分析" : "光资源分析";
-      this.getStation();
     },
     getDatas() {
       if (this.tabIndex == -1) {
-        this.$refs.Wind.rowClick();
+        this.$refs.wind.getData(true);
       } else {
         this.$refs.voltaic.getData();
       }

src/views/economicsOperation/thematicAnalysis/MTBF/index.vue

@@ -63,11 +63,10 @@
       <!-- <el-button round size="mini">导出</el-button> -->
     </div>
     <div class="data-bodys">
-      <div class="line clearfix">
-        <div class="leftContent line-left">
-          <span>{{ selectValue }}</span>
-        </div>
+      <div class="leftContent">
+        <span>{{ selectValue }}</span>
       </div>
+
       <div class="economicTable">
         <el-table
           :data="tableData"
@@ -167,12 +166,7 @@
       </div>
     </div>
     <div class="echarts">
-      <div class="chart-name">
-        <div class="point point-left bottom"></div>
-        <div class="point point-right bottom"></div>
-        {{ selectValue }}
-      </div>
-      <div style="height: calc(100% - 39px); margin-top: 10px">
+      <div style="height: 100%">
         <BarCharts
           :list="barList"
           width="97%"
@@ -354,7 +348,13 @@ export default {
 
     tabClick(data) {
       this.tabIndex = data;
-      this.search();
+      if (data == -2) {
+        this.company = "SXJ_KGDL_GFFD_ZGS";
+        this.search();
+      } else {
+        this.company = this.companyOptions[0].id;
+        this.search();
+      }
     },
     initialization() {
       companys().then(({ data: res }) => {
@@ -487,29 +487,18 @@ export default {
     }
   }
 
-  .line {
-    .leftContent {
-      width: 242px;
-      height: 41px;
-      line-height: 41px;
-      background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
-      padding-left: 25px;
-      span {
-        font-size: 16px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #ffffff;
-      }
-    }
-
-    .rightContent {
-      width: 212px;
-      height: 28px;
-      margin-top: 13px;
-      background: url("../../../../assets/imgs/title_right_bg.png");
-    }
-    .floatRight {
-      float: right;
+  .leftContent {
+    width: 242px;
+    height: 45px;
+    line-height: 45px;
+    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;
     }
   }
 
@@ -523,27 +512,6 @@ export default {
   }
 }
 
-.clearfix::after {
-  content: "";
-  clear: both;
-  height: 0;
-  line-height: 0;
-  visibility: hidden;
-  display: block;
-}
-
-.clearfix {
-  zoom: 1;
-}
-
-.line-left {
-  float: left;
-}
-
-.line-right {
-  float: right;
-}
-
 .el-table::before {
   height: 0;
 }
@@ -577,27 +545,4 @@ export default {
   font-weight: 400;
   color: #ffffff;
 }
-
-.point {
-  width: 6px;
-  height: 1px;
-  background-color: #ffffff;
-  position: absolute;
-
-  &.point-left {
-    left: 0;
-  }
-
-  &.point-right {
-    right: 0;
-  }
-
-  &.top {
-    top: -1px;
-  }
-
-  &.bottom {
-    bottom: -1px;
-  }
-}
 </style>

src/views/economicsOperation/thematicAnalysis/comprehensiveAnalysis/index.vue

@@ -48,8 +48,8 @@
         >
       </div>
     </div>
-    <div class="comAnalysis_title clearfix">
-      <div class="leftContent floatLeft"><span>综合分析</span></div>
+    <div class="comAnalysis_title">
+      <div class="leftContent"><span>综合分析</span></div>
     </div>
     <div class="downPdf" id="downPdf">
       <div class="comAnalysis_Table">
@@ -466,6 +466,11 @@ export default {
     },
     tabClick(data) {
       this.tabIndex = data;
+      if (data == -2) {
+        this.company = "SXJ_KGDL_GFFD_ZGS";
+      } else {
+        this.company = this.companyOptions[0].id;
+      }
       this.seachData();
     },
     changeBtn(id) {
@@ -747,39 +752,18 @@ export default {
     background: rgba(0, 0, 0, 0.45);
     .leftContent {
       width: 242px;
-      height: 41px;
-      line-height: 41px;
+      height: 45px;
+      line-height: 45px;
       background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
 
       span {
         font-size: 16px;
         font-family: Microsoft YaHei;
         font-weight: 400;
-        color: #ffffff;
+        color: #05bb4c;
         margin-left: 25px;
       }
     }
-
-    .floatLeft {
-      float: left;
-    }
-
-    .floatRight {
-      float: right;
-    }
-  }
-
-  .clearfix::after {
-    content: "";
-    clear: both;
-    height: 0;
-    line-height: 0;
-    visibility: hidden;
-    display: block;
-  }
-
-  .clearfix {
-    zoom: 1;
   }
 
   .comAnalysis_top {

src/views/economicsOperation/thematicAnalysis/failure/index.vue

@@ -63,11 +63,10 @@
       <!-- <el-button round size="mini">导出</el-button> -->
     </div>
     <div class="data-bodys">
-      <div class="line clearfix">
-        <div class="leftContent left">
-          <span>{{ selectValue }}</span>
-        </div>
+      <div class="leftContent">
+        <span>{{ selectValue }}</span>
       </div>
+
       <div class="economicTable">
         <el-table
           :data="tableData"
@@ -167,12 +166,7 @@
       </div>
     </div>
     <div class="echarts">
-      <div class="chart-name">
-        <div class="point point-left bottom"></div>
-        <div class="point point-right bottom"></div>
-        {{ selectValue }}
-      </div>
-      <div style="height: calc(100% - 39px - 10px); margin-top: 10px">
+      <div style="height: 100%">
         <BarCharts
           :list="barList"
           width="97%"
@@ -439,7 +433,13 @@ export default {
 
     tabClick(data) {
       this.tabIndex = data;
-      this.search();
+      if (data == -2) {
+        this.company = "SXJ_KGDL_GFFD_ZGS";
+        this.search();
+      } else {
+        this.company = this.companyOptions[0].id;
+        this.search();
+      }
     },
     initialization() {
       companys().then(({ data: res }) => {
@@ -572,30 +572,18 @@ export default {
     }
   }
 
-  .line {
-    .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: #ffffff;
-        margin-left: 25px;
-      }
-    }
-
-    .rightContent {
-      width: 212px;
-      height: 28px;
-      margin-top: 13px;
-      background: url("../../../../assets/imgs/title_right_bg.png");
-    }
-    .floatRight {
-      float: right;
+  .leftContent {
+    width: 242px;
+    height: 45px;
+    line-height: 45px;
+    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;
     }
   }
 
@@ -608,27 +596,6 @@ export default {
   }
 }
 
-.clearfix::after {
-  content: "";
-  clear: both;
-  height: 0;
-  line-height: 0;
-  visibility: hidden;
-  display: block;
-}
-
-.clearfix {
-  zoom: 1;
-}
-
-.left {
-  float: left;
-}
-
-.right {
-  float: right;
-}
-
 .el-table::before {
   height: 0;
 }
@@ -662,27 +629,4 @@ export default {
   font-weight: 400;
   color: #ffffff;
 }
-
-.point {
-  width: 6px;
-  height: 1px;
-  background-color: #ffffff;
-  position: absolute;
-
-  &.point-left {
-    left: 0;
-  }
-
-  &.point-right {
-    right: 0;
-  }
-
-  &.top {
-    top: -1px;
-  }
-
-  &.bottom {
-    bottom: -1px;
-  }
-}
 </style>

src/views/economicsOperation/thematicAnalysis/generation/index.vue

@@ -63,11 +63,10 @@
       <!-- <el-button round size="mini">导出</el-button> -->
     </div>
     <div class="data-bodys">
-      <div class="line clearfix">
-        <div class="leftContent left">
-          <span>{{ selectValue + "分析" }}</span>
-        </div>
+      <div class="leftContent">
+        <span>{{ selectValue + "分析" }}</span>
       </div>
+
       <div class="economicTable">
         <el-table
           :data="tableData"
@@ -496,19 +495,18 @@ export default {
       line-height: 34px !important;
     }
   }
-  .line {
-    .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: #ffffff;
-        margin-left: 25px;
-      }
+  .leftContent {
+    width: 242px;
+    height: 45px;
+    line-height: 45px;
+    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;
     }
   }
 
@@ -599,27 +597,6 @@ export default {
   }
 }
 
-.clearfix::after {
-  content: "";
-  clear: both;
-  height: 0;
-  line-height: 0;
-  visibility: hidden;
-  display: block;
-}
-
-.clearfix {
-  zoom: 1;
-}
-
-.left {
-  float: left;
-}
-
-.right {
-  float: right;
-}
-
 .el-table::before {
   height: 0;
 }
@@ -654,26 +631,4 @@ export default {
   color: #ffffff;
 }
 
-.point {
-  width: 6px;
-  height: 1px;
-  background-color: #ffffff;
-  position: absolute;
-
-  &.point-left {
-    left: 0;
-  }
-
-  &.point-right {
-    right: 0;
-  }
-
-  &.top {
-    top: -1px;
-  }
-
-  &.bottom {
-    bottom: -1px;
-  }
-}
 </style>

src/views/economicsOperation/thematicAnalysis/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-view />
+  <router-view class="thematicAnalysis" />
 </template>
 
 <script>
@@ -8,4 +8,17 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.parcel-box::v-deep {
+  .el-col + .el-col {
+    padding-left: 0 !important;
+  }
+  .el-table {
+
+    td {
+      height: 33px !important;
+      line-height: 33px !important;
+    }
+  }
+}
+</style>

src/views/economicsOperation/thematicAnalysis/windEnergy/index.vue

@@ -43,10 +43,8 @@
       </div>
     </div>
     <div class="data-bodys">
-      <div class="line clearfix">
-        <div class="leftContent left">
-          <span>{{ tabIndex == -1 ? "风能利用率" : "光能利用率" }}</span>
-        </div>
+      <div class="leftContent">
+        <span>{{ tabIndex == -1 ? "风能利用率" : "光能利用率" }}</span>
       </div>
       <div class="economicTable">
         <el-table
@@ -54,7 +52,7 @@
           style="width: 100%"
           size="mini"
           stripe
-          height="calc(100% - 32px)"
+          height="100%"
           @row-click="rowClick"
         >
           <el-table-column
@@ -147,18 +145,7 @@
       </div>
     </div>
     <div class="echarts">
-      <div class="chart-name">
-        <div class="point point-left bottom"></div>
-        <div class="point point-right bottom"></div>
-        {{ tabIndex == -1 ? "风能利用率" : "光能利用率" }}
-      </div>
-      <div
-        style="
-          padding-top: 10px;
-          height: calc(100% - 31px);
-          padding-bottom: 10px;
-        "
-      >
+      <div style="height: 100%; padding-bottom: 10px">
         <BarCharts
           :list="barList"
           width="97%"
@@ -304,7 +291,13 @@ export default {
 
     tabClick(data) {
       this.tabIndex = data;
-      this.search();
+      if (data == -2) {
+        this.company = "SXJ_KGDL_GFFD_ZGS";
+        this.search();
+      } else {
+        this.company = this.companyOptions[0].id;
+        this.search();
+      }
     },
     initialization() {
       companys().then(({ data: res }) => {
@@ -438,32 +431,20 @@ export default {
     }
   }
 
-  .line {
-    padding-bottom: 5px;
+  padding-bottom: 5px;
 
-    .leftContent {
-      width: 242px;
-      height: 41px;
-      line-height: 41px;
-      background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
+  .leftContent {
+    width: 242px;
+    height: 45px;
+    line-height: 45px;
+    background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
 
-      span {
-        font-size: 16px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #ffffff;
-        margin-left: 25px;
-      }
-    }
-
-    .rightContent {
-      width: 212px;
-      height: 28px;
-      margin-top: 13px;
-      background: url("../../../../assets/imgs/title_right_bg.png");
-    }
-    .floatRight {
-      float: right;
+    span {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #05bb4c;
+      margin-left: 25px;
     }
   }
 
@@ -476,27 +457,6 @@ export default {
   }
 }
 
-.clearfix::after {
-  content: "";
-  clear: both;
-  height: 0;
-  line-height: 0;
-  visibility: hidden;
-  display: block;
-}
-
-.clearfix {
-  zoom: 1;
-}
-
-.left {
-  float: left;
-}
-
-.right {
-  float: right;
-}
-
 .el-table::before {
   height: 0;
 }
@@ -530,27 +490,4 @@ export default {
   font-weight: 400;
   color: #ffffff;
 }
-
-.point {
-  width: 6px;
-  height: 1px;
-  background-color: #ffffff;
-  position: absolute;
-
-  &.point-left {
-    left: 0;
-  }
-
-  &.point-right {
-    right: 0;
-  }
-
-  &.top {
-    top: -1px;
-  }
-
-  &.bottom {
-    bottom: -1px;
-  }
-}
 </style>

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

@@ -48,12 +48,16 @@
           </div>
         </div>
         <div class="query-actions">
-          <button class="btn green" @click="getTable">查询</button>
+          <el-button size="mini" round class="searchColor" @click="getTable"
+            >查 询</el-button
+          >
         </div>
       </div>
     </div>
     <div class="table-box">
-      <div class="title">{{ showTitle }}</div>
+      <div class="leftContent">
+        <span>{{ showTitle }}</span>
+      </div>
       <ComTable
         :data="tableData"
         :pageSize="20"
@@ -200,17 +204,46 @@ export default {
   },
 };
 </script>
-<style scoped>
+<style scoped lang="less">
 .table-box {
   height: calc(100% - 80px);
+  .leftContent {
+    width: 242px;
+    height: 45px;
+    line-height: 45px;
+    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;
+    }
+  }
 }
-.newsDiv {
-  color: rgba(255, 255, 255, 0.75);
-  background-color: rgba(255, 255, 255, 0.1);
-  margin-bottom: 8px;
-  line-height: 3.4259vh;
-  padding: 0 15px;
+.query-actions {
+  margin-left: 0 !important;
+}
+button {
+  margin-left: 10px;
+  background: rgba(67, 81, 107, 0.3);
+  border: 1px solid #274934;
+  color: #b3b3b3;
+}
+
+.searchColor {
+  background-color: rgba(5, 187, 76, 0.2);
+  border: 1px solid #3b6c53;
+  color: #b3b3b3;
+  font-size: 14px;
+
+  &:hover {
+    background-color: rgba(5, 187, 76, 0.5);
+    color: #ffffff;
+  }
 }
+
 .newspan {
   line-height: 30px;
   cursor: pointer;
@@ -253,8 +286,8 @@ export default {
   content: "";
   position: absolute;
   width: 100%;
-  height: 0.463vh;
-  border: 0.093vh solid #05bb4c;
+  height: 4px;
+  border: 1px solid #05bb4c;
   border-top: 0;
   left: 0;
   bottom: 0;
@@ -263,6 +296,6 @@ export default {
 .title {
   background: rgba(255, 255, 255, 0.1);
   margin-bottom: 8px;
-  padding: 1vh;
+  padding: 8px;
 }
 </style>

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

@@ -92,14 +92,8 @@
       </div>
     </div>
     <div
-      style="
-        height: calc(100% - 78px);
-        overflow-y: auto;
-        background-color: rgba(0, 0, 0, 0.45);
-        padding: 5px;
-        border-radius: 0 0 5px 5px;
-      "
-      v-if="Object.keys(showMatrixList).length"
+      class="zuchuan-wrapper"
+      v-if="Object.keys(showMatrixList).length && tab == 'ZC'"
     >
       <div
         class="matrixs"
@@ -217,6 +211,117 @@
       </div>
     </div>
     <div
+      class="jizhong-wrapper"
+      v-else-if="Object.keys(showMatrixList).length && tab == 'JZ'"
+    >
+      <div
+        class="matrixs"
+        v-for="(value, indexe) of showMatrixList"
+        :key="indexe"
+      >
+        <div class="line_all">
+          <div class="line-namebox">
+            <div class="line-name" v-if="indexe && indexe.length >= 5">
+              <div>{{ indexe.substring(0, indexe.indexOf("方阵")) }}</div>
+              <div>方阵</div>
+            </div>
+            <div class="line-name" v-else>
+              {{ indexe }}
+            </div>
+          </div>
+          <div class="line-list">
+            <div
+              class="matrix-item"
+              v-for="(val, indexes) in showMatrixList[indexe]"
+              :key="indexes"
+            >
+              <!--  风机颜色判断-->
+              <div
+                class="matrix-card"
+                style="cursor: pointer"
+                :class="
+                  val.yxzt !== '' && colorList[val.yxzt]
+                    ? colorList[Number(val.yxzt)]
+                    : 'gray'
+                "
+              >
+                <div class="info">
+                  <div
+                    class="card-left"
+                    @click="handleLeftClick(val, matrixOther.czid)"
+                  >
+                    <div class="card-name">{{ val.name }}</div>
+                    <i
+                      class="svg-icon svg-icon-sm"
+                      :class="
+                        val.yxzt === 4 || val.yxzt === 5
+                          ? 'svg-icon-white'
+                          : `svg-icon-${colorList[Number(val.yxzt)]}`
+                      "
+                    >
+                      <SvgIcon :svgid="mapping[Number(val.yxzt)]"></SvgIcon
+                    ></i>
+                  </div>
+                  <div class="dashed" />
+                  <div class="card-right" @click="handleRightClick(val.id)">
+                    <div class="right-item">
+                      <i
+                        class="svg-icon svg-icon-sm"
+                        :class="
+                          val.yxzt === 4 || val.yxzt === 5
+                            ? 'svg-icon-white'
+                            : `svg-icon-${colorList[Number(val.yxzt)]}`
+                        "
+                      >
+                        <SvgIcon svgid="svg-P"></SvgIcon
+                      ></i>
+                      <div class="right-value">
+                        {{
+                          val.ssgl
+                            ? val && Number(val.ssgl)?.toFixed(2)
+                            : "0.00"
+                        }}
+                      </div>
+                    </div>
+                    <div class="right-item">
+                      <i
+                        class="svg-icon svg-icon-sm"
+                        :class="
+                          val.yxzt === 4 || val.yxzt === 5
+                            ? 'svg-icon-white'
+                            : `svg-icon-${colorList[Number(val.yxzt)]}`
+                        "
+                      >
+                        <SvgIcon svgid="svg-A"></SvgIcon
+                      ></i>
+                      <div class="right-value">
+                        {{ val.jldl ? Number(val.jldl)?.toFixed(2) : "0.00" }}
+                      </div>
+                    </div>
+                    <div class="right-item">
+                      <i
+                        class="svg-icon svg-icon-sm"
+                        :class="
+                          val.yxzt === 4 || val.yxzt === 5
+                            ? 'svg-icon-white'
+                            : `svg-icon-${colorList[Number(val.yxzt)]}`
+                        "
+                      >
+                        <SvgIcon svgid="svg-V"></SvgIcon
+                      ></i>
+                      <div class="right-value">
+                        {{ val.jldy ? Number(val.jldy)?.toFixed(2) : "0.00" }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
       v-else
       style="
         height: calc(100% - 78px);
@@ -1289,7 +1394,20 @@ p {
       }
     }
   }
-
+  .zuchuan-wrapper,
+  .jizhong-wrapper {
+    height: calc(100% - 78px);
+    width: 100%;
+    overflow-y: auto;
+    background-color: rgba(0, 0, 0, 0.45);
+    padding: 5px;
+    border-radius: 0 0 5px 5px;
+  }
+  .jizhong-wrapper {
+    display: grid;
+    grid-template-columns: auto auto auto auto auto;
+    grid-auto-rows: 95px;
+  }
   .matrixs {
     width: 100%;
     margin-top: 7px;
@@ -1366,6 +1484,7 @@ p {
         border: 1px solid #fff;
         display: flex;
         align-items: center;
+        justify-content: center;
         border-radius: 5px;
         border: 1px solid;
         border-image: linear-gradient(