<template>
  <div class="main-page">
    <div class="main-header">
      <div class="main-title">
        <img src="@/assets/dashboard_images/icon-title.png">
        <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="logout">
        <img src="@/assets/global_images/exit-logo.png">
      </a>
    </div>

    <!-- 左上角设备状态区域 -->
    <div class="dev-status-block">
      <el-row :gutter="20" style="width: 300px">
        <el-col :span="6" class="sub-data-block">
          <div class="statis-block">
            <span class="big-size" v-text="dev.alarm"/>
          </div>
          <div class="sub-title">报警</div>
        </el-col>

        <el-col :span="6" class="sub-data-block">
          <div class="statis-block">
            <span class="big-size" v-text="dev.onLine"/>
          </div>
          <div class="sub-title">开启</div>
        </el-col>

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

        <el-col :span="6" class="sub-data-block">
          <div class="statis-block">
            <span class="big-size" v-text="dev.offLine"/>
          </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
            @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="getBgImageSize">

      <div v-for="item in devList" v-show="round" :id="item.id" :key="item.id" :class="setClass(item)" @click="detailDev(item)" />

    <!--      <div v-for="key in rounds" v-show="round" :key="key" :class="setClass('round', key)" @click="detailDev(key)" />-->

    <!--      <div v-for="key in guns" v-show="gun" :key="key" :class="setClass('gun', key)" />-->

    <!--      <div v-for="key in faces" v-show="face" :key="key" :class="setClass('face', key)" />-->

    <!--      <div v-for="key in cars" v-show="car" :key="key" :class="setClass('car', key)" />-->

    <!--      <div v-for="key in perimeters" v-show="perimeter" :key="key" :class="setClass('perimeter', key)" />-->
    </div>

    <!-- 平面图区域设备类型按钮 -->
    <el-row :gutter="20" class="dev-footer">
      <el-col class="dev-icon" style="margin-left: 10vw;">
        <img src="@/assets/overview_images/icons/icon-all.png">
        <span>全部</span>
      </el-col>

      <el-col class="dev-icon" @click.native="selectDevByType('round')">
        <img src="@/assets/overview_images/icons/icon-camera.png">
        <span>球机</span>
      </el-col>

      <el-col class="dev-icon" @click.native="selectDevByType('gun')">
        <img src="@/assets/overview_images/icons/icon-gate.png">
        <span>枪机</span>
      </el-col>

      <el-col class="dev-icon" @click.native="selectDevByType('face')">
        <img src="@/assets/overview_images/icons/icon-fence.png">
        <span>人脸识别</span>
      </el-col>

      <el-col class="dev-icon" @click.native="selectDevByType('car')">
        <img src="@/assets/overview_images/icons/icon-car.png">
        <span>车牌识别</span>
      </el-col>

      <el-col class="dev-icon" @click.native="selectDevByType('perimeter')">
        <img src="@/assets/overview_images/icons/icon-temperature.png">
        <span>周界</span>
      </el-col>
    </el-row>

    <!-- 右侧平面图索引切换区域 -->
    <div class="map-tab">
      <el-button type="primary" @click="changeMap('tg_main')">园区平面图</el-button>
      <el-button type="primary" @click="changeMap('tg_3_1')">3#一层</el-button>
      <el-button type="primary" @click="changeMap('tg_4_1')">4#一层</el-button>
      <el-button type="primary" @click="changeMap('tg_4_5')">4#五层</el-button>
    </div>

    <!-- 右侧设备详情及操作区域 -->
    <div class="dev-detail-block">
      <el-row :gutter="20">
        <el-col :span="20">设备名称
          <span>{{ dataForm.name }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">设备编号
          <span>{{ dataForm.devcode }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">设备类型
          <span>{{ dataForm.typeName }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">设备型号
          <span>{{ dataForm.model }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">在线状态
          <span>{{ dataForm.onlineStatusName }}</span>
        </el-col>
      </el-row>
      <el-row v-show="isFence" :gutter="20">
        <el-col :span="20">是否开启
          <span>{{ dataForm.deviceStatusName }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">安装日期
          <span>{{ dataForm.installDate }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">安装位置
          <span>{{ dataForm.position }}</span>
        </el-col>
      </el-row>
      <el-row v-show="isDoor" :gutter="20">
        <el-col :span="12">
          <span>{{ dataForm.inOutName }}</span>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import { getProject } from '@/utils/baseConfig'
import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
import { alarmListOverview } from '@/api/alarm'
import DeviceDetail from '@/views/deviceManage/deviceDetail'
import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
export default {
  name: 'CtrlOverview',
  components: { DeviceDetail },
  data() {
    return {
      title: getProject().title,
      bgImageSrc: tg_main,
      devListParams: {
        picture: '1'
      },
      dev: {
        alarm: 0,
        onLine: 0,
        closed: 0,
        offLine: 0
      },
      imgSizeOriginal: {
        width: 2245,
        height: 1586
      }, // 图片原尺寸
      imgSize: {
        width: 2245,
        height: 1586
      },
      winSize: {
        width: 1440,
        height: 789
      }, // 屏幕窗口尺寸
      round: true,
      gun: true,
      face: true,
      car: true,
      perimeter: true,
      alarmList: [],
      alarmColumns: [
        {
          text: '设备编号',
          value: 'devcode',
          align: 'center'
        },
        {
          text: '报警内容',
          value: 'alarmContent',
          align: 'center'
        },
        {
          text: '报警时间',
          value: 'alarmTime',
          align: 'center'
        }
      ], // 显示列
      tableShow: true, // 是否显示告警列表
      devList: [],
      dataForm: {
        id: '', // id
        name: '', // 设备名
        devcode: '', // 设备编号
        typeName: '', // 设备类型
        model: '', // 设备型号
        onlineStatusName: '', // 在线状态
        deviceStatusName: '', // 设备状态
        position: '', // 安装位置
        installDate: '', // 安装日期
        inOutName: '' // 进出营
      }, // 表单
      isFence: false,
      isDoor: false
    }
  },
  activated() {
    this.fetchData()
    this.fetchDeviceData()
    this.fetchAlarmNowData()
  },
  mounted() {
    // this.getBgImageSize()
    // this.reDrawDevs()

    const that = this
    window.onresize = function() {
      that.getBgImageSize()
    }
  },
  methods: {
    getBgImageSize() {
      // 获取图片尺寸
      this.imgSize = {
        width: this.$refs['bgImg'].width,
        height: this.$refs['bgImg'].height
      }
      // 获取窗体尺寸
      this.winSize = {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      }

      this.reDrawDevs()
    },
    reDrawDevs() {
      // this.getBgImageSize()

      const halfLeft = (this.winSize.width - this.imgSize.width) / 2

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

        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'
        }
      })
    },
    // 获取设备状态
    fetchData() {
      overviewDeviceStatus().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
        }
      })
    },
    fetchDeviceData() {
      overviewDeviceList(this.devListParams).then(response => {
        if (response.code === 200) {
          this.devList = response.data
        }
      })
    },
    fetchAlarmNowData() {
      alarmListOverview().then(response => {
        if (response.code === 200) {
          this.alarmList = response.data
        } else {
          this.$message.error(response.message)
        }
      })
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    },
    backToIndex() {
      this.$router.push('/ctrl')
    },
    selectDevByType(type) {
      switch (type) {
        case 'round':
          this.round = !this.round
          break
        case 'gun':
          this.gun = !this.gun
          break
        case 'face':
          this.face = !this.face
          break
        case 'car':
          this.car = !this.car
          break
        case 'perimeter':
          this.perimeter = !this.perimeter
          break
      }
    },
    setClass(key) {
      const classObj = {}
      classObj['point'] = true
      return classObj
      // switch (type) {
      //   case 'round':
      //     classObj['point-flicker-r'] = true
      //     return classObj
      //
      //   case 'gun':
      //     classObj['point-flicker-g'] = true
      //     return classObj
      //
      //   case 'face':
      //     classObj['point-flicker-f'] = true
      //     classObj['point-cam-' + key + '-loc'] = true
      //     return classObj
      //
      //   case 'car':
      //     classObj['point-flicker-c'] = true
      //     classObj['point-cam-' + key + '-loc'] = true
      //     return classObj
      //
      //   case 'perimeter':
      //     classObj['point-flicker-p'] = true
      //     classObj['point-cam-' + key + '-loc'] = true
      //     return classObj
      // }
    },
    changeMap(index) {
      this.bgImageSrc = tg_main
      this.imgSizeOriginal = { width: 2245, height: 1586 }

      if (index === 'tg_3_1') {
        this.bgImageSrc = tg_3_1
      } else if (index === 'tg_4_1') {
        this.bgImageSrc = tg_4_1
        this.imgSizeOriginal = { width: 2218, height: 2169 }
      } else if (index === 'tg_4_5') {
        this.bgImageSrc = tg_4_5
      }
    },
    detailDev(dev) {
      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
          }

          // 电子围栏设备有开启字段
          if (dev.typeName.indexOf('电子围栏') >= 0) {
            this.isFence = true
          }

          // 营门设备有进出营门的标志位
          if (dev.areaId === '1') {
            this.isDoor = true
          }
        } else {
          this.$message.error(response.message)
        }
      })
    },
    alarmRowClick(dev, column, event) {

    }
  }
}
</script>

