<template>
  <div class="main">
    <div class="left">
      <div class="leftOne">
        <div class="title">智慧法庭</div>
        <div class="wisdomContent">
          <div class="wisdomTop">
            <div
              class="wisdomData"
              v-for="(item, index) in wisdomList"
              :key="index"
            >
              <div style="color: #fff; font-size: 0.7rem">{{ item.name }}</div>
              <div
                :class="houseList[index]"
                style="
                  width: 100%;
                  height: 100%;
                  color: #fff;
                  font-size: 0.7rem;
                "
              >
                {{ item.count }}
              </div>
            </div>
          </div>
          <div class="wisdomBottom">
            <div
              class="wisdomCount"
              v-for="(item, index) in wisdomMonArr"
              :key="index"
            >
              <div style="width: 100%; font-size: 0.6rem">
                <span>{{ item.name }}:</span>
                <span style="color: rgb(225, 177, 25); margin-left: 5%">{{
                  item.count
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="leftTwo">
        <div class="title" style="height: 18%">设备告警</div>
        <div class="warning">
          <div id="warningOne"></div>
          <div id="warningTwo"></div>
        </div>
      </div>
      <div class="leftThree">
        <div class="warnListTitle">
          <div class="titleTwo">
            <span style="margin-left: 5%; font-size: 0.6rem">报警信息列表</span>
          </div>
        </div>
        <div class="warnBtn">
          <div
            class="btnList"
            v-for="(item, index) in warnBtnList"
            :key="index"
            :class="{ btnListAc: warnBtnAc == index }"
            @click="warnSelect(index)"
          >
            <span>{{ item.name }}</span>
          </div>
        </div>
        <div class="warnList">
          <div
            class="warnListContent"
            v-for="(item, index) in warnList"
            :key="index"
          >
            <div class="warnArray">
              <span>{{ item.id }}</span>
              <img :src="item.icon" style="width: 7%; margin-left: 3%" />
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  margin-left: 3%;
                  width: 100%;
                "
              >
                <span>报警时间:{{ item.time }}</span>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    margin-top: 2%;
                    width: 100%;
                  "
                >
                  <span style="text-align: left">报警原因:{{ item.cause }}</span>
                  <span style="margin-right: 5%">风险等级:{{ item.risk }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="rightOne">
        <div class="title" style="height: 13%">运维管理</div>
        <div class="maintenance">
          <div class="maintenanceCount">
            <div class="quantity">
              <div
                style="
                  width: 30%;
                  display: flex;
                  align-items: center;
                  justify-content: space-evenly;
                "
              >
                <span>当日</span>
                <img src="../assets/images/blueDian.png" style="width: 9%" />
                <span style="margin-left: 2%">报警数：8</span>
              </div>
              <div
                style="
                  width: 30%;
                  display: flex;
                  align-items: center;
                  justify-content: space-evenly;
                "
              >
                <img src="../assets/images/blueDian.png" style="width: 9%" />
                <span>已完成单数：8</span>
              </div>
            </div>
            <div class="quantity">
              <div
                style="
                  width: 30%;
                  display: flex;
                  align-items: center;
                  justify-content: space-evenly;
                "
              >
                <span>统计</span>
                <img src="../assets/images/blueDian.png" style="width: 9%" />
                <span style="margin-left: 2%">派单数：8</span>
              </div>
              <div
                style="
                  width: 30%;
                  display: flex;
                  align-items: center;
                  justify-content: space-evenly;
                "
              >
                <img src="../assets/images/blueDian.png" style="width: 9%" />
                <span>未完成单数：8</span>
              </div>
            </div>
          </div>
          <div class="maintenanceEcharts">
            <div id="maintenanceLeft"></div>
            <div id="maintenanceRight"></div>
          </div>
        </div>
      </div>
      <div class="rightTwo">
        <div class="title">智慧节能</div>
        <div id="energyEcharts"></div>
        <div class="pickerChange">
          <el-select
            v-model="selectDate"
            :popper-append-to-body="false"
            clearable
            placeholder="请选择"
            @change="selectDataList(selectDate)"
          >
            <el-option
              v-for="(item, index) in dateOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="selectChange">
          <el-select
            v-model="selectValue"
            :popper-append-to-body="false"
            clearable
            placeholder="请选择"
            @change="selectMeterType(selectValue)"
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="rightThree">
        <div class="title" style="height: 15%">摄像监控</div>
        <div class="camera">
          <div
            class="cameraList"
            v-for="(item, index) in cameraList"
            :key="index"
            @click="changeCamera(item.video)"
          >
            <!-- <img :src="item.icon" style="width: 100%; height: 100%" /> -->
            <!-- <iframe
                :src="item.video"
                ref="iframeRef"
                frameborder="0"
                style="width: 100%; height: 100%"
            ></iframe> -->
            <camera
              style="width: 100%; height: 100%"
              :videoUrl="item.video"
              :id="index"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="camersBig" v-if="cameraBigShow">
      <!-- <img :src="cameraBig" style="width:100%;height:100%"/> -->
      <!-- <iframe
            :src="cameraBig"
            ref="iframeRef"
            frameborder="0"
            style="width: 100%; height: 100%"
            ></iframe> -->
      <cameraBig
        style="width: 100%; height: 100%"
        :cameraBig="cameraBigUrl"
        ref="camersBig"
      />
      <div class="close" @click="closeCamer"></div>
      <div class="remoteControl">
        <img
          src="../assets/images/add.png"
          style="width: 20%; height: 24%; cursor: pointer; z-index: 99"
          @click="addZoom"
        />
        <img
          src="../assets/images/reduce.png"
          style="width: 20%; height: 24%; cursor: pointer; z-index: 99"
          @click="reduceZoom"
        />
      </div>
      <div class="remoteControl1">
        <img
          src="../assets/images/leftBtn.png"
          style="width: 20%; height: 24%; cursor: pointer"
        />
        <img
          src="../assets/images/rightBtn.png"
          style="width: 20%; height: 24%; cursor: pointer"
        />
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import {
  GetLevelAlarm,
  getAlarmStatistics,
  getBuildinginfos,
  getAreaList,
} from "../api/index";
import { getHikvision } from "../api/haikang";
import camera from "./camera/camera.vue";
import cameraBig from "./camera/cameraBig.vue";
export default {
  data() {
    return {
      dateData: "", //日期选择
      wisdomList: [
        {
          name: "空闲中",
          count: "7",
        },
        {
          name: "已开庭",
          count: "15",
        },
        {
          name: "已预约",
          count: "17",
        },
      ], // 智慧法庭小房子
      wisdomMonArr: [
        {
          name: "当月收案",
          count: "28",
        },
        {
          name: "当月结案",
          count: "16",
        },
        {
          name: "当月存案",
          count: "12",
        },
      ], //智慧法庭当月
      houseList: ["blueHouse", "redHouse", "yellowHouse"],
      warnBtnList: [
        {
          name: "全部",
        },
        {
          name: "安防设备",
        },
        {
          name: "建筑设备",
        },
      ], //报警按钮
      warnBtnAc: 0, //报警选中按钮
      warnList: [
        {
          id: "1",
          icon: require("../assets/images/warnBlue.png"),
          time: "2023年03月18日 15:26:08",
          cause: "<空调设备>发生事故",
          risk: "三级",
        },
        {
          id: "2",
          icon: require("../assets/images/warnRed.png"),
          time: "2023年03月18日 15:26:08",
          cause: "<空调设备>发生事故",
          risk: "三级",
        },
        {
          id: "3",
          icon: require("../assets/images/warnOrange.png"),
          time: "2023年03月18日 15:26:08",
          cause: "<空调设备>发生事故",
          risk: "三级",
        },
      ], //报警数组
      selectValue: {
        value: "79",
        parentId: "-1",
        label: "江北新区法院",
      },
      options: [
        {
          label: "A-VZCP1-1",
          value: "1",
        },
        {
          label: "A-VZCP1-2",
          value: "2",
        },
      ],
      selectDate: "3",
      dateOptions: [
        {
          label: "年",
          value: "3",
        },
        {
          label: "月",
          value: "2",
        },
        {
          label: "日",
          value: "1",
        },
      ],
      cameraList: [
        {
          video: "",
        },
        {
          video: "",
        },
        {
          video: "",
        },
        {
          video: "",
        },
      ], //摄像
      cameraBigUrl: "",
      cameraBigShow: false,
      buildingList: [],
      alarmAllLevel: [],
      alarmFirstLevel: [],
      alarmSecondLevel: [],
      alarmThirdLevel: [],
      camersCode: "",
    };
  },
  mounted() {
    this.getCamera();
    //获取建筑id
    this.getBuildingData();
    let that = this;
    window.alarmFirstLevel = this.alarmFirstLevel;
    window.alarmSecondLevel = this.alarmSecondLevel;
    window.alarmThirdLevel = this.alarmThirdLevel;
    window.alarmAllLevel = this.alarmAllLevel;
    this.warningOne();
    this.warningTwo();
    this.maintenanceLeft();
    this.maintenanceRight();
    // this.energyEcharts();
    this.selectDataList(this.selectDate);
    // window.createMqtt = this.createMqtt();
    // window.addEventListener("message", function (e) {
    //   let val = e.data.val;
    //   if (val != null) {
    //     that.changeCamera("video/video.html?src=" + e.data.val);
    //       that.camersCode = e.data.code
    //   }
    // });
    // let camera = [
    //   {
    //     icon: require("../assets/images/camera.png"),
    //     video: "video/video.html?src=",
    //   },
    //   {
    //     icon: require("../assets/images/camera.png"),
    //     video: "video/video.html?src=",
    //   },
    //   {
    //     icon: require("../assets/images/camera.png"),
    //     video: "video/video.html?src=",
    //   },
    //   {
    //     icon: require("../assets/images/camera.png"),
    //     video: "video/video.html?src=",
    //   },
    // ];
    // setTimeout(() => {
    //   this.cameraList = camera;
    // }, 1000);
    this.warnSelect(0);
  },
  watch: {
    alarmAllLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmAllLevel", val);
      this.upmqttData(val);
    },

    alarmFirstLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmFirstLevel", val);
      if (val.length != 0) {
        this.upmqttData(val);
      }
    },
    alarmSecondLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmSecondLevel", val);
      this.upmqttData(val);
    },
    alarmThirdLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmThirdLevel", val);
      this.upmqttData(val);
    },
  },
    watch: {
    alarmAllLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmAllLevel",val)
      this.upmqttData(val) 
    },

     alarmFirstLevel(val) {
       
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmFirstLevel",val)
      if(val.length!=0){
        this.upmqttData(val) 
      }
      
    },
     alarmSecondLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmSecondLevel",val)
      this.upmqttData(val) 
    },
     alarmThirdLevel(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      console.log("alarmThirdLevel",val)
      this.upmqttData(val) 
    },
     },
  methods: {
    //放大变焦
    addZoom() {
      console.log(this.camersCode, "sssssssssssss");
      let dataList = {
        path: "/artemis/api/video/v1/ptzs/controlling",
        data: {
          cameraIndexCode: this.camersCode,
          action: "0",
          command: "ZOOM_IN",
          speed: "50",
        },
      };
      getHikvision(dataList).then((res) => {
        console.log(res, "=============");
      });
    },
    //缩小变焦
    reduceZoom() {
      console.log(this.camersCode, "sssssssssssss");
      let dataList = {
        path: "/artemis/api/video/v1/ptzs/controlling",
        data: {
          cameraIndexCode: this.camersCode,
          action: "0",
          command: "ZOOM_OUT",
          speed: "50",
        },
      };
      getHikvision(dataList).then((res) => {
        console.log(res, "=============");
      });
    },
    //获取视频流
    getCamera() {
        this.cameraList[0].video =
          "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";
        this.cameraList[1].video =
          "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";
        this.cameraList[2].video =
          "http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8";
        this.cameraList[3].video =
          "http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8";
      let pathUrl = "/artemis/api/video/v2/cameras/previewURLs";
      let dataList = {
        path: pathUrl,
        data: {
          protocol: "hls",
          cameraIndexCode: "620804559ecf4ade8f13b17337ea8bfa",
        },
      };
      getHikvision(dataList).then((res) => {
        this.cameraList[0].video =
          "video/video.html?src=" +
          res.data.result.data.url +
          "&code=" +
          dataList.data.cameraIndexCode;
      });
      let dataList1 = {
        path: pathUrl,
        data: {
          protocol: "hls",
          cameraIndexCode: "3efe8f887f164548a5db4266590a05ca",
        },
      };
      getHikvision(dataList1).then((res) => {
        this.cameraList[1].video =
          "video/video.html?src=" +
          res.data.result.data.url +
          "&code=" +
          dataList1.data.cameraIndexCode;
      });
      let dataList2 = {
        path: pathUrl,
        data: {
          protocol: "hls",
          cameraIndexCode: "f103ede0eb2b470f84e26ceec42486bc",
        },
      };
      getHikvision(dataList2).then((res) => {
        this.cameraList[2].video =
          "video/video.html?src=" +
          res.data.result.data.url +
          "&code=" +
          dataList2.data.cameraIndexCode;
      });
      let dataList3 = {
        path: pathUrl,
        data: {
          protocol: "hls",
          cameraIndexCode: "bf16be84f6f8410c8dca2dfc5369a532",
        },
      };
      getHikvision(dataList3).then((res) => {
        this.cameraList[3].video =
          "video/video.html?src=" +
          res.data.result.data.url +
          "&code=" +
          dataList3.data.cameraIndexCode;
      });
    },
    //获取建筑Id
    getBuildingData() {
      getBuildinginfos().then((res) => {
        // 接口取值
        this.buildingList = res.data.dataResults;
        let buildArr = [];
        // this.options =
        Object.keys(this.buildingList).map((item, index) => {
          if (this.buildingList[index].name.indexOf("水") == -1) {
            buildArr[buildArr.length] = this.buildingList[index];
          }
          // return {
          //   label: buildNameList,
          //   value: this.buildingList[index].id,
          //   parentId: this.buildingList[index].parentId,
          // };
        });
        this.options = Object.keys(buildArr).map((item, index) => {
          return {
            label: buildArr[index].name,
            value: this.buildingList[index].id,
            parentId: this.buildingList[index].parentId,
          };
        });
      });
    },
    //智慧节能选择时间
    selectDataList(val) {
      let nowTime = "";
      if (val == 1) {
        nowTime = this.$moment().format("YYYYMMDD");
      } else if (val == 2) {
        nowTime = this.$moment().format("YYYYMM");
      } else {
        nowTime = this.$moment().format("YYYY");
      }
      let data = {
        buildingId: this.selectValue.value, //建筑id
        customerId: "12345678",
        date: nowTime,
        dateType: val,
        meterType: "1", //1.电,2.水
        pbuildingId: this.selectValue.parentId, //建组父id
      };
      //接口获取区域
      getAreaList(data).then((res) => {
        this.energyEcharts(res.data.data);
      });
    },
    //智慧节能选择类型
    selectMeterType(event) {
      let nowTime = "";
      if (this.selectDate == 1) {
        nowTime = this.$moment().format("YYYYMMDD");
      } else if (this.selectDate == 2) {
        nowTime = this.$moment().format("YYYYMM");
      } else {
        nowTime = this.$moment().format("YYYY");
      }
      let data = {
        buildingId: event.value, //建筑id
        customerId: "12345678",
        date: nowTime,
        dateType: this.selectDate,
        meterType: "1", //1.电,2.水
        pbuildingId: event.parentId, //建组父id
      };
      //接口获取区域
      getAreaList(data).then((res) => {
        console.log(res.data.data, "sssssssssssssss");
        this.energyEcharts(res.data.data);
      });
    },
    //选中图片
    changeCamera(path) {
      this.cameraBigUrl = path;
      this.cameraBigShow = true;
    },
    closeCamer() {
      this.cameraBigShow = false;
      this.$refs.camersBig.closeVideo();
    },
    //报警选中
    warnSelect(index) {
      this.warnBtnAc = index;
      if (index == 0) {
        let params = {
          AlarmLevel: "",
          DeviceTypes: "",
        };
        GetLevelAlarm(params).then((res) => {
          this.upWainData(res.data.data);
        });
      } else if (index == 1) {
        let params = {
          AlarmLevel: "",
          DeviceTypes: "门禁,视频监控",
        };
        GetLevelAlarm(params).then((res) => {
          this.upWainData(res.data.data);
        });
      } else {
        let params = {
          AlarmLevel: "",
          DeviceTypes: "VRV,机房,消防,电梯,恒温恒湿,热回收,环境,光伏,能耗",
        };
        GetLevelAlarm(params).then((res) => {
          this.upWainData(res.data.data);
        });
      }
    },
    //更新报警信息
    upWainData(val) {
      let icon = null;
      this.warnList = Object.keys(val).map((item, index) => {
        if (val[index].AlarmLevel == 1) {
          val[index].AlarmLevel = "一级";
          icon = require("../assets/images/warnRed.png");
        } else if (val[index].AlarmLevel == 2) {
          val[index].AlarmLevel = "二级";
          icon = require("../assets/images/warnOrange.png");
        } else if (val[index].AlarmLevel == 3) {
          val[index].AlarmLevel = "三级";
          icon = require("../assets/images/warnBlue.png");
        }
        return {
          id: index + 1,
          icon: icon,
          time: this.$moment(val[index].AlarmTime).format(
            "YYYY-MM-DD HH:mm:ss"
          ),
          cause: val[index].AlarmName,
          DeviceType: val[index].DeviceType,
          risk: val[index].AlarmLevel,
        };
      });
    },
    //获取mqtt数据
    upmqttData(val) {
      let icon = null;
      var warnListMqtt = [];
      warnListMqtt = Object.keys(val).map((item, index) => {
        if (val[index].AlarmLevel == 1) {
          val[index].AlarmLevel = "一级";
          icon = require("../assets/images/warnRed.png");
        } else if (val[index].AlarmLevel == 2) {
          val[index].AlarmLevel = "二级";
          icon = require("../assets/images/warnOrange.png");
        } else if (val[index].AlarmLevel == 3) {
          val[index].AlarmLevel = "三级";
          icon = require("../assets/images/warnBlue.png");
        }
        return {
          id: index + 1,
          icon: icon,
          time: this.$moment(val[index].AlarmTime).format(
            "YYYY-MM-DD HH:mm:ss"
          ),
          cause: val[index].AlarmName,
          DeviceType: val[index].DeviceType,
          risk: val[index].AlarmLevel,
        };
      });
      console.log("warnListMqtt", warnListMqtt);
      for (let i = 0; i < warnListMqtt.length; i++) {
        this.warnList.splice(0, 0, warnListMqtt[i]);
      }
    },
    //设备左
    warningOne() {
      let data = [];
      let dataX = [];
      getAlarmStatistics({
        Type: "消防",
      }).then((res) => {
        res.data.data.forEach((item, index) => {
          data.push(item.Count);
          dataX.push(item.Name);
        });
        var myChart = this.$echarts.init(document.getElementById("warningOne"));
        let option = {
          legend: {
            show: true,
            align: "left",
            x: "45%",
            orient: "vertical",
            textStyle: {
              color: "#fff",
              fontSize: "0.6rem",
            },
            data: [
              // {
              //   name: "",
              //   icon: "",
              // },
              {
                name: "消防报警",
              },
            ],
          },
          tooltip: {
            show: true,
          },
          grid: {
            left: "13%",
            right: "4%",
            bottom: "15%",
            top: "17%",
          },
          xAxis: {
            data: dataX,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(66, 164, 255,0.3)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              fontSize: "0.6rem",
              // rotate: "45"
            },
          },
          yAxis: [
            {
              type: "value",
              name: "/次",
              minInterval: 1,
              nameTextStyle: {
                color: "#fff",
                fontSize: "0.6rem",
              },
              // scale: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(66, 164, 255,0.4)",
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#fff",
                fontSize: "0.6rem",
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(66, 164, 255,0.5)",
                },
              },
            },
          ],
          series: [
            {
              name: "消防报警",
              type: "bar",
              barWidth: 20,
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#01B1FF",
                      },
                      {
                        offset: 1,
                        color: "#033BFF",
                      },
                    ],
                    false
                  ),
                },
              },
              label: {
                normal: {
                  show: true,
                  fontSize: "0.6rem",
                  color: "#fff",
                  position: "inside",
                },
              },
              data: data,
            },
          ],
        };
        myChart.setOption(option);
      });
    },
    //设备右
    warningTwo() {
      let data = [];
      let dataX = [];
      getAlarmStatistics({
        Type: "设备",
      }).then((res) => {
        res.data.data.forEach((item, index) => {
          data.push(item.Count);
          dataX.push(item.Name);
        });
        var myChart = this.$echarts.init(document.getElementById("warningTwo"));
        let option = {
          legend: {
            show: true,
            align: "left",
            x: "45%",
            orient: "vertical",
            textStyle: {
              color: "#fff",
              fontSize: "0.6rem",
            },
            data: [
              // {
              //   name: "",
              //   icon: "",
              // },
              {
                name: "设备报警",
              },
            ],
          },
          tooltip: {
            show: true,
          },
          grid: {
            left: "13%",
            right: "4%",
            bottom: "15%",
            top: "17%",
          },
          xAxis: {
            data: dataX,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(66, 164, 255,0.3)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              fontSize: "0.6rem",
              // rotate: "45"
            },
          },
          yAxis: [
            {
              type: "value",
              name: "/次",
              minInterval: 1,
              nameTextStyle: {
                color: "#fff",
                fontSize: "0.6rem",
              },
              // scale: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(66, 164, 255,0.4)",
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#fff",
                fontSize: "0.6rem",
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(66, 164, 255,0.5)",
                },
              },
            },
          ],
          series: [
            {
              name: "设备报警",
              type: "bar",
              barWidth: 20,
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#01B1FF",
                      },
                      {
                        offset: 1,
                        color: "#033BFF",
                      },
                    ],
                    false
                  ),
                },
              },
              label: {
                normal: {
                  show: true,
                  fontSize: "0.6rem",
                  color: "#fff",
                  position: "inside",
                },
              },
              data: data,
            },
          ],
        };
        myChart.setOption(option);
      });
    },
    maintenanceLeft() {
      var myChart = this.$echarts.init(
        document.getElementById("maintenanceLeft")
      );
      var data = [
        { value: "25", name: "报警" },
        { value: "25", name: "已完成" },
        { value: "25", name: "派单" },
        { value: "25", name: "未完成" },
      ];
      var color = ["#146de0", "#27ef5e", "#ffc140", "#d151d8"];
      let option = {
        color: color,
        title: {
          left: "45%",
          top: "35%",
          textAlign: "center",
          text: "当月次数统计",
          textStyle: {
            fontSize: "0.60rem",
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.5)",
          color: "#ffffff",
          formatter: function (params) {
            return (
              // params.name +
              // "<br/>" +
              params.marker +
              '<span style="color:' +
              params.color +
              '">' +
              params.data["name"] +
              "\n" +
              params.data["value"] +
              "%" +
              "</span>"
            );
          },
        },
        legend: {
          // orient: "vertical",
          icon: "rect",
          // left: "5%",
          // top: "20%",
          bottom: "0",
          itemWidth: 14,
          itemGap: 10,
          textStyle: {
            rich: {
              a: {
                color: "#fff",
                fontSize: "0.6rem",
                padding: [0, 10, 0, 0],
              },
              b: {
                color: "rgba(255,255,255,0)",
                fontSize: "0rem",
                padding: [0, 10, 0, 15],
              },
            },
          },
          formatter: function (name) {
            var target, unit;
            for (var i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
                unit = data[i].unit;
              }
            }
            return `{a| ${name}}{b|}`;
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["45%", "60%"],
            center: ["48%", "40%"],
            avoidLabelOverlap: true,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{d}%",
                textStyle: {
                  align: "center",
                  baseline: "middle",
                  fontSize: "0.6rem",
                  fontWeight: "100",
                  color: "#fff",
                },
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 10,
            },

            data: data,
          },
        ],
      };
      myChart.setOption(option);
    },
    maintenanceRight() {
      var myChart = this.$echarts.init(
        document.getElementById("maintenanceRight")
      );
      var data = [
        { value: "25", name: "报警" },
        { value: "25", name: "已完成" },
        { value: "25", name: "派单" },
        { value: "25", name: "未完成" },
      ];
      var color = ["#146de0", "#27ef5e", "#ffc140", "#d151d8"];
      let option = {
        color: color,
        title: {
          left: "45%",
          top: "35%",
          textAlign: "center",
          text: "上月次数统计",
          textStyle: {
            fontSize: "0.6rem",
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.5)",
          color: "#ffffff",
          formatter: function (params) {
            return (
              // params.name +
              // "<br/>" +
              params.marker +
              '<span style="color:' +
              params.color +
              '">' +
              params.data["name"] +
              "\n" +
              params.data["value"] +
              "%" +
              "</span>"
            );
          },
        },
        legend: {
          icon: "rect",
          // left: "5%",
          // top: "20%",
          bottom: "0",
          itemWidth: 14,
          itemGap: 10,
          textStyle: {
            rich: {
              a: {
                color: "#fff",
                fontSize: "0.6rem",
                padding: [0, 10, 0, 0],
              },
              b: {
                color: "rgba(255,255,255,0)",
                fontSize: "0.1rem",
                padding: [0, 10, 0, 10],
              },
            },
          },
          formatter: function (name) {
            var target, unit;
            for (var i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
                unit = data[i].unit;
              }
            }
            return `{a| ${name}}{b|${target}}`;
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["45%", "60%"],
            center: ["48%", "40%"],
            avoidLabelOverlap: true,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{d}%",
                textStyle: {
                  align: "center",
                  baseline: "middle",
                  fontSize: "0.6rem",
                  fontWeight: "100",
                  color: "#fff",
                },
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 10,
            },

            data: data,
          },
        ],
      };
      myChart.setOption(option);
    },
    energyEcharts(val) {
      console.log(val, "节能数据");
      let dataX = [];
      let dataY = [];
      val.values.forEach((item, index) => {
        dataX.push(item.dateDetail);
        dataY.push(item.val);
      });
      var myChart = this.$echarts.init(
        document.getElementById("energyEcharts")
      );
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          show: false,
          data: [
            {
              name: "用电",
              itemStyle: {
                color: "rgb(13,219,207)",
              },
              lineStyle: {
                color: "rgb(13,219,207)",
              },
            },
          ],
          textStyle: {
            //文字样式
            color: "#b4c9d1",
            fontSize: "0.6rem",
          },
          top: "4%",
          // left: "13%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "0%",
          top: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            //x轴坐标点
            axisTick: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            //x轴坐标线样式
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              color: "#fff",
              fontSize: "0.6rem",
            },
            //x轴线
            splitLine: {
              show: false,
              lineStyle: {
                type: [5, 10],
                dashOffset: 10,
                color: "#1282C8",
              },
            },
            // boundaryGap: false,
            data: dataX,
          },
        ],
        yAxis: [
          {
            name: "kWH",
            nameTextStyle: {
              //y轴上方单位的颜色
              color: "#fff",
              fontSize: "0.6rem",
            },
            type: "value",
            axisTick: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgb(104,106,108)",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#1282C8",
              },
            },
            axisLabel: {
              color: "#fff",
              fontSize: "0.6rem",
            },
          },
        ],
        series: [
          {
            name: "用电",
            type: "line",
            smooth: 0.6,
            minInterval: 1,
            min: 0,
            symbol: "circle",
            symbolSize: 0,
            lineStyle: {
              normal: {
                // 颜色渐变函数 前四个参数分别表示四个位置依次为
                // 右下左上
                color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgb(55,60,192)",
                  },
                  {
                    offset: 0.3,
                    color: "rgb(33,151,145)",
                  },
                  {
                    offset: 0.6,
                    color: "rgb(22,223,107)",
                  },
                  {
                    offset: 1,
                    color: "rgb(194,72,132)",
                  },
                ]), //线条渐变色
                width: 4,
                // shadowColor: "rgba(70, 55, 88, 0.35)",
                // shadowBlur: 10,
                // shadowOffsetX: 0,
                // shadowOffsetY: 10,
              },
            },
            // areaStyle: {
            //   color: {
            //     type: "linear",
            //     x: 0,
            //     y: 0,
            //     x2: 0,
            //     y2: 1,
            //     colorStops: [
            //       {
            //         offset: 0,
            //         color: "rgba(58, 46, 73, 0.9)", // 0% 处的颜色
            //       },
            //       {
            //         offset: 0.5,
            //         color: "rgba(56, 44, 71, 0.5)", // 100% 处的颜色
            //       },
            //       {
            //         offset: 1,
            //         color: "transparent", //0% 处的颜色
            //       },
            //     ],
            //     global: false, // 缺省为 false
            //   },
            // },
            data: dataY,
          },
        ],
      };
      myChart.setOption(option);
    },
    createMqtt() {
      //创建链接，接收数据
      let topicSends = ["/SC/pub/uwb", "/SC/pub/env"];
      window.PubScribe(topicSends, this.realInfo);
    },
    /** 实时数据分类 */
    realInfo(topic, message) {
      switch (topic) {
        // 接收托片
        case "/SC/pub/uwb":
          try {
            const utf8decoder = new TextDecoder();
            const u8arr = new Uint8Array(message);
            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            console.log("msg", msg);
          } catch (error) {}
          break;
      }
    },
  },
  components: {
    camera,
    cameraBig,
  },
};
</script>

