删除无用文件，修改场站分析的发电量分析页面图表单位，修改升压站矩阵页面样式

src/router/index.js

@@ -294,7 +294,7 @@ export const asyncRoutes = [
         name: "PowerPredictMatrix",
         component: () => import("@/views/stateMonitor/powerPredictMatrix"),
         meta: {
-          title: "功率预测",
+          title: "功率预测矩阵",
           icon: "svg-power-predict",
           permissions: ["jn_glyc"],
         },

src/views/economicsOperation/monthElectricAnalyse/components/barCharts.vue

@@ -1,225 +0,0 @@
-<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: "yfdl-multiple-bar-chart",
-  componentName: "yfdl-multiple-bar-chart",
-  props: {
-    width: {
-      type: String,
-      default: "100%",
-    },
-    height: {
-      type: String,
-      default: "100%",
-    },
-
-    // 传入数据
-    list: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      id: "",
-      chart: null,
-      firstAnimation: true,
-    };
-  },
-  computed: {
-    xdata() {
-      return [
-        "一月",
-        "二月",
-        "三月",
-        "四月",
-        "五月",
-        "六月",
-        "七月",
-        "八月",
-        "九月",
-        "十月",
-        "十一月",
-        "十二月",
-      ];
-    },
-    series() {
-      let result = [];
-      if (this.list && this.list.length > 0) {
-        this.list.forEach((listItem, index) => {
-          let seriesItem = {
-            name: listItem?.name,
-            type: "bar",
-            data: listItem?.data,
-            itemStyle: {
-              color: listItem.color,
-            },
-            barWidth: "20%",
-          };
-
-          result.push(seriesItem);
-        });
-      }
-      return result;
-    },
-  },
-  methods: {
-    resize() {
-      this.initChart();
-    },
-    initChart() {
-      let chart = echarts.init(this.$el);
-      let option = {
-        tooltip: {
-          trigger: "axis",
-          backgroundColor: "rgba(5, 187, 76,0.35)",
-          borderColor: "#05bb4c",
-          formatter: function (params) {
-            var htmlStr = `<div style='margin-bottom:5px'>${params[0].axisValue}</div>`;
-            for (var i = 0; i < params.length; i++) {
-              htmlStr += `<div style='margin-bottom:2px'>`;
-              var param = params[i];
-              var seriesName = param.seriesName; //图例名称
-              var value = param.value; //y轴值
-              var data = param.data; //单位判断code
-              var mark = param.marker; //点
-              var unit = `<span style='font-size:14px'>`;
-
-              htmlStr += mark; //一个点
-              htmlStr += `${seriesName} : ${
-                value != null ? value + unit + ` 万kWh</span>` : "--"
-              }`; //圆点后面显示的文本
-              htmlStr += "</div>";
-            }
-            return htmlStr;
-          },
-          padding: [10, 10, 3, 10],
-          textStyle: {
-            color: "#fff",
-            fontSize: 16,
-          },
-          axisPointer: {
-            type: "shadow",
-            shadowStyle: {
-              color: "rgba(105,105,105, .05)",
-              width: "1",
-            },
-          },
-        },
-        legend: {
-          show: true,
-          data: this.list.map((i) => i?.name),
-          right: 56,
-          icon: "ract",
-          itemWidth: 8,
-          itemHeight: 8,
-          inactiveColor: partten.getColor("gray"),
-          textStyle: {
-            fontSize: 12,
-            color: partten.getColor("grayl"),
-          },
-        },
-        grid: {
-          top: "10%",
-          left: "1%",
-          right: "2%",
-          bottom: "5%",
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: this.xdata,
-            nameLocation: "center",
-            axisPointer: {
-              type: "shadow",
-            },
-            axisLine: {
-              lineStyle: {
-                color: "#93989A",
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                fontSize: 14,
-                color: "#93989A",
-              },
-            },
-          },
-        ],
-        yAxis: {
-          type: "value",
-          name: "单位：万千瓦时",
-          nameTextStyle: {
-            color: "#93989A",
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: "rgba(96,103,105,0.3)",
-              type: "dashed",
-            },
-          },
-          axisLabel: {
-            textStyle: {
-              fontSize: 14,
-              color: "#93989A",
-            },
-          },
-        },
-        series: this.series,
-      };
-      chart.clear();
-      chart.setOption(option);
-
-      this.resize = function () {
-        chart.resize();
-      };
-
-      window.addEventListener("resize", this.resize);
-    },
-  },
-  created() {
-    this.$nextTick(() => {
-      this.id = "pie-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/monthElectricAnalyse/index.vue

@@ -1,351 +0,0 @@
-<template>
-  <div class="parcel-box">
-    <div class="search">
-      <div class="search-left">
-        <el-select
-          size="mini"
-          v-model="company"
-          placeholder="请选择"
-          @change="companyChanged"
-        >
-          <el-option
-            v-for="item in companyOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-        <el-select
-          size="mini"
-          v-model="station"
-          placeholder="请选择"
-          style="margin-left: 15px"
-          @change="stationChanged"
-        >
-          <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="year"
-          v-model="year"
-          value-format="YYYY"
-          placeholder="请选择"
-          style="margin-left: 15px"
-          popper-class="date-select"
-        >
-        </el-date-picker>
-        <el-button round size="mini" class="searchColor" @click="getDatas"
-          >搜索</el-button
-        >
-      </div>
-    </div>
-    <div
-      class="parcel-content"
-      v-loading="loading"
-      element-loading-background="rgba(4, 12, 11, 0.8)"
-    >
-      <!-- <img src="@/assets/imgs/glycfx-bg1.png" alt="" /> -->
-      <div class="line clearfix">
-        <div class="leftContent">
-          <span>{{ selectValue }}</span>
-        </div>
-      </div>
-      <div class="table-wrapper">
-        <el-table
-          :data="tableData"
-          size="mini"
-          stripe
-          width="100%"
-          height="100%"
-        >
-          <el-table-column
-            v-for="(item, index) in tableHead"
-            :label="item"
-            :key="index"
-            align="center"
-            :width="item == '指标名称' ? '200px' : ''"
-            show-overflow-tooltip
-          >
-            <template #default="scope">
-              <span>
-                {{
-                  scope.row[index] || scope.row[index] == 0
-                    ? scope.row[index]
-                    : "--"
-                }}
-              </span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="echarts">
-        <div class="chart-wrapper">
-          <BarCharts :list="list" width="100%" height="100%"></BarCharts>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import BarCharts from "./components/barCharts.vue";
-import { companys } from "@/api/curveAnalyse";
-import { GetStationByCompany } from "@/api/factoryMonitor/index.js";
-import { getMonthElectricAnalyse } from "@/api/monthlyPerformanceAnalysis.js";
-export default {
-  name: "monthElectricAnalyse",
-  components: {
-    // ChartColumnar,
-    // Panel,
-    BarCharts,
-  },
-  data() {
-    return {
-      loading: false,
-      list: [],
-      barList: [],
-      tableData: [],
-      tableHead: [
-        "指标名称",
-        "一月",
-        "二月",
-        "三月",
-        "四月",
-        "五月",
-        "六月",
-        "七月",
-        "八月",
-        "九月",
-        "十月",
-        "十一月",
-        "十二月",
-        "合计",
-      ],
-      company: "",
-      companyOptions: [],
-      station: "",
-      stationOptions: [],
-      year: "2023",
-      selectValue: "风电电量分析",
-      headers: [
-        "计划电量",
-        "预测电量",
-        "实发电量",
-        "当月占比(实发/计划)",
-        "全年占比(实发/计划)",
-        "短期准确率",
-      ],
-    };
-  },
-  watch: {},
-  created() {
-    this.initialization();
-  },
-  methods: {
-    initialization() {
-      companys().then(({ data: res }) => {
-        if (res.data) {
-          this.companyOptions = res.data;
-          this.company = res.data[0].id;
-          this.getStation();
-        }
-      });
-    },
-    companyChanged() {
-      this.station = "";
-      this.getStation();
-    },
-    getStation() {
-      GetStationByCompany({ companyids: this.company, type: 0 }).then(
-        ({ data: res, code }) => {
-          if (res.code == 200) {
-            this.stationOptions = res.data;
-            this.station = this.stationOptions[0].id;
-            this.getDatas();
-          }
-        }
-      );
-    },
-    getDatas() {
-      this.loading = true;
-      getMonthElectricAnalyse({ wpId: this.station, year: this.year }).then(
-        ({ data, code }) => {
-          if (code == 200) {
-            //合计列
-            let hj = [
-              data.bnjhdlhj,
-              data.rfdlychj,
-              data.bnsjdlhj,
-              null,
-              data.qnzbhj + "%",
-              null,
-            ];
-            //处理纵向表格数据
-            let resData = JSON.parse(JSON.stringify(data.value));
-            // 数组按矩阵思路, 变成转置矩阵
-            let matrixData = resData.map((row) => {
-              let arr = [];
-              for (let key in row) {
-                if (key != "hours") {
-                  if (key.includes("zb") || key.includes("zql")) {
-                    arr.push(row[key] ? row[key] + "%" : row[key]);
-                  } else {
-                    arr.push(row[key]);
-                  }
-                }
-              }
-              return arr;
-            });
-            // 加入标题拼接最终的数据
-            this.tableData = matrixData[0].map((col, i) => {
-              let newArr = new Array(
-                this.tableHead.length - matrixData.length - 2
-              ).fill(null);
-              let array = [
-                this.headers[i],
-                ...matrixData.map((row) => {
-                  return row[i];
-                }),
-                ...newArr,
-                hj[i],
-              ];
-              return array;
-            });
-
-            //处理图表数据
-            let list = [
-              {
-                name: "计划电量",
-                data: resData.map((ele) => ele.jhdl),
-                color: "#4B55AE",
-              },
-              {
-                name: "预测电量",
-                data: resData.map((ele) => ele.rfdlyc),
-                color: "#FF8300",
-              },
-              {
-                name: "实发电量",
-                data: resData.map((ele) => ele.sjdl),
-                color: "#05BB4C",
-              },
-            ];
-            this.list = list;
-            this.loading = false;
-          }
-        }
-      );
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.parcel-box {
-  padding: 0 20px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-
-  .search {
-    display: flex;
-    flex-direction: row;
-    padding: 15px 0;
-    align-items: center;
-    justify-content: space-between;
-
-    .search-left {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    .search-right {
-      position: relative;
-
-      .select-back {
-        position: absolute;
-        right: 5px;
-        top: 0px;
-        z-index: 0;
-      }
-
-      .title-select {
-        z-index: 2;
-      }
-    }
-
-    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;
-      }
-    }
-  }
-  .parcel-content {
-    width: 100%;
-    height: calc(100% - 88px);
-    // position: relative;
-    background: url("~@/assets/imgs/glycfx-bg1.png") no-repeat;
-    background-size: 100% 100%;
-    background-position: center;
-    img {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    .line {
-      .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;
-        }
-      }
-    }
-
-    .echarts {
-      height: calc(100% - 305px - 45px);
-      padding: 0 20px;
-      .chart-wrapper {
-        height: 100%;
-        width: 100%;
-      }
-    }
-    .table-wrapper {
-      height: 305px;
-      width: 100%;
-      padding: 0 20px;
-      padding-top: 10px;
-    }
-  }
-}
-</style>

src/views/economicsOperation/monthElectricAnalyseAll/components/lineCharts.vue

@@ -1,256 +0,0 @@
-<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: "yfdl-multiple-bar-chart",
-  componentName: "yfdl-multiple-bar-chart",
-  props: {
-    width: {
-      type: String,
-      default: "100%",
-    },
-    height: {
-      type: String,
-      default: "100%",
-    },
-
-    // 传入数据
-    list: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      id: "",
-      chart: null,
-      firstAnimation: true,
-    };
-  },
-  computed: {
-    xdata() {
-      return [
-        "一月",
-        "二月",
-        "三月",
-        "四月",
-        "五月",
-        "六月",
-        "七月",
-        "八月",
-        "九月",
-        "十月",
-        "十一月",
-        "十二月",
-      ];
-    },
-    series() {
-      let result = [];
-      if (this.list && this.list.length > 0) {
-        this.list.forEach((listItem, index) => {
-          let seriesItem = {
-            yAxisIndex: 0,
-            name: listItem?.name,
-            type: "bar",
-            data: listItem?.data,
-            itemStyle: {
-              color: listItem.color,
-            },
-            barWidth: "20%",
-          };
-          //   if (index == 3) {
-          //     seriesItem = {
-          //       yAxisIndex: 1,
-          //       name: listItem?.name,
-          //       type: "line",
-          //       smooth: true,
-          //       data: listItem?.data,
-          //       itemStyle: {
-          //         color: listItem.color,
-          //       },
-          //     };
-          //   }
-
-          result.push(seriesItem);
-        });
-      }
-      return result;
-    },
-  },
-  methods: {
-    resize() {
-      this.initChart();
-    },
-    initChart() {
-      let chart = echarts.init(this.$el);
-      let option = {
-        tooltip: {
-          trigger: "axis",
-          backgroundColor: "rgba(5, 187, 76,0.35)",
-          borderColor: "#05bb4c",
-          formatter: function (params) {
-            var htmlStr = `<div style='margin-bottom:5px'>${params[0].axisValue}</div>`;
-            for (var i = 0; i < params.length; i++) {
-              htmlStr += `<div style='margin-bottom:2px'>`;
-              var param = params[i];
-              var seriesName = param.seriesName; //图例名称
-              var value = param.value; //y轴值
-              var data = param.data; //单位判断code
-              var mark = param.marker; //点
-              var unit = `<span style='font-size:14px'>`;
-
-              htmlStr += mark; //一个点
-              htmlStr += `${seriesName} : ${
-                value != null ? value + unit + ` 万kWh</span>` : "--"
-              }`; //圆点后面显示的文本
-              htmlStr += "</div>";
-            }
-            return htmlStr;
-          },
-          padding: [10, 10, 3, 10],
-          textStyle: {
-            color: "#fff",
-            fontSize: 16,
-          },
-          axisPointer: {
-            type: "shadow",
-            shadowStyle: {
-              color: "rgba(105,105,105, .05)",
-              width: "1",
-            },
-          },
-        },
-        legend: {
-          show: true,
-          data: this.list?.map((i) => i?.name),
-          right: 56,
-          icon: "ract",
-          itemWidth: 8,
-          itemHeight: 8,
-          inactiveColor: partten.getColor("gray"),
-          textStyle: {
-            fontSize: 12,
-            color: partten.getColor("grayl"),
-          },
-        },
-        grid: {
-          top: "10%",
-          left: "2%",
-          right: "4%",
-          bottom: "5%",
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: this?.xdata,
-            nameLocation: "center",
-            axisPointer: {
-              type: "shadow",
-            },
-            axisLine: {
-              lineStyle: {
-                color: "#93989A",
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                fontSize: 14,
-                color: "#93989A",
-              },
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: "value",
-            name: "单位：万千瓦时",
-            nameTextStyle: {
-              color: "#93989A",
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "rgba(96,103,105,0.3)",
-                type: "dashed",
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                fontSize: 14,
-                color: "#93989A",
-              },
-            },
-          },
-          //   {
-          //     type: "value",
-          //     name: "单位：W/m²",
-          //     nameTextStyle: {
-          //       color: "#93989A",
-          //     },
-          //     splitLine: {
-          //       show: false,
-          //     },
-          //     axisLabel: {
-          //       textStyle: {
-          //         fontSize: 14,
-          //         color: "#93989A",
-          //       },
-          //     },
-          //   },
-        ],
-        series: this?.series,
-      };
-      chart.clear();
-      chart.setOption(option);
-
-      this.resize = function () {
-        chart.resize();
-      };
-
-      window.addEventListener("resize", this.resize);
-    },
-  },
-  created() {
-    this.$nextTick(() => {
-      this.id = "pie-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/monthElectricAnalyseAll/index.vue

@@ -1,414 +0,0 @@
-<template>
-  <div class="parcel-box">
-    <div class="search">
-      <div class="search-left">
-        <el-select
-          size="mini"
-          v-model="station"
-          placeholder="请选择"
-          style="margin-left: 15px"
-          @change="stationChanged"
-        >
-          <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="year"
-          v-model="year"
-          value-format="YYYY"
-          placeholder="请选择"
-          style="margin-left: 15px"
-          popper-class="date-select"
-        >
-        </el-date-picker>
-        <el-radio-group v-model="filter" size="mini" >
-          <el-radio label="1"> 同比 </el-radio>
-          <el-radio label="2"> 环比 </el-radio>
-        </el-radio-group>
-
-        <el-button round size="mini" class="searchColor" @click="getDatas"
-          >搜索</el-button
-        >
-      </div>
-    </div>
-    <div
-      class="parcel-content"
-      v-loading="loading"
-      element-loading-background="rgba(4, 12, 11, 0.8)"
-    >
-      <!-- <img src="@/assets/imgs/glycfx-bg1.png" alt="" /> -->
-      <div class="line clearfix">
-        <div class="leftContent">
-          <span>{{ selectValue }}</span>
-        </div>
-      </div>
-      <div class="table-wrapper">
-        <el-table
-          :data="tableData"
-          size="mini"
-          stripe
-          width="100%"
-          height="100%"
-        >
-          <el-table-column align="center" label="指标名称" width="128">
-            <template #default="{ row }">
-              {{ row[0] }}
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-for="(item, index) in tableHead.slice(1, 13)"
-            :label="item.title"
-            :key="index"
-            align="center"
-            show-overflow-tooltip
-          >
-           
-            <el-table-column
-              label="本月"
-              width="66"
-              v-if="filter == 1 || filter == 2"
-              align="center"
-              show-overflow-tooltip
-            >
-              <template #default="scope">
-                <span>
-                  {{
-                    scope.row[index + 1][0] || scope.row[index + 1][0] == 0
-                      ? scope.row[index + 1][0]
-                      : "--"
-                  }}
-                </span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="同比"
-              width="66"
-              v-if="filter == 1"
-              align="center"
-              show-overflow-tooltip
-            >
-              <template #default="scope">
-                <span>
-                  {{
-                    scope.row[index + 1][1] || scope.row[index + 1][1] == 0
-                      ? scope.row[index + 1][1]
-                      : "--"
-                  }}
-                </span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="环比"
-              width="66"
-              v-if="filter == 2"
-              align="center"
-              show-overflow-tooltip
-            >
-              <template #default="scope">
-                <span>
-                  {{
-                    scope.row[index + 1][2] || scope.row[index + 1][2] == 0
-                      ? scope.row[index + 1][2]
-                      : "--"
-                  }}
-                </span>
-              </template>
-            </el-table-column>
-          </el-table-column>
-          <el-table-column
-            align="center"
-            label="合计"
-            width="76"
-            show-overflow-tooltip
-          >
-            <template #default="{ row }">
-              {{ row[13] }}
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="echarts">
-        <div class="chart-wrapper">
-          <LineCharts :list="list" width="100%" height="100%" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import LineCharts from "./components/lineCharts.vue";
-// import { companys } from "@/api/curveAnalyse";
-// import { GetStationByCompany } from "@/api/factoryMonitor/index.js";
-import {
-  getOwnDemand,
-  getAllStation,
-} from "@/api/monthlyPerformanceAnalysis.js";
-export default {
-  name: "monthElectricAnalyseAll",
-  components: {
-    // ChartColumnar,
-    // Panel,
-    LineCharts,
-  },
-  data() {
-    return {
-      loading: false,
-      list: [],
-      barList: [],
-      tableData: [],
-      tableHead: [
-        { title: "指标名称", children: [] },
-        { title: "一月", children: ["本月", "同比", "环比"] },
-        { title: "二月", children: ["本月", "同比", "环比"] },
-        { title: "三月", children: ["本月", "同比", "环比"] },
-        { title: "四月", children: ["本月", "同比", "环比"] },
-        { title: "五月", children: ["本月", "同比", "环比"] },
-        { title: "六月", children: ["本月", "同比", "环比"] },
-        { title: "七月", children: ["本月", "同比", "环比"] },
-        { title: "八月", children: ["本月", "同比", "环比"] },
-        { title: "九月", children: ["本月", "同比", "环比"] },
-        { title: "十月", children: ["本月", "同比", "环比"] },
-        { title: "十一月", children: ["本月", "同比", "环比"] },
-        { title: "十二月", children: ["本月", "同比", "环比"] },
-        { title: "合计", children: [] },
-      ],
-
-      company: "",
-      companyOptions: [],
-      station: "",
-      stationOptions: [],
-      year: "2023",
-      selectValue: "综合厂用电量分析",
-      headers: [
-        "综合厂用电量",
-        "发电量",
-        "上网电量",
-        "购网电量",
-        "综合厂用电率(%)",
-      ],
-      filter: "1",
-    };
-  },
-  watch: {},
-  created() {
-    this.getStation();
-  },
-  methods: {
-    getStation() {
-      getAllStation().then(({ data: res, code }) => {
-        if (code == 200) {
-          this.stationOptions = res;
-          this.station = this.stationOptions[0].id;
-          this.getDatas();
-        }
-      });
-    },
-    getDatas() {
-      this.loading = true;
-      getOwnDemand({ wpId: this.station, year: this.year }).then(
-        ({ data, code }) => {
-          if (code == 200) {
-            //合计列
-            let hj = [
-              data.zhcydlsum,
-              data.sjdlsum,
-              data.swdlsum,
-              data.gwdlsum,
-              data.zhcydllsum + "%",
-            ];
-            //处理纵向表格数据
-            let resData = JSON.parse(JSON.stringify(data.value));
-            let subKey = [
-              ["zhcydl", "zhcydltb", "zhcydlhb"],
-              ["sjdl", "sjdltb", "sjdlhb"],
-              ["swdl", "swdltb", "swdlhb"],
-              ["gwdl", "gwdltb", "gwdlhb"],
-              ["zhcydll", "zhcydlltb", "zhcydllhb"],
-            ];
-            // 数组按矩阵思路, 变成转置矩阵
-            let matrixData = resData.map((row) => {
-              let arr = [];
-              for (var i = 0; i <= 4; i++) {
-                let subArr = [];
-                subKey[i].forEach((sub) => {
-                  subArr.push(row[sub]);
-                });
-                arr.push(subArr);
-              }
-              return arr;
-            });
-            // 加入标题拼接最终的数据
-            this.tableData = matrixData[0].map((col, i) => {
-              let newArr = new Array(
-                this.tableHead.length - matrixData.length - 2
-              ).fill(null);
-              let array = [
-                this.headers[i],
-                ...matrixData.map((row) => {
-                  return row[i];
-                }),
-                ...newArr,
-                hj[i],
-              ];
-              return array;
-            });
-            //   .map((item) => {
-            //     item[item.length - 1] = [item[item.length - 1]];
-            //     return item;
-            //   });
-
-            //处理图表数据
-            let list = [
-              {
-                name: "综合厂用电量",
-                data: resData.map((ele) => ele.zhcydl),
-                color: "#4B55AE",
-              },
-              {
-                name: "实发电量",
-                data: resData.map((ele) => ele.sjdl),
-                color: "#05BB4C",
-              },
-              {
-                name: "上网电量",
-                data: resData.map((ele) => ele.swdl),
-                color: "#21a4f7",
-              },
-              {
-                name: "购网电量",
-                data: resData.map((ele) => ele.gwdl),
-                color: "#FF8300",
-              },
-            ];
-            this.list = list;
-            this.loading = false;
-          }
-        }
-      );
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.parcel-box {
-  padding: 0 20px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-
-  .search {
-    display: flex;
-    flex-direction: row;
-    padding: 15px 0;
-    align-items: center;
-    justify-content: space-between;
-
-    .search-left {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    .search-right {
-      position: relative;
-
-      .select-back {
-        position: absolute;
-        right: 5px;
-        top: 0px;
-        z-index: 0;
-      }
-
-      .title-select {
-        z-index: 2;
-      }
-    }
-
-    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;
-      }
-    }
-  }
-  .parcel-content {
-    width: 100%;
-    height: calc(100% - 88px);
-    // position: relative;
-    background: url("~@/assets/imgs/glycfx-bg1.png") no-repeat;
-    background-size: 100% 100%;
-    background-position: center;
-    img {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    .line {
-      .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;
-        }
-      }
-    }
-
-    .echarts {
-      height: calc(100% - 305px - 45px);
-      padding: 0 20px;
-      .chart-wrapper {
-        height: 100%;
-        width: 100%;
-      }
-    }
-    .table-wrapper {
-      height: 305px;
-      width: 100%;
-      padding: 0 20px;
-      padding-top: 10px;
-    }
-  }
-}
-.el-radio-group::v-deep {
-  margin-left: 15px;
-  display: flex;
-  align-items: center;
-  .el-radio__inner:hover {
-    border-color: #05bb4c;
-  }
-}
-.el-table--border::v-deep {
-  th.el-table__cell {
-    border-bottom: 1px solid #000 !important;
-  }
-}
-</style>

src/views/economicsOperation/monthElectricAnalyseGf/components/lineCharts.vue

@@ -1,250 +0,0 @@
-<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: "yfdl-multiple-bar-chart",
-  componentName: "yfdl-multiple-bar-chart",
-  props: {
-    width: {
-      type: String,
-      default: "100%",
-    },
-    height: {
-      type: String,
-      default: "100%",
-    },
-
-    // 传入数据
-    list: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      id: "",
-      chart: null,
-      firstAnimation: true,
-    };
-  },
-  computed: {
-    xdata() {
-      return [
-        "一月",
-        "二月",
-        "三月",
-        "四月",
-        "五月",
-        "六月",
-        "七月",
-        "八月",
-        "九月",
-        "十月",
-        "十一月",
-        "十二月",
-      ];
-    },
-    series() {
-      let result = [];
-      if (this.list && this.list.length > 0) {
-        this.list.forEach((listItem, index) => {
-          let seriesItem = {
-            yAxisIndex: 0,
-            name: listItem?.name,
-            type: "bar",
-            data: listItem?.data,
-            itemStyle: {
-              color: listItem.color,
-            },
-            barWidth: "20%",
-          };
-          if (index == 3) {
-            seriesItem = {
-              yAxisIndex: 1,
-              name: listItem?.name,
-              type: "line",
-              smooth: true,
-              data: listItem?.data,
-              itemStyle: {
-                color: listItem.color,
-              },
-            };
-          }
-
-          result.push(seriesItem);
-        });
-      }
-      return result;
-    },
-  },
-  methods: {
-    resize() {
-      this.initChart();
-    },
-    initChart() {
-      let chart = echarts.init(this.$el);
-      let option = {
-        tooltip: {
-          trigger: "axis",
-          backgroundColor: "rgba(5, 187, 76,0.35)",
-          borderColor: "#05bb4c",
-          formatter: function (params) {
-            var htmlStr = `<div style='margin-bottom:5px'>${params[0].axisValue}</div>`;
-            for (var i = 0; i < params.length; i++) {
-              htmlStr += `<div style='margin-bottom:2px'>`;
-              var param = params[i];
-              var seriesName = param.seriesName; //图例名称
-              var value = param.value; //y轴值
-              var data = param.data; //单位判断code
-              var mark = param.marker; //点
-              var unit = `<span style='font-size:14px'>`;
-
-              htmlStr += mark; //一个点
-              htmlStr += `${seriesName} : ${
-                value != null ? value + unit + ` 万kWh</span>` : "--"
-              }`; //圆点后面显示的文本
-              htmlStr += "</div>";
-            }
-            return htmlStr;
-          },
-          padding: [10, 10, 3, 10],
-          textStyle: {
-            color: "#fff",
-            fontSize: 16,
-          },
-          axisPointer: {
-            type: "shadow",
-            shadowStyle: {
-              color: "rgba(105,105,105, .05)",
-              width: "1",
-            },
-          },
-        },
-        legend: {
-          show: true,
-          data: this.list.map((i) => i?.name),
-          right: 56,
-          icon: "ract",
-          itemWidth: 8,
-          itemHeight: 8,
-          inactiveColor: partten.getColor("gray"),
-          textStyle: {
-            fontSize: 12,
-            color: partten.getColor("grayl"),
-          },
-        },
-        grid: {
-          top: "10%",
-          left: "2%",
-          right: "4%",
-          bottom: "5%",
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: this.xdata,
-            nameLocation: "center",
-            axisPointer: {
-              type: "shadow",
-            },
-            axisLine: {
-              lineStyle: {
-                color: "#93989A",
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                fontSize: 14,
-                color: "#93989A",
-              },
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: "value",
-            name: "单位：万千瓦时",
-            nameTextStyle: {
-              color: "#93989A",
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "rgba(96,103,105,0.3)",
-                type: "dashed",
-              },
-            },
-            axisLabel: {
-              textStyle: {
-                fontSize: 14,
-                color: "#93989A",
-              },
-            },
-          },
-          {
-            type: "value",
-            name: "单位：W/m²",
-            nameTextStyle: {
-              color: "#93989A",
-            },
-            splitLine: {
-              show: false,
-            },
-            axisLabel: {
-              textStyle: {
-                fontSize: 14,
-                color: "#93989A",
-              },
-            },
-          },
-        ],
-        series: this.series,
-      };
-      chart.clear();
-      chart.setOption(option);
-
-      this.resize = function () {
-        chart.resize();
-      };
-
-      window.addEventListener("resize", this.resize);
-    },
-  },
-  created() {
-    this.$nextTick(() => {
-      this.id = "pie-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);
-  },
-};
-</script>
-
-<style lang="less">
-.chart {
-  width: 100%;
-  height: 100%;
-  display: inline-block;
-}
-</style>

src/views/economicsOperation/monthElectricAnalyseGf/index.vue

@@ -1,358 +0,0 @@
-<template>
-  <div class="parcel-box">
-    <div class="search">
-      <div class="search-left">
-        <el-select
-          size="mini"
-          v-model="company"
-          placeholder="请选择"
-          @change="companyChanged"
-        >
-          <el-option
-            v-for="item in companyOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-        <el-select
-          size="mini"
-          v-model="station"
-          placeholder="请选择"
-          style="margin-left: 15px"
-          @change="stationChanged"
-        >
-          <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="year"
-          v-model="year"
-          value-format="YYYY"
-          placeholder="请选择"
-          style="margin-left: 15px"
-          popper-class="date-select"
-        >
-        </el-date-picker>
-        <el-button round size="mini" class="searchColor" @click="getDatas"
-          >搜索</el-button
-        >
-      </div>
-    </div>
-    <div
-      class="parcel-content"
-      v-loading="loading"
-      element-loading-background="rgba(4, 12, 11, 0.8)"
-    >
-      <!-- <img src="@/assets/imgs/glycfx-bg1.png" alt="" /> -->
-      <div class="line clearfix">
-        <div class="leftContent">
-          <span>{{ selectValue }}</span>
-        </div>
-      </div>
-      <div class="table-wrapper">
-        <el-table
-          :data="tableData"
-          size="mini"
-          stripe
-          width="100%"
-          height="100%"
-        >
-          <el-table-column
-            v-for="(item, index) in tableHead"
-            :label="item"
-            :key="index"
-            align="center"
-            :width="item == '指标名称' ? '200px' : ''"
-            show-overflow-tooltip
-          >
-            <template #default="scope">
-              <span>
-                {{
-                  scope.row[index] || scope.row[index] == 0
-                    ? scope.row[index]
-                    : "--"
-                }}
-              </span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="echarts">
-        <div class="chart-wrapper">
-          <LineCharts :list="list" width="100%" height="100%" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import LineCharts from "./components/lineCharts.vue";
-import { companys } from "@/api/curveAnalyse";
-import { GetStationByCompany } from "@/api/factoryMonitor/index.js";
-import { getMonthElectricAnalyseGf } from "@/api/monthlyPerformanceAnalysis.js";
-export default {
-  name: "monthElectricAnalyseGf",
-  components: {
-    // ChartColumnar,
-    // Panel,
-    LineCharts,
-  },
-  data() {
-    return {
-      loading: false,
-      list: [],
-      barList: [],
-      tableData: [],
-      tableHead: [
-        "指标名称",
-        "一月",
-        "二月",
-        "三月",
-        "四月",
-        "五月",
-        "六月",
-        "七月",
-        "八月",
-        "九月",
-        "十月",
-        "十一月",
-        "十二月",
-        "合计",
-      ],
-      company: "",
-      companyOptions: [],
-      station: "",
-      stationOptions: [],
-      year: "2023",
-      selectValue: "光伏电量分析",
-      headers: [
-        "日照强度(W/m²)",
-        "实发电量",
-        "计划电量",
-        "计划完成情况(%)",
-        "可研电量",
-        "可研完成情况(%)",
-        "等效发电小时(h)",
-      ],
-    };
-  },
-  watch: {},
-  created() {
-    this.initialization();
-  },
-  methods: {
-    initialization() {
-      companys().then(({ data: res }) => {
-        if (res.data) {
-          this.companyOptions = [res.data[1]];
-          this.company = res.data[1].id;
-          this.getStation();
-        }
-      });
-    },
-    companyChanged() {
-      this.station = "";
-      this.getStation();
-    },
-    getStation() {
-      GetStationByCompany({ companyids: this.company, type: -2 }).then(
-        ({ data: res, code }) => {
-          if (res.code == 200) {
-            this.stationOptions = res.data;
-            this.station = this.stationOptions[0].id;
-            this.getDatas();
-          }
-        }
-      );
-    },
-    getDatas() {
-      this.loading = true;
-      getMonthElectricAnalyseGf({ wpId: this.station, year: this.year }).then(
-        ({ data, code }) => {
-          if (code == 200) {
-            //合计列
-            let hj = [
-              data.rzqdhj,
-              data.sjdlhj,
-              data.jhdlhj,
-              data.wcqkhj + "%",
-              data.kydlhj,
-              data.kywcqkhj + "%",
-              data.dxxsshj,
-            ];
-            //处理纵向表格数据
-            let resData = JSON.parse(JSON.stringify(data.value));
-            // 数组按矩阵思路, 变成转置矩阵
-            let matrixData = resData.map((row) => {
-              let arr = [];
-              for (let key in row) {
-                if (key != "hours") {
-                  if (key == "wcqk" || key == "kywcqk") {
-                    arr.push(row[key] ? row[key] + "%" : row[key]);
-                  } else {
-                    arr.push(row[key]);
-                  }
-                }
-              }
-              return arr;
-            });
-            // 加入标题拼接最终的数据
-            this.tableData = matrixData[0].map((col, i) => {
-              let newArr = new Array(
-                this.tableHead.length - matrixData.length - 2
-              ).fill(null);
-              let array = [
-                this.headers[i],
-                ...matrixData.map((row) => {
-                  return row[i];
-                }),
-                ...newArr,
-                hj[i],
-              ];
-              return array;
-            });
-
-            //处理图表数据
-            let list = [
-              {
-                name: "计划电量",
-                data: resData.map((ele) => ele.jhdl),
-                color: "#4B55AE",
-              },
-              {
-                name: "实发电量",
-                data: resData.map((ele) => ele.sjdl),
-                color: "#05BB4C",
-              },
-              {
-                name: "可研电量",
-                data: resData.map((ele) => ele.sjdl),
-                color: "#21a4f7",
-              },
-              {
-                name: "日照强度",
-                data: resData.map((ele) => ele.rzqd),
-                color: "#FF8300",
-              },
-            ];
-            this.list = list;
-            this.loading = false;
-          }
-        }
-      );
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.parcel-box {
-  padding: 0 20px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-
-  .search {
-    display: flex;
-    flex-direction: row;
-    padding: 15px 0;
-    align-items: center;
-    justify-content: space-between;
-
-    .search-left {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    .search-right {
-      position: relative;
-
-      .select-back {
-        position: absolute;
-        right: 5px;
-        top: 0px;
-        z-index: 0;
-      }
-
-      .title-select {
-        z-index: 2;
-      }
-    }
-
-    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;
-      }
-    }
-  }
-  .parcel-content {
-    width: 100%;
-    height: calc(100% - 88px);
-    // position: relative;
-    background: url("~@/assets/imgs/glycfx-bg1.png") no-repeat;
-    background-size: 100% 100%;
-    background-position: center;
-    img {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    .line {
-      .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;
-        }
-      }
-    }
-
-    .echarts {
-      height: calc(100% - 310px - 45px);
-      padding: 0 20px;
-      .chart-wrapper {
-        height: 100%;
-        width: 100%;
-      }
-    }
-    .table-wrapper {
-      height: 310px;
-      width: 100%;
-      padding: 0 20px;
-      padding-top: 10px;
-    }
-  }
-}
-</style>

src/views/economicsOperation/stationAnalyse/electricAnalyse/components/barCharts.vue

@@ -104,13 +104,15 @@ export default {
               var param = params[i];
               var seriesName = param.seriesName; //图例名称
               var value = param.value; //y轴值
-              var data = param.data; //单位判断code
+              var seriesType = param.seriesType; //单位判断code
               var mark = param.marker; //点
-              var unit = `<span style='font-size:14px'>`;
+              var unit = `<span style='font-size:14px'>${
+                seriesType == "line" ? "W/m²" : "万kWh"
+              }</span>`;
 
               htmlStr += mark; //一个点
               htmlStr += `${seriesName} : ${
-                value != null ? value + unit + ` 万kWh</span>` : "--"
+                value != null ? value + unit : "--"
               }`; //圆点后面显示的文本
               htmlStr += "</div>";
             }

src/views/stateMonitor/focus/allBoosterStation.vue

@@ -1,736 +0,0 @@
-<template>
-  <div class="bodyy">
-    <div
-        type="border-card"
-        style="width: 100%; height: 100%;"
-    >
-      <div
-          class="syzDetailsPaneItem"
-          v-for="(item, index) in syzArray"
-          :key="index"
-          :name="item.id"
-      >
-        <template>
-                <span v-if="pageshowMode % 2">
-                <el-badge is-dot v-if="item.isWarning === '1'">
-                    <span>{{ item.name }}</span>
-                </el-badge>
-                <span v-else>{{ item.name }}</span>
-                </span>
-          <span v-else>
-                <el-badge is-dot v-if="item.isWarning === '1'">
-                    <span>{{ item.name }}</span>
-                </el-badge>
-                <span v-else>{{ item.name }}</span>
-                </span>
-        </template>
-        <div class="buttonGroup" v-if="item.id === 'all'">
-          <el-button-group>
-            <el-button type="plain" size="small" @click="changeHeight('D')"
-                       :class="allHeight === 'D' ? 'showSty' : ''">大图标
-            </el-button>
-            <el-button type="plain" size="small" @click="changeHeight('Z')"
-                       :class="allHeight === 'Z' ? 'showSty' : ''">中图标
-            </el-button>
-            <el-button type="plain" size="small" @click="changeHeight('X')"
-                       :class="allHeight === 'X' ? 'showSty' : ''">小图标
-            </el-button>
-          </el-button-group>
-        </div>
-        <div v-if="item.id === 'all'" :style="allpageHeight"
-             style="width: 100%;height:100%;display: inline-block;overflow-y:auto">
-          <div v-for="(item, index) in allSvgMsgData" :key="index" :style="getStyle(allHeight)">
-            <div class="showAllSvgMsg" @dblclick="dblgetSvgDataFn(item.wpsid)" :class="getWarnstyle(item)">
-              <div class="showAllSvgMsg_top" v-html="item.msg"></div>
-              <div class="showAllSvgMsg_bot">
-                <span>{{ item.name }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-import api from "@api/stateMonitor/index.js";
-
-export default {
-  props: {
-    activeTabStation: {
-      type: String,
-      default: "",
-    },
-  },
-  components: {
-  },
-  data() {
-    return {
-      activeTab: this.$store.state.activeTab,
-      svgVisible: true,
-      audio: null,
-      timmer: null,
-      syzArray: [],
-      pageshowMode: 0,
-      svgMsg: '',
-      loading: false,
-      allTagidArr: [],
-      starTimer: null,
-      allTagsMS: {},
-      allrefreshData: {},
-      allConditions: {},
-      onlytag: {},
-      allSvgMsgData: [],
-      allHeight: 'D',
-      allWarnData: [],
-      starTimerWarn: null,
-      numm: 0,
-      stationSort: []
-    };
-  },
-  computed: {
-    pageHeight() {
-      return {
-        'height': document.documentElement.clientHeight - 60 + 'px'
-      }
-    },
-    allpageHeight() {
-      return {
-        'height': document.documentElement.clientHeight - 200 + 'px'
-      }
-    },
-  },
-  created() {
-    this.opened()
-  },
-  updated() {
-  },
-  methods: {
-    // 获取升压站报警数据
-    getSyzWarnData() {
-      api.alarmFault().then((res) => {
-        if (res && res.data) {
-          let datas = res.data
-          let arr = []
-          datas.forEach(it => {
-            if (it.rank === '5' && it.category1 === 'SYZ') {
-              arr.push(it.category2)
-            }
-          })
-          this.allWarnData = this.unique(arr)
-        }
-      })
-    },
-    unique(arr) {
-      let newArr = []
-      for (let i = 0; i < arr.length; i++) {
-        if (newArr.indexOf(arr[i]) === -1) {
-          newArr.push(arr[i])
-        }
-      }
-      return newArr
-    },
-    getWarnstyle(item) {
-      let showWarn = ''
-      this.allWarnData.forEach(it => {
-        if (it === item.id) {
-          showWarn = 'warningMaskNew'
-        }
-      })
-      return showWarn
-    },
-    getStyle(type) {
-      let num = null
-      let num1 = null
-      let num2 = null
-      if (type === 'D') {
-        return {
-          'width': '33.3%',
-          'float': 'left',
-          'height': '400px'
-        }
-      } else if (type === 'Z') {
-        num = parseInt(this.allSvgMsgData.length / 4)
-        num1 = this.allSvgMsgData.length % 4
-        num2 = num1 > 0 ? num + 1 : num
-        return {
-          'width': '25%',
-          'float': 'left',
-          'height': (document.documentElement.clientHeight - 100) / num2 + 'px'
-        }
-      } else {
-        num = parseInt(this.allSvgMsgData.length / 5)
-        num1 = this.allSvgMsgData.length % 5
-        num2 = num1 > 0 ? num + 1 : num
-        return {
-          'width': '20%',
-          'float': 'left',
-          'height': (document.documentElement.clientHeight - 200) / num2 + 'px'
-        }
-      }
-
-    },
-    changeHeight(type) {
-      this.allHeight = type
-    },
-    getAllStationtab() {
-      let obj = {
-        id: 'all',
-        name: '全部'
-      }
-      api.getAllStationTab().then((res) => {
-        if (res && res.data) {
-          res.data.unshift(obj)
-          this.syzArray = res.data
-          this.activeTab = res.data[0].id
-          if (this.activeTab === 'all') {
-            let allMsg = res.data
-            this.allSvgMsgData = []
-            this.stationSort = []
-            allMsg.forEach(it => {
-              if (it.id !== 'all') {
-                this.stationSort.push(it.name)
-                this.getallSvgDataFn(it.id, it.name,it.windpowerstationId)
-              }
-            })
-            // window.sessionStorage.setItem('allSvgData', [])
-            console.log('allSvgMsgData', this.allSvgMsgData)
-            // console.log('stationSort', this.stationSort)
-            // console.log('allMsg', allMsg)
-          }
-
-        }
-      })
-    },
-    // 获取所有升压站数据
-    getallSvgDataFn(id, name,wpsid) {
-      let params = {
-        id: id
-      }
-      api.getSvgData(params).then((res) => {
-        let str = ''
-        // str = res.data.substring(res.data.indexOf('<svg'))
-        str = res
-        str = str.replace('<svg', '<svg viewBox="0 -100 1900 1260"')
-        let obj = {
-          id: id,
-          name: name,
-          wpsid: wpsid,
-          msg: str
-        }
-        this.allSvgMsgData.push(obj)
-        if (this.allSvgMsgData.length === this.stationSort.length) {
-          let sortArr = []
-          this.stationSort.forEach(itc => {
-            this.allSvgMsgData.forEach(itb => {
-              if (itc === itb.name) {
-                sortArr.push(itb)
-              }
-            })
-          })
-          this.allSvgMsgData = sortArr
-        }
-      })
-    },
-    // 获取升压站数据
-    getSvgDataFn(val) {
-      this.svgMsg = ''
-      this.loading = true
-      let params = {
-        id: val
-      }
-      api.getSvgData(params).then((res) => {
-        if (res && res.data) {
-          let str = ''
-          str = res.data.substring(res.data.indexOf('<svg'))
-          str = str.replace('<svg', '<svg viewBox="0 0 1900 1260"')
-          this.svgMsg = str
-          let html = document.getElementById('svg')
-          let svg1 = document.getElementsByTagName('svg')
-          this.$nextTick(() => {
-            if (svg1) {
-              let allTags = []
-              let allTagsxc = []
-              let status = ['g', 'text', 'rect', 'line', 'polyline', 'circle', 'ellipse', 'polygon']
-              status.forEach(it => {
-                let allgs = []
-                allgs = document.querySelectorAll(it);
-                allTags.push(allgs)
-              })
-              allTags = [...allTags[0], ...allTags[1], ...allTags[2], ...allTags[3], ...allTags[4], ...allTags[5], ...allTags[6], ...allTags[7]]
-              allTags.forEach((it) => {
-                if (it.getAttribute("tagid")) {
-                  allTagsxc.push(it);
-                }
-              });
-              console.log('allTags222=>', allTagsxc)
-              this.allTagidArr = allTagsxc
-              this.getSvgInfo()
-            }
-            console.log('html111=>', html)
-          })
-          this.loading = false
-        }
-      })
-    },
-    // 获取触发器
-    getSvgInfo() {
-      let params = {
-        id: this.activeTab
-      }
-      api.getAllStationSvgInfo(params).then((res) => {
-        if (res && res.data) {
-          if (res.data.tags) {
-            let strarr = []
-            let str = ''
-            for (let i in res.data.tags) {
-              strarr.push(res.data.tags[i].tag)
-            }
-            str = strarr.join(',')
-            this.allTagsMS = res.data.tags
-            this.allConditions = res.data.conditions
-            // this.getrefreshData(str)
-            this.starTimer = setInterval(() => {
-              this.getrefreshData(str)
-            }, 1000)
-          }
-          console.log('SvgInfo333=>', res)
-        }
-      })
-    },
-    // 获取根盾数据
-    getrefreshData(val) {
-      api.refreshData(val).then((res) => {
-        if (res && res.data) {
-          this.allrefreshData = res.data
-          this.refreshDataFn(this.allTagsMS)
-        }
-        console.log('refreshData444=>', res)
-      })
-    },
-    // 刷新数据
-    refreshDataFn(datas) {
-      for (let it in datas) {
-        let tagId = datas[it];
-        this.toRefreshFn(it, tagId);
-      }
-    },
-    // 刷新自定义组件
-    toRefreshFn(val, data) {
-      var tag = this.allrefreshData[data.tag];
-      if (!tag) return;
-      this.allTagidArr.forEach(it => {
-        this.onlytag = {}
-        if (it.attributes.tagid) {
-          if (val === it.attributes.tagid.value) {
-            this.onlytag = it
-            if (it.nodeName === 'polyline') {
-              console.log('onlyTag666', this.onlytag)
-            }
-            if (it.nodeName !== 'text') {
-              if (this.onlytag.attributes.csid) {
-                let csid = this.onlytag.attributes.csid.value.split(';')
-                csid.forEach(ic => {
-                  if (ic) {
-                    if (!this.allConditions[ic].isBinding) {
-                      let num = parseInt(this.allConditions[ic].value) === 0 ? '0' : parseInt(this.allConditions[ic].value)
-                      if (num) {
-                        let num2 = tag.value === 0 ? '0' : tag.value
-                        if (num === num2) {
-                          this.onlytag.setAttribute(this.allConditions[ic].property, this.allConditions[ic].propertyValue)
-                          return
-                        }
-                      }
-                    } else {
-                      this.onlytag.setAttribute(this.allConditions[ic].property, this.allConditions[ic].propertyValue)
-                    }
-                  }
-                })
-              }
-            } else {
-              this.onlytag.textContent = tag.value.toFixed(2)
-            }
-          }
-        }
-      })
-    },
-    // '全部'界面双击事件
-    dblgetSvgDataFn(name) {
-      this.activeTab = name
-      this.getSvgDataFn(name)
-      this.$emit(
-          "refData",
-          name
-      );
-    },
-    // 初始化第一次报警并判断是否播放声音
-    initAlarm() {
-      let syzAlarmArray = this.$store.getters.syzAlarmArray;
-
-      const firstAlarmItem = syzAlarmArray.find((ele) => {
-        return !ele.isConfirm && ele.rank === this.$store.state.syzAlarmRank;
-      });
-
-      firstAlarmItem &&
-      this.audioPlay(this.getSound(firstAlarmItem.soundSource));
-
-      firstAlarmItem &&
-      this.$store.getters.syzAlarmArray.forEach((ele) => {
-        if (ele.stationId === firstAlarmItem.stationId) {
-          ele.isConfirm = true;
-        }
-      });
-
-      this.activeTab =
-          this.activeTabStation ||
-          firstAlarmItem?.stationId ||
-          syzAlarmArray.find((ele) => {
-            return ele.rank === this.$store.state.syzAlarmRank;
-          })?.stationId ||
-          this.$store.getters.syzArray[0].id;
-
-      syzAlarmArray.forEach((ele) => {
-        if (ele.stationId === firstAlarmItem?.stationId) {
-          ele.isConfirm = true;
-          this.clearWarningTag(ele.stationId);
-        } else if (
-            !ele.isConfirm &&
-            ele.stationId !== firstAlarmItem?.stationId
-        ) {
-          this.renderWarningTag(ele.stationId);
-        }
-      });
-
-      this.$store.commit("syzAlarmArray", syzAlarmArray);
-    },
-
-    // 定时器循环数据判断小红点渲染及是否播放声音
-    renderAlarm(stationId = "", playSound = true) {
-      let syzAlarmArray = this.$store.getters.syzAlarmArray;
-
-      syzAlarmArray.forEach((ele) => {
-        if (ele.stationId === stationId) {
-          ele.isConfirm = true;
-          this.clearWarningTag(ele.stationId);
-        } else if (!ele.isConfirm && ele.stationId !== stationId) {
-          this.renderWarningTag(ele.stationId);
-        }
-      });
-
-      const res = syzAlarmArray.find((ele) => {
-        return !ele.isConfirm;
-      });
-
-      if (playSound) {
-        // this.audioPlay("./static/sound/syz.mp3");
-      }
-
-      this.$store.commit("syzAlarmArray", syzAlarmArray);
-    },
-
-    // 返回音频文件路径
-    getSound(fileName) {
-      return `./static/sound/${fileName}.mp3`;
-    },
-
-    // 播放音频
-    audioPlay(audioPath) {
-      let soundMuteSelf = [];
-      let soundMuteOther = [];
-
-      this.$store.getters.syzAlarmArray.forEach((ele) => {
-        if (ele.stationId === this.activeTab) {
-          soundMuteSelf.push(ele);
-        } else {
-          soundMuteOther.push(ele);
-        }
-      });
-
-      let alarmSelfLock = soundMuteSelf.some((ele) => {
-        return !ele.isConfirm;
-      });
-
-      let alarmOtherLock = soundMuteOther.some((ele) => {
-        return !ele.isConfirm;
-      });
-
-      if (alarmOtherLock) {
-        this.audio = new Audio(audioPath);
-        this.audio.play();
-      } else if (alarmSelfLock) {
-        this.$store.getters.syzArray.forEach((ele) => {
-          if (ele.stationId === this.activeTab) {
-            ele.isMute = false;
-            this.audio = new Audio(audioPath);
-            this.audio.play();
-          }
-        });
-      } else if (!alarmSelfLock) {
-        this.$store.getters.syzArray.forEach((ele) => {
-          if (ele.stationId === this.activeTab) {
-            if (!ele.isMute) {
-              this.audio = new Audio(audioPath);
-              this.audio.play();
-            }
-          }
-        });
-      }
-    },
-
-    // 显示某个小红点
-    renderWarningTag(stationId = "") {
-      this.$store.getters.syzArray.forEach((ele) => {
-        if (ele.id === stationId) {
-          ele.isWarning = "1";
-        }
-      });
-      this.pageshowMode++;
-    },
-
-    // 清除某个小红点
-    clearWarningTag(stationId = "") {
-      this.$store.getters.syzArray.forEach((ele) => {
-        if (ele.id === stationId) {
-          ele.isWarning = "0";
-        }
-      });
-      this.pageshowMode++;
-    },
-
-    // 切换报警声音开关
-    switchAlarmSound(index) {
-      this.$store.getters.syzArray[index].isMute =
-          !this.$store.getters.syzArray[index].isMute;
-    },
-
-    opened() {
-      this.getAllStationtab()
-    },
-
-    closed() {
-      clearInterval(this.starTimer);
-      clearInterval(this.starTimerWarn);
-      clearInterval(this.timmer);
-      this.starTimer = null
-      this.starTimerWarn = null
-      this.timmer = null;
-      this.$store.commit("activeTab", "");
-      this.$store.commit("syzDialogShow", false);
-    },
-
-    tabClick(res) {
-      clearInterval(this.starTimer);
-      this.starTimer = null;
-      this.$store.commit("activeTab", res.props.name);
-      this.renderAlarm(res.props.name, false);
-      if (res.props.name !== 'all') {
-        this.debounce(this.getSvgDataFn(res.props.name), 200)
-      }
-    },
-    debounce(fn, delay) {
-      var delay = delay || 200;
-      var timer;
-      return function () {
-        var th = this;
-        var args = arguments;
-        if (timer) {
-          clearTimeout(timer);
-        }
-        timer = setTimeout(function () {
-          timer = null;
-          fn.apply(th, args);
-        }, delay);
-      };
-    },
-    throttle(fn, interval) {
-      var last;
-      var timer;
-      var interval = interval || 200;
-      return function () {
-        var th = this;
-        var args = arguments;
-        var now = +new Date();
-        if (last && now - last < interval) {
-          clearTimeout(timer);
-          timer = setTimeout(function () {
-            last = now;
-            fn.apply(th, args);
-          }, interval);
-        } else {
-          last = now;
-          fn.apply(th, args);
-        }
-      }
-    }
-  },
-  watch: {
-    "$store.state.syzArray"(res) {
-      this.syzArray = res;
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.bodyy {
-  display: flex;
-  flex-direction: row;
-  background-color: black;
-  width: 98%;
-  //margin-top: -30px;
-  height: 100vh;
-  position: relative;
-  overflow: hidden;
-  margin-left: 44px;
-
-  .syzDetailsPaneItem {
-    position: relative;
-    height: 100%;
-
-    .buttonGroup {
-      margin-bottom: 10px;
-      display: flex;
-      float: right;
-
-      .el-button-group {
-        .el-button {
-          min-height: 30px !important;
-        }
-
-        .showSty {
-          color: #409eff;
-          border-color: #c6e2ff;
-          background-color: #ecf5ff;
-          outline: 0;
-        }
-      }
-    }
-
-    .warningMaskNew {
-      background-color: rgba(186, 50, 55, 0.5);
-      animation: fade 2000ms infinite;
-      -webkit-animation: fade 2000ms infinite;
-    }
-
-    @keyframes fade {
-      from {
-        opacity: 0.7;
-      }
-
-      50% {
-        opacity: 0.3;
-      }
-
-      to {
-        opacity: 0.7;
-      }
-    }
-
-    @-webkit-keyframes fade {
-      from {
-        opacity: 0.7;
-      }
-
-      50% {
-        opacity: 0.3;
-      }
-
-      to {
-        opacity: 0.7;
-      }
-    }
-
-    .showAllSvgMsg {
-      width: calc(100% - 15px);
-      height: calc(100% - 15px);
-      border: 3px solid #646464;
-      border-radius: 10px;
-
-      .showAllSvgMsg_top {
-        border-radius: 10px 10px 0 0;
-        height: calc(100% - 40px);
-        width: 100%;
-      }
-
-      .showAllSvgMsg_bot {
-        background: #3a3a3a;
-        border-radius: 0 0 8px 8px;
-        height: 40px;
-        text-align: center;
-
-        span {
-          position: relative;
-          top: 10px;
-          font-weight: bold;
-          color: #fff;
-        }
-      }
-    }
-
-    .alarmIconBox {
-      position: absolute;
-      right: 0;
-      top: 0;
-      cursor: pointer;
-
-      i {
-        font-size: 20px;
-      }
-    }
-  }
-}
-</style>
-<style lang="less">
-.bodyy {
-  .pop-up-main,
-  .paln-box {
-    width: 100%;
-    height: 90vh;
-    overflow: hidden;
-    position: relative;
-  }
-
-  .movableItem {
-    .svg {
-      margin-left: 0;
-      margin-top: 8%;
-    }
-  }
-
-  .el-badge__content.is-fixed.is-dot {
-    right: 0;
-    top: 10px;
-    background: #f25656;
-    animation: twinkle 0.75s infinite;
-    border-color: transparent;
-  }
-
-  @keyframes twinkle {
-    0% {
-      opacity: 0;
-    }
-    50% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-}
-
-.currentShowTitles {
-  width: 100%;
-  position: relative;
-
-  .alarIcon {
-    position: absolute;
-    right: 50px;
-    top: 5;
-    font-size: 20px;
-    cursor: pointer;
-  }
-}
-
-</style>

src/views/stateMonitor/focus/basicDataDetails.vue

@@ -1,498 +0,0 @@
-<template>
-  <el-dialog
-      width="50%"
-      @closed="closed()"
-      :show-close="false"
-      class="my-info-dialog"
-  >
-    <template #title>
-      <div class="showTitles">
-        <div class="titles">{{ partsName }}详情</div>
-        <div class="model">
-          <div class="selects" v-show="!switchFlag">
-            <el-select
-                @change="search()"
-                class="inputs"
-                v-model="selectValue"
-                placeholder="请选择"
-            >
-              <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-              >
-              </el-option>
-            </el-select>
-          </div>
-          <div class="choose">
-            <div
-                :class="switchFlag ? 'interval' : 'interval_on'"
-                @click="switchChange"
-            >
-              等间隔
-            </div>
-            <div
-                :class="switchFlag ? 'original_on' : 'original'"
-                @click="switchChange"
-            >
-              原始数据
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <div class="bodys">
-      <div class="dataTitle">
-        <div class="operate">
-          <el-date-picker
-              class="picker"
-              @change="changes"
-              v-model="timeValue"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-          >
-          </el-date-picker>
-          <div class="buttons" @click="search()">查询</div>
-        </div>
-        <div class="buttons" @click="search('flag')">导出</div>
-      </div>
-      <div :id="echartsId" class="showEcharts"></div>
-    </div>
-  </el-dialog>
-</template>
-<script>
-import * as echarts from "echarts";
-import dayjs from "dayjs";
-import XLSX from "xlsx";
-
-export default {
-  props: {
-    datas: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    partsName: Object,
-    echartsId: Object,
-    calc: {
-      type: Number,
-      default: 1
-    },
-  },
-  updated() {
-    if (this.timeValue.length === 0) {
-      let date = new Date();
-      this.timeValue[0] = date.getTime() - 28800000;
-      this.timeValue[1] = date.getTime();
-    }
-    this.chooseTime = this.timeValue;
-    this.xdata = [];
-    this.values = [];
-    if (this.timeValue[1] - this.timeValue[0] <= 86400000) {
-      this.datas.map((item) => {
-        this.xdata.push(dayjs(item.ts).format("HH:mm"));
-        this.values.push(
-            item.doubleValue
-                ? (item.doubleValue * this.calc).toFixed(2)
-                : item.doubleValue === 0
-                    ? item.doubleValue
-                    : item.longValue * this.calc
-        );
-      });
-    } else {
-      this.datas.map((item) => {
-        this.xdata.push(dayjs(item.ts).format("MM-DD HH:mm"));
-        this.values.push(
-            item.doubleValue
-                ? (item.doubleValue * this.calc).toFixed(2)
-                : item.doubleValue === 0
-                    ? item.doubleValue
-                    : item.longValue * this.calc
-        );
-      });
-    }
-    this.$nextTick(() => {
-      this.getEcharts();
-    });
-  },
-  mounted() {
-  },
-  data() {
-    return {
-      xdata: [],
-      values: [],
-      timeValue: [],
-      chooseTime: [],
-      switchFlag: false,
-      selectValue: "60",
-      options: [
-        {
-          value: "60",
-          label: "一分钟",
-        },
-        {
-          value: "300",
-          label: "五分钟",
-        },
-        {
-          value: "600",
-          label: "十分钟",
-        },
-        {
-          value: "1800",
-          label: "三十分钟",
-        },
-        {
-          value: "3600",
-          label: "一小时",
-        },
-        {
-          value: "86400",
-          label: "一天",
-        },
-      ],
-    };
-  },
-  methods: {
-    changes() {
-      let timeValue = [];
-      this.timeValue?.forEach((item) => {
-        timeValue.push(dayjs(item).valueOf());
-      });
-      this.chooseTime = timeValue;
-    },
-    switchChange() {
-      this.switchFlag = !this.switchFlag;
-      this.selectValue = "60";
-      this.search();
-      const loading = this.$loading({
-        lock: true,
-        text: "数据加载中",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-      setTimeout(() => {
-        loading.close();
-      }, 1000);
-    },
-    search(values) {
-      let times = [];
-      this.chooseTime.forEach((item) => {
-        times.push(dayjs(item).valueOf());
-      });
-      times.length > 0
-          ? this.switchFlag
-              ? this.$emit("original-data", times)
-              : this.$emit("search-data", times, Number(this.selectValue))
-          : this.$message({
-            showClose: true,
-            message: "请选择查询日期",
-            center: true,
-            type: "error",
-          });
-      if (values) {
-        this.$message({
-          showClose: true,
-          center: true,
-          message: "下载中",
-        });
-        setTimeout(() => {
-          this.export();
-        }, 2000);
-      }
-    },
-    export() {
-      // 数据源
-      let data = [];
-      this.datas.forEach((item) => {
-        let values = {
-          时间: dayjs(item.ts).format("MM-DD HH:mm:ss"),
-          数值: item.doubleValue,
-        };
-        data.push(values);
-      });
-      // 下载的路径
-      let fileName = `${this.partsName}.xlsx`;
-      let filePath = "/root/" + fileName;
-      // 新建workbook
-      const wb = XLSX.utils.book_new();
-      // 新建worksheet，并载入数据
-      const ws = XLSX.utils.json_to_sheet(data);
-      // 设置每列的列宽，10代表10个字符，注意中文占2个字符
-      ws["!cols"] = [{wch: 30}, {wch: 30}];
-      // 生成xlsx文件(workbook，worksheet数据，sheet命名)
-      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
-
-      // 写文件(workbook，xlsx文件路径+文件名)
-      XLSX.writeFile(wb, filePath);
-      this.$message({
-        showClose: true,
-        message: "下载成功",
-        center: true,
-        type: "success",
-      });
-    },
-    getEcharts() {
-      let chartDom = document.getElementById(this.echartsId);
-      let myChart = echarts.init(chartDom, "#ffffff");
-      let option;
-      option = {
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-          show: true,
-          data: [this.partsName],
-          right: 56,
-          icon: "circle",
-          itemWidth: 6,
-          inactiveColor: "#606769",
-          textStyle: {
-            color: "#B3BDC0",
-            fontSize: 12,
-          },
-        },
-        xAxis: [
-          {
-            type: "category",
-            boundaryGap: false,
-            axisLabel: {
-              interval:
-                  Number((this.xdata.length / 8).toFixed(0)) > 2
-                      ? Number((this.xdata.length / 8).toFixed(0))
-                      : 0,
-              showMinLabel: true,
-              showMaxLabel: true,
-              formatter: "{value}",
-              fontSize: 14,
-              textStyle: {
-                color: "#606769",
-              },
-            },
-            axisLine: {
-              show: false,
-            },
-            data: this.xdata,
-          },
-        ],
-        yAxis: {
-          type: "value",
-          axisLabel: {
-            formatter: "{value}",
-            fontSize: 14,
-          },
-          axisLine: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: "#606769",
-              type: "dashed",
-            },
-          },
-        },
-        series: [
-          {
-            // name: this.partsName,
-            smooth: true,
-            showSymbol: false,
-            data: this.values,
-            type: "line",
-          },
-        ],
-      };
-      option && myChart.setOption(option);
-    },
-    closed() {
-      this.chooseTime = [];
-      this.timeValue = [];
-      this.switchFlag = false;
-      this.selectValue = "60";
-      this.$emit("closed");
-    },
-  },
-};
-</script>
-
-<style>
-.showTitles {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: -10px;
-  font-size: 18px;
-  color: #ffffff;
-  height: 40px;
-}
-
-.titles {
-  font-size: 16px;
-  color: #ffffff;
-}
-
-.el-dialog__body {
-  padding: 30px 10px 10px 10px;
-}
-
-.bodys {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: black;
-  width: 100%;
-  margin-top: -30px;
-}
-
-.showEcharts {
-  width: 1030px;
-  height: 480px;
-  margin-left: 30px;
-  /* padding-top: 20px; */
-}
-
-.dataTitle {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 10px;
-}
-
-.picker {
-  margin-left: 20px;
-  margin-right: 16px;
-}
-
-.el-date-editor .el-range-input {
-  background-color: rgba(26, 26, 26, 1) !important;
-  border: none;
-  color: #ffffff !important;
-}
-
-.el-input__inner {
-  background-color: rgba(26, 26, 26, 1) !important;
-}
-
-.el-date-editor .el-range-separator {
-  color: #ffffff !important;
-}
-
-.el-date-table td.in-range div,
-.el-date-table td.in-range div:hover,
-.el-date-table.is-week-mode .el-date-table__row.current div,
-.el-date-table.is-week-mode .el-date-table__row:hover div {
-  background-color: #ceceff !important;
-}
-
-.operate {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  /* margin-right: 65px; */
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100px;
-  height: 40px;
-  background-color: rgba(26, 26, 26, 1);
-  border: 1px solid rgba(77, 77, 77, 1);
-  color: #ffffff;
-  margin-right: 28px;
-  font-size: 12px;
-}
-
-.model {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  color: rgba(240, 240, 240, 1);
-  font-size: 12px;
-}
-
-.el-switch {
-  width: 453px;
-}
-
-.el-switch__label {
-  color: #999999 !important;
-}
-
-.el-switch__label.is-active {
-  color: rgba(37, 116, 219, 1) !important;
-}
-
-.selects {
-  margin-right: 16px;
-}
-
-.choose {
-  width: 160px;
-  height: 25px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  color: #ffffff;
-}
-
-.interval {
-  width: 50%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(77, 77, 77, 1);
-  border-top-left-radius: 12.5px;
-  border-bottom-left-radius: 12.5px;
-}
-
-.interval_on {
-  width: 50%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(29, 106, 235, 1);
-  border: 1px solid rgba(29, 106, 235, 1);
-  border-top-left-radius: 12.5px;
-  border-bottom-left-radius: 12.5px;
-}
-
-.original {
-  width: 50%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(77, 77, 77, 1);
-  border-top-right-radius: 12.5px;
-  border-bottom-right-radius: 12.5px;
-}
-
-.original_on {
-  width: 50%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(29, 106, 235, 1);
-  border: 1px solid rgba(29, 106, 235, 1);
-  border-top-right-radius: 12.5px;
-  border-bottom-right-radius: 12.5px;
-}
-
-.inputs {
-  border: none;
-  width: 110px !important;
-}
-</style>

src/views/stateMonitor/focus/currentWarningCard.vue

@@ -1,294 +0,0 @@
-<template>
-  <div
-      class="currentWarningCardTableBox"
-      :class="$store.state.currentWarningCardClass"
-  >
-    <el-table
-        :data="tableData"
-        class="table"
-        height="30vh"
-        :header-cell-style="{
-        background: '#000000',
-        color: 'rgb(220,220,220)',
-        padding: '4px',
-        fontSize: '14px',
-        'border-bottom': 'solid 1px black',
-      }"
-        :cell-class-name="setCellClassName"
-    >
-      <el-table-column
-          prop="lastUpdateTime"
-          align="center"
-          label="时间"
-          width="150"
-      >
-      </el-table-column>
-      <el-table-column prop="alertText" align="center" label="描述" width="280">
-      </el-table-column>
-      <el-table-column prop="isSelected" align="center" label="确认">
-        <template v-slot="scope">
-          <input
-              type="checkbox"
-              v-model="scope.row.isSelected"
-              @click="itemChecked(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import BackgroundData from "@/utills/BackgroundData";
-import api from "@api/stateMonitor/index.js";
-
-export default {
-  name: "AlarmArea",
-  components: {},
-  created() {
-    this.faultMessage();
-    this.intervals = setInterval(this.faultMessage, 15000);
-  },
-  props: {
-    activeTab: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      values: [],
-      tableData: [],
-      dialogVisible: false,
-      showSvg: false,
-      svgVisible: false,
-      svgWeb: "",
-      stationName: "",
-      currentWindturbine: {},
-      audio: null,
-      intervals: null,
-    };
-  },
-  methods: {
-    filtrationData(activeTab) {
-      let syzAlarm = [];
-      let syzBase = [];
-      this.values.forEach((ele) => {
-        if (
-            ele.stationId === activeTab &&
-            ele.rank === this.$store.state.syzAlarmRank &&
-            ele.category1 === "SYZ"
-        ) {
-          syzAlarm.push(ele);
-        } else if (ele.stationId === activeTab && ele.category1 === "SYZ") {
-          syzBase.push(ele);
-        }
-      });
-
-      this.$store.commit(
-          "currentWarningCardClass",
-          syzAlarm.length ? "show" : ""
-      );
-
-      this.tableData = [].concat(syzAlarm, syzBase);
-    },
-    faultMessage(json) {
-      api.alarmFault().then((res) => {
-        if (res.data) {
-          let val = res.data;
-          if (Object.keys(val).length > 0) {
-            let sleected = {};
-            this.values.forEach((it) => {
-              if (it.isSelected) {
-                sleected[it.id] = 0;
-              }
-            });
-            this.values = new Array();
-            for (let v in val) {
-              let vl = val[v];
-              if (vl.stationId != "QS_FDC" && vl.category1 == "FJ") {
-                vl.alertText = vl.windturbineName + "-" + vl.alertText;
-              }
-              if (
-                  sleected[vl.id] == 0 &&
-                  BackgroundData.getInstance().LoginUser
-              ) {
-                vl.isSelected = true;
-              }
-              if (vl.category1 !== "GF" && vl.objectId.indexOf("GDC") === -1) {
-                this.values.push(vl);
-              }
-            }
-            this.filtrationData(this.activeTab);
-          }
-        }
-      });
-    },
-    close() {
-      this.dialogVisible = false;
-      this.svgVisible = false;
-    },
-    itemChecked(row) {
-      if (row.isSelected == true) {
-        row.isSelected = false;
-        return;
-      }
-      let bd = BackgroundData.getInstance();
-      if (!bd.LoginUser) {
-        this.$notify({
-          title: "请登录",
-          message: "确认报警需要先登录！",
-          type: "warning",
-          position: "bottom-right",
-          offset: 60,
-          duration: 3000,
-        });
-        row.isSelected = false;
-        return;
-      }
-      row.isSelected = true;
-      this.confirm(row);
-    },
-    confirm(item) {
-      api
-          .sendWarning({
-            snapID: item.snapIDString,
-            faultID: item.idString,
-            userName: BackgroundData.getInstance().LoginUser.name,
-          })
-          .then((msg) => {
-            let mms = msg.data > 0 ? "报警确认成功！" : "报警确认出现错误!";
-            let tp = msg.data > 0 ? "success" : "error";
-            msg.data === 0 ? (item.isSelected = false) : "";
-            this.$notify({
-              title: "报警",
-              message: mms,
-              type: tp,
-              position: "bottom-right",
-              offset: 60,
-              duration: 3000,
-            });
-          });
-    },
-    setCellClassName({row}) {
-      if (row.rank === this.$store.state.syzAlarmRank) {
-        return "cellBase flicker";
-      } else {
-        return "cellBase";
-      }
-    },
-  },
-  unmounted() {
-    clearInterval(this.intervals);
-    this.intervals = null;
-  },
-  watch: {
-    activeTab(res) {
-      this.filtrationData(res);
-    },
-  },
-};
-</script>
-<style scoped>
-.el-table::before {
-  width: 0;
-}
-
-.table {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-:deep(.el-table__body-wrapper::-webkit-scrollbar) {
-  width: 8px;
-  height: 0px;
-  background-color: black;
-}
-
-:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
-  background-color: #292929;
-  border-radius: 6px;
-}
-
-:deep(.el-table td, .el-table th) {
-  border-bottom: 2px solid black;
-}
-
-.el-table__body-wrapper {
-  background-color: black;
-}
-
-tr {
-  line-height: 1.5;
-  background: #1e1e1e;
-  margin-bottom: 2px;
-  border-radius: 5px;
-}
-
-/* .ToolBar {
-  position: absolute;
-  right: 12px;
-  width: 586px;
-  text-align: center;
-  z-index: 2;
-  font-size: 14px;
-  height: 28px;
-  margin: 5px;
-  background: #1e1e1e;
-} */
-.table-main {
-  font-size: 14px;
-  width: 600px;
-  text-align: center;
-  background: #000000;
-  margin: 5px;
-  border-collapse: separate;
-  border-spacing: 0px 5px;
-}
-
-.currentWarningCardTableBox {
-  position: absolute;
-  right: -400px;
-  bottom: 40px;
-  padding-left: 5px;
-  padding-right: 5px;
-  opacity: 0.3;
-  transition: 0.3s;
-}
-
-.currentWarningCardTableBox:hover,
-.currentWarningCardTableBox.show {
-  right: 10px;
-  transition: 0.3s;
-  opacity: 1;
-}
-
-.currentWarningCardTableBox.hide {
-  opacity: 0.3;
-  transition: 0.3s;
-  right: -200px;
-}
-</style>
-<style lang="less">
-.cellBase {
-  background: rgb(30, 30, 30) !important;
-  color: rgb(220, 220, 220);
-  padding: 3px;
-  font-size: 12px;
-}
-
-.cellBase.flicker {
-  animation: flicker 0.6s infinite;
-}
-
-@keyframes flicker {
-  0% {
-    color: rgb(220, 220, 220);
-  }
-  50% {
-    color: orangered;
-  }
-  100% {
-    color: rgb(220, 220, 220);
-  }
-}
-</style>

src/views/stateMonitor/focus/dataDetails.vue

@@ -1,568 +0,0 @@
-<template>
-  <div class="body">
-    <div
-        :class="index < 3 ? 'showContents' : 'showContents'"
-        v-for="(item, index) in station"
-        :key="index"
-    >
-      <div class="stationName">
-        <div class="titleName">{{ item.name }}</div>
-        <div class="titleNames" v-if="item.schedulingName">
-          ({{ item.schedulingName }})
-        </div>
-        <img
-            v-if="
-            !allDate[item.id]?.Status?.value ||
-            allDate[item.id]?.Status?.value === 0
-          "
-            class="statusIcons"
-            src="@assets/img/controlcenter/daraTrue.png"
-        />
-        <img
-            v-else
-            class="statusIcons"
-            src="@assets/img/controlcenter/dataFalse.png"
-        />
-        <div
-            class="titleNames"
-            v-if="
-            allDate[item.id]?.Status?.value &&
-            allDate[item.id]?.Status?.value !== 0
-          "
-        >
-          {{
-            (
-                (1 -
-                    this.allDate[item.id]?.PowerSet?.value /
-                    this.allDate[item.id]?.InstalledCapacity?.value) *
-                100
-            ).toFixed(2)
-          }}%
-        </div>
-      </div>
-      <div class="dataList">
-        <div
-            class="data"
-            @dblclick="dbClicks(allDate[item.id]?.PowerSet, '有功设定限值')"
-        >
-          <div class="name">有功设定限值：</div>
-          <div :class="index < 3 ? 'nums' : 'nums'">
-            {{ allDate[item.id]?.PowerSet?.value ?? 0 }}
-          </div>
-          <div class="unit">MW</div>
-        </div>
-        <div
-            class="data"
-            @dblclick="dbClicks(allDate[item.id]?.ActualPower, '实发有功')"
-        >
-          <div class="name">实发有功：</div>
-          <div :class="index < 3 ? 'nums' : 'nums'">
-            {{ allDate[item.id]?.ActualPower?.value ?? 0 }}
-          </div>
-          <div class="unit">MW</div>
-        </div>
-        <div
-            class="data"
-            @dblclick="dbClicks(allDate[item.id]?.AgcUp, 'AGC可调上限')"
-        >
-          <div class="name">AGC可调上限：</div>
-          <div :class="index < 3 ? 'nums' : 'nums'">
-            {{ allDate[item.id]?.AgcUp?.value ?? 0 }}
-          </div>
-          <div class="unit">MW</div>
-        </div>
-        <div
-            class="data"
-            @dblclick="dbClicks(allDate[item.id]?.TheoryPower, '理论功率')"
-        >
-          <div class="name">理论功率：</div>
-          <div :class="index < 3 ? 'nums' : 'nums'">
-            {{ allDate[item.id]?.TheoryPower?.value ?? 0 }}
-          </div>
-          <div class="unit">MW</div>
-        </div>
-        <div
-            class="data"
-            @dblclick="dbClicks(allDate[item.id]?.AgcLower, 'AGC可调下限')"
-        >
-          <div class="name">AGC可调下限：</div>
-          <div :class="index < 3 ? 'nums' : 'nums'">
-            {{ allDate[item.id]?.AgcLower?.value ?? 0 }}
-          </div>
-          <div class="unit">MW</div>
-        </div>
-
-        <div
-            class="data"
-            @dblclick="dbClicks(allDate[item.id]?.ForecastPower, '预测功率')"
-        >
-          <div class="name">预测功率：</div>
-          <div :class="index < 3 ? 'nums' : 'nums'">
-            {{ allDate[item.id]?.ForecastPower?.value ?? 0 }}
-          </div>
-          <div class="unit">MW</div>
-        </div>
-      </div>
-      <div class="condition">
-        <div class="status">
-          <div class="name">{{ allDate[item.id]?.AgcIn?.name }}：</div>
-          <img
-              v-if="allDate[item.id]?.AgcIn?.value === 0"
-              class="statusIcon"
-              src="@assets/img/controlcenter/daraTrue.png"
-          />
-          <img
-              v-else-if="allDate[item.id]?.AgcIn?.value === 1"
-              class="statusIcon"
-              src="@assets/img/controlcenter/dataFalse.png"
-          />
-          <div v-else-if="allDate[item.id]?.AgcIn?.value === ''">暂无数据</div>
-        </div>
-        <div class="status">
-          <div class="name">{{ allDate[item.id]?.AgcFar?.name }}：</div>
-          <img
-              v-if="allDate[item.id]?.AgcFar?.value === 0"
-              class="statusIcon"
-              src="@assets/img/controlcenter/daraTrue.png"
-          />
-          <img
-              v-else-if="allDate[item.id]?.AgcFar?.value === 1"
-              class="statusIcon"
-              src="@assets/img/controlcenter/dataFalse.png"
-          />
-          <div v-else-if="allDate[item.id]?.AgcFar?.value === ''">暂无数据</div>
-        </div>
-        <div class="status">
-          <div class="name">{{ allDate[item.id]?.SumLock?.name }}：</div>
-          <img
-              v-if="allDate[item.id]?.SumLock?.value === 0"
-              class="statusIcon"
-              src="@assets/img/controlcenter/daraTrue.png"
-          />
-          <img
-              v-else-if="allDate[item.id]?.SumLock?.value === 1"
-              class="statusIcon"
-              src="@assets/img/controlcenter/dataFalse.png"
-          />
-          <div v-else-if="allDate[item.id]?.SumLock?.value === ''">
-            暂无数据
-          </div>
-        </div>
-        <div class="status">
-          <div class="name">{{ allDate[item.id]?.SubLock?.name }}：</div>
-          <img
-              v-if="allDate[item.id]?.SubLock?.value === 0"
-              class="statusIcon"
-              src="@assets/img/controlcenter/daraTrue.png"
-          />
-          <img
-              v-else-if="allDate[item.id]?.SubLock?.value === 1"
-              class="statusIcon"
-              src="@assets/img/controlcenter/dataFalse.png"
-          />
-          <div v-else-if="allDate[item.id]?.SubLock?.value === ''">
-            暂无数据
-          </div>
-        </div>
-      </div>
-      <div :id="item.id" class="echarts" @dblclick="handleClick(item.id)"></div>
-    </div>
-
-    <Details
-        @closed="closed()"
-        v-model="display"
-        :partsName="partsName"
-        echartsId="modelEcharts"
-        :datas="modelDetails"
-        :calc="this.modelData.calc"
-        @search-data="search"
-        @original-data="originalData"
-    ></Details>
-  </div>
-</template>
-<script>
-import * as echarts from "echarts";
-import Details from "./basicDataDetails.vue";
-import api from "@api/stateMonitor/index.js";
-
-export default {
-  components: {
-    Details,
-  },
-  data() {
-    return {
-      display: false,
-      modelData: {},
-      partsName: "",
-    };
-  },
-  props: {
-    allDate: {
-      type: String,
-      default: "",
-    },
-    allChartDate: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    station: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-  },
-  updated() {
-    // this.totleErtcher()
-  },
-  mounted() {
-  },
-  methods: {
-    dbClicks(data, partsName, timeValues) {
-      this.modelData = data;
-      let date = new Date();
-      let endTs = timeValues
-          ? timeValues[1] > date.getTime()
-              ? date.getTime()
-              : timeValues[1]
-          : date.getTime();
-      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
-      data.tag &&
-      api
-          .getPower({
-            tagName: data.tag,
-            startTs: startTs,
-            endTs: endTs,
-            interval: 60,
-          })
-          .then((res) => {
-            if (res.data.length > 0) {
-              this.partsName = partsName;
-              this.display = true;
-              this.modelDetails = res.data;
-            } else {
-              this.modelDetails = [];
-            }
-          });
-    },
-    original(data, partsName, timeValues) {
-      this.modelData = data;
-      let date = new Date();
-      let endTs = timeValues
-          ? timeValues[1] > date.getTime()
-              ? date.getTime()
-              : timeValues[1]
-          : date.getTime();
-      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
-      api
-          .getOriginalPower({
-            tagName: data.tag,
-            startTs: startTs,
-            endTs: endTs,
-          })
-          .then((res) => {
-            if (res.data.length > 0) {
-              this.partsName = partsName;
-              this.display = true;
-              this.modelDetails = res.data;
-            } else {
-              this.modelDetails = [];
-            }
-          });
-    },
-    search(values, interval) {
-      this.interval = interval;
-      this.dbClicks(this.modelData, this.partsName, values);
-    },
-    originalData(values) {
-      this.original(this.modelData, this.partsName, values);
-    },
-    totleErtcher() {
-      this.allChartDate.forEach((item) => {
-        let chartDom = document.getElementById(item.id);
-        let myChart = echarts.init(chartDom, "#ffffff");
-        let option;
-        option = {
-          tooltip: {
-            trigger: "axis",
-          },
-          legend: {
-            show: true,
-            data: item.value.map((t) => {
-              return t.title;
-            }),
-            right: 56,
-            icon: "circle",
-            itemWidth: 6,
-            inactiveColor: "#606769",
-            textStyle: {
-              color: "#B3BDC0",
-              fontSize: 12,
-            },
-          },
-
-          xAxis: [
-            {
-              type: "category",
-              boundaryGap: false,
-              axisLabel: {
-                // interval: 60,
-                showMinLabel: true,
-                showMaxLabel: true,
-                formatter: "{value}",
-                fontSize: 14,
-                textStyle: {
-                  color: "#606769",
-                },
-              },
-              axisLine: {
-                show: false,
-              },
-              data: item.value[0].value.map((items) => {
-                return items.text;
-              }),
-            },
-          ],
-          yAxis: {
-            type: "value",
-            axisLabel: {
-              formatter: "{value}",
-              fontSize: 14,
-            },
-            axisLine: {
-              show: false,
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "#606769",
-                type: "dashed",
-              },
-            },
-          },
-          dataZoom: [
-            {
-              show: false,
-              type: "inside",
-              start: 0,
-              end: 100,
-            },
-          ],
-          series: [
-            {
-              name: item.value[0].title,
-              smooth: true,
-              showSymbol: false,
-              data: item.value[0].value.map((items) => {
-                return items.value;
-              }),
-              type: "line",
-              lineStyle: {
-                normal: {
-                  color: "rgba(75, 85, 174, 1)",
-                  width: 1,
-                },
-              },
-            },
-            {
-              name: item.value[1].title,
-              smooth: true,
-              showSymbol: false,
-              data: item.value[1].value.map((items) => {
-                return items.value;
-              }),
-              type: "line",
-              lineStyle: {
-                normal: {
-                  color: "rgba(05, 187, 76, 1)",
-                  width: 1,
-                },
-              },
-            },
-          ],
-        };
-        option && myChart.setOption(option);
-      });
-    },
-    handleClick(id) {
-      this.$emit("handleClick", id);
-    },
-    opened() {
-    },
-    closed() {
-      this.detailsDisplay = false;
-      this.display = false;
-    },
-  },
-  watch: {
-    allChartDate: {
-      handler: function (json) {
-        if (json) {
-          this.totleErtcher();
-        }
-      },
-    },
-  },
-};
-</script>
-
-<style scoped>
-.showTitles {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  margin-top: -10px;
-  font-size: 18px;
-  color: #ffffff;
-}
-
-.showContent {
-  width: 32%;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid rgba(77, 77, 77, 1);
-  /* background-color: rgba(77, 77, 77, 1); */
-  margin-right: 10px;
-  margin-left: 10px;
-  height: 44vh;
-  margin-top: 20px;
-  align-items: center;
-}
-
-.showContents {
-  width: 40%;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid rgba(77, 77, 77, 1);
-  /* background-color: rgba(77, 77, 77, 1); */
-  margin-right: 10px;
-  margin-left: 10px;
-  height: 43vh;
-  margin-top: 20px;
-  align-items: center;
-}
-
-.stationName {
-  font-size: 20px;
-  width: 400px;
-  height: 45px;
-  border: 1px solid rgba(77, 77, 77, 1);
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  justify-content: center;
-  color: #ffffff;
-  background-color: #000000;
-  margin-top: -15px;
-}
-
-.titleName {
-  margin-top: 10px;
-}
-
-.titleNames {
-  font-size: 12px;
-  margin-left: 10px;
-  margin-top: 10px;
-}
-
-.body {
-  background-color: black;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  height: 90vh;
-  overflow-y: auto;
-}
-
-.body::-webkit-scrollbar {
-  /*隐藏滚轮*/
-  display: none;
-}
-
-.echarts {
-  width: 100%;
-  height: 500px;
-  margin-left: 10px;
-  padding-top: -20px;
-}
-
-.dataList {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  padding-top: 27px;
-}
-
-.data {
-  width: 50%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 12px;
-  justify-content: center;
-}
-
-.name {
-  display: flex;
-  flex-direction: row-reverse;
-  font-size: 12px;
-  color: #ffffff;
-}
-
-.num {
-  margin-left: 59px;
-  font-size: 16px;
-  color: #05bb4c;
-  min-width: 40px;
-}
-
-.nums {
-  margin-left: 29px;
-  font-size: 16px;
-  color: #05bb4c;
-  min-width: 40px;
-}
-
-.unit {
-  font-size: 16px;
-  color: #ffffff;
-  margin-left: 15px;
-}
-
-.condition {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 20px;
-  border-bottom: 1px solid #3d3d3d;
-  padding-bottom: 10px;
-}
-
-.status {
-  width: 25%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-.statusIcon {
-  width: 14px;
-  height: 14px;
-  margin-left: 8px;
-}
-
-.statusIcons {
-  width: 14px;
-  height: 14px;
-  margin-left: 20px;
-}
-</style>

src/views/stateMonitor/focus/detailsCharts.vue

@@ -1,169 +0,0 @@
-<template>
-  <el-dialog
-      width="70%"
-      @open="opened()"
-      @closed="closed()"
-      :show-close="true"
-      class="dialogs"
-  >
-    <template #title>
-      <div class="showTitles">
-        <div class="stationName">
-          <div class="titleName">{{ showData?.name?.name }}</div>
-          <div class="titleNames" v-if="showData?.name?.names">
-            ({{ showData?.name?.names }})
-          </div>
-        </div>
-      </div>
-    </template>
-    <div class="bodyy">
-      <div id="showEcharts" class="echarts"></div>
-    </div>
-  </el-dialog>
-</template>
-<script>
-import * as echarts from "echarts";
-
-export default {
-  props: {
-    showData: {
-      type: String,
-      default: "",
-    },
-  },
-  updated() {
-    this.showEcharts(this.showData);
-  },
-  methods: {
-    showEcharts(showData) {
-      let chartDom = document.getElementById("showEcharts");
-      chartDom.removeAttribute("_echarts_instance_")
-      let myChart = echarts.init(chartDom, "#ffffff");
-      let option;
-      option = {
-        tooltip: {
-          trigger: "axis",
-        },
-        legend: {
-          show: true,
-          data: showData.value.map((t) => {
-            return t.title;
-          }),
-          right: 56,
-          icon: "circle",
-          itemWidth: 6,
-          inactiveColor: "#606769",
-          textStyle: {
-            color: "#B3BDC0",
-            fontSize: 12,
-          },
-        },
-        xAxis: [
-          {
-            type: "category",
-            boundaryGap: false,
-            axisLabel: {
-              interval: 60,
-              showMinLabel: true,
-              showMaxLabel: true,
-              formatter: "{value}",
-              fontSize: 14,
-              textStyle: {
-                color: "#606769",
-              },
-            },
-            axisLine: {
-              show: false,
-            },
-            data: showData.value[0].value.map((item) => {
-              return item.text;
-            }),
-          },
-        ],
-        yAxis: {
-          type: "value",
-          axisLabel: {
-            formatter: "{value}",
-            fontSize: 14,
-          },
-          axisLine: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: "#606769",
-              type: "dashed",
-            },
-          },
-        },
-        series: [
-          {
-            name: showData.value[0].title,
-            smooth: true,
-            showSymbol: false,
-            data: showData.value[0].value.map((item) => {
-              return item.value;
-            }),
-            type: "line",
-            lineStyle: {
-              normal: {
-                color: "rgba(75, 85, 174, 1)",
-                width: 1,
-              },
-            },
-          },
-          {
-            name: showData.value[1].title,
-            smooth: true,
-            showSymbol: false,
-            data: showData.value[1].value.map((item) => {
-              return item.value;
-            }),
-            type: "line",
-            lineStyle: {
-              normal: {
-                color: "rgba(05, 187, 76, 1)",
-                width: 1,
-              },
-            },
-          },
-        ],
-      };
-      option && myChart.setOption(option);
-    },
-    opened() {
-    },
-    closed() {
-      this.$emit("closeds");
-    },
-  },
-};
-</script>
-<style scoped>
-.echarts {
-  width: 1300px;
-  height: 60vh;
-}
-
-.stationName {
-  font-size: 20px;
-  width: 400px;
-  height: 45px;
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  justify-content: center;
-  color: #ffffff;
-}
-
-.titleName {
-  margin-top: 10px;
-}
-
-.titleNames {
-  font-size: 12px;
-  margin-left: 10px;
-  margin-top: 10px;
-}
-</style>

src/views/stateMonitor/focus/syzDetails.vue

@@ -1,7 +1,7 @@
 <template>
-  <!-- 头部按钮选项 -->
-  <HeaderNav @firstRender="firstRender" :isAll="true" />
-  <div class="syzDetailsPaneItem">
+  <div class="syz-details">
+    <!-- 头部按钮选项 -->
+    <HeaderNav class="header" @firstRender="firstRender" :isAll="true" />
     <div class="buttonGroup">
       <el-button-group>
         <el-button
@@ -24,203 +24,205 @@
         </el-button>
       </el-button-group>
     </div>
-    <div
-      v-if="activeTab == -1"
-      :style="allpageHeight"
-      style="width: 100%; display: grid; overflow-y: auto"
-      v-loading="loading"
-      element-loading-background="rgba(4, 12, 11, 0.8)"
-      element-loading-text="加载中..."
-    >
-      <!-- 小五台-->
+
+    <div class="syzDetailsPaneItem">
       <div
-        class="showAllSvgMsg"
-        v-if="getStationName('XWT') != ''"
-        :class="{ alarm: getAlarm('XWT') }"
-        :style="getStyle(allHeight)"
-        @dblclick="handleClick('XWT')"
+        v-if="activeTab == -1"
+        :style="allpageHeight"
+        style="width: 100%; display: grid; overflow-y: auto"
+        v-loading="loading"
+        element-loading-background="rgba(4, 12, 11, 0.8)"
+        element-loading-text="加载中..."
       >
-        <div class="cover"></div>
-        <XWT class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("XWT") }}</span>
+        <!-- 小五台-->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('XWT') != ''"
+          :class="{ alarm: getAlarm('XWT') }"
+          :style="getStyle(allHeight)"
+          @dblclick="handleClick('XWT')"
+        >
+          <div class="cover"></div>
+          <XWT class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("XWT") }}</span>
+          </div>
         </div>
-      </div>
-      <!-- 败虎堡 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('BHB') != ''"
-        :class="{ alarm: getAlarm('BHB') }"
-        :style="getStyle(allHeight)"
-        @dblclick="handleClick('BHB')"
-      >
-        <div class="cover"></div>
-        <BHB class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("BHB") }}</span>
+        <!-- 败虎堡 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('BHB') != ''"
+          :class="{ alarm: getAlarm('BHB') }"
+          :style="getStyle(allHeight)"
+          @dblclick="handleClick('BHB')"
+        >
+          <div class="cover"></div>
+          <BHB class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("BHB") }}</span>
+          </div>
         </div>
