<template>
  <div class="main-page">
    <div class="main-header">
      <div class="main-title">
        <span>{{ title }}</span>
      </div>
    </div>

    <div class="home-icon">
      <a @click="backToIndex">
        <img src="@/assets/global_images/home-logo.png">
      </a>
    </div>
    <div class="exit-icon">
      <a href="#" @click="dialogVisible=true">
        <img src="@/assets/global_images/exit-logo.png">
      </a>
    </div>

    <!-- 左上角设备状态区域 -->
    <div class="dev-status-block">
      <el-row style="z-index: 99">
        <el-col :span="6" class="sub-data-block dev-normal">
          <div class="sub-title">正常</div>
          <div class="statis-block">
            <span v-text="dev.onLine"/>
          </div>
        </el-col>

        <el-col :span="6" class="sub-data-block dev-alarm">
          <div class="sub-title">报警</div>
          <div class="statis-block">
            <span v-text="dev.alarm"/>
          </div>
        </el-col>

        <!--<el-col :span="6" class="sub-data-block dev-offline">-->
          <!--<div class="statis-block">-->
            <!--<span v-text="dev.offLine"/>-->
          <!--</div>-->
          <!--<div class="sub-title">离线</div>-->
        <!--</el-col>-->

        <!--<el-col :span="6" class="sub-data-block dev-closed">-->
          <!--<div class="statis-block">-->
            <!--<span v-text="dev.closed"/>-->
          <!--</div>-->
          <!--<div class="sub-title">关闭</div>-->
        <!--</el-col>-->
      </el-row>
    </div>

    <!-- 左侧当前报警列表区域 -->
    <div v-show="alarmList.length > 0" class="alarm-now-block">
      <div class="map-alarm-div-header">报警列表
        <span class="icon-right" @click="tableShow=!tableShow">
          <i v-if="tableShow" class="el-icon-arrow-up"/>
          <i v-else class="el-icon-arrow-down"/>
        </span>
      </div>
      <transition name="el-collapse-transition">
        <el-scrollbar
          v-show="tableShow"
          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
          :class="{ moredatascollor: alarmList.length > 6 }"
          :native="false">
          <el-table
            :data="alarmList"
            class="alarm-list-table"
            border
            stripe
            @row-click="alarmRowClick">
            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row[column.value] }}
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </transition>
    </div>

    <!-- 中间平面图区域 -->
    <div class="map-overview">
      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">

      <img
        v-for="item in devList"
        :id="item.id"
        :key="item.id"
        :src="item.imgUrl"
        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px', left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
        class="point-camera"
        @click="detailDev(item, $event)" />
    </div>

    <!-- 平面图区域设备类型按钮 -->
    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
      <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
        <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
        <span>人脸识别</span>
      </el-col>
      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
        <!--<span>车牌轨迹</span>-->
      <!--</el-col>-->
      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
        <!--<span>周界防护</span>-->
      <!--</el-col>-->
      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
        <!--<span>标准数字</span>-->
      <!--</el-col>-->
      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
        <!--<span>智能球形</span>-->
      <!--</el-col>-->
      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
        <!--<span>标准半球</span>-->
      <!--</el-col>-->
    </div>
    <!-- 平面图区域设备类型按钮 -->
    <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
      <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
        <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
        <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
        <span>全部</span>
      </el-col>
      <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
        <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
        <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
        <span>摄像头</span>
      </el-col>
      <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
        <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
        <img v-else src="@/assets/overview_images/icons/icon-temperature-unchecked.png">
        <span>温湿度</span>
      </el-col>

      <el-col v-show="showSmoking" class="dev-icon" @click.native="selectDevByType('smoking', $event)">
        <img v-if="checkDevType[3]" src="@/assets/overview_images/icons/icon-smoking-checked.png">
        <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
        <span>烟感</span>
      </el-col>
      <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-sound-checked.png">
        <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
        <span>声光报警</span>
      </el-col>
    </div>

    <!-- 右侧平面图索引切换区域 -->
    <div class="map-tab">
      <!--<div class="tab-top" />-->
      <div class="map-index-button index-selected" @click="selectMapTab('three', $event)">三号楼</div>
      <div class="map-index-button" @click="selectMapTab('four', $event)">四号楼</div>
      <!--<div class="tab-bottom" />-->

      <div v-show="showSubTabGuider" ref="sub-tab" class="sub-tab-guider" />
      <div v-show="showSubTabGuider" ref="sub-tab-border" class="sub-tab-border" />
      <div v-show="showFloorThree" ref="sub-tab-floor-3" class="sub-tab-content" @click="changeMap('tg_3_1')">三号楼一层</div>
      <div v-show="showFloorFour" ref="sub-tab-floor-4-1" class="sub-tab-content" @click="changeMap('tg_4_1')">四号楼一层</div>
      <div v-show="showFloorFour" ref="sub-tab-floor-4-5" class="sub-tab-content" @click="changeMap('tg_4_5')">四号楼五层</div>
    </div>

    <!-- 右侧设备详情及操作区域 -->
    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
      <span class="dev-detail-close" @click="showDevDetail=false" />
      <!--<el-row style="margin-top: -25px;">-->
        <!--<el-col :span="24">设备名称-->
          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
        <!--</el-col>-->
      <!--</el-row>-->
      <el-row>
        <el-col :span="24">设备编号
          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">设备类型
          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">在线状态
          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">安装日期
          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">安装位置
          <span class="dev-detail-span">{{ dataForm.position }}</span>
        </el-col>
      </el-row>
    </div>
    <!-- 右侧报警详情及操作区域 -->
    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="alarm-detail-block" style="color: red">
      <span class="dev-detail-close" @click="showAlarmDetail=false" />
      <el-row style="margin-top: -35px">
        <el-col :span="24">设备编号
          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">设备类型
          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">报警编号
          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">报警时间
          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">报警内容
          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
        </el-col>
      </el-row>
      <el-row v-show="dataForm.type===1">
        <el-col :span="24">报警数值
          <span class="dev-detail-span">{{ alarmForm.alarmValue }}℃</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">所属区域
          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="提示"
      class="close-dialog"
      :visible.sync="dialogVisible"
      width="400px">
      <span style="font-size: 15px;padding-left: 30px">是否确认登出？</span>
      <span slot="footer" class="dialog-footer" style="margin-top: 0px; padding-top: 0px">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="logout">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getProject } from '@/utils/baseConfig'
