From 59fb58e6442e4e287e943197da5ffa775950f1ef Mon Sep 17 00:00:00 2001
From: coco1986509808 <1986509808@qq.com>
Date: Fri, 5 Jan 2024 16:34:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/monitoring/test.vue | 290 ++++++++++++++++++++++++--
 1 file changed, 278 insertions(+), 12 deletions(-)

diff --git a/src/views/modules/monitoring/test.vue b/src/views/modules/monitoring/test.vue
index c6ed9b5..0561d70 100644
--- a/src/views/modules/monitoring/test.vue
+++ b/src/views/modules/monitoring/test.vue
@@ -1,27 +1,293 @@
 <template>
 
-<div>
+
 <!--  <iframe style="width: 800px; height: 600px;" src="../../../../020/index.html"/>-->
 <!--  <iframe :src="this.txtUrl"  width="100%" :style="{height:calHeight}"  sandbox></iframe>-->
 <!--  <iframe src="../../../../public/index.html"  width="100%" :style="{height:calHeight}" ></iframe>-->
-  <iframe src="http://www.baidu.com/"  width="100%" :style="{height:calHeight}" ></iframe>
+<!--  <iframe src="http://www.baidu.com/"  width="100%" :style="{height:calHeight}" ></iframe>-->
+  <!-- 摄像头分布图 -->
+  <div >
+    <baidu-map
+        class="map"
+        :scroll-wheel-zoom="true"
+        :double-click-zoom="false"
+        @zoomend="mouseEvent"
+        :center="{lng: 103.943382, lat: 30.750594 }"
+        :zoom="zoom">
+      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
+      <bm-marker
+          :icon="iconUrl"
+          v-for="(item,key ) of this.mapList"
+          :key="key"
+          :position="{'lng':item.cameraLongitude,'lat':item.cameraLatitude}"
+          @rightclick="rightmons(item.idFaceCamera)"
+          :dragging="false"
+      >
+        <bm-label
+            :massClear="false"
+            @dblclick="deletePoint(item)"
+            v-if="lableOpen"
+            :content="'<div style=display:'+item.displayCss+ '><div >名称:' + item.cameraName+'</div>'+ '<div>位置:' + item.cameraRegionFirstlevelBackUp+'</div>'+'<div>坐标:' + item.cameraLongitude+','+ item.cameraLatitude+'</div></div >'"
+            :labelStyle="{backgroundColor :'0.05',border :'0',color: 'blue', fontSize : '14px' ,padding:'10px'}"
+            :offset="{width: -100, height: -90}"
+        />
+      </bm-marker>
+    </baidu-map>
+  </div>
 
-</div>
 </template>
 <script>
