1.添加vuex存储资源目录值 , 2.将zyml数据存入Vuex用于资源目录数据的展示 3.拆分整合新的组件完成地图的加载与资源目录的展示与获取. 4.完成切换获取分析规划刷新资源目录

website/src/store/ghbzgl/xmgl.js

@@ -2,7 +2,8 @@ const xmgl = {
     state: {
         fileviewSrc: {}, //详细信息
         // 用于存储传递的id
-        transfer: {}
+        transfer: {},
+        zymlData: null // 规划差异分析资源目录值
     },
     mutations: {
         SET_FILEVIEWSRC(state, value) {
@@ -11,6 +12,9 @@ const xmgl = {
         SET_TRANSFER(state, value) {
             state.transfer = value
         },
+        SET_ZYMLDATA(state, value) {
+            state.zymlData = value
+        },
     },
     actions: {
 

website/src/views/ghfxpj/Cyfx.vue

@@ -146,7 +146,7 @@ import {
 } from "@vue/runtime-core";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
-import { SjyList, Cyfxjg, } from "@/api/ghfxpj/cyfxApi.js";
+import { SjyList, Cyfxjg } from "@/api/ghfxpj/cyfxApi.js";
 import range from "@/components/mapview/range/range.vue";
 import { ElMessage } from "element-plus";
 import EsriJSON from "ol/format/EsriJSON";
@@ -205,6 +205,10 @@ export default {
           if (res.statuscode === 200) {
             fxsz.cyjgList = res.data.fxjg;
             fxsz.calculateSpan();
+            // 将zyml数据存入Vuex用于资源目录数据的展示
+            if (res.data.zyml) {
+              store.commit("SET_ZYMLDATA", res.data.zyml);
+            }
           }
         });
       },

website/src/views/ghfxpj/gtkjfxyy/Mapview.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="map-box max-box posi-rel">
+    <!-- <div id="fullscreen" class="fullscreen"> -->
+    <div
+      id="mapDiv"
+      @contextmenu.prevent="mouseclick"
+      @mouseenter="enter(index)"
+      @mouseleave="leave()"
+      class="mapitem max-width"
+    >
+      <div v-show="seen" id="lonlat" class="lonlat"></div>
+      <!-- 右键菜单 -->
+      <!-- <MouseMenu :touch="touch" v-model:menu="modulelist.menu"></MouseMenu> -->
+      <!-- 透明度5 -->
+      <Transparency v-if="$store.state.zyll.transparency.sign"></Transparency>
+    </div>
+    <!-- 卷帘滑块 -->
+
+    <!-- 工具栏 -->
+    <slot name="tool">
+      <Tool></Tool>
+    </slot>
+    <RightLayer v-if="rightlayer"></RightLayer>
+    <!-- 切换 -->
+    <BaseMap></BaseMap>
+    <!-- 图例 -->
+    <LegEnd></LegEnd>
+    <!-- <div class="posi-abs tbmenu flex-box align-center justify-center">
+        <span class="iconfont icon-043caidan font-24"></span>
+        
+      </div> -->
+    <!-- </div> -->
+    <!-- 经济图层数据统计图表 -->
+    <transition name="el-zoom-in-bottom">
+      <JJCharts v-show="$store.state.zyll.JJStatisticData.visibled"></JJCharts>
+    </transition>
+    <!-- 专题图制图弹窗 -->
+    <transition name="el-zoom-in-top">
+      <ZTT v-if="$store.state.mapData.zttInfo.ZTT"></ZTT>
+    </transition>
+    <!-- 专题图制图详情弹窗 -->
+    <transition name="el-zoom-in-top">
+      <ZTTXQ v-if="$store.state.mapData.zttInfo.ZTTXQ"></ZTTXQ>
+    </transition>
+  </div>
+</template>
+<script>
+import "ol/ol.css";
+// import "cesium/Widgets/Widgets.css";
+import myMap from "@/utils/map.js";
+import arcMap from "@/utils/map.js";
+
+import { onMounted, reactive, toRefs } from "vue";
+import Tool from "@/components/mapview/tool";
+import Transparency from "@/components/mapview/transparency";
+import BaseMap from "@/components/mapview/basemap";
+import LegEnd from "@/components/mapview/legend";
+import JJCharts from "@/components/mapview/statistic/jingji/charts.vue";
+import ZTT from "@/components/mapview/ztt/zttzt.vue";
+import ZTTXQ from "@/components/mapview/ztt/zttxq.vue";
+import RightLayer from "@/views/ghfxpj/gtkjfxyy/rightLayer";
+
+import { FullScreen, ZoomToExtent } from "ol/control";
+export default {
+  components: {
+    Tool,
+    Transparency,
+    BaseMap,
+    LegEnd,
+    RightLayer,
+    JJCharts,
+    ZTT,
+    ZTTXQ
+  },
+  props: {
+    rightlayer: {
+      type: Boolean,
+      default: false,
+    },
+    click: {
+      type: Boolean,
+      default: false,
+    },
+    baseLayer: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  setup(prop) {
+    onMounted(() => {
+      var option = Object.assign({}, prop.baseLayer, { click: prop.click });
+      myMap.loadMap("mapDiv", option);
+      myMap.LonLatDisplay();
+      var _full = new FullScreen({ tipLabel: "全屏" });
+      myMap.map.addControl(_full);
+
+      var _extent = new ZoomToExtent({
+        extent: MapCenter.extent,
+        tipLabel: "全图",
+      });
+      myMap.map.addControl(_extent);
+
+      var _zoom = myMap.map.controls
+        .getArray()
+        .filter((t) => t.element.classList.contains("ol-zoom"))[0];
+      if (_zoom) {
+        _zoom.element.appendChild(_full.element);
+        _zoom.element.appendChild(_extent.element);
+      }
+    });
+    const mapview = reactive({
+      seen: false,
+      current: 0,
+      enter(index) {
+        this.seen = true;
+        this.current = index;
+      },
+      leave() {
+        this.seen = false;
+        this.current = null;
+      },
+    });
+    return { ...toRefs(mapview) };
+  },
+};
+</script>
+<style>
+.fullscreen:-webkit-full-screen {
+  height: 100%;
+  margin: 0;
+}
+.fullscreen:-ms-fullscreen {
+  height: 100%;
+}
+
+.fullscreen:fullscreen {
+  height: 100%;
+}
+.fullscreen {
+  width: 100%;
+  height: 100%;
+}
+</style>
+<style lang="less" scoped>
+.map-box {
+  overflow: hidden;
+  display: flex;
+}
+#cesiumContainer {
+  width: 100%;
+  height: 100%;
+  .cesium-viewer {
+    width: 100%;
+    height: 100%;
+  }
+}
+.mapitem {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  overflow: hidden;
+  :deep(.ol-control) {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  :deep(.ol-full-screen),
+  :deep(.ol-zoom-extent) {
+    position: initial;
+    padding-left: 0px;
+  }
+  .lonlat {
+    position: absolute;
+    width: 260px;
+    padding: 2px 5px;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.3);
+    bottom: 0px;
+    right: 10px !important;
+    font-size: 14px;
+    text-align: right;
+    color: #fff !important;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+}
+#lonlat {
+  position: absolute;
+  bottom: 0px;
+  right: 10px;
+  z-index: 3;
+  cursor: pointer;
+  transition: right 0.4s;
+}
+
+#lonlat .lonlat {
+  display: inline-flex;
+}
+
+#lonlat .lonlat > div {
+  width: 95px;
+}
+#lonlat .qmmap-scalebar {
+  position: absolute;
+  right: 200px;
+  bottom: 0px;
+  line-height: 18px;
+  color: #333;
+  font-size: 10px;
+  bottom: 0;
+  right: 0;
+  background: rgba(254, 254, 254, 0.68);
+  padding: 1px 3px;
+  font-family: Arial, Helvetica, SimSun, sans-serif;
+}
+
+.tbmenu {
+  bottom: 10px;
+  left: 10px;
+  width: 33px;
+  height: 35px;
+  background-color: #fff;
+  box-shadow: 2px 2px 8px #888888;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.tbmenu:hover {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+</style>

website/src/views/ghfxpj/gtkjfxyy/ghcyfx.vue

@@ -58,7 +58,7 @@
   <script>
 import errorLog from "@/components/ghfxpj/wtsbztyy/errorLog.vue";
 import Fxsz from "@/views/ghfxpj/Cyfx.vue";
-import Mapview from "@/views/mapview/Mapview.vue"; //地图插件
+import Mapview from "@/views/ghfxpj/gtkjfxyy/Mapview.vue"; //地图插件
 import arcMap from "@/utils/arcMap.js";
 import { GetByBsms } from "@/api/ghyzt/zzllApi.js";
 import { reactive, toRefs, ref } from "@vue/reactivity";

website/src/views/ghfxpj/gtkjfxyy/rightLayer.vue

@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <div class="tool flex-box align-center">
+      <div class="flex-box tool-right max-height align-center justify-center">
+        <div class="pointer cooperation pointer" @click="tabChange">
+          <i class="iconfont icon-zyln font-18"></i>
+        </div>
+        <transition name="el-zoom-in-top">
+          <div
+            v-show="tabZt"
+            class="posi-abs right-0 top-50 rightlayer"
+            style="background-color: #fff"
+          >
+            <ZYMU
+              @changCollect="changCollect"
+              :currentRemoveCollect="currentRemoveCollect"
+            ></ZYMU>
+          </div>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ZYMU from "@/views/ghfxpj/gtkjfxyy/zymu.vue";
+import { reactive, ref, toRefs, watch, onMounted } from "vue";
+import myMap from "@/utils/map.js";
+import arcMap from "@/utils/arcMap.js";
+import { GetAttrs } from "@/api/ghyzt/zzllApi";
+import { useStore } from "vuex";
+export default {
+  components: {
+    ZYMU,
+  },
+  setup(prop, context) {
+    const activeName = ref("资源目录");
+    var Arcgis = arcMap;
+    var GeoServer = myMap;
+    const store = useStore();
+    watch(
+      () => [store.state.zyll.zylist],
+      ([count]) => {
+        rightlayer.setlist(count, store.state.zyll.legendList);
+      }
+    );
+    const rightlayer = reactive({
+      currentCollect: {},
+      currentRemoveCollect: {},
+      currentVisibleCollect: {},
+      list: [],
+      tabZt: false,
+      count: 0,
+      tabChange() {
+        if (rightlayer.count < 1) {
+          rightlayer.tabZt = true;
+          rightlayer.count++;
+        } else {
+          rightlayer.tabZt = false;
+          rightlayer.count = 0;
+        }
+      },
+      changCollect(e) {
+        rightlayer.currentCollect = e;
+      },
+      removeCollect(e) {
+        rightlayer.currentRemoveCollect = e;
+      },
+      visibleCollect(e) {
+        rightlayer.currentVisibleCollect = e;
+      },
+      setlist(data, legend) {
+        rightlayer.list = [];
+        data.forEach((item) => {
+          if (item.url && !myMap.getLayer(item.url)) {
+            var mapType = item.server_type;
+            arcMap[item.type](item);
+          }
+          if (item.legend && item.legendState != true) {
+            arcMap.getLegend(item.url, function (res) {
+              if (res) {
+                item.legends = res[0].legend;
+                item.legendState = true;
+                store.commit("SET_LEGEND", { ...item, state: true });
+              }
+            });
+          }
+          if (item.sfcx && !item.attrs) {
+            GetAttrs({ bsm: item.fzbsm || item.bsm }).then((res) => {
+              item.attrs = res.data;
+              rightlayer.list.push({
+                ...item,
+                sign: true,
+              });
+            });
+            return;
+          } else {
+            if (item.state == false) {
+              rightlayer.list.push({
+                ...item,
+                sign: false,
+              });
+              return;
+            }
+            rightlayer.list.push({
+              ...item,
+              sign: true,
+            });
+          }
+        });
+      },
+    });
+    return { activeName, ...toRefs(rightlayer) };
+  },
+};
+</script>
+<style lang="less" scoped>
+.rightlayer {
+  width: 330px !important;
+  padding: 10px;
+  padding-top: 0px;
+  height: 450px;
+  overflow: hidden;
+  :deep(.zttc),
+  :deep(.sc-list) {
+    height: 430px !important;
+    overflow-y: auto;
+    margin-top: 10px;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background-color: #c6def5;
+    }
+  }
+  :deep(.sc-list) {
+    height: 370px !important;
+  }
+  :deep(.el-tabs__header) {
+    margin-bottom: 0;
+  }
+  :deep(.el-dropdown-menu__item) {
+    display: block;
+  }
+  .search_ipt {
+    padding-top: 5px;
+    width: 94%;
+  }
+
+  .el-checkbox-group {
+    height: 300px;
+    overflow-y: auto;
+  }
+  .sc-list::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  .sc-list::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: #c6def5;
+  }
+}
+.tool {
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  height: 32px;
+}
+.tool-left {
+  background-color: #fff;
+  padding: 0px 15px;
+  border-radius: 4px;
+}
+.tool-right {
+  background-color: #fff;
+  padding: 0px 8px;
+  box-shadow: 1px 1px 1px 1px #d2d2d2;
+  border-radius: 4px;
+  border-top: 1px solid #e5e5e5;
+  border-left: 1px solid #e5e5e5;
+}
+:deep(.el-dropdown-menu__item) {
+  color: unset !important;
+  padding: 0px;
+  line-height: unset;
+}
+:deep(.el-dropdown-menu__item):hover {
+  background: unset !important;
+  color: unset !important;
+  cursor: unset !important;
+}
+:deep(.el-popper) {
+  top: 80px !important;
+}
+</style>
+<style>
+.tool .pointer {
+  font-size: 16px;
+}
+</style>