import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
import DeviceDetail from '@/views/deviceManage/deviceDetail'
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'

const cameraTypes = [4, 5, 8, 9, 10, 11]
const smokingTypes = [2]
const temperatureTypes = [1]
const soundTypes = [12]
export default {
  name: 'KeyOverviewDevice',
  components: { DeviceDetail },
  data() {
    return {
      wsPath: process.env.BASE_API+'/websocket/',
      showAlarmDetail: false, // 是否显示设备详情
      dialogVisible: false,
      alarmForm: {
        id:'',
        alarmCode: '',
        alarmTime: '',
        alarmContent: '',
        alarmValue: '',
        devcode: '',
        devName: '',
        areaPosition: '',
        areaType: '',
        reason: '',
        remark: ''
      },
      itemColor: '#f58a88',
      title: getProject().title,
      bgImageSrc: tg_3_1,
      devListParams: {
        picture: '2',
        areaTypeId: 4,
        deviceTypes: '1,2,4,12'
      },
      dev: {
        alarm: 0,
        onLine: 0,
        closed: 0,
        offLine: 0
      },
      imgSizeOriginal: {
        width: 2245,
        height: 1586
      }, // 图片原尺寸
      imgSize: {
        width: 2245,
        height: 1586
      }, // 图片显示尺寸
      winSize: {
        width: 1440,
        height: 789
      }, // 屏幕窗口尺寸
      cameraTypeNum: 5,
      btnwidth: 210,
      halfLeft: 0,
      footLeft: 0, // footer部分设备类型按钮偏移量
      showTemp: true, // 是否显示温湿度按钮
      showSmoking: true, // 是否显示烟感按钮
      showSound: true, // 是否显示声光报警按钮
      showSubTabGuider: false, // 是否显示二级菜单指引
      showFloorThree: false, // 是否显示三层
      showFloorFour: false, // 是否显示四层
      showDevDetail: false, // 是否显示设备详情
      alarmList: [], // 报警列表
      alarmColumns: [
        {
          text: '设备编号',
          value: 'devcode',
          align: 'center'
        },
        {
          text: '报警内容',
          value: 'alarmContent',
          align: 'center'
        },
        {
          text: '报警时间',
          value: 'alarmTime',
          align: 'center',
          width: 165
        }
      ], // 报警列表显示列
      tableShow: true, // 是否显示告警列表
      devList: [], // 设备列表（在地图上显示）
      dataForm: {
        id: '', // id
        name: '', // 设备名
        devcode: '', // 设备编号
        typeName: '', // 设备类型
        model: '', // 设备型号
        onlineStatusName: '', // 在线状态
        deviceStatusName: '', // 设备状态
        position: '', // 安装位置
        installDate: '', // 安装日期
        inOutName: '' // 进出营
      }, // 设备详情表单
      cameraClass:'dev-icon',
      showType : false,
      checkDevType1: [false, false, false, false, false, false], // 摄像头类型
      checkDevType: [true, false, false, false, false] // 选中设备类型
    }
  },
  watch:{
    checkDevType: function(val) {
      if(val[1]){
        this.cameraClass = 'dev-icon dev-type-selected'
      }else{
        this.cameraClass = 'dev-icon'
      }
    }
  },
  destroyed() {
    window.removeEventListener("click", this.handleKeyup, true);
  },
  mounted() {
    window.addEventListener('click',this.handleKeyup, true)
    this.wsPath = this.wsPath.replace(/http/,'ws')
    this.webSocket()
    this.initWindowSize()

    this.fetchData()
    this.fetchAlarmNowData()

    const that = this
    window.onresize = function() {
      that.initWindowSize()
      that.getBgImageSize()
    }
  },
  methods: {
    webSocket() {
      const that = this
      if (typeof (WebSocket) === 'undefined') {
        this.$notify({
          title: '提示',
          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
          type: 'warning',
          duration: 0
        })
      } else {
        // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
        // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
        const socketUrl = this.wsPath + this.$store.getters.id
        this.socket = new WebSocket(socketUrl)
        this.socket.onclose = function() {}
        // 监听socket打开
        this.socket.onopen = function() {
          console.log('浏览器WebSocket已打开')
          // 加入心跳监测
          console.log(new Date())
        }
        // 监听socket消息接收
        this.socket.onmessage = function(msg) {
          that.fetchAlarmNowData()
          that.fetchDeviceData()
          // 转换为json对象
          const data = JSON.parse(msg.data)
          var str = ""
          if(data.alarmValue.length!==0){
            str = '('+data.alarmValue+'℃)'
          }
          console.log(data)
          that.$notify({
            title: '报警设备：' + data.devcode,
            // 这里也可以把返回信息加入到message中显示
            message: '报警内容：'+ data.alarmContent + str,
            type: 'error',
            onClick: () => {
              that.clickAlarm(data.deviceId,data.picture)
            }
          })
        }
        // 监听socket错误
        this.socket.onerror = function() {
          that.$notify({
            title: '服务器错误',
            message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
            type: 'error',
            duration: 0
          })
        }
        // 监听socket关闭
        this.socket.onclose = function(e) {
          console.log('WebSocket已关闭', e, new Date())
        }
      }
    },
    clickAlarm(val,pic){
      console.log(val)
      if(pic==='1'){
        this.changeMap('tg_main')
      }else if(pic==='2'){
        this.changeMap('tg_3_1')
      }else if(pic==='3'){
        this.changeMap('tg_4_1')
      }else if(pic==='4'){
        this.changeMap('tg_4_1')
      }
      setTimeout(() => {
        var obj = document.getElementById(val.toString());
        var timer = setInterval(() => {
          obj.style.display = obj.style.display=="none"?"":"none";
        }, 500)
        setTimeout(() => {
          clearInterval(timer )
        }, 10000);
      }, 1000);
    },
    handleKeyup(val){ //单击收起摄像头分类
      this.showAlarmDetail  = false
      this.showDevDetail  = false
      var item = ['人脸识别']
      for(var i=0;i<item.length;i++){
        if(item[i]===val.target.innerText){
          return
        }
      }
      if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
        return
      }
      if( val.target.innerText!=='摄像头') {
        this.showType = false
        const devTypes = document.querySelectorAll('.dev-icon')
        for(var i=0;i<this.checkDevType.length;i++) {
          if (this.checkDevType[i]) {
            devTypes[i+1].className += ' dev-type-selected'
          }
        }
      }
    },
    handleSelect(key, keyPath) {
      this.selectDevByType(key,undefined)
    },
    // 获取窗口大小
    initWindowSize() {
      // 获取窗体尺寸
      this.winSize = {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      }

      // 设置footer部分居中显示
      if (this.winSize.width >= 1920) {
        this.btnwidth= 210
        this.footLeft = (this.winSize.width - 2 * 210) / 2
      } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
        this.btnwidth= 155
        this.footLeft = (this.winSize.width - 2 * 155) / 2
      }
    },
    // 获取图像大小
    getBgImageSize() {
      // 获取图片尺寸
      this.imgSize = {
        width: this.$refs['bgImg'].width,
        height: this.$refs['bgImg'].height
      }
      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
    },
    // 重新绘制设备点位
    reDrawDevs() {
      const halfLeft = (this.winSize.width - this.imgSize.width) / 2

      // 调整球机的设备位置
      const that = this
      this.devList.forEach(function(item) {
        const point = document.getElementById(item.id)

        if (point !== null) {
          if (item.x !== '' && item.y !== '') {
            point.style.position = 'absolute'
            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
          } else {
            point.style.display = 'none'
          }
        }
      })
    },
    // 获取设备列表
    fetchDeviceData() {
      overviewDeviceList(this.devListParams).then(response => {
        if (response.code === 200) {
          const that = this
          this.devList = []
          response.data.forEach(dev => {
            if (dev.x !== '' && dev.y !== '') {
              if(dev.type===10){ //球
                if(dev.deviceStatus === 0){ //normal
                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
                }else{ //alarm
                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
                }
              }else if(dev.type===11){ //半球
                if(dev.deviceStatus === 0){ //normal
                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
                }else{ //alarm
                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
                }
              }else if(dev.type===1){ //温湿度
                if(dev.deviceStatus === 0){ //normal
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-green.png")
                }else{ //alarm
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
                }
              }else if(dev.type===2){ //烟感
                if(dev.deviceStatus === 0){ //normal
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-smoking-green.png")
                }else{ //alarm
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-smoking-checked.png")
                }
              }else if(dev.type===12){ //声光
                if(dev.deviceStatus === 0){ //normal
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-green.png")
                }else{ //alarm
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
                }
              }else {  //camera
                if(dev.deviceStatus === 0){ //normal
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
                }else{ //alarm
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
                }
              }
              this.devList.push(dev)
            }
          })
        }
      })
    },
    // 平面图就绪时执行函数
    backgroundImageReady() {
      this.getBgImageSize()
      this.fetchDeviceData()
    },
    // 获取设备状态统计值
    fetchData() {
      overviewDeviceStatus({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
        if (response.code === 200) {
          this.dev.alarm = response.data.alarm.length
          this.dev.onLine = response.data.onLine.length
          this.dev.closed = response.data.closed.length
          this.dev.offLine = response.data.offLine.length
        }
      })
    },
    // 获取报警列表
    fetchAlarmNowData() {
      alarmListOverview({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
        if (response.code === 200) {
          this.alarmList = response.data
        } else {
          this.$message.error(response.message)
        }
      })
    },
    logout() {
      this.dialogVisible = false
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    },
    backToIndex() {
      this.$router.push('/key/alarm/now')
    },
    // 选择设备类型
    selectDevByType(type, event) {
      // 遍历所有的设备类型
      const devTypes = document.querySelectorAll('.dev-icon')
      for (let i = 0; i < devTypes.length; i++) {
        if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
          devTypes[i].className = 'dev-icon el-col el-col-24'
        }
      }
      if(type !== 'camera'){
        // 添加选中的样式
        if (typeof event === 'undefined') {
          devTypes[1].className += ' dev-type-selected'
        } else {
          event.currentTarget.className += ' dev-type-selected'
        }
      }
      if(type!=='camera'){
        this.checkDevType = [false, false, false, false, false]
        this.checkDevType1 = [false, false, false, false, false, false]
      }
      if (type === 'all') {
        if(this.bgImageSrc===tg_4_5){
          this.devListParams.deviceTypes = '4'
        }else{
          this.devListParams.deviceTypes = '1,2,4,12'
        }
        // this.devListParams.deviceTypes = []
        this.checkDevType[0] = true
      } else if(type==='camera'){
        for(var i=0;i<this.checkDevType1.length;i++){
          if(this.checkDevType1[i]) {
            devTypes[i].className += ' dev-type-selected'
          }
        }
        return
      } else if (type === 'temperature') {
        this.devListParams.deviceTypes = temperatureTypes.toString()
        this.checkDevType[2] = true
      } else if (type === 'smoking') {
        this.devListParams.deviceTypes = smokingTypes.toString()
        this.checkDevType[3] = true
      } else if (type === 'sound') {
        this.devListParams.deviceTypes = soundTypes.toString()
        this.checkDevType[4] = true
      }else if(type === '4'){
        this.devListParams.deviceTypes = '4'
        this.checkDevType[1] = true
        this.checkDevType1[0] = true
      }else if(type === '5'){
        this.devListParams.deviceTypes = '5'
        this.checkDevType[1] = true
        this.checkDevType1[1] = true
      }else if(type === '8'){
        this.devListParams.deviceTypes = '8'
        this.checkDevType[1] = true
        this.checkDevType1[2] = true
      }else if(type === '9'){
        this.devListParams.deviceTypes = '9'
        this.checkDevType[1] = true
        this.checkDevType1[3] = true
      }else if(type === '10'){
        this.devListParams.deviceTypes = '10'
        this.checkDevType[1] = true
        this.checkDevType1[4] = true
      }else if(type === '11'){
        this.devListParams.deviceTypes = '11'
        this.checkDevType[1] = true
        this.checkDevType1[5] = true
      }
      this.fetchDeviceData()
      // if(this.checkDevType[1]){
      //   this.itemColor = '#f58a88'
      // }else{
      //   this.itemColor = '#00D2FF'
      // }
    },
    // 查询并显示设备详情
    detailDev(dev, event) {
      this.resetDevDetail()
      if(dev.deviceStatus===1){
        getDetailDevice(dev.id).then(response => {
          if (response.code === 200) {
            this.dataForm = {
              id: dev.id,
              name: dev.name,
              devcode: dev.devcode,
              typeName: response.data.typeName,
              type: response.data.type,
              model: dev.model,
              onlineStatusName: response.data.onlineStatusName,
              position: dev.position,
              installDate: dev.installDate,
              inOutName: response.data.inOutName,
              deviceStatusName: response.data.deviceStatusName
            }
            alarmDetailbyCode(dev.devcode).then(response=>{
              if(response.code === 200){
                this.alarmForm = response.data
                this.showDevDetail = false
                this.showAlarmDetail = true
              }
            })
          } else {
            this.$message.error(response.message)
          }
        })
        // 弹窗显示设备详情
        const targetDev = event.currentTarget // 取到点击到的设备图标div
        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
        //top = top + 100
        this.$refs['alarm-detail-block'].style.position = 'absolute'
        this.$refs['alarm-detail-block'].style.top = top + 'px'
        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
      }else{
        getDetailDevice(dev.id).then(response => {
          if (response.code === 200) {
            this.dataForm = {
              id: dev.id,
              name: dev.name,
              devcode: dev.devcode,
              typeName: response.data.typeName,
              model: dev.model,
              onlineStatusName: response.data.onlineStatusName,
              position: dev.position,
              installDate: dev.installDate,
              inOutName: response.data.inOutName,
              deviceStatusName: response.data.deviceStatusName
            }
            this.showDevDetail = true
            this.showAlarmDetail = false
          } else {
            this.$message.error(response.message)
          }
        })
        // 弹窗显示设备详情
        const targetDev = event.currentTarget // 取到点击到的设备图标div
        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
        //top = top + 100
        this.$refs['dev-detail-block'].style.position = 'absolute'
        this.$refs['dev-detail-block'].style.top = top + 'px'
        this.$refs['dev-detail-block'].style.left = targetDev.style.left
      }
    },
    // 点击平面图一级按钮
    selectMapTab(tab, event) {
      // 遍历所有的地图
      const mapTabs = document.querySelectorAll('.map-index-button')
      for (let i = 0; i < mapTabs.length; i++) {
        if (mapTabs[i].className.indexOf('index-selected') > -1) {
          mapTabs[i].className = 'map-index-button'
        }
      }

      // 添加选中的样式
      event.currentTarget.className += ' index-selected'

      // 选中三层
      if (tab === 'three') {
        this.showSubTabGuider = true
        this.showFloorThree = true
        this.showFloorFour = false

        this.$refs['sub-tab'].style.position = 'absolute'
        this.$refs['sub-tab-border'].style.position = 'absolute'
        this.$refs['sub-tab-floor-3'].style.position = 'absolute'

        if (this.winSize.width >= 1440) {
          this.$refs['sub-tab'].style.right = '290px'
          this.$refs['sub-tab'].style.top = '61px'

          this.$refs['sub-tab-border'].style.right = '56px'
          this.$refs['sub-tab-border'].style.top = '0px'

          this.$refs['sub-tab-floor-3'].style.right = '70px'
          this.$refs['sub-tab-floor-3'].style.top = '55px'
        } else if (this.winSize.width < 1440) {
          this.$refs['sub-tab'].style.right = '215px'
          this.$refs['sub-tab'].style.top = '46px'

          this.$refs['sub-tab-border'].style.right = '40px'
          this.$refs['sub-tab-border'].style.top = '0px'

          this.$refs['sub-tab-floor-3'].style.right = '50px'
          this.$refs['sub-tab-floor-3'].style.top = '40px'
        }
      } else if (tab === 'four') {
        this.showSubTabGuider = true
        this.showFloorThree = false
        this.showFloorFour = true

        this.$refs['sub-tab'].style.position = 'absolute'
        this.$refs['sub-tab-border'].style.position = 'absolute'
        this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
        this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'

        if (this.winSize.width >= 1440) {
          this.$refs['sub-tab'].style.right = '290px'
          this.$refs['sub-tab'].style.top = '136px'

          this.$refs['sub-tab-border'].style.right = '56px'
          this.$refs['sub-tab-border'].style.top = '144px'

          this.$refs['sub-tab-floor-4-1'].style.right = '70px'
          this.$refs['sub-tab-floor-4-1'].style.top = '180px'

          this.$refs['sub-tab-floor-4-5'].style.right = '70px'
          this.$refs['sub-tab-floor-4-5'].style.top = '220px'
        } else if (this.winSize.width < 1440) {
          this.$refs['sub-tab'].style.right = '215px'
          this.$refs['sub-tab'].style.top = '102px'

          this.$refs['sub-tab-border'].style.right = '40px'
          this.$refs['sub-tab-border'].style.top = '103px'

          this.$refs['sub-tab-floor-4-1'].style.right = '50px'
          this.$refs['sub-tab-floor-4-1'].style.top = '127px'

          this.$refs['sub-tab-floor-4-5'].style.right = '50px'
          this.$refs['sub-tab-floor-4-5'].style.top = '160px'
        }
      } else {
        this.changeMap('tg_main')
      }
    },
    // 切换地图
    changeMap(index) {
      this.showSubTabGuider = false
      this.showFloorThree = false
      this.showFloorFour = false
      if(index === 'tg_4_5'){
        this.devListParams.deviceTypes = '4'
      }else{
        this.devListParams.deviceTypes = '1,2,4,12'
      }
      // this.devListParams.deviceTypes = []
      if (index === 'tg_main') {
        // this.imgSizeOriginal = { width: 2245, height: 1586 }
        this.devListParams.picture = '1'
      }else if (index === 'tg_3_1') {
        // this.imgSizeOriginal = { width: 2245, height: 1586 }
        this.devListParams.picture = '2'
      } else if (index === 'tg_4_1') {
        // this.imgSizeOriginal = { width: 2218, height: 2169 }
        this.devListParams.picture = '3'
      }else if (index === 'tg_4_5') {
        // this.imgSizeOriginal = { width: 2245, height: 1586 }
        this.devListParams.picture = '4'
      }
      overviewDeviceList(this.devListParams).then(response => {
        if (response.code === 200) {
          const that = this
          this.devList = []
          response.data.forEach(dev => {
            if (dev.x !== '' && dev.y !== '') {
              if(dev.type===10){ //球
                if(dev.deviceStatus === 0){ //normal
                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
                }else{ //alarm
                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
                }
              }else if(dev.type===11){ //半球
                if(dev.deviceStatus === 0){ //normal
                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
                }else{ //alarm
                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
                }
              }else if(dev.type===1){ //温湿度
                if(dev.deviceStatus === 0){ //normal
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-green.png")
                }else{ //alarm
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
                }
              }else if(dev.type===2){ //烟感
                if(dev.deviceStatus === 0){ //normal
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-smoking-green.png")
                }else{ //alarm
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-smoking-checked.png")
                }
              }else if(dev.type===12){ //声光
                if(dev.deviceStatus === 0){ //normal
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-green.png")
                }else{ //alarm
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
                }
              }else {  //camera
                if(dev.deviceStatus === 0){ //normal
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
                }else{ //alarm
                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
                }
              }
              that.devList.push(dev)
            }
          })
          this.initMap(index)
        }
      })
    },
    // 切换地图
    initMap(index) {
      if (index === 'tg_3_1') {
        this.bgImageSrc = tg_3_1
        this.imgSizeOriginal = { width: 2245, height: 1586 }
        // this.devListParams.picture = '2'
        this.cameraTypeNum = 5

        this.showTemp = true // 隐藏温湿度
        this.showSmoking = true // 隐藏烟感
        this.showSound = true // 隐藏声光报警器
        if (this.winSize.width >= 1920) {
          this.footLeft = (this.winSize.width - 2 * 210) / 2
        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
          this.footLeft = (this.winSize.width - 2 * 155) / 2
        }
      } else if (index === 'tg_4_1') {
        this.bgImageSrc = tg_4_1
        // this.devListParams.picture = '3'
        this.imgSizeOriginal = { width: 2218, height: 2169 }
        this.cameraTypeNum = 5

        this.showTemp = true // 显示温湿度
        this.showSmoking = true // 显示烟感
        this.showSound = true // 显示声光报警器
        if (this.winSize.width >= 1920) {
          this.footLeft = (this.winSize.width - 4 * 210) / 2
        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
          this.footLeft = (this.winSize.width - 4 * 155) / 2
        }
      } else if (index === 'tg_4_5') {
        this.bgImageSrc = tg_4_5
        // this.devListParams.picture = '4'
        this.imgSizeOriginal = { width: 2245, height: 1586 }
        this.cameraTypeNum = 2
        this.showTemp = false // 隐藏温湿度
        this.showSmoking = false // 隐藏烟感
        this.showSound = false // 隐藏声光报警器
        if (this.winSize.width >= 1920) {
          this.footLeft = (this.winSize.width - 2 * 210) / 2
        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
          this.footLeft = (this.winSize.width - 2 * 155) / 2
        }
      }

      this.selectDevByType('all')
    },
    // 点击报警列表
    alarmRowClick(row) {
      this.clickAlarm(row.deviceId,row.picture)
    },
    // 清除设备详情
    resetDevDetail() {
      this.alarmForm = {}
      this.dataForm = {
        id: '', // id
        name: '', // 设备名
        devcode: '', // 设备编号
        typeName: '', // 设备类型
        model: '', // 设备型号
        onlineStatusName: '', // 在线状态
        deviceStatusName: '', // 设备状态
        position: '', // 安装位置
        installDate: '', // 安装日期
        inOutName: '' // 进出营
      }
    }
  }
}
</script>
<style lang="scss">
  .pop-camera {
    margin-bottom: 12px;
    .el-menu--popup{
      min-width: 160px !important;
    }
    .el-menu-item{
      font-size: 15px;
    }
    .el-menu-item:hover{
      background-color: rgba(2, 61, 131, 0.57) !important;
      color: #f58a88 !important;
    }
  }
