fd_dwgz_zhyw_nx/src/views/SandTable/SandTable.vue

<template>
  <!-- padding: 0 10px; -->
  <div style="width: 100%; height: 100%">
    <div
      class="sand-table"
      id="sandTable"
      v-if="$route.path === '/integratedAlarm'"
    >
      <!-- <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud" /> -->
      <StBack></StBack>
      <ThreeModel1
        class="three-model-layer"
        :data="mapSource"
        @when="when"
        @clickMapItem="clickMapItem"
      >
      </ThreeModel1>
      <!-- <img :src="require('@/assets/png/3dback.png')" class="i3dback" /> -->
      <!-- v-if="showPanel" -->
      <!-- 第一机组 -->
      <div class="sand-table-left">
        <PanelSand
          class="left-panel"
          :style="isFullScreen ? 'height: 26vh' : 'height: 27vh'"
          title="停机信息-中车"
        >
          <template v-slot:tools>
            <div class="exchange" @click="changeBjSwitch('left')">
              <span :class="bjSwitch ? 'gray' : 'white'">故障</span>
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span :class="bjSwitch ? 'white' : 'gray'">检修</span>
            </div>
          </template>
          <RankTable
            :data="selsZC"
            @rowClick="clickStopRow('left')"
            height="20vh"
          ></RankTable>
        </PanelSand>
        <PanelSandToolbar
          class="right-panel mg-t-16"
          :style="isFullScreen ? 'height: 19vh' : 'height: 22vh'"
          title="预警情况"
        >
          <template v-slot:tools>
            <div class="exchange">
              <span
                :class="warnSwitch === 'z' ? 'white' : 'gray'"
                @click="changeWarnSwitch('z')"
                >周</span
              >
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span
                :class="warnSwitch === 'y' ? 'white' : 'gray'"
                @click="changeWarnSwitch('y')"
                >月</span
              >
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span
                :class="warnSwitch === 'n' ? 'white' : 'gray'"
                @click="changeWarnSwitch('n')"
                >年</span
              >
            </div>
          </template>
          <template v-slot:toolsL>
            <div class="exchange">
              <span
                :class="warnPC ? 'white' : 'gray'"
                @click="changeWarnPC('left')"
                >频次</span
              >
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span
                :class="warnPC ? 'gray' : 'white'"
                @click="changeWarnPC('left')"
                >时长</span
              >
            </div>
          </template>
          <template v-slot:default>
            <RadarPieChart
              height="18vh"
              :list="warnChartDataZC"
              :title="warnPC ? '预警频次情况' : '预警时长情况'"
              :unit="warnPC ? '次' : '秒'"
            />
          </template>
        </PanelSandToolbar>
        <PanelSandToolbar
          class="right-panel mg-t-16"
          :style="isFullScreen ? 'height: 19vh' : 'height: 22vh'"
          title="故障情况"
          style="cursor: pointer"
        >
          <template v-slot:tools>
            <div
              style="
                position: absolute;
                left: -115px;
                top: -5px;
                width: 100px;
                height: 30px;
              "
              @click.stop="clickTime('WT2000D121H85')"
            ></div>
            <div class="exchange">
              <span
                :class="probSwitch === 'z' ? 'white' : 'gray'"
                @click.stop="changeProbSwitch('z')"
                >周</span
              >
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span
                :class="probSwitch === 'y' ? 'white' : 'gray'"
                @click.stop="changeProbSwitch('y')"
                >月</span
              >
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span
                :class="probSwitch === 'n' ? 'white' : 'gray'"
                @click.stop="changeProbSwitch('n')"
                >年</span
              >
            </div>
          </template>
          <template v-slot:toolsL>
            <div class="exchange">
              <span
                :class="probPC ? 'white' : 'gray'"
                @click.stop="changeProbPC('left')"
                >频次</span
              >
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span
                :class="probPC ? 'gray' : 'white'"
                @click.stop="changeProbPC('left')"
                >时长</span
              >
            </div>
          </template>
          <template v-slot:default>
            <!-- <RadarPieChartCom height="18vh" :list="probChartData" title="故障情况" /> -->
            <RadarPieChart
              height="18vh"
              :list="probChartDataZC"
              :title="probPC ? '故障频次情况' : '故障时长情况'"
              :unit="probPC ? '次' : '秒'"
            />
          </template>
        </PanelSandToolbar>
      </div>
      <!-- <div></div>
             v-if="showPanel" -->
      <!-- 第二机组 -->
      <div class="sand-table-right">
        <PanelSand class="left-panel" title="停机信息-联合动力">
          <template v-slot:tools>
            <div class="exchange" @click="changeBjSwitch('right')">
              <span :class="bjSwitch2 ? 'gray' : 'white'">故障</span>
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span :class="bjSwitch2 ? 'white' : 'gray'">检修</span>
            </div>
          </template>
          <RankTable
            :data="selsLH"
            @rowClick="clickStopRow('right')"
            height="20vh"
          ></RankTable>
        </PanelSand>
        <PanelSandToolbar
          class="right-panel mg-t-16"
          :style="isFullScreen ? 'height: 19vh' : 'height: 22vh'"
          title="预警情况"
        >
          <template v-slot:tools>
            <div class="exchange">
              <span
                :class="warnSwitch2 === 'z' ? 'white' : 'gray'"
                @click="changeWarnSwitch2('z')"
                >周</span
              >
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span
                :class="warnSwitch2 === 'y' ? 'white' : 'gray'"
                @click="changeWarnSwitch2('y')"
                >月</span
              >
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span
                :class="warnSwitch2 === 'n' ? 'white' : 'gray'"
                @click="changeWarnSwitch2('n')"
                >年</span
              >
            </div>
          </template>
          <template v-slot:toolsL>
            <div class="exchange">
              <span
                :class="warnPC2 ? 'white' : 'gray'"
                @click="changeWarnPC('right')"
                >频次</span
              >
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span
                :class="warnPC2 ? 'gray' : 'white'"
                @click="changeWarnPC('right')"
                >时长</span
              >
            </div>
          </template>
          <template v-slot:default>
            <RadarPieChart
              height="18vh"
              :list="warnChartDataLH"
              :title="warnPC2 ? '预警频次情况' : '预警时长情况'"
              :unit="warnPC2 ? '次' : '秒'"
            />
          </template>
        </PanelSandToolbar>
        <PanelSandToolbar
          class="right-panel mg-t-16"
          :style="isFullScreen ? 'height: 19vh' : 'height: 22vh'"
          title="故障情况"
        >
          <template v-slot:tools>
            <div
              style="
                position: absolute;
                left: -115px;
                top: -5px;
                width: 100px;
                height: 30px;
                cursor: pointer;
              "
              @click.stop="clickTime('UP2000-130')"
            ></div>
            <div class="exchange">
              <span
                :class="probSwitch2 === 'z' ? 'white' : 'gray'"
                @click.stop="changeProbSwitch2('z')"
                >周</span
              >
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span
                :class="probSwitch2 === 'y' ? 'white' : 'gray'"
                @click.stop="changeProbSwitch2('y')"
                >月</span
              >
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span
                :class="probSwitch2 === 'n' ? 'white' : 'gray'"
                @click.stop="changeProbSwitch2('n')"
                >年</span
              >
            </div>
          </template>
          <template v-slot:toolsL>
            <div class="exchange">
              <span
                :class="probPC2 ? 'white' : 'gray'"
                @click.stop="changeProbPC('right')"
                >频次</span
              >
              <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
              <span
                :class="probPC2 ? 'gray' : 'white'"
                @click.stop="changeProbPC('right')"
                >时长</span
              >
            </div>
          </template>
          <template v-slot:default>
            <!-- <RadarPieChartCom height="18vh" :list="probChartData" title="故障情况" style="cursor: pointer" /> -->
            <RadarPieChart
              height="18vh"
              :list="probChartDataLH"
              :title="probPC ? '故障频次情况' : '故障时长情况'"
              :unit="probPC ? '次' : '秒'"
            />
          </template>
        </PanelSandToolbar>
      </div>
      <div class="footer" :style="isFullScreen ? 'bottom: 1%' : 'bottom: 2%'">
        <div class="hover72Power">
          <div
            id="problem1"
            class="cur"
            style="width: 100%; height: 100%"
          ></div>
          <div class="hidBtn" @click="clickTime('WT2000D121H85')"></div>
        </div>
        <div class="monthPower">
          <div
            id="problem2"
            class="cur"
            style="width: 100%; height: 100%"
          ></div>
          <div class="hidBtn" @click="clickTime('UP2000-130')"></div>
        </div>
      </div>

      <el-dialog
        v-model="noTimeDialog"
        :custom-class="noTimeDialogsc"
        width="80%"
      >
        <template #title>
          <div class="dialogTitle">
            <span style="margin-left: 10px">非停时长占比与故障次数</span>
          </div>
        </template>
        <div class="allStyle">
          <div class="radioGroupTime">
            <el-date-picker
              v-model="radioTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD HH:mm:ss"
            >
            </el-date-picker>
            <el-radio-group v-model="radioGroup" @change="changeRadio">
              <el-radio :label="1">按日</el-radio>
              <el-radio :label="2">按月</el-radio>
            </el-radio-group>
          </div>
          <div class="allMain">
            <!-- <span class="mainTit">2025-01-{{it}}</span> -->
            <div class="allMsg">
              <div class="warnLine">
                <RadarLineChartCom
                  width="45vw"
                  height="50vh"
                  :xAxis="problem3.xAxis"
                  :series="problem3.series"
                />
              </div>
              <div class="warnPie">
                <RadarPieChartCom
                  width="30vw"
                  height="50vh"
                  :list="probChartData"
                  title="非停时长占比"
                  style="cursor: pointer"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="dialogVisible = false">
                        Confirm
                        </el-button>
                    </div>
                </template> -->
      </el-dialog>
      <el-dialog
        v-model="showTableDialog"
        :custom-class="noTimeDialogsc"
        width="80%"
      >
        <template #title>
          <div class="dialogTitle">
            <span style="margin-left: 10px">停机信息</span>
          </div>
        </template>
        <div class="warnTable">
          <el-table
            size="mini"
            :data="tableData"
            style="width: 100%; height: calc(100% - 310px)"
            max-height="520px"
            stripe
          >
            <el-table-column
              v-for="item in tableHeader"
              :label="item.name"
              :prop="item.code"
              :key="item.code"
              :width="item.width || ''"
              show-overflow-tooltip
              header-align="center"
              align="center"
            >
              <template #default="scope">
                <span v-if="item.code == 'status'">
                  <span :style="scope.row.status === 0 ? 'color: red' : ''">{{
                    scope.row.status === 0 ? "异常" : "正常"
                  }}</span>
                </span>
                <span v-else>
                  {{
                    scope.row[item.code] != "NULL" ? scope.row[item.code] : ""
                  }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>
    <router-view v-else />
  </div>
</template>

<script>
import ThreeModel1 from "./component/ThreeModel1.vue";
import PanelSand from "@com/coms/panel/panel-sand.vue";
import PanelSandToolbar from "@com/coms/panel/panel-sand-toolbar.vue";
import StBack from "./component/st-back.vue";
import RankTable from "./component/rank-table.vue";
import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
import RadarPieChartCom from "./component/radar-pie-chart.vue";
import RadarLineChartCom from "./component/radar-line-chart.vue";
import dataJson from "./component/dataBJJson.json";
import dayjs from "dayjs";
import { onBeforeRouteLeave } from "vue-router";
import { alarm_history } from "@/api/zhbj/index.js";
import {
  apiGetqueryshutdowneventlist,
  apiGetfindCtFeatureStat,
  apiGetqueryShutdownEvent2ByType,
  apiGetqueryShutdownEvent2ByDay,
  apiGetqueryShutdownEvent2ByMonth,
  apiGetqueryShutdownEvent2ByMap,
} from "@/api/sandtable/index.js";
import jsonData from "./component/data.json";
import jsonDataHT from "./component/dataHTjson.json";
export default {
  // 名称
  name: "SandTable",
  // 使用组件
  components: {
    ThreeModel1,
    PanelSand,
    PanelSandToolbar,
    RadarPieChart,
    StBack,
    RankTable,
    RadarPieChartCom,
    RadarLineChartCom,
  },
  // 数据
  data() {
    const that = this;
    return {
      radioGroup: 1,
      radioTime: [],
      problem1: null,
      problem2: null,
      problem3: {},
      videoShow: true,
      showPanel: false,
      bjSwitch: false,
      bjSwitch2: false,
      warnSwitch: "y",
      warnSwitch2: "y",
      probSwitch: "y",
      probSwitch2: "y",
      warnPC: true,
      warnPC2: true,
      probPC: true,
      probPC2: true,
      timmer1: null,
      showWeatherDialog: false,
      showTableDialog: false,
      showHealthDialog: false,
      showMainInfoDialog: false,
      noTimeDialog: false,
      noTimeType: "",
      weathercollapse: "",
      weatherChart: [
        {
          title: "温度",
          smooth: true,
          value: [],
        },
        {
          title: "湿度",
          smooth: true,
          value: [],
        },
      ],
      videoDialogClass: "modal animated a1 bounceIn",
      tableDialogClass: "modal animated a1 fadeInLeftBig",
      mainInfoDialogClass: "modal curModal animated a0 fadeInDownBig",
      mainInfo: [],
      peopleClass: "",
      timeStr: "",
      wpId: "0",
      tqmap1: {},
      tqmap5: [],
      gxkmap: {},
      tableItem: {},
      mapSource: {},
      videoArray1: [
        // [
        //   { code: "NSS_FDC_ZK", class: "", switch: true },
        //   { code: "NSS_FDC_ZK", class: "", switch: true },
        // ],
        // [
        //   { code: "NSS_FDC_ZK", class: "", switch: true },
        //   { code: "QS_FDC_ZK", class: "", switch: true },
        // ],
        // [
        //   { code: "QS_FDC_ZK", class: "", switch: true },
        //   { code: "QS_FDC_ZK", class: "", switch: true },
        // ],
        [
          {
            code: "SBQ_FDC_SC",
            class: "",
            switch: true,
          },
          {
            code: "NSS_FDC_SC",
            class: "",
            switch: true,
          },
        ],
        [
          {
            code: "QS_FDC_SC",
            class: "",
            switch: true,
          },
          {
            code: "MHS_FDC_SC",
            class: "",
            switch: true,
          },
        ],
        [
          {
            code: "XS_FDC_SC",
            class: "",
            switch: true,
          },
          {
            code: "PL_GDC_SC",
            class: "",
            switch: true,
          },
        ],
      ],
      videoArray: [
        [
          {
            url: "http://192.168.10.10:9984/ws.html",
            token: "?token=SBQ_FDC_SC&autoplay=true",
            class: "",
            switch: true,
          },
          {
            url: "http://192.168.10.10:9984/ws.html",
            token: "?token=NSS_FDC_SC&autoplay=true",
            class: "",
            switch: true,
          },
        ],
        [
          {
            url: "http://192.168.10.10:9984/ws.html",
            token: "?token=QS_FDC_SC&autoplay=true",
            class: "",
            switch: true,
          },
          {
            url: "http://192.168.10.10:9984/ws.html",
            token: "?token=MHS_FDC_SC&autoplay=true",
            class: "",
            switch: true,
          },
        ],
        [
          {
            url: "http://192.168.10.10:9984/ws.html",
            token: "?token=XS_FDC_SC&autoplay=true",
            class: "",
            switch: true,
          },
          {
            url: "http://192.168.10.10:9984/ws.html",
            token: "?token=PL_GDC_SC&autoplay=true",
            class: "",
            switch: true,
          },
        ],
      ],
      showVideoDialog: false,
      dialogVideoUrl: "",
      warnChartDataZC: dataJson.data.warnChartData,
      warnChartDataLH: dataJson.data.warnChartData,
      probChartDataZC: dataJson.data.probChartData,
      probChartDataLH: dataJson.data.probChartData,
      probChartData: dataJson.data.probChartData,
      bjChartData: [],
      ForecastPower: [
        {
          name: "今日预测电量",
          value: 103.62,
          total: 150,
        },
        {
          name: "月预测发电量",
          value: 98.62,
          total: 100,
        },
      ],
      workDataIndex: 0,
      workData: {
        column: [
          {
            name: "人员",
            field: "laborname",
            is_num: false,
            is_light: false,
            click(e, row) {
              that.changePeople(row.index);
            },
          },
          {
            name: "职务",
            field: "jobcode",
            is_num: false,
            is_light: false,
            click(e, row) {
              that.changePeople(row.index);
            },
          },
          {
            name: "开始时间",
            field: "starttime",
            width: "150px",
            is_num: false,
            is_light: false,
            click(e, row) {
              that.changePeople(row.index);
            },
          },
          {
            name: "原因",
            field: "problem",
            is_num: false,
            is_light: false,
            click(e, row) {
              that.changePeople(row.index);
            },
          },
        ],
        data: [],
      },
      selsZC: {
        column: [
          {
            name: "机组",
            field: "code",
            width: "60px",
          },
          {
            name: "停机时长(h)",
            field: "selsTime",
          },
          {
            name: "状态",
            field: "isCloseName",
            width: "60px",
          },
        ],
        data: dataJson.data.sels.data,
      },
      selsLH: {
        column: [
          {
            name: "机组",
            field: "code",
            width: "60px",
          },
          {
            name: "停机时长(h)",
            field: "selsTime",
          },
          {
            name: "状态",
            field: "isCloseName",
            width: "60px",
          },
        ],
        data: dataJson.data.sels.data,
      },
      rmls: {
        column: [
          {
            // name: "风机编号",
            name: "机组",
            field: "code",
            width: "60px",
          },
          {
            // name: "推荐时间",
            name: "报警时间",
            field: "rmlsTime",
          },
          {
            // name: "类型",
            name: "状态",
            // field: "operation",
            field: "isCloseName",
            width: "60px",
          },
        ],
        data: [],
      },
      tableHeader: [
        {
          name: "机组",
          code: "code",
        },
        {
          name: "停机开始时间",
          code: "stopTime",
        },
        {
          name: "停机恢复时间",
          code: "startTime",
        },
        {
          name: "停机时长",
          code: "stopHours",
        },
        {
          name: "故障信息",
          code: "faultView",
        },
        // {
        //     name: "当前状态",
        //     code: "status"
        // }
      ],
      tableData: [
        {
          code: "1001",
          startTime: "2024-12-31 09:00",
          endTime: "2024-12-31 18:00",
          selsTime: "8.0",
          message: "电气故障，机械故障",
          status: "正常",
        },
      ],
      timmer: null, // 定时器开关
      isFullScreen: false,
    };
  },

  // 函数
  methods: {
    init(res) {
      let that = this;
      // 72小时功率曲线
      if (res.dataL) {
        let xAxis = [];
        let seriesSpeed = [];
        let seriesGl = [];
        res.dataL.forEach((it) => {
          xAxis.push(dayjs(it.stoptime).format("MM-DD HH:mm"));
          seriesSpeed.push(it.times);
          seriesGl.push(it.hours);
        });

        const powerMin = Math.min(...seriesSpeed);
        const powerMax =
          Math.max(...seriesSpeed) < 5 ? 5 : Math.max(...seriesSpeed);
        const windSpeedMin = Math.min(...seriesGl);
        const windSpeedMax =
          Math.max(...seriesGl) < 0.5 ? 0.5 : Math.max(...seriesGl);
        const splitNumber = 5;

        let series = [
          {
            name: "故障次数",
            data: seriesSpeed,
            type: "line",
            symbol: "none",
          },
          {
            name: "故障时长",
            data: seriesGl,
            yAxisIndex: 1,
            type: "line",
            symbol: "none",
          },
        ];
        that.getPowerLine(
          xAxis,
          series,
          "problem1",
          powerMin,
          powerMax,
          windSpeedMin,
          windSpeedMax,
          splitNumber
        );
      }
      if (res.dataR) {
        let xAxis = [];
        let seriesSpeed = [];
        let seriesGl = [];
        res.dataR.forEach((it) => {
          xAxis.push(dayjs(it.stoptime).format("MM-DD HH:mm"));
          seriesSpeed.push(it.times);
          seriesGl.push(it.hours);
        });

        const powerMin = Math.min(...seriesSpeed);
        const powerMax =
          Math.max(...seriesSpeed) < 5 ? 5 : Math.max(...seriesSpeed);
        const windSpeedMin = Math.min(...seriesGl);
        const windSpeedMax =
          Math.max(...seriesGl) < 0.5 ? 0.5 : Math.max(...seriesGl);
        const splitNumber = 5;

        let series = [
          {
            name: "故障次数",
            data: seriesSpeed,
            type: "line",
            symbol: "none",
          },
          {
            name: "故障时长",
            data: seriesGl,
            yAxisIndex: 1,
            type: "line",
            symbol: "none",
          },
        ];
        that.getPowerLine2(
          xAxis,
          series,
          "problem2",
          powerMin,
          powerMax,
          windSpeedMin,
          windSpeedMax,
          splitNumber
        );
      }
    },
    getDataInfo() {
      let that = this;
      that.radioTime = [
        dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss"),
        dayjs().format("YYYY-MM-DD HH:mm:ss"),
      ];
      that.getShutDownevenList(
        !this.bjSwitch ? "gz" : "wh",
        "WT2000D121H85",
        5
      );
      that.getShutDownevenList(!this.bjSwitch2 ? "gz" : "wh", "UP2000-130", 5);
      that.getFindCtFeature("WT2000D121H85", this.warnSwitch);
      that.getFindCtFeature("UP2000-130", this.warnSwitch2);
      that.getShutDownEvent("WT2000D121H85", this.probSwitch);
      that.getShutDownEvent("UP2000-130", this.probSwitch2);
      that.getShutdownEventByDay("WT2000D121H85", that.radioTime);
      that.getShutdownEventByDay("UP2000-130", that.radioTime);
    },
    changeRadio(val) {
      if (val === 1) {
        if (this.noTimeType === "WT2000D121H85") {
          this.getShutdownEventByDay("WT2000D121H85", this.radioTime, "Dia");
          this.getShutdownEventByMap("WT2000D121H85", this.radioTime);
        } else {
          this.getShutdownEventByDay("UP2000-130", this.radioTime, "Dia");
          this.getShutdownEventByMap("UP2000-130", this.radioTime);
        }
      } else {
        if (this.noTimeType === "WT2000D121H85") {
          this.getShutdownEventByMonth("WT2000D121H85", this.radioTime);
          this.getShutdownEventByMap("WT2000D121H85", this.radioTime);
        } else {
          this.getShutdownEventByMonth("UP2000-130", this.radioTime);
          this.getShutdownEventByMap("UP2000-130", this.radioTime);
        }
      }
    },
    //获取停机表格信息
    getShutDownevenList(types, modelIds, size) {
      let that = this;
      let params = {
        wpId: "NX_FGS_HA_FDC_STA",
        modelId: modelIds,
        begin: dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"),
        end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        pageNum: 1,
        pageSize: size,
        type: types,
      };
      apiGetqueryshutdowneventlist(params).then((res) => {
        if (res && res.data) {
          if (size === 5) {
            let result = [];
            res.data.result.forEach((it) => {
              let obj = {
                code: it.code,
                selsTime: it.stopHours,
                isCloseName: types === "gz" ? "故障" : "检修",
              };
              result.push(obj);
            });
            if (modelIds === "WT2000D121H85") {
              that.selsZC.data = result;
            } else {
              that.selsLH.data = result;
            }
          } else {
            res.data.result.forEach((it) => {
              it.status = types === "gz" ? "故障" : "检修";
              it.startTime = dayjs(it.startTime).format("YYYY-MM-DD HH:mm:ss");
              it.stopTime = dayjs(it.stopTime).format("YYYY-MM-DD HH:mm:ss");
            });
            that.tableData = res.data.result;
          }
        }
      });
    },
    //获取预警统计
    getFindCtFeature(modelIds, dateType) {
      let that = this;
      let date = "";
      if (dateType === "z") {
        date = dayjs().subtract(1, "week").format("YYYY-MM-DD HH:mm:ss");
      } else if (dateType === "y") {
        // date = dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss");
        date = dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss");
      } else if (dateType === "n") {
        date = dayjs().subtract(1, "year").format("YYYY-MM-DD HH:mm:ss");
      } else {
        // date = dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss");
        date = dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss");
      }
      let params = {
        stationid: "NX_FGS_HA_FDC_STA",
        modelId: modelIds,
        begin: date,
        end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        deviceType: "windturbine",
      };
      apiGetfindCtFeatureStat(params).then((res) => {
        if (res) {
          let result = [];
          res.forEach((it) => {
            let obj = {
              name: it.typeName,
              value:
                modelIds === "WT2000D121H85"
                  ? that.warnPC
                    ? it.total
                    : it.totalSeconds
                  : that.warnPC2
                  ? it.total
                  : it.totalSeconds,
            };
            result.push(obj);
          });
          if (modelIds === "WT2000D121H85") {
            that.warnChartDataZC = result;
          } else {
            that.warnChartDataLH = result;
          }
        }
      });
    },
    //获取故障统计
    getShutDownEvent(modelIds, dateType) {
      let that = this;
      let date = "";
      if (dateType === "z") {
        date = dayjs().subtract(1, "week").format("YYYY-MM-DD HH:mm:ss");
      } else if (dateType === "y") {
        date = dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss");
      } else if (dateType === "n") {
        date = dayjs().subtract(1, "year").format("YYYY-MM-DD HH:mm:ss");
      } else {
        date = dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss");
      }
      let params = {
        wpId: "NX_FGS_HA_FDC_STA",
        modelId: modelIds,
        begin: date,
        end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      };
      apiGetqueryShutdownEvent2ByType(params).then((res) => {
        if (res && res.data) {
          let result = [];
          res.data.forEach((it) => {
            let obj = {
              name: it.name,
              value:
                modelIds === "WT2000D121H85"
                  ? that.probPC
                    ? it.times
                    : it.hours?it.hours:0
                  : that.probPC2
                  ? it.times
                  : it.hours?it.hours:0,
            };
            result.push(obj);
          });
          if (modelIds === "WT2000D121H85") {
            that.probChartDataZC = result;
          } else {
            that.probChartDataLH = result;
          }
        }
      });
    },
    //获取故障次数时长----日
    getShutdownEventByDay(modelIds, dates, type) {
      let that = this;
      let params = {
        wpId: "NX_FGS_HA_FDC_STA",
        modelId: modelIds,
        begin: dates[0],
        end: dates[1],
      };
      apiGetqueryShutdownEvent2ByDay(params).then((res) => {
        if (res && res.data) {
          let xAxis = [];
          let seriesSpeed = [];
          let seriesGl = [];
          res.data.forEach((it) => {
            xAxis.push(it.stoptime);
            seriesSpeed.push(it.times);
            seriesGl.push(it.hours);
          });
          let series = [
            {
              name: "故障次数",
              data: seriesSpeed,
              type: "line",
              symbol: "none",
            },
            {
              name: "故障时长",
              data: seriesGl,
              yAxisIndex: 1,
              type: "line",
              symbol: "none",
            },
          ];

          const powerMin = Math.min(...seriesSpeed);
          const powerMax =
            Math.max(...seriesSpeed) < 5 ? 5 : Math.max(...seriesSpeed);
          const windSpeedMin = Math.min(...seriesGl);
          const windSpeedMax =
            Math.max(...seriesGl) < 0.5 ? 0.5 : Math.max(...seriesGl);

          const splitNumber = 5;

          if (modelIds === "WT2000D121H85") {
            if (type === "Dia") {
              that.problem3 = {
                xAxis: xAxis,
                series: series,
              };
            } else {
              that.getPowerLine(
                xAxis,
                series,
                "problem1",
                powerMin,
                powerMax,
                windSpeedMin,
                windSpeedMax,
                splitNumber
              );
            }
          } else {
            if (type === "Dia") {
              that.problem3 = {
                xAxis: xAxis,
                series: series,
              };
            } else {
              that.getPowerLine2(
                xAxis,
                series,
                "problem2",
                powerMin,
                powerMax,
                windSpeedMin,
                windSpeedMax,
                splitNumber
              );
            }
          }
        }
      });
    },
    getShutdownEventByMonth(modelIds, dates) {
      let that = this;
      let params = {
        wpId: "NX_FGS_HA_FDC_STA",
        modelId: modelIds,
        begin: dates[0],
        end: dates[1],
      };
      apiGetqueryShutdownEvent2ByMonth(params).then((res) => {
        if (res && res.data) {
          let xAxis = [];
          let seriesSpeed = [];
          let seriesGl = [];
          res.data.forEach((it) => {
            xAxis.push(it.stoptime);
            seriesSpeed.push(it.times);
            seriesGl.push(it.hours);
          });
          let series = [
            {
              name: "故障次数",
              data: seriesSpeed,
              type: "line",
              symbol: "none",
            },
            {
              name: "故障时长",
              data: seriesGl,
              yAxisIndex: 1,
              type: "line",
              symbol: "none",
            },
          ];
          if (modelIds === "WT2000D121H85") {
            that.problem3 = {
              xAxis: xAxis,
              series: series,
            };
          } else {
            that.problem3 = {
              xAxis: xAxis,
              series: series,
            };
          }
        }
      });
    },
    getShutdownEventByMap(modelIds, dates) {
      let that = this;
      let params = {
        wpId: "NX_FGS_HA_FDC_STA",
        modelId: modelIds,
        begin: dates[0],
        end: dates[1],
      };
      apiGetqueryShutdownEvent2ByMap(params).then((res) => {
        if (res && res.data) {
          let result = [];
          for (let i in res.data) {
            res.data[i].forEach((it) => {
              let obj = {
                name: it.name,
                value: it.times,
              };
              result.push(obj);
            });
          }
          if (modelIds === "WT2000D121H85") {
            that.probChartData = result;
          } else {
            that.probChartData = result;
          }
        }
      });
    },

    getPowerLine(
      xAxis,
      series,
      name,
      powerMin,
      powerMax,
      windSpeedMin,
      windSpeedMax,
      splitNumber
    ) {
      let myChart;
      let legendState = {};
      if (this.problem1?.getOption) {
        legendState = this.problem1.getOption().legend[0].selected;
      }

      let option = {
        title: {
          text: "故障次数时长(中车)",
          left: "5px",
          top: "5px",
          textStyle: {
            fontSize: "16",
            fontWeight: 400,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        color: ["#7981AF", "#1C99FF", "#E57F25", "#f25656"],
        legend: {
          right: "25",
          top: "5",
          itemWidth: 5,
          itemHeight: 5,
          data: ["故障次数", "故障时长"],
          textStyle: {
            color: "#fff",
          },
          selected: legendState,
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "5%",
          height: "110px",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxis,
          axisLine: {
            lineStyle: {
              color: "#fff", // 修改为需要的颜色
            },
          },
        },
        yAxis: [
          {
            type: "value",
            min: powerMin,
            max: powerMax, // 动态设置最大值
            interval: parseFloat(
              ((powerMax - powerMin) / splitNumber).toFixed(4)
            ),
            splitNumber,
            splitLine: {
              lineStyle: {
                color: "#ccc",
                type: "dashed", // 修改为虚线
                opacity: 0.2,
              },
            },
            name: "单位：次",
            nameLocation: "end",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              formatter(value) {
                return parseInt(value);
              },
            },
          },
          {
            type: "value",
            min: windSpeedMin,
            max: windSpeedMax,
            interval: parseFloat(
              ((windSpeedMax - windSpeedMin) / splitNumber).toFixed(4)
            ),
            splitNumber,
            splitLine: {
              lineStyle: {
                color: "#ccc",
                type: "dashed", // 修改为虚线
                opacity: 0.2,
              },
            },
            name: "单位：h",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },

            axisLabel: {
              formatter(value) {
                return parseFloat(value.toFixed(1));
              },
            },
          },
        ],
        series: series,
      };

      // 基于准备好的dom，初始化echarts实例
      let dom = document.getElementById(name);
      dom && dom.removeAttribute("_echarts_instance_");

      myChart = this.$echarts.init(dom);
      this.problem1 = myChart;

      myChart.setOption(option);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    getPowerLine2(
      xAxis,
      series,
      name,
      powerMin,
      powerMax,
      windSpeedMin,
      windSpeedMax,
      splitNumber
    ) {
      let myChart;
      let legendState = {};
      if (this.problem2?.getOption) {
        legendState = this.problem2.getOption().legend[0].selected;
      }

      let option = {
        title: {
          text: "故障次数时长(联合动力)",
          left: "5px",
          top: "5px",
          textStyle: {
            fontSize: "16",
            fontWeight: 400,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        color: ["#7981AF", "#1C99FF", "#E57F25", "#f25656"],
        legend: {
          right: "25",
          top: "5",
          itemWidth: 5,
          itemHeight: 5,
          data: ["故障次数", "故障时长"],
          textStyle: {
            color: "#fff",
          },
          selected: legendState,
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "5%",
          height: "110px",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxis,
          axisLine: {
            lineStyle: {
              color: "#fff", // 修改为需要的颜色
            },
          },
        },
        yAxis: [
          {
            type: "value",
            min: powerMin,
            max: powerMax, // 动态设置最大值
            interval: parseFloat(
              ((powerMax - powerMin) / splitNumber).toFixed(4)
            ),
            splitNumber,
            splitLine: {
              lineStyle: {
                color: "#ccc",
                type: "dashed", // 修改为虚线
                opacity: 0.2,
              },
            },
            name: "单位：次",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              formatter(value) {
                return parseInt(value);
              },
            },
          },
          {
            type: "value",
            min: windSpeedMin,
            max: windSpeedMax,
            interval: parseFloat(
              ((windSpeedMax - windSpeedMin) / splitNumber).toFixed(4)
            ),
            splitNumber,
            splitLine: {
              lineStyle: {
                color: "#ccc",
                type: "dashed", // 修改为虚线
                opacity: 0.2,
              },
            },
            name: "单位：h",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              formatter(value) {
                return parseFloat(value.toFixed(1));
              },
            },
          },
        ],
        series: series,
      };
      // 基于准备好的dom，初始化echarts实例
      let dom = document.getElementById(name);
      dom && dom.removeAttribute("_echarts_instance_");

      myChart = this.$echarts.init(dom);
      this.problem2 = myChart;

      myChart.setOption(option);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    clickStopRow(type) {
      this.showTableDialog = true;
      if (type === "left") {
        if (!this.bjSwitch) {
          this.getShutDownevenList("gz", "WT2000D121H85", 100);
        } else {
          this.getShutDownevenList("wh", "WT2000D121H85", 100);
        }
      } else {
        if (!this.bjSwitch2) {
          this.getShutDownevenList("gz", "UP2000-130", 100);
        } else {
          this.getShutDownevenList("wh", "UP2000-130", 100);
        }
      }
    },

    changeBjSwitch(type) {
      if (type === "left") {
        this.bjSwitch = !this.bjSwitch;
        if (!this.bjSwitch) {
          this.getShutDownevenList("gz", "WT2000D121H85", 5);
        } else {
          this.getShutDownevenList("wh", "WT2000D121H85", 5);
        }
      } else {
        this.bjSwitch2 = !this.bjSwitch2;
        if (!this.bjSwitch2) {
          this.getShutDownevenList("gz", "UP2000-130", 5);
        } else {
          this.getShutDownevenList("wh", "UP2000-130", 5);
        }
      }
    },

    changeWarnSwitch(val) {
      this.warnSwitch = val;
      this.getFindCtFeature("WT2000D121H85", val);
    },
    changeWarnSwitch2(val) {
      this.warnSwitch2 = val;
      this.getFindCtFeature("UP2000-130", val);
    },
    changeProbSwitch(val) {
      this.probSwitch = val;
      this.getShutDownEvent("WT2000D121H85", val);
    },
    changeProbSwitch2(val) {
      this.probSwitch2 = val;
      this.getShutDownEvent("UP2000-130", val);
    },

    changeProbPC(type) {
      if (type === "left") {
        this.probPC = !this.probPC;
        this.getShutDownEvent("WT2000D121H85", this.probSwitch);
      } else {
        this.probPC2 = !this.probPC2;
        this.getShutDownEvent("UP2000-130", this.probSwitch2);
      }
    },
    changeWarnPC(type) {
      if (type === "left") {
        this.warnPC = !this.warnPC;
        this.getFindCtFeature("WT2000D121H85", this.warnSwitch);
      } else {
        this.warnPC2 = !this.warnPC2;
        this.getFindCtFeature("UP2000-130", this.warnSwitch2);
      }
    },
    clickTime(type) {
      let res = jsonData;
      this.noTimeDialog = true;
      this.noTimeType = type;
      let that = this;
      // 72小时功率曲线
      if (res.data["72time"] && res.data["72time"].length > 0) {
        let xAxis = [];
        let seriesSpeed = [];
        let seriesGl = [];
        res.data["72time"].forEach((it) => {
          xAxis.push(dayjs(it.time).format("MM-DD HH:mm"));
          seriesSpeed.push(it.speed);
          seriesGl.push(it.expectedpower);
        });
        let series = [
          {
            name: "故障次数",
            data: seriesSpeed,
            type: "line",
            symbol: "none",
          },
          {
            name: "故障时长",
            data: seriesGl,
            yAxisIndex: 1,
            type: "line",
            symbol: "none",
          },
        ];
        this.problem3 = {
          xAxis: xAxis,
          series: series,
        };
      }
      if (type === "left") {
        that.getShutdownEventByDay("WT2000D121H85", that.radioTime, "Dia");
        that.getShutdownEventByMap("WT2000D121H85", that.radioTime);
      } else {
        that.getShutdownEventByDay("UP2000-130", that.radioTime, "Dia");
        that.getShutdownEventByMap("UP2000-130", that.radioTime);
      }
    },

    // 获取历史记录表
    async getAlarmHistoryt(params, type) {
      if (type === "history") {
        (params.alarmType = "windturbine"),
          (params.stationid = "NX_FGS_HA_FDC_STA"),
          (params.deviceid = "");
      } else {
        (params.alarmType = "custom"),
          (params.stationid = "NX_FGS_HA_FDC_STA"),
          (params.deviceid = ""),
          (params.deviceType = "windturbine");
      }

      const { data } = await alarm_history(params);

      if (data) {
        if (type === "history") {
          data?.ls?.forEach((ele) => {
            ele.isCloseName = ele.endts ? "已解除" : "未解除";
            ele.rmlsTime = ele.ts > 0 ? this.formatTime(ele.ts) : "--";
          });
          this.rmls.data = data?.ls;
        } else {
          data?.ls?.forEach((ele) => {
            ele.isCloseName = ele.endts ? "已解除" : "未解除";
            ele.selsTime = ele.ts > 0 ? this.formatTime(ele.ts) : "--";
          });
          this.sels.data = data?.ls;
        }
      } else {
        this.sels.data = dataJson.data.sels.data;
        this.warnChartData = dataJson.data.warnChartData;
        this.probChartData = dataJson.data.probChartData;
      }
    },
    // 时间格式化
    formatTime(val) {
      return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
    },

    // 获取中部地图数据
    getWpHealthInfo() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "sandtable/judgeWpHealth",
        data: {
          wpId: that.wpId,
        },
        success(res) {
          that.mapSource = res.data;
        },
      });
    },

    // 获取报警玫瑰图
    getWarnMGT() {
      let that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://192.168.1.82:8075/",
        subUrl: "alarm/count/query/alltotal",
        data: {
          stationid: that.wpId,
        },
        success(res) {
          let warnChartData = [];
          for (let key in res.data) {
            const ele = res.data[key];
            warnChartData.push({
              value: ele.count,
              name: ele.relatePartsText,
            });
          }
          that.warnChartData = warnChartData;
        },
      });
    },

    // 获取故障玫瑰图
    getStopMGT() {
      let that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://192.168.1.82:8075/",
        subUrl: "shutdown/count/alltotal",
        data: {
          stId: that.wpId,
        },
        success(res) {
          let warnChartData = [];
          for (let key in res.data) {
            const ele = res.data[key];
            warnChartData.push({
              value: ele.count,
              name: ele.type,
            });
          }
          that.warnChartData = warnChartData;
        },
      });
    },

    // 获取库存玫瑰图
    getRepertoryMGT() {
      let that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:9988/",
        subUrl: "inventory/groupcount",
        data: {
          stId: that.wpId,
        },
        success(res) {
          let bjChartData = [];
          for (let key in res.data) {
            const ele = res.data[key];
            bjChartData.push({
              value: ele.curbal,
              name: ele.description,
            });
          }
          that.bjChartData = bjChartData;
        },
      });
    },

    // 获取记录玫瑰图
    getRecordMGT() {
      let that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:9988/",
        subUrl: "equoperationrecord/equupdatecount",
        data: {
          stId: that.wpId,
        },
        success(res) {
          let bjChartData = [];
          for (let key in res.data) {
            const ele = res.data[key];
            bjChartData.push({
              value: ele.count,
              name: ele.description,
            });
          }
          that.bjChartData = bjChartData;
        },
      });
    },

    // 获取中部地图数据
    getTop4Info() {
      let that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:9988/",
        subUrl: "equoperationrecord/top4",
        data: {
          stId: that.wpId,
        },
        success(res) {
          res.data.forEach((ele, index) => {
            ele.index = index;
            ele.jobcode = ele.jobcode || "------";
          });
          that.workData.data = res.data;
        },
      });
    },

    // 获取主要指标
    getWpMainInfo() {
      let that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:8034/",
        subUrl: "benchmark/zyzb",
        data: {
          windPowerStation: that.wpId,
        },
        success(res) {
          that.mainInfo = res.data;
          that.showMainInfoDialog = true;
        },
      });
    },

    // 切换人员展示
    changePeople(index) {
      if (!this.peopleAnmLock && this.workDataIndex !== index) {
        this.peopleAnmLock = true;
        this.peopleClass = "fadeOutRight";
        setTimeout(() => {
          this.workDataIndex = index;
          this.peopleClass = "fadeInRight";
          this.peopleAnmLock = false;
        }, 150);
      }
    },

    // 点击风场或者光伏
    clickMapItem(videoArray, wpId) {
      this.wpId = wpId;
      // this.videoArray.forEach((pEle, pIndex) => {
      //   pEle.forEach((cEle, cIndex) => {
      //     setTimeout(() => {
      //       // 设置隐藏动画
      //       cEle.class = "animated a1 flipOutX";
      //       setTimeout(() => {
      //         // 修改 token
      //         cEle.token =
      //           "?token=" + videoArray[pIndex + cIndex] + "&autoplay=true";
      //         setTimeout(() => {
      //           // 设置显示动画
      //           cEle.class = "animated a1 flipInX";
      //         }, 150);
      //       }, 350);
      //     }, (pIndex + cIndex + pIndex) * 150);
      //   });
      // });
      this.videoArray1.forEach((pEle, pIndex) => {
        pEle.forEach((cEle, cIndex) => {
          setTimeout(() => {
            // 设置隐藏动画
            cEle.class = "animated a1 flipOutX";
            setTimeout(() => {
              // 修改 token
              cEle.code = videoArray[pIndex + cIndex];
              setTimeout(() => {
                // 设置显示动画
                cEle.class = "animated a1 flipInX";
              }, 150);
            }, 350);
          }, (pIndex + cIndex + pIndex) * 150);
        });
      });
      this.getWtInfo();
      this.getWpHealthInfo();
      this.getTop4Info();
      this.getWarnMGT();
      this.getRepertoryMGT();
      this.getWpMainInfo();
    },

    when() {
      this.showPanel = true;
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    const clientHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    if (clientHeight === 1080) {
      this.isFullScreen = true;
    } else {
      this.isFullScreen = false;
    }
    // this.getWpHealthInfo();
    // this.getTop4Info();
    // this.getWarnMGT();
    // this.getRepertoryMGT();
    this.timeStr = new Date().formatDate("MM-dd hh:mm");
    this.timmer1 = setInterval(() => {
      this.timeStr = new Date().formatDate("MM-dd hh:mm");
    });
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    window.onresize = () => {
      const clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.isFullScreen = window.screen.height == clientHeight;
    };
    // 渲染后
    this.$nextTick(() => {
      // this.init(jsonDataHT);
      this.getDataInfo();
      this.timmer = setInterval(() => {
        this.getDataInfo();
      }, 10000);
    });
  },
  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
    clearInterval(this.timmer1);
    this.timmer1 = null;
  },
  watch: {
    $route: {
      handler(val) {
        if (val.path !== "/integratedAlarm") {
          clearInterval(this.timmer);
          this.timmer = null;
        } else {
          this.timmer = setInterval(() => {
            this.getDataInfo();
          }, 10000);
        }
      },
    },
  },

  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

