网格介绍面板

src/store/getters.js

@@ -27,5 +27,6 @@ const getters = {
   queryParamsIndex: (state) => state.taicang.queryParams,
   queryParamsXiaoqu: (state) => state.xiaoqu.queryParmas,
   mapParmas: (state) => state.xiaoqu.mapParmas,
+  netWorkintroduce: (state) => state.xiaoqu.netWorkintroduce,
 };
 export default getters;

src/store/modules/xiaoqu.js

@@ -6,6 +6,7 @@ const xiaoqu = {
       sd: false,
       networkName: undefined,
     },
+    netWorkintroduce: {},
   },
   mutations: {
     //参数变化
@@ -19,13 +20,26 @@ const xiaoqu = {
         state.mapParmas[key] = query[key];
       }
     },
+    SET_NETWORK_INTRODUCE: (state, data) => {
+      state.netWorkintroduce = data;
+    },
     //重置参数
     RESET_QUERY: (state, query) => {
+      state.netWorkintroduce = {
+        intro: "",
+        list: [],
+      };
       state.queryParmas = {
         xiaoquId: undefined, //小区
         parentid: undefined, //网格
         buildingid: undefined, //楼栋
         deptId: undefined, //苑id
+        color: undefined,
+        type: undefined,
+        isd: undefined,
+        isk: undefined,
+        isx: undefined,
+        isj: undefined,
       };
     },
   },

src/views/components/introduceTitle/subTtile.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="introduce-title">
-    <span class="main-title">{{ title }}</span>
+    <span class="main-title" v-if="!isSlot">{{ title }}</span>
+    <slot></slot>
   </div>
 </template>
 
@@ -11,6 +12,10 @@ export default {
       type: String,
       default: "标题",
     },