<style lang="scss" scoped>

  .main-page {
    background-size: cover;
    background-color: #023d83;
    height: 100vh;
  }

  .main-header {
    width: 100vw;
  }
  .main-title {
    height: 74px;
    text-align: center;
    padding-top: 21px;
    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: 12px;
  }
  .exit-icon {
    width: 26px;
    height: 26px;
    position: fixed;
    right: 20px;
    top: 12px;
  }
  .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: 30px;
    height: calc(90vh - 140px);
    text-align: center;
    position: relative;
  }

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

  .alarm-now-block {
    position: absolute;
    z-index: 500;
    background-color: rgba(255, 234, 241,0.8);
    top: 150px;
    left: 20px;
    width: 280px;
    .map-alarm-div-header {
      line-height: 40px;
      width: 504px;
      padding-left: 10px;
      .icon-right {
        position: absolute;
        right: 15px;
      }
      .icon-right:hover {
        color: #409EFF;
        cursor: pointer;
      }
    }
    .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;
    }
    .el-table th {
      /*background-color: rgba(255, 229, 230, 0.8);*/
      padding: 7px 0px;
    }
    .el-table td {
      /*background-color: rgba(255, 234, 241, 0.8);*/
      padding: 5px 0px;
      /*line-height: 1;*/
    }
    .el-table td:hover {
      /*background-color: rgba(255, 234, 241, 0.8);*/
    }
    .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;
    }
  }

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

  .dev-detail-block {
    position: absolute;
    right: 30px;
    top: 400px;
    width: 300px;
    color: #00FFFF;
    font-size: 12px;
    font-family: "Microsoft YaHei";
  }

  .dev-footer {
    position: fixed;
    bottom: 50px;
  }

  .dev-icon {
    width: calc(10vw - 5px);
    vertical-align: middle;
    border: 1px solid #00ffff;
    padding: 10px 5px !important;
    margin-left: 5px;
    cursor: pointer;
  }
  .dev-icon img {
    height: 40px;
    vertical-align:middle;
  }
  .dev-icon span {
    font-size: 14px;
    color: #00D2FF;
    line-height: 40px;
    height: 40px;
    vertical-align:middle;
    float: right;
  }

  @media(max-width: 1440px) {
    .main-title {
      height: 56px;
      padding-top: 15px;
      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: 1366px) {
    .main-title {
      height: 53px;
      padding-top: 11px;
      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: 15px;
      height: 15px;
    }

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

</style>

<style lang="scss" scoped>
  @import "../../assets/overview_scss/dev-tg-ov.scss";
  .point {
    width: 16px;
    height: 16px;
    /*background-color: lime;*/
    /*border-radius: 50%;*/
    /*z-index:9999;*/
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: url("../../assets/overview_images/icons/icon-camera.png");
    background-size: contain;
  }

  /* 设置动画前颜色 */
  .point-flicker:after {
    background-color: chartreuse;
  }

  /* 设置动画后颜色 */
  .point-flicker:before {
    background-color: rgba(0, 168, 253, 0.2);
  }

  /* 设置动画 */
  .point-flicker:before,
  .point-flicker:after {
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border-radius: 50%;
    /* CSS3 animation 属性 网址 */
    /* https://www.w3school.com.cn/cssref/pr_animation.asp */
    animation: warn 1.5s ease-out 0s infinite;
  }

  /* 周界部分摄像头的颜色 */
  .point-perimeter {
    @extend .point;
    background-color: #48dbfb;
  }
  .point-flicker-p:after {
    @extend .point-flicker:after;
    background-color: #48dbfb;
  }

  /* 车牌识别部分摄像头的颜色 */
  .point-car {
    @extend .point;
    background-color: #dff9fb;
  }
  .point-flicker-c:after {
    @extend .point-flicker:after;
    background-color: #dff9fb;
  }

  /* 球机部分摄像头的颜色 */
  .point-round {
    @extend .point;
    background-color: #00a8ff;
  }
  .point-flicker-r:after {
    @extend .point-flicker:after;
    background-color: #00a8ff;
  }

  /* 普通枪机部分摄像头的颜色 */
  .point-gun {
    @extend .point;
    background-color: #5352ed;
  }
  .point-flicker-g:after {
    @extend .point-flicker:after;
    background-color: #5352ed;
  }

  /* 人脸识别部分摄像头的颜色 */
  .point-face {
    @extend .point;
  }
  .point-flicker-f:after {
    @extend .point-flicker:after;
  }

  /* @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 */
  @keyframes warn {
    0% {
      transform: scale(0.5);
      opacity: 1;
    }

    30% {
      opacity: 1;
    }

    100% {
      transform: scale(1.4);
      opacity: 0;
    }
  }

  @media(max-width: 1440px) {
    .point-cam-loc-1440 {
      position: absolute;
    }

    /********  球机位置  ********/
    .point-cam-r1-loc {
      @extend .point-cam-loc-1440;
      top: $round-camera1-top-1440;
      left: $round-camera1-left-1440;
    }
    .point-cam-r2-loc {
      @extend .point-cam-loc-1440;
      top: $round-camera2-top-1440;
      left: $round-camera2-left-1440;
    }
    .point-cam-r3-loc {
      @extend .point-cam-loc-1440;
      top: $round-camera3-top-1440;
      left: $round-camera3-left-1440;
    }

    /********  枪机位置  ********/
    .point-cam-g1-loc {
      @extend .point-cam-loc-1440;
      top: $gun-camera1-top;
      left: $gun-camera1-left;
    }
    .point-cam-g2-loc {
      @extend .point-cam-loc-1440;
      top: $gun-camera2-top;
      left: $gun-camera2-left;
    }
    .point-cam-g3-loc {
      @extend .point-cam-loc-1440;
      top: $gun-camera3-top;
      left: $gun-camera3-left;
    }
    .point-cam-g4-loc {
      @extend .point-cam-loc-1440;
      top: $gun-camera4-top;
      left: $gun-camera4-left;
    }
    .point-cam-g5-loc {
      @extend .point-cam-loc-1440;
      top: $gun-camera5-top;
      left: $gun-camera5-left;
    }
    .point-cam-g6-loc {
      @extend .point-cam-loc-1440;
      top: $gun-camera6-top;
      left: $gun-camera6-left;
    }

    /********  人脸识别位置  ********/
    .point-cam-f1-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera1-top;
      left: $face-camera1-left;
    }
    .point-cam-f2-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera2-top;
      left: $face-camera2-left;
    }
    .point-cam-f3-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera3-top;
      left: $face-camera3-left;
    }
    .point-cam-f4-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera4-top;
      left: $face-camera4-left;
    }
    .point-cam-f5-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera5-top;
      left: $face-camera5-left;
    }
    .point-cam-f6-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera6-top;
      left: $face-camera6-left;
    }
    .point-cam-f7-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera7-top;
      left: $face-camera7-left;
    }
    .point-cam-f8-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera8-top;
      left: $face-camera8-left;
    }
    .point-cam-f9-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera9-top;
      left: $face-camera9-left;
    }
    .point-cam-f10-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera10-top;
      left: $face-camera10-left;
    }
    .point-cam-f11-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera11-top;
      left: $face-camera11-left;
    }
    .point-cam-f12-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera12-top;
      left: $face-camera12-left;
    }
    .point-cam-f13-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera13-top;
      left: $face-camera13-left;
    }
    .point-cam-f14-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera14-top;
      left: $face-camera14-left;
    }
    .point-cam-f15-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera15-top;
      left: $face-camera15-left;
    }
    .point-cam-f16-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera16-top;
      left: $face-camera16-left;
    }
    .point-cam-f17-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera17-top;
      left: $face-camera17-left;
    }
    .point-cam-f18-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera18-top;
      left: $face-camera18-left;
    }
    .point-cam-f19-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera19-top;
      left: $face-camera19-left;
    }
    .point-cam-f20-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera20-top;
      left: $face-camera20-left;
    }
    .point-cam-f21-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera21-top;
      left: $face-camera21-left;
    }
    .point-cam-f22-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera22-top;
      left: $face-camera22-left;
    }
    .point-cam-f23-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera23-top;
      left: $face-camera23-left;
    }
    .point-cam-f24-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera24-top;
      left: $face-camera24-left;
    }
    .point-cam-f25-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera25-top;
      left: $face-camera25-left;
    }
    .point-cam-f26-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera26-top;
      left: $face-camera26-left;
    }
    .point-cam-f27-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera27-top;
      left: $face-camera27-left;
    }
    .point-cam-f28-loc {
      @extend .point-cam-loc-1440;
      top: $face-camera28-top;
      left: $face-camera28-left;
    }

    /********  车牌识别位置  ********/
    .point-cam-c1-loc {
      @extend .point-cam-loc-1440;
      top: $car-camera1-top;
      left: $car-camera1-left;
    }
    .point-cam-c2-loc {
      @extend .point-cam-loc-1440;
      top: $car-camera2-top;
      left: $car-camera2-left;
    }
    .point-cam-c3-loc {
      @extend .point-cam-loc-1440;
      top: $car-camera3-top;
      left: $car-camera3-left;
    }
    .point-cam-c4-loc {
      @extend .point-cam-loc-1440;
      top: $car-camera4-top;
      left: $car-camera4-left;
    }

    /********  周界位置  ********/
    .point-cam-p1-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera1-top;
      left: $perimeter-camera1-left;
    }
    .point-cam-p2-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera2-top;
      left: $perimeter-camera2-left;
    }
    .point-cam-p3-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera3-top;
      left: $perimeter-camera3-left;
    }
    .point-cam-p4-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera4-top;
      left: $perimeter-camera4-left;
    }
    .point-cam-p5-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera5-top;
      left: $perimeter-camera5-left;
    }
    .point-cam-p6-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera6-top;
      left: $perimeter-camera6-left;
    }
    .point-cam-p7-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera7-top;
      left: $perimeter-camera7-left;
    }
    .point-cam-p8-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera8-top;
      left: $perimeter-camera8-left;
    }
    .point-cam-p9-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera9-top;
      left: $perimeter-camera9-left;
    }
    .point-cam-p10-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera10-top;
      left: $perimeter-camera10-left;
    }
    .point-cam-p11-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera11-top;
      left: $perimeter-camera11-left;
    }
    .point-cam-p12-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera12-top;
      left: $perimeter-camera12-left;
    }
    .point-cam-p13-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera13-top;
      left: $perimeter-camera13-left;
    }
    .point-cam-p14-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera14-top;
      left: $perimeter-camera14-left;
    }
    .point-cam-p15-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera15-top;
      left: $perimeter-camera15-left;
    }
    .point-cam-p16-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera16-top;
      left: $perimeter-camera16-left;
    }
    .point-cam-p17-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera17-top;
      left: $perimeter-camera17-left;
    }
    .point-cam-p18-loc {
      @extend .point-cam-loc-1440;
      top: $perimeter-camera18-top;
      left: $perimeter-camera18-left;
    }
  }

  @media(max-width: 1366px) {
    .point-cam-loc-1366 {
      position: absolute;
    }

    /********  球机位置  ********/
    .point-cam-r1-loc {
      @extend .point-cam-loc-1366;
      top: $round-camera1-top-1366;
      left: $round-camera1-left-1366;
    }
    .point-cam-r2-loc {
      @extend .point-cam-loc-1366;
      top: $round-camera2-top-1366;
      left: $round-camera2-left-1366;
    }
    .point-cam-r3-loc {
      @extend .point-cam-loc-1366;
      top: $round-camera3-top-1366;
      left: $round-camera3-left-1366;
    }
  }
</style>