<style lang="less">
.sand-table {
  width: 100%;
  // height: 91.667vh;
  height: 100%;
  position: relative;
  background-image: url("../../assets/png/3dback_1.png");
  background-repeat: no-repeat;
  background-size: cover;

  .i3dback {
    position: fixed;
    // z-index: -1;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 0;
  }

  .i3dcloud {
    position: absolute;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
  }

  .left-panel {
    width: 360px;
    margin-top: 20px;
  }

  .right-panel {
    width: 36.852vh;

    .mask {
      width: 100%;
      height: 28vh;
      background: url("~@assets/nxfImg/ship.png");
      background-size: 100% 100%;
    }
  }

  .three-model-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .sand-table-left {
    height: 79vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }

  .sand-table-right {
    height: 79vh;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
  }

  .sand-table-bottom {
    position: absolute;
    bottom: 20px;
    z-index: 2;
    display: flex;
    transform: 0.2s;

    .stb-p {
      margin-left: 0.926vh;
    }
  }

  .pre-img-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.556vh;
    padding: 0;
    position: relative;
    cursor: pointer;

    .sand-table-bottom {
      position: absolute;
      bottom: 0;
      z-index: 2;
      display: flex;
      transition: 0.2s;
    }

    .mask {
      width: 100%;
      height: 8.657vh;
      background: url("~@assets/nxfImg/ship.png");
      background-size: 100% 100%;
      // img {
      //     width: 100%;
      //     height: 100px;
      // }
    }

    .pre-img {
      position: relative;
      width: 95%;
      height: 8.657vh;
      z-index: 4;
    }
  }

  .person-info-box {
    display: flex;

    .header {
      width: 75px;
    }
  }

  .table {
    width: calc(100% + 2.963vh);
    margin-left: -1.481vh;
    margin-bottom: -1.481vh;

    tr {
      cursor: pointer;
    }

    .com-table thead tr th,
    .com-table tr td {
      padding: 0.556vh 0;
      color: #fff;
    }
  }

  .animated.a0 {
    animation-duration: 0.35s;
  }

  .animated.a1 {
    animation-duration: 0.5s;
  }

  .el-overlay {
    overflow: hidden;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 19vh;
    position: absolute;

    z-index: 111;

    .hover72Power,
    .monthPower {
      width: calc(50% - 10px);
      background: rgba(41, 45, 53, 0.4);
      border-radius: 6px;
      position: relative;
      .hidBtn {
        position: absolute;
        left: 5px;
        top: 5px;
        width: 0;
        height: 24px;
        cursor: pointer;
      }
    }

    .hover72Power {
      .hidBtn {
        width: 125px;
      }
    }

    .monthPower {
      .hidBtn {
        width: 75px;
      }
    }
  }
}