+    isSlot: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {};
@@ -26,8 +31,9 @@ export default {
   display: flex;
   align-items: center;
   overflow: hidden;
+  box-sizing: border-box;
+  padding: 0 20px 0 40px;
   .main-title {
-    margin-left: 40px;
     font-size: 19px;
     color: #ffffff;
     font-family: "xiniu";

src/views/components/xiaoqu/leftData/networkInfo.vue

@@ -1,9 +1,226 @@
 <template>
-  <div class="info-container">网格信息</div>
+  <div class="info-container">
+    <div class="network-intro">
+      <div>
+        {{ netWorkintroduce.intro }}
+      </div>
+    </div>
+    <div class="network-list">
+      <introduceTitle :isSlot="true">
+        <div class="network-title">
+          <div class="main-title">
+            网格
+            <span class="network-num">{{
+              mapParmas.networkName | filterName
+            }}</span>
+            人员列表
+          </div>
+          <div class="main-title">
+            共
+            <span class="network-num">{{ netWorkintroduce.list.length }}</span>
+            人
+          </div>
+        </div>
+      </introduceTitle>
+      <div class="person-list">
+        <div v-for="(item, index) in netWorkintroduce.list" :key="index">
+          <div class="person-image">
+            <el-image
+              fit="cover"
+              :src="uploadFileUrl + item.avatar"
+              :preview-src-list="[uploadFileUrl + item.avatar]"
+            >
+            </el-image>
+
+            <div class="serial-number">{{ index + 1 }}</div>
+          </div>
+          <div class="person-data">
+            <div class="data-item">
+              <div class="lable-value">
+                <div class="data-lable">姓名</div>
+                <div class="data-value">{{ item.user_name }}</div>
+              </div>
+              <div class="lable-value">
+                <div class="data-lable">联系电话</div>
+                <div class="data-value">{{ item.phonenumber }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {};
+import { mapGetters } from "vuex";
+import introduceTitle from "@/views/components/introduceTitle/subTtile.vue";
+export default {
+  data() {
+    return {
+      uploadFileUrl: process.env.VUE_APP_BASE_API,
+    };
+  },
+  components: {
+    introduceTitle,
+  },
+  filters: {
+    filterName(target) {
+      // 正则表达式匹配数字和可能的 - 号
+      const regex = /(?:\d+-?)+/g;
+      // 查找所有匹配的子字符串
+      const matches = target.match(regex);
+      // 如果有匹配的结果，将其合并为一个字符串并返回
+      return matches ? matches.join("") : "";
+    },
+  },
+  computed: {
+    ...mapGetters(["netWorkintroduce", "mapParmas"]),
+  },
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.info-container {
+  height: 100%;
+  box-sizing: border-box;
+  padding: 15px 0;
+
+  overflow: hidden;
+
+  .network-intro {
+    height: 55%;
+    padding: 20px 0 20px 20px;
+    background: url("~@/assets/images/ui/introduce-text.png");
+    background-size: 100% 100%;
+    font-size: 14px;
+    color: #d3e9ff;
+    font-weight: 400;
+    line-height: 25px;
+
+    div {
+      height: 100%;
+      overflow-y: auto;
+      padding-right: 20px;
+    }
+  }
+  .network-list {
+    height: 45%;
+
+    .network-title {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .main-title {
+      display: flex;
+      align-items: center;
+    }
+    .network-num {
+      display: inline-block;
+      width: 36px;
+      height: 34px;
+      line-height: 28px;
+      background: url("~@/assets/images/ui/img_block@2x.png");
+      background-size: 100% 100%;
+      font-size: 18px;
+      text-align: center;
+      color: #ffffff;
+      text-shadow: 0px 0px 10px #11c2ff;
+      font-family: "din-bold-2.ttf";
+    }
+
+    .person-list {
+      height: calc(100% - 40px);
+      overflow-y: auto;
+      padding: 0 10px;
+      & > div {
+        height: 50%;
+        display: flex;
+        align-items: center;
+        .person-image {
+          position: relative;
+          width: 32%;
+          height: 80%;
+          border-radius: 6px;
+          background: #01031f;
+          border: 1px solid rgba(0, 180, 255, 0.6);
+          overflow: hidden;
+          padding: 5px;
+          .serial-number {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 28px;
+            width: 28px;
+            background: url("~@/assets/images/ui/serial-number.png");
+            background-size: 100% 100%;
+            font-size: 14px;
+            padding-left: 5px;
+            color: #ffffff;
+            font-family: "din-bold-2.ttf";
+          }
+          .el-image {
+            display: block;
+            height: 100%;
+            width: 100%;
+            border-radius: 3px;
+          }
+        }
+        .person-data {
+          flex: 1;
+          padding-left: 15px;
+          .lable-value {
+            margin-bottom: 20px;
+          }
+          .data-item > div:last-child {
+            margin: 0;
+          }
+          .data-lable {
+            font-size: 14px;
+            color: #ffc333;
+            font-style: italic;
+            font-weight: 400;
+            margin-bottom: 10px;
+          }
+          .data-value {
+            position: relative;
+            font-size: 17px;
+            color: #ffffff;
+            font-style: italic;
+            font-weight: 400;
+          }
+          .data-value::after {
+            position: absolute;
+            bottom: 0;
+            z-index: -1;
+            content: "";
+            display: block;
+            width: 94px;
+            height: 10px;
+            background: url("~@/assets/images/ui/cell-bg.png");
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
+  }
+}
+
+/*全局滚动条样式*/
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  height: 10px;
+  width: 1px;
+  background: rgba(255, 255, 255, 0.5);
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+</style>

src/views/components/xiaoqu/map/index.vue

@@ -60,7 +60,7 @@ export default {
       handler(newValue, oldValue) {
         this.add3DXiaoqu(newValue.sd);
         this.addNetworkLayer(newValue.networkName);
-        // console.log("Object changed:", newValue);
+        if (this.map.getLayerById("dth")) this.map.getLayerById("dth").clear(); //清除单体化
       },
       deep: true, // Deeply watch all nested properties
     },
@@ -81,10 +81,7 @@ export default {
       });
       map.on(mars3d.EventType.click, function (e) {
         if (!e.id) {
-          // map.getLayerById("dth").clear(); //清除单体化
-          // _this.mapLayer.network.eachGraphic((graphic) => {
-          //   graphic.closeHighlight();
-          // });
+          map.getLayerById("dth").clear(); //清除单体化
           _this.$store.commit("CHANGE_QUERY", {
             buildingid: undefined,
             deptId: undefined,
@@ -422,14 +419,8 @@ export default {
       this.$nextTick(() => {
         if (show && this.mapLayer.network.length > 0) {
           this.mapLayer.network.show = true;
-
-          // this.mapLayer.network.eachGraphic((graphic) => {
-          //   graphic.closeHighlight();
-          // });
-
           let networkItem = this.mapLayer.network.getGraphicById(show);
           networkItem.openHighlight({
-            type: "click",
             color: "#FF3992",
             opacity: 0.5,
             outline: true,
@@ -444,7 +435,7 @@ export default {
 
     //3D小区模型
     add3DXiaoqu(show) {
-      if (show && this.mapLayer.tiles3dLayer != "undefined") {
+      if (show && this.mapLayer.tiles3dLayer == undefined) {
         //2D显存 - 集显
         let maximumMemoryUsage =
           process.env.NODE_ENV === "production" ? (1024 * 2) / 2 : 1024 / 2;
@@ -476,14 +467,12 @@ export default {
     },
     //2D - 3D点处理
     handle3dPoint(type) {
-      //修改二维图标成为三维
       this.mapLayer.planePoint.eachGraphic((graphic) => {
         var centerPoint = graphic.centerPoint;
         if (type == "3d") {
           let attr = graphic.attr;
           centerPoint.alt = Number(attr.floorNum) * 3 + 10;
         }
-
         graphic.setOptions({
           position: centerPoint,
           style: {

src/views/components/xiaoqu/mapSearchBox.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import { getNetWorkId } from "@/api/home/index.js";
+import { getNetWorkId, getNectWorkOffice } from "@/api/home/index.js";
 import { mapGetters } from "vuex";
 export default {
   dicts: ["b_color_type"],
@@ -86,18 +86,30 @@ export default {
 
       this.networkOption = res.data["网格list"];
     },
-    handleNetwork(e) {
+    async handleNetwork(e) {
       let networkName = "";
       if (e) {
-        networkName = this.networkOption.filter((item) => item.dept_id == e)[0]
-          .dept_name;
-        console.log(networkName);
+        let item = this.networkOption.filter((item) => item.dept_id == e)[0];
+        networkName = item.dept_name;
+        console.log(networkName, item);
+
+        this.$store.commit("SET_NETWORK_INTRODUCE", {
+          intro: JSON.parse(item.intro).kaiguo.text,
+          list: await this.getNetworkIntro(e),
+        });
       }
 
       this.$store.commit("CHANGE_QUERY", { parentid: e });
 
       this.$store.commit("CHANGE_QUERY_MAP", { networkName: networkName });
     },
+
+    async getNetworkIntro(deptid) {
+      let res = await getNectWorkOffice({ deptid: deptid });
+
+      return res.data;
+    },
+
     handleMapLayer(e) {
       this.$store.commit("CHANGE_QUERY_MAP", { sd: e });
     },