-      </div>
-      <!-- 禹丰 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('YF') != ''"
-        :class="{ alarm: getAlarm('YF') }"
-        :style="getStyle(allHeight)"
-        @dblclick="handleClick('YF')"
-      >
-        <div class="cover"></div>
-        <YF class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("YF") }}</span>
+        <!-- 禹丰 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('YF') != ''"
+          :class="{ alarm: getAlarm('YF') }"
+          :style="getStyle(allHeight)"
+          @dblclick="handleClick('YF')"
+        >
+          <div class="cover"></div>
+          <YF class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("YF") }}</span>
+          </div>
         </div>
-      </div>
-      <!-- 败虎堡三期 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('BHB3') != ''"
-        :class="{ alarm: getAlarm('BHB3') }"
-        :style="getStyle(allHeight)"
-        @dblclick="handleClick('BHB3')"
-      >
-        <div class="cover"></div>
-        <BHBSQ class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("BHB3") }}</span>
+        <!-- 败虎堡三期 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('BHB3') != ''"
+          :class="{ alarm: getAlarm('BHB3') }"
+          :style="getStyle(allHeight)"
+          @dblclick="handleClick('BHB3')"
+        >
+          <div class="cover"></div>
+          <BHBSQ class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("BHB3") }}</span>
+          </div>
         </div>
