数据总览前端页面提交

src/api/iot/board.js

@@ -7,4 +7,11 @@ export function overView(query) {
     method: 'post',
     data: query
   })
-}
+}
+
+export function dataScreen() {
+  return request({
+    url: '/iot/board/overview',
+    method: 'post'
+  })
+}

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

@@ -1,240 +1,622 @@
 <template>
-  <div class="page_list">
+  <div class="detail">
     <nav-bar></nav-bar>
     <van-row>
       <van-col span="24">
-        <org-tree v-model="search.orgId" :name="'sss'" @changeItem="getDataList"></org-tree>
+        <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 v-if="data">
-      <van-row class="boxCard">
-        <van-col :span="24" class="titleSty">
-          <span class="leftSty"></span><span>{{ data.host.name }}</span>
-        </van-col>
-        <van-col :span="8" class="boxmain">
-          <div>数量</div>
-          <div class="wj-title-blue font5vw">{{ data.host.count }}</div>
-        </van-col>
-        <van-col :span="8" class="boxmain centerBox">
-          <div>在线</div>
-          <div class="wj-title-blue font5vw">{{ data.host.normal }}</div>
-        </van-col>
-        <van-col :span="8" class="boxmain">
-          <div>离线</div>
-          <div class="wj-title-blue font5vw">{{ data.host.exception }}</div>
-        </van-col>
-      </van-row>
-      <van-row class="boxCard">
-        <van-col :span="24" class="titleSty">
-          <span class="leftSty"></span><span>{{ data.sensor.name }}</span>
-        </van-col>
-        <van-col :span="8" class="boxmain">
-          <div>数量</div>
-          <div class="wj-title-blue font5vw">{{ data.sensor.count }}</div>
-        </van-col>
-        <van-col :span="8" class="boxmain centerBox">
-          <div>正常</div>
-          <div class="wj-title-blue font5vw">{{ data.sensor.normal }}</div>
-        </van-col>
-        <van-col :span="8" class="boxmain">
-          <div>报警</div>
-          <div class="wj-title-blue font5vw">{{ data.sensor.exception }}</div>
-        </van-col>
-      </van-row>
-      <van-row class="boxCard">
-        <van-col :span="24" class="titleSty">
-          <span class="leftSty"></span><span>{{ data.subsystem.name }}</span>
-        </van-col>
-        <van-col :span="8" class="boxmain">
-          <div>数量</div>
-          <div class="wj-title-blue font5vw">{{ data.subsystem.count }}</div>
-        </van-col>
-        <van-col :span="8" class="boxmain centerBox">
-          <div>布防</div>
-          <div class="wj-title-blue font5vw">{{ data.subsystem.normal }}</div>
-        </van-col>
-        <van-col :span="8" class="boxmain">
-          <div>撤防</div>
-          <div class="wj-title-blue font5vw">{{ data.subsystem.exception }}</div>
-        </van-col>
-      </van-row>
-      <van-row class="boxCard">
-        <van-col :span="24" class="titleSty">
-          <span class="leftSty"></span><span>{{ data.videoDays.name }}</span>
-        </van-col>
-        <van-col :span="8" class="boxmain">
-          <div>摄像头数量</div>
-          <div class="wj-title-blue font5vw">{{ data.videoDays.count }}</div>
-        </van-col>
-        <van-col :span="8" class="boxmain centerBox">
-          <div>完整</div>
-          <div class="wj-title-blue font5vw">{{ data.videoDays.normal }}</div>
-        </van-col>
-        <van-col :span="8" class="boxmain">
-          <div>不完整</div>
-          <div class="wj-title-blue font5vw">{{ data.videoDays.exception }}</div>
-        </van-col>
-      </van-row>
-      <van-row class="boxCard">
-        <van-col :span="24" class="titleSty">
-          <span class="leftSty"></span><span>{{ data.videoQuality.name }}</span>
-        </van-col>
-        <van-col :span="8" class="boxmain">
-          <div>摄像头数量</div>
-          <div class="wj-title-blue font5vw">{{ data.videoQuality.count }}</div>
-        </van-col>
-        <van-col :span="8" class="boxmain centerBox">
-          <div>正常</div>
-          <div class="wj-title-blue font5vw">{{ data.videoQuality.normal }}</div>
-        </van-col>
-        <van-col :span="8" class="boxmain">
-          <div>异常</div>
-          <div class="wj-title-blue font5vw">{{ data.videoQuality.exception }}</div>
-        </van-col>
-      </van-row>
-      <van-row class="boxCard">
-        <van-col :span="24" class="titleSty">
-          <span class="leftSty"></span><span>{{ data.videoInterity.name }}</span>
-        </van-col>
-        <van-col :span="6" class="boxmain">
-          <div>摄像头数量</div>
-          <div class="wj-title-blue font5vw">{{ data.videoInterity.count }}</div>
-        </van-col>
-        <van-col :span="6" class="boxmain centerBox">
-          <div>完整</div>
-          <div class="wj-title-blue font5vw">{{ data.videoInterity.normal }}</div>
-        </van-col>
-        <van-col :span="6" class="boxmain centerTwoBox">
-          <div>全部丢失</div>
-          <div class="wj-title-blue font5vw">{{ data.videoInterity.exception }}</div>
-        </van-col>
-        <van-col :span="6" class="boxmain">
-          <div>部分丢失</div>
-          <div class="wj-title-blue font5vw">{{ data.videoInterity.other1 }}</div>
-        </van-col>
-      </van-row>
-      <van-row class="boxCard">
-        <van-col :span="24" class="titleSty">
-          <span class="leftSty"></span><span>{{ data.dvrDisk.name }}</span>
-        </van-col>
-        <van-col :span="6" class="boxmain">
-          <div>录像机数量</div>
-          <div class="wj-title-blue font5vw">{{ data.dvrDisk.count }}</div>
-        </van-col>
-        <van-col :span="6" class="boxmain centerBox">
-          <div>硬盘总数</div>
-          <div class="wj-title-blue font5vw">{{ data.dvrDisk.other1 }}</div>
-        </van-col>
-        <van-col :span="6" class="boxmain centerTwoBox">
-          <div>正常</div>
-          <div class="wj-title-blue font5vw">{{ data.dvrDisk.normal }}</div>
-        </van-col>
-        <van-col :span="6" class="boxmain ">
-          <div>异常</div>
-          <div class="wj-title-blue font5vw">{{ data.dvrDisk.exception }}</div>
-        </van-col>
-      </van-row>
-    </div>
   </div>
 </template>