<style lang="less" scoped>
@fontSize: 0.55rem;
.main {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 0.3% 0 0.3%;
  box-sizing: border-box;
  .left {
    width: 24.7%;
    height: 95%;
    padding: 0.5% 0.3% 1% 0.3%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background: url(../assets/images/leftKuang.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation-name: leftAnimation;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    .leftOne {
      height: 22%;
      width: 100%;
      .wisdomContent {
        height: calc(100% - 25%);
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .wisdomTop {
          width: 100%;
          height: 75%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-around;
          align-items: center;
          .wisdomData {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 70%;
            width: 11%;
            .blueHouse {
              background: url(../assets/images/blueHouse.png) no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: 10%;
            }
            .redHouse {
              background: url(../assets/images/redHouse.png) no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: 10%;
            }
            .yellowHouse {
              background: url(../assets/images/yellowHouse.png) no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: 10%;
            }
          }
        }
        .wisdomBottom {
          height: calc(100% - 75%);
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-around;
          align-items: center;
          .wisdomCount {
            height: 100%;
            width: 15%;
            color: #fff;
            font-size: @fontSize;
            background: url(../assets/images/flootLine.png) no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
          }
        }
      }
    }
    .leftTwo {
      height: 30%;
      width: 100%;
      .warning {
        height: calc(100% - 25%);
        width: 100%;
        margin-top: 3%;
        display: flex;
        flex-wrap: nowrap;
        #warningOne {
          width: 50%;
          height: 100%;
        }
        #warningTwo {
          width: 50%;
          height: 100%;
        }
      }
    }
    .leftThree {
      height: 48%;
      width: 100%;
      .warnListTitle {
        height: 6%;
        width: 100%;
        position: relative;
        .titleTwo {
          width: 20%;
          height: 100%;
          margin-left: 2%;
          background: url(../assets/images/flootLine.png) no-repeat;
          background-size: 100% 100%;
          color: #fff;
          font-size: 0.55rem;
          position: absolute;
        }
      }
      .warnBtn {
        width: 100%;
        height: 20%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        .btnList {
          //   width: 13%;
          //   height: 38%;
          width: 17%;
          height: 41%;
          background: url(../assets/images/warnBtn.png) no-repeat;
          background-size: 100% 100%;
          color: #fff;
          font-size: @fontSize;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.7rem;
        }
        .btnListAc {
          //   width: 13%;
          //   height: 38%;
          width: 17%;
          height: 41%;
          background: url(../assets/images/warnBtnAc.png) no-repeat;
          background-size: 100% 100%;
          color: #fff;
          font-size: @fontSize;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.7rem;
        }
      }
      .warnList {
        height: calc(100% - 31%);
        width: 100%;
        background: url(../assets/images/warnDottedLine.png) no-repeat;
        background-size: 100% 100%;
        overflow: auto;
        .warnListContent {
          height: 27%;
          width: 100%;
          border: 1px dashed #fff;
          color: #fff;
          font-size: @fontSize;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          padding-left: 3%;
          box-sizing: border-box;
          font-size: 0.7rem;
          .warnArray {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
          }
        }
      }
      ::-webkit-scrollbar {
        display: none;
      }
    }
  }
  @keyframes leftAnimation {
    0% {
      position: relative;
      left: 38%;
      transform: scale(0);
    }
    100% {
      position: relative;
      left: 0%;
      transform: scale(1);
    }
  }
  .right {
    width: 24.7%;
    height: 95%;
    padding: 0.5% 0.3% 0.3% 0.3%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background: url(../assets/images/leftKuang.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation-name: rightAnimation;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    .rightOne {
      height: 38%;
      width: 100%;
      .maintenance {
        height: calc(100% - 13%);
        width: 100%;
        padding: 0 2% 0 2%;
        box-sizing: border-box;
        .maintenanceCount {
          width: 100%;
          height: 30%;
          background: url(../assets/images/maintenance.png) no-repeat;
          background-size: 100% 100%;
          margin-top: 2%;
          .quantity {
            color: #fff;
            font-size: @fontSize;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            height: 50%;
          }
        }
        .maintenanceEcharts {
          width: 100%;
          height: calc(100% - 30%);
          display: flex;
          flex-wrap: nowrap;
          #maintenanceLeft {
            width: 50%;
            height: 100%;
          }
          #maintenanceRight {
            width: 50%;
            height: 100%;
          }
        }
      }
    }
    .rightTwo {
      height: 25%;
      width: 100%;
      position: relative;
      #energyEcharts {
        width: 100%;
        height: calc(100% - 25%);
      }
      .selectChange {
        width: 23%;
        height: 10%;
        position: absolute;
        top: 22%;
        right: 5%;
        /deep/ .el-select {
          width: 100%;
          height: 100%;
          border-radius: 15px;
        }
        /deep/ .el-input__inner {
          width: 100%;
          height: 100%;
          background: transparent;
          border: 1px solid rgb(1, 176, 202);
          border-radius: 15px;
          color: #fff;
        }
        /deep/ .el-select-dropdown {
          background: transparent;
          border: 1px solid rgb(1, 176, 202);
          border-radius: 5px;
          left: -30px !important;
        }
        /deep/ .el-select-dropdown__item {
          color: turquoise;
        }
        /deep/ .el-select .el-input .el-select__caret {
          color: rgb(1, 176, 202);
          font-size: 0.3rem;
          font-weight: 500;
        }
        /deep/ .el-input__suffix {
          display: flex;
          align-items: center;
        }
        /deep/ .el-select-dropdown__wrap {
          max-height: 171px;
        }
      }
      .pickerChange {
        width: 23%;
        height: 10%;
        position: absolute;
        top: 22%;
        right: 35%;
        /deep/ .el-select {
          width: 100%;
          height: 100%;
          border-radius: 15px;
        }
        /deep/ .el-input__inner {
          width: 100%;
          height: 100%;
          background: transparent;
          border: 1px solid rgb(1, 176, 202);
          border-radius: 15px;
          color: #fff;
        }
        /deep/ .el-select-dropdown {
          background: transparent;
          border: 1px solid rgb(1, 176, 202);
          border-radius: 5px;
          // left: -30px !important;
        }
        /deep/ .el-select-dropdown__item {
          color: turquoise;
        }
        /deep/ .el-select .el-input .el-select__caret {
          color: rgb(1, 176, 202);
          font-size: 0.3rem;
          font-weight: 500;
        }
        /deep/ .el-input__suffix {
          display: flex;
          align-items: center;
        }
      }
    }
    .rightThree {
      height: 34%;
      width: 100%;
      .camera {
        height: calc(100% - 15%);
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        align-content: stretch;
        .cameraList {
          width: 47%;
          height: 44%;
          border: 3px solid rgb(1, 176, 202);
        }
      }
    }
  }
  @keyframes rightAnimation {
    0% {
      position: relative;
      right: 38%;
      transform: scale(0);
    }
    100% {
      position: relative;
      right: 0%;
      transform: scale(1);
    }
  }
}
.title {
  width: 100%;
  height: 20%;
  background: url("../assets/images/title.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  padding-left: 12%;
  box-sizing: border-box;
}
.camersBig {
  position: fixed;
  top: 21%;
  left: 26%;
  width: 47.4%;
  height: 50%;
  border: 5px solid #01b0ca;
  .close {
    width: 4%;
    height: 8%;
    z-index: 999;
    position: absolute;
    top: 1%;
    right: 1%;
    background: url("../assets/images/close.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  .remoteControl {
    width: 15%;
    height: 27%;
    position: absolute;
    bottom: 2%;
    right: 2%;
    background: url("../assets/images/control.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .remoteControl1 {
    width: 15%;
    height: 27%;
    position: absolute;
    bottom: 2%;
    right: 2%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
}
</style>