-      </div>
-      <!-- 盘道梁 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('PDL') != ''"
-        :class="{ alarm: getAlarm('PDL') }"
-        :style="getStyle(allHeight)"
-        @dblclick="handleClick('PDL')"
-      >
-        <div class="cover"></div>
-        <PDL class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("PDL") }}</span>
+        <!-- 盘道梁 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('PDL') != ''"
+          :class="{ alarm: getAlarm('PDL') }"
+          :style="getStyle(allHeight)"
+          @dblclick="handleClick('PDL')"
+        >
+          <div class="cover"></div>
+          <PDL class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("PDL") }}</span>
+          </div>
         </div>
-      </div>
-      <!-- 牛家岭 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('NJL') != ''"
-        :class="{ alarm: getAlarm('NJL') }"
-        :style="getStyle(allHeight)"
-        @dblclick="handleClick('NJL')"
-      >
-        <div class="cover"></div>
-        <NJL class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("NJL") }}</span>
+        <!-- 牛家岭 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('NJL') != ''"
+          :class="{ alarm: getAlarm('NJL') }"
+          :style="getStyle(allHeight)"
+          @dblclick="handleClick('NJL')"
+        >
+          <div class="cover"></div>
+          <NJL class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("NJL") }}</span>
+          </div>
         </div>
