独栋

app/src/api/detail.js

@@ -7,3 +7,39 @@ export function getBuildDetail(id) {
     methods: "get"
   });
 }
+
+// 获取消防设施
+export function getXfss(params) {
+  return request({
+    url: "/system/xfss/list",
+    methods: "get",
+    params
+  });
+}
+
+// 获取入住单位
+export function getRzdw(params) {
+  return request({
+    url: "/system/rzdw/list",
+    methods: "get",
+    params
+  });
+}
+
+// 获取历史火灾
+export function getLshz(params) {
+  return request({
+    url: "/system/lshz/list",
+    methods: "get",
+    params
+  });
+}
+
+// 获取隐患
+export function getYh(params) {
+  return request({
+    url: "/system/yh/list",
+    methods: "get",
+    params
+  });
+}

app/src/api/iot.js

@@ -91,3 +91,50 @@ export function getType(params) {
     params,
   });
 }
+
+// 获取接入数 /dev-api/system/ddzhxf/jrjzsbs/list
+export function getJrs(params) {
+  return request({
+    url: "/system/ddzhxf/jrjzsbs/list",
+    method: "get",
+    params,
+  });
+}
+
+// 获取自查情况
+// /dev-api/system/task/list
+export function getZcqk(params) {
+  return request({
+    url: "/system/task/list",
+    method: "get",
+    params,
+  });
+}
+
+// 获取监督检查
+// /system/ddzcjdwb/jdjc/list
+export function getJdjc(params) {
+  return request({
+    url: "/system/ddzcjdwb/jdjc/list",
+    method: "get",
+    params,
+  });
+}
+
+// 网格排查
+export function getWgpc(params) {
+  return request({
+    url: "/system/yh/list",
+    method: "get",
+    params,
+  });
+}
+
+// 维保情况
+export function getWbqk(params) {
+  return request({
+    url: "/system/wbxx/list",
+    method: "get",
+    params,
+  });
+}

app/src/components/Camera.vue

@@ -3,10 +3,11 @@
     <video :src="url" v-if="url" width="100%" height="100%" autoplay muted>
       您的浏览器不支持 video 标签。
     </video>
+    <div class="mask" @click="showVideo(id)"></div>
   </div>
 </template>
 <script>
