soc_app/src/views/menu/iot/board/index.vue

<template>
  <div class="detail">
    <nav-bar></nav-bar>
    <van-row>
      <van-col span="24">
        <div class="flex-container flex-row" style="height: 140px">
          <div class="flex-item" style="flex-grow: 1">
            <div class="moduleCom">
              <div class="titleText">
                <span class="leftSty"></span><span>设备一览表（单位：台）</span>
              </div>
              <van-row class="detail-item">
                <van-col span="8">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.deviceOverview == null ? 0 : dataInfo.deviceOverview.edgeComputingHosts}}</span>
                    </div>
                  </div>
                  <div class="moduleItem">
                    <div class="fontCls">边缘计算主机</div>
                  </div>
                </van-col>
                <van-col span="8">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.deviceOverview == null ? 0 : dataInfo.deviceOverview.iotDevices}}</span>
                    </div>
                  </div>
                  <div class="moduleItem">
                    <div class="fontCls">物联感知设备</div>
                  </div>
                </van-col>
                <van-col span="8">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.deviceOverview == null ? 0 : dataInfo.deviceOverview.alarmControllers}}</span>
                    </div>
                  </div>
                  <div class="moduleItem">
                    <div class="fontCls">报警控制器</div>
                  </div>
                </van-col>
              </van-row>
              <van-row class="detail-item">
                <van-col span="8">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.deviceOverview == null ? 0 : dataInfo.deviceOverview.hardDiskRecorders}}</span>
                    </div>
                  </div>
                  <div class="moduleItem">
                    <div class="fontCls">硬盘录像机</div>
                  </div>
                </van-col>
                <van-col span="8">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.deviceOverview == null ? 0 : dataInfo.deviceOverview.cameras}}</span>
                    </div>
                  </div>
                  <div class="moduleItem">
                    <div class="fontCls">摄像机</div>
                  </div>
                </van-col>
                <van-col span="8">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.deviceOverview == null ? 0 : dataInfo.deviceOverview.hardDisks}}</span>
                    </div>
                  </div>
                  <div class="moduleItem">
                    <div class="fontCls">硬盘</div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="12" class="customVanCell" >
        <div class="flex-container flex-column" style="height: 180px">
          <div class="flex-item" style="flex-grow: 1">
            <div class="moduleCom">
              <div class="titleText">
                <span class="leftSty"></span><span>告警总量</span>
                <van-image
                  width="0.5rem"
                  height="0.5rem"
                  style="float: right;margin-right: 5px;"
                  :src="require('@/assets/img/my/operta.png')"
                />
              </div>
              <van-row class="detail-item">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.totalAlerts}}</span>条
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
          <div class="flex-item" style="flex-grow: 1">
            <div class="moduleCom">
              <div class="titleText">
                <span class="leftSty"></span><span>烟雾感应器</span>
                <van-image
                  width="0.5rem"
                  height="0.5rem"
                  style="float: right;margin-right: 5px;"
                  :src="require('@/assets/img/my/operta.png')"
                />
              </div>
              <van-row class="detail-item">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{this.sensorDataMap.size === 0 ? 0 : this.sensorDataMap.get(4182).deviceCount}}</span>台
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">历史告警量: {{this.sensorDataMap.size === 0 ? 0 : this.sensorDataMap.get(4182).historicalAlarmTotal}}条</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12" class="customVanCell">
        <div class="flex-container flex-column" style="height: 180px">
          <div class="flex-item" style="flex-grow: 1">
            <div class="moduleCom">
              <div class="titleText">
                <span class="leftSty"></span><span>录像文件自检</span>
                <van-image
                  width="0.5rem"
                  height="0.5rem"
                  style="float: right;margin-right: 5px;"
                  :src="require('@/assets/img/my/operta.png')"
                />
              </div>
              <van-row class="detail-item" :style="{'margin-top': rightMargin}">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.videoInspection == null ? 0 : dataInfo.videoInspection.lostRate}}</span>
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">录像文件丢失率</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
              <van-row class="detail-item" :style="{'margin-top': rightMargin}">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.videoInspection == null ? 0 : dataInfo.videoInspection.hardDiskExceptionRate}}</span>
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">硬盘异常率</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="12" class="customVanCell">
        <div class="flex-container flex-column" style="height: 180px">
          <div class="flex-item" style="flex-grow: 1">
            <div class="moduleCom">
              <div class="titleText">
                <span class="leftSty"></span><span>燃气感应器</span>
                <van-image
                  width="0.5rem"
                  height="0.5rem"
                  style="float: right;margin-right: 5px;"
                  :src="require('@/assets/img/my/operta.png')"
                />
              </div>
              <van-row class="detail-item">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{this.sensorDataMap.size === 0 ? 0 : this.sensorDataMap.get(41885).deviceCount}}</span>台
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">历史告警量: {{this.sensorDataMap.size === 0 ? 0 : this.sensorDataMap.get(41885).historicalAlarmTotal}}条</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
          <div class="flex-item" style="flex-grow: 1">
            <div class="moduleCom">
              <div class="titleText">
                <span class="leftSty"></span><span>温湿度传感器</span>
                <van-image
                  width="0.5rem"
                  height="0.5rem"
                  style="float: right;margin-right: 5px;"
                  :src="require('@/assets/img/my/operta.png')"
                />
              </div>
              <van-row class="detail-item">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{this.sensorDataMap.size === 0 ? 0 : this.sensorDataMap.get(4183).deviceCount}}</span>台
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">历史告警量: {{this.sensorDataMap.size === 0 ? 0 : this.sensorDataMap.get(4183).historicalAlarmTotal}}条</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12" class="customVanCell">
        <div class="flex-container flex-column" style="height: 180px">
          <div class="flex-item" style="flex-grow: 1">
            <div class="moduleCom">
              <div class="titleText">
                <span class="leftSty"></span><span>录像存储天数</span>
                <van-image
                  width="0.5rem"
                  height="0.5rem"
                  style="float: right;margin-right: 5px;"
                  :src="require('@/assets/img/my/operta.png')"
                />
              </div>
              <van-row class="detail-item" :style="{'margin-top': rightMargin}">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{this.daysMap.size === 0  ? "-" : this.daysMap.get('30')}}</span>
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">大于或等于30天</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
              <van-row class="detail-item" :style="{'margin-top': rightMargin}">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{this.daysMap.size === 0  ? "-" : this.daysMap.get('90')}}</span>
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">大于或等于90天</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="12" class="customVanCell">
        <div class="flex-container flex-column" style="height: 180px">
          <div class="flex-item" style="flex-grow: 1">
            <div class="moduleCom">
              <div class="titleText">
                <span class="leftSty"></span><span>门窗磁传感器</span>
                <van-image
                  width="0.5rem"
                  height="0.5rem"
                  style="float: right;margin-right: 5px;"
                  :src="require('@/assets/img/my/operta.png')"
                />
              </div>
              <van-row class="detail-item">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{this.sensorDataMap.size === 0 ? 0 : this.sensorDataMap.get(4188).deviceCount}}</span>台
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">历史告警量: {{this.sensorDataMap.size === 0 ? 0 : this.sensorDataMap.get(4188).historicalAlarmTotal}}条</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
          <div class="flex-item" style="flex-grow: 1">
            <div class="moduleCom">
              <div class="titleText">
                <span class="leftSty"></span><span>红外探测器</span>
                <van-image
                  width="0.5rem"
                  height="0.5rem"
                  style="float: right;margin-right: 5px;"
                  :src="require('@/assets/img/my/operta.png')"
                />
              </div>
              <van-row class="detail-item">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{this.sensorDataMap.size === 0 ? 0 : this.sensorDataMap.get(4181).deviceCount}}</span>台
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">历史告警量: {{this.sensorDataMap.size === 0 ? 0 : this.sensorDataMap.get(4181).historicalAlarmTotal}}条</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12" class="customVanCell">
        <div class="flex-container flex-column" style="height: 180px">
          <div class="flex-item" style="flex-grow: 1">
            <div class="moduleCom">
              <div class="titleText">
                <span class="leftSty"></span><span>视频画面诊断</span>
                <van-image
                  width="0.5rem"
                  height="0.5rem"
                  style="float: right;margin-right: 5px;"
                  :src="require('@/assets/img/my/operta.png')"
                />
              </div>
              <van-row class="detail-item" :style="{'margin-top': rightMargin}">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.videoDiagnostic == null ? 0 : dataInfo.videoDiagnostic.singleLostAlarmNums}}</span>条
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">视频丢失历史告警量</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
              <van-row class="detail-item" :style="{'margin-top': rightMargin}">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.videoDiagnostic == null ? 0 : dataInfo.videoDiagnostic.occludeAlarmNums}}</span>条
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">视频遮挡历史告警量</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="12" class="customVanCell">
        <div class="flex-container flex-column" style="height: 240px">
          <div class="flex-item" style="flex-grow: 1">
            <div class="moduleCom">
              <div class="titleText">
                <span class="leftSty"></span><span>水浸传感器</span>
                <van-image
                  width="0.5rem"
                  height="0.5rem"
                  style="float: right;margin-right: 5px;"
                  :src="require('@/assets/img/my/operta.png')"
                />
              </div>
              <van-row class="detail-item">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{this.sensorDataMap.size === 0 ? 0 : this.sensorDataMap.get(4184).deviceCount}}</span>台
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">历史告警量: {{this.sensorDataMap.size === 0 ? 0 : this.sensorDataMap.get(4184).historicalAlarmTotal}}条</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
          <div class="flex-item" style="flex-grow: 2">
            <div class="moduleCom">
              <div class="titleText">
                <span class="leftSty"></span><span>空调控制器</span>
                <van-image
                  width="0.5rem"
                  height="0.5rem"
                  style="float: right;margin-right: 5px;"
                  :src="require('@/assets/img/my/operta.png')"
                />
              </div>
              <van-row class="detail-item">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.airConditionerInfo == null ? 0 : dataInfo.airConditionerInfo.totalDevices}}</span>台
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">设备总数</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
              <van-row class="detail-item" :style="{'margin-top': leftMargin}">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.airConditionerInfo == null ? 0 : dataInfo.airConditionerInfo.linkExceptions}}</span>台
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">连接异常</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="12" class="customVanCell">
        <div class="flex-container flex-column" style="height: 240px">
          <div class="flex-item" style="flex-grow: 3">
            <div class="moduleCom">
              <div class="titleText">
                <span class="leftSty"></span><span>UPS状态信息</span>
                <van-image
                  width="0.5rem"
                  height="0.5rem"
                  style="float: right;margin-right: 5px;"
                  :src="require('@/assets/img/my/operta.png')"
                />
              </div>
              <van-row class="detail-item">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.upsInfo == null ? 0 : dataInfo.upsInfo.totalDevices}}</span>台
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">设备总数</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
              <van-row class="detail-item">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.upsInfo == null ? 0 : dataInfo.upsInfo.communicationInterrupts}}</span>台
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">通信中断</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
              <van-row class="detail-item">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.upsInfo == null ? 0 : dataInfo.upsInfo.shutdownDevices}}</span>台
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">设备关机</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
              <van-row class="detail-item">
                <van-col span="24">
                  <div class="complete">
                    <div class="numCls wj-title-blue">
                      <span class="textSize">{{dataInfo.upsInfo == null ? 0 : dataInfo.upsInfo.historicalAlarmCounts}}</span>条
                    </div>
                    <div class="moduleItem">
                      <div class="fontCls">历史告警量</div>
                    </div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import {dataScreen} from '@/api/iot/board.js'
