From 6328052a3a489a6a894cbf9a252bd51e9afbd659 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Tue, 27 Aug 2024 16:31:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=AD=9B=E9=80=89=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.production                              |   4 +-
 src/components/mars-map/index.vue            |  10 +
 src/router/index.js                          |   2 +-
 src/store/getters.js                         |   1 +
 src/store/modules/xiaoqu.js                  |   9 +
 src/views/components/index.js                |   2 +
 src/views/components/xiaoqu/map/index.vue    | 104 ++++++----
 src/views/components/xiaoqu/mapSearchBox.vue | 191 +++++++++++++++++++
 src/views/xiaoqu.vue                         |   6 +
 vue.config.js                                |   3 +-
 10 files changed, 292 insertions(+), 40 deletions(-)
 create mode 100644 src/views/components/xiaoqu/mapSearchBox.vue

diff --git a/.env.production b/.env.production
index 6c7bdb0..b6bf52a 100644
--- a/.env.production
+++ b/.env.production
@@ -5,4 +5,6 @@ VUE_APP_TITLE = 人口数据管理系统
 ENV = 'production'
 
 # 人口数据管理系统/生产环境
-VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API_HTML = "http://122.193.93.182:19002"
+VUE_APP_BASE_API = 'http://122.193.93.182:19002'
+
diff --git a/src/components/mars-map/index.vue b/src/components/mars-map/index.vue
index c762b6f..5028075 100644
--- a/src/components/mars-map/index.vue
+++ b/src/components/mars-map/index.vue
@@ -9,12 +9,14 @@
 import MarsMap from "@/components/mars-work/mars-map.vue";
 
 export default {
+  // http://39.101.188.84:9999/demo/tc-community/lib/geoJson/xiaoqu.json
   data() {
     const basePathUrl = window.basePathUrl || "";
     return {
       configUrl: basePathUrl + "lib/config/config.json",
       tiles3dLayer: null,
       map: null,
+      baseUrl: basePathUrl + "lib/geoJson",
     };
   },
   props: {
@@ -32,6 +34,14 @@ export default {
   methods: {
     onMapload(map) {
       this.map = map;
+      // const OfflineCache = CesiumNetworkPlug.OfflineCacheController;
+      // console.log(this.baseUrl, "sssss");
+
+      // // ① 全局缓存
+      // // OfflineCache.ruleList.add("*")
+      // // ② 对指定地址的 瓦片图层 缓存
+      // OfflineCache.ruleList.add("https://services.arcgisonline.com/");
+
       this.$emit("mapLoad", map);
     },
   },
diff --git a/src/router/index.js b/src/router/index.js
index 512ead1..9bc7ce8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -183,7 +183,7 @@ Router.prototype.replace = function push(location) {
 };
 
 export default new Router({
-  mode: "history", // 去掉url中的#
+  // mode: "history", // 去掉url中的#
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes,
 });
diff --git a/src/store/getters.js b/src/store/getters.js
index 17776a7..8a60c71 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -26,5 +26,6 @@ const getters = {
   pie: (state) => state.taicang.pie,
   queryParamsIndex: (state) => state.taicang.queryParams,
   queryParamsXiaoqu: (state) => state.xiaoqu.queryParmas,
+  mapParmas: (state) => state.xiaoqu.mapParmas,
 };
 export default getters;
diff --git a/src/store/modules/xiaoqu.js b/src/store/modules/xiaoqu.js
index f2bc3a8..212b732 100644
--- a/src/store/modules/xiaoqu.js
+++ b/src/store/modules/xiaoqu.js
@@ -2,6 +2,10 @@ const xiaoqu = {
   state: {
     //页面接口参数
     queryParmas: {},
+    mapParmas: {
+      sd: false,
+      networkName: undefined,
+    },
   },
   mutations: {
     //参数变化
@@ -10,6 +14,11 @@ const xiaoqu = {
         state.queryParmas[key] = query[key];
       }
     },
+    CHANGE_QUERY_MAP: (state, query) => {
+      for (let key in query) {
+        state.mapParmas[key] = query[key];
+      }
+    },
     //重置参数
     RESET_QUERY: (state, query) => {
       state.queryParmas = {
diff --git a/src/views/components/index.js b/src/views/components/index.js
index a834ef6..f7f0e64 100644
--- a/src/views/components/index.js
+++ b/src/views/components/index.js
@@ -8,3 +8,5 @@ export { default as IndexModelRight } from "./IndexModel/right.vue";
 export { default as xiaoquInfo } from "./xiaoqu/leftData/xiaoquInfo";
 export { default as networkInfo } from "./xiaoqu/leftData/networkInfo";
 export { default as buildingStatistics } from "./xiaoqu/leftData/buildingStatistics";
+
+export { default as mapSearchBox } from "./xiaoqu/mapSearchBox.vue";
diff --git a/src/views/components/xiaoqu/map/index.vue b/src/views/components/xiaoqu/map/index.vue
index a2e42b5..2f51ba7 100644
--- a/src/views/components/xiaoqu/map/index.vue
+++ b/src/views/components/xiaoqu/map/index.vue
@@ -6,6 +6,7 @@
 
 <script>
 import configJson from "./map-config.json";
+import { mapGetters } from "vuex";
 import garden from "./garden.json";
 import MarsMap from "@/components/mars-map";
 import { listDept } from "@/api/system/dept.js";
@@ -17,6 +18,9 @@ export default {
       default: 0,
     },
   },
+  computed: {
+    ...mapGetters(["mapParmas"]),
+  },
   data() {
     const basePathUrl = window.basePathUrl || "";
     return {
@@ -51,6 +55,16 @@ export default {
   components: {
     MarsMap,
   },
+  watch: {
+    mapParmas: {
+      handler(newValue, oldValue) {
+        this.add3DXiaoqu(newValue.sd);
+        this.addNetworkLayer(newValue.networkName);
+        // console.log("Object changed:", newValue);
+      },
+      deep: true, // Deeply watch all nested properties
+    },
+  },
   created() {
     this.config = configJson[JSON.parse(this.xiaoquId)];
   },
@@ -82,7 +96,7 @@ export default {
       this.mapLayer.planePoint = new mars3d.layer.GraphicLayer();
       this.map.addLayer(this.mapLayer.planePoint);
 
-      this.mapLayer.network = new mars3d.layer.GraphicLayer({ show: false });
+      this.mapLayer.network = new mars3d.layer.GraphicLayer({ show: true });
       this.map.addLayer(this.mapLayer.network);
     },
     addMapLayer() {
@@ -99,9 +113,7 @@ export default {
         this.addGardenLayer();
       }
 
-      // this.addNetworkLayer();
       this.addbuildingLayer();
-      // this.add3DXiaoqu();
 
       // this.addDTH();
     },
@@ -302,10 +314,10 @@ export default {
           this.mapLayer.plane.addGraphic(polygon);
 
           polygon.on(mars3d.EventType.highlightClose, function (e) {
-            _this.$store.commit("CHANGE_QUERY", {
-              buildingid: undefined,
-              deptId: undefined,
-            }); //存储全局参数
+            // _this.$store.commit("CHANGE_QUERY", {
+            // buildingid: undefined,
+            //deptId: undefined,
+            //}); //存储全局参数
           });
 
           const point = new mars3d.graphic.BillboardEntity({
@@ -387,13 +399,16 @@ export default {
     },
 
     //小区网格面
-    addNetworkLayer() {
-      mars3d.Util.fetchJson({
-        url: this.configUrl + `lib/geoJson/xiaoqu/network${this.xiaoquId}.json`,
-      }).then((res) => {
+    async addNetworkLayer(show) {
+      if (show && this.mapLayer.network.length == 0) {
+        let res = await mars3d.Util.fetchJson({
+          url:
+            this.configUrl + `lib/geoJson/xiaoqu/network${this.xiaoquId}.json`,
+        });
         const arr = mars3d.Util.geoJsonToGraphics(res);
         arr.map((item, index) => {
           let polygon = new mars3d.graphic.PolygonEntity({
+            id: item.attr["名称"],
             positions: item.positions,
             style: {
               color: "#005AFF",
@@ -404,40 +419,55 @@ export default {
               outline: true,
               outlineWidth: 3,
               outlineColor: "#32FF85",
-              highlight: {
-                type: "click",
-                color: "#FF3992",
-                opacity: 0.5,
-                outline: true,
-                outlineColor: "#FF129D",
-                outlineWidth: 5,
-              },
             },
           });
           this.mapLayer.network.addGraphic(polygon);
         });
+      }
+
+      this.$nextTick(() => {
+        if (show && this.mapLayer.network.length > 0) {
+          this.mapLayer.network.show = true;
+          let networkItem = this.mapLayer.network.getGraphicById(show);
+          networkItem.openHighlight({
+            type: "click",
+            color: "#FF3992",
+            opacity: 0.5,
+            outline: true,
+            outlineColor: "#FF129D",
+            outlineWidth: 5,
+          });
+        }
+        if (!show && this.mapLayer.network.length > 0)
+          this.mapLayer.network.show = false;
       });
     },
 
     //3D小区模型
-    add3DXiaoqu() {
-      //4D显存 - 集显
-      let maximumMemoryUsage =
-        process.env.NODE_ENV === "production" ? (1024 * 4) / 2 : 1024 / 2;
-      // 倾斜模型
-      this.mapLayer.tiles3dLayer = new mars3d.layer.TilesetLayer({
-        show: false,
-        name: "太仓测试",
-        url: this.config.qingxie.url,
-        maximumScreenSpaceError: 16,
-        maximumMemoryUsage: maximumMemoryUsage,
-        dynamicScreenSpaceError: false,
-        skipLevelOfDetail: true,
-        preferLeaves: true,
-        flyTo: false,
-        center: this.config.viewHome,
-      });
-      this.map.addLayer(this.mapLayer.tiles3dLayer);
+    add3DXiaoqu(show) {
+      if (show && this.mapLayer.tiles3dLayer != "undefined") {
+        //2D显存 - 集显
+        let maximumMemoryUsage =
+          process.env.NODE_ENV === "production" ? (1024 * 2) / 2 : 1024 / 2;
+        // 倾斜模型
+        this.mapLayer.tiles3dLayer = new mars3d.layer.TilesetLayer({
+          show: false,
+          name: "太仓测试",
+          url: this.config.qingxie.url,
+          maximumScreenSpaceError: 16,
+          maximumMemoryUsage: maximumMemoryUsage,
+          dynamicScreenSpaceError: false,
+          skipLevelOfDetail: true,
+          preferLeaves: true,
+          flyTo: false,
+          center: this.config.viewHome,
+        });
+        this.map.addLayer(this.mapLayer.tiles3dLayer);
+      }
+      if (show && this.mapLayer.tiles3dLayer)
+        this.mapLayer.tiles3dLayer.show = true;
+      if (!show && this.mapLayer.tiles3dLayer)
+        this.mapLayer.tiles3dLayer.show = false;
     },
     //2D - 3D点处理
     handle3dPoint() {
diff --git a/src/views/components/xiaoqu/mapSearchBox.vue b/src/views/components/xiaoqu/mapSearchBox.vue
new file mode 100644
index 0000000..042860f
--- /dev/null
+++ b/src/views/components/xiaoqu/mapSearchBox.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="search-box">
+    <div class="select-search">
+      <el-select
+        v-model="queryParmas.color"
+        placeholder="分色"
+        clearable
+        multiple
+        collapse-tags
+        :popper-append-to-body="false"
+      >
+        <el-option
+          v-for="dict in dict.type.b_color_type"
+          :key="dict.value"
+          :label="dict.label"
+          :value="dict.value"
+        ></el-option>
+      </el-select>
+      <el-select
+        v-model="queryParmas.parentid"
+        placeholder="网格"
+        clearable
+        :popper-append-to-body="false"
+        @change="handleNetwork"
+      >
+        <el-option
+          v-for="dict in networkOption"
+          :key="dict.dept_id"
+          :label="dict.dept_name"
+          :value="dict.dept_id"
+        ></el-option>
+      </el-select>
+    </div>
+    <el-checkbox-group v-model="checkList" @change="change">
+      <el-checkbox
+        :label="item.label"
+        v-for="(item, index) in multipleList"
+        :key="index"
+        :disabled="filterDisabled(item.label)"
+      ></el-checkbox>
+      <!-- disabled -->
+    </el-checkbox-group>
+    <el-checkbox label="三维图层" @change="handleMapLayer"></el-checkbox>
+  </div>
+</template>
+
+<script>
+import { getNetWorkId } from "@/api/home/index.js";
+import { mapGetters } from "vuex";
+export default {
+  dicts: ["b_color_type"],
+  computed: {
+    ...mapGetters(["mapParmas", "queryParamsXiaoqu"]),
+  },
+  data() {
+    return {
+      checkList: [],
+      networkOption: [],
+      multipleList: [
+        { key: "type", label: "户籍", value: 1 },
+        { key: "type", label: "流动", value: 2 },
+        { key: "isd", label: "中共党员", value: 1 },
+        { key: "isk", label: "帮扶对象", value: 1 },
+        { key: "isx", label: "重点人群", value: 1 },
+        { key: "isj", label: "退伍军人", value: 1 },
+      ],
+      queryParmas: {
+        parentid: undefined,
+        color: undefined,
+        type: undefined,
+        isd: undefined,
+        isk: undefined,
+        isx: undefined,
+        isj: undefined,
+      },
+    };
+  },
+  created() {
+    this.getNetworkList();
+  },
+  methods: {
+    async getNetworkList() {
+      let res = await getNetWorkId({
+        xiaoquId: this.queryParamsXiaoqu.xiaoquId,
+      });
+
+      this.networkOption = res.data["网格list"];
+    },
+    handleNetwork(e) {
+      let networkName = "";
+      if (e) {
+        networkName = this.networkOption.filter((item) => item.dept_id == e)[0]
+          .dept_name;
+        console.log(networkName);
+      }
+
+      this.$store.commit("CHANGE_QUERY_MAP", { networkName: networkName });
+    },
+    handleMapLayer(e) {
+      this.$store.commit("CHANGE_QUERY_MAP", { sd: e });
+    },
+    change(e) {
+      this.reset();
+      e.map((item) => {
+        let itemData = this.multipleList.filter((it) => it.label == item)[0];
+        this.queryParmas[itemData.key] = itemData.value;
+      });
+    },
+    filterDisabled(label) {
+      if (label == "户籍" || label == "流动") {
+        let letisTrue = this.checkList.some((item) => {
+          let text = label == "户籍" ? "流动" : "户籍";
+          return item == text;
+        });
+        return letisTrue;
+      } else {
+        return false;
+      }
+    },
+    reset() {
+      this.queryParmas.type = undefined;
+      this.queryParmas.isd = undefined;
+      this.queryParmas.isk = undefined;
+      this.queryParmas.isx = undefined;
+      this.queryParmas.isj = undefined;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.search-box {
+  position: absolute;
+  z-index: 20;
+  left: 400px;
+  top: 115px;
+  display: flex;
+  align-items: center;
+}
+::v-deep .el-checkbox {
+  margin-right: 4px;
+  font-size: 14px;
+  color: #cdfbff;
+  background: url("~@/assets/images/ui/btn_bg.png");
+  background-size: 100% 100%;
+  padding: 9px 15px 10px 15px;
+  .el-checkbox__label {
+    padding-left: 3px;
+  }
+}
+
+::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #cdfbff;
+}
+::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
+  background: #fff;
+}
+::v-deep .el-checkbox__inner::after {
+  border-color: #16aa2d;
+}
+
+::v-deep .select-search {
+  .el-select {
+    width: 130px;
+    .el-input {
+      background: transparent;
+    }
+    .el-input__inner {
+      height: 38px;
+      line-height: 30px;
+      color: #fff;
+      background: url("~@/assets/images/ui/img_btn_search.png");
+      background-size: 100% 100%;
+      border: 0px !important;
+    }
+    .el-input__inner::placeholder,
+    .el-select__caret {
+      color: #fff;
+    }
+  }
+}
+
+::v-deep .el-select__tags {
+  padding-left: 6px;
+  .el-tag--small {
+    height: 18px;
+    line-height: 18px;
+    padding: 0 5px;
+  }
+}
+</style>
diff --git a/src/views/xiaoqu.vue b/src/views/xiaoqu.vue
index 4a5d2d4..6430991 100644
--- a/src/views/xiaoqu.vue
+++ b/src/views/xiaoqu.vue
@@ -4,7 +4,11 @@
       :mainTitle="xiaoquIntroduce.deptName + '人口数据管理系统'"
       :showStreet="false"
     ></NavigationBar>
+
+    <mapSearchBox />
+
     <mars-map ref="map" :xiaoquId="queryParamsXiaoqu.xiaoquId"></mars-map>
+
     <foldpanelLeft :title="filterTitle()">
       <!-- 左侧显示逻辑 1.小区简介 < 2.网格简介 < 3.楼栋统计分析  -->
       <xiaoquInfo
@@ -38,6 +42,7 @@ import {
   xiaoquInfo,
   networkInfo,
   buildingStatistics,
+  mapSearchBox,
 } from "@/views/components/index.js";
 export default {
   data() {
@@ -52,6 +57,7 @@ export default {
     xiaoquInfo,
     networkInfo,
     buildingStatistics,
+    mapSearchBox,
   },
   computed: {
     ...mapGetters(["xiaoquIntroduce", "queryParamsXiaoqu"]),
diff --git a/vue.config.js b/vue.config.js
index 47a827d..468d827 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -18,7 +18,8 @@ module.exports = {
   // 部署生产环境和开发环境下的URL。
   // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
   // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
-  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
+  publicPath:
+    process.env.NODE_ENV === "production" ? "/demo/tc-community" : "/",
   // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
   outputDir: "dist",
   // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）