1

src/views/home/index.vue

@@ -76,6 +76,8 @@
       <div class="quick-button" @click="updatePersonalData">现场人员</div>
 
       <div class="quick-button" @click="showHistoryLabel">历史标注</div>
+
+      <div class="quick-button" @click="showMonitoringList">监控列表</div>
     </div>
 
     <!-- 搜索框 -->
@@ -271,7 +273,7 @@
         <!-- 任务下发 -->
         <taskbox v-show="active == 2"></taskbox>
 
-        <!--  -->
+        <!-- 监控列表 -->
       </div>
     </div>
 
@@ -366,6 +368,7 @@
       </div>
     </div>
 
+    <monitoring-list ref="monitoringLists"></monitoring-list>
     <!--  -->
   </div>
 </template>
@@ -403,6 +406,8 @@ import userpoint from "./widget/userpoint.vue";
 import drag from "../../utils/draged";
 import editorbox from "./widget/editorbox";
 import search from "./widget/search";
+import MonitoringList from "./widget/monitoringList.vue";
+import videoConfig from "./lib/videoConfig.json";
 
 let BASE_URL = process.env.VUE_APP_BASE_API;
 export default {
@@ -432,6 +437,7 @@ export default {
     userpoint,
     editorbox,
     search,
+    MonitoringList,
   },
 
   data() {
@@ -485,6 +491,7 @@ export default {
       tableName: null,
       editData: null,
       showFields: null,
+      icvGraphicLayer: null,
     };
   },
 
@@ -534,6 +541,8 @@ export default {
     window.delTaskPoint = this.delTaskPoint;
 
     window.editlayerinfo = this.editlayerinfo;
+
+    this.getIcvLocation();
   },
   methods: {
     updatePersonalData() {
@@ -569,6 +578,125 @@ export default {
     closeWaterlayer() {
       this.waterVisible = false;
     },
+    // 监控列表
+    showMonitoringList() {
+      this.$refs.monitoringLists.showVisible();
+    },
+    // 绘制所有摄像机位置
+    async getIcvLocation() {
+      let that = this;
+      let token;
+      // 设备列表
+      let facilityList = [];
+      // 摄像机列表
+      let icvList = [];
+      // 请求token
+      let params = {
+        address: videoConfig.connParams.address,
+        port: videoConfig.connParams.port,
+        user: videoConfig.connParams.user,
+        password: videoConfig.connParams.password,
+        epid: videoConfig.connParams.epid,
+        fixaddr: videoConfig.connParams.bfix,
+      };
+      await axios({
+        method: "post",
+        url: `${videoConfig.q2http_url}login`,
+        data: params,
+      }).then((res) => {
+        let data = res.data;
+        token = data.token;
+      });
+      // 获取设备列表接口
+      await axios({
+        method: "get",
+        url: `${videoConfig.q2http_url}CAS/C_CAS_QueryPUIDSets`,
+        params: {
+          offset: 0,
+          count: 200,
+          token: token,
+        },
+      }).then((res) => {
+        let data = res.data;
+        data.map((item) => {
+          item.id = item.$;
+          item.label = item.Name;
+          facilityList.push(item);
+        });
+      });
+      // 获取摄像机所有列表
+      console.error(facilityList);
+      for (let i = 0; i < facilityList.length; i++) {
+        let items = facilityList[i];
+        await axios({
+          method: "post",
+          url: `${videoConfig.q2http_url}C_CAS_QueryPUIDRes`,
+          params: {
+            token: token,
+          },
+          data: {
+            puid: items.id,
+          },
+        }).then((res) => {
+          let data = res.data["Res"];
+          data.map((item) => {
+            if (item.Type == "IV") {
+              item.label = item.Name;
+              item.id = item.Name;
+              item.puid = items.id;
+              icvList.push(item);
+            }
+          });
+        });
+      }
+
+      if (this.icvGraphicLayer) {
+        this.icvGraphicLayer.clear();
+      } else {
+        this.icvGraphicLayer = new this.mars3d.layer.GraphicLayer();
+        this.globalmap.addLayer(this.icvGraphicLayer);
+      }
+      // 获取摄像机位置
+      axios({
+        method: "post",
+        url: `${videoConfig.q2http_url}GPS/C_GS_QueryLastGPSData`,
+        params: {
+          token: token,
+        },
+        data: {
+          equipment: icvList,
+        },
+      }).then((res) => {
+        let list = res.data.Res;
+        console.error(list);
+        list.map((item) => {
+          let graphic = new mars3d.graphic.BillboardEntity({
+            position: [
+              parseFloat(item.GPS.Longitude),
+              parseFloat(item.GPS.Latitude),
+            ],
+            style: {
+              image: "/img/marktask.png",
+              clampToGround: true,
+              scale: 0.4,
+              label: {
+                text: "摄像机位置",
+                font_size: 14,
+                color: "#ffffff",
+                pixelOffsetY: 10,
+                distanceDisplayCondition: true,
+              },
+            },
+            attr: { remark: "摄像机位置", ...item, token: token },
+          });
+          graphic.on(mars3d.EventType.click, (e) => {
+            that.$refs.monitoringLists.loadVideoAndShow(e.target.options.attr);
+          });
+          that.icvGraphicLayer.addGraphic(graphic);
+          // 还可以另外一种写法: graphic.addTo(graphicLayer)
+        });
+      });
+    },
     // 获取下发任务列表
     getTaskList() {
       axios({

src/views/home/widget/monitoringList.vue

@@ -219,7 +219,7 @@ import flvjs from "flv.js";
 import talk from "../lib/talk.js";
 import alawmulaw from "../lib/alawmulaw.min.js";
 export default {
-  name: "monitorbox",
+  name: "monitoringList",
   props: {},
   data() {
     return {