sis_zhfx/src/views/SandTable/SandTable.vue

<template>
  <div class="sand-table" id="sandTable">
    <img :src="require('@assets/png/3dback.png')" class="i3dback" />
    <!-- <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud" /> -->
    <StBack></StBack>
    <ThreeModel1
      class="three-model-layer"
      :data="mapSource"
      @when="when"
      @clickMapItem="clickMapItem"
    ></ThreeModel1>
    <div class="sand-table-left" v-if="showPanel">
      <PanelSand
        class="left-panel"
        title="气象预测"
        :subTitle="timeStr + '实况'"
      >
        <weather
          class="pd-t-16"
          style="cursor: pointer"
          :data="tqmap1"
          @click="openWeatherDialog"
        />
      </PanelSand>
      <PanelSand class="left-panel mg-t-16" title="健康推荐">
        <RankTable :data="rmls" @rowClick="clickHealthRow"></RankTable>
      </PanelSand>
      <PanelSand class="left-panel mg-t-16" title="停机信息">
        <RankTable :data="sels" @rowClick="clickStopRow"></RankTable>
        <!-- <ComTable :data="sels"></ComTable> -->
      </PanelSand>
      <PanelSandToolbar class="left-panel mg-t-16" title="隐患情况">
        <template v-slot:tools>
          <div class="exchange" @click="changeWarnSwitch">
            <span :class="warnSwitch ? 'gray' : 'green'">预警</span>
            <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
            <span :class="warnSwitch ? 'green' : 'gray'">故障</span>
          </div>
        </template>
        <template v-slot:default>
          <RadarPieChart
            height="20.6vh"
            :list="warnChartData"
            title="隐患情况"
          />
        </template>
      </PanelSandToolbar>
    </div>
    <div class="sand-table-right" v-if="showPanel">
      <PanelSand class="right-panel" title="视频监控">
        <!-- <el-row v-for="(pItem, pIndex) in videoArray" :key="pIndex">
          <el-col
            :span="12"
            class="pre-img-box"
            v-for="(cItem, cIndex) in pItem"
            :key="cIndex"
            @click="openVideoDialog(cItem)"
          >
            <div class="mask"></div>
            <iframe
              class="pre-img videoBoxiframe"
              :class="cItem.class"
              width="95%"
              height="8.657vh"
              :src="cItem.url + cItem.token"
              v-if="cItem.switch"
            />
          </el-col> -->
        <el-row v-for="(pItem, pIndex) in videoArray1" :key="pIndex">
          <el-col
            :span="12"
            class="pre-img-box"
            v-for="(cItem, cIndex) in pItem"
            :key="cIndex"
            @click="openVideoDialog1(cItem)"
          >
            <div class="mask"></div>
            <hlsVideo
              class="pre-img videoBoxiframe"
              width="95%"
              height="8.657vh"
              :code="cItem.code"
              :class="cItem.class"
              v-if="cItem.switch"
            />
            <!-- <iframe
              class="pre-img videoBoxiframe"
              :class="cItem.class"
              width="95%"
              height="8.657vh"
              src="http://192.168.1.18:1935/hls/NSS_FDC_ZK/index.m3u8"
              v-if="cItem.switch"
            /> -->
          </el-col>
        </el-row>
      </PanelSand>
      <PanelSand class="right-panel mg-t-16" title="工单管理">
        <div
          class="person-info-box mg-t-16 animated a0"
          :class="peopleClass"
          v-if="workData.data[0]"
        >
          <img
            class="header mg-r-8 bg-green"
            style="width: 75px; height: 75px; cursor: pointer"
            :src="workData.data[workDataIndex].imgurl"
            @click="jumpUrl('/health/frist?tab=2')"
          />
          <div class="person-info">
            <div class="green font-lg" style="font-weight: bold">
              {{ workData.data[workDataIndex].laborname }}
            </div>
            <div class="white font-sm">
              <span>职务：{{ workData.data[workDataIndex].jobcode }}</span>
              <!-- <span class="mg-l-16">当前任务编号 000000</span> -->
            </div>
            <div class="white font-sm">
              <!-- 平均检修时间 <span class="green">5</span> 小时 -->
              开始时间
              <span class="green">{{
                workData.data[workDataIndex].starttime
              }}</span>
            </div>
          </div>
        </div>
        <div class="table mg-t-8" style="min-height: 180px">
          <Table :data="workData" />
        </div>
      </PanelSand>
      <PanelSandToolbar class="right-panel mg-t-16" title="部件">
        <template v-slot:tools>
          <div class="exchange" @click="changeBjSwitch">
            <span :class="bjSwitch ? 'gray' : 'green'">库存</span>
            <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
            <span :class="bjSwitch ? 'green' : 'gray'">记录</span>
          </div>
        </template>
        <template v-slot:default>
          <RadarPieChart height="21vh" :list="bjChartData" title="部件情况" />
        </template>
      </PanelSandToolbar>
    </div>
    <div class="sand-table-bottom" :style="$store.state.themeName === 'dark' ? 'right: calc(50vw - 545px);' : 'right: calc(50vw - 590px);'" v-if="showPanel">
      <Ppanel
        title="利用小时"
        :data="riseNumber(gxkmap.bg_dxkyss)"
        dataColor="#05BB4C"
        :days="gxkmap.ydxkyss"
        :data1Icon="
          gxkmap.tb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
        "
        :data1IconClass="
          gxkmap.tb_dxkyss < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
        :data2Icon="
          gxkmap.hb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
        "
        :data2IconClass="
          gxkmap.hb_dxkyss < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
      ></Ppanel>
      <Ppanel
        title="设备可利用率"
        class="stb-p"
        :data="riseNumber(gxkmap.bg_sbklyl)"
        dataColor="#05BB4C"
        daysUnit="%"
        :days="gxkmap.ysbklyl"
        :data1Icon="
          gxkmap.hb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
        "
        :data1IconClass="
          gxkmap.hb_sbklyl < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
        :data2Icon="
          gxkmap.tb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
        "
        :data2IconClass="
          gxkmap.tb_sbklyl < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
      ></Ppanel>
      <Ppanel
        title="MTBF"
        class="stb-p"
        :data="'0.1' || riseNumber(gxkmap.bg_mtbf)"
        dataColor="#05BB4C"
        :days="gxkmap.mtbf"
        :data1Icon="gxkmap.hb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data1IconClass="
          gxkmap.hb_mtbf < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
        :data2Icon="gxkmap.tb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data2IconClass="
          gxkmap.tb_mtbf < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
      ></Ppanel>
      <Ppanel
        title="MTTR"
        class="stb-p"
        :data="'0.1' || riseNumber(gxkmap.bg_mttr)"
        dataColor="#05BB4C"
        :days="gxkmap.mttr"
        :data1Icon="gxkmap.hb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data1IconClass="
          gxkmap.hb_mttr < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
        :data2Icon="gxkmap.tb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data2IconClass="
          gxkmap.tb_mttr < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
      ></Ppanel>
      <Ppanel
        title="MTTF"
        class="stb-p"
        :data="'0.1' || riseNumber(gxkmap.bg_mttf)"
        dataColor="#05BB4C"
        :days="gxkmap.mttf"
        :data1Icon="gxkmap.hb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data1IconClass="
          gxkmap.hb_mttf < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
        :data2Icon="gxkmap.tb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data2IconClass="
          gxkmap.tb_mttf < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
      ></Ppanel>
    </div>
    <el-dialog
      title=""
      :custom-class="tableDialogClass"
      v-model="showHealthDialog"
      width="80%"
      :destroy-on-close="true"
      :before-close="
        (done) => {
          tableDialogClass = 'modal animated a1 fadeOutLeftBig';
          delaylyFn(450, done);
        }
      "
      @closed="
        dialogVideoUrl = '';
        tableDialogClass = 'modal animated a1 fadeInLeftBig';
      "
    >
      <template #title>
        <div class="dialogTitle">
          健康推荐详情
          <i class="jumpBtn el-icon-more" @click="jumpUrl('/health/frist')"></i>
        </div>
      </template>
      <el-form style="margin: 30px 0" label-width="120px" inline>
        <el-form-item label="风机ID" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.wtId" readonly></el-input>
        </el-form-item>
        <el-form-item label="检修类型" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.operation" readonly></el-input>
        </el-form-item>
        <el-form-item label="推荐理由" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.reason" readonly></el-input>
        </el-form-item>
        <el-form-item label="推荐日期" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.recodedate" readonly></el-input>
        </el-form-item>
        <el-form-item label="风速" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.speed" readonly></el-input>
        </el-form-item>
        <el-form-item label="预警名称" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.typename" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title=""
      :custom-class="tableDialogClass"
      v-model="showTableDialog"
      width="80%"
      :destroy-on-close="true"
      :before-close="
        (done) => {
          tableDialogClass = 'modal animated a1 fadeOutLeftBig';
          delaylyFn(450, done);
        }
      "
      @closed="
        dialogVideoUrl = '';
        tableDialogClass = 'modal animated a1 fadeInLeftBig';
      "
    >
      <template #title>
        <div class="dialogTitle">
          停机详情
          <i
            class="jumpBtn el-icon-more"
            @click="jumpUrl('/health/gzzd/malfunctionRecall')"
          ></i>
        </div>
      </template>
      <el-form style="margin: 30px 0" label-width="120px" inline>
        <el-form-item label="风机ID" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.windTurbineId" readonly></el-input>
        </el-form-item>
        <el-form-item label="所属风场" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.wpName" readonly></el-input>
        </el-form-item>
        <el-form-item label="停机类型" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.statusName" readonly></el-input>
        </el-form-item>
        <el-form-item label="停机时间" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.stopTime" readonly></el-input>
        </el-form-item>
        <el-form-item label="恢复时间" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.startTime" readonly></el-input>
        </el-form-item>
        <el-form-item
          label="停机时长(小时)"
          style="width: 45%; margin-bottom: 25px"
        >
          <el-input v-model="tableItem.stopHours" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="天气详情"
      :custom-class="tableDialogClass"
      v-model="showWeatherDialog"
      width="80%"
      :destroy-on-close="true"
      :before-close="
        (done) => {
          tableDialogClass = 'modal animated a1 fadeOutLeftBig';
          delaylyFn(450, done);
        }
      "
      @closed="tableDialogClass = 'modal animated a1 fadeInLeftBig'"
    >
      <div class="weatherBox">
        <div class="l">
          <DoubleLineChart :height="'100%'" :list="weatherChart" />
        </div>
        <div class="r">
          <el-collapse
            style="height: 400px; overflow-y: scroll"
            v-model="weathercollapse"
            accordion
          >
            <el-collapse-item
              :name="index"
              v-for="(item, index) in tqmap5"
              :key="index"
            >
              <template #title>
                <div class="collapseItemTitle">
                  {{ item.time }}
                  <div
                    style="
                      display: flex;
                      justify-content: start;
                      align-items: center;
                    "
                  >
                    <div class="icon svg-icon svg-icon-white">
                      <SvgIcon class="svg" :svgid="'svg-' + item.tqtp" />
                    </div>
                    <div class="info">{{ item.sd }}% / {{ item.wd }}°C</div>
                  </div>
                  <div class="otherWea">{{ item.tqmc }}</div>
                </div>
              </template>
              <div class="other-info">
                <Row>
                  <Col>
                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
                      <svg-icon svgid="svg-能见度" />
                    </div>
                    <div class="value">{{ item.qxd }}</div>
                    <div class="text">能见度</div>
                  </Col>
                  <Col>
                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
                      <svg-icon svgid="svg-湿度" />
                    </div>
                    <div class="value">{{ item.sd }}</div>
                    <div class="text">湿度</div>
                  </Col>
                  <Col>
                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
                      <svg-icon svgid="svg-气压" />
                    </div>
                    <div class="value">{{ item.dqyl }}</div>
                    <div class="text">气压</div>
                  </Col>
                  <Col>
                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
                      <svg-icon svgid="svg-日出" />
                    </div>
                    <div class="value">{{ item.richushijian }}</div>
                    <div class="text">日出时间</div>
                  </Col>
                  <Col>
                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
                      <svg-icon svgid="svg-日落" />
                    </div>
                    <div class="value">{{ item.riluoshijian }}</div>
                    <div class="text">日落时间</div>
                  </Col>
                </Row>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      top="50px"
      title="查看视频"
      :custom-class="videoDialogClass"
      v-model="showVideoDialog"
      width="80%"
      :destroy-on-close="true"
      :before-close="
        (done) => {
          videoDialogClass = 'modal animated a1 bounceOut';
          delaylyFn(450, done);
        }
      "
      @closed="
        dialogVideoUrl = '';
        videoDialogClass = 'modal animated a1 bounceIn';
      "
    >
      <!-- <iframe
        class="videoBoxiframe"
        width="95%"
        height="800px"
        :src="dialogVideoUrl"
      /> -->
      <hlsVideo
        class="videoBoxiframe"
        width="95%"
        height="800px"
        :code="dialogVideoUrl"
      />
    </el-dialog>
    <el-dialog
      title="场站综合评分"
      :custom-class="mainInfoDialogClass"
      v-model="showMainInfoDialog"
      width="80%"
      :destroy-on-close="true"
      :before-close="
        (done) => {
          mainInfoDialogClass = 'modal curModal animated a1 fadeOutUpBig';
          delaylyFn(450, done);
        }
      "
      @closed="mainInfoDialogClass = 'modal curModal animated a0 fadeInDown'"
    >
      <div v-for="(item, index) in mainInfo" :key="index">
        <el-divider content-position="center">{{ item.name }}</el-divider>
        <el-form style="margin: 30px 0" label-width="120px" inline>
          <el-form-item
            label="风能利用率"
            style="width: 45%; margin-bottom: 25px"
          >
            <el-input v-model="item.actualpower" readonly></el-input>
          </el-form-item>
          <el-form-item
            label="综合厂用电率(%)"
            style="width: 45%; margin-bottom: 25px"
          >
            <el-input v-model="item.comprehensiverate" readonly></el-input>
          </el-form-item>
          <el-form-item
            label="利用小时(小时)"
            style="width: 45%; margin-bottom: 25px"
          >
            <el-input v-model="item.utilizationhours" readonly></el-input>
          </el-form-item>
          <el-form-item
            label="设备可利用率(%)"
            style="width: 45%; margin-bottom: 25px"
          >
            <el-input v-model="item.availability" readonly></el-input>
          </el-form-item>
          <el-form-item
            label="MTBF(小时)"
            style="width: 45%; margin-bottom: 25px"
          >
            <el-input v-model="item.mtbf" readonly></el-input>
          </el-form-item>
          <el-form-item
            label="MTTR(小时)"
            style="width: 45%; margin-bottom: 25px"
          >
            <el-input v-model="item.mttr" readonly></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </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 Weather from "./component/weather.vue";