-
 <script>
+import {dataScreen} from '@/api/iot/board.js'
 import NavBar from '@/components/NavBar'
-import { mapGetters } from 'vuex'
-import OrgTree from '@/components/orgTree'
-import { overView } from '@/api/iot/board.js'
-
 export default {
-  components: { NavBar, OrgTree },
+  components: { NavBar},
   data() {
     return {
-      search: {
-        orgId: this.orgId,
-        checkSub: true
+      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
       },
-      data:null
+      sensorDataMap: new Map(),
+      daysMap: new Map()
     }
   },
-  watch: {},
-  created() {},
-  mounted() {
-    this.search.orgId = this.orgId
-    this.refresh();
-  },
   computed: {
-    ...mapGetters(['orgName', 'orgId'])
+  },
+  watch: {},
+  props: {
   },
   methods: {
-    //改变机构后将重新发起请求
-    getDataList(node) {
-      this.search.orgId = node.id
-      this.refresh();
-    },
     refresh() {
-      overView(this.search).then(r => {
-        this.data = r.data
+      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>
-.titleRow {
-  box-shadow: 0 2px 10px #ccc;
-  margin-left: 12px;
-  // margin-top: 10px;
-  margin-right: 14px;
+.detail{
+  //background-color: rgba(237, 252, 255, 1);
 }
-.boxCard {
-  background-color: #fff;
-  margin: 20px;
-  box-shadow: 0 2px 10px #ccc;
+.flex-container {
+  display: -webkit-flex;
+  display: flex;
+  width: auto;
+  height: auto;
 }
-.leftSty {
-  display: inline-block;
-  width: 10px;
-  height: 5vw;
-  vertical-align: text-top;
-  margin-right: 10px;
-  margin-left: 10px;
-  background-color: #008cd6;
+.flex-row{
+  flex-direction: row;
+}
+.flex-column{
+  flex-direction: column;
 }
-.titleSty {
-  line-height: 5vw;
-  font-size: 5vw;
+
+.flex-item {
+  background-color: #e5e5e5;
+  width: auto;
   margin: 10px;
-  color: #008cd6;
+  border-radius: 5px;
 }
-.boxmain {
-  display: flex;
-  flex-flow: wrap;
+.numCls{
   text-align: center;
-  margin-bottom: 20px;
-  div {
-    font-size: 28px;
-    width: 100%;
-    height: 100px;
-    line-height: 100px;
-  }
+  margin-top: 5px;
 }
-
-.centerBox {
-  border-left: 1px solid #008cd6;
-  border-right: 1px solid #008cd6;
+.textSize{
+  font-size: 40px;
 }
-.centerTwoBox {
-  border-right: 1px solid #008cd6;
+.fontCls{
+  text-align: center;
+  margin-top: 2px;
 }
-.chartsCls {
-  font-size: 28px;
-  padding: 20px;
+.detail-item{
+  margin-top: 10px;
 }
-.tabsCard {
-  margin-top: 20px;
+.moduleItem{
+  margin-top: 5px;
 }
-.font5vw {
-  font-size: 6vw !important;
+.titleText{
+  margin-top: 10px;
+  margin-left: 10px;
+  font-size: 30px;
   font-weight: bold;
 }
 </style>

src/views/menu/iot/board/index_old.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="page_list">
+    <nav-bar></nav-bar>
+    <van-row>
+      <van-col span="24">
+        <org-tree v-model="search.orgId" :name="'sss'" @changeItem="getDataList"></org-tree>
+      </van-col>
+    </van-row>
+    <div v-if="data">
+      <van-row class="boxCard">
+        <van-col :span="24" class="titleSty">
+          <span class="leftSty"></span><span>{{ data.host.name }}</span>
+        </van-col>
+        <van-col :span="8" class="boxmain">
+          <div>数量</div>
+          <div class="wj-title-blue font5vw">{{ data.host.count }}</div>
+        </van-col>
+        <van-col :span="8" class="boxmain centerBox">
+          <div>在线</div>
+          <div class="wj-title-blue font5vw">{{ data.host.normal }}</div>
+        </van-col>
+        <van-col :span="8" class="boxmain">
+          <div>离线</div>
+          <div class="wj-title-blue font5vw">{{ data.host.exception }}</div>
+        </van-col>
+      </van-row>
+      <van-row class="boxCard">
+        <van-col :span="24" class="titleSty">
+          <span class="leftSty"></span><span>{{ data.sensor.name }}</span>
+        </van-col>
+        <van-col :span="8" class="boxmain">
+          <div>数量</div>
+          <div class="wj-title-blue font5vw">{{ data.sensor.count }}</div>
+        </van-col>
+        <van-col :span="8" class="boxmain centerBox">
+          <div>正常</div>
+          <div class="wj-title-blue font5vw">{{ data.sensor.normal }}</div>
+        </van-col>
+        <van-col :span="8" class="boxmain">
+          <div>报警</div>
+          <div class="wj-title-blue font5vw">{{ data.sensor.exception }}</div>
+        </van-col>
+      </van-row>
+      <van-row class="boxCard">
+        <van-col :span="24" class="titleSty">
+          <span class="leftSty"></span><span>{{ data.subsystem.name }}</span>
+        </van-col>
+        <van-col :span="8" class="boxmain">
+          <div>数量</div>
+          <div class="wj-title-blue font5vw">{{ data.subsystem.count }}</div>
+        </van-col>
+        <van-col :span="8" class="boxmain centerBox">
+          <div>布防</div>
+          <div class="wj-title-blue font5vw">{{ data.subsystem.normal }}</div>
+        </van-col>
+        <van-col :span="8" class="boxmain">
+          <div>撤防</div>
+          <div class="wj-title-blue font5vw">{{ data.subsystem.exception }}</div>
+        </van-col>
+      </van-row>
+      <van-row class="boxCard">
+        <van-col :span="24" class="titleSty">
+          <span class="leftSty"></span><span>{{ data.videoDays.name }}</span>
+        </van-col>
+        <van-col :span="8" class="boxmain">
+          <div>摄像头数量</div>
+          <div class="wj-title-blue font5vw">{{ data.videoDays.count }}</div>
+        </van-col>
+        <van-col :span="8" class="boxmain centerBox">
+          <div>完整</div>
+          <div class="wj-title-blue font5vw">{{ data.videoDays.normal }}</div>
+        </van-col>
+        <van-col :span="8" class="boxmain">
+          <div>不完整</div>
+          <div class="wj-title-blue font5vw">{{ data.videoDays.exception }}</div>
+        </van-col>
+      </van-row>
+      <van-row class="boxCard">
+        <van-col :span="24" class="titleSty">
+          <span class="leftSty"></span><span>{{ data.videoQuality.name }}</span>
+        </van-col>
+        <van-col :span="8" class="boxmain">
+          <div>摄像头数量</div>
+          <div class="wj-title-blue font5vw">{{ data.videoQuality.count }}</div>
+        </van-col>
+        <van-col :span="8" class="boxmain centerBox">
+          <div>正常</div>
+          <div class="wj-title-blue font5vw">{{ data.videoQuality.normal }}</div>
+        </van-col>
+        <van-col :span="8" class="boxmain">
+          <div>异常</div>
+          <div class="wj-title-blue font5vw">{{ data.videoQuality.exception }}</div>
+        </van-col>
+      </van-row>
+      <van-row class="boxCard">
+        <van-col :span="24" class="titleSty">
+          <span class="leftSty"></span><span>{{ data.videoInterity.name }}</span>
+        </van-col>
+        <van-col :span="6" class="boxmain">
+          <div>摄像头数量</div>
+          <div class="wj-title-blue font5vw">{{ data.videoInterity.count }}</div>
+        </van-col>
+        <van-col :span="6" class="boxmain centerBox">
+          <div>完整</div>
+          <div class="wj-title-blue font5vw">{{ data.videoInterity.normal }}</div>
+        </van-col>
+        <van-col :span="6" class="boxmain centerTwoBox">
+          <div>全部丢失</div>
+          <div class="wj-title-blue font5vw">{{ data.videoInterity.exception }}</div>
+        </van-col>
+        <van-col :span="6" class="boxmain">
+          <div>部分丢失</div>
+          <div class="wj-title-blue font5vw">{{ data.videoInterity.other1 }}</div>
+        </van-col>
+      </van-row>
+      <van-row class="boxCard">
+        <van-col :span="24" class="titleSty">
+          <span class="leftSty"></span><span>{{ data.dvrDisk.name }}</span>
+        </van-col>
+        <van-col :span="6" class="boxmain">
+          <div>录像机数量</div>
+          <div class="wj-title-blue font5vw">{{ data.dvrDisk.count }}</div>
+        </van-col>
+        <van-col :span="6" class="boxmain centerBox">
+          <div>硬盘总数</div>
+          <div class="wj-title-blue font5vw">{{ data.dvrDisk.other1 }}</div>
+        </van-col>
+        <van-col :span="6" class="boxmain centerTwoBox">
+          <div>正常</div>
+          <div class="wj-title-blue font5vw">{{ data.dvrDisk.normal }}</div>
+        </van-col>
+        <van-col :span="6" class="boxmain ">
+          <div>异常</div>
+          <div class="wj-title-blue font5vw">{{ data.dvrDisk.exception }}</div>
+        </van-col>
+      </van-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/components/NavBar'
+import { mapGetters } from 'vuex'
+import OrgTree from '@/components/orgTree'
+import { overView } from '@/api/iot/board.js'
+
+export default {
+  components: { NavBar, OrgTree },
+  data() {
+    return {
+      search: {
+        orgId: this.orgId,
+        checkSub: true
+      },
+      data:null
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {
+    this.search.orgId = this.orgId
+    this.refresh();
+  },
+  computed: {
+    ...mapGetters(['orgName', 'orgId'])
+  },
+  methods: {
+    //改变机构后将重新发起请求
+    getDataList(node) {
+      this.search.orgId = node.id
+      this.refresh();
+    },
+    refresh() {
+      overView(this.search).then(r => {
+        this.data = r.data
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.titleRow {
+  box-shadow: 0 2px 10px #ccc;
+  margin-left: 12px;
+  // margin-top: 10px;
+  margin-right: 14px;
+}
+.boxCard {
+  background-color: #fff;
+  margin: 20px;
+  box-shadow: 0 2px 10px #ccc;
+}
+.leftSty {
+  display: inline-block;
+  width: 10px;
+  height: 5vw;
+  vertical-align: text-top;
+  margin-right: 10px;
+  margin-left: 10px;
+  background-color: #008cd6;
+}
+.titleSty {
+  line-height: 5vw;
+  font-size: 5vw;
+  margin: 10px;
+  color: #008cd6;
+}
+.boxmain {
+  display: flex;
+  flex-flow: wrap;
+  text-align: center;
+  margin-bottom: 20px;
+  div {
+    font-size: 28px;
+    width: 100%;
+    height: 100px;
+    line-height: 100px;
+  }
+}
+
+.centerBox {
+  border-left: 1px solid #008cd6;
+  border-right: 1px solid #008cd6;
+}
+.centerTwoBox {
+  border-right: 1px solid #008cd6;
+}
+.chartsCls {
+  font-size: 28px;
+  padding: 20px;
+}
+.tabsCard {
+  margin-top: 20px;
+}
+.font5vw {
+  font-size: 6vw !important;
+  font-weight: bold;
+}
+</style>