-      </div>
 
-      <!-- 丁家窑 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('DJY') != ''"
-        :class="{ alarm: getAlarm('DJY') }"
-        :style="getStyle(allHeight)"
-        @dblclick="handleClick('DJY')"
-      >
-        <div class="cover"></div>
-        <DJY class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("DJY") }}</span>
+        <!-- 丁家窑 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('DJY') != ''"
+          :class="{ alarm: getAlarm('DJY') }"
+          :style="getStyle(allHeight)"
+          @dblclick="handleClick('DJY')"
+        >
+          <div class="cover"></div>
+          <DJY class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("DJY") }}</span>
+          </div>
         </div>
-      </div>
-      <!-- 高家堰 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('GJY') != ''"
-        :class="{ alarm: getAlarm('GJY') }"
-        :style="getStyle(allHeight)"
-        @dblclick="handleClick('GJY')"
-      >
-        <div class="cover"></div>
-        <GJY class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("GJY") }}</span>
+        <!-- 高家堰 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('GJY') != ''"
+          :class="{ alarm: getAlarm('GJY') }"
+          :style="getStyle(allHeight)"
+          @dblclick="handleClick('GJY')"
+        >
+          <div class="cover"></div>
+          <GJY class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("GJY") }}</span>
+          </div>
         </div>