#sandTable.sand-table .curModal .el-dialog__body {
  max-height: 600px;
  overflow-y: scroll;
}

.exchange {
  cursor: pointer;
}

.weatherBox {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .l,
  .r {
    width: 48%;
    height: 500px;
    padding: 50px 0;
  }

  .el-collapse {
    border-top: 1px solid #999;
  }

  .el-collapse-item .el-collapse-item__wrap {
    border-bottom: 1px solid #999;
  }

  .el-collapse-item__content {
    background: rgba(18, 29, 28, 1);
    color: rgba(255, 255, 255, 0.75);
    padding: 20px;
  }

  .el-collapse-item__header {
    background: rgb(18, 29, 28);
    border-bottom: 1px solid #999;
    color: rgba(255, 255, 255, 0.75);
  }

  .el-card__header,
  .el-collapse,
  .el-collapse-item__header {
    border-bottom: 1px solid #999;
  }

  .collapseItemTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .svg {
      width: 20px;
      height: 20px;
    }

    .info {
      margin-left: 4px;
    }

    .otherWea {
      margin-right: 10px;
    }
  }

  .other-info {
    text-align: center;
    font-size: @fontsize-s;

    .text {
      color: @font-color;
      font-size: 12px;
    }

    .value {
      margin: 0.741vh 0 0 0;
    }

    .other-icon {
      margin: 0 auto;
    }
  }
}

