zzy + 元数据加载

src/assets/init.scss

@@ -8,6 +8,9 @@ html,
   padding: 0;
   margin: 0;
 }
+.content-center{
+  background-color: rgba(1, 44, 84, 0.96) !important;
+}
 .scroll{
   overflow: auto;
   &::-webkit-scrollbar {

src/data/all-forms.js

@@ -0,0 +1,302 @@
+export const myCollectionDetailDialogResourceForm ={
+    formItemsArr:[
+        {
+            type:'input',
+            label:'资源名称',
+            modelValue:'NAME'
+        },
+        {
+            type:'input',
+            label:'发布单位',
+            modelValue:'UNIT'
+        },
+        {
+            type:'input',
+            label:'资源分类',
+            modelValue: 'R_TYPE'
+        },
+        {
+            type:'input',
+            label:'行业大类',
+            modelValue: 'MENU'
+        },
+        {
+            type:'input',
+            label:'资源中类',
+            modelValue: 'CLASSNAME'
+        },
+        {
+            type:'input',
+            label:'资源小类',
+            modelValue: 'SMALL'
+        },
+        {
+            type:'input',
+            label:'发布人员',
+            modelValue: 'REG_USER'
+        },
+        {
+            type:'input',
+            label:'发布时间',
+            modelValue: 'REG_TIME'
+        },
+        {
+            type:'input',
+            label:'更新人员',
+            modelValue: 'UPDATE_USER'
+        },
+        {
+            type:'input',
+            label:'更新时间',
+            modelValue: 'UPDATE_TIME'
+        },
+        {
+            type:'textarea',
+            label:'资源说明',
+            colClass:'el-col-24',
+            modelValue: 'DES'
+        },
+    ],
+    formAttrs:{
+        'label-width':'10em',
+        disabled:true
+    }
+}
+export const myCollectionDetailDialogServiceForm ={
+    formItemsArr:[
+        {
+            type:'input',
+            label:'服务名称',
+            modelValue:'S_NAME'
+        },
+        {
+            type:'input',
+            label:'所属单位',
+            modelValue:'UNIT'
+        },
+        {
+            type:'input',
+            label:'更新时间',
+            modelValue: 'UPDATE_TIME'
+        },
+        {
+            type:'input',
+            label:'服务类型',
+            modelValue: 'SERVICE_TYPE'
+        },
+        {
+            type:'input',
+            label:'服务地址',
+            modelValue: 'serviceUrl'
+        },
+    ],
+    formAttrs:{
+        'label-width':'10em',
+        disabled:true
+    }
+}
+export const resourceDetailDialogBmForm = {
+    formItemsArr:[
+        {
+            type:'input',
+            label:'资源编码',
+            modelValue:'CODE_DIR'
+        },
+        {
+            type:'input',
+            label:'元数据编码',
+            modelValue: 'CODE'
+        },
+        {
+            type:'input',
+            label:'数据集中文全称',
+            modelValue: 'FCHNAME'
+        },
+        {
+            type:'input',
+            label:'数据集英文全称',
+            modelValue: 'FEGNAME'
+        },
+        {
+            type:'input',
+            label:'版本号',
+            modelValue: 'VERSION'
+        },
+        {
+            type:'input',
+            label:'出版日期',
+            modelValue: 'PUBLISH'
+        },
+    ],
+    formAttrs:{
+        'label-width':'10em',
+        disabled:true
+    }
+}
+export const resourceDetailDialogDataIntroForm = {
+    formItemsArr:[
+        {
+            type:'input',
+            label:'比例尺',
+            modelValue:'SCALE'
+        },
+        {
+            type:'input',
+            label:'分辨率',
+            modelValue: 'PPI'
+        },
+        {
+            type:'input',
+            label:'空间数据表现类型',
+            modelValue: 'KJDATATYPE'
+        },
+        {
+            type:'input',
+            label:'数据格式',
+            modelValue: 'DATATYPE'
+        },
+        {
+            type:'input',
+            label:'数据集语言',
+            modelValue: 'DATALANGUAGE'
+        },
+    ],
+    formAttrs:{
+        'label-width':'10em',
+        disabled:true
+    }
+}
+export const resourceDetailDialogDlForm = {
+    formItemsArr:[
+        {
+            type:'input',
+            label:'西部边界坐标',
+            modelValue:'WEST'
+        },
+        {
+            type:'input',
+            label:'东部边界坐标',
+            modelValue:'EAST'
+        },
+        {
+            type:'input',
+            label:'南部边界坐标',
+            modelValue:'SOUTH'
+        },
+        {
+            type:'input',
+            label:'北部边界坐标',
+            modelValue:'NORTH'
+        },
+        {
+            type:'input',
+            label:'地理区域名称',
+            modelValue:'DISTRICT_NAME'
+        },
+    ],
+    formAttrs:{
+        'label-width':'10em',
+        disabled:true
+    }
+}
+export const resourceDetailDialogLimitForm = {
+    formItemsArr:[
+        {
+            type:'input',
+            label:'访问限制',
+            modelValue:'CALLABLE'
+        },
+        {
+            type:'input',
+            label:'使用限制',
+            modelValue:'USABLE'
+        }
+    ],
+    formAttrs:{
+        'label-width':'10em',
+        disabled:true
+    }
+}
+export const resourceDetailDialogSjjForm = {
+    formItemsArr:[
+        {
+            type:'input',
+            label:'摘要',
+            modelValue:'ABSTRACT'
+        },
+        {
+            type:'input',
+            label:'目的',
+            modelValue: 'PURPOSE'
+        },
+        {
+            type:'input',
+            label:'进展',
+            modelValue: 'PROGRESS'
+        },
+        {
+            type:'input',
+            label:'维护及更新频率',
+            modelValue: 'UPDATEFREQUENCY'
+        },
+        {
+            type:'input',
+            label:'专题分类',
+            modelValue: 'TITLE'
+        },
+        {
+            type:'input',
+            label:'关键字',
+            modelValue: 'KEYWORDS'
+        },
+    ],
+    formAttrs:{
+        'label-width':'10em',
+        disabled:true
+    }
+}
+export const resourceDetailDialogUnitForm = {
+    formItemsArr:[
+        {
+            type:'input',
+            label:'单位名称',
+            modelValue:'UNIT_NAME'
+        },
+        {
+            type:'input',
+            label:'单位祥址',
+            modelValue: 'ADDRESS'
+        },
+        {
+            type:'input',
+            label:'负责人名称',
+            modelValue: 'MANAGER'
+        },
+        {
+            type:'input',
+            label:'邮政编码',
+            modelValue: 'ZIPCODE'
+        },
+        {
+            type:'input',
+            label:'电子邮箱',
+            modelValue: 'MAIL'
+        },
+        {
+            type:'input',
+            label:'电话号码',
+            modelValue: 'TELEPHONE'
+        },
+        {
+            type:'input',
+            label:'传真号码',
+            modelValue: 'FAXNUM'
+        },
+    ],
+    formAttrs:{
+        'label-width':'10em',
+        disabled:true
+    }
+}
+
+

src/data/all-headers.js

@@ -0,0 +1,74 @@
+export const sjxHeaders = [
+    {
+        prop:"ATTRIBUTE_NAME",
+        label:"属性名称"
+    },
+    {
+        prop:"FIELD_TYPE",
+        label:"字段类型"
+    },
+    {
+        prop:"FIELD_LENGTH",
+        label:"长度"
+    },
+    {
+        prop:"DECIMAL_PLACES",
+        label:"小数位"
+    },
+    {
+        prop:"NULL_PROPERTY",
+        label:"空值性"
+    },
+    {
+        prop:"UNIQUENESS",
+        label:"唯一性"
+    },
+    {
+        prop:"FIELD_THRESHOLD",
+        label:"字段阈值"
+    },
+    {
+        prop:"FIELD_DESCRIPTION",
+        label:"字段描述"
+    },
+    {
+        prop:"IS_PRIMARY_KEY",
+        label:"是否为主键"
+    },
+    {
+        prop:"UNIT_OF_MEASURE",
+        label:"计量单位"
+    },
+    {
+        prop:"IS_ENCRYPTION",
+        label:"是否加密"
+    },
+    {
+        prop:"IS_DESENSITIZATION",
+        label:"是否脱敏"
+    },
+    {
+        prop:"SPATIAL_PROPERTY",
+        label:"空间属性"
+    },
+    {
+        prop:"INSERT_TIME",
+        label:"插入时间"
+    },
+    {
+        prop:"IS_LONGITUDE",
+        label:"是否为经度"
+    },
+    {
+        prop:"IS_DIMENSION",
+        label:"是否为维度"
+    },
+    {
+        prop:"IS_ADDRESS",
+        label:"地址字段"
+    },
+    {
+        prop:"IS_DIC",
+        label:"是否字典"
+    }
+]

src/service/http.js

@@ -12,6 +12,33 @@ export function getServiceTree(params){
 }
 
 
+export function getResourceDirDetailInfo(CODE){
+    return requestPost({
+        url:'/ptjkInterface/selectMenuData',
+        data:{
+            CODE
+        }
+    })
+}
+export function getMetaDetailInfo(CODE){
+    return requestPost({
+        url:'/ptjkInterface/selectMetaData',
+        data:{
+            CODE
+        }
+    })
+}
+
+export function queryDataItem(CODE){
+    return requestPost({
+        url:'/Analysis/queryDataItem',
+        data:{
+            SERVICE_CODE:CODE
+        }
+    })
+}
+
+
 //市政设施类型/fwgl/queryMunicipalFacilityTypes
 export function getMunicipalFacilityTypes(){
     return requestPost({

src/store/mapStore.js

@@ -12,7 +12,9 @@ export const useMapStore = defineStore('map',{
                 y:null,
                 z:null
             }
-        }
+        },
+        layerDetailObj:{},
+        layerDetailShow:false,
     }),
     persist:true,
     actions:{

src/views/c-cpns/DiyElForm.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="diy-el-form">
+    <el-form    :model="myFormData" v-bind="forms.formAttrs || {}" ref="refEl">
+      <el-row>
+        <template v-for="item in forms.formItemsArr" :key="item.label">
+          <el-col  v-bind="{
+          ...spanAttrsA,
+          ...item.colAttrs
+        }"
+                   :class="item.colClass"  v-if="!item.isHide" >
+            <el-form-item ref="itemRef" :class="[{'no-label':item.type === 'button' | item.isNoLabel},item.className]"   :prop="item.modelValue"  :label="item.label" v-bind="item.itemOtherAttrs"
+            >
+              <template #label="data" >
+                <slot  :name="'label' + item.modelValue" :data="data"></slot>
+              </template>
+              <el-tooltip    popper-class="my-tool" :hide-after="0" placement="top"    v-bind="item.tooltip" :disabled="!item.tooltip || item.tooltip.disabled">
+                <template #content> {{item.tooltip.content}}</template>
+                <template v-if="item.type === 'input'">
+
+                  <!--                @change="changeEvent($event,item)"-->
+                  <el-input  @change="changeEvent($event,item)"  :validate-event="false"  v-bind="item.elInputEleAttrs" v-model="myFormData[item.modelValue]">
+                    <template #append v-if="item.append">
+                      <slot :name="item.modelValue +'append'" :data="item"></slot>
+                    </template>
+                    <template #prepend v-if="item.prepend">
+                      <slot :name="item.modelValue +'prepend'" :data="item"></slot>
+                    </template>
+
+                  </el-input>
+                </template>
+                <template v-if="item.type === 'textarea'">
+                  <el-input type="textarea"  :validate-event="false"  v-bind="item.elInputEleAttrs" v-model="myFormData[item.modelValue]"/>
+                </template>
+                <template v-if="item.type === 'select'">
+                  <!--                "-->
+                  <!--                @change="changeEvent($event,item)"-->
+                  <el-select  @change="changeEvent($event,item)"    collapse-tags-tooltip collapse-tags filterable :teleported="false" clearable :validate-event="false"  v-bind="item.elSelectEleAttrs"  v-model="myFormData[item.modelValue]">
+
+
+                    <el-option   v-bind="option.elOptionEleAttrs" v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value">
+                      <template #default>
+
+                      </template>
+                    </el-option>
+                  </el-select>
+                </template>
+                <template v-if="item.type === 'radio'">
+                  <el-radio-group @change="changeEvent($event,item)" v-model="myFormData[item.modelValue]">
+                    <el-radio v-for="radio in item.radioArr"  v-bind="item.elRadioEleAttrs"  :label="radio.value">{{radio.label}}</el-radio>
+                  </el-radio-group>
+                </template>
+                <template v-if="item.type === 'date-picker'">
+                  <el-date-picker
+                      :validate-event="false"
+                      value-format="YYYY-MM-DD"
+                      format="YYYY-MM-DD"
+
+                      type="date"
+                      placeholder="选择日期"
+                      v-model="myFormData[item.modelValue]"
+                      style="width: 100%"
+                      v-bind="item.elDatePickerAttrs"
+                  ></el-date-picker>
+                </template>
+                <template v-if="item.type === 'button'">
+                  <el-button v-on="item.events" v-bind="item.btnAttrs">{{item.btnLabel}}</el-button>
+                </template>
+                <template v-if="item.type === 'slot'">
+                  <slot :name="item.slotName"></slot>
+                </template>
+                <template v-if="item.type === 'checkbox'">
+                  <el-checkbox   v-model="myFormData[item.modelValue]" :label="item.checkboxLabel"/>
+                </template>
+                <template v-if="item.type === 'checkbox-group'">
+                  <el-checkbox v-for="checkItem in item.checkArr"   v-model="myFormData[item.modelValue]" :label="checkItem.checkboxLabel"/>
+                </template>
+              </el-tooltip>
+
+            </el-form-item>
+
+
+          </el-col>
+          <slot name="formItemAfter"></slot>
+        </template>
+
+      </el-row>
+    </el-form>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import {computed, onBeforeMount, onMounted, ref, watch} from "vue";
+export default {
+  name: "DiyElForm",
+  emits:['update:model-form','update:modelForm'],
+  props:{
+    spanAttrs:{
+
+    },
+    span:{
+      default:7
+    },
+    hasSearch:{
+      default() {
+        return true
+      }
+    },
+    forms:{
+
+    },
+    modelForm:{
+
+    }
+  },
+  setup(props,{emit}) {
+    const spanAttrsA = computed(() => {
+      return props.spanAttrs || {
+        span:props.span
+      }
+    })
+    const itemRef  =ref(null)
+    function changeEvent(value,item){
+      item.selectEvent && item.selectEvent(value)
+    }
+    const refEl = ref()
+    const myFormData =  ref({...props.modelForm})
+    function setDefaultForm() {
+
+      props.forms.formItemsArr.forEach(i => {
+        if (i.defaultValue){
+          myFormData.value[i.modelValue] = i.defaultValue
+        }
+      })
+    }
+    //在拿到数据才去执行myFormData赋值
+    function getMyFormData(value) {
+      // console.log('拿到东西222')
+      myFormData.value = {
+        ...value
+      }
+    }
+    //表单验证
+    const summit = () => {
+      refEl.value.validate((isValid) => {
+
+      })
+    }
+    watch(()=> props.modelForm,(newVal) => {
+
+      myFormData.value = newVal
+    },{
+      deep:true
+    })
+    onMounted(() => {
+      setDefaultForm()
+    })
+    watch(myFormData,(newVal) => {
+
+      emit('update:modelForm',newVal)
+    },{
+      deep:true
+    })
+    return {
+      myFormData,
+      summit,
+      refEl,
+      getMyFormData,
+      changeEvent,
+      spanAttrsA,
+      itemRef
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/c-cpns/LayerDetailDialog.vue

@@ -0,0 +1,189 @@
+<template>
+  <el-dialog
+
+      :modal="true"
+      class="content-center"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      destroy-on-close
+      title="资源详细信息"
+      :model-value="mapStore.layerDetailShow"
+      v-bind="diaAttrs"
+      :before-close="handleClose">
+
+    <el-tabs
+        v-model="activeName"
+
+    >
+      <el-tab-pane class="p-panel" label="资源目录" name="dir">
+        <diy-el-form :span-attrs="{
+         span:12
+       }" :forms="myCollectionDetailDialogResourceForm" v-model:model-form="resourceForms"/>
+      </el-tab-pane>
+      <el-tab-pane class="p-panel" label="元数据" name="meta">
+        <div class="meta-top" @click="metaCartName='bm'">
+          <span>元数据结构</span>
+          <span class="arrow"><ArrowDown/></span>
+        </div>
+        <el-tabs  tab-position="left" v-model="metaCartName" >
+          <el-tab-pane label="编目信息" name="bm">
+            <diy-el-form :span-attrs="{
+             span:24
+           }" :forms="resourceDetailDialogBmForm" v-model:model-form="metForms"/>
+          </el-tab-pane>
+          <el-tab-pane label="数据集内容信息" name="sjj">
+            <diy-el-form :span-attrs="{
+             span:24
+           }" :forms="resourceDetailDialogSjjForm" v-model:model-form="metForms"/>
+          </el-tab-pane>
+          <el-tab-pane label="数据说明" name="sjsm">
+            <diy-el-form :span-attrs="{
+             span:24
+           }" :forms="resourceDetailDialogDataIntroForm" v-model:model-form="metForms"/>
+          </el-tab-pane>
+          <el-tab-pane label="地理范围" name="dlfw">
+            <diy-el-form :span-attrs="{
+             span:24
+           }" :forms="resourceDetailDialogDlForm" v-model:model-form="metForms"/>
+          </el-tab-pane>
+          <el-tab-pane label="负责单位信息" name="fzdwxx">
+            <diy-el-form :span-attrs="{
+             span:24
+           }" :forms="resourceDetailDialogUnitForm" v-model:model-form="metForms"/>
+          </el-tab-pane>
+          <el-tab-pane label="限制信息" name="xzxx">
+            <diy-el-form :span-attrs="{
+             span:24
+           }" :forms="resourceDetailDialogLimitForm" v-model:model-form="metForms"/>
+          </el-tab-pane>
+        </el-tabs>
+      </el-tab-pane>
+      <el-tab-pane label="资源服务" name="service">
+        <div class="title">
+          服务概况
+        </div>
+        <diy-el-form :span-attrs="{
+         span:24
+       }" :forms="myCollectionDetailDialogServiceForm" v-model:model-form="resourceForms"/>
+      </el-tab-pane>
+      <el-tab-pane label="数据项" name="sjx">
+        <MyTable :table-data="tableData" :headers="sjxHeaders" >
+
+        </MyTable>
+      </el-tab-pane>
+    </el-tabs>
+  </el-dialog>
+</template>
+
+<script>
+import {onBeforeMount, ref} from "vue";
+import {
+  myCollectionDetailDialogResourceForm, myCollectionDetailDialogServiceForm,
+  resourceDetailDialogBmForm,
+  resourceDetailDialogDataIntroForm, resourceDetailDialogDlForm, resourceDetailDialogLimitForm,
+  resourceDetailDialogSjjForm, resourceDetailDialogUnitForm
+} from "@/data/all-forms";
+import {getMetaDetailInfo, getResourceDirDetailInfo, queryDataItem} from "@/service/http.js";
+import {ElMessageBox} from "element-plus";
+import {useMapStore} from "@/store/mapStore.js";
+import DiyElForm from "@/views/c-cpns/DiyElForm.vue";
+import MyTable from "@/views/c-cpns/MyTable.vue";
+import {sjxHeaders} from "@/data/all-headers.js";
+export default {
+  name: "LayerDetailDialog",
+  components: {MyTable, DiyElForm},
+  props:{
+    diaAttrs:{
+
+    }
+  },
+  setup(props,{emit}) {
+    const mapStore = useMapStore();
+    const metForms = ref({
+
+    });
+    const resourceForms = ref({
+
+    });
+    const tableData = ref([]);
+    onBeforeMount(() => {
+      if (!mapStore.layerDetailObj.CODE && !mapStore.layerDetailObj.R_CODE){
+        ElMessageBox.alert('获取信息失败！', '提示', {
+          confirmButtonText: '确定'
+        });
+        return
+      }
+
+      // R_CODE
+      getResourceDirDetailInfo(mapStore.layerDetailObj.CODE || mapStore.layerDetailObj.R_CODE).then(res => {
+        resourceForms.value = {
+          ...mapStore.layerDetailObj,
+          ...resourceForms.value,
+          ...res.data.msg[0].Rows[0]
+        }
+      })
+      getMetaDetailInfo(mapStore.layerDetailObj.CODE || mapStore.layerDetailObj.R_CODE).then(res => {
+        metForms.value = {
+          ...mapStore.layerDetailObj,
+          ...metForms.value,
+          ...res.data.msg[0].Rows[0]
+        }
+      })
+      queryDataItem(mapStore.layerDetailObj.S_CODE).then(res => {
+        debugger
+        tableData.value = res.data.msg[0].Rows;
+      })
+    })
+    const activeName = ref('dir')
+    const metaCartName = ref('bm')
+    function handleClose() {
+      mapStore.layerDetailShow = false;
+      mapStore.layerDetailCode = '';
+    }
+    return {
+      mapStore,
+      handleClose,
+      activeName,
+      metaCartName,
+      resourceDetailDialogBmForm,
+      resourceDetailDialogSjjForm,
+      resourceDetailDialogDataIntroForm,
+      resourceDetailDialogDlForm,
+      resourceDetailDialogUnitForm,
+      resourceDetailDialogLimitForm,myCollectionDetailDialogResourceForm,
+      myCollectionDetailDialogServiceForm,
+      metForms,
+      resourceForms,
+      sjxHeaders,
+      tableData
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+:deep{
+}
+.title{
+  font-size: 15px;
+  padding: 10px 0;
+  font-weight: 600;
+  border-bottom: 1px solid #e7eaec;
+  margin-bottom: 15px;
+}
+.meta-top{
+  margin-bottom: 10px;
+  cursor: pointer;
+  width: 138px;
+  margin-left: 20px;
+  font-size: 16px;
+}
+.arrow{
+  margin-left: 5px;
+  text-align: right;
+  vertical-align: middle;
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+}
+</style>

src/views/c-cpns/Map.vue

@@ -19,8 +19,8 @@ export default {
     onMounted(()=>{
       myBridge.bridgeContent =  bridge = new CityGis.Bridge({
         id: "i_map",
-        url: 'https://cimweb.zjw.sh.cegn.cn:2007/VUE-Map-Tool-Widget/#/jk_map?theme=dark&type=3D', //建科发布
-        //url: 'http://localhost:8081/#/jk_map?theme=light&type=3D',
+        //url: 'https://cimweb.zjw.sh.cegn.cn:2007/VUE-Map-Tool-Widget/#/jk_map?theme=dark&type=3D', //建科发布
+        url: 'http://localhost:8081/#/jk_map?theme=dark&type=3D',
         onReady: function () {
           console.log("地图创建完成")
         }

src/views/c-cpns/MyTable.vue

@@ -0,0 +1,36 @@
+<template>
+  <el-table
+      ref="table"
+      :data="tableData"
+  >
+    <slot name="header" :header="headers">
+      <el-table-column
+          :key="index"
+          :width="header.width"
+          v-for="(header, index) in headers"
+          :prop="header.prop"
+          :label="header.label"
+          show-overflow-tooltip
+      >
+        <template #default="scope">
+          <slot :name="header.prop" :data="scope.row" :index="scope.$index">
+            {{ scope.row[header.prop] }}
+          </slot>
+        </template>
+      </el-table-column>
+    </slot>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: "MyTable",
+  props:{
+    tableData: {},
+    headers: {},
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/c-cpns/ServiceTree.vue

@@ -12,6 +12,9 @@
       >
         <template #default="{ node, data }">
           <span  class="custom-tree-label">{{ node.label }}</span>
+          <span  v-if="node.isLeaf" class="custom-tree-detail-icon" @click="showDetailDialog(data)">
+            <Document />
+          </span>
           <span  v-if="node.isLeaf" class="custom-tree-icon" @click="applyData(data)">
             <Edit />
           </span>
@@ -27,10 +30,10 @@ import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
 import {getServiceTree} from "@/service/http.js";
 import {AddSingleLayer} from "@/unit/map/addLayer.js";
 import {useMapStore} from "@/store/mapStore.js";
-import {Edit} from "@element-plus/icons-vue";
+import {Edit,Document} from "@element-plus/icons-vue";
 export default {
   name: "ServiceTree",
-  components: {CommonTitle,Edit},
+  components: {CommonTitle,Edit,Document},
   setup(){
     const mapStore = useMapStore()
     let treeData = ref([]);
@@ -48,6 +51,10 @@ export default {
       window.open("https://cimweb.zjw.sh.cegn.cn:2007/space-application/#/main/resource-apply?name=" + data.label)
 
     }
+    function showDetailDialog(data){
+      mapStore.layerDetailObj = data;
+      mapStore.layerDetailShow = true;
+    }
     function changeChange(){
       let nowChecked = treeRef.value.getCheckedNodes(true);
       //找到原来有现在没有的删除
@@ -92,7 +99,8 @@ export default {
       treeData,
       changeChange,
       treeRef,
-      applyData
+      applyData,
+      showDetailDialog
     }
   }
 }
@@ -108,6 +116,13 @@ export default {
   .custom-tree-label{
     font-size: 16px;
   }
+  .custom-tree-detail-icon{
+    position: absolute;
+    right: 40px;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+  }
   .custom-tree-icon{
     position: absolute;
     right: 10px;

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

@@ -3,11 +3,14 @@
     <VisualizationHeader />
     <Map/>
     <TreeMenu />
-    <ServiceTree />
+    <ServiceTree/>
     <FigureLegend />
     <BaseMapSwitch />
     <router-view/>
     <VisualizationBottom />
+    <template v-if="mapStore.layerDetailShow">
+      <LayerDetailDialog :dia-attrs="{modal:false}"  />
+    </template>
   </div>
 </template>
 
@@ -19,9 +22,19 @@ import ServiceTree from "@/views/c-cpns/ServiceTree.vue";
 import FigureLegend from "@/views/c-cpns/figureLegend.vue";
 import TreeMenu from "@/views/c-cpns/TreeMenu.vue";
 import BaseMapSwitch from "@/views/c-cpns/BaseMapSwitch.vue";
+import {useMapStore} from "@/store/mapStore.js";
+import LayerDetailDialog from "@/views/c-cpns/LayerDetailDialog.vue";
 export default {
   name: "VisualizationHome",
-  components: {BaseMapSwitch, TreeMenu, FigureLegend, ServiceTree, VisualizationBottom, Map, VisualizationHeader}
+  components: {
+    LayerDetailDialog,
+    BaseMapSwitch, TreeMenu, FigureLegend, ServiceTree, VisualizationBottom, Map, VisualizationHeader},
+  setup() {
+    const mapStore = useMapStore();
+    return{
+      mapStore
+    }
+  }
 }
 </script>
 

vite.config.js

@@ -15,8 +15,8 @@ export default defineConfig({
             // 代理所有 /api 的请求，该求情将被代理到 target 中
             '/api': {
                 // 代理请求之后的请求地址（你的真实接口地址)
-                //target: 'https://cimweb.zjw.sh.cegn.cn:2007/data-business-prod/',
-                target: 'http://localhost:9250/',
+                target: 'https://cimweb.zjw.sh.cegn.cn:2007/data-business-prod/',
+                //target: 'http://localhost:9250/',
                 secure: false,
                 ws: true,
                 // 跨域