+import cameraAddUpdate from "./camera-add-update";
+import cameraUpload from "./camera-upload";
+import cameraView from "./camera-view";
 export default {
+  components: {
+    cameraAddUpdate,
+    cameraView,
+    cameraUpload
+  },
   data() {
     return {
-      // txtUrl: "../../../../020/index.html",
-      txtUrl:"http://localhost:10101/github.com"
+      lableOpen: false,
+      zoom: 14,
+      iconUrl: {
+        url: require("../../../assets/img/video.png"),
+        size: { width: 30, height: 30 }
+      },
+      list: true,
+      mapList: [],
+      position: { lng: 103.931057, lat: 30.755467 },
+      mapOpen: false,
+      // camera 和 camreaView切换，camreaView暂时不用
+      viewState: false,
+      // 表单查询
+      formModel: {
+        cameraName: "",
+        cameraRegion: [],
+        cameratLocationtypeId: ""
+      },
+      // table 列表
+      cameraList: [],
+      // 分页
+      total: 0,
+      pageObj: {
+        pageNo: 1,
+        pageSize: 10,
+        note: {}
+      },
+      // 设备区域
+      areaOptions: [],
+      areaProps: {
+        multiple: true
+      }
+    };
+  },
+  methods: {
+    deletePoint(e) {
+      let arr = [];
+      this.mapList.forEach(item => {
+        if (e.idFaceCamera == item.idFaceCamera) {
+          item.displayCss = "none";
+        }
+        arr.push(item);
+      });
+      this.mapList = arr;
+    },
+    //鼠标缩放触发函数
+    mouseEvent(type, target) {
+      //14  大于 14 显示  小于14 隐藏
+      if (type.currentTarget.Oa > 14) {
+        this.lableOpen = true;
+      } else {
+        this.lableOpen = false;
+      }
+    },
+    rightmons(type, target) {
+      this.$nextTick(() => {
+        this.$refs.addUpdateFaceRef.init("update", type);
+      });
+    },
+    //摄像头分布图
+    videoMap() {
+      this.list = !this.list;
+    },
+    // el-pagination
+    handleSizeChange: function(pageSize) {
+      this.pageObj.pageSize = pageSize;
+      this.handleCurrentChange();
+    },
+    handleCurrentChange: function(pageNo) {
+      this.pageObj.pageNo = pageNo;
+      this.pageObj.note = {
+        ...this.pageObj.note,
+        ...this.formModel
+      };
+      if (this.pageObj.note.cameraRegion.length === 0) {
+        this.pageObj.note.cameraRegion = "";
+      } else {
+        this.pageObj.note.cameraRegion = String(
+            this.pageObj.note.cameraRegion[
+            this.pageObj.note.cameraRegion.length - 1
+                ]
+        );
+      }
+      this.commonSeach();
+    },
+    // 查询
+    searchClick() {
+      this.pageObj.note = {
+        ...this.pageObj.note,
+        ...this.formModel
+      };
+      if (this.pageObj.note.cameraName != "") {
+        this.pageObj.pageNo = 1;
+      } else if (this.pageObj.note.cameratLocationtypeId != "") {
+        this.pageObj.pageNo = 1;
+      }
+      if (this.pageObj.note.cameraRegion.length === 0) {
+        this.pageObj.note.cameraRegion = "";
+      } else {
+        this.pageObj.note.cameraRegion = String(
+            this.pageObj.note.cameraRegion[
+            this.pageObj.note.cameraRegion.length - 1
+                ]
+        );
+        this.pageObj.pageNo = 1;
+      }
+      this.commonSeach();
+    },
+    searchClicks() {
+      this.$http
+          .get(`/camera/getAllList?cameraName=${this.formModel.cameraName}`)
+          .then(res => {
+            this.mapList = res.data.data;
+          });
+    },
+    // 新增/修改
+    addOrUpdateClick(param, row = {}) {
+      console.log(this.$refs.reference);
+
+      this.$nextTick(() => {
+        this.$refs.addUpdateFaceRef.init(param, row.idFaceCamera);
+      });
+    },
+    // 新增/修改回调
+    refreshClick(param) {
+      param === "add" ? (this.pageObj.pageNo = 1) : this.pageObj.pageNo;
+      this.pageObj.note = {
+        ...this.pageObj.note,
+        ...this.formModel
+      };
+      if (this.pageObj.note.cameraName != "") {
+        this.pageObj.pageNo = 1;
+      } else if (this.pageObj.note.cameratLocationtypeId != "") {
+        this.pageObj.pageNo = 1;
+      }
+      if (this.pageObj.note.cameraRegion.length === 0) {
+        this.pageObj.note.cameraRegion = "";
+      } else {
+        this.pageObj.note.cameraRegion = String(
+            this.pageObj.note.cameraRegion[
+            this.pageObj.note.cameraRegion.length - 1
+                ]
+        );
+        this.pageObj.pageNo = 1;
+      }
+      this.commonSeach();
+    },
+    // 删除
+    deleteClick(row) {
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+          .then(() => {
+            this.$http.get(`/camera/delete/${row.idFaceCamera}`).then(res => {
+              if (res.data.code === 0) {
+                this.pageObj.note = { ...this.pageObj.note, ...this.formModel };
+                if (this.pageObj.note.cameraName != "") {
+                  this.pageObj.pageNo = 1;
+                } else if (this.pageObj.note.cameratLocationtypeId != "") {
+                  this.pageObj.pageNo = 1;
+                }
+                if (this.pageObj.note.cameraRegion.length === 0) {
+                  this.pageObj.note.cameraRegion = "";
+                } else {
+                  this.pageObj.note.cameraRegion = String(
+                      this.pageObj.note.cameraRegion[
+                      this.pageObj.note.cameraRegion.length - 1
+                          ]
+                  );
+                  this.pageObj.pageNo = 1;
+                }
+                if (this.cameraList.length === 1 && this.pageObj.pageNo > 1) {
+                  this.pageObj.pageNo = this.pageObj.pageNo - 1;
+                }
+                this.commonSeach();
+                this.$message.success("删除成功");
+              } else {
+                this.$message.warning(res.data.message);
+              }
+            });
+          })
+          .catch(err => {
+            this.$message.info("已取消删除");
+            console.log(err);
+          });
+    },
+    // 公共查询
+    commonSeach(pageObj = this.pageObj) {
+      this.$http.post("/camera/getList", pageObj).then(res => {
+        if (res.data.code === 0) {
+          this.cameraList = res.data.data.records;
+          this.total = Number(res.data.data.total);
+        } else if (res.data.code == 60001) {
+          this.$message.warning(res.data.message);
+        } else {
+          console.log(res);
+        }
+      });
+      this.$http.get("/camera/getAllList").then(res => {
+        this.mapList = res.data.data;
+        this.mapList.forEach(item => {
+          item.displayCss = "block";
+        });
+      });
     }
   },
-  computed: {
-    //计算属性 , 设置iframe高度为窗口高度少100px
-    calHeight() {
-      return (window.innerHeight - 100) + 'px';
-    }
+  created() {
+    // 公共查询
+    this.commonSeach();
+    // 调用树形结构数据
+    this.$http.get("/camera/getRegion").then(res => {
+      if (res.data.code === 0) {
+        this.areaOptions = res.data.data;
+      }
+    });
   }
-
+};
+</script>
+<style scoped>
+.map {
+  height: 750px;
 }
-</script>
\ No newline at end of file
+.conditions-div {
+  background-color: #fff;
+  border-radius: 2px;
+}
+/*
+ 去除百度地图版权
+ 去除右上角[地图、卫星、三维]控件
+ 去除百度地图右上角平移缩放控件的市县区文字
+  */
+.map >>> .anchorBL,
+.map >>> .anchorTR,
+.map >>> .BMap_zlHolder {
+  display: none;
+  visibility: hidden;
+}
+.conditions-div >>> .el-form-item {
+  margin: 10px;
+}
+</style>
\ No newline at end of file