init

public/index.html

@@ -6,8 +6,14 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+
+  <script type="text/javascript">
+    window._AMapSecurityConfig = {
+      securityJsCode: 'd9ded0c99c2545c9feb200da26b29fbf',
+    }
+  </script>
   <script type="text/javascript"
-    src="https://webapi.amap.com/maps?v=1.4.15&key=35a871e5905ecfd749bd998448b9cd03"></script>
+    src="https://webapi.amap.com/maps?v=1.4.15&key=7891f1238368a895ff1967c79643102d"></script>
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>

src/App.vue

@@ -3,7 +3,8 @@ import Layout from "./views/Layout.vue";
 </script>
 
 <template>
-  <Layout></Layout>
+  <!-- <Layout></Layout> -->
+  <RouterView></RouterView>
 </template>
 
 <style scoped></style>

src/components/AMap.vue

@@ -0,0 +1,126 @@
+<template>
+  <div id="container"></div>
+</template>
+<script setup name="Map">
+import { onMounted, reactive, ref } from "vue";
+
+const markData = ref([
+  {
+    SUPERVISORID: "",
+    MAP: "40.740616,111.986715",
+    PROID: "HT6YXM-202210092022100001",
+    PROTYPE: "一类",
+    UPDATEDATE: 1665321084000,
+    SUPERVISOR: "",
+    DESIGNERID: "",
+    STCV: 0,
+    PROOWNER: "业务主管部门",
+    SURVEY: "",
+    UPDATEUSER: "user1",
+    SURVEYID: "",
+    PROCOST: 0,
+    CONTRACTOR: "华为技术有限公司1",
+    PROLEADER: "李四",
+    FLOORAREA: 0,
+    CREATEUSER: "user1",
+    ISEND: 0,
+    RSTATUS: "0",
+    PROREP: "高山",
+    PROSTATUS: 1,
+    CBDATE: 1664553600000,
+    CONTRACTORID: "XMQY-20220930000007",
+    PRONAME: "二车间工地施工",
+    BINDID: "46796779-32f5-453e-a49a-585aeb4d06a7",
+    ORGID: "d8ee92f8-c80f-4741-b92c-cbc60c91d754",
+    PROADDRESS: "内蒙古自治区呼和浩特市赛罕区黄合少镇Z031",
+    DESIGNER: "",
+    PROCESSDEFID: "obj_62377f3503a84baba4749eb125b0b8cc",
+    PROPIC: "",
+    CREATEDATE: 1665321084000,
+    CEDATE: 1667232000000,
+    PROFILE: "已开工",
+    ID: "705838af-89b5-41da-8bb4-20ccc21e7fb4",
+  },
+]);
+
+const handleMarkerClick = (e) => {
+  console.log(e);
+  console.dir(e.target);
+  // console.log(e.target.getExtData());
+};
+onMounted(() => {
+  var map = new AMap.Map("container", {
+    mapStyle: "amap://styles/25ad310ebf2a324fcc74707a92a4d0dc",
+    zoom: 24,
+    resizeEnable: true,
+    center: [111.986715, 40.740616],
+  });
+  for (const mkItem of markData.value) {
+    const lng = mkItem.MAP.split(",")[1];
+    const lat = mkItem.MAP.split(",")[0];
+    const marker = new AMap.Marker({
+      position: [lng, lat],
+      map: map,
+      extData: {
+        proid: mkItem.PROID,
+      },
+    });
+    marker.on("click", (e) => {
+      console.log(e.target.getExtData());
+      parent.postMessage({ proid: e.target.getExtData().proid });
+    });
+  }
+});
+// onMounted(() => {
+//   const map = new AMap.Map("map-wrap", {
+//     // mapStyle: "amap://styles/25ad310ebf2a324fcc74707a92a4d0dc",
+//     // zoom: 24,
+//     resizeEnable: true,
+//     center: [111.986715, 40.740616],
+//   });
+//   // let layer = new AMap.LabelsLayer({
+//   //   zooms: [3, 20],
+//   //   zIndex: 1000,
+//   //   // 开启标注避让，默认为开启，v1.4.15 新增属性
+//   //   collision: true,
+//   //   // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
+//   //   animation: true,
+//   // });
+
+//   // map.add(layer);
+//   // for (const mk of markData.value) {
+//   const mk = markData.value[0];
+//   const lng = mk.MAP.split(",")[1];
+//   const lat = mk.MAP.split(",")[0];
+//   // var icon = new AMap.Icon({
+//   //   size: new AMap.Size(40, 50), // 图标尺寸
+//   //   image: "//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png", // Icon的图像
+//   //   imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
+//   //   imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片
+//   // });
+//   var marker = new AMap.Marker({
+//     map: map,
+//     // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
+//     icon: "/marker.png",
+//     // position: [lng, lat],
+//   });
+//   // const _marker = new AMap.Marker({
+//   //   map: map,
+//   //   // icon: icon,
+//   //   content: `<div style="width:100px;height:100px;background-color:red;">编辑</div>`,
+//   //   // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
+//   //   position: [lng, lat],
+//   //   dragEnable: false,
+//   //   zoomEnable: false,
+//   // });
+//   marker.on("click", (e) => {
+//     console.log(e);
+//   });
+// });
+</script>
+<style lang="scss" scoped>
+#container {
+  width: 916px;
+  height: 580px;
+}
+</style>