-      </div>
 
-      <!-- 平头镇 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('PTZ') != ''"
-        :class="{ alarm: getAlarm('PTZ') }"
-        :style="getStyle(allHeight)"
-        @dblclick="handleClick('PTZ')"
-      >
-        <div class="cover"></div>
-        <PTZ class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("PTZ") }}</span>
+        <!-- 平头镇 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('PTZ') != ''"
+          :class="{ alarm: getAlarm('PTZ') }"
+          :style="getStyle(allHeight)"
+          @dblclick="handleClick('PTZ')"
+        >
+          <div class="cover"></div>
+          <PTZ class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("PTZ") }}</span>
+          </div>
         </div>
-      </div>
 
-      <!-- 红石峁 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('HSM') != ''"
-        :class="{ alarm: getAlarm('HSM') }"
-        :style="getStyle(allHeight)"
-        @dblclick="handleClick('HSM')"
-      >
-        <div class="cover"></div>
-        <HSM class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("HSM") }}</span>
+        <!-- 红石峁 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('HSM') != ''"
+          :class="{ alarm: getAlarm('HSM') }"
+          :style="getStyle(allHeight)"
+          @dblclick="handleClick('HSM')"
+        >
+          <div class="cover"></div>
+          <HSM class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("HSM") }}</span>
+          </div>
         </div>