-import {getCameraUrl} from "@/api/camera.js";
+import { getCameraUrl } from "@/api/camera.js";
 export default {
   name: "CameraContainer",
   components: {},
@@ -20,6 +21,10 @@ export default {
       type: String,
       default: "",
     },
+    byList: {
+      type: Array,
+      default: [],
+    },
   },
   mounted() {
     this.getData();
@@ -27,13 +32,32 @@ export default {
   methods: {
     getData() {
       // TO-DO
-      getCameraUrl(this.id).then(res => {
-        this.url = res.data.data[0].mp4
-      })
+      getCameraUrl(this.id).then((res) => {
+        this.url = res.data.data[0].mp4;
+        if (!this.url && this.byList && this.byList.length > 0) {
+          getCameraUrl(this.byList[this.byList.length - 1].sbbm).then(
+            (res2) => {
+              this.url = res2.data.data[0].mp4;
+              if (!this.url) {
+                getCameraUrl(this.byList[this.byList.length - 2].sbbm).then(
+                  (res3) => {
+                    this.url = res3.mp4;
+                  }
+                );
+              }
+            }
+          );
+        }
+      });
       // console.log(this.id);
       // this.url =
       //   "https://ycjk.cq119.gov.cn/rtp/77746e2c33126146cb83c81be23d0492.live.mp4?deviceId=50015200002000000001&key=";
     },
+    showVideo(id) {
+      console.log(id);
+
+      // 弹窗显示视频播放组件
+    },
   },
 };
 </script>
@@ -42,5 +66,16 @@ export default {
 .camera-continer {
   width: 100%;
   height: 100%;
+  position: relative;
+
+  .mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 99;
+    cursor: pointer;
+  }
 }
 </style>

app/src/components/Monitor3D.vue

@@ -2,34 +2,36 @@
 import { onMounted, ref } from "vue";
 import * as echarts from "echarts";
 import "echarts-gl";
-
+const props = defineProps({
+  data: Object,
+});
 let chart, option;
 const pieChart3d = ref();
 onMounted(() => {
-  console.log(pieChart3d);
+  console.log(props.data);
   chart = echarts.init(pieChart3d.value);
   // 传入数据生成 option
   option = getPie3D(
     [
       {
         name: "生命通道监控点位",
-        value: 100,
+        value: props.data.smtd.zs,
       },
       {
         name: "电气火灾监测点位",
-        value: 120,
+        value: props.data.dqhz.zs,
       },
       {
         name: "水压检测点位",
-        value: 130,
+        value: props.data.sy.zs,
       },
       {
         name: "火灾报警主机监测点位",
-        value: 120,
+        value: props.data.hzbjzj.zs,
       },
       {
         name: "消防监控室人员离岗检测点位",
-        value: 130,
+        value: props.data.xfkzs.zs,
       },
     ],
     0

app/src/views/Detail/components/BuildingInfo.vue

@@ -59,7 +59,7 @@
           </li>
           <li>
             <span>消防设施：</span>
-            <p></p>
+            <p>{{ xfssList }}</p>
           </li>
         </ul>
       </div>
@@ -118,22 +118,38 @@
 </template>
 
 <script>
+import { getXfss } from "@/api/detail.js";
+
 export default {
   data() {
     return {
       srcList: [],
+      xfssList: []
     };
   },
   props: ["detail"],
-  methods: {},
+  methods: {
+    getXfsss() {
+      getXfss({
+        id: this.detail.id,
+        pageNum: 1,
+        pageSize: 10
+      }).then(res => {
+        if (res.data.rows) {
+          this.xfssList = res.data.rows.map(p => p.yhxm).join(',');
+        }
+      })
+    }
+  },
   created() {
     this.srcList = [
-      this.detail.jzzp,
       this.detail.jzzp1,
       this.detail.jzzp2,
       this.detail.jzzp3,
       this.detail.jzzp4,
+      this.detail.jzzp5,
     ];
+    this.getXfsss();
   },
 };
 </script>

app/src/views/Detail/components/GementUnit.vue

@@ -14,13 +14,13 @@
           </li>
           <li>
             <span>消防安全联系人：</span>
-            <p></p>
+            <p>{{ detail.xfaqlxr }}</p>
           </li>
         </ul>
         <ul>
           <li>
             <span>消防安全责任人：</span>
-            <p></p>
+            <p>{{ detail.xfaqzrr }}</p>
           </li>
           <li>
             <span>消防安全管理人：</span>
@@ -28,7 +28,7 @@
           </li>
           <li>
             <span>联系方式：</span>
-            <p></p>
+            <p>{{ detail.xfaqlxrdh }}</p>
           </li>
         </ul>
       </div>
@@ -63,20 +63,20 @@
 
 <script>
 import VueSeamlessScroll from "vue-seamless-scroll";
-
+import { getRzdw } from "@/api/detail.js";
 export default {
   name: "GementUnit",
   data() {
     return {
       list: [
-        ["国泰艺术中心", "王晓辉", "李小小"],
-        ["人民大礼堂", "李四", "张三"],
-        ["人民大礼堂", "王五", "赵六"],
-        ["花博艺术中心", "张米", "刘小明"],
-        ["人民大礼堂", "王五", "赵六"],
-        ["人民大礼堂", "王五", "赵六"],
-        ["人民大礼堂", "王五", "赵六"],
-        ["人民大礼堂", "王五", "赵六"],
+        // ["国泰艺术中心", "王晓辉", "李小小"],
+        // ["人民大礼堂", "李四", "张三"],
+        // ["人民大礼堂", "王五", "赵六"],
+        // ["花博艺术中心", "张米", "刘小明"],
+        // ["人民大礼堂", "王五", "赵六"],
+        // ["人民大礼堂", "王五", "赵六"],
+        // ["人民大礼堂", "王五", "赵六"],
+        // ["人民大礼堂", "王五", "赵六"],
       ],
     };
   },
@@ -91,6 +91,26 @@ export default {
       };
     },
   },
+  methods: {
+    getList() {
+      getRzdw({
+        pageNum: 1,
+        pageSize: 10,
+        jzid: this.detail.id
+      }).then(res => {
+        const list = [];
+        if (res.data.rows) {
+          res.data.rows.forEach(p => {
+            list.push([p.dwmc, p.xfaqfzr, p.xfaqgly])
+          })
+        }
+        this.list = list;
+      })
+    }
+  },
+  created() {
+    this.getList();
+  }
 };
 </script>
 

app/src/views/Detail/components/HiddenDanger.vue

@@ -23,21 +23,22 @@
 
 <script>
 import VueSeamlessScroll from "vue-seamless-scroll";
-
+import { getYh } from "@/api/detail.js";
 export default {
   name: "HiddenDanger",
   data() {
     return {
       list: [
-        ["电器火灾", "23", "15日", "重庆大剧院管理有限公司", "是"],
-        ["安全出口堵塞", "48", "15日", "重庆大剧院管理有限公司", "是"],
-        ["电器火灾", "23", "15日", "重庆大剧院管理有限公司", "是"],
-        ["电器火灾", "23", "15日", "重庆大剧院管理有限公司", "是"],
-        ["电器火灾", "23", "15日", "重庆大剧院管理有限公司", "是"],
-        ["安全出口堵塞", "48", "15日", "重庆大剧院管理有限公司", "是"],
+        // ["电器火灾", "23", "15日", "重庆大剧院管理有限公司", "是"],
+        // ["安全出口堵塞", "48", "15日", "重庆大剧院管理有限公司", "是"],
+        // ["电器火灾", "23", "15日", "重庆大剧院管理有限公司", "是"],
+        // ["电器火灾", "23", "15日", "重庆大剧院管理有限公司", "是"],
+        // ["电器火灾", "23", "15日", "重庆大剧院管理有限公司", "是"],
+        // ["安全出口堵塞", "48", "15日", "重庆大剧院管理有限公司", "是"],
       ],
     };
   },
+  props: ['detail'],
   components: {
     VueSeamlessScroll,
   },
@@ -48,6 +49,26 @@ export default {
       };
     },
   },
+  methods: {
+    getList() {
+      getYh({
+        jzid: this.detail.id,
+        pageNum: 1,
+        pageSize: 100
+      }).then(res => {
+        const list = [];
+        if (res.data.rows) {
+          res.data.rows.forEach(p => {
+            // list.push([])
+          })
+        }
+        this.list = list;
+      })
+    }
+  },
+  created() {
+    this.getList();
+  }
 };
 </script>
 