.videoBoxiframe {
  border: none;
  overflow: hidden;
  cursor: pointer;
}

.modal {
  .dialogTitle {
    position: relative;
    left: 10px;
  }

  .jumpBtn {
    position: absolute;
    right: 30px;
    top: 8px;
    cursor: pointer;
    font-size: 20px;
  }

  .el-divider__text {
    background: rgb(17, 28, 27);
    color: #b3bdc0;
  }

  .el-divider {
    background: #b3bdc0;
  }

  animation-duration: 0;

  @keyframes dialog-fade-in {
    0% {
      transform: translate3d(-1000%, -1000%, 0);
      opacity: 0;
    }

    100% {
      transform: translate3d(-1000%, -1000%, 0);
      opacity: 1;
    }
  }

  @keyframes dialog-fade-out {
    0% {
      // transform: translate3d(0, 0, 0);
      transform: translate3d(-1000%, -1000%, 0);
      opacity: 1;
    }

    100% {
      // transform: translate3d(0, -100%, 0);
      transform: translate3d(-1000%, -1000%, 0);
      opacity: 0;
    }
  }
}

.el-overlay {
  .el-overlay-dialog {
    .el-dialog {
      .el-dialog__body {
        padding-top: 0 !important;
        .allStyle {
          // max-height: 55vh;
          // overflow: auto;
          .radioGroupTime {
            display: flex;
            margin-bottom: 10px;
            .el-date-editor {
              margin-right: 10px;
            }
          }
          .allMain {
            .mainTit {
              display: inline-block;
              margin-left: 10px;
              font-size: 20px;
              color: #fff;
              margin-bottom: 10px;
            }
            .allMsg {
              width: 100%;
              height: 500px;
              display: flex;
              .warnLine {
                width: 60%;
                height: 100%;
              }
              .warnPie {
                width: 40%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>