zhgdyun/src/views/projectAdmin/dataBoard/AiAnalysis.vue

<template>
  <!-- 进度管理 -->
  <div class="fullHeight">
    <!-- <vue-scroll>
        <img  src="@/assets/images/dataBoard/6.png" style="height:auto;width:100%"/>
        </vue-scroll> -->
    <div class="aside fullHeight">
      <div class="blockBox">
        <div class="blockTitle">
          <!-- 预警统计 -->
          {{ $t('message.dataBoard.alarmStatistics') }}
        </div>
        <div class="blockContent flex">
          <div class="companyChart" ref="echart"></div>
          <div class="right-tg">
            <ul>
              <li v-for="(item, index) in echartData" :key="index">
                <span :style="{ background: colorList[index] }"></span>
                {{ item.name }}
              </li>
            </ul>
            <ul style="margin-left: 20px">
              <li v-for="(item, index) in echartData" :key="index">
                {{ item.value }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="blockBox">
        <div class="blockTitle">
          <!-- 设备情况 -->
          {{ $t('message.dataBoard.devDetail') }}
        </div>
        <div class="blockContent dev-status">
          <vue-scroll>
            <ul>
              <li
                v-if="item"
                class="flex"
                v-for="(item, index) in devStatusList"
                :key="index"
              >
                {{ item.videoName }}
                <!-- 枪机''球机' -->
                <span>{{
                  item.deviceType == 1
                    ? $t('message.dataBoard.deviceTypeList')[0]
                    : item.deviceType == 2
                    ? $t('message.dataBoard.deviceTypeList')[1]
                    : item.deviceType == 3
                    ? $t('message.dataBoard.deviceTypeList')[2]
                    : item.deviceType == 4
                    ? $t('message.dataBoard.deviceTypeList')[3]
                    : item.deviceType == 5
                    ? $t('message.dataBoard.deviceTypeList')[4]
                    : $t('message.dataBoard.deviceTypeList')[5]
                }}</span>
              </li>
            </ul>
            <div
              class="placeholderBox placeholderBox2"
              v-if="devStatusList.length == 0"
            >
              <img src="@/assets/images/noData3.png" alt="" srcset="" />
              <p>
              <!-- 暂无数据 -->
               {{$t('message.dataBoard.nodata')}}
              </p>
            </div>
          </vue-scroll>
        </div>
      </div>
      <div class="blockBox">
        <div class="blockTitle">
          <!-- 预警事件 -->
          {{ $t('message.dataBoard.alarmEvent') }}
        </div>
        <div style="overflow: hidden" class="blockContent">
          <!--                :data="10" :class-option="defaultOption"-->
          <vue-seamless-scroll
            :data="earlyWarning"
            :class-option="defaultOption"
          >
            <ul class="earlyWarningList">
              <li
                class="earlyWarningList_item"
                v-for="(item, index) in earlyWarning"
                :key="index"
              >
                <div class="imgBox">
                  <img :src="fileUrl + item.imageUrl" />
                </div>
                <div class="content">
                  <div
                    v-if="item.hardwareName"
                    :title="
                      $t('message.dataBoard.dev') +
                      item.hardwareName +
                      $t('message.dataBoard.at') +
                      item.location +
                      $t('message.dataBoard.detected') +
                      alarmTypes(item.alarmType) +
                      $t('message.dataBoard.pleaseDealFast') +
                      '...'
                    "
                    class="list-title"
                  >
                    {{
                      $t('message.dataBoard.dev') +
                      item.hardwareName +
                      $t('message.dataBoard.at') +
                      item.location +
                      $t('message.dataBoard.detected') +
                      alarmTypes(item.alarmType) +
                      $t('message.dataBoard.pleaseDealFast') +
                      '...'
                    }}
                  </div>
                  <div class="list-time">
                    <!-- 识别时间： -->
                    {{ $t('message.dataBoard.discernTime') }}
                    {{ item.createTime }}
                  </div>
                </div>
              </li>
            </ul>
           
          </vue-seamless-scroll>
          <div
              class="placeholderBox placeholderBox2"
              v-if="earlyWarning.length == 0"
            >
              <img src="@/assets/images/noData3.png" alt="" srcset="" />
              <p>
              <!-- 暂无数据 -->
               {{$t('message.dataBoard.nodata')}}
              </p>
            </div>
        </div>
      </div>
    </div>
    <div class="right fullHeight">
      <div class="blockBox blockBox3" style="height: calc(66.66% - 25px)">
        <div class="blockTitle">
          <!-- 抓拍记录 -->
          {{ $t('message.dataBoard.captureRecords') }}
        </div>
        <!--        <div @click="scrollClick($event)" style="overflow:hidden;" class="blockContent">-->
        <div style="overflow: hidden" class="blockContent">
          <vue-seamless-scroll
            :data="captureRecord"
            :class-option="defaultOption2"
          >
            <div class="captureRecordBox">
              <div
                :title="item.time"
                :data-name="item.id"
                :data-type="'all'"
                @click="selectCaptureRecord(item)"
                v-for="(item, index) in captureRecord"
                :key="index"
                class="captureRecord_item"
              >
                <div class="imgBox">
                  <img :src="fileUrl + item.imageUrl" />
                  <!--                            <img src="@/assets/images/bigScreen/demo.jpg"/>-->
                </div>
                <div class="captureRecord_itemInfo">
                  <div :title="item.hardwareName" class="itemInfo itemInfoId">
                    <!-- 设备名: -->
                    {{ $t('message.dataBoard.devName') + ':'
                    }}{{ item.hardwareName }}
                  </div>
                  <div :title="item.createTime" class="itemInfo itemInfoTime">
                    <!-- 抓拍时间: -->
                    {{ $t('message.dataBoard.captureTime') + ':'
                    }}{{ item.createTime }}
                  </div>
                  <div :title="item.location" class="itemInfo itemInfoPlace">
                    <!-- 抓拍点: -->
                    {{ $t('message.dataBoard.captureLocation') + ':'
                    }}{{ item.location }}
                  </div>
                  <!--                            1-安全帽报警、2-明火报警、3-聚众报警、4-倒地报警、5-越界报警、6-闯入报警、7、反光衣报警,8-吸烟报警-->
                  <div
                    :title="alarmTypes(item.alarmType)"
                    class="itemInfo itemInfoType"
                  >
                    <!-- 抓拍类型: -->
                    {{ $t('message.dataBoard.captureType') + ':'
                    }}{{ alarmTypes(item.alarmType) }}
                  </div>
                </div>
              </div>
            </div>
          </vue-seamless-scroll>
          <div
              class="placeholderBox placeholderBox2"
              v-if="captureRecord.length == 0"
            >
              <img src="@/assets/images/noData3.png" alt="" srcset="" />
              <p>
              <!-- 暂无数据 -->
               {{$t('message.dataBoard.nodata')}}
              </p>
            </div>
        </div>
      </div>
      <div class="blockBox blockBox2" style="height:calc(33.33% - 23px) !important;">
        <div class="blockTitle">
          <!-- 预警趋势 -->
          {{ $t('message.dataBoard.warningTrend') }}
        </div>
        <div class="blockContent blockContent2">
          <div class="optionBox">
            <div
              @click="changeOptionBoxListIndex(index)"
              v-for="(item, index) in optionBoxList"
              :key="index"
              class="optionBox_item"
              :class="{ selectOptionBox_item: optionBoxListIndex === index }"
            >
              <span>{{ item.text }}</span>
              <div class="a"></div>
              <div class="b"></div>
              <div class="c"></div>
              <div class="d"></div>
            </div>
            <!--              <div class="optionBox_item">-->
            <!--                  近30天-->
            <!--                  <div class="a"></div>-->
            <!--                  <div class="b"></div>-->
            <!--                  <div class="c"></div>-->
            <!--                  <div class="d"></div>-->
            <!--              </div>-->
          </div>
          <div
            ref="echart2"
            style="width: 100%; height: 100%"
            class="stageBox"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts4'
import mqtt from 'mqtt'
import vueSeamlessScroll from 'vue-seamless-scroll'
import {
  getAiAnalyseHardWareAlarmTotalApi, //查询所有各预警类型预警数 (预警统计)
  selectAiAnalyseHardWareAlarmTrendListApi, //查询近七天或近30天报警趋势(预计趋势)
  selectAIVideoTypeCountListApi, //按照摄像头类型查询具有AI功能的摄像头数量(设备情况)
  selectAiAnalyseHardWareAlarmListApi //查询设备报警记录列表(预警记录&&抓拍记录)
} from '@/assets/js/api/AI'
import { getAITypeStatistics } from '@/assets/js/api/companyBigScreen.js'
const options = {
  connectTimeout: 40000,
  clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
  username: 'root',
  password: '123456',
  clean: true
}
let client = null
export default {
  data() {
    return {
      optionBoxList: [
        {
          text: /* "近7天" */ this.$t('message.dataBoard.timeList')[0]
        },
        {
          text: /* "近30天" */ this.$t('message.dataBoard.timeList')[1]
        }
      ],
      optionBoxListIndex: 0,
      colorList: [
        '#44D7B6',
        '#3052B3',
        '#FE6C7F',
        '#FAC915',
        '#91c7ae',
        '#749f83',
        '#ca8622',
        '#bda29a'
      ],
      chart1: Object,
      chart2: Object,
      option1: {},
      option1: {},
      earlyWarning: [
        // {
        //     details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
        //     time:"09-12 13:45:42"
        // },
        // {
        //     details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
        //     time:"09-12 13:45:42"
        // },
        // {
        //     details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
        //     time:"09-12 13:45:42"
        // },
        // {
        //     details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
        //     time:"09-12 13:45:42"
        // },
        // {
        //     details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
        //     time:"09-12 13:45:42"
        // },
        // {
        //     details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
        //     time:"09-12 13:45:42"
        // },
        // {
        //     details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
        //     time:"09-12 13:45:42"
        // },
        // {
        //     details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
        //     time:"09-12 13:45:42"
        // },
        // {
        //     details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
        //     time:"09-12 13:45:42"
        // },
        // {
        //     details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
        //     time:"09-12 13:45:42"
        // }
      ],
      //  [
      //     {value: 0, name: '安全帽报警'},
      //     {value: 0, name: '明火报警'},
      //     {value: 0, name: '聚众报警'},
      //     {value: 0, name: '倒地报警'},
      //     {value: 0, name: '越界报警'},
      //     {value: 0, name: '闯入报警'},
      //     {value: 0, name: '反光衣报警'},
      //     {value: 0, name: '吸烟报警'}
      // ],
      echartData: this.$t('message.dataBoard.alarmTypeList'),
      totalNum: 0,
      devStatusList: this.$t('message.dataBoard.devStatusList'),
      captureRecord: [
        // {
        //     id:'900',
        //     time: '09-11 15:00:00',
        //     place:'施工通道',
        //     type:'违规作业'
        // },
        // {
        //     id:'901',
        //     time: '09-11 15:00:00',
        //     place:'施工通道',
        //     type:'违规作业'
        // },
        // {
        //     id:'902',
        //     time: '09-11 15:00:00',
        //     place:'施工通道',
        //     type:'违规作业'
        // },
        // {
        //     id:'903',
        //     time: '09-11 15:00:00',
        //     place:'施工通道',
        //     type:'违规作业'
        // },
        // {
        //     id:'904',
        //     time: '09-11 15:00:00',
        //     place:'施工通道',
        //     type:'违规作业'
        // },
        // {
        //     id:'905',
        //     time: '09-11 15:00:00',
        //     place:'施工通道',
        //     type:'违规作业'
        // },
        // {
        //     id:'906',
        //     time: '09-11 15:00:00',
        //     place:'施工通道',
        //     type:'违规作业'
        // },
        // {
        //     id:'907',
        //     time: '09-11 15:00:00',
        //     place:'施工通道',
        //     type:'违规作业'
        // },
        // {
        //     id:'908',
        //     time: '09-11 15:00:00',
        //     place:'施工通道',
        //     type:'违规作业'
        // },
        // {
        //     id:'909',
        //     time: '09-11 15:00:00',
        //     place:'施工通道',
        //     type:'违规作业'
        // },
        // {
        //     id:'910',
        //     time: '09-11 15:00:00',
        //     place:'施工通道',
        //     type:'违规作业'
        // },
        // {
        //     id:'911',
        //     time: '09-11 15:00:00',
        //     place:'施工通道',
        //     type:'违规作业'
        // }
      ],
      userId: '',
      topicName: 'aiAnalyse',
      dataTimeList: [],
      alarmTypeNum1: [],
      alarmTypeNum2: [],
      alarmTypeNum3: [],
      alarmTypeNum4: [],
      alarmTypeNum5: [],
      alarmTypeNum6: [],
      alarmTypeNum7: [],
      alarmTypeNum8: [],
      alarmTotalNum: [],
      fileUrl: '',
      currentPersonDetail: ''
    }
  },
  created() {
    this.fileUrl = this.$store.state.FILEURL
    console.log(this.$store.state.userInfo.scope)
    this.getAiAnalyseHardWareAlarmTotal()
    this.selectAiAnalyseHardWareAlarmTrendList(this.optionBoxListIndex + 1)
    this.selectAIVideoTypeCountList()
    this.selectAiAnalyseHardWareAlarmList()
  },
  mounted() {
    // client = mqtt.connect("ws://182.90.224.147:8083/mqtt", options);
    client = mqtt.connect(mqttUrl, options);
    this.mqttMSG();
  },
  beforeDestroy() {
    if (client) {
      client.unsubscribe(this.topicName + this.$store.state.projectSn)
    }
  },
  components: {
    vueSeamlessScroll
  },
  computed: {
    //   类型 1-烟感、2-明火、3-人员倒地、4-未戴安全帽、5-区域入侵、6-越界入侵、7-人员聚集衣 8-反光衣、9-裸土覆盖
    alarmTypes() {
      return function (type) {
        let alarmType
        if (type == 1) {
          alarmType = /* '安全帽报警' */ this.$t(
            'message.dataBoard.alarmTypeList'
          )[0].name
        } else if (type == 2) {
          alarmType = /* '明火报警' */ this.$t(
            'message.dataBoard.alarmTypeList'
          )[1].name
        } else if (type == 3) {
          alarmType = /* '聚众报警' */ this.$t(
            'message.dataBoard.alarmTypeList'
          )[2].name
        } else if (type == 4) {
          alarmType = /* '倒地报警' */ this.$t(
            'message.dataBoard.alarmTypeList'
          )[3].name
        } else if (type == 5) {
          alarmType = /* '越界报警' */ this.$t(
            'message.dataBoard.alarmTypeList'
          )[4].name
        } else if (type == 6) {
          alarmType = /* '闯入报警' */ this.$t(
            'message.dataBoard.alarmTypeList'
          )[5].name
        } else if (type == 7) {
          alarmType = /* '反光衣报警' */ this.$t(
            'message.dataBoard.alarmTypeList'
          )[6].name
        } else if (type == 8) {
          alarmType = /* '吸烟报警' */ this.$t(
            'message.dataBoard.alarmTypeList'
          )[7].name
        }
        return alarmType
      }
    },
    defaultOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
    defaultOption2() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  methods: {
    //查询所有各预警类型预警数 (预警统计)
    getAiAnalyseHardWareAlarmTotal() {
      getAiAnalyseHardWareAlarmTotalApi({
        projectSn: this.$store.state.projectSn
      }).then((res) => {
        this.echartData[0].value = res.result.alarmTypeNum1
        this.echartData[1].value = res.result.alarmTypeNum2
        this.echartData[2].value = res.result.alarmTypeNum3
        this.echartData[3].value = res.result.alarmTypeNum4
        this.echartData[4].value = res.result.alarmTypeNum5
        this.echartData[5].value = res.result.alarmTypeNum6
        this.echartData[6].value = res.result.alarmTypeNum7
        this.echartData[7].value = res.result.alarmTypeNum8
        this.totalNum = res.result.totalNum
        this.createdEchart1()
        console.log(this.echartData)
      })
    },
    changeOptionBoxListIndex(index) {
      this.optionBoxListIndex = index
      this.selectAiAnalyseHardWareAlarmTrendList(index + 1)
    },
    //查询近七天或近30天报警趋势(预计趋势)
    selectAiAnalyseHardWareAlarmTrendList(selectType) {
      selectAiAnalyseHardWareAlarmTrendListApi({
        projectSn: this.$store.state.projectSn,
        selectType: selectType
      }).then((res) => {
        console.log(res)
        this.alarmTypeNum1 = []
        this.alarmTypeNum2 = []
        this.alarmTypeNum3 = []
        this.alarmTypeNum4 = []
        this.alarmTypeNum5 = []
        this.alarmTypeNum6 = []
        this.alarmTypeNum7 = []
        this.alarmTypeNum8 = []
        this.alarmTotalNum = []
        this.dataTimeList = []
        res.result.forEach((item) => {
          this.alarmTypeNum1.push(item.alarmTypeNum1)
          this.alarmTypeNum2.push(item.alarmTypeNum2)
          this.alarmTypeNum3.push(item.alarmTypeNum3)
          this.alarmTypeNum4.push(item.alarmTypeNum4)
          this.alarmTypeNum5.push(item.alarmTypeNum5)
          this.alarmTypeNum6.push(item.alarmTypeNum6)
          this.alarmTypeNum7.push(item.alarmTypeNum7)
          this.alarmTypeNum8.push(item.alarmTypeNum8)
          this.alarmTotalNum.push(item.totalNum)
          this.dataTimeList.push(item.dayTitle)
          this.createdEchart2()
          // console.log(item);
        })
        console.log(res)
      })
    },
    //按照摄像头类型查询具有AI功能的摄像头数量(设备情况)
    selectAIVideoTypeCountList() {
      selectAIVideoTypeCountListApi({
        projectSn: this.$store.state.projectSn
      }).then((res) => {
        // 1 枪机，2球机，3热成像，4单兵，5全景，6无人机
        this.devStatusList = res.result
        console.log(res)
      })
    },
    //查询设备报警记录列表(预警记录&&抓拍记录)
    selectAiAnalyseHardWareAlarmList() {
      selectAiAnalyseHardWareAlarmListApi({
        projectSn: this.$store.state.projectSn,
        sizeNum: 20
      }).then((res) => {
        this.earlyWarning = res.result
        this.captureRecord = res.result
        console.log(res)
      })
    },
    // scrollClick(e) {
    //     //通过 e.target获取点击的dom
    //     //通过e.target.dataset获取vuedom中的自定义属性
    //     let data = e.target.dataset;
    //     this.$emit("supervise-detail", data.name, data.type);
    //     console.log(data);
    // },
    createdEchart1() {
      // console.log(this.$refs['echart'])
      let chart1 = echarts.init(this.$refs['echart'])
      this.chart1 = chart1
      chart1.clear()
      this.option1 = {
        grid: {
          top: '0px',
          left: '0px',
          right: '0px',
          bottom: '0px'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '38%',
            style: {
              text: this.totalNum,
              textAlign: 'center',
              fill: '#fff',
              fontSize: 26
            }
          },
          {
            type: 'text',
            left: 'center',
            top: '55%',
            style: {
              text: /* '问题总数', */ this.$t(
                'message.dataBoard.questionAllCounts'
              ),
              textAlign: 'center',
              fill: '#fff',
              fontSize: 14
            }
          }
        ],
        color: this.colorList,
        series: [
          {
            type: 'pie',
            radius: ['55%', '70%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '16',
                color: '#fff'
              }
            },
            labelLine: {
              show: false
            },
            data: this.echartData,
            stillShowZeroSum: true,
            minShowLabelAngle: 10
          }
        ]
      }
      chart1.setOption(this.option1)
    },
    createdEchart2() {
      // console.log(this.$refs['echart'])
      let chart2 = echarts.init(this.$refs['echart2'])
      this.chart2 = chart2
      chart2.clear()
      this.option2 = {
        color: [
          '#557DED',
          '#44D7B6',
          '#3052B3',
          '#FE6C7F',
          '#FAC915',
          '#91c7ae',
          '#749f83',
          '#ca8622',
          '#bda29a'
        ],
        legend: {
          // ['总计', '安全帽报警','明火报警','聚众报警','倒地报警','越界报警','闯入报警','反光衣报警','吸烟报警'],
          data: this.$t('message.dataBoard.alarmTypeArray'),
          textStyle: {
            fontSize: 10,//字体大小
            color: '#ccc' //字体颜色
          },
          left: '6%',
          top: '7%',
        },
        grid: {
          top:'20%',
        left: '3%',
        right: '4%',
        bottom: '29%',
        containLabel: true
    },
        tooltip: {
          trigger: 'axis',
          position: [20, 20]
        },
        xAxis: {
          type: 'category',
          data: this.dataTimeList,
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              //改变刻度字体样式
              color: 'RGB(254,255,255,0.5)',
              fontSize: 8,
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              //改变刻度字体样式
              color: 'RGB(254,255,255,0.5)',
              fontSize: 10,
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'RGB(236,236,236,0.5)',
              
            }
          }
        },
        series: [
          {
            name: /* "总计", */ this.$t('message.dataBoard.alarmTypeArray')[0],
            data: this.alarmTotalNum,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#557DED'
                }
              }
            }
          },
          {
            name: /* "安全帽报警", */ this.$t(
              'message.dataBoard.alarmTypeArray'
            )[1],
            data: this.alarmTypeNum1,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#44D7B6'
                }
              }
            }
          },
          {
            name: /* "明火报警", */ this.$t(
              'message.dataBoard.alarmTypeArray'
            )[2],
            data: this.alarmTypeNum2,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#3052B3'
                }
              }
            }
          },
          {
            name: /* "聚众报警", */ this.$t(
              'message.dataBoard.alarmTypeArray'
            )[3],
            data: this.alarmTypeNum3,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#FE6C7F'
                }
              }
            }
          },
          {
            name: /* "倒地报警", */ this.$t(
              'message.dataBoard.alarmTypeArray'
            )[4],
            data: this.alarmTypeNum4,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#FAC915'
                }
              }
            }
          },
          {
            name: /* "越界报警", */ this.$t(
              'message.dataBoard.alarmTypeArray'
            )[5],
            data: this.alarmTypeNum5,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#91c7ae'
                }
              }
            }
          },
          {
            name: /* "闯入报警", */ this.$t(
              'message.dataBoard.alarmTypeArray'
            )[6],
            data: this.alarmTypeNum6,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#749f83'
                }
              }
            }
          },
          {
            name: /* "反光衣报警", */ this.$t(
              'message.dataBoard.alarmTypeArray'
            )[7],
            data: this.alarmTypeNum7,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#ca8622'
                }
              }
            }
          },
          {
            name: /* "吸烟报警", */ this.$t(
              'message.dataBoard.alarmTypeArray'
            )[8],
            data: this.alarmTypeNum8,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#bda29a'
                }
              }
            }
          }
        ]
      }
      chart2.setOption(this.option2)
    },
    mqttMSG() {
      // mqtt连接   +"/#"  +workerId
      client.on('connect', (e) => {
        console.log('连接成功:', this.topicName + this.$store.state.projectSn)
        client.subscribe(
          this.topicName + this.$store.state.projectSn,
          { qos: 0 },
          (error) => {
            if (!error) {
              console.log('订阅成功')
            } else {
              console.log('订阅失败')
            }
          }
        )
      })
      // 接收消息处理
      client.on('message', (topic, message) => {
        console.log(message)
        message = JSON.parse(message)
        this.currentPersonDetail = JSON.parse(message.content)
        console.log(this.currentPersonDetail)
        if (this.currentPersonDetail) {
          if (this.earlyWarning.length < 20) {
            let arr = [this.currentPersonDetail]
            this.earlyWarning = arr.concat(this.earlyWarning)
            this.captureRecord = arr.concat(this.captureRecord)
          } else {
            this.earlyWarning.pop()
            this.captureRecord.pop()
            this.earlyWarning.unshift(this.currentPersonDetail)
            this.captureRecord.unshift(this.currentPersonDetail)
          }
        }
        // if(message.content){
        //     if(message.content.indexOf("火点检测") > -1 || message.content.indexOf("温度报警") > -1){
        //         this.$emit('sendMsg')
        //     }
        // }
        // this.$notify({
        //     title: message.title,
        //     message: message.content,
        // });
      })
      // 断开发起重连
      // client.on("reconnect", (error) => {
      //   console.log("正在重连:", error);
      // });
      // 链接异常处理
      client.on('error', (error) => {
        console.log('连接失败:', error)
      })
    },
    selectCaptureRecord(e) {
      console.log(e)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .stageBox {
  div {
    canvas {
      /*left: -70px !important;*/
      top: -25px !important;
      /*width: 1500px !important;*/
      height: 300px !important;
    }
  }
}
.a {
  width: 5px;
  height: 5px;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 2px solid #ebebeb;
  border-top: 2px solid #ebebeb;
}

.b {
  width: 5px;
  height: 5px;
  position: absolute;
  top: 0;
  right: 0;
  border-right: 2px solid #ebebeb;
  border-top: 2px solid #ebebeb;
}

.c {
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #ebebeb;
  border-left: 2px solid #ebebeb;
}

.d {
  width: 5px;
  height: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  border-right: 2px solid #ebebeb;
  border-bottom: 2px solid #ebebeb;
}
.optionBox {
  position: absolute;
  right: 50px;
  top: 0px;
  .optionBox_item {
    cursor: pointer;
    z-index: 100;
    padding: 4px;
    display: inline-block;
    width: 52px;
    height: 22px;
    font-size: 12px;
    line-height: 26px;
    margin-right: 10px;
    text-align: center;
    background: #193b43;
    position: relative;
  }
  .selectOptionBox_item {
    background: #393204;
    color: #f7d300;
  }
}
.earlyWarningList {
  .earlyWarningList_item {
    padding: 15px;
    height: 95px;
    background: #0d192c;
    margin-bottom: 5px;
    box-sizing: border-box;
    .imgBox {
      display: inline-block;
      box-sizing: border-box;
      img {
        width: 79px;
        height: 67px;
      }
    }
    .content {
      height: 100%;
      box-sizing: border-box;
      margin-left: 17px;
      width: 243px;
      display: inline-block;
      padding-bottom: 13px;
      .list-title {
        margin-bottom: 13px;
        font-size: 15px;
        text-overflow: ellipsis;
        line-clamp: 2;
        overflow: hidden;
        color: #c83e50;
      }
      .list-time {
        font-size: 13px;
      }
    }
  }
}
.captureRecordBox {
  /*display: flex;*/
  .captureRecord_item {
    box-sizing: border-box;
    display: inline-block;
    width: 305px;
    height: 247px;
    margin-right: 25px;
    .captureRecord_itemInfo {
      .itemInfo {
        font-size: 12px;
        display: inline-block;
        width: 152px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .itemInfoId {
      }
      .itemInfoTime {
      }
      .itemInfoPlace {
      }
      .itemInfoType {
      }
    }
  }
  .imgBox {
    width: 100%;
    img {
      width: 100%;
      height: 190px;
    }
  }
}
.numContent {
  display: flex;
  align-items: center;
  justify-content: space-around;
  p {
    font-size: 14px;
    opacity: 0.88;
    margin-top: 10px;
    text-align: center;
  }
}
.companyChart {
  width: 50%;
  height: 100%;
}
/deep/.alarmTypeBox {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 66px;
  opacity: 0.8;
  z-index: 3;
  .el-input__inner {
    background-color: transparent;
    color: white;
    height: 24px;
    line-height: 24px;
    padding: 0 5px;
  }
  .el-input__suffix {
    right: 0px;
  }
  .el-input__icon {
    color: white;
    line-height: 24px;
  }
}
.right-tg {
  margin-left: 20px;
  display: flex;
  ul {
    display: flex;
    height: 100%;
    flex-direction: column;
    //align-items: center;
    justify-content: center;
    li {
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      span {
        width: 6px;
        height: 6px;
        display: block;
        border-radius: 50%;
        margin-right: 6px;
      }
    }
  }
}
.configBtn {
  position: absolute;
  right: 8px;
  top: 15px;
  font-size: 20px;
  cursor: pointer;
  z-index: 3;
}
.days {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .num {
    font-size: 46px;
  }
}
.daysBG {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.endDate {
  position: absolute;
  right: 15px;
  bottom: 12px;
  // font-size: 13px;
}
.Extgantt {
  width: 100%;
  height: 100%;
  border: none;
}
.flex {
  display: flex;
}
.dev-status {
  ul {
    li {
      background: rgba(#2f4988, 0.3);
      color: #fff;
      justify-content: space-between;
      padding-left: 32px;
      height: 37px;
      line-height: 37px;
      margin-bottom: 6px;
      span {
        display: block;
        width: 65px;
        text-align: center;
        background: rgba(#557ded, 0.6);
        color: #fff;
      }
    }
  }
}
</style>