app/src/views/Detail/components/HistoricalFire.vue

@@ -5,7 +5,7 @@
       <span class="person">人员伤亡数量</span>
       <span class="money">财产损失</span>
     </div>
-    <VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
+    <!-- <VueSeamlessScroll :data="list" :class-option="classOption" class="warp"> -->
       <ul class="item">
         <li class="row" v-for="(item, index) in list" :key="index">
           <span class="time">{{ item[0] }}</span>
@@ -13,28 +13,30 @@
           <span class="money">{{ item[2] }}</span>
         </li>
       </ul>
-    </VueSeamlessScroll>
+    <!-- </VueSeamlessScroll> -->
   </div>
 </template>
 
 <script>
 import VueSeamlessScroll from "vue-seamless-scroll";
+import { getLshz } from "@/api/detail.js";
 
 export default {
   name: "HistoricalFire",
   data() {
     return {
       list: [
-        ["09:23 05-14", "25", "9万元"],
-        ["09:23 05-14", "12", "5万元"],
-        ["09:23 05-14", "20", "8万元"],
-        ["09:23 05-14", "9", "2万元"],
-        ["09:23 05-14", "2", "2万元"],
-        ["09:23 05-14", "4", "5万元"],
-        ["09:23 05-14", "6", "8万元"],
+        // ["09:23 05-14", "25", "9万元"],
+        // ["09:23 05-14", "12", "5万元"],
+        // ["09:23 05-14", "20", "8万元"],
+        // ["09:23 05-14", "9", "2万元"],
+        // ["09:23 05-14", "2", "2万元"],
+        // ["09:23 05-14", "4", "5万元"],
+        // ["09:23 05-14", "6", "8万元"],
       ],
     };
   },
+  props: ["detail"],
   components: {
     VueSeamlessScroll,
   },
@@ -45,6 +47,26 @@ export default {
       };
     },
   },