src/router/index.js

@@ -4,9 +4,17 @@ import { createWebHashHistory, createRouter } from "vue-router";
 // const About = { template: "<div>About</div>" };
 
 const routes = [
-  { path: "/", component: () => import("../views/Overview/index.vue") },
+  { path: "/amap", component: () => import("../components/AMap.vue") },
-  { path: "/monitor", component: () => import("../views/Monitor/index.vue") },
+  // { path: "/", component: () => import("../views/Overview/index.vue") },
+  {
+    path: "/", component: () => import("../views/Layout.vue"), children: [
+      {
+        path: '', component: () => import('../views/Overview/index.vue')
+      },
+      { path: "monitor", component: () => import("../views/Monitor/index.vue") },
       { path: "/monitor/detail", component: () => import("../views/Monitor/monitor-detail.vue") },
+    ]
+  },
 ];
 
 // 3. 创建路由实例并传递 `routes` 配置

src/views/Monitor/camera.vue

@@ -38,15 +38,20 @@ const props = defineProps({
     type: [String, Number],
     default: 420,
   },
+  source: {
+    type: String,
+    default:
+      "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
+  },
 });
-const { width, height } = toRefs(props);
+const { width, height, source } = toRefs(props);
 
 const videoElementRef = ref();
 // const playBtnRef = ref();
 
 let flvPlayer = flvjs.createPlayer({
   type: "flv",
-  url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
+  url: source.value,
   //   url: "http://localhost:8000/lycoris_recoil.flv",
 });
 

src/views/Monitor/index.vue

@@ -29,6 +29,7 @@
     <div class="monitor-list grid grid-cols-2">
       <Camera
         v-for="(item, index) in localtionList.slice(0, 4)"
+        :source="item.link"
         :key="index"
       ></Camera>
       <!-- <div