-      </div>
 
-      <!-- 朱坑 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('ZK') != ''"
-        :style="getStyle(allHeight)"
-        :class="{ alarm: getAlarm('ZK') }"
-        @dblclick="handleClick('ZK')"
-      >
-        <div class="cover"></div>
-        <ZK class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("ZK") }}</span>
+        <!-- 朱坑 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('ZK') != ''"
+          :style="getStyle(allHeight)"
+          :class="{ alarm: getAlarm('ZK') }"
+          @dblclick="handleClick('ZK')"
+        >
+          <div class="cover"></div>
+          <ZK class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("ZK") }}</span>
+          </div>
         </div>
-      </div>
-      <!-- 羊头崖 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('YTY') != ''"
-        :style="getStyle(allHeight)"
-        :class="{ alarm: getAlarm('YTY') }"
-        @dblclick="handleClick('YTY')"
-      >
-        <div class="cover"></div>
-        <YTY class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("YTY") }}</span>
+        <!-- 羊头崖 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('YTY') != ''"
+          :style="getStyle(allHeight)"
+          :class="{ alarm: getAlarm('YTY') }"
+          @dblclick="handleClick('YTY')"
+        >
+          <div class="cover"></div>
+          <YTY class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("YTY") }}</span>
+          </div>
         </div>
-      </div>
-      <!-- 尹灵芝 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('YLZ') != ''"
-        :style="getStyle(allHeight)"
-        :class="{ alarm: getAlarm('YLZ') }"
-        @dblclick="handleClick('YLZ')"
-      >
-        <div class="cover"></div>
-        <YLZ class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("YLZ") }}</span>
+        <!-- 尹灵芝 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('YLZ') != ''"
+          :style="getStyle(allHeight)"
+          :class="{ alarm: getAlarm('YLZ') }"
+          @dblclick="handleClick('YLZ')"
+        >
+          <div class="cover"></div>
+          <YLZ class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("YLZ") }}</span>
+          </div>
         </div>
-      </div>
 
-      <!-- 米粮局 -->
-      <!-- <div
+        <!-- 米粮局 -->
+        <!-- <div
         class="showAllSvgMsg" v-if="getStationName('')!=''"
         :style="getStyle(allHeight)"
         @dblclick="handleClick('MLJ')"
@@ -231,158 +233,159 @@
           <span>{{ getStationName("MLJ") }}</span>
         </div>
       </div> -->
-    </div>
-    <!-- 风场 *************** -->
+      </div>
+      <!-- 风场 *************** -->
 
-    <!-- 光伏 *************** -->
-    <div
-      v-if="activeTab == -2"
-      :style="allpageHeight"
-      v-loading="loading"
-      element-loading-background="rgba(4, 12, 11, 0.8)"
-      style="width: 100%; display: grid; overflow-y: auto"
-    >
-      <!-- 右玉右卫 -->
+      <!-- 光伏 *************** -->
       <div
-        class="showAllSvgMsg"
-        v-if="getStationName('YY') != ''"
-        :style="getStyle(allHeight)"
-        :class="{ alarm: getAlarm('YY') }"
-        @dblclick="handleClick('YY')"
+        v-if="activeTab == -2"
+        :style="allpageHeight"
+        v-loading="loading"
+        element-loading-background="rgba(4, 12, 11, 0.8)"
+        style="width: 100%; display: grid; overflow-y: auto"
       >
-        <div class="cover"></div>
-        <GFyouyuyouwei class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("YY") }}</span>
+        <!-- 右玉右卫 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('YY') != ''"
+          :style="getStyle(allHeight)"
+          :class="{ alarm: getAlarm('YY') }"
+          @dblclick="handleClick('YY')"
+        >
+          <div class="cover"></div>
+          <GFyouyuyouwei class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("YY") }}</span>
+          </div>
         </div>
-      </div>
 
-      <!-- 平鲁阻虎 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('PL') != ''"
-        :style="getStyle(allHeight)"
-        :class="{ alarm: getAlarm('PL') }"
-        @dblclick="handleClick('PL')"
-      >
-        <div class="cover"></div>
-        <GFpingluzuhu class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("PL") }}</span>
+        <!-- 平鲁阻虎 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('PL') != ''"
+          :style="getStyle(allHeight)"
+          :class="{ alarm: getAlarm('PL') }"
+          @dblclick="handleClick('PL')"
+        >
+          <div class="cover"></div>
+          <GFpingluzuhu class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("PL") }}</span>
+          </div>
         </div>
-      </div>
-      <!-- 应县晶辉 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('YX') != ''"
-        :style="getStyle(allHeight)"
-        :class="{ alarm: getAlarm('YX') }"
-        @dblclick="handleClick('YX')"
-      >
-        <div class="cover"></div>
-        <GFyingxianjinghui class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("YX") }}</span>
+        <!-- 应县晶辉 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('YX') != ''"
+          :style="getStyle(allHeight)"
+          :class="{ alarm: getAlarm('YX') }"
+          @dblclick="handleClick('YX')"
+        >
+          <div class="cover"></div>
+          <GFyingxianjinghui class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("YX") }}</span>
+          </div>
         </div>
-      </div>
-      <!-- 天镇旭升 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('TZ') != ''"
-        :style="getStyle(allHeight)"
-        :class="{ alarm: getAlarm('TZ') }"
-        @dblclick="handleClick('TZ')"
-      >
-        <GFtianzhenxusheng class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("TZ") }}</span>
+        <!-- 天镇旭升 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('TZ') != ''"
+          :style="getStyle(allHeight)"
+          :class="{ alarm: getAlarm('TZ') }"
+          @dblclick="handleClick('TZ')"
+        >
+          <GFtianzhenxusheng class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("TZ") }}</span>
+          </div>
         </div>