+  methods: {
+    getList() {
+      getLshz({
+        pageNum: 1,
+        pageSize: 100,
+        jzid: this.detail.id,
+      }).then((res) => {
+        const list = [];
+        if (res.data.rows) {
+          res.data.rows.forEach(p => {
+            list.push([p.zqsj, p.rysws, p.zjccss + '万元'])
+          })
+        }
+        this.list = list;
+      });
+    },
+  },
+  created() {
+    this.getList();
+  }
 };
 </script>
 

app/src/views/Detail/components/MaintenanceSupervision.vue

@@ -81,7 +81,7 @@
         <span class="person">现场检查人</span>
         <span class="result">维保结果</span>
       </div>
-      <VueSeamlessScroll :data="list4" :class-option="classOption" class="warp">
+      <!-- <VueSeamlessScroll :data="list4" :class-option="classOption" class="warp"> -->
         <ul class="item">
           <li class="row" v-for="(item, index) in list4" :key="index">
             <span class="time">{{ item[0] }}</span>
@@ -95,56 +95,57 @@
             >
           </li>
         </ul>
-      </VueSeamlessScroll>
+      <!-- </VueSeamlessScroll> -->
     </div>
   </div>
 </template>
 <script>
 import VueSeamlessScroll from "vue-seamless-scroll";