import NavBar from '@/components/NavBar'
export default {
  components: { NavBar},
  data() {
    return {
      rightMargin: '10%',
      leftMargin: '5%',
      dataInfo: {
        deviceOverview:{
          edgeComputingHosts: 0,
          iotDevices: 0,
          alarmControllers: 0,
          hardDiskRecorders: 0,
          cameras: 0,
          hardDisks: 0
        },
        totalAlerts: 0,
        videoInspection: {
          lostRate: '-',
          hardDiskExceptionRate: '-'
        },
        recordingStorage: {
          hashmap: null
        },
        videoDiagnostic: {
          singleLostAlarmNums: 0,
          occludeAlarmNums: 0
        },
        airConditionerInfo: {
          totalDevices: 0,
          linkExceptions: 0
        },
        upsInfo: {
          totalDevices: 0,
          communicationInterrupts: 0,
          shutdownDevices: 0,
          historicalAlarmCounts: 0
        },
        sensorDetails: null
      },
      sensorDataMap: new Map(),
      daysMap: new Map()
    }
  },
  computed: {
  },
  watch: {},
  props: {
  },
  methods: {
    refresh() {
      dataScreen().then(r => {
        this.dataInfo = r.data
        if (r.data && r.data.sensorDetails){
          r.data.sensorDetails.forEach(item =>{
            this.sensorDataMap.set(item.type,item);
          })
        }
        if (r.data && r.data.recordingStorage && r.data.recordingStorage.hashmap){
            this.daysMap = new Map(Object.entries(r.data.recordingStorage.hashmap));
        }
      })
    }
  },
  async created() {},
  async mounted() {
    this.refresh();
  }
}
</script>
<style lang="scss" scoped>
.detail{
  //background-color: rgba(237, 252, 255, 1);
}
.flex-container {
  display: -webkit-flex;
  display: flex;
  width: auto;
  height: auto;
}
.flex-row{
  flex-direction: row;
}
.flex-column{
  flex-direction: column;
}

.flex-item {
  background-color: #e5e5e5;
  width: auto;
  margin: 10px;
  border-radius: 5px;
}
.numCls{
  text-align: center;
  margin-top: 5px;
}
.textSize{
  font-size: 40px;
}
.fontCls{
  text-align: center;
  margin-top: 2px;
}
.detail-item{
  margin-top: 10px;
}
.moduleItem{
  margin-top: 5px;
}
.titleText{
  margin-top: 10px;
  margin-left: 10px;
  font-size: 30px;
  font-weight: bold;
}
</style>