-      </div>
-      <!-- 阳高蔚家堡 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('YG') != ''"
-        :style="getStyle(allHeight)"
-        :class="{ alarm: getAlarm('YG') }"
-        @dblclick="handleClick('YG')"
-      >
-        <div class="cover"></div>
-        <GFyanggaoweijiabao class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("YG") }}</span>
+        <!-- 阳高蔚家堡 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('YG') != ''"
+          :style="getStyle(allHeight)"
+          :class="{ alarm: getAlarm('YG') }"
+          @dblclick="handleClick('YG')"
+        >
+          <div class="cover"></div>
+          <GFyanggaoweijiabao class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("YG") }}</span>
+          </div>
         </div>
-      </div>
-      <!-- 方山孙家山 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('FS') != ''"
-        :style="getStyle(allHeight)"
-        :class="{ alarm: getAlarm('FS') }"
-        @dblclick="handleClick('FS')"
-      >
-        <div class="cover"></div>
-        <GFfangshansunjiashan class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("FS") }}</span>
+        <!-- 方山孙家山 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('FS') != ''"
+          :style="getStyle(allHeight)"
+          :class="{ alarm: getAlarm('FS') }"
+          @dblclick="handleClick('FS')"
+        >
+          <div class="cover"></div>
+          <GFfangshansunjiashan class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("FS") }}</span>
+          </div>
         </div>
-      </div>
 
-      <!-- 山阴荣新 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('SY') != ''"
-        :style="getStyle(allHeight)"
-        :class="{ alarm: getAlarm('SY') }"
-        @dblclick="handleClick('SY')"
-      >
-        <div class="cover"></div>
-        <GFshanyinrongxin class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("SY") }}</span>
+        <!-- 山阴荣新 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('SY') != ''"
+          :style="getStyle(allHeight)"
+          :class="{ alarm: getAlarm('SY') }"
+          @dblclick="handleClick('SY')"
+        >
+          <div class="cover"></div>
+          <GFshanyinrongxin class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("SY") }}</span>
+          </div>
         </div>
-      </div>
 
-      <!-- 怀仁初晨 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('HR') != ''"
-        :style="getStyle(allHeight)"
-        :class="{ alarm: getAlarm('HR') }"
-        @dblclick="handleClick('HR')"
-      >
-        <div class="cover"></div>
-        <GFhuairenchuchen class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("HR") }}</span>
+        <!-- 怀仁初晨 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('HR') != ''"
+          :style="getStyle(allHeight)"
+          :class="{ alarm: getAlarm('HR') }"
+          @dblclick="handleClick('HR')"
+        >
+          <div class="cover"></div>
+          <GFhuairenchuchen class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("HR") }}</span>
+          </div>
         </div>
-      </div>
-      <!-- 屯留吾元 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('TL') != ''"
-        :style="getStyle(allHeight)"
-        :class="{ alarm: getAlarm('TL') }"
-        @dblclick="handleClick('TL')"
-      >
-        <div class="cover"></div>
-        <GFtunliuwuyuan class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("TL") }}</span>
+        <!-- 屯留吾元 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('TL') != ''"
+          :style="getStyle(allHeight)"
+          :class="{ alarm: getAlarm('TL') }"
+          @dblclick="handleClick('TL')"
+        >
+          <div class="cover"></div>
+          <GFtunliuwuyuan class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("TL") }}</span>
+          </div>
         </div>
-      </div>
 
-      <!-- 繁峙均然 -->
-      <div
-        class="showAllSvgMsg"
-        v-if="getStationName('JR') != ''"
-        :style="getStyle(allHeight)"
-        :class="{ alarm: getAlarm('JR') }"
-        @dblclick="handleClick('JR')"
-      >
-        <div class="cover"></div>
-        <GFfanshijunran class="booster-station-body" />
-        <div class="showAllSvgMsg_bot">
-          <span>{{ getStationName("JR") }}</span>
+        <!-- 繁峙均然 -->
+        <div
+          class="showAllSvgMsg"
+          v-if="getStationName('JR') != ''"
+          :style="getStyle(allHeight)"
+          :class="{ alarm: getAlarm('JR') }"
+          @dblclick="handleClick('JR')"
+        >
+          <div class="cover"></div>
+          <GFfanshijunran class="booster-station-body" />
+          <div class="showAllSvgMsg_bot">
+            <span>{{ getStationName("JR") }}</span>
+          </div>
         </div>
       </div>
     </div>