-
+import { getZcqk, getJdjc, getWgpc, getWbqk } from "@/api/iot.js";
 export default {
   name: "MaintenanceSupervision",
+  props: ["detail"],
   data() {
     return {
       list1: [
-        ["09:23 05-14", "张三", "合格"],
-        ["09:23 05-14", "王小强", "不合格"],
-        ["09:23 05-14", "张三", "合格"],
-        ["09:23 05-14", "王小强", "不合格"],
-        ["09:23 05-14", "张三", "合格"],
-        ["09:23 05-14", "张三", "合格"],
-        ["09:23 05-14", "王小强", "不合格"],
-        ["09:23 05-14", "王小强", "不合格"],
+        // ["09:23 05-14", "张三", "合格"],
+        // ["09:23 05-14", "王小强", "不合格"],
+        // ["09:23 05-14", "张三", "合格"],
+        // ["09:23 05-14", "王小强", "不合格"],
+        // ["09:23 05-14", "张三", "合格"],
+        // ["09:23 05-14", "张三", "合格"],
+        // ["09:23 05-14", "王小强", "不合格"],
+        // ["09:23 05-14", "王小强", "不合格"],
       ],
       list2: [
-        ["09:23 05-14", "沙坪坝支队", "合格"],
-        ["09:23 05-14", "两江支队", "不合格"],
-        ["09:23 05-14", "城口大队", "合格"],
-        ["09:23 05-14", "永川支队", "不合格"],
-        ["09:23 05-14", "城口大队", "合格"],
-        ["09:23 05-14", "永川支队", "合格"],
-        ["09:23 05-14", "永川支队", "不合格"],
-        ["09:23 05-14", "永川支队", "不合格"],
+        // ["09:23 05-14", "沙坪坝支队", "合格"],
+        // ["09:23 05-14", "两江支队", "不合格"],
+        // ["09:23 05-14", "城口大队", "合格"],
+        // ["09:23 05-14", "永川支队", "不合格"],
+        // ["09:23 05-14", "城口大队", "合格"],
+        // ["09:23 05-14", "永川支队", "合格"],
+        // ["09:23 05-14", "永川支队", "不合格"],
+        // ["09:23 05-14", "永川支队", "不合格"],
       ],
       list3: [
-        ["09:23 05-14", "张三", "是"],
-        ["09:23 05-14", "王小强", "否"],
-        ["09:23 05-14", "张三", "是"],
-        ["09:23 05-14", "王小强", "否"],
-        ["09:23 05-14", "张三", "是"],
-        ["09:23 05-14", "张三", "是"],
-        ["09:23 05-14", "王小强", "否"],
-        ["09:23 05-14", "王小强", "否"],
+        // ["09:23 05-14", "张三", "是"],
+        // ["09:23 05-14", "王小强", "否"],
+        // ["09:23 05-14", "张三", "是"],
+        // ["09:23 05-14", "王小强", "否"],
+        // ["09:23 05-14", "张三", "是"],
+        // ["09:23 05-14", "张三", "是"],
+        // ["09:23 05-14", "王小强", "否"],
+        // ["09:23 05-14", "王小强", "否"],
       ],
       list4: [
-        ["09:23 05-14", "张三", "合格"],
-        ["09:23 05-14", "王小强", "不合格"],
-        ["09:23 05-14", "张三", "合格"],
-        ["09:23 05-14", "王小强", "不合格"],
-        ["09:23 05-14", "张三", "合格"],
-        ["09:23 05-14", "张三", "合格"],
-        ["09:23 05-14", "王小强", "不合格"],
-        ["09:23 05-14", "王小强", "不合格"],
+        // ["09:23 05-14", "张三", "合格"],
+        // ["09:23 05-14", "王小强", "不合格"],
+        // ["09:23 05-14", "张三", "合格"],
+        // ["09:23 05-14", "王小强", "不合格"],
+        // ["09:23 05-14", "张三", "合格"],
+        // ["09:23 05-14", "张三", "合格"],
+        // ["09:23 05-14", "王小强", "不合格"],
+        // ["09:23 05-14", "王小强", "不合格"],
       ],
       checked: 0,
     };
@@ -170,8 +171,94 @@ export default {
         不合格: "#df575b",
         是: "#23f59d",
         否: "#df575b",
+        未检: "#df575b",
+        已检查: "#23f59d",
       }[text];
     },
+    getList() {
+      const param = {
+        pageNum: 1,
+        pageSize: 100,
+        jzid: this.detail.id,
+      };
+
+      // 自查情况
+      getZcqk(param).then((res) => {
+        const list = [];
+        if (res.data.rows) {
+          res.data.rows.forEach((p) => {
+            let status = "";
+            if (p.taskFlag === 0) {
+              status = "未检";
+            } else if (p.taskFlag === 1) {
+              status = "不合格";
+            } else if (p.taskFlag === 2) {
+              status = "合格";
+            }
+            list.push([p.finishTime, p.userCode, status]);
+          });
+        }
+        this.list1 = list;
+      });
+
+      // 监督检查
+      getJdjc(param).then((res) => {
+        const list = [];
+        if (res.data.rows) {
+          res.data.rows.forEach((p) => {
+            list.push([p.finishTime, p.bjcdwmc, p.jcjg]);
+          });
+        }
+        this.list2 = list;
+      });
+
+      // 网格排查
+      getWgpc(param).then((res) => {
+        console.log(res);
+        const list = [];
+        if (res.data.rows) {
+          res.data.rows.forEach((p) => {
+            const exist = list.find(
+              (k) => k.djsj === p.djsj && k.fxyhr === p.fxyhr
+            );
+            if (exist) {
+              exist.sl = exist.sl + 1;
+            } else {
+              list.push({
+                djsj: p.djsj,
+                fxyhr: p.fxyhr,
+                sl: 1,
+              });
+            }
+          });
+        }
+        console.log(list);
+        if (list && list.length > 0) {
+          const list3 = [];
+          list.forEach((p) => {
+            list3.push([p.djsj, p.fxyhr, p.sl]);
+          });
+          // console.log(this.list3);
+          this.list3 = list3;
+        }
+      });
+
+      // 维保情况
+      getWbqk(param).then((res) => {
+        console.log(res);
+        const list = [];
+        if (res.data.rows) {
+          res.data.rows.forEach((p) => {
+            list.push([p.wbsj, p.xcjcr, p.wbjg]);
+          });
+        }
+
+        this.list4 = list;
+      });
+    },
+  },
+  created() {
+    this.getList();
   },
 };
 </script>

app/src/views/Detail/components/VideoInfo.vue

@@ -1,14 +1,21 @@
 <template>
   <div class="video-list">
     <!-- 视频 -->
-    <div>
-      <img src="../../../assets/images/Group 1321314647.png" alt="" />
+    <div v-if="caremaList" class="videos">
+      <!-- <img src="../../../assets/images/Group 1321314647.png" alt="" />
       <img src="../../../assets/images/Group 1321314649.png" alt="" />
       <img src="../../../assets/images/Group 1321314650.png" alt="" />