import StBack from "./component/st-back.vue";
import Table from "@com/coms/table/table.vue";
import RankTable from "./component/rank-table.vue";
import Ppanel from "./component/p-panel.vue";
import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
import DoubleLineChart from "@com/chart/line/double-line-chart.vue";
import Col from "@com/coms/grid/col.vue";
import Row from "@com/coms/grid/row.vue";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import hlsVideo from "./component/hls.vue";

export default {
  // 名称
  name: "SandTable",
  // 使用组件
  components: {
    ThreeModel1,
    PanelSand,
    PanelSandToolbar,
    Weather,
    Table,
    RadarPieChart,
    StBack,
    RankTable,
    Ppanel,
    DoubleLineChart,
    Col,
    Row,
    SvgIcon,
    hlsVideo,
  },
  // 数据
  data() {
    const that = this;
    return {
      videoShow: true,
      showPanel: false,
      bjSwitch: false,
      warnSwitch: false,
      timmer1: null,
      showWeatherDialog: false,
      showTableDialog: false,
      showHealthDialog: false,
      showMainInfoDialog: false,
      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: "",
      warnChartData: [],
      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: [],
      },
      sels: {
        column: [
          {
            name: "风机编号",
            field: "windPowerStationId",
          },
          {
            name: "停机时间",
            field: "stopTime",
            width: "120px",
          },
          {
            name: "停机时长",
            field: "stopHours",
          },
        ],
        data: [],
      },
      rmls: {
        column: [
          {
            name: "风机编号",
            field: "wtId",
          },
          {
            name: "推荐时间",
            field: "recodedate",
            width: "120px",
          },
          {
            name: "类型",
            field: "operation",
          },
        ],
        data: [],
      },
    };
  },

  // 函数
  methods: {
    openWeatherDialog() {
      this.showWeatherDialog = true;
    },

    openVideoDialog(item) {
      if (item.url && item.token) {
        this.dialogVideoUrl = item.url + item.token;
        this.showVideoDialog = true;
      }
    },

    openVideoDialog1(item) {
      if (item.code) {
        this.dialogVideoUrl = item.code;
        this.showVideoDialog = true;
      }
    },

    getWtInfo() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "sandtable/findWtInfo",
        data: {
          wpId: that.wpId,
        },
        success(res) {
          res.data.tqmap5.ls.forEach((ele) => {
            ele.time = new Date(ele.time).formatDate("yyyy-MM-dd hh:mm");
          });

          const keys = ["wd", "sd"];
          let weatherChart = [
            {
              title: "温度",
              smooth: true,
              value: [],
            },
            {
              title: "湿度",
              smooth: true,
              value: [],
            },
          ];

          keys.forEach((key, keyIndex) => {
            res.data.tqmap5.ls.forEach((ele) => {
              weatherChart[keyIndex].value.push({
                text: ele.time,
                value: ele[key],
              });
            });
          });

          that.tqmap1 = res.data.tqmap1;
          that.tqmap5 = res.data.tqmap5.ls;

          res.data.sels.forEach((ele) => {
            ele.stopTime = new Date(ele.stopTime).formatDate(
              "yyyy-MM-dd hh:mm:ss"
            );
            ele.startTime = new Date(ele.stopTime).formatDate(
              "yyyy-MM-dd hh:mm:ss"
            );
          });

          res.data.rmls.forEach((ele) => {
            ele.recodedate = new Date(ele.recodedate).formatDate(
              "yyyy-MM-dd hh:mm:ss"
            );
          });

          that.sels.data = res.data.sels;
          that.rmls.data = res.data.rmls;
          that.gxkmap = res.data.gxkmap;
          that.weatherChart = weatherChart;
        },
      });
    },

    // 获取中部地图数据
    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.18: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.18: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://192.168.1.18: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://192.168.1.18: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://192.168.1.18: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;
        },
      });
    },

    clickStopRow(row) {
      this.tableItem = row;
      this.showTableDialog = true;
    },

    clickHealthRow(row) {
      this.tableItem = row;
      this.showHealthDialog = true;
    },

    delaylyFn(time, fn) {
      setTimeout(() => {
        fn();
      }, time);
    },

    riseNumber(number) {
      // if (number < 0) {
      //   return (number - number * 2) / 100;
      // } else {
      //   return number / 100;
      // }
      return number / 100;
    },

    // 切换人员展示
    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();
    },

    // 页面跳转
    jumpUrl(url) {
      this.$router.push(url);
    },

    when() {
      this.showPanel = true;
    },

    changeBjSwitch() {
      this.bjSwitch = !this.bjSwitch;
      if (this.bjSwitch) {
        this.getRecordMGT();
      } else {
        this.getRepertoryMGT();
      }
    },

    changeWarnSwitch() {
      this.warnSwitch = !this.warnSwitch;
      if (this.warnSwitch) {
        this.getStopMGT();
      } else {
        this.getWarnMGT();
      }
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    this.getWtInfo();
    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() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },

  unmounted() {
    clearInterval(this.timmer1);
    this.timmer1 = null;
  },
};
</script>

<style lang="less">
.sand-table {
  width: 100%;
  height: 91.667vh;
  position: relative;

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

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

  .left-panel {
    width: 360px;
  }

  .right-panel {
    width: 36.852vh;
  }

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

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

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

  .sand-table-bottom {
    position: absolute;
    bottom: 0;
    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 {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
    }

    .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;
  }
}

#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;
  }

  .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;
    }
  }
}
</style>