监控视频、处置网格对接

src/components/mixins/map-data1.js

@@ -112,37 +112,39 @@ export default {
         anbao(status, id, query) {
             var that = this
             var color = [
-                // "#2c6395",
-                // "#1b6cb6",
-                // "#40a4ff",
-                // "#8ac7ff",
-                // "#b1cce5",
-                // "#a03523",
-                // "#d7le00",
-                // "#ffa192",
-                // "#dba197",
-                // "#009081",
-                // "#00ae9c",
-                // "#50fed",
-                // "#4d6700",
-                // "#729900",
-                // "#729900",
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
-                "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
-                "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                "#2c6395",
+                "#1b6cb6",
+                "#40a4ff",
+                "#8ac7ff",
+                "#b1cce5",
+
+                "#a03523",
+                "#d7le00",
+                "#ffa192",
+                "#dba197",
+
+                "#009081",
+                "#00ae9c",
+                "#50fed",
+
+                "#4d6700",
+                "#729900",
+                // "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                // "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                // "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                // "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                // "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                // "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                // "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                // "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                // "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                // "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                // "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                // "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                // "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                // "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
+                // "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1",
+                // "#5081c5", "#c3a102", "#d17100", , "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100",
 
 
             ];
@@ -224,10 +226,26 @@ export default {
                                         },
                                         click: regionLocateCallBack,
                                         style: {
-                                            color: color[index],
+                                            color: name[index] == "华漕镇处置网格二（纪王西片区）" ? "#2c6395" : 
+                                            name[index] == "华漕镇处置网格一（纪王东片区）" ? "#1b6cb6" : 
+                                            name[index] == "华漕镇处置网格四（诸翟北片区）" ? "#40a4ff" : 
+                                            name[index] == "华漕镇处置网格五（诸翟南片区）" ? "#8ac7ff" : 
+                                            name[index] == "华漕镇处置网格三（老华漕片区）" ? "#b1cce5" : 
+                                            name[index] == "新虹街道处置网格二（爱博）" ? "#a03523" : 
+                                            name[index] == "新虹街道处置网格三（华美）" ? "#d71e00" : 
+                                            name[index] == "新虹街道处置网格一（枢纽）" ? "#ffa192" : 
+                                            name[index] == "新虹街道处置网格四（航华）" ? "#dba197" : 
+                                            name[index] == "七宝镇处置网格一（七宝北片网格）" ? "#009081" : 
+                                            name[index] == "七宝镇处置网格二（七宝中片网格）" ? "#00ae9c" : 
+                                            name[index] == "七宝镇处置网格五（航华网格）" ? "#50ffed" : 
+                                            name[index] == "虹桥镇处置网格四（紫藤、红松区域）" ? "#b2ec0a" : 
+                                            name[index] == "虹桥镇处置网格二（虹梅区域）" ? "#b2ec4a" : "#729900",
                                             transparency: 0.6,
                                             outline: true,
                                             outlineColor: 'blue',
+                            
+                                            // "#4d6700",
+                                            // "#729900",
                                         }
 
                                     };
@@ -575,7 +593,13 @@ export default {
          */
         addMarker(lnglats, pageType, type) {
             console.log(lnglats, pageType, type)
-            window.jMap.Locate.clearLocate();
+            // if(pageType == "security-plan"){
+
+            // }else{
+                window.jMap.Locate.clearLocate();
+            // }
+            
+            let that = this
             let icon = "";
             let arr = []
             let arr1 = []
@@ -647,7 +671,7 @@ export default {
 
                                 type == "高风险" ? this.stores.sadianIcon.gfx : type == "较高风险" ? this.stores.sadianIcon.jgfx : type == "一般风险" ? this.stores.sadianIcon.ybfx : type == "低风险" ? this.stores.sadianIcon.dfx :
 
-                                type == "单位巡检" ? this.stores.sadianIcon.dwxj : type == "物联网设备" ? this.stores.sadianIcon.dwxj :
+                                type == "单位巡检" ? this.stores.sadianIcon.dwxj : type == "物联网设备" ? this.stores.sadianIcon.dwxj : type == "监控视频" ? this.stores.sadianIcon.ssjq :
 
 
                                 this.stores.sadianIcon.trsy,
@@ -972,28 +996,45 @@ export default {
                         }
                         //大型安保 、火灾数据分析
                         if (pageType == "security-plan") {
-                            let arrayList = [{
-                                title: ["案件详情", true],
-                                children: [
-                                    ["案件编号：", val.attrbutes.ajbh, 24],
-                                    ["案件描述：", val.attrbutes.bcxx, 24],
-                                    ["报警时间：", val.attrbutes.tzsj, 24],
-                                    ["案件类型：", val.attrbutes.ajlx, 24],
-                                    ["警情类别：", type, 24],
-                                    ["警情等级：", val.attrbutes.ajdj, 24],
-                                    ["调动车辆：", val.attrbutes.cdcl, 24],
-                                    ["处置对象：", val.attrbutes.czdx, 24],
-                                    ["主责中队：", val.attrbutes.zhongdui, 24],
-                                    ["案件状态：", val.attrbutes.ajzt, 24],
-                                    ["到场时间：", val.attrbutes.cssj, 24],
-                                    ["控制时间：", val.attrbutes.kzsj, 24],
-                                    ["熄灭时间：", val.attrbutes.xmsj, 24],
-                                    ["返队时间：", val.attrbutes.fdsj, 24],
-                                    ["所属街道：", val.attrbutes.streettown, 24],
-                                ],
-                            }, ];
-                            if (val._attrbutes.type != "国家会展中心") {
-                                this.popup(val._attrbutes, arrayList, true)
+
+                            // let arrayList = [{
+                            //     title: ["案件详情", true],
+                            //     children: [
+                            //         ["案件编号：", val.attrbutes.ajbh, 24],
+                            //         ["案件描述：", val.attrbutes.bcxx, 24],
+                            //         ["报警时间：", val.attrbutes.tzsj, 24],
+                            //         ["案件类型：", val.attrbutes.ajlx, 24],
+                            //         ["警情类别：", type, 24],
+                            //         ["警情等级：", val.attrbutes.ajdj, 24],
+                            //         ["调动车辆：", val.attrbutes.cdcl, 24],
+                            //         ["处置对象：", val.attrbutes.czdx, 24],
+                            //         ["主责中队：", val.attrbutes.zhongdui, 24],
+                            //         ["案件状态：", val.attrbutes.ajzt, 24],
+                            //         ["到场时间：", val.attrbutes.cssj, 24],
+                            //         ["控制时间：", val.attrbutes.kzsj, 24],
+                            //         ["熄灭时间：", val.attrbutes.xmsj, 24],
+                            //         ["返队时间：", val.attrbutes.fdsj, 24],
+                            //         ["所属街道：", val.attrbutes.streettown, 24],
+                            //     ],
+                            // }, ];
+                            // if (val._attrbutes.type != "国家会展中心") {
+                            //     this.popup(val._attrbutes, arrayList, true)
+                            // }
+                            if(type == "监控视频"){
+                                  let arrayList = [{
+                                    title: ["监控视频", true],
+                                    children: [
+                                        ["监控名称：", val.attrbutes.name, 24],
+                                        ["监控地址：", val.attrbutes.installPlace, 24],
+                                    ],
+                                    url:val.attrbutes.viewUrl,
+                                    id: val.attrbutes.id
+                                }, ];
+                                that.stores.jkspChange(arrayList);
+                                // this.popup(val._attrbutes, arrayList, true)
+                                // if (val._attrbutes.type != "国家会展中心") {
+                                //     this.popup(val._attrbutes, arrayList, true)
+                                // }
                             }
                         }
                         //火灾数据分析

src/http/axios.js

@@ -24,10 +24,13 @@ axios.interceptors.response.use(
     // 请求成功
     // 1. 根据自己项目需求定制自己的拦截
     // 2. 然后返回数据
+    // console.log(response)
     if (response.data.status === "SUCCESS" || response.data.showapi_res_code === 0) {
       return response.data;
     } else if (response.data.status === 200) {
       return response.data.result;
+    } else if (response.status === 200 || response.code == 200) {
+      return response.data;
     } else {
       ElMessage({
         showClose: true,

src/store/modules/public.js

@@ -196,10 +196,16 @@ const useStore = defineStore("public", {
         xfzfdt: {}, //执法记录仪
         arrayList: [], //撒点弹框数据存储,
         gridData: {},
+        jkspData:{},//监控视频数据
     }),
     actions: {
         gridDataChange(data) {
             this.gridData = data
+            console.log(123,data)
+        },
+        jkspChange(data){
+            this.jkspData = data[0]
+            console.log(234,this.jkspData)
         },
 
         /**

src/views/head.vue

@@ -77,17 +77,32 @@ const defaultTime = ref([
     new Date(2000, 1, 1, 0, 0, 0),
     new Date(2000, 2, 1, 23, 59, 59),
 ]); // '00:00:00', '23:59:59'
-const btnList = ref([
-    { name: "城市消防体征", router: "/fire-signs" },
-    { name: "企业自主管理", router: "/self-management" },
-
-    { name: "消防执法动态", router: "/enforcement-dynamic" },
-    { name: "火灾数据分析", router: "/fire-data-analysis" },
-    { name: "消防救援站点", router: "/rescue-station" },
-    { name: "消防水源情况", router: "/water-sources" },
-    { name: "警情综合处置", router: "/comprehensive-disposal" },
-    { name: "大型安保预案", router: "/security-plan" },
-]);
+const btnList = ref([])
+console.log(window.location.href.split("#"))
+if(
+    window.location.href.indexOf("fire-signs") || 
+    window.location.href.indexOf("self-management") || 
+    window.location.href.indexOf("enforcement-dynamic") || 
+    window.location.href.indexOf("fire-data-analysis") || 
+    window.location.href.indexOf("rescue-station") || 
+    window.location.href.indexOf("water-sources") || 
+    window.location.href.indexOf("comprehensive-disposal") || 
+    window.location.href.indexOf("security-plan") || 
+    window.location.href.split("#")[1] == "/" 
+    ){
+         btnList.value = [
+            { name: "城市消防体征", router: "/fire-signs" },
+            { name: "企业自主管理", router: "/self-management" },
+            { name: "消防执法动态", router: "/enforcement-dynamic" },
+            { name: "火灾数据分析", router: "/fire-data-analysis" },
+            { name: "消防救援站点", router: "/rescue-station" },
+            { name: "消防水源情况", router: "/water-sources" },
+            { name: "警情综合处置", router: "/comprehensive-disposal" },
+            { name: "大型安保预案", router: "/security-plan" },
+        ]
+    }else{
+        btnList.value = []
+    }
 
 valueTime.value = public_store.$state.timeList.map((val) => {
     return val;

src/views/security-plan.vue

@@ -28,7 +28,7 @@
                                             }"
                                         >
                                             <CountTo :startVal="0" :endVal="item.value || 0" :duration="3000" v-if="!isNaN(item.value)">{{ item.value || 0 }}</CountTo>
-                                            <span v-if="isNaN(item.value)" style="fontsize: 0.2rem">{{ item.value || 0 }}</span>
+                                            <span v-if="isNaN(item.value)" style="fontSize: 0.2rem !important">{{ item.value || 0 }}</span>
                                         </Strong>
                                         {{ item.unit }}
                                     </span>
@@ -185,18 +185,19 @@
                                 <img :src="stores.sadianIcon.xfc" alt="" />
                                 <span>车辆</span>
                             </div> -->
-                            <div @click="checkboxChange(1)" :class="checkedArray.checkedData[0] == 1 ? 'checkTypeSelect' : ''">
+                            <!-- <div @click="checkboxChange(1)" :class="checkedArray.checkedData[0] == 1 ? 'checkTypeSelect' : ''">
                                 <img :src="stores.sadianIcon.lsjq" alt="" />
                                 <span>历史警情</span>
                             </div>
                             <div @click="checkboxChange(2)" :class="checkedArray.checkedData[0] == 2 ? 'checkTypeSelect' : ''">
                                 <img :src="stores.sadianIcon.lshz" alt="" />
                                 <span>历史火灾</span>
-                            </div>
+                            </div> -->
                             <!-- <div @click="checkboxChange(3)" :class="checkedArray.checkedData[0] == 3 ? 'checkTypeSelect' : ''">
                                 <img :src="stores.sadianIcon.zddw" alt="" />
                                 <span>重点单位</span>
                             </div> -->
+
                             <div
                                 :class="
                                     checkedArray.checkedData[0] == 4
@@ -262,6 +263,10 @@
                                 <img :src="stores.sadianIcon.zddw" alt="" />
                                 <span>小网格</span>
                             </div>
+                            <div @click="checkboxChange(17)" :class="checkedArray.checkedData[0] == 2 ? 'checkTypeSelect' : ''">
+                                <img :src="stores.sadianIcon.ssjq" alt="" />
+                                <span>监控视频</span>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -269,7 +274,173 @@
         </transition>
         <transition name="el-fade-in-linear">
             <el-col class="rightBox" v-show="stroes.$state.rightBtn">
-                <div class="rightTop">
+                 <div class="rightTop3">
+                        <h4 style="display: flex">处置网格</h4>
+                    <div class="rightTopContent">
+                        <el-row v-if="gridStatisticsStatus">
+                            <el-col :span="12" @click="gridStatistics(1)">
+                                <div>
+                                    <div class="left">
+                                        <img src="@a/img/sadian/sbs.png" alt="" />
+                                        <div>上报数</div>
+                                    </div>
+                                    <el-row class="right">
+                                        <el-col :span="24" style="color: #ff0000">{{ gridStatisticsNum.total || 0 }}</el-col>
+                                    </el-row>
+                                </div>
+                            </el-col>
+                            <el-col :span="12" @click="gridStatistics(3)">  
+                                <div>
+                                    <div class="left">
+                                        <img src="@a/img/sadian/yhs.png" alt="" />
+                                        <div>隐患数</div>
+                                    </div>
+                                    <el-row class="right">
+                                        <el-col :span="24" style="color: #ff5a00">{{ gridStatisticsNum.yinhuan || 0 }}</el-col>
+                                    </el-row>
+                                </div>
+                            </el-col>
+                            <el-col :span="12" @click="gridStatistics(2)">
+                                <div>
+                                    <div class="left">
+                                        <img src="@a/img/sadian/czs.png" alt="" />
+                                        <div>处置数</div>
+                                    </div>
+                                    <el-row class="right">
+                                        <el-col :span="24" style="color: #ffd800">{{ gridStatisticsNum.over || 0 }}</el-col>
+                                    </el-row>
+                                </div>
+                            </el-col>
+                            <el-col :span="12">
+                                <div>
+                                    <div class="left">
+                                        <img src="@a/img/sadian/czl.png" alt="" />
+                                        <div>处置率</div>
+                                    </div>
+                                    <el-row class="right">
+                                        <el-col :span="24" style="color: #0084ff">{{  gridStatisticsNum.rate || 0  }}%</el-col>
+                                    </el-row>
+                                </div>
+                            </el-col>
+                        </el-row>
+                        <div @click="gridStatisticsGoBack" class="return" v-if="!gridStatisticsStatus">
+                            <div class="returnText">返回</div>
+                        </div>
+                        <el-row v-if="!gridStatisticsStatus">
+                            <el-table
+                                :data="gridStatisticsTableType"
+                                class="transparentTableRow"
+                                height="100%"
+                                :empty-text="dataNo3"
+                                ref="reportTable"
+                                @mouseenter="autoScroll1(true)"
+                                @mouseleave="autoScroll1()"
+                            >
+                                <el-table-column v-for="item in gridStatisticsHeader" show-overflow-tooltip :key="item.prop" :prop="item.prop" align="left" min-width="20" :label="item.name">
+                                    <template v-if="item.prop =='案件状态' || item.prop =='街镇' || item.prop =='自治网格' || item.prop =='案件子类' || item.prop =='发现时间'" #default="scope">
+                                        <el-tooltip placement="left"  >
+                                            <template #content >
+                                                <div class="tableTooltip" ref="ff">
+                                                <div class="tableTitle">
+                                                    <div>案件详情</div>
+                                                </div>
+                                                <img src="~@a/img/icon/close.png" alt="" class="close" @click="closeIsTooltip"  />
+                                                <el-row class="tableContent">
+                                                    <el-col :span="20"  v-if="scope.row['案件状态']">案件状态：{{scope.row["案件状态"]}}</el-col>
+                                                    <el-col :span="24"  v-if="scope.row['任务号'] ">任务号：{{scope.row["任务号"] }}</el-col>
+                                                    <el-col :span="24"  v-if="scope.row['发现时间']">发现时间：{{scope.row["发现时间"]}}</el-col>
+                                                    <el-col :span="24"  v-if="scope.row['案件来源']">案件来源：{{scope.row["案件来源"]}}</el-col>
+                                                    <el-col :span="24"  v-if="scope.row['案件属性']">案件属性：{{scope.row["案件属性"]}}</el-col>
+                                                    <el-col :span="24"  v-if="scope.row['街镇']">街镇：{{scope.row["街镇"]}}</el-col>
+                                                    <el-col :span="12"  v-if="scope.row['自治网格类型']">自治网格类型：{{scope.row["自治网格类型"]}}</el-col>
+                                                    <el-col :span="24"  v-if="scope.row['责任块']">责任块：{{scope.row["责任块"]}}</el-col>
+                                                    <el-col :span="24"  v-if="scope.row['案件大类']">案件大类：{{scope.row["案件大类"]}}</el-col>
+                                                    
+                                                
+                                                    <el-col :span="24"  v-if="scope.row['案件小类']">案件小类：{{scope.row["案件小类"]}}</el-col>
+                                                   
+                                                    <el-col :span="24"  v-if="scope.row['自治网格']">自治网格：{{scope.row["自治网格"]}}</el-col>
+                                                    
+                                                    
+                                                    
+                                                    
+                                                    <el-col :span="24"  v-if="scope.row['处置网格']">处置网格：{{scope.row["处置网格"]}}</el-col>
+                                                   
+
+                                                    <el-col :span="24"  v-if="scope.row['发生地址']">发生地址：{{scope.row["发生地址"]}}</el-col>
+                                                    <el-col :span="24"  v-if="scope.row['诉求联系人']">诉求联系人：{{scope.row["诉求联系人"]}}</el-col>
+                                                    <el-col :span="24"  v-if="scope.row['流转方向']">流转方向：{{scope.row["流转方向"]}}</el-col>
+                                                    <el-col :span="24"  v-if="scope.row['派遣时间'] ">派遣时间：{{scope.row["派遣时间"] }}</el-col>
+                                                    <el-col :span="24"  v-if="scope.row['主责部门']">主责部门：{{scope.row["主责部门"] }}</el-col>
+                                                    <el-col :span="24"  v-if="scope.row['三级主责部门']">三级主责部门：{{scope.row["三级主责部门"] }}</el-col>
+                                                    <el-col :span="24"  v-if="scope.row['处理时间']">处理时间：{{scope.row["处理时间"] }}</el-col>
+                                                </el-row>
+                                                </div>
+                                            </template>
+                                            <template>
+                                                <div class="name-wrapper" >{{ scope.row[item.prop] }}</div>
+                                            </template>
+                                        </el-tooltip>
+                                    </template>
+                                        <template v-else #default="scope">
+                                        {{  scope.row[item.prop] }}
+                                    </template>
+                                </el-table-column>
+                            </el-table>
+                        </el-row>
+                    </div>
+                    <div class="leftTopContent" v-if="tabsArea == 'jc'">
+                        <el-row>
+                            <el-col :span="12">
+                                <div>
+                                    <div class="title">
+                                        <div>检查单位数（家次）</div>
+                                    </div>
+                                    <div class="content">
+                                        <span>6276</span>
+                                        <span>同比</span>
+                                        <span style="color: #fe0505">+29.48%</span>
+                                    </div>
+                                </div>
+                            </el-col>
+                            <el-col :span="12">
+                                <div>
+                                    <div class="title">
+                                        <div>发现隐患数（处）</div>
+                                    </div>
+                                    <div class="content">
+                                        <span>1340</span>
+                                        <span>同比</span>
+                                        <span style="color: #fe0505">+14.18%</span>
+                                    </div>
+                                </div>
+                            </el-col>
+                            <el-col :span="12">
+                                <div>
+                                    <div class="title">
+                                        <div>督改隐患数（处）</div>
+                                    </div>
+                                    <div class="content">
+                                        <span>1090</span>
+                                        <span>同比</span>
+                                        <span style="color: #fe0505">+7.34%</span>
+                                    </div>
+                                </div>
+                            </el-col>
+                            <el-col :span="12">
+                                <div style="width: 80%">
+                                    <div class="title">
+                                        <div>签约承诺书（份）</div>
+                                    </div>
+                                    <div class="content">
+                                        <span>5410</span>
+                                    </div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </div>
+                <!-- <div class="rightTop">
                         <h4 style="display: flex">疏导区社会面风险评估情况</h4>
                         <div style="display: flex;float:right;margin-top:-36px;">
                             <el-button size="mini" @click="tabsArea = 'fx'" :class="{ btnClick: tabsArea == 'fx' }"> 风险情况 </el-button>
@@ -377,7 +548,7 @@
                             </el-col>
                         </el-row>
                     </div>
-                </div>
+                </div> -->
                 <div class="rightTop">
                     <!-- <h4>安保推送情况</h4>
                     <el-row class="rightTop2">
@@ -464,7 +635,7 @@
         </transition>
 
         <!-- 普通弹框 -->
-        <div class="tableTooltipwt sadianTankang" v-show="stores.$state.arrayList.length > 0">
+        <!-- <div class="tableTooltipwt sadianTankang" v-show="stores.$state.arrayList.length > 0 && !jkspStatus">
             <img src="~@a/img/icon/close.png" alt="" class="close" @click="close" />
             <el-row class="tableContent">
                 <el-col class="mk" v-for="li in stores.$state.arrayList" :key="li" v-show="li.title[1]">
@@ -480,6 +651,26 @@
                     </el-row>
                 </el-col>
             </el-row>
+        </div> -->
+         <!-- 普通弹框 -->
+         <div class="tableTooltipwt sadianTankang " v-if="jkspStatus">
+            <img src="~@a/img/icon/close.png" alt="" class="close" @click="closeJkspStatus" />
+            <el-row class="tableContent">
+                <el-col class="mk">
+                    <p style="font-size:0.2rem">监控视频</p>
+                    <el-row>
+                        <el-col v-for="ch in stores.$state.jkspData.children" :key="ch" :span="24" >
+                            <span class="color1">{{ ch[0] }}</span>
+                            <span class="color2">{{ ch[1] }}</span>
+                        </el-col>
+                    </el-row>
+                </el-col>
+                <div class="video">
+                    <video  :id="Message.videoId" preload="true" autoplay="autoplay"
+                    class="hlsVideo monitor-height" ref="hlsVideo" style="width: 100%" controls muted></video>
+                </div>
+                
+            </el-row>
         </div>
     </el-row>
 </template>
@@ -493,11 +684,68 @@ import gauge from "@c/gauge/index6";
 import category from "@c/category/index22";
 import unitBox from "@c/unitBox/index";
 import CountTo from "@/components/count-to/index.js";
+import Hls from "hls.js";
 export default {
     mixins: [linstener, map],
     components: { category, gauge, CountTo,unitBox },
     data() {
         return {
+            gridStatisticsNum:{
+                total:0,
+                over:0,
+                rate:0,
+                yinhuan:0,
+            },
+            hls: "",
+            Message: {
+                "name": undefined,
+                "videoId": undefined,
+                "videoUrl": false,
+            },
+            jkspStatus:false,//监控视频弹框状态
+            gridStatisticsStatus:true,//处置网格统计状态
+            dataNo3:"加载中...",
+            gridStatisticsTable:[
+                // {
+                //     "案件状态": "待申请核查",
+                //     "任务号": "2310M2253844",
+                //     "发现时间": "2023-10-13 09:18",
+                //     "案件来源": "12345上报",
+                //     "案件属性": "部件",
+                //     "案件大类": "其他设施",
+                //     "案件小类": "充电站（桩）",
+                //     "案件子类": "其他充电桩相关问题",
+                //     "街镇": "华漕镇",
+                //     "自治网格": "诸新路居委会",
+                //     "自治网格类型": "居委",
+                //     "处置网格": "华漕镇处置网格五（诸翟南片区）",
+                //     "责任块": "九方家园",
+                //     "发生地址": "闵行区华漕镇保乐路168弄九方家园",
+                //     "诉求联系人": "臧婷婷",
+                //     "流转方向": "平台流转",
+                //     "派遣时间": "2023-10-13 09:20",
+                //     "主责部门": "华漕镇",
+                //     "三级主责部门": "诸新路居委会",
+                //     "处理时间": null,
+                //     "处理备注": null,
+                //     "结案时间": null,
+                //     "结案评判": null,
+                //     "结案意见": null,
+                //     "X坐标": -17369.89850242,
+                //     "Y坐标": -2808.9159114,
+                //     "问题描述": "市民来电反映:其是上述地址小区居民，要申请安装充电站，物业不肯给其敲章，市民为此不满，故来来电投诉上述小区物业。"
+                // }
+            ],//处置网格table数据
+            gridStatisticsTableType:[],
+            gridStatisticsHeader:[
+                { prop: "发现时间", name: "发现时间" },
+                { prop: "街镇", name: "街镇" },
+                { prop: "自治网格", name: "自治网格" },
+                { prop: "案件子类", name: "案件子类" },
+                { prop: "案件状态", name: "案件状态" },
+                
+            ],//处置网格header
+
         value:'1',
         options: [
         {
@@ -610,6 +858,8 @@ export default {
                     { value: 4, label: "消防站" },
                     { value: 15, label: "中网格" },
                     { value: 16, label: "小网格" },
+                    { value: 17, label: "监控视频" },
+                    
                 ],
             }, //类型筛选
             checkedSelectValue: "40",
@@ -886,6 +1136,8 @@ export default {
         };
     },
     mounted() {
+        this.gridStatisticsData()//处置网格数据
+        this.surveillance()//监控视频
         this.grid(15);
         setTimeout(() => {
             this.autoScroll();
@@ -901,6 +1153,156 @@ export default {
         beforeDestroy() {
             this.autoScroll(true);
         },
+        closeJkspStatus(){
+            this.jkspStatus = false
+            this.destroyHls()
+        },
+        //播放按钮
+        play() {
+            this.destroyHls()
+            this.loadVideoFn(this.Message.videoUrl)
+        },
+        destroyHls: function () {//关闭视频拉取
+            if (this.hls) {
+                this.$refs.hlsVideo.pause();
+                this.hls.destroy();
+                this.hls = null;
+            }
+        },
+        loadVideoFn(url) {//视频播放
+            setTimeout(() => {
+                if (Hls.isSupported()) {
+                    this.hls = new Hls();
+                    this.hls.loadSource(url);
+                    this.hls.attachMedia(this.$refs.hlsVideo);
+                    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                        // console.log("加载成功");
+                        this.$refs.hlsVideo.play();
+                    });
+
+                    this.hls.on(Hls.Events.ERROR, (event, data) => {
+                        // console.log(event, data);
+                        // 监听出错事件
+                        //console.log("加载失败");
+                    });
+                }
+            }, 1000)
+        },
+        /**
+         * 监控视频
+         */
+        surveillance(){
+            axios({
+                method: "get",
+                url: "http://32.1.7.96:8086/fireMajorSecurityProcess/selectSecurityViewUrl",
+                params:{
+                    "pageNum":"1",
+                    "pageSize":"500",
+                }
+            }).then((res) => {
+                this.sadian(res.data.data, "security-plan", "监控视频");
+            })
+        },
+        /**
+         * 网格统计状态切换
+         */
+        gridStatisticsGoBack(){
+            this.gridStatisticsStatus = true
+        },
+        /**
+         * 网格数据统计
+         */
+         gridStatisticsData(){
+            let formData = new FormData()
+            formData.append('grant_type', "client_credentials")
+            formData.append('client_id', "12016")
+            formData.append('client_secret', "956DD43944464DCeB262cED7d351AAA4")
+            formData.append('scope', "api.read")
+            axios({
+                headers: {
+                'Content-Type': 'multipart/form-data'
+                },
+                method: "post",
+                url: "http://32.1.8.124:5001/connect/token",
+                data:formData
+            }).then((res) => {
+                axios({
+                        headers: {
+                            'Content-Type': 'multipart/form-data',
+                            "AppId": "12016",
+                            "ResourceId": "1884",
+                            "Authorization":'Bearer ' +  res.access_token
+                        },
+                        
+                    method: "get",
+                    url: "http://32.1.8.124:5002/api/data-share/1884/json",
+                    params:{
+                        "STARTTIME":dayjs().subtract(0, "day").format("YYYY-MM-DD"),
+                        "ENDTIME":dayjs().subtract(0, "day").format("YYYY-MM-DD"),
+                        "STREETCODE":"",
+                        "INFOTYPEID":"",
+                        "INFOBCCODE":"",
+                        "INFOSCCODE":"",
+                        "INFOZCCODE":"",
+                        // "ENDTIME":"2023-12-01",
+                    }
+                }).then((res2) => {
+                    console.table(res2.values)
+                    this.gridStatisticsTable.total = []
+                    this.gridStatisticsTable.over = []
+                    this.gridStatisticsTable.yinhuan = []
+                    this.gridStatisticsTable.total = res2.values
+                    this.gridStatisticsTableType = this.gridStatisticsTable.total
+                    this.gridStatisticsNum.total = res2.values.length
+                    let num = 0;
+                    let yinhuan = 0
+                    for(let i =0;i<res2.values.length;i++){
+                        if(res2.values[i]["案件状态"] == "已结案"){
+                            num ++
+                            this.gridStatisticsTable.over.push(res2.values[i])
+                        }
+                        if(res2.values[i]["案件子类"].indexOf("部件") > -1 || 
+                        res2.values[i]["案件子类"].indexOf("三违") > -1 || 
+                        res2.values[i]["案件子类"].indexOf("扰乱火灾") > -1 || 
+                        res2.values[i]["案件子类"].indexOf("焚烧") > -1 || 
+                        res2.values[i]["案件子类"].indexOf("森林火灾") > -1 ){
+                            
+                        }else{
+                            yinhuan ++ 
+                            this.gridStatisticsTable.yinhuan.push(res2.values[i])
+                        }
+
+                    }
+                    setTimeout(()=>{
+                        this.gridStatisticsNum.over = num
+                        this.gridStatisticsNum.yinhuan = yinhuan
+                        if(num){
+                            this.gridStatisticsNum.rate = ((num / this.gridStatisticsNum.total) * 100).toFixed(2)
+                        }else{
+                            this.gridStatisticsNum.rate = 0
+                        }
+                    },50)
+                })
+            })
+         },
+        /**
+         * 网格统计
+         * @param {} id 1上报数，2隐患数，3处置数
+         */
+        gridStatistics(id){
+            this.gridStatisticsStatus = false 
+            if(id == 1){
+                this.gridStatisticsTableType =  this.gridStatisticsTable.total  
+            }
+            if(id == 2){
+                this.gridStatisticsTableType =  this.gridStatisticsTable.over  
+            }
+            if(id == 3){
+                this.gridStatisticsTableType =  this.gridStatisticsTable.yinhuan  
+            }
+            
+        },
+
         /**
          * 在线视频
          */
@@ -933,7 +1335,6 @@ export default {
                                     "http://10.107.31.215:50080/dispatch-ms/#/conference/single_url?ipc_live=1&key=643e6591-a489-4648-ba35-c15c39c64022&gbids=" +
                                     data[i].gbid,
                             };
-                            console.log(1111,num.name,data[i].gbid)
                             arr.push(num);
                         }
                     }
@@ -1092,6 +1493,8 @@ export default {
                 this.gridStatus = id;
                 this.grid(16, null, null, 1);
                 this.anbao(1, 2);
+            } else if (id == 17) {
+                this.surveillance()
             } else {
                 this.sadianSelect(id);
             }
@@ -1521,7 +1924,6 @@ export default {
                     this.diversionArea = [];
                     if (res.data.length > 0) {
                         let data = res.data[0];
-                        console.log(111, data, type);
                         if (type == 1) {
                             //镇级
                             this.diversionArea[0] = {
@@ -1588,7 +1990,6 @@ export default {
                         }
                         if (type == 2) {
                             //片区
-                            console.log(11, data);
                             this.diversionArea[0] = {
                                 name: "",
                                 value: data.gridArea,
@@ -1683,6 +2084,7 @@ export default {
     },
     watch: {
         "stores.$state.gridData": function (newValue, oldValue) {
+            
             if (this.gridStatus == 15) {
                 this.grid(15, newValue.name, newValue.position);
             }
@@ -1690,11 +2092,32 @@ export default {
                 this.grid(16, newValue.name, newValue.position);
             }
         },
+        "stores.$state.jkspData": function (newValue, oldValue) {
+            this.jkspStatus = true
+            this.Message.name = newValue.children[0][1]
+            this.Message.videoId = newValue.id
+            this.Message.videoUrl = "http://videocdn.didano.com/school765class0channelId2761namedingdangm/playlist.m3u8"
+            this.play()
+        },
     },
+    // watch: {
+    //     "stores.$state.jkspData": function (newValue, oldValue) {
+    //         console.log(123,newValue,this.stores.$state.jkspData)
+    //         this.jkspStatus = true
+    //         console.log(this.jkspStatus)
+    //         this.Message.name = newValue.children[0][1]
+    //         this.Message.videoId = newValue.id
+    //         this.Message.videoUrl = "http://videocdn.didano.com/school765class0channelId2761namedingdangm/playlist.m3u8"
+    //         // this.Message.videoUrl = newValue.url
+            
+    //         this.play()
+    //     },
+    // },
 };
 </script>
 
 <style lang="scss" scoped>
+@import "@/assets/scss/color.scss";
 .contentBox {
     .leftBox {
         .leftTop {
@@ -1949,6 +2372,71 @@ export default {
                 }
             }
         }
+        .rightTop3 {
+            height: 30%;
+            max-height: 30%;
+
+            .rightTopContent {
+                width: 100%;
+                height: calc(100% - 0.4375rem);
+                display: flex;
+
+                > .el-row {
+                    > .el-col {
+                        display: flex;
+                        margin: auto 0;
+
+                        > div {
+                            display: flex;
+
+                            .left {
+                                width: 1.375rem;
+                                margin-right: 0.25rem;
+
+                                div {
+                                    text-align: center;
+                                    font-size: 0.175rem;
+                                    overflow: hidden !important;
+                                    white-space: nowrap !important;
+                                    text-overflow: ellipsis !important;
+                                }
+
+                                img {
+                                    width: 0.675rem;
+                                    height: 0.675rem;
+                                    display: flex;
+                                    margin: auto auto 0.0625rem auto;
+                                }
+                            }
+
+                            .right {
+                                overflow: hidden !important;
+                                white-space: nowrap !important;
+                                text-overflow: ellipsis !important;
+
+                                .el-col:nth-child(1) {
+                                    font-size: 0.3rem;
+                                    margin-top:14px;
+                                    vertical-align: bottom;
+                                }
+
+                                // .el-col:nth-child(2) {
+                                //     display: flex;
+                                //     margin: auto 0 0 0;
+                                //     font-size: 0.3rem;
+                                //     font-weight: bold;
+                                // }
+                            }
+                        }
+                    }
+                }
+            }
+            .return{
+                position: absolute;
+                top:20px;
+                right:20px;
+            }
+        }
         .leftTopContent {
             color: #ffffff;
             height: calc(100% - 0.4375rem);
@@ -2092,6 +2580,58 @@ export default {
         border: none;
         width:100%;
     }
+    .tableTooltipwt {
+        position: fixed;
+        top:120px;left:39%;
+        max-height:500px;
+        overflow-y: scroll;
+        background:none;
+        width:400px;
+        bottom:auto;
+         padding:10px 10px 5px 10px !important;
+          border-radius: 0.05rem;
+          border:1px solid rgba(115, 251, 253, 1);
+          box-shadow: inset 0 0 1px 0.0125rem rgba(115, 251, 253, 1);
+           background:rgba(0, 0, 0, 0.6);
+        z-index: 10000;
+  .close {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 10000;
+    display: block;
+  }
+  .tableContent {
+    p {
+      @include color_primary($color-primary1);
+      font-size: 0.2rem;
+    }
+
+    .el-col {
+      margin-top: 0.05rem;
+      line-height: 0.3rem;
+      text-overflow: ellipsis !important;
+      white-space: normal !important;
+      font-size: 0.18rem;
+    }
+    .mk {
+      margin-top: 0px;
+
+      .color1 {
+        @include color_primary($color-primary3);
+      }
+      .color2 {
+        @include color_primary($color-primary1);
+      }
+    }
+    .video{
+        width:100%;
+        margin:10px 0;
+    }
+  }
+}
 </style>
 <style>
 .el-tooltip__popper {