-      <img src="../../../assets/images/Group 1321314651.png" alt="" />
+      <img src="../../../assets/images/Group 1321314651.png" alt="" /> -->
+      <template v-for="(item, i) in caremaList">
+        <div class="video" :key="i" v-if="i < 4">
+          <Camera :id="item.sbbm" :byList="caremaList" />
+        </div>
+      </template>
+
+      <!-- <Camera :id="item.sbbm" v-for="(item, i) in caremaList" :key="i" /> -->
     </div>
-    <Monitor3D ref="monitor" />
-    <div>
+    <Monitor3D ref="monitor" :data="pieData" v-if="pieData" />
+    <div v-if="pieData">
       <div class="info">
         <div class="bg-num" @click="clickItem(1)">
           <div class="line-box">
@@ -25,11 +32,11 @@
             <div class="dis-online">
               <div>
                 <span class="online"></span>
-                <span>1234个</span>
+                <span>{{ pieData.smtd.zx }}个</span>
               </div>
               <div>
                 <span class="off-line"> </span>
-                <span>1234个</span>
+                <span>{{ pieData.smtd.bj }}个</span>
               </div>
             </div>
           </div>
@@ -50,11 +57,11 @@
             <div class="dis-online">
               <div>
                 <span class="online"></span>
-                <span>1234个</span>
+                <span>{{ pieData.dqhz.zx }}个</span>
               </div>
               <div>
                 <span class="off-line"> </span>
-                <span>1234个</span>
+                <span>{{ pieData.dqhz.bj }}个</span>
               </div>
             </div>
           </div>
@@ -75,11 +82,11 @@
             <div class="dis-online">
               <div>
                 <span class="online"></span>
-                <span>1234个</span>
+                <span>{{ pieData.sy.zx }}个</span>
               </div>
               <div>
                 <span class="off-line"> </span>
-                <span>1234个</span>
+                <span>{{ pieData.sy.bj }}个</span>
               </div>
             </div>
           </div>
@@ -102,11 +109,11 @@
             <div class="dis-online">
               <div>
                 <span class="online"></span>
-                <span>1234个</span>
+                <span>{{ pieData.hzbjzj.zx }}个</span>
               </div>
               <div>
                 <span class="off-line"> </span>
-                <span>1234个</span>
+                <span>{{ pieData.hzbjzj.bj }}个</span>
               </div>
             </div>
           </div>
@@ -127,11 +134,11 @@
             <div class="dis-online">
               <div>
                 <span class="online"></span>
-                <span>1234个</span>
+                <span>{{ pieData.xfkzs.zx }}个</span>
               </div>
               <div>
                 <span class="off-line"> </span>
-                <span>1234个</span>
+                <span>{{ pieData.xfkzs.bj }}个</span>
               </div>
             </div>
           </div>
@@ -143,8 +150,11 @@
 
 <script>
 import Monitor3D from "@/components/Monitor3D.vue";