@@ -63,7 +64,10 @@ import { ref } from "vue";
 import Camera from "./camera.vue";
 
 const localtionList = ref([
-  { name: "工地大门一" },
+  {
+    name: "工地大门一",
+    link: "http://101.34.251.155:10000/sms/34020000002020000001/flv/hls/34020000001320000001_34020000001320000002.flv",
+  },
   { name: "工地大门二" },
   { name: "工地大门三" },
   { name: "工地大门四" },

src/views/Overview/Map.vue

@@ -1,93 +1,13 @@
 <template>
-  <div class="map-wrap">
+  <iframe src="/#/amap" width="916" height="580" frameborder="0"></iframe>
-    <div class="pin pin-1" @click="showTip"></div>
-    <div class="pin pin-2" @click="showTip"></div>
-    <div class="pin pin-3" @click="showTip"></div>
-    <div class="tooltip" ref="toolTipRef" v-show="isShowTip">
-      <div class="close-button absolute top-1 right-1" @click="hideTip"></div>
-      <div class="title">六院信息化工程</div>
-      <div>设计单位：碧海蓝天创意设计有限公司</div>
-      <div>负责人：江海洋／汪东城／简易宏</div>
-      <div>施工单位：航天六院</div>
-      <div>工程单位负责人江海洋／汪东城</div>
-      <div>监理单位：维创监理有限公司</div>
-      <div>负责人：裴勇／程保国／李珊</div>
-    </div>
-  </div>
 </template>
-<script setup name="Map">
+<script setup>
-import { nextTick, ref } from "vue";
+import { onMounted } from "vue";
 
-const toolTipRef = ref();
+onMounted(() => {
-const isShowTip = ref(false);
+  window.addEventListener("message", (e) => {
-const showTip = (event) => {
+    console.log(e.data.msg);
-  // console.log("in");
+    console.log("父页面收到了来自iframe的消息");
-  const parentLeft = event.target.parentNode.getBoundingClientRect().left;
+  });
-  const parentTop = event.target.parentNode.getBoundingClientRect().top;
+});
-  const x = event.pageX - parentLeft;
-  const y = event.pageY - parentTop;
-  isShowTip.value = true;
-  //   nextTick(() => {
-  if (toolTipRef.value) {
-    toolTipRef.value.style.left = `${x}px`;
-    toolTipRef.value.style.top = `${y}px`;
-    toolTipRef.value.style.zIndex = 9999;
-  }
-  //   });
-  //   console.log(x, y);
-};
-const hideTip = () => {
-  isShowTip.value = false;
-  if (toolTipRef.value) {
-    toolTipRef.value.style.zIndex = -1000;
-  }
-};
 </script>
-<style lang="scss" scoped>
-.map-wrap {
-  width: 916px;
-  height: 580px;
-  background-image: url(../../assets/map.png);
-  background-size: cover;
-  position: relative;
-  .pin {
-    user-select: none;
-    background-image: url(../../assets/pin.png);
-    background-size: cover;
-    width: 40px;
-    height: 40px;
-    position: absolute;
-    z-index: 99;
-    cursor: pointer;
-  }
-  .pin-1 {
-    left: 80px;
-    top: 360px;
-  }
-  .pin-2 {
-    left: 400px;
-    top: 400px;
-  }
-  .pin-3 {
-    left: 600px;
-    top: 370px;
-  }
-  .tooltip {
-    text-align: center;
-    color: white;
-    position: absolute;
-    background-image: url(../../assets/group4671@3x.png);
-    background-size: 100% 100%;
-    z-index: 99;
-    width: 266px;
-    .close-button {
-      cursor: pointer;
-      width: 20px;
-      height: 20px;
-      background-size: cover;
-      background-image: url(../../assets/close.png);
-    }
-    // height: 210px;
-  }
-}
-</style>

src/views/Overview/ProjectDetail.vue

@@ -19,6 +19,27 @@
 import ChartContainer from "@/components/ChartContainer.vue";
 import { ref } from "vue";
 
+const resp = {
+  RESP: "王五",
+  PROID: "HT6YXM-202209302022090009",
+  UPDATEDATE: 1664515833000,
+  PRONAME: "测试办公楼扩建",
+  TASKTITLE: "材料出库",
+  RBDATE: "2016-01-01 00:00:00",
+  BINDID: "3d657d15-2685-4361-b315-95b5dfdaacc9",
+  ORGID: "8911e732-b42a-4556-853f-ad32761bcbee",
+  EDATE: "2023-01-30 00:00:00",
+  BDATE: "2012-03-01 00:00:00",
+  ANNEX: "",
+  MILESTONEFLAG: 1,
+  UPDATEUSER: "system1",
+  PROCESSDEFID: "obj_c9074b46bca14282a3fd3a7869d18baf",
+  TASKCONTENT: "将整理好得原材料出库",
+  CREATEDATE: 1664515833000,
+  REDATE: "2016-01-01 00:00:00",
+  TASKID: "RWJD-202209302022090003",
+};
+
 const dataList = ref([
   {
     title: "项目名称",

src/views/Overview/QualitySituation.vue

@@ -62,7 +62,7 @@ const loadData = async () => {
   }
 };
 onMounted(() => {
-  loadData();
+  // loadData();
 });
 </script>
 

src/views/Overview/SecuritySituation.vue

@@ -79,7 +79,7 @@ const loadData = async () => {
     ]);
   }
 };
-loadData();
+// loadData();
 </script>
 
 <style lang="scss" scoped>