</style>
<style lang="scss" scoped>
  .close-dialog{
    /deep/ .el-dialog__body {
      padding-top: 10px;
      padding-bottom: 0px;

    }
    /deep/ .el-dialog .el-dialog__header {
      background-color: white;
    }
    /deep/ .el-dialog .el-dialog__header .el-dialog__title {
      color: black;
      font-weight: normal;
    }
  }
  .bottom-center{
    text-align:center;
    position: absolute;
    left: 50%; transform: translateX(-50%);
    bottom: 25px;
  }
  .menu-camera {
    /deep/ .el-submenu__title {
      padding: 0px;
      margin-left: 88px;
    }
    /deep/ .el-submenu__icon-arrow{
      display: none;
    }
  }
  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
  /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
    background-color: rgba(255, 255, 255, 0) !important;
  }
  /deep/ .menu-camera li{
    margin-left: -88px !important;
  }
  /deep/ .el-menu.el-menu--horizontal {
    border-bottom: solid 0px #e6e6e6;
    width: 60px !important;
  }
  /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
    border-bottom-width: 0px;
  }
  .main-page {
    background-size: cover;
    background-color: #023d83;
    height: 100vh;
  }

  .main-header {
    width: 100vw;
  }
  .main-title {
    height: 90px;
    text-align: center;
    padding-top: 20px;
    background: url("../../assets/overview_images/title-background-1920.png");
  }

  .main-title img {
    display: inline-block;
    margin-right: 15px;
    width: 52px;
    height: 32px;
    vertical-align: text-bottom;
  }

  .home-icon {
    width: 26px;
    height: 26px;
    position: fixed;
    left: 20px;
    top: 20px;
  }
  .exit-icon {
    width: 26px;
    height: 26px;
    position: fixed;
    right: 20px;
    top: 20px;
  }
  .home-icon img, .exit-icon img {
    width: 26px;
    height: 26px;
  }

  .main-title span {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: bold;
    font-family: 'Microsoft YaHei';
  }

  .map-overview {
    margin-top: 50px;
    /*width: 1100px;*/
    height: calc(90vh - 200px);
    text-align: center;
    position: relative;
  }
  .point {
    width: 24px;
    height: 24px;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  .point-camera {
    background-size: contain;
    @extend .point;
  }
  .point-fence {
    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
    background-size: contain;
    @extend .point;
  }

  .statis-block {
    text-align: right;
    margin-top: -20px;
    margin-right: 40px;
    font-size: 30px;
  }
  .sub-title {
    text-align: left;
    margin-left: 25px;
    margin-top: 16px;
    font-size: 30px;
  }
  .sub-data-block {
    width: 215px;
    height: 68px;
  }
  .dev-normal {
    background: url("../../assets/overview_images/dev-box.png");
    background-size: contain;
    color: #00ff0c;
  }
  .dev-alarm {
    background: url("../../assets/overview_images/dev-box.png");
    background-size: contain;
    color: #ff0000;
  }
  .dev-offline {
    background: url("../../assets/overview_images/offline.png");
    background-size: contain;
    color: #fff000;
  }
  .dev-closed {
    background: url("../../assets/overview_images/closed.png");
    background-size: contain;
    color: #00fff6;
  }

  .dev-status-block {
    position: absolute;
    top: 100px;
    left: 20px;
    color: #ffffff;
  }

  .alarm-now-block {
    position: absolute;
    z-index: 500;
    top: 300px;
    left: 20px;
    width: 480px;
    .map-alarm-div-header {
      line-height: 40px;
      padding-left: 10px;
      color: #00fff6;
      font-size: 24px;
      .icon-right {
        cursor: pointer;
        margin-left: 20px;
      }
    }
    .el-scrollbar {
      /*height: 200px;*/
      width: 100%;
    }
    .moredatascollor {
      height: 200px;
    }
    .el-scrollbar__wrap {
      overflow-y: auto;
      overflow-x: hidden;
      margin-bottom: 0px !important;
    }
    .el-table {
      font-size: 12px;
    }
    .transition-box {
      margin-bottom: 10px;
      width: 200px;
      height: 100px;
      border-radius: 4px;
      background-color: #409EFF;
      text-align: center;
      color: #fff;
      padding: 40px 20px;
      box-sizing: border-box;
      margin-right: 20px;
    }
  }

  .alarm-now-block /deep/ .el-table th {
    background-color: #0757A0;
    padding: 12px 0px;
    font-size: 16px;
    color: #00fff6;
    font-weight: normal;
  }

  .alarm-now-block /deep/ .el-table td {
    /*background-color: #0757A0;*/
    padding: 10px 0px;
    font-size: 15px;
    color: #FFFFFF;
    font-weight: normal;
  }

  .alarm-now-block /deep/ .el-table__row td {
    background-color: #023D83;
  }
  .alarm-now-block /deep/ .el-table__body tr:hover > td {
    background-color: #0757A0;
  }
  .alarm-now-block /deep/ tr.el-table__row--striped td {
    background-color: #0757A0;
  }

  .map-tab {
    position: absolute;
    right: 10px;
    top: 100px;
    width: 56px;
    button {
      margin: 5px 0px;
    }
  }

  .tab-top {
    position: relative;
    width: 284px;
    height: 24px;
    background: url("../../assets/overview_images/tab-top-bg.png");
  }
  .tab-bottom {
    position: relative;
    width: 284px;
    height: 24px;
    background: url("../../assets/overview_images/tab-bottom-bg.png");
  }
  .map-index-button {
    position: relative;
    width: 56px;
    height: 144px;
    background: url("../../assets/overview_images/tab-index-unchecked.png");
    background-repeat:no-repeat;
    writing-mode: vertical-rl;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
    padding:0px;
    display:flex;
    -webkit-display:flex;
    flex-direction:column;
    /* align-content: center; */
    /* vertical-align: middle; */
    justify-content:center;
  }
  .index-selected {
    background: url("../../assets/overview_images/tab-index-checked.png");
  }
  .sub-tab-guider {
    width: 149px;
    height: 50px;
    /*background: url("../../assets/overview_images/sub-tab-guider.png");*/
  }
  .sub-tab-border {
    width: 235px;
    height: 145px;
    background: url("../../assets/overview_images/sub-tab-border.png");
  }
  .sub-tab-content {
    text-align: center;
    color: #FFFFFF;
    font-size: 20px;
    cursor: pointer;
    width: 200px;
  }

  .dev-detail-block {
    /*position: absolute;*/
    /*right: 20px;*/
    /*bottom: 100px;*/
    width: 520px;
    height: 335px;
    color: #00FFFF;
    font-size: 24px;
    font-family: "Microsoft YaHei";
    padding: 45px 60px;
    line-height: 35px;
    background: url("../../assets/overview_images/dev-info.png");
    .dev-detail-span {
      margin-left: 20px;
    }
    .dev-detail-close::before {
      content: "\2716";
      position: relative;
      top: -20px;
      right: -410px;
      cursor: pointer;
    }
  }
  .alarm-detail-block {
    /*position: absolute;*/
    /*right: 20px;*/
    /*bottom: 100px;*/
    width: 520px;
    height: 335px;
    font-size: 24px;
    font-family: "Microsoft YaHei";
    padding: 45px 60px;
    line-height: 35px;
    background: url("../../assets/overview_images/dev-info-red.png");
    .dev-detail-span {
      margin-left: 20px;
    }
    .dev-detail-close::before {
      content: "\2716";
      position: relative;
      top: -20px;
      right: -410px;
      cursor: pointer;
    }
  }

  .dev-footer {
    position: absolute;
    bottom: 25px;
  }

  .dev-icon {
    width: 195px;
    height: 105px;
    vertical-align: middle;
    line-height: 65px;
    padding: 20px 30px !important;
    margin-left: 15px;
    cursor: pointer;
    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
  }

  .dev-icon img {
    height: 40px;
    vertical-align:middle;
  }
  .dev-icon span {
    font-size: 20px;
    color: #00D2FF;
    line-height: 65px;
    height: 65px;
    vertical-align:middle;
    float: right;
  }

  .dev-type-selected {
    background: url("../../assets/overview_images/dev-type-border-checked.png");
  }
  .dev-type-selected span {
    color: #f58a88 !important;
  }

  /*@media(max-width: 1440px) {*/
  /*  .main-title {*/
  /*    height: 68px;*/
  /*    padding-top: 20px;*/
  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
  /*  }*/
  /*  .main-title span {*/
  /*    font-size: 24px;*/
  /*  }*/
  /*  .main-title img {*/
  /*    margin-right: 15px;*/
  /*    width: 32px;*/
  /*    height: 32px;*/
  /*  }*/

  /*  .home-icon {*/
  /*    left: 18px;*/
  /*    width: 18px;*/
  /*    height: 18px;*/
  /*  }*/
  /*  .exit-icon {*/
  /*    right: 18px;*/
  /*    width: 18px;*/
  /*    height: 18px;*/
  /*  }*/

  /*  .home-icon img, .exit-icon img {*/
  /*    width: 18px;*/
  /*    height: 18px;*/
  /*  }*/

  /*  .dev-icon span {*/
  /*    font-size: 12px;*/
  /*  }*/
  /*}*/

  @media(max-width: 1440px) {
    .main-title {
      height: 65px;
      padding-top: 16px;
      background: url("../../assets/overview_images/title-background-1366.png");
    }
    .main-title span {
      font-size: 24px;
    }
    .main-title img {
      margin-right: 15px;
      width: 32px;
      height: 32px;
    }

    .home-icon {
      left: 16px;
      width: 16px;
      height: 16px;
    }
    .exit-icon {
      right: 16px;
      width: 16px;
      height: 16px;
    }

    .home-icon img, .exit-icon img {
      width: 20px;
      height: 20px;
    }

    .map-overview {
      margin-top: 35px;
      height: calc(90vh - 150px);
    }

    .point {
      width: 16px;
      height: 16px;
    }

    .statis-block {
      margin-top: -20px;
      font-size: 24px;
    }
    .sub-title {
      margin-top: 10px;
      font-size: 24px;
    }
    .sub-data-block {
      width: 161px;
      height: 51px;
    }

    .dev-normal {
      background: url("../../assets/overview_images/dev-box-1366.png");
    }
    .dev-alarm {
      background: url("../../assets/overview_images/dev-box-1366.png");
    }
    .dev-offline {
      background: url("../../assets/overview_images/offline-1366.png");
    }
    .dev-closed {
      background: url("../../assets/overview_images/closed-1366.png");
    }

    .dev-status-block {
      top: 90px;
      left: 16px;
    }

    .alarm-now-block {
      top: 220px;
      left: 16px;
      width: 360px;
      .map-alarm-div-header {
        line-height: 32px;
        font-size: 20px;
      }
    }

    .alarm-now-block /deep/ .el-table th {
      padding: 8px 0px;
      font-size: 16px;
    }
    .alarm-now-block /deep/ .el-table td {
      padding: 5px 0px;
      font-size: 12px;
    }

    .map-tab {
      right: 10px;
      top: 90px;
      width: 40px;
      button {
        margin: 5px 0px;
      }
    }
    .tab-top {
      width: 213px;
      height: 18px;
      background: url("../../assets/overview_images/tab-top-bg-1366.png");
    }
    .tab-bottom {
      width: 213px;
      height: 18px;
      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
    }
    .map-index-button {
      width: 40px;
      height: 103px;
      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
      font-size: 18px;
      line-height: 25px;
    }
    .index-selected {
      background: url("../../assets/overview_images/tab-index-checked-1366.png");
    }

    .sub-tab-guider {
      width: 110px;
      height: 37px;
      /*background: url("../../assets/overview_images/sub-tab-guider-1366.png");*/
    }
    .sub-tab-border {
      width: 168px;
      height: 104px;
      background: url("../../assets/overview_images/sub-tab-border-1366.png");
    }
    .sub-tab-content {
      font-size: 16px;
      cursor: pointer;
      width: 145px;
    }

    .dev-detail-block {
      width: 390px;
      height: 251px;
      font-size: 16px;
      padding: 30px 40px;
      line-height: 28px;
      background: url("../../assets/overview_images/dev-info-1366.png");
      .dev-detail-close::before {
        top: -12px;
        right: -312px;
      }
    }
    .alarm-detail-block {
      width: 390px;
      height: 251px;
      font-size: 16px;
      padding: 30px 40px;
      line-height: 28px;
      background: url("../../assets/overview_images/dev-info-1366-red.png");
      .dev-detail-close::before {
        top: -12px;
        right: -312px;
      }
    }

    .dev-footer {
      bottom: 20px;
    }
    .dev-icon {
      width: 140px;
      height: 76px;
      line-height: 56px;
      padding: 10px 16px !important;
      margin-left: 15px;
      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
    }
    .dev-icon img {
      height: 32px;
    }
    .dev-icon span {
      font-size: 16px;
      line-height: 56px;
      height: 56px;
    }
    .dev-type-selected {
      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
    }
  }

</style>