website/src/views/ghfxpj/gtkjfxyy/zymu.vue

@@ -0,0 +1,273 @@
+<template>
+  <div>
+    <!-- <el-input
+      placeholder="请输入图层名称"
+      prefix-icon="Search"
+      size="small"
+      v-model="search"
+      class="search_ipt"
+    >
+    </el-input> -->
+    <div class="zttc flex-box column">
+      <el-tree
+        :data="datas.treeList"
+        :props="defaultProps"
+        node-key="bsm"
+        show-checkbox
+        @check="handleNodeClick"
+        :filter-node-method="filterNode"
+        ref="tree"
+      >
+        <template #default="{ node, data }">
+          <span class="custom-tree-node max-width">
+            <el-tooltip
+              v-if="data.parent == '0'"
+              class="item"
+              effect="dark"
+              placement="right"
+            >
+              <template #content
+                >入库人：{{ data.createperson }} <br />入库时间：{{
+                  data.datetime
+                }}</template
+              >
+              <span :class="data.disabled ? 'treetitle ' : ''">{{
+                node.label
+              }}</span>
+            </el-tooltip>
+            <span v-else :class="data.disabled ? 'treetitle ' : ''">{{
+              node.label
+            }}</span>
+
+            <!-- <span
+              v-if="!data.children"
+              style="float: right; margin-right: 15px"
+              @click="changCollect(data)"
+            >
+              <i
+                class="iconfont icon-041xingxing"
+                style="vertical-align: middle"
+                v-if="data.my == null || data.my == false"
+              ></i>
+              <i
+                class="iconfont icon-xingxing2"
+                v-else
+                style="vertical-align: middle; color: #eab565"
+              ></i>
+            </span> -->
+          </span>
+        </template>
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import { toRefs, onMounted, reactive, ref, watch } from "vue";
+import * as api from "@/api/ghyzt/zzllApi";
+import { useStore } from "vuex";
+export default {
+  props: {
+    currentRemoveCollect: {
+      type: Object,
+    },
+  },
+  setup(prop, context) {
+    const defaultProps = {
+      children: "children",
+      label: "label",
+      disabled: (data, node) => {
+        // parent == '0':服务资源，1:目录 sjlx附件 type图层服务
+        if (data.parent == "0") {
+          return false;
+        } else {
+          // 2023/5/7 修改 多图层一键开启关闭功能
+          // 子级全部为图层，图层同级没有目录或附件，则上一级目录节点显示复选框
+          let state = false;
+          if (data.children.length > 0) {
+            state = data.children.every((item) => {
+              return item.parent == "0" && !item.sjlx;
+            });
+          }
+          return !state;
+        }
+      },
+    };
+    const store = useStore();
+    const tree = ref(null);
+    let search = ref("");
+    let datas = reactive({
+      treeList: [],
+      getList() {
+        // 从Vuex获取zyml数据，替代原接口调用
+        let zymlData = store.state.xmgl.zymlData;
+        console.log(zymlData, "zymlData");
+        if (zymlData) {
+          var temp = {};
+          var list = [];
+          var zytc = [];
+          zymlData.forEach((item, index) => {
+            if (item.parent == "0" && !item.sjlx) {
+              zytc.push({
+                name: item.name,
+                bsm: item.bsm,
+              });
+            }
+            temp[item.bsm] = item;
+            item.label = item.name;
+            if (item.parent) {
+              item.children = [];
+            }
+            if (item.pbsm) {
+              try {
+                temp[item.pbsm].children.push(item);
+              } catch {
+                // 错误处理保持不变
+              }
+            } else {
+              list.push(item);
+            }
+            if (item.count > 0) {
+              item.name = item.name + "   [" + item.count + "]";
+            }
+          });
+          datas.treeList = list;
+          store.commit("SET_ZYTC", zytc);
+        }
+      },
+      changCollect(item) {
+        api.Collect({ bsm: item.bsm }).then((res) => {
+          if (res.success) {
+            item.my = !item.my;
+            context.emit("changCollect", item);
+          }
+        });
+      },
+    });
+    let checkedKeys = [];
+    onMounted(() => {
+      datas.getList();
+    });
+    const collection = (node, data) => {
+      console.log(node, data);
+    };
+    watch(
+      () => store.state.xmgl.zymlData,
+      (newVal) => {
+        datas.getList();
+      }
+    );
+    watch(
+      () => prop.currentRemoveCollect,
+      (item) => {
+        datas.getList();
+      }
+    );
+    watch(
+      () => store.state.zyll.czzyId,
+      (count, prevCount) => {
+        switch (count.num) {
+          case 9:
+            /* ..删除图层改变tree.. */
+            delTreeNode(count.bsm);
+            break;
+        }
+      }
+    );
+    watch(
+      () => store.state.zyll.zylist,
+      (list, prevCount) => {
+        var c = [];
+        list.map((item) => {
+          c.push(item.bsm);
+        });
+        tree.value.setCheckedKeys(c, true);
+        checkedKeys = c;
+      }
+    );
+    const delTreeNode = (bsm) => {
+      tree.value.setChecked(bsm, false);
+      resetDom(bsm);
+    };
+    // 重新设置部分图层组件
+    const resetDom = (bsm) => {
+      // 属性表
+      store.state.zyll.czzyId = "";
+      store.state.zyll.zylist = store.state.zyll.zylist.filter((item) => {
+        return bsm != item.bsm;
+      });
+      // 属性过滤
+      store.state.zyll.queryfilter.bsm == bsm &&
+        store.commit("SET_QUERYFILTER", {});
+      // 图层对比
+      store.state.zyll.screencontrast = store.state.zyll.screencontrast.filter(
+        (item) => {
+          return bsm != item.bsm;
+        }
+      );
+    };
+    // 返回当前点击节点的数据
+    const handleNodeClick = (data, checked) => {
+      if (data.parent == "0") {
+        store.commit("SET_ZYLIST", data);
+      } else {
+        store
+          .dispatch("MULTI_SET_ZYLIST", { data, checked })
+          .then((res) => {
+            // console.log(res);
+          })
+          .catch((e) => {
+            console.log(e);
+          });
+      }
+    };
+    // 过滤
+    watch(search, (newValue, oldValue) => {
+      tree.value.filter(newValue);
+    });
+    const filterNode = (value, data) => {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    };
+    return {
+      ...toRefs(datas),
+      search,
+      defaultProps,
+      handleNodeClick,
+      filterNode,
+      tree,
+      datas,
+      collection,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.search_ipt {
+  width: 94%;
+  margin: 10px;
+  height: 30px !important;
+}
+.zttc {
+  height: calc(100vh - 170px);
+  overflow: auto;
+  :deep(.el-tree-node__label) {
+    font-size: 16px !important;
+    line-height: 25px;
+  }
+  .treetitle  {
+    //margin-left: -10px;
+  }
+}
+</style>
+<style lang="less">
+.zttc  {
+    .el-tree {
+    // 不可全选样式
+    .el-tree-node .is-disabled {
+      display: none;
+    }
+  }
+}
+</style>

website/src/views/ghss/Xmhgfx.vue

@@ -3,7 +3,7 @@
     <el-row class="max-box">
       <el-col :span="6" v-loading="loading">
         <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
-          <el-tab-pane label="合规性检查" name="hgxsc">
+          <el-tab-pane label="合规性检查222" name="hgxsc">
             <Hgxsc
               v-model:tableData="tableData"
               v-model:form="form"