+import { getDeviceList, getJrs } from "@/api/iot.js";
+import Camera from "@/components/Camera.vue";
+
 export default {
-  components: { Monitor3D },
+  components: { Monitor3D, Camera },
   data() {
     return {
       pieActive1: true,
@@ -152,14 +162,103 @@ export default {
       pieActive3: true,
       pieActive4: true,
       pieActive5: true,
-      ctx: ["生命通道监控点位", "电气火灾监测点位", "水压检测点位", '火灾报警主机监测点位', '消防监控室人员离岗检测点位'],
+      ctx: [
+        "生命通道监控点位",
+        "电气火灾监测点位",
+        "水压检测点位",
+        "火灾报警主机监测点位",
+        "消防监控室人员离岗检测点位",
+      ],
+      caremaList: [],
+      pieData: null,
     };
   },
+  props: ["detail"],
   methods: {
     clickItem(idx) {
       this[`pieActive${idx}`] = !this[`pieActive${idx}`];
       this.$refs.monitor.legendToggleSelect(this.ctx[idx - 1]);
     },
+    getCaremarList() {
+      getDeviceList({
+        jzid: this.detail.id,
+        pageNum: 1,
+        pageSize: 20,
+        zt: "在线",
+      }).then((res) => {
+        this.caremaList = res.data.rows;
+      });
+    },
+    getJrsList() {
+      getJrs({
+        pageNum: 1,
+        pageSize: 100,
+        jzid: this.detail.id,
+      }).then((res) => {
+        const pieData = {
+          dqhz: {
+            zs: null,
+            bj: null,
+            zx: null,
+          },
+          hzbjzj: {
+            zs: null,
+            bj: null,
+            zx: null,
+          },
+          smtd: {
+            zs: null,
+            bj: null,
+            zx: null,
+          },
+          sy: {
+            zs: null,
+            bj: null,
+            zx: null,
+          },
+          xfkzs: {
+            zs: null,
+            bj: null,
+            zx: null,
+          },
+        };
+        if (res.data.rows) {
+          res.data.rows.forEach((p) => {
+            // 电器火灾
+            pieData.dqhz.zs += p.dqhzzs || 0;
+            pieData.dqhz.zx += p.dqhzzxs || 0;
+            pieData.dqhz.bj += p.dqhzgjs || 0;
+
+            // 火灾报警主机
+            pieData.hzbjzj.zs += p.hzbjzjzs || 0;
+            pieData.hzbjzj.zx += p.hzbjzjzxs || 0;
+            pieData.hzbjzj.bj += p.hzbjzjgjs || 0;
+
+            // 生命通道
+            pieData.smtd.zs += p.smtdzs || 0;
+            pieData.smtd.zx += p.smtdzxs || 0;
+            pieData.smtd.bj += p.smtdgjs || 0;
+
+            // 水压
+            pieData.sy.zs += p.syzxs || 0;
+            pieData.sy.zx += p.syzs || 0;
+            pieData.sy.bj += p.sygjs || 0;
+
+            // 消防控制室
+            pieData.xfkzs.zs += p.xfkzszs || 0;
+            pieData.xfkzs.zx += p.xfkzszxs || 0;
+            pieData.xfkzs.bj += p.xfkzsgjs || 0;
+          });
+        }
+
+        this.pieData = pieData;
+        console.log(this.pieData);
+      });
+    },
+  },
+  created() {
+    this.getCaremarList();
+    this.getJrsList();
   },
 };
 </script>
@@ -190,7 +289,7 @@ export default {
     gap: 20px;
     margin-top: 12px;
   }
-  
+
   // 渐变
   .bg-num {
     width: 125px;
@@ -285,4 +384,14 @@ export default {
   padding: 10px 10px;
   font-size: 13px;
 }
+.videos {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 192px;
+  .video {
+    width: 208px;
+    height: 96px;
+  }
+}
 </style>

app/src/views/Detail/index.vue

@@ -28,23 +28,23 @@
           :headerType="2"
           style="margin-right: 8px"
         >
-          <historical-fire />
+          <historical-fire :detail="detail" v-if="detail" />
         </border-panel>
         <border-panel height="270px" width="468px" title="隐患" :headerType="2">
-          <hidden-danger />
+          <hidden-danger :detail="detail" v-if="detail" />
         </border-panel>
       </div>
     </div>
     <div>
       <border-panel height="521px" style="margin-bottom: 6px" title="智慧消防">
-        <VideoInfo />
+        <VideoInfo :detail="detail" v-if="detail" />
       </border-panel>
       <border-panel
         height="425px"
         style="margin-bottom: 6px"
         title="自查、监督、维保"
       >
-        <maintenance-supervision />
+        <maintenance-supervision :detail="detail" v-if="detail" />
       </border-panel>
     </div>
   </div>

app/src/views/Iot/components/IotVideo.vue

@@ -5,12 +5,10 @@
         <div class="v-one" v-if="getVideo(i)">
           <Camera :id="getVideo(i).sbbm" />
           <div class="txt">{{ getVideo(i).sbmc }}</div>
-          <div class="mask" @click="showVideo(getVideo(i).sbbm)"></div>
         </div>
         <div class="v-one" v-if="getVideo(i + 1)">
           <Camera :id="getVideo(i + 1).sbbm" />
           <div class="txt">{{ getVideo(i).sbmc }}</div>
-          <div class="mask" @click="showVideo(getVideo(i + 1).sbbm)"></div>
         </div>
       </el-carousel-item>
     </el-carousel>
@@ -36,11 +34,6 @@ export default {
         return this.list[no];
       }
       return null;
-    },
-    showVideo(id) {
-      console.log(id);
-
-      // 弹窗显示视频播放组件
     }
   },
   created() {