@@ -581,15 +584,18 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.syzDetailsPaneItem {
+.syz-details {
+  height: 100%;
+  padding-top: 16px;
   position: relative;
-  padding: 0 20px 10px 20px;
-  height: calc(100% - 57px);
+  .header {
+    margin-top: 0px;
+  }
   .buttonGroup {
-    margin-bottom: 10px;
+    position: absolute;
+    top: 16px;
+    right: 20px;
     display: flex;
-    // justify-content: end;
-    float: right;
 
     .el-button-group {
       .el-button {
@@ -600,9 +606,6 @@ export default {
       }
 
       .showSty {
-        // color: #409eff;
-        // border-color: #c6e2ff;
-        // background-color: #ecf5ff;
         border: 1px solid #3b6c53;
         background-color: rgba(5, 187, 76, 0.5);
         color: #ffffff;
@@ -610,6 +613,10 @@ export default {
       }
     }
   }
+}
+.syzDetailsPaneItem {
+  padding: 0 20px 10px 20px;
+  height: calc(100% - 57px);
 
   .warningMaskNew {
     background-color: rgba(186, 50, 55, 0.5);

src/views/stateMonitor/focus/syzDetails1.vue

@@ -1,887 +0,0 @@
-<template>
-<!--  <el-dialog-->
-<!--      width="90%"-->
-<!--      @open="opened"-->
-<!--      @closed="closed"-->
-<!--      :fullscreen="true"-->
-<!--      :show-close="true"-->
-<!--      class="dialogs"-->
-<!--  >-->
-<!--    <template #title>-->
-<!--      <div class="showTitles currentShowTitles">-->
-<!--        <div class="titles">升压站</div>-->
-<!--      </div>-->
-<!--    </template>-->
-    <div class="bodyy">
-      <el-tabs
-          type="border-card"
-          stretch
-          lazy
-          style="width: 100%; height: 100%"
-          v-model="activeTab"
-          @tab-click="tabClick"
-      >
-        <el-tab-pane
-            class="syzDetailsPaneItem"
-            v-for="(item, index) in syzArray"
-            :key="index"
-            :name="item.id"
-        >
-          <template #label>
-                <span v-if="pageshowMode % 2">
-                <el-badge is-dot v-if="item.isWarning === '1'">
-                    <span>{{ item.name }}</span>
-                </el-badge>
-                <span v-else>{{ item.name }}</span>
-                </span>
-            <span v-else>
-                <el-badge is-dot v-if="item.isWarning === '1'">
-                    <span>{{ item.name }}</span>
-                </el-badge>
-                <span v-else>{{ item.name }}</span>
-                </span>
-          </template>
-          <div class="buttonGroup" v-if="item.id === 'all'">
-            <el-button-group>
-              <el-button type="plain" size="small" @click="changeHeight('D')"
-                         :class="allHeight === 'D' ? 'showSty' : ''">大图标
-              </el-button>
-              <el-button type="plain" size="small" @click="changeHeight('Z')"
-                         :class="allHeight === 'Z' ? 'showSty' : ''">中图标
-              </el-button>
-              <el-button type="plain" size="small" @click="changeHeight('X')"
-                         :class="allHeight === 'X' ? 'showSty' : ''">小图标
-              </el-button>
-            </el-button-group>
-          </div>
-          <div v-if="item.id === 'all'" :style="allpageHeight"
-               style="width: 100%;display: inline-block;overflow-y:auto">
-            <div v-for="(item, index) in allSvgMsgData" :key="index" :style="getStyle(allHeight)">
-              <div class="showAllSvgMsg" @dblclick="dblgetSvgDataFn(item.id)" :class="getWarnstyle(item)">
-                <div class="showAllSvgMsg_top" v-html="item.msg"></div>
-                <div class="showAllSvgMsg_bot">
-                  <span>{{ item.name }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div id="svg" :style="pageHeight" v-if="item.id !== 'all' && item.id === activeTab" v-html="svgMsg" v-loading="loading"></div>
-          <BHB ref="svgRef" v-if="item.id === 'SXJ_KGDL_BHBF01_SBS'"/>
-          <BHBSQ ref="svgRef" v-if="item.id === 'SXJ_KGDL_BHB3F01_SBS'"/>
-          <DJY ref="svgRef" v-if="item.id === 'SXJ_KGDL_DJYF01_SBS'"/>
-          <GJY ref="svgRef" v-if="item.id === 'SXJ_KGDL_GJYF01_SBS'"/>
-          <HSM ref="svgRef" v-if="item.id === 'SXJ_KGDL_HSMF01_SBS'"/>
-          <MLJ ref="svgRef" v-if="item.id === 'NMM_KGDL_MLJF01_SBS'"/>
-          <NJL ref="svgRef" v-if="item.id === 'SXJ_KGDL_NJLF01_SBS'"/>
-          <PDL ref="svgRef" v-if="item.id === 'SXJ_KGDL_PDLF01_SBS'"/>
-          <PTZ ref="svgRef" v-if="item.id === 'SXJ_KGDL_PTZF01_SBS'"/>
-          <XWT ref="svgRef" v-if="item.id === 'SXJ_KGDL_XWTF01_SBS'"/>
-          <YF ref="svgRef" v-if="item.id === 'SXJ_KGDL_YFF01_SBS'"/>
-          <YLZ ref="svgRef" v-if="item.id === 'SXJ_KGDL_YLZF01_SBS'"/>
-          <YTY ref="svgRef" v-if="item.id === 'SXJ_KGDL_YTYF01_SBS'"/>
-          <ZK ref="svgRef" v-if="item.id === 'SXJ_KGDL_ZKF01_SBS'"/>
-          <FSSJS ref="svgRef" v-if="item.id === 'SXJ_KGDL_FSG01_SBS'"/>
-          <FSJR ref="svgRef" v-if="item.id === 'SXJ_KGDL_JRG01_SBS'"/>
-          <HRCC ref="svgRef" v-if="item.id === 'SXJ_KGDL_HRG01_SBS'"/>
-          <PLZH ref="svgRef" v-if="item.id === 'SXJ_KGDL_PLG01_SBS'"/>
-          <SYRX ref="svgRef" v-if="item.id === 'SXJ_KGDL_SYG01_SBS'"/>
-          <TZXS ref="svgRef" v-if="item.id === 'SXJ_KGDL_TZG01_SBS'"/>
-          <TLYY ref="svgRef" v-if="item.id === 'SXJ_KGDL_TLG01_SBS'"/>
-          <YGWJB ref="svgRef" v-if="item.id === 'SXJ_KGDL_YGG01_SBS'"/>
-          <YXJH ref="svgRef" v-if="item.id === 'SXJ_KGDL_YXG01_SBS'"/>
-          <YYYW ref="svgRef" v-if="item.id === 'SXJ_KGDL_YYG01_SBS'"/>
-          <div class="alarmIconBox" v-if="item.id !== 'all'" @click="switchAlarmSound(index)">
-            <el-tooltip
-                v-if="item.isMute"
-                effect="light"
-                :content="`当前${item.name}升压站报警已消音，请注意`"
-                placement="left"
-            >
-              <i
-                  class="el-icon-close-notification"
-                  style="color: orangered"
-              ></i>
-            </el-tooltip>
-            <i v-else class="el-icon-bell" style="color: rgb(219, 215, 0)"></i>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-<!--      <CurrentWarningCard-->
-<!--          :currentClass="$store.state.currentWarningCardClass"-->
-<!--          :activeTab="activeTab || 'MHS_FDC'"-->
-<!--          v-if="activeTab !== 'all'"-->
-<!--      />-->
-    </div>
-<!--  </el-dialog>-->
-</template>
-
-<script>
-import BHB from "../factoryMonitor/windPowerPlant/boosterStation/components/BHB.vue";
-import BHBSQ from "../factoryMonitor/windPowerPlant/boosterStation/components/BHBSQ.vue";
-import DJY from "../factoryMonitor/windPowerPlant/boosterStation/components/DJY.vue";
-import GJY from "../factoryMonitor/windPowerPlant/boosterStation/components/GJY.vue";
-import HSM from "../factoryMonitor/windPowerPlant/boosterStation/components/HSM.vue";
-import MLJ from "../factoryMonitor/windPowerPlant/boosterStation/components/MLJ.vue";
-import NJL from "../factoryMonitor/windPowerPlant/boosterStation/components/NJL.vue";
-import PDL from "../factoryMonitor/windPowerPlant/boosterStation/components/PDL.vue";
-import PTZ from "../factoryMonitor/windPowerPlant/boosterStation/components/PTZ.vue";
-import XWT from "../factoryMonitor/windPowerPlant/boosterStation/components/XWT.vue";
-import YF from "../factoryMonitor/windPowerPlant/boosterStation/components/YF.vue";
-import YLZ from "../factoryMonitor/windPowerPlant/boosterStation/components/YLZ.vue";
-import YTY from "../factoryMonitor/windPowerPlant/boosterStation/components/YTY.vue";
-import ZK from "../factoryMonitor/windPowerPlant/boosterStation/components/ZK.vue";
-import FSSJS from "../factoryMonitor/photovoltaic/lightBoosterStation/components/fangshansunjiashan.vue";
-import FSJR from "../factoryMonitor/photovoltaic/lightBoosterStation/components/fanshijunran.vue";
-import HRCC from "../factoryMonitor/photovoltaic/lightBoosterStation/components/huairenchuchen.vue";
-import PLZH from "../factoryMonitor/photovoltaic/lightBoosterStation/components/pingluzuhu.vue";
-import SYRX from "../factoryMonitor/photovoltaic/lightBoosterStation/components/shanyinrongxin.vue";
-import TZXS from "../factoryMonitor/photovoltaic/lightBoosterStation/components/tianzhenxusheng.vue";
-import TLYY from "../factoryMonitor/photovoltaic/lightBoosterStation/components/tunliuwuyuan.vue";
-import YGWJB from "../factoryMonitor/photovoltaic/lightBoosterStation/components/yanggaoweijiabao.vue";
-import YXJH from "../factoryMonitor/photovoltaic/lightBoosterStation/components/yingxianjinghui.vue";
-import YYYW from "../factoryMonitor/photovoltaic/lightBoosterStation/components/youyuyouwei.vue";
-
-import api from "@api/stateMonitor/index.js";
-import CurrentWarningCard from "./currentWarningCard.vue";
-
-export default {
-  props: {
-    activeTabStation: {
-      type: String,
-      default: "",
-    },
-  },
-  components: {
-    BHB,
-    BHBSQ,
-    DJY,
-    GJY,
-    HSM,
-    MLJ,
-    NJL,
-    PDL,
-    PTZ,
-    XWT,
-    YF,
-    YLZ,
-    YTY,
-    ZK,
-    FSSJS,
-    FSJR,
-    HRCC,
-    PLZH,
-    SYRX,
-    TZXS,
-    TLYY,
-    YGWJB,
-    YXJH,
-    YYYW,
-    // CurrentWarningCard
-  },
-  data() {
-    return {
-      activeTab: this.$store.state.activeTab,
-      svgVisible: true,
-      audio: null,
-      timmer: null,
-      syzArray: [],
-      pageshowMode: 0,
-      svgMsg: '',
-      loading: false,
-      allTagidArr: [],
-      starTimer: null,
-      allTagsMS: {},
-      allrefreshData: {},
-      allConditions: {},
-      onlytag: {},
-      allSvgMsgData: [],
-      allHeight: 'D',
-      allWarnData: [],
-      starTimerWarn: null,
-      numm: 0,
-      stationSort: []
-    };
-  },
-  computed: {
-    pageHeight() {
-      return {
-        'height': document.documentElement.clientHeight - 60 + 'px'
-      }
-    },
-    allpageHeight() {
-      return {
-        'height': document.documentElement.clientHeight - 200 + 'px'
-      }
-    },
-  },
-  created() {
-    this.opened()
-  },
-  updated() {
-  },
-  methods: {
-    // 获取升压站报警数据
-    getSyzWarnData() {
-      api.alarmFault().then((res) => {
-        if (res && res.data) {
-          let datas = res.data
-          let arr = []
-          datas.forEach(it => {
-            if (it.rank === '5' && it.category1 === 'SYZ') {
-              // if (it.stationName.indexOf('风电场') !== -1 ) {
-              //     str = it.stationName.substring(0, it.stationName.indexOf('风电场'))
-              // } else if (it.stationName.indexOf('光伏电站') !== -1) {
-              //     str = it.stationName.substring(0, it.stationName.indexOf('光伏电站'))
-              // }
-              arr.push(it.category2)
-            }
-            // let str = ''
-          })
-          this.allWarnData = this.unique(arr)
-        }
-      })
-    },
-    unique(arr) {
-      let newArr = []
-      for (let i = 0; i < arr.length; i++) {
-        if (newArr.indexOf(arr[i]) === -1) {
-          newArr.push(arr[i])
-        }
-      }
-      return newArr
-    },
-    getWarnstyle(item) {
-      let showWarn = ''
-      this.allWarnData.forEach(it => {
-        if (it === item.id) {
-          showWarn = 'warningMaskNew'
-        }
-      })
-      return showWarn
-    },
-    getStyle(type) {
-      let num = null
-      let num1 = null
-      let num2 = null
-      if (type === 'D') {
-        return {
-          'width': '33.3%',
-          'float': 'left',
-          'height': '400px'
-        }
-      } else if (type === 'Z') {
-        num = parseInt(this.allSvgMsgData.length / 4)
-        num1 = this.allSvgMsgData.length % 4
-        num2 = num1 > 0 ? num + 1 : num
-        return {
-          'width': '25%',
-          'float': 'left',
-          'height': (document.documentElement.clientHeight - 200) / num2 + 'px'
-        }
-      } else {
-        num = parseInt(this.allSvgMsgData.length / 5)
-        num1 = this.allSvgMsgData.length % 5
-        num2 = num1 > 0 ? num + 1 : num
-        return {
-          'width': '20%',
-          'float': 'left',
-          'height': (document.documentElement.clientHeight - 200) / num2 + 'px'
-        }
-      }
-
-    },
-    changeHeight(type) {
-      this.allHeight = type
-    },
-    getAllStationtab() {
-      let obj = {
-        id: 'all',
-        name: '全部'
-      }
-      api.getAllStationTab().then((res) => {
-        if (res && res.data) {
-          res.data.unshift(obj)
-          this.syzArray = res.data
-          this.activeTab = res.data[0].id
-          if (this.activeTab === 'all') {
-            let allMsg = res.data
-            this.allSvgMsgData = []
-            this.stationSort = []
-            allMsg.forEach(it => {
-              if (it.id !== 'all') {
-                this.stationSort.push(it.name)
-                this.getallSvgDataFn(it.id, it.name)
-              }
-            })
-            // window.sessionStorage.setItem('allSvgData', [])
-            console.log('allSvgMsgData', this.allSvgMsgData)
-            console.log('stationSort', this.stationSort)
-            console.log('allMsg', allMsg)
-          }
-
-          // this.getSvgDataFn(res.data[0].id)
-        }
-      })
-    },
-    // 获取所有升压站数据
-    getallSvgDataFn(id, name) {
-      let params = {
-        id: id
-      }
-      api.getSvgData(params).then((res) => {
-        let str = ''
-        // str = res.data.substring(res.data.indexOf('<svg'))
-        str = res
-        str = str.replace('<svg', '<svg viewBox="0 -100 1900 1260"')
-        let obj = {
-          id: id,
-          name: name,
-          msg: str
-        }
-        this.allSvgMsgData.push(obj)
-        if (this.allSvgMsgData.length === this.stationSort.length) {
-          let sortArr = []
-          this.stationSort.forEach(itc => {
-            this.allSvgMsgData.forEach(itb => {
-              if (itc === itb.name) {
-                sortArr.push(itb)
-              }
-            })
-          })
-          this.allSvgMsgData = sortArr
-        }
-      })
-    },
-    // 获取升压站数据
-    getSvgDataFn(val) {
-      this.svgMsg = ''
-      this.loading = true
-      let params = {
-        id: val
-      }
-      api.getSvgData(params).then((res) => {
-        if (res && res.data) {
-          let str = ''
-          str = res.data.substring(res.data.indexOf('<svg'))
-          str = str.replace('<svg', '<svg viewBox="0 0 1900 1260"')
-          this.svgMsg = str
-          let html = document.getElementById('svg')
-          let svg1 = document.getElementsByTagName('svg')
-          this.$nextTick(() => {
-            if (svg1) {
-              let allTags = []
-              let allTagsxc = []
-              let status = ['g', 'text', 'rect', 'line', 'polyline', 'circle', 'ellipse', 'polygon']
-              status.forEach(it => {
-                let allgs = []
-                allgs = document.querySelectorAll(it);
-                allTags.push(allgs)
-              })
-              allTags = [...allTags[0], ...allTags[1], ...allTags[2], ...allTags[3], ...allTags[4], ...allTags[5], ...allTags[6], ...allTags[7]]
-              allTags.forEach((it) => {
-                if (it.getAttribute("tagid")) {
-                  allTagsxc.push(it);
-                }
-              });
-              console.log('allTags222=>', allTagsxc)
-              this.allTagidArr = allTagsxc
-              this.getSvgInfo()
-            }
-            console.log('html111=>', html)
-          })
-          this.loading = false
-        }
-      })
-    },
-    // 获取触发器
-    getSvgInfo() {
-      let params = {
-        id: this.activeTab
-      }
-      api.getAllStationSvgInfo(params).then((res) => {
-        if (res && res.data) {
-          if (res.data.tags) {
-            let strarr = []
-            let str = ''
-            for (let i in res.data.tags) {
-              strarr.push(res.data.tags[i].tag)
-            }
-            str = strarr.join(',')
-            this.allTagsMS = res.data.tags
-            this.allConditions = res.data.conditions
-            // this.getrefreshData(str)
-            this.starTimer = setInterval(() => {
-              this.getrefreshData(str)
-            }, 1000)
-          }
-          console.log('SvgInfo333=>', res)
-        }
-      })
-    },
-    // 获取根盾数据
-    getrefreshData(val) {
-      api.refreshData(val).then((res) => {
-        if (res && res.data) {
-          this.allrefreshData = res.data
-          this.refreshDataFn(this.allTagsMS)
-        }
-        console.log('refreshData444=>', res)
-      })
-    },
-    // 刷新数据
-    refreshDataFn(datas) {
-      for (let it in datas) {
-        let tagId = datas[it];
-        this.toRefreshFn(it, tagId);
-      }
-    },
-    // 刷新自定义组件
-    toRefreshFn(val, data) {
-      var tag = this.allrefreshData[data.tag];
-      if (!tag) return;
-      this.allTagidArr.forEach(it => {
-        this.onlytag = {}
-        if (it.attributes.tagid) {
-          if (val === it.attributes.tagid.value) {
-            this.onlytag = it
-            if (it.nodeName === 'polyline') {
-              console.log('onlyTag666', this.onlytag)
-            }
-            if (it.nodeName !== 'text') {
-              if (this.onlytag.attributes.csid) {
-                let csid = this.onlytag.attributes.csid.value.split(';')
-                csid.forEach(ic => {
-                  if (ic) {
-                    if (!this.allConditions[ic].isBinding) {
-                      let num = parseInt(this.allConditions[ic].value) === 0 ? '0' : parseInt(this.allConditions[ic].value)
-                      if (num) {
-                        let num2 = tag.value === 0 ? '0' : tag.value
-                        if (num === num2) {
-                          this.onlytag.setAttribute(this.allConditions[ic].property, this.allConditions[ic].propertyValue)
-                          return
-                        }
-                      }
-                    } else {
-                      this.onlytag.setAttribute(this.allConditions[ic].property, this.allConditions[ic].propertyValue)
-                    }
-                  }
-                })
-              }
-            } else {
-              this.onlytag.textContent = tag.value.toFixed(2)
-            }
-          }
-        }
-      })
-      // console.log('onlyTag555', this.onlytag)
-    },
-    // '全部'界面双击事件
-    dblgetSvgDataFn(name) {
-      this.activeTab = name
-      // this.getSvgDataFn(name)
-    },
-    // 初始化第一次报警并判断是否播放声音
-    initAlarm() {
-      let syzAlarmArray = this.$store.getters.syzAlarmArray;
-
-      const firstAlarmItem = syzAlarmArray.find((ele) => {
-        return !ele.isConfirm && ele.rank === this.$store.state.syzAlarmRank;
-      });
-
-      firstAlarmItem &&
-      this.audioPlay(this.getSound(firstAlarmItem.soundSource));
-
-      firstAlarmItem &&
-      this.$store.getters.syzAlarmArray.forEach((ele) => {
-        if (ele.stationId === firstAlarmItem.stationId) {
-          ele.isConfirm = true;
-        }
-      });
-
-      this.activeTab =
-          this.activeTabStation ||
-          firstAlarmItem?.stationId ||
-          syzAlarmArray.find((ele) => {
-            return ele.rank === this.$store.state.syzAlarmRank;
-          })?.stationId ||
-          this.$store.getters.syzArray[0].id;
-
-      syzAlarmArray.forEach((ele) => {
-        if (ele.stationId === firstAlarmItem?.stationId) {
-          ele.isConfirm = true;
-          this.clearWarningTag(ele.stationId);
-        } else if (
-            !ele.isConfirm &&
-            ele.stationId !== firstAlarmItem?.stationId
-        ) {
-          this.renderWarningTag(ele.stationId);
-        }
-      });
-
-      this.$store.commit("syzAlarmArray", syzAlarmArray);
-    },
-
-    // 定时器循环数据判断小红点渲染及是否播放声音
-    renderAlarm(stationId = "", playSound = true) {
-      let syzAlarmArray = this.$store.getters.syzAlarmArray;
-
-      syzAlarmArray.forEach((ele) => {
-        if (ele.stationId === stationId) {
-          ele.isConfirm = true;
-          this.clearWarningTag(ele.stationId);
-        } else if (!ele.isConfirm && ele.stationId !== stationId) {
-          this.renderWarningTag(ele.stationId);
-        }
-      });
-
-      const res = syzAlarmArray.find((ele) => {
-        return !ele.isConfirm;
-      });
-
-      if (playSound) {
-        // this.audioPlay("./static/sound/syz.mp3");
-      }
-
-      this.$store.commit("syzAlarmArray", syzAlarmArray);
-    },
-
-    // 返回音频文件路径
-    getSound(fileName) {
-      return `./static/sound/${fileName}.mp3`;
-    },
-
-    // 播放音频
-    audioPlay(audioPath) {
-      let soundMuteSelf = [];
-      let soundMuteOther = [];
-
-      this.$store.getters.syzAlarmArray.forEach((ele) => {
-        if (ele.stationId === this.activeTab) {
-          soundMuteSelf.push(ele);
-        } else {
-          soundMuteOther.push(ele);
-        }
-      });
-
-      let alarmSelfLock = soundMuteSelf.some((ele) => {
-        return !ele.isConfirm;
-      });
-
-      let alarmOtherLock = soundMuteOther.some((ele) => {
-        return !ele.isConfirm;
-      });
-
-      if (alarmOtherLock) {
-        this.audio = new Audio(audioPath);
-        this.audio.play();
-      } else if (alarmSelfLock) {
-        this.$store.getters.syzArray.forEach((ele) => {
-          if (ele.stationId === this.activeTab) {
-            ele.isMute = false;
-            this.audio = new Audio(audioPath);
-            this.audio.play();
-          }
-        });
-      } else if (!alarmSelfLock) {
-        this.$store.getters.syzArray.forEach((ele) => {
-          if (ele.stationId === this.activeTab) {
-            if (!ele.isMute) {
-              this.audio = new Audio(audioPath);
-              this.audio.play();
-            }
-          }
-        });
-      }
-    },
-
-    // 显示某个小红点
-    renderWarningTag(stationId = "") {
-      this.$store.getters.syzArray.forEach((ele) => {
-        if (ele.id === stationId) {
-          ele.isWarning = "1";
-        }
-      });
-      this.pageshowMode++;
-    },
-
-    // 清除某个小红点
-    clearWarningTag(stationId = "") {
-      this.$store.getters.syzArray.forEach((ele) => {
-        if (ele.id === stationId) {
-          ele.isWarning = "0";
-        }
-      });
-      this.pageshowMode++;
-    },
-
-    // 切换报警声音开关
-    switchAlarmSound(index) {
-      this.$store.getters.syzArray[index].isMute =
-          !this.$store.getters.syzArray[index].isMute;
-    },
-
-    opened() {
-      // this.initAlarm();
-      this.getAllStationtab()
-      /*this.timmer = setInterval(() => {
-        this.renderAlarm();
-      }, 3000);
-
-      let starTimerWarn = setInterval(() => {
-        this.getSyzWarnData()
-      }, 2000)
-      if (this.activeTabStation) {
-        setTimeout(() => {
-          clearInterval(this.starTimer);
-          this.starTimer = null;
-          this.$store.commit("activeTab", this.activeTabStation);
-          this.renderAlarm(this.activeTabStation, false);
-          if (this.activeTabStation !== 'all') {
-            this.activeTab = this.activeTabStation
-            this.debounce(this.getSvgDataFn(this.activeTabStation), 200)
-          }
-        }, 100);
-      }*/
-    },
-
-    closed() {
-      // this.$refs.svgRef[0].closed()
-      // this.$refs.svgRef[1].closed()
-      // this.$refs.svgRef[2].closed()
-      // this.$refs.svgRef[3].closed()
-      // this.$refs.svgRef[4].closed()
-      clearInterval(this.starTimer);
-      clearInterval(this.starTimerWarn);
-      clearInterval(this.timmer);
-      this.starTimer = null
-      this.starTimerWarn = null
-      this.timmer = null;
-      this.$store.commit("activeTab", "");
-      this.$store.commit("syzDialogShow", false);
-    },
-
-    tabClick(res) {
-      // clearInterval(this.starTimer);
-      // this.starTimer = null;
-      // this.$store.commit("activeTab", res.props.name);
-      /*this.renderAlarm(res.props.name, false);
-      if (res.props.name !== 'all') {
-        this.debounce(this.getSvgDataFn(res.props.name), 200)
-        // this.getSvgDataFn(res.props.name)
-      }*/
-    },
-    debounce(fn, delay) {
-      var delay = delay || 200;
-      var timer;
-      return function () {
-        var th = this;
-        var args = arguments;
-        if (timer) {
-          clearTimeout(timer);
-        }
-        timer = setTimeout(function () {
-          timer = null;
-          fn.apply(th, args);
-        }, delay);
-      };
-    },
-    throttle(fn, interval) {
-      var last;
-      var timer;
-      var interval = interval || 200;
-      return function () {
-        var th = this;
-        var args = arguments;
-        var now = +new Date();
-        if (last && now - last < interval) {
-          clearTimeout(timer);
-          timer = setTimeout(function () {
-            last = now;
-            fn.apply(th, args);
-          }, interval);
-        } else {
-          last = now;
-          fn.apply(th, args);
-        }
-      }
-    }
-  },
-  watch: {
-    "$store.state.syzArray"(res) {
-      this.syzArray = res;
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.bodyy {
-  display: flex;
-  flex-direction: row;
-  background-color: black;
-  width: 98%;
-  margin-top: -30px;
-  height: 90vh;
-  position: relative;
-  overflow: hidden;
-  margin-left: 44px;
-
-  .syzDetailsPaneItem {
-    position: relative;
-
-    .buttonGroup {
-      margin-bottom: 10px;
-      display: flex;
-      // justify-content: end;
-      float: right;
-
-      .el-button-group {
-        .el-button {
-          min-height: 30px !important;
-        }
-
-        .showSty {
-          color: #409eff;
-          border-color: #c6e2ff;
-          background-color: #ecf5ff;
-          outline: 0;
-        }
-      }
-    }
-
-    .warningMaskNew {
-      background-color: rgba(186, 50, 55, 0.5);
-      animation: fade 2000ms infinite;
-      -webkit-animation: fade 2000ms infinite;
-    }
-
-    @keyframes fade {
-      from {
-        opacity: 0.7;
-      }
-
-      50% {
-        opacity: 0.3;
-      }
-
-      to {
-        opacity: 0.7;
-      }
-    }
-
-    @-webkit-keyframes fade {
-      from {
-        opacity: 0.7;
-      }
-
-      50% {
-        opacity: 0.3;
-      }
-
-      to {
-        opacity: 0.7;
-      }
-    }
-
-    .showAllSvgMsg {
-      width: calc(100% - 15px);
-      height: calc(100% - 15px);
-      // padding: 20px;
-      // margin-bottom: 20px;
-      // background: #3a3a3a;
-      // border: 3px solid #3a3a3a;
-      border: 3px solid #646464;
-      border-radius: 10px;
-
-      .showAllSvgMsg_top {
-        border-radius: 10px 10px 0 0;
-        height: calc(100% - 40px);
-        width: 100%;
-        // background: #fff;
-      }
-
-      .showAllSvgMsg_bot {
-        background: #3a3a3a;
-        border-radius: 0 0 8px 8px;
-        height: 40px;
-        text-align: center;
-
-        span {
-          position: relative;
-          top: 10px;
-          font-weight: bold;
-          color: #fff;
-        }
-      }
-    }
-
-    .alarmIconBox {
-      position: absolute;
-      right: 0;
-      top: 0;
-      cursor: pointer;
-
-      i {
-        font-size: 20px;
-      }
-    }
-  }
-}
-</style>
-<style lang="less">
-.bodyy {
-  .pop-up-main,
-  .paln-box {
-    width: 100%;
-    height: 90vh;
-    overflow: hidden;
-    position: relative;
-  }
-
-  .movableItem {
-    // width: 1920PX !important;
-    // height: 800PX !important;
-
-    .svg {
-      //   width: 100%;
-      //   height: 92%;
-      margin-left: 0;
-      margin-top: 8%;
-    }
-  }
-
-  .el-badge__content.is-fixed.is-dot {
-    right: 0;
-    top: 10px;
-    background: #f25656;
-    animation: twinkle 0.75s infinite;
-    border-color: transparent;
-  }
-
-  @keyframes twinkle {
-    0% {
-      opacity: 0;
-    }
-    50% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-}
-
-.currentShowTitles {
-  width: 100%;
-  position: relative;
-
-  .alarIcon {
-    position: absolute;
-    right: 50px;
-    top: 5;
-    font-size: 20px;
-    cursor: pointer;
-  }
-}
-
-</style>