海绵城市的清单提交

src/components/ServiceTree.vue

@@ -0,0 +1,172 @@
+<template>
+  <div id="serviceTree" class="switch-left-active">
+    <div class="common-title">
+      <span>图层列表</span>
+    </div>
+    <div class="tree-content">
+      <el-tree
+          :data="treeData"
+          node-key="labelId"
+          @check-change="handleCheckChange"
+          ref="treeRef"
+          show-checkbox
+      >
+        <template #default="{ node, data }">
+          <span  class="custom-tree-label">{{ node.label }}</span>
+        </template>
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import {onMounted, ref, watch} from "vue";
+import {getServiceTree} from "@/service/http.js";
+import {AddSingleLayer} from "@/unit/map/addLayer.js";
+export default {
+  name: "ServiceTree",
+  props: {
+    serviceData: {
+      type: Array,
+      default: () => []  // 默认值为空数组
+    }
+  },
+  setup(props, {emit}) {
+    let treeData = ref([]);
+    const treeRef = ref(null);
+    const currentLayerList = ref([]);
+    function handleCheckChange(data,checked,indeterminate){
+      debugger
+      if(checked){
+        //没有,新增
+        currentLayerList.value.push(data);
+        AddSingleLayer({
+          id: data.labelId,
+          title: data.label,
+          visible: true,
+          wkid: 1,
+          url: data.ADDRESS,
+          type: "动态地图"
+        });
+      }else{
+        //有，移除
+        let index = currentLayerList.value.findIndex(item => item.labelId === data.labelId);
+        if(index > -1){
+          currentLayerList.value.splice(index,1);
+        }
+        AddSingleLayer({
+          id: data.labelId,
+          title: data.label,
+          visible: false,
+          wkid: 1,
+          url: data.ADDRESS,
+          type: "动态地图"
+        });
+      }
+    }
+    function getTreeData(){
+      // getServiceTree({
+      //   TYPE:"",
+      //   labelId:labelId
+      // }).then(res =>{
+      //   debugger
+      //   let resData =res.data.data.Rows[0].children;
+      //   treeData.value = resData;
+      // })
+      treeData.value = props.serviceData;
+    }
+    onMounted(()=>{
+      getTreeData()
+    })
+    return {
+      treeData,
+      treeRef,
+      handleCheckChange
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#serviceTree{
+  :deep{
+    .el-tree{
+      background: transparent !important;
+    }
+  }
+  .custom-tree-label{
+    font-size: 16px;
+  }
+  .custom-tree-group-icon{
+    position: absolute;
+    right: 100px;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+  }
+  .custom-tree-gl-icon{
+    position: absolute;
+    right: 70px;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+  }
+  .custom-tree-detail-icon{
+    position: absolute;
+    right: 40px;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+  }
+  .custom-tree-icon{
+    position: absolute;
+    right: 10px;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+  }
+  position: absolute;
+  z-index: 2;
+  left: 20px;
+  top: 87px;
+  width: 370px;
+  height: 553px;
+  background-color: rgba(0, 22, 52, 0.75);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  .common-title{
+    width: 100%;
+    height: 37px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background: url("@/assets/imgs/tkxbt.png") no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: stretch;
+    span {
+      font-family: YouSheBiaoTiHei;
+      font-weight: 400;
+      font-size: 20px;
+      color: #BBCDE6;
+      opacity: 1;
+      padding-left: 60px;
+      background: linear-gradient(0deg, #ACE5FF 0%, #FFFFFF 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .title-right{
+      padding-right: 60px;
+    }
+  }
+  .tree-content{
+    padding-top: 20px;
+    width: 100%;
+    height: 500px;
+  }
+}
+</style>

src/data/all-layers.js

@@ -0,0 +1,122 @@
+export const serviceGHLayer= [
+    {
+        "children": null,
+        "labelId": "D8503010320240601",
+        "label": "城市自建房",
+        "labelParentId": "2",
+        "labelCode": null,
+        "ID": "13",
+        "TYPE_DIR": "D",
+        "MAIN_CODE": "85",
+        "MAIN_NAME": "专题数据",
+        "SECOND_CODE": "03",
+        "SECOND_TYPE": null,
+        "TYPE_NAME": "城市自建房",
+        "CODE": "D85030103202406",
+        "U_CODE": "42",
+        "U_NAME": "上海市城乡建设和交通发展研究院",
+        "TIME": "2024-06-14",
+        "D_CODE": "D85030103202406",
+        "S_CODE": "D8503010320240601",
+        "ADDRESS": "https://serve2d21.gis.cn:6443/geoscene/rest/services/hmcs/sbdbq/MapServer",
+        "SHOWNAME": "id",
+        "TYPE": "动态地图",
+        "COORDINATE_SYSTEM": "1",
+        "STATE": "2",
+        //"TOKEN": "",
+        "UUID": "fc0e2233-c781-4521-a48e-9820fb81b110",
+        "SERVICE_TYPE": "1",
+        "TAGS_INDEX": 0
+    },
+    {
+        "children": null,
+        "labelId": "D8503010420240601",
+        "label": "农村经营性自建房",
+        "labelParentId": "2",
+        "labelCode": null,
+        "ID": "13",
+        "TYPE_DIR": "D",
+        "MAIN_CODE": "85",
+        "MAIN_NAME": "专题数据",
+        "SECOND_CODE": "03",
+        "SECOND_TYPE": null,
+        "TYPE_NAME": "农村经营性自建房",
+        "CODE": "D85030104202406",
+        "U_CODE": "42",
+        "U_NAME": "上海市城乡建设和交通发展研究院",
+        "TIME": "2024-06-14",
+        "D_CODE": "D85030104202406",
+        "S_CODE": "D8503010420240601",
+        "ADDRESS": "https://serve2d21.gis.cn:6443/geoscene/rest/services/hmcs/tbdbq/MapServer",
+        "SHOWNAME": "id",
+        "TYPE": "动态地图",
+        "COORDINATE_SYSTEM": "1",
+        "STATE": "2",
+        //"TOKEN": "",
+        "UUID": "9c79e9c9-1236-485a-a92a-aa25a3a6acb6",
+        "SERVICE_TYPE": "1",
+        "TAGS_INDEX": 0
+    },
+    {
+        "children": null,
+        "labelId": "D5005004820240401",
+        "label": "自建房",
+        "labelParentId": "2",
+        "labelCode": null,
+        "ID": "3",
+        "TYPE_DIR": "D",
+        "MAIN_CODE": "50",
+        "MAIN_NAME": "网格化管理",
+        "SECOND_CODE": "05",
+        "SECOND_TYPE": null,
+        "TYPE_NAME": "自建房",
+        "CODE": "D50050048202404",
+        "U_CODE": "42",
+        "U_NAME": "上海市城乡建设和交通发展研究院",
+        "TIME": "2024-04-08",
+        "D_CODE": "D50050048202404",
+        "S_CODE": "D5005004820240401",
+        "ADDRESS": "https://serve2d31.gis.cn:6443/geoscene/rest/services/topic-nfcf/nczjf/MapServer",
+        "SHOWNAME": "OBJECTID",
+        "TYPE": "动态地图",
+        "COORDINATE_SYSTEM": "1",
+        "STATE": "2",
+        //"TOKEN": "",
+        "UUID": "cb8931e3-710d-4e94-8701-f1ab2aad56c7",
+        "SERVICE_TYPE": "1",
+        "TAGS_INDEX": 0
+    }
+]
+
+
+export const serviceGLLayer= [
+    {
+        "children": null,
+        "labelId": "D8503010320240601",
+        "label": "城市自建房",
+        "labelParentId": "2",
+        "labelCode": null,
+        "ID": "13",
+        "TYPE_DIR": "D",
+        "MAIN_CODE": "85",
+        "MAIN_NAME": "专题数据",
+        "SECOND_CODE": "03",
+        "SECOND_TYPE": null,
+        "TYPE_NAME": "城市自建房",
+        "CODE": "D85030103202406",
+        "U_CODE": "42",
+        "U_NAME": "上海市城乡建设和交通发展研究院",
+        "TIME": "2024-06-14",
+        "D_CODE": "D85030103202406",
+        "S_CODE": "D8503010320240601",
+        "ADDRESS": "https://serve2d21.gis.cn:6443/geoscene/rest/services/hmcs/sbdbq/MapServer",
+        "SHOWNAME": "id",
+        "TYPE": "动态地图",
+        "COORDINATE_SYSTEM": "1",
+        "STATE": "2",
+        //"TOKEN": "",
+        "UUID": "fc0e2233-c781-4521-a48e-9820fb81b110",
+        "SERVICE_TYPE": "1",
+        "TAGS_INDEX": 0
+    }
+]

src/views/c-views/visualizationPart/planningPlan/planningPlan.vue

@@ -1,7 +1,27 @@
 <template>
   <div id="planningPlan">
     <VisualizationHeader />
-    <Map :serviceNos="['D9999990620240701','D9999990520240701']" />
+    <service-tree :serviceData="serviceGHLayer"  />
+    <Map />
+    <div class="right">
+      <div class="top">
+        图例
+      </div>
+      <div class="tuli-content">
+        <div class="single-item">
+          <div class="single-color-1"></div>
+          <span>不达标的市政人行步行道长度</span>
+        </div>
+        <div class="single-item">
+          <div class="single-color-2"></div>
+          <span>存在乱停乱放车辆问题的道路</span>
+        </div>
+        <div class="single-item">
+          <div class="single-color-3"></div>
+          <span>查找存在失管问题的内部道路数量</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,18 +31,71 @@ import HouseBuildingRight from "@/views/c-views/visualizationPart/houseBuilding/
 import Map from "@/views/c-cpns/Map.vue";
 import TreeMenu from "@/views/c-cpns/TreeMenu.vue";
 import VisualizationHeader from "@/views/c-cpns/VisualizationHeader.vue";
-import ServiceTree from "@/views/c-cpns/ServiceTree.vue";
-
+import ServiceTree from "@/components/ServiceTree.vue";
+import {serviceGHLayer} from "@/data/all-layers.js";
 export default {
   name: "PlanningPlan",
-  components: {ServiceTree, VisualizationHeader, HouseBuildingLeft, HouseBuildingRight, TreeMenu, Map}
+  components: {ServiceTree, VisualizationHeader, HouseBuildingLeft, HouseBuildingRight, TreeMenu, Map},
+  setup(){
+    return{
+      serviceGHLayer
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
-#houseBuilding {
+#planningPlan {
   position: absolute;
   width: 100%;
+  height: 100%;
   z-index: 2;
+  .right{
+    background: rgba(29, 93, 160, 0.7);
+    position: absolute;
+    right: 80px;
+    bottom:100px;
+    z-index: 2;
+    width:300px;
+    height:150px;
+    padding: 8px;
+    .top{
+      font-size: 20px;
+      font-weight: bold;
+      color: #fff;
+      padding-bottom: 8px;
+    }
+    .tuli-content{
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      .single-item{
+        width: 100%;
+        display: flex;
+        padding: 4px;
+        span{
+          padding-left: 4px;
+          font-size: 16px;
+          color: #FFF;
+        }
+        .single-color-1{
+          width: 40px;
+          height: 20px;
+          background-color: rgb(230, 140, 101);
+        }
+        .single-color-2{
+          width: 40px;
+          height: 20px;
+          background-color: rgb(148, 2, 49);
+        }
+        .single-color-3{
+          width: 40px;
+          height: 20px;
+          background-color: rgb(230, 153, 115);
+        }
+      }
+    }
+
+  }
 }
 </style>

src/views/c-views/visualizationPart/projectManagement/projectManagement.vue

@@ -1,24 +1,90 @@
 <template>
   <div id="projectManagement">
     <VisualizationHeader />
-    <Map :serviceNos="['D9999990320240701']" />
+    <service-tree :serviceData="serviceGLLayer" />
+    <Map />
+    <div class="right">
+      <div class="top">
+        图例
+      </div>
+      <div class="tuli-content">
+        <div class="single-item">
+          <div class="single-color-1"></div>
+          <span>不达标的市政人行步行道长度</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Map from "@/views/c-cpns/Map.vue";
 import VisualizationHeader from "@/views/c-cpns/VisualizationHeader.vue";
-
+import ServiceTree from "@/components/ServiceTree.vue";
+import {serviceGLLayer} from "@/data/all-layers.js";
 export default {
   name: "projectManagement",
-  components: { VisualizationHeader, Map}
+  components: { ServiceTree,VisualizationHeader, Map},
+  setup(){
+    return{
+      serviceGLLayer
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
-#houseBuilding {
+#projectManagement {
   position: absolute;
   width: 100%;
+  height: 100%;
   z-index: 2;
+  .right{
+    background: rgba(29, 93, 160, 0.7);
+    position: absolute;
+    right: 80px;
+    bottom:100px;
+    z-index: 2;
+    width:300px;
+    height:150px;
+    padding: 8px;
+    .top{
+      font-size: 20px;
+      font-weight: bold;
+      color: #fff;
+      padding-bottom: 8px;
+    }
+    .tuli-content{
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      .single-item{
+        width: 100%;
+        display: flex;
+        padding: 4px;
+        span{
+          padding-left: 4px;
+          font-size: 16px;
+          color: #FFF;
+        }
+        .single-color-1{
+          width: 40px;
+          height: 20px;
+          background-color: rgb(230, 140, 101);
+        }
+        .single-color-2{
+          width: 40px;
+          height: 20px;
+          background-color: rgb(148, 2, 49);
+        }
+        .single-color-3{
+          width: 40px;
+          height: 20px;
+          background-color: rgb(230, 153, 115);
+        }
+      }
+    }
+
+  }
 }
 </style>