<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"
             id="warnList"
             @mouseenter="mouseOver"
             @mouseleave="mouseLeave">
          <div class="warnListContent"
               v-for="(item, index) in warnList"
               :key="index"
               id="warnListContent">
            <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="selectChange1">
          <el-date-picker v-model="value1"
                          v-if="yearShow"
                          align="right"
                          type="year"
                          value-format="yyyy"
                          placeholder="选择年"
                          @change="selectTime"
                          popper-class="popperClass"
                          size="small">
          </el-date-picker>
          <el-date-picker v-model="value2"
                          v-if="monthShow"
                          type="month"
                          value-format="yyyyMM"
                          placeholder="选择月"
                          @change="selectTimeMM"
                          popper-class="popperClass"
                          size="small">
          </el-date-picker>
          <el-date-picker v-model="value3"
                          size="small"
                          v-if="dateShow"
                          type="date"
                          placeholder="选择日"
                          value-format="yyyyMMdd"
                          @change="selectTimeDD"
                          popper-class="popperClass">
          </el-date-picker>
        </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: '', //日期选择
      value1: '',
      value2: '',
      value3: '',
      yearShow: true,
      monthShow: false,
      dateShow: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            },
          },
        ],
        size: 'min',
      },
      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, //报警选中按钮
      warnListMqtt: [
        {
          id: '5',
          icon: require('../assets/images/warnBlue.png'),
          time: '2023年03月18日 15:26:08',
          cause: '<空调>发生事故',
          risk: 1,
        },
        {
          id: '5',
          icon: require('../assets/images/warnRed.png'),
          time: '2023年03月18日 15:26:08',
          cause: '<空调设备>发生事故',
          risk: 2,
        },
        {
          id: '3',
          icon: require('../assets/images/warnOrange.png'),
          time: '2023年03月18日 15:26:08',
          cause: '<空调设备>发生事故',
          risk: 3,
        },
        {
          id: '4',
          icon: require('../assets/images/warnOrange.png'),
          time: '2023年03月18日 15:26:08',
          cause: '<空调设备>发生事故',
          risk: 1,
        },
        {
          id: '5',
          icon: require('../assets/images/warnOrange.png'),
          time: '2023年03月18日 15:26:08',
          cause: '<空调设备>发生事故',
          risk: 2,
        },
        {
          id: '5',
          icon: require('../assets/images/warnOrange.png'),
          time: '2023年03月18日 15:26:08',
          cause: '<空调设备>发生事故',
          risk: 3,
        },
      ],
      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: '三级',
        },
        {
          id: '4',
          icon: require('../assets/images/warnOrange.png'),
          time: '2023年03月18日 15:26:08',
          cause: '<空调设备>发生事故',
          risk: '三级',
        },
        {
          id: '5',
          icon: require('../assets/images/warnOrange.png'),
          time: '2023年03月18日 15:26:08',
          cause: '<空调设备>发生事故',
          risk: '三级',
        },
        {
          id: '5',
          icon: require('../assets/images/warnOrange.png'),
          time: '2023年03月18日 15:26:08',
          cause: '<空调设备>发生事故',
          risk: '三级',
        },
        {
          id: '5',
          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: 1,
      dateOptions: [
        {
          label: '年',
          value: 3,
        },
        {
          label: '月',
          value: 2,
        },
        {
          label: '日',
          value: 1,
        },
      ],
      cameraList: [
        {
          video: '',
        },
        {
          video: '',
        },
        {
          video: '',
        },
        {
          video: '',
        },
      ], //摄像
      cameraBigUrl: '',
      cameraBigShow: false,
      buildingList: [],
      alarmAllLevel: [],
      alarmFirstLevel: [],
      alarmSecondLevel: [],
      alarmThirdLevel: [],
      camersCode: '',
      interval: null, //定时器
    }
  },
  mounted() {
    let that = this
    this.value3 = this.$moment().format('yyyyMMDD')
    this.selectTimeDD(this.value3)
    // setTimeout(() => {
    // this.getCamera();
    //获取建筑id
    that.getBuildingData()
    window.alarmFirstLevel = that.alarmFirstLevel
    window.alarmSecondLevel = that.alarmSecondLevel
    window.alarmThirdLevel = that.alarmThirdLevel
    window.alarmAllLevel = that.alarmAllLevel
    that.warningOne()
    that.warningTwo()
    that.maintenanceLeft()
    that.maintenanceRight()
    // this.energyEcharts();
    that.selectDataList(that.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);
    that.warnSelect(0)
    that.autoScrollindex(67, 50, 0, document.getElementById('warnList'))
    // }, 1000);
  },
  // 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, "=============");
        })
        .catch((err) => {})
    },
    selectTime(val) {
      if (val) {
        //console.log("val",val)
        this.value1 = val
        let data = {
          buildingId: this.selectValue.value, //建筑id
          customerId: '12345678',
          date: this.value1,
          dateType: 3,
          meterType: '1', //1.电,2.水
          pbuildingId: this.selectValue.parentId, //建组父id
        }
        //接口获取区域
        getAreaList(data)
          .then((res) => {
            this.energyEcharts(res.data.data)
          })
          .catch((err) => {})
      } else {
        //  this.filters.year = ""
        //  this.filters.month = ""
      }
    },
    selectTimeMM(val) {
      if (val) {
        //console.log("val",val)
        this.value2 = val
        let data = {
          buildingId: this.selectValue.value, //建筑id
          customerId: '12345678',
          date: this.value2,
          dateType: 2,
          meterType: '1', //1.电,2.水
          pbuildingId: this.selectValue.parentId, //建组父id
        }
        //接口获取区域
        getAreaList(data)
          .then((res) => {
            this.energyEcharts(res.data.data)
          })
          .catch((err) => {})
      } else {
        //  this.filters.year = ""
        //  this.filters.month = ""
      }
    },
    selectTimeDD(val) {
      if (val) {
        console.log('val', val)
        this.value3 = val
        let data = {
          buildingId: this.selectValue.value, //建筑id
          customerId: '12345678',
          date: this.value3,
          dateType: 1,
          meterType: '1', //1.电,2.水
          pbuildingId: this.selectValue.parentId, //建组父id
        }
        //接口获取区域
        getAreaList(data)
          .then((res) => {
            this.energyEcharts(res.data.data)
          })
          .catch((err) => {})
      } else {
        //  this.filters.year = ""
        //  this.filters.month = ""
      }
    },
    //缩小变焦
    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, "=============");
        })
        .catch((err) => {})
    },
    //获取视频流
    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;
          this.cameraList[0].video = res.data.result.data.url
          // console.log(this.cameraList[0].video,'视频地址');
        })
        .catch((err) => {})

      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;
          this.cameraList[1].video = res.data.result.data.url
        })
        .catch((err) => {})
      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;
          this.cameraList[2].video = res.data.result.data.url
        })
        .catch((err) => {})
      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;
          this.cameraList[3].video = res.data.result.data.url
        })
        .catch((err) => {})
    },
    //获取建筑Id
    getBuildingData() {
      getBuildinginfos()
        .then((res) => {
          // console.log("res",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,
            }
          })
        })
        .catch((err) => {})
    },
    //智慧节能选择时间
    // 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);
    //   }).catch(err => {

    //                         });
    // },
    selectDataList(val) {
      this.selectDate = val
      if (val == 1) {
        this.dateShow = true
        this.monthShow = false
        this.yearShow = false
      } else if (val == 2) {
        this.monthShow = true
        this.yearShow = false
        this.dateShow = false
      } else {
        this.yearShow = true
        this.monthShow = false
        this.dateShow = false
      }
    },
    //智慧节能选择类型
    selectMeterType(event) {
      let nowTime = ''
      //console.log("selectDate",this.selectDate)
      if (this.selectDate == 1) {
        // nowTime = this.$moment().format("YYYYMMDD");
        nowTime = this.value1
      } else if (this.selectDate == 2) {
        // nowTime = this.$moment().format("YYYYMM");
        nowTime = this.value2
      } else if (this.selectDate == 3) {
        // nowTime = this.$moment().format("YYYY");
        nowTime = this.value3
      }
      //
      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)
        })
        .catch((err) => {})
    },
    //选中图片
    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)
          })
          .catch((err) => {})
      } else {
        let params = {
          AlarmLevel: '',
          DeviceTypes: 'VRV,机房,消防,电梯,恒温恒湿,热回收,环境,光伏,能耗',
        }
        GetLevelAlarm(params)
          .then((res) => {
            this.upWainData(res.data.data)
          })
          .catch((err) => {})
      }
    },
    //更新报警信息
    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,
        }
      })
      for (let i = 0; i < warnListMqtt.length; i++) {
        this.warnList.splice(0, 0, warnListMqtt[i])
      }
      this.warnList = Object.keys(this.warnList).map((item, index) => {
        if (this.warnList[index].AlarmLevel == 1) {
          this.warnList[index].AlarmLevel = '一级'
          icon = require('../assets/images/warnRed.png')
        } else if (this.warnList[index].AlarmLevel == 2) {
          this.warnList[index].AlarmLevel = '二级'
          icon = require('../assets/images/warnOrange.png')
        } else if (this.warnList[index].AlarmLevel == 3) {
          this.warnList[index].AlarmLevel = '三级'
          icon = require('../assets/images/warnBlue.png')
        }
        return {
          id: index + 1,
          icon: icon,
          time: this.$moment(this.warnList[index].AlarmTime).format(
            'YYYY-MM-DD HH:mm:ss'
          ),
          cause: this.warnList[index].AlarmName,
          DeviceType: this.warnList[index].DeviceType,
          risk: this.warnList[index].AlarmLevel,
        }
      })
    },
    //设备左
    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',
                interval: 0,
              },
            },
            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)
        })
        .catch((err) => {})
    },
    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
      }
    },
    //自动滚动
    autoScrollindex(stepLength, speed, delay, element) {
      let that = this
      let step = 1
      element.scrollTop = 0
      function start() {
        that.interval = setInterval(scrolling, speed)
        element.scrollTop += step
      }

      function scrolling() {
       
        if (
          element.scrollTop % stepLength !== 0 &&
          element.scrollTop === element.scrollHeight - element.offsetHeight
        ) {
          // element.scrollTop += step
          step = 1
          element.scrollTop = 0
        } else {

          // if (
          //   element.scrollTop === 0 ||
          //   element.scrollTop === element.scrollHeight - element.offsetHeight
          // ) {
          //   // 触顶或触底\
          //   // step *= -1; // 转换方向
          // }
          clearInterval(that.interval)
          setTimeout(start, delay)
        }
      }
      if (element.offsetHeight !== element.scrollHeight) {
        // 元素内容没有溢出时，不触发
        setTimeout(start, delay)
      }
    },
    //鼠标移入事件
    mouseOver() {
      let that = this
      clearInterval(that.interval)
      that.interval = null
    },
    mouseLeave() {
      if (this.interval == null) {
        this.autoScrollindex(67, 50, 0, document.getElementById('warnList'))
      }
    },
  },
  beforeDestroy() {
    let that = this
    // 离开当前路由前的操作
    clearInterval(that.interval)
    that.interval = null
  },
  components: {
    camera,
    cameraBig,
  },
}
</script>
<style>
.el-year-table td {
  text-align: center;
  padding: 4px 3px !important;
  cursor: pointer;
}
.el-month-table td div {
  height: 20px !important;
  padding: 6px 0 !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* .el-date-table td {
  width: 25px;
  height: 21px !important;
  padding: 4px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  position: relative;
} */
.el-date-table td {
  width: 32px;
  height: 21px !important;
  padding: 4px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.el-date-table td div {
  height: 12px !important;
  padding: 3px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-picker-panel__content {
  position: relative;
  margin: 15px;
  margin-top: 0;
}
.el-date-picker__header {
  margin: 0px;
  text-align: center;
}
</style>
<style lang="scss" scoped>
.el-month-table td div {
  height: 20px !important;
  padding: 6px 0 !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-year-table td {
  text-align: center;
  padding: 4px 3px !important;
  cursor: pointer;
}
.selectChange1 .popperClass .el-date-picker {
  width: 180px !important;
  height: 150px;
  &__header-label {
    font-size: 14px;
  }
  .el-picker-panel__content {
    width: 180px;
    height: 150px;
    margin-left: 0;
  }
  .el-year-tabel td {
    padding: 5px 0;
    .cell {
      width: 32px;
      height: 32px;
    }
  }
}
</style>
<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%;
      height: 52%;
      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%);
        // height:480px;
        width: 100%;
        background: url(../assets/images/warnDottedLine.png) no-repeat;
        background-size: 100% 100%;
        overflow: auto;
        .warnListContent {
          //   height: 27%;
          height: 25%;
          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: 60%;
        /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;
        }
      }
      .selectChange1 {
        width: 23%;
        height: 10%;
        position: absolute;
        top: 22%;
        right: 35%;
        /deep/ .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 134px;
        }
        /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-input__icon {
          height: 100%;
          width: 25px;
          text-align: center;
          -webkit-transition: all 0.3s;
          transition: all 0.3s;
          line-height: 22px;
        }
        /deep/ .el-input--suffix .el-input__inner {
          padding-right: 18px;
        }
      }
    }
    .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>

