gx

src/view/dialog/dialogCamera.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dialogPage">
     <el-dialog
-      v-model="dialogShow"
+      v-model="cameraShow"
       center
       width="80vw"
       :show-close="false"
@@ -15,8 +15,7 @@
           </el-icon>
         </div>
       </template>
-
-      <!-- <div class="tabelPart">
+      <div class="tabelPart">
         <div class="bo">
           <div class="title">
             <div class="title_top">
@@ -25,7 +24,7 @@
                 alt=""
                 style="margin-right: 10px"
               />
-              <div class="name">{{ title }}详情</div>
+              <div class="name">{{ data.title }}</div>
               <img
                 src="@/assets/images/table_r.png"
                 alt=""
@@ -42,7 +41,7 @@
         <div style="width: 100%; height: calc(100% - 110px)">
           
         </div>
-      </div> -->
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -58,7 +57,7 @@ import {
 } from "vue";
 import { CircleCloseFilled } from "@element-plus/icons-vue";
 const props = defineProps({
-  dialogShow: {
+  cameraShow: {
     type: Boolean,
     default: () => {
       return false;
@@ -86,22 +85,22 @@ const props = defineProps({
 const emit = defineEmits(["close"]);
 
 // 详情弹框
-const dialogShow = ref();
+const cameraShow = ref();
 const data = reactive({
-  title: "",
+  title: "摄像头",
   columns: [],
   tableData: [],
 });
 
 const gridData = [];
 // 监听
-// watch(
-//   () => props.dialogShow,
-//   (newVal, oldVal) => {
-//     dialogShow.value = newVal;
-//     data.columns = props.columns;
-//   }
-// );
+watch(
+  () => props.cameraShow,
+  (newVal, oldVal) => {
+    cameraShow.value = newVal;
+    // data.columns = props.columns;
+  }
+);
 // watch(
 //   () => props.tableData,
 //   (newVal, oldVal) => {
@@ -110,8 +109,7 @@ const gridData = [];
 // );
 // 使用生命钩子
 onMounted(() => {
-  dialogShow.value = props.dialogShow;
-  console.log(111);
+  cameraShow.value = props.cameraShow;
   
   // data.columns = props.columns;
   // data.title = props.title;
@@ -119,10 +117,11 @@ onMounted(() => {
 });
 
 const closeDialog = () => {
-  dialogShow.value = false;
+  cameraShow.value = false;
   emit("close");
 };
 </script>
+
 <style lang="scss" scoped>
 :deep(.el-dialog) {
   --el-dialog-bg-color: none;

src/view/person/index.vue

@@ -327,7 +327,7 @@
     >
     </Dialog>
     <DialogCamera
-    :dialogShow="cameraShow"
+    :cameraShow="cameraShow"
     @close="close1"
     >
     </DialogCamera>
@@ -774,7 +774,6 @@ const close = () => {
 };
 const close1 = () => {
   cameraShow.value = false;
-  console.log('弹框关闭');
 };
 //右侧表格分页
 const handlePagination = (currentPage) => {
@@ -824,7 +823,6 @@ const oneCardSolution = () => {
 // 打开摄像头
 const openCamera = () => {
   cameraShow.value = true;
-  console.log(cameraShow.value,"摄像头");
 };
 const back = () => {
   if (jump.value == "detail") {

src/view/sy_map.vue

@@ -169,7 +169,10 @@
           <div v-else>未居住</div>
         </template>
         <template #sxt="{ currentCol, currentData }">
-          <div>摄像头</div>
+          <el-icon size="24" color="#fff" 
+           v-if="currentData.camera"
+            ><VideoCamera
+          /></el-icon>
         </template>
       </Dialog>
       <personDetail
@@ -199,6 +202,7 @@ import tools from "@/utils/tools";
 import initializeMap from "@/utils/mapInitializer.js";
 import http from "@/utils/request.js";
 import mapTown from "@/assets/json/ly.json";
+import { VideoCamera } from "@element-plus/icons-vue";
 // import xkz from "@/assets/json/xkz.json";
 import cssj from "@/assets/json/cssj.json";
 import j0 from "@/assets/images/map/j0.png";
@@ -1652,17 +1656,17 @@ const changeys = (name) => {
   } else {
     yaosuList.value.push(name);
     let url;
-    let img
+    let img;
     yaosuTotal.value.forEach((item, index) => {
       if (item.name == name) {
         url = item.url;
-        img=item.img
+        img = item.img;
       }
     });
-    getZyys(url, name,img);
+    getZyys(url, name, img);
   }
 };
-const getZyys = (url, name,img) => {
+const getZyys = (url, name, img) => {
   http.get(url).then((res) => {
     if (res.code == 200) {
       yaosuIcon.value[name].sj = res.data;
@@ -1674,7 +1678,7 @@ const getZyys = (url, name,img) => {
         item.center.push(Number(item.wd));
       });
       yaosuIcon.value[name].sj.forEach((itemm, indexx) => {
-        createZyys(itemm,indexx,name)
+        createZyys(itemm, indexx, name);
       });
     }
   });
@@ -1696,16 +1700,19 @@ const createZyys = (polygon, indexx, name) => {
     content.appendChild(img2);
     return content;
   }
-  yaosuIcon.value[name].sj[indexx].overlay = new BMapGL.CustomOverlay(createLabelDOM, {
-    point: new BMapGL.Point(...polygon.center),
-    opacity: 0.5,
-    offsetY: -10,
-    properties: {
-      imgSrc2: polygon.img,
-      type: "customOverlay",
-    },
-  });
-  map.addOverlay( yaosuIcon.value[name].sj[indexx].overlay);
+  yaosuIcon.value[name].sj[indexx].overlay = new BMapGL.CustomOverlay(
+    createLabelDOM,
+    {
+      point: new BMapGL.Point(...polygon.center),
+      opacity: 0.5,
+      offsetY: -10,
+      properties: {
+        imgSrc2: polygon.img,
+        type: "customOverlay",
+      },
+    }
+  );
+  map.addOverlay(yaosuIcon.value[name].sj[indexx].overlay);
 };
 //----------资源要素------------
 //点击街道，回到街道