<template>
  <div>
    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧 -->
      <div class="sidebar sidebar-left">
        <div class="sidebar-item H917">
          <div class="sub-title por"><span>环境监测实时数据 </span></div>
          <div class="table-box">
            <vue-seamless-scroll
              ref="sssjControl"
              :data="tableData1"
              :class-option="classOption"
              class="warp"
            >
              <ul class="item">
                <div
                  :class="upWindowData.upWindowActive === i ? 'active' : ''"
                  style="cursor: pointer"
                  v-for="(item, i) in tableData1"
                  :key="i + 'aaa'"
                  @click="lookRealData(item, i)"
                >
                  <li class="table-item">
                    <el-row :gutter="16">
                      <el-col :span="6" class="jz">
                        <img
                          class="img-class"
                          :src="
                            require(`@/assets/images/screen/hjjc/${item.typeId}.png`)
                          "
                        />
                      </el-col>
                      <el-col :span="10">
                        <p class="device-name">{{ item.tpName }}</p>
                        <p class="device-time">{{ item.time }}</p>
                      </el-col>
                      <el-col :span="8">
                        <p class="device-value">
                          {{ item.value | capitalize }}{{ item.unit }}
                        </p>
                      </el-col>
                    </el-row>
                  </li>
                </div>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="main-area">
        <!--一中、二中。。。-->
        <span class="main-example" style="left: 0px; top: 190px">一中</span>
        <span class="main-example" style="left: 0px; top: 321px">二中</span>
        <span class="main-example" style="left: 0px; top: 446px">三中</span>
        <span class="main-example" style="left: 0px; top: 569px">四中</span>
        <span class="main-example" style="left: 0px; top: 705px">五中</span>
        <!-- 设备点位 -->
        <div v-if="checkList.includes('2')">
          <div
            class="dot"
            v-for="(item, i) in equipmentList"
            :key="i + 'bbb'"
            :class="item.isWarning == 1 ? 'active' : ''"
            :style="{ left: item.x + 'px', top: item.y + 'px' }"
          >
            <div class="dot1" @click="">
              <div class="tip-box">
                <p
                  v-for="(iitem, l) in item.monitorPositionList"
                  :key="l + 'ccc'"
                  :class="iitem.isWarning == 1 ? 'active' : ''"
                >
                  {{ iitem.equipmentName }}
                  <span></span>
                </p>
              </div>
            </div>
          </div>
        </div>

        <!--监控点位-->
        <div v-if="checkList.includes('1')">
          <div
            class="camera-item"
            v-for="(item, i) in cameraList"
            :key="i + 'ddd'"
            :class="item.status == 0 ? 'offline' : ''"
            :style="{ left: item.x + 'px', top: item.y + 'px' }"
            @click="lookVideo(item, i)"
          ></div>
        </div>
        <!-- 现实设备切换按钮 -->
        <div class="toggle-button">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="1">监控</el-checkbox>
            <el-checkbox label="2">监测设备</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="sidebar sidebar-right">
        <!-- 右上历史数据图组件 -->
        <div class="sidebar-item H286 alert-analysis">
          <div class="sub-title por">
            <span>历史数据图</span>
          </div>
          <div class="sub-con histrybox">
            <div class="histrubox_left">
              <div class="echarts_title">
                <img
                  src="../../../assets/images/screen/jianceshebei.png"
                  alt=""
                  class="img_class"
                />
                <span>环境监测设备</span>
              </div>
              <div class="chart_bg"></div>
              <div id="EchartsPieLeft" class="chart_box"></div>
              <div class="chart_number">
                <span>{{ deviceStatusNum.total }}个</span>
                <br />
                <span>总数</span>
              </div>
            </div>
            <div class="histrubox_right">
              <div class="echarts_title">
                <img
                  src="../../../assets/images/screen/shipingshebei.png"
                  alt=""
                  class="img_class"
                />
                <span>视频监测设备</span>
              </div>
              <div class="chart_bg_right"></div>
              <div id="EchartsPieRight" class="chart_box"></div>
              <div class="chart_number_right">
                <span>{{ deviceStatusNum.cameraTotal }}个</span>
                <br />
                <span>总数</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 右中设备监测曲线图 -->
        <div class="sidebar-item H286 alert-analysis">
          <div class="sub-title por">
            <span>历史数据图</span>
            <span class="scroll-title">{{ rightTopLssjData.name }}</span>
          </div>
          <div class="sub-con">
            <div class="sub-con">
              <span
                v-for="(item, i) in rightTopLssjData.list"
                :key="i + 'aab'"
                :class="i == rightTopLssjData.mark ? 'active' : ''"
                >{{ item.name }}
                <p class="subscript"></p>
              </span>
            </div>
            <div class="left-chart" ref="sssj" id="sssj"></div>
          </div>
        </div>
        <!-- 右下设备监测曲线图 -->
        <div class="sidebar-item H286 alert-analysis">
          <div class="sub-title por">
            <span>历史数据图</span>
            <span class="scroll-title">{{ rightCenterLssjData.name }}</span>
          </div>
          <div class="sub-con">
            <div class="sub-con">
              <span
                v-for="(item, i) in rightCenterLssjData.list"
                :key="i + 'abb'"
                :class="i == rightCenterLssjData.mark ? 'active' : ''"
                >{{ item.name }}
                <p class="subscript"></p>
              </span>
            </div>
            <div class="left-chart" ref="right" id="rclssj"></div>
          </div>
        </div>
      </div>
      <!-- 弹窗内容 -->
      <transition name="el-fade-in">
        <div v-show="upWindowData.upWindowVisible" class="up-window">
          <p><span></span>{{ upWindowData.title }}</p>
          <i class="el-icon-close close-button" @click="closeUpWindow"></i>
          <p class="date-title">{{ upWindowData.date }}</p>
          <div class="chart-box" id="chartBox"></div>
        </div>
      </transition>
      <!--视频弹窗-->
      <transition name="el-fade-in">
        <div v-show="video.upWindowVisible" class="up-window video-window">
          <p><span></span>{{ video.title }}</p>
          <i class="el-icon-close close-button" @click="closeVideoUpWindow"></i>
          <video width="800" id="player" controls></video>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import {
  getRealData,
  getRtData,
  getDeviceStatus,
  getDeviceData,
  getRcData,
  getDeviceStatusNum,
} from "@/api/tyler/hjjc";
import { listVideoTable } from "@/api/tyler/videoTable";
import ScrollTable from "@/components/Tyler/ScrollTable.vue";
import screenfull from "screenfull";
import vueSeamlessScroll from "vue-seamless-scroll";
import Highcharts from "highcharts/highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(Highcharts);
export default {
  name: "cockpit",
  components: {
    ScrollTable,
    vueSeamlessScroll,
  },
  data() {
    return {
      // 设备实施数据弹窗
      upWindowData: {
        upWindowActive: "",
        upWindowVisible: false,
        title: "",
        date: "2025-03-19",
      },
      // 左边列表数据
      tableData1: [],
      // 左侧滚动 参数
      classOption: {
        singleHeight: 110,
        hoverStop: true,
        autoPlay: true,
      },
      // 设备定位分类开关
      checkList: ["2", "1"],
      // 左侧实施数据列表
      rightTopLssjData: {
        list: [
          {
            name: "",
            value: [
              {
                data: {
                  xData: {
                    data: [],
                  },
                  yData: {
                    data: [],
                  },
                },
              },
            ],
          },
        ],
        // 右上设备轮播下标
        mark: 0,
        // 右上设备轮播名称
        name: "",
      },
      // 左侧实施数据列表
      rightCenterLssjData: {
        list: [
          {
            name: "",
            value: [
              {
                data: {
                  xData: {
                    data: [],
                  },
                  yData: {
                    data: [],
                  },
                },
              },
            ],
          },
        ],
        // 右上设备轮播下标
        mark: 0,
        // 右上设备轮播名称
        name: "",
      },

      // 中间图片数据列表
      equipmentList: [
        {
          isWarning: 0, //是否报警
          x: 85,
          y: 233,
          name: "一中避险硐室",
          // 监测点
          monitorPositionList: [
            {
              equipmentName: "一中避险硐室氧气", //设备名称
              equipmentTy: "", //设备类型
              isWarning: 0, //是否报警
            },
            {
              equipmentName: "一中避险硐室一氧化碳", //设备名称
              equipmentTy: "", //设备类型
              isWarning: 0, //是否报警
            },
          ],
        },
      ],
      //摄像头数据
      cameraListPostion: [
        {
          status: 1, //是否在线
          x: 50,
          y: 150,
          name: "一中码头门",
        },
        {
          status: 1, //是否在线
          x: 53,
          y: 277,
          name: "二中码头门",
        },
        {
          status: 1, //是否在线
          x: 82,
          y: 289,
          name: "二中水泵房",
        },
        {
          status: 1, //是否在线
          x: 113,
          y: 297,
          name: "二中避险硐室",
        },
        {
          status: 1, //是否在线
          x: 152,
          y: 294,
          name: "二中空压机房",
        },

        {
          status: 1, //是否在线
          x: 71,
          y: 411,
          name: "三中码头门",
        },
      ],
      cameraList: [],
      // 视频弹窗
      video: {
        upWindowVisible: false,
        title: "",
        videoUrl: "",
      },
      player: null,
      //highCharts配置
      highChartsOption: {},
      deviceStatusNum: {
        //设备总数
        total: 0,
        //摄像头总数
        cameraTotal: 0,
      },
    };
  },
  mounted() {
    if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
      screenfull.request();
    }
    // this.initEchartBox("right", this.salvProName, this.salvProValue, 28);
    // this.initEchartBox("sssj", this.salvProName, this.salvProValue, 28);
    getRtData().then((res) => {
      this.rightTopLssjData.list = res.data || [];
      this.rtPlayFun(this.rightTopLssjData);
    });
    getRcData().then((res) => {
      this.rightCenterLssjData.list = res.data || [];
      console.log(res);

      this.rcPlayFun(this.rightCenterLssjData);
    });
    getDeviceStatus().then((res) => {
      // this.equipmentList = res.data;

      let dataXY = [
        {
          name: "三中码头门",
          x: "50",
          y: "406",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "三中码头门风速",
              equipmentTy: "风速",
              isWarning: 0,
            },
            {
              equipmentName: "三中码头门风速",
              equipmentTy: "风速",
              isWarning: 0,
            },
          ],
        },
        {
          name: "二中空压机房",
          x: "258",
          y: "299",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "二中空压机房co",
              equipmentTy: "一氧化碳500",
              isWarning: 0,
            },
            {
              equipmentName: "二中空压机房风速",
              equipmentTy: "风速",
              isWarning: 0,
            },
          ],
        },
        {
          name: "东风井",
          x: "856",
          y: "136",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "东风井风速",
              equipmentTy: "风速",
              isWarning: 0,
            },
            {
              equipmentName: "东风井开停",
              equipmentTy: "开停",
              isWarning: 0,
            },
          ],
        },
        {
          name: "二中避险硐室",
          x: "75",
          y: "288",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "二中避险硐室co",
              equipmentTy: "一氧化碳500",
              isWarning: 0,
            },
            {
              equipmentName: "二中避险硐室氧气",
              equipmentTy: "氧气",
              isWarning: 0,
            },
          ],
        },
        {
          name: "一中避险硐室",
          x: "85",
          y: "153",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "一中避险硐室co",
              equipmentTy: "一氧化碳500",
              isWarning: 0,
            },
            {
              equipmentName: "一中避险硐室氧气",
              equipmentTy: "氧气",
              isWarning: 0,
            },
          ],
        },
        {
          name: "五中避险硐室",
          x: "102",
          y: "677",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "五中避险硐室co",
              equipmentTy: "一氧化碳500",
              isWarning: 0,
            },
            {
              equipmentName: "五中避险硐室氧气",
              equipmentTy: "氧气",
              isWarning: 0,
            },
          ],
        },
        {
          name: "四中避险硐室",
          x: "96",
          y: "541",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "四中避险硐室",
              equipmentTy: "一氧化碳1000",
              isWarning: 0,
            },
            {
              equipmentName: "四中避险硐室",
              equipmentTy: "氧气",
              isWarning: 0,
            },
          ],
        },
        {
          name: "四中车场",
          x: "53",
          y: "527",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "四中车场",
              equipmentTy: "一氧化碳1000",
              isWarning: 0,
            },
          ],
        },
        {
          name: "一中主运输巷",
          x: "185",
          y: "164",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "一中主运输巷co",
              equipmentTy: "一氧化碳500",
              isWarning: 0,
            },
            {
              equipmentName: "一中主运输巷风速",
              equipmentTy: "风速",
              isWarning: 0,
            },
          ],
        },
        {
          name: "二中主运输巷",
          x: "187",
          y: "296",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "二中主运输巷CO",
              equipmentTy: "一氧化碳1000",
              isWarning: 0,
            },
            {
              equipmentName: "二中主运输巷co",
              equipmentTy: "一氧化碳500",
              isWarning: 0,
            },
            {
              equipmentName: "二中主运输巷风速",
              equipmentTy: "风速",
              isWarning: 0,
            },
          ],
        },
        {
          name: "二中中运输巷",
          x: "316",
          y: "303",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "二中中运输巷风速",
              equipmentTy: "风速",
              isWarning: 0,
            },
          ],
        },
        {
          name: "三中避险硐室",
          x: "93",
          y: "411",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "三中避险硐室co",
              equipmentTy: "一氧化碳1000",
              isWarning: 0,
            },
            {
              equipmentName: "三中避险硐室氧气",
              equipmentTy: "氧气",
              isWarning: 0,
            },
          ],
        },
        {
          name: "五中车场",
          x: "53",
          y: "686",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "五中车场一氧化碳",
              equipmentTy: "一氧化碳1000",
              isWarning: 0,
            },
          ],
        },
        {
          name: "一中风机",
          x: "145",
          y: "159",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "一中风机",
              equipmentTy: "一氧化碳1000",
              isWarning: 0,
            },
            {
              equipmentName: "一中风机氧气",
              equipmentTy: "氧气",
              isWarning: 0,
            },
          ],
        },
        {
          name: "一中西采区",
          x: "341",
          y: "192",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "一中西采区CO",
              equipmentTy: "一氧化碳1000",
              isWarning: 0,
            },
            {
              equipmentName: "一中西采区风速",
              equipmentTy: "风速",
              isWarning: 0,
            },
            {
              equipmentName: "一中西采区风机",
              equipmentTy: "开停",
              isWarning: 0,
            },
            {
              equipmentName: "一中西采区",
              equipmentTy: "氧气",
              isWarning: 0,
            },
          ],
        },
        {
          name: "三中运输巷",
          x: "518",
          y: "439",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "三中运输巷CO",
              equipmentTy: "一氧化碳1000",
              isWarning: 0,
            },
            {
              equipmentName: "三中运输巷风速",
              equipmentTy: "风速",
              isWarning: 0,
            },
            {
              equipmentName: "三中运输巷风机",
              equipmentTy: "开停",
              isWarning: 0,
            },
            {
              equipmentName: "三中运输巷氧气",
              equipmentTy: "氧气",
              isWarning: 0,
            },
          ],
        },
        {
          name: "三中西采",
          x: "566",
          y: "499",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "三中西采",
              equipmentTy: "一氧化碳1000",
              isWarning: 0,
            },
            {
              equipmentName: "三中西采",
              equipmentTy: "风速",
              isWarning: 0,
            },
            {
              equipmentName: "三中西采",
              equipmentTy: "氧气",
              isWarning: 0,
            },
          ],
        },
        {
          name: "四中运输巷",
          x: "206",
          y: "559",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "四中运输巷",
              equipmentTy: "一氧化碳1000",
              isWarning: 0,
            },
            {
              equipmentName: "四中运输巷",
              equipmentTy: "风速",
              isWarning: 0,
            },
            {
              equipmentName: "四中运输巷风机",
              equipmentTy: "开停",
              isWarning: 0,
            },
            {
              equipmentName: "四中运输巷",
              equipmentTy: "氧气",
              isWarning: 0,
            },
          ],
        },
        {
          name: "五中运输巷",
          x: "166",
          y: "697",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "五中运输巷",
              equipmentTy: "一氧化碳1000",
              isWarning: 0,
            },
            {
              equipmentName: "五中运输巷",
              equipmentTy: "风速",
              isWarning: 0,
            },
            {
              equipmentName: "五中运输巷风机",
              equipmentTy: "开停",
              isWarning: 0,
            },
            {
              equipmentName: "五中运输巷",
              equipmentTy: "氧气",
              isWarning: 0,
            },
          ],
        },
        {
          name: "一中运输巷",
          x: "367",
          y: "168",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "一中运输巷风机",
              equipmentTy: "开停",
              isWarning: 0,
            },
          ],
        },
        {
          name: "二中西采区",
          x: "237",
          y: "339",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "二中西采区CO",
              equipmentTy: "一氧化碳1000",
              isWarning: 0,
            },
            {
              equipmentName: "二中西采区风速",
              equipmentTy: "风速",
              isWarning: 0,
            },
            {
              equipmentName: "二中西采区氧气",
              equipmentTy: "氧气",
              isWarning: 0,
            },
          ],
        },
        {
          name: "二中运输巷",
          x: "415",
          y: "311",
          isWarning: 0,
          monitorPositionList: [
            {
              equipmentName: "二中运输巷风机",
              equipmentTy: "开停",
              isWarning: 0,
            },
          ],
        },
      ];
      if (res.data && res.data.length) {
        // 使用接口数据为基础，合并本地坐标数据
        this.equipmentList = res.data.map((apiItem) => {
          // 在dataXY中查找同名设备
          const localItem = dataXY.find((xy) => xy.name === apiItem.name);
          // 合并坐标数据，保留接口返回的其他字段
          return {
            ...apiItem,
            x: localItem ? localItem.x : 0, // 默认值处理
            y: localItem ? localItem.y : 0,
            monitorPositionList: apiItem.monitorPositionList || [],
          };
        });
      } else {
        // 降级方案：使用本地数据
      }
    });
    //初始化获取左侧环境监测实施数据
    getRealData().then((res) => {
      this.tableData1 = res.data.map((el) => {
        return {
          ...el,
          value: el.value,
        };
      });
    });
    //初始化highCharts
    getDeviceStatusNum().then((res) => {
      if (res.code == 200) {
        this.deviceStatusNum = {
          total: res.data[0].online + res.data[0].offline,
          cameraTotal: res.data[1].online + res.data[1].offline,
        };
        this.getHighChartsData(res.data);
      }
    });
    this.initvideoPlayer();
  },
  created() {
    listVideoTable().then((res) => {
      if (res.code == 200) {
        let list = res.rows.map((el) => {
          // 根据cameraName动态设置坐标
          const camera = this.cameraListPostion.find(
            (c) => c.name === el.cameraName
          );
          if (camera) {
            el.x = camera.x || 0; // 使用cameraList中的placeX，如果没有则设为0
            el.y = camera.y || 0; // 使用cameraList中的placeY，如果没有则设为0
          }
          return el;
        });
        this.cameraList = list;
        // this.cameraList = this.cameraListPostion;
      }
    });
  },
  methods: {
    initvideoPlayer() {
      this.player = new WebRtcStreamer("player", "http://127.0.0.1:8000");
    },
    // videoPlayer(url) {
    //   this.player.connect(
    //     "rtsp://192.168.10.150:8604/EUrl/3IRr6GG?params=eyJwcm90b2NvbCI6InJ0c3AiLCJ1c2VySWQiOiJhcGkiLCJ0IjoxLCJhIjoiNWQ4MGYxZjg5N2ZkNGZjOGJkZDc2ZTVhY2NlNzVmN2R8MHwwfDF8b3Blbl9hcGkifQ=="
    //   );
    // },
    // 查看视频
    lookVideo(item, i) {
      this.video.upWindowVisible = true;
      this.video.title = item.cameraName;
      this.video.videoUrl = item.cameraUrl;
      this.player.connect(this.video.videoUrl);
    },
    closeVideoUpWindow() {
      this.video.upWindowVisible = false;
    },
    getHighChartsData(value = []) {
      this.highChartsOption = {
        chart: {
          type: "pie", //饼图
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //延y轴向内的倾斜角度
            beta: 0,
          },
          backgroundColor: "rgba(64, 158, 255, 0)", // 不显示背景色
          // spacingTop: -200, // 增加顶部间距
        },
        legend: {
          enabled: true,
          align: "center",
          verticalAlign: "middle", // 修正为底部对齐
          layout: "vertical", // 水平布局
          y: 60, // 下移图例
          itemStyle: {
            color: "#fff",
            fontSize: "12px", // 缩小字体
          },
          labelFormatter: function () {
            return `${this.name}: ${this.y}`; // 在图例中显示数据
          },
        },
        title: {
          text: "", //图表的标题文字
        },
        subtitle: {
          text: "", //副标题文字
        },
        plotOptions: {
          pie: {
            size: "55%", // 缩小饼图尺寸
            allowPointSelect: false, // 允许点击,
            cursor: "pointer",
            innerSize: "65%", //内圆半径,
            showInLegend: false,
            center: ["50%", "34%"], // 调整饼图中心位置
            depth: 15, //3d饼图的厚度,
            dataLabels: {
              enabled: false, // 启用数据标签
            },
          },
        },
        credits: {
          enabled: false,
        },
        series: [
          {
            type: "pie",
            name: "设备统计",
            showInLegend: true,
            data: [
              {
                name: "正常设备",
                y: value[0].online,
                color: "RGBA(37, 160, 238, 1)",
              }, // 高数据部分
              {
                name: "异常设备",
                y: value[0].offline,
                color: "RGBA(252, 183, 62, 1)",
              }, // 低数据部分
            ],
            startAngle: 0, //起始角度,
            label: {
              show: false,
              position: "outside",
              formatter: "{b}：{d}%",
              normal: {
                show: false,
                fontSize: 40,
                formatter: ["  {a|{b}：{d}%}"].join("\n"),
                rich: {
                  a: {
                    left: 20,
                    padding: [0, -140, 0, -180],
                  },
                },
              },
            },
          },
        ],
      };

      Highcharts.chart("EchartsPieLeft", this.highChartsOption);
      this.highChartsOption.series[0].data = [
        { name: "在线", y: value[1].online, color: "#02CD9B" }, // 高数据部分
        { name: "离线", y: value[1].offline, color: "RGBA(252, 183, 62, 1)" }, // 低数据部分
      ];
      Highcharts.chart("EchartsPieRight", this.highChartsOption);
    },
    // 辅助方法：获取字段值
    getItemField(item, fieldKey) {
      return item[this.fieldMap[fieldKey]] || "";
    },
    // 初始化eChartDOM
    initEchartBox(id, xData = [], yData = [], mkData = 28, step = 4, grid) {
      let maxData = yData.length ? Math.ceil(Math.max(...yData)) : 0;
      let minData = yData.length ? Math.floor(Math.min(...yData)) : 0; // 添加向下取整
      let myChart = null;
      myChart = echarts.init(document.getElementById(id));
      let option = {
        grid: grid,
        xAxis: {
          show: true,
          type: "category",
          boundaryGap: false,
          data: xData,
          axisLabel: {
            show: true,
            interval: step,
            textStyle: {
              color: "#FFFFFF", //更改坐标轴文字颜色
              fontSize: 16, //更改坐标轴文字大小
            },
          },
          axisTick: {
            alignWithLabel: true,
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              opacity: 0.5,
            },
            show: true, //隐藏或显示
          },
        },
        yAxis: {
          type: "value",
          max: mkData > maxData ? mkData : maxData,
          min: minData,
          boundaryGap: false,
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#FFFFFF", //更改坐标轴文字颜色
              fontSize: 16, //更改坐标轴文字大小
            },
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              opacity: 0.5,
            },
            show: true, //隐藏或显示
          },
        },
        series: [
          {
            type: "line",
            stack: "Total",
            smooth: 0.2,
            lineStyle: {
              width: 2,
              color: "#35B1F3",
            },
            markLine: {
              data: [
                {
                  name: "警戒线",
                  yAxis: mkData,
                  label: {
                    show: false,
                  },
                },
              ],
              symbol: ["none", "none"],
              lineStyle: {
                color: "red",
                width: 2,
              },
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(55, 184, 251,0.5)",
                },
                {
                  offset: 1,
                  color: "rgb(55, 184, 251,0.1)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: yData,
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(() => {
        myChart.resize();
      }, 600);
      this.$on("hook:deactivated", () => {
        if (myChart != null && myChart != "" && myChart != undefined) {
          myChart.dispose();
        }
        myChart = null;
      });
    },
    // 轮播eChart
    // 更改数据达到轮播效果
    rtPlayFun(data) {
      // 启动定时器，每隔 15 秒执行一次
      let i = 0;
      let l = 0;
      let timer = null;
      let grid = {
        left: "4%",
        right: "5%",
        bottom: "4%",
        top: "7%",
        containLabel: true,
      };
      if (!timer) {
        // 页面进来的时候要触发一次
        this.rightTopLssjData.mark = 0;
        this.rightTopLssjData.name = data.list[0].value[0].name;
        this.initEchartBox(
          "sssj",
          data.list[0].value[0].value.xData.data,
          data.list[0].value[0].value.yData.data,
          data.list[0].value[0].value.yData.alarm,
          4,
          grid
        );
      }
      timer = setInterval(() => {
        if (i < data.list.length) {
          if (
            Array.isArray(data.list[i].value) &&
            l < data.list[i].value.length
          ) {
            this.rightTopLssjData.mark = i;
            this.rightTopLssjData.name = data.list[i].value[l].name;
            this.initEchartBox(
              "sssj",
              data.list[i].value[l].value.xData.data,
              data.list[i].value[l].value.yData.data,
              data.list[i].value[l].value.yData.alarm,
              4,
              grid
            );
            l++;
          } else {
            // 需要l重置，否则进不去判断i错乱
            l = 0;
            i++;
          }
        } else {
          i = 0;
          l = 0;
        }
      }, 15000);

      this.$on("hook:activated", () => {
        if (timer === null) {
          // 避免重复开启定时器
          timer = setInterval(() => {
            if (i < data.list.length) {
              if (
                Array.isArray(data.list[i].value) &&
                l < data.list[i].value.length
              ) {
                this.rightTopLssjData.mark = i;
                this.rightTopLssjData.name = data.list[i].value[l].tpName;
                this.initEchartBox(
                  "sssj",
                  data.list[i].value[l].data.xData.data,
                  data.list[i].value[l].data.yData.data,
                  data.list[i].value[l].data.yData.alarm,
                  4,
                  grid
                );
                l++;
              } else {
                l = 0;
                i++;
              }
            } else {
              i = 0;
              l = 0;
            }
          }, 15000);
        }
      });

      this.$on("hook:deactivated", () => {
        clearInterval(timer);
        timer = null;
      });
    },
    // 更改数据达到轮播效果
    rcPlayFun(data) {
      // 启动定时器，每隔 3 秒执行一次
      let i = 0;
      let l = 0;
      let timer = null;
      let grid = {
        left: "4%",
        right: "5%",
        bottom: "4%",
        top: "7%",
        containLabel: true,
      };
      if (!timer) {
        this.rightCenterLssjData.mark = i;
        this.rightCenterLssjData.name = data.list[i].value[l].name;
        this.initEchartBox(
          "rclssj",
          data.list[i].value[l].value.xData.data,
          data.list[i].value[l].value.yData.data,
          data.list[i].value[l].value.yData.alarm,
          4,
          grid
        );
      }
      timer = setInterval(() => {
        if (i < data.list.length) {
          if (
            Array.isArray(data.list[i].value) &&
            l < data.list[i].value.length
          ) {
            this.rightCenterLssjData.mark = i;
            this.rightCenterLssjData.name = data.list[i].value[l].name;
            this.initEchartBox(
              "rclssj",
              data.list[i].value[l].value.xData.data,
              data.list[i].value[l].value.yData.data,
              data.list[i].value[l].value.yData.alarm,
              4,
              grid
            );
            l++;
          } else {
            l = 0;
            i++;
          }
        } else {
          i = 0;
          l = 0;
        }
      }, 15000);
      this.$on("hook:activated", () => {
        if (timer === null) {
          // 避免重复开启定时器
          timer = setInterval(() => {
            if (i < data.list.length) {
              if (
                Array.isArray(data.list[i].value) &&
                l < data.list[i].value.length
              ) {
                this.rightCenterLssjData.mark = i;
                this.rightCenterLssjData.name = data.list[i].value[l].tpName;
                this.initEchartBox(
                  "rclssj",
                  data.list[i].value[l].value.xData.data,
                  data.list[i].value[l].value.yData.data,
                  data.list[i].value[l].value.yData.alarm,
                  4,
                  grid
                );
                l++;
              } else {
                l = 0;
                i++;
              }
            } else {
              i = 0;
              l = 0;
            }
          }, 15000);
        }
      });

      this.$on("hook:deactivated", () => {
        clearInterval(timer);
        timer = null;
      });
    },
    //自动滚动
    autoScroll() {
      const divData = this.$refs.scroll_List3;
      // 拿到表格中承载数据的div元素
      divData.scrollTop += 1;
      if (
        Math.round(divData.clientHeight + divData.scrollTop) + 1 >=
        divData.scrollHeight
      ) {
        // 重置table距离顶部距离

        divData.scrollTop = 0;
      }
      this.scrolltimer3 = window.requestAnimationFrame(
        this.autoScroll.bind(this)
      );
    },
    // 查看设备24H实时数据
    lookRealData(item, i) {
      let grid = {
        left: 0,
        right: "1.7%",
        bottom: "4%",
        top: "7%",
        containLabel: true,
      };

      let xData = [];
      let yData = [];
      getDeviceData({ id: item.id }).then((res) => {
        if (res.code == 200) {
          this.upWindowData.upWindowActive = i;
          this.upWindowData.upWindowVisible = true;
          this.upWindowData.title = item.tpName;
          this.upWindowData.date = res.data.day;
          this.classOption.autoPlay = false;
          let threshold = 0;
          res.data.envScreenEditDto.forEach((i) => {
            xData.push(i.time);
            yData.push(i.value);
          });
          threshold = res.data.threshold || 0;
          this.initEchartBox("chartBox", xData, yData, threshold, 0, grid);
        } else {
          this.$message.error("数据请求失败！");
        }
      });
    },
    // 关闭弹窗
    closeUpWindow() {
      this.upWindowData.upWindowActive = "";
      this.upWindowData.upWindowVisible = false;
      this.classOption.autoPlay = true;
      this.$refs.sssjControl._startMove();
    },
    goToSys() {
      var link = this.$router.resolve({
        path: "/",
      });
      window.open(link.href);
      return;
    },
    // 左侧 鼠标滚动代码
    handleScroll(e) {
      // 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变
      // e.deltaY是滚动的距离
      this.$refs.sssjControl.yPos = this.$refs.sssjControl.yPos - e.deltaY;
      // 如果是正数 说明是往上滚
      if (this.$refs.sssjControl.yPos > 0) {
        this.$refs.sssjControl.yPos = 0;
        return;
      }
      // 如果yPos超过内部实际高度的一半则重新到顶部滚动
      // 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果
      if (
        Math.abs(this.$refs.sssjControl.yPos) >
        this.$refs.sssjControl.realBoxHeight / 2
      ) {
        this.$refs.sssjControl.yPos = 0;
      }
    },
  },
  filters: {
    capitalize: function (value) {
      if (value === null || value === undefined) return "--";
      console.log(value);

      if (value == "开" || value == "关") {
        return value;
      }
      const parsedValue = Number(value);
      if (isNaN(parsedValue)) return "--";

      // 整数判断
      if (Number.isInteger(parsedValue)) {
        return parsedValue.toFixed(1);
      }
      // 小数保留两位
      return parsedValue.toFixed(1);
    },
  },
  watch: {
    tableData1: {
      handler() {
        this.$nextTick(() => {
          this.$refs.sssjControl && this.$refs.sssjControl.reset(); // 添加存在性判断
        });
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.por {
  position: relative;
}
.sidebar-left {
  transform-origin: left center;
  transform: scaleX(1) perspective(610px) rotateY(5deg);
}
.sidebar-right {
  transform-origin: center right;
  transform: scaleX(1) perspective(610px) rotateY(-5deg);
}
/* 主体内容 */
.main-content {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  padding-top: 160px;
  background: url("~@/assets/images/screen/bg12.png");
  color: #fff;
}
.histrybox {
  width: 100%;
  height: 100%;
  display: flex;
  /**均分2部分 */
  .histrubox_left {
    width: 50%;
    height: calc(100% - 46px);
    .echarts_title {
      height: 25px;
      text-align: center;

      span {
        color: rgba(42, 207, 255, 1);
        font-weight: 400;
        font-size: 16px;
        color: #2acfff;
      }
    }
  }
  .histrubox_right {
    width: 50%;
    height: calc(100% - 46px);
    .echarts_title {
      height: 25px;
      text-align: center;

      span {
        color: rgba(42, 207, 255, 1);
        font-weight: 400;
        font-size: 16px;
        color: #2acfff;
      }
    }
  }
  .chart_box {
    width: 100%;
    height: calc(100% - 25px);
  }
  .img_class {
    width: 29px;
    height: 25px;
    display: inline-block;
    line-height: 25px;
    margin-right: 12px;
    margin-bottom: -7px;
  }
  .chart_bg {
    position: absolute;
    width: 140px;
    height: 150px;
    background-image: url("~@/assets/images/screen/chart.png");
    background-repeat: no-repeat;
    background-position: cover;
    background-size: 100% 100%;
    // -webkit-transform: rotateX(65deg);
    transform: rotateX(53deg);
    left: 45px;
    top: 89px;
  }
  .chart_bg_right {
    position: absolute;
    width: 140px;
    height: 150px;
    background-image: url("~@/assets/images/screen/chart.png");
    background-repeat: no-repeat;
    background-position: cover;
    background-size: 100% 100%;
    // -webkit-transform: rotateX(65deg);
    transform: rotateX(53deg);
    left: 275px;
    top: 89px;
  }
  .chart_number {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 109px;
    left: 66px;
    text-align: center;
    span:nth-child(1) {
      font-size: 30px;
      font-weight: 400;
    }
  }
  .chart_number_right {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 109px;
    left: 296px;
    text-align: center;
    span:nth-child(1) {
      font-size: 30px;
      font-weight: 400;
    }
  }
}

/* 左右侧边栏 */
.sidebar {
  width: 460px;
  border-radius: 8px;
  flex: 1;
  // display: flex;
  // flex-direction: column;
  // display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  margin-top: -10px;
}
.H917 {
  height: 917px;
}
.H286 {
  height: 286px;
}
.sidebar-item {
  width: 100%;
  // height: 286px;
  margin-bottom: 30px;
  background: linear-gradient(
    180deg,
    rgba(1, 33, 58, 0.2) 0%,
    rgba(8, 132, 233, 0.2) 100%
  );

  position: relative;
  &::before {
    content: "";
    width: 460px;
    height: 4px;
    position: absolute;
    background: url("~@/assets/images/screen/bottom.png") no-repeat center;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20;
  }
  .sub-title {
    width: 100%;
    height: 46px;
    background: url("~@/assets/images/screen/title1.png") no-repeat center;
    font-weight: bold;
    font-family: "fangsong";
    span {
      position: absolute;
      top: -10px;
      left: 30px;
      font-size: 22px;
    }
    .scroll-title {
      position: absolute;
      top: -7px;
      left: 157px;
      font-weight: 800;
      font-size: 18px;
      color: #ffc62e;
    }
  }
  .table-box {
    height: 866px;
    width: calc(100% - 4px);
    .table-item {
      height: 110px;
      width: calc(100% - 46px);
      margin: 0 auto;
      border-bottom: 2px dashed rgba(100, 194, 255, 0.3);
      padding-top: 9px;
      .img-class {
        display: block;
        width: 85px;
        height: 85px;
      }
      .device-name {
        width: 100%;
        font-weight: 400;
        font-size: 18px;
        color: #63c2ff;
        font-family: Source Han Sans SC;
        height: 15px;
      }
      .device-time {
        font-weight: 400;
        font-size: 16px;
        color: #b4d5ea;
        font-family: Source Han Sans SC;
      }
      .device-value {
        font-family: Source Han Sans SC;
        font-weight: 500;
        font-size: 28px;
        color: #ffffff;
        background: linear-gradient(
          0deg,
          #3cbffa 0%,
          #ffffff 56.005859375%,
          #e2f6ff 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        width: 100%;
        text-align: center;
      }
    }
    .warp {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: "fangzhengyaoti";
      ul {
        list-style: none;
        margin: 0 auto;
        .active {
          // width: 100%;
          background: RGBA(2, 87, 149, 1);
        }
      }
    }
  }
  .jz {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 中间主区域 */
.main-area {
  width: calc(100% - 920px);
  background: url("~@/assets/images/screen/bg3.png") no-repeat center;
  background-size: contain;
  background-position-y: 10px;
  text-align: center;
  position: relative;
  pointer-events: auto;
  z-index: 999;
  .main-example {
    font-size: 18px;
    color: #2ed5ff;
    line-height: 36px;
    font-weight: bold;
    position: absolute;
    font-family: "fangsong";
  }
  .dot {
    width: 42px;
    height: 70px;
    position: absolute;
    top: 100px;
    left: 500px;
    background: url("~@/assets/images/screen/hjjc/icon8.png") no-repeat center;
    .dot1 {
      position: relative;
      .tip-box {
        width: 216px;
        background: linear-gradient(0deg, #062451 0%, #09162d 100%);
        box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
        border-radius: 4px;
        border: 1px solid #11b9ff;
        position: absolute;
        bottom: 10px;
        left: -81px;
        padding: 9px 14px 14px 14px;
        z-index: 999;
        display: none;
        p {
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 16px;
          color: #1cd2ff;
          margin: 5px 0 0 0;
          text-align: left;
          span {
            display: none;
          }
          &.active {
            color: rgba(255, 43, 58, 1);
            span {
              display: inline-block;
              width: 16px;
              height: 16px;
              background: url("~@/assets/images/screen/hjjc/icon10.png")
                no-repeat center;
              margin-bottom: -3px;
            }
          }
        }
      }
    }
    &:hover {
      background: url("~@/assets/images/screen/hjjc/icon8_hover.png") no-repeat
        center;
      .tip-box {
        display: block;
      }
    }
    &.active {
      background: url("~@/assets/images/screen/hjjc/icon9.png") no-repeat center;
      &:hover {
        background: url("~@/assets/images/screen/hjjc/icon9_hover.png")
          no-repeat center;
      }
    }
  }

  .camera-item {
    width: 42px;
    height: 70px;
    position: absolute;
    top: 100px;
    left: 500px;
    background: url("~@/assets/images/screen/hjjc/icon_normal.png") no-repeat
      center;
    cursor: pointer;
    &:hover {
      background: url("~@/assets/images/screen/hjjc/icon_hover.png") no-repeat
        center;
    }
    &.offline {
      background: url("~@/assets/images/screen/hjjc/icon_click.png") no-repeat
        center;
    }
  }
  .toggle-button {
    width: 120px;
    height: 90px;
    background: RGBA(8, 27, 58, 1);
    position: absolute;
    bottom: 58px;
    right: 0px;
    .el-checkbox-group {
      width: 100%;
      height: 100%;
      .el-checkbox {
        margin-top: 16px;
        color: #fdfeff;
        font-size: 16px;
        font-weight: 500;
        font-family: "fangzhengyaoti";
      }
    }
  }
}

/* 实时分布图区域 */
.distribution-map {
  height: 300px;
  background: rgba(8, 28, 49, 0.8);
  border-radius: 8px;
}

.sub-con {
  .sub-con {
    height: 2em;
    width: 100%;
    // display: flex;
    // justify-content: space-around;
    // align-items: center;
    font-family: "fangzhengyaoti";
    span {
      float: left;
      margin-left: 25px;
      min-width: 63px;
      height: 2em;
      font-size: 16px;
      line-height: 16px;
      font-weight: 500;
      color: rgba(179, 240, 255, 1);
      text-align: center;
    }
    .active {
      color: rgba(46, 213, 255, 1);
      .subscript {
        height: 19px;
        width: 100%;
        margin-top: 3px;
        background: url("~@/assets/images/screen/hjjc/icon7.png") no-repeat
          center;
      }
    }
  }
}
.left-chart {
  width: 100%;
  height: 12em;
}
.sub-con-scroll-table {
  width: 95%;
  margin: 0 auto;
  height: 83%;
  overflow: hidden;
}
.custom-header {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  text-align: center;
  color: #2ed5ff;
}
.custom-item {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  text-align: center;
}
.custom-header2 {
  width: 100%;
  display: grid;
  grid-template-columns: 1.5fr 2.2fr 1.3fr;
  text-align: center;
  color: #2ed5ff;
  height: 36px;
  line-height: 36px;
  color: #2ed5ff;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(
    0deg,
    rgba(61, 98, 147, 0.35) 0%,
    rgba(61, 98, 147, 0.03) 100%
  );
}
.warp {
  height: calc(100% - 36px);
  overflow: hidden;
  .item {
    padding-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
  }
  .custom-item2 {
    width: 100%;
    height: 36px;
    display: grid;
    grid-template-columns: 1.5fr 2.2fr 1.3fr;
    text-align: center;
    background: linear-gradient(
      0deg,
      rgba(61, 98, 147, 0.35) 0%,
      rgba(61, 98, 147, 0.03) 100%
    );
    margin-top: 11px;
  }
  .custom-item-content2 {
    font-family: Source Han Sans SC;
    font-size: 16px;
    line-height: 36px;
    color: #bbd7ea;
  }
}

.sub-con-r {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: calc(100% - 70px);
  .sub-con-r-left {
    width: 127px;
    height: 161px;
    background: url("~@/assets/images/screen/icon3.png") no-repeat center;
    background-size: 100%;
  }
  .sub-con-r-right {
    width: 250px;
    display: flex;
    flex-direction: column;
    // gap: 10px;
    p {
      display: grid;
      grid-template-columns: 4fr 4fr 1fr;
      font-size: 18px;
      line-height: 24px;
      color: #bbd7ea;
      background-color: rgba(61, 98, 147, 0.2);
      padding: 10px 10px;
      text-align: justify;
      box-sizing: border-box;
      span:nth-child(2) {
        color: rgba(187, 215, 234, 0.2);
      }
      span:nth-child(3) {
        font-weight: bold;
        font-size: 24px;
        color: #bbd7ea;
        background: linear-gradient(0deg, #47c5ff 0%, #fdfeff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
.up-window {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1360px;
  height: 480px;
  transform: translate(-50%, -50%);
  background: url("~@/assets/images/screen/hjjc/popup.png") no-repeat;
  background-size: 1377px 501px;
  box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
  padding: 28px 37px;
  z-index: 999;
  &.video-window {
    width: 900px;
    height: 562px;
    background: #062451;
    p {
      width: 820px;
    }
  }
  p {
    width: 1271px;
    height: 37px;
    margin: 0px;
    background: url("~@/assets/images/screen/hjjc/title-popup.png") no-repeat
      center;
    background-size: 100%;
    font-weight: 500;
    font-size: 22px;
    color: #ffffff;
    height: 37px;
    background-position-y: 9px;
    span {
      width: 27px;
      display: inline-block;
    }
  }
  .close-button {
    font-size: 30px;
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    &:hover {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
      -webkit-transition: -webkit-transform 1s linear;
      transition: transform 1s linear;
    }
  }
  .date-title {
    height: 18px;
    font-weight: 500;
    font-size: 22px;
    color: #15f1ff;
    background: none;
    margin-left: 56px;
    margin-top: 5px;
  }
  .chart-box {
    width: 100%;
    height: 355px;
  }
}
</style>
