From 636af91cd1ceb4900e5516f8418925ebaa25a877 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 30 Oct 2023 21:53:58 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=9C=B0=E7=90=86=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   2 +
 .../src/views/system/parameter/index.vue      |   2 +-
 .../views/system/parameter/map/Geometry.vue   | 176 ++++++++++++++++--
 3 files changed, 161 insertions(+), 19 deletions(-)

diff --git a/.gitignore b/.gitignore
index a28af86e43..0c403a5842 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,3 +48,5 @@ core/core-frontend/src/assets/fsSvg.html
 /sdk/dataease-plugin-filter/
 /sdk/dataease-plugin-interface/
 /sdk/dataease-plugin-view/
+/extensions/
+.vite/
diff --git a/core/core-frontend/src/views/system/parameter/index.vue b/core/core-frontend/src/views/system/parameter/index.vue
index 232f272f0b..caab8148f3 100644
--- a/core/core-frontend/src/views/system/parameter/index.vue
+++ b/core/core-frontend/src/views/system/parameter/index.vue
@@ -40,7 +40,7 @@ const handleClick = (tab, event: Event) => {
 .sys-setting-p {
   width: 100%;
   background: var(--ContentBG, #ffffff);
-  height: calc(100% - 95px);
+  height: calc(100vh - 176px);
   box-sizing: border-box;
   margin-top: 12px;
 }
diff --git a/core/core-frontend/src/views/system/parameter/map/Geometry.vue b/core/core-frontend/src/views/system/parameter/map/Geometry.vue
index b075e68e22..47c21db890 100644
--- a/core/core-frontend/src/views/system/parameter/map/Geometry.vue
+++ b/core/core-frontend/src/views/system/parameter/map/Geometry.vue
@@ -10,7 +10,13 @@
         </span>
       </div>
       <div class="geo-search">
-        <el-input class="m16 w100" v-model="keyword" clearable :placeholder="t('commons.search')">
+        <el-input
+          class="m16 w100"
+          v-model="keyword"
+          clearable
+          :placeholder="t('commons.search')"
+          @change="filterResource"
+        >
           <template #prefix>
             <el-icon>
               <Icon name="icon_search-outline_outlined"></Icon>
@@ -19,18 +25,63 @@
         </el-input>
       </div>
       <div class="map-tree-container">
-        <!-- <el-scrollbar> -->
-        <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick">
-          <template #default="{ node, data }">
-            <span class="custom-tree-node">
-              <span>{{ data.name || node.label }}</span>
-            </span>
-          </template>
-        </el-tree>
-        <!-- </el-scrollbar> -->
+        <el-scrollbar class="menu-tree">
+          <el-tree
+            menu
+            ref="areaTreeRef"
+            node-key="id"
+            :data="treeData"
+            @node-click="handleNodeClick"
+            :highlight-current="true"
+            :expand-on-click-node="false"
+            :default-expand-all="false"
+            :filter-node-method="filterResourceNode"
+          >
+            <template #default="{ node, data }">
+              <span class="custom-tree-node" :class="{ 'is-disabled': node.disabled || data.root }">
+                <span
+                  :title="data.name"
+                  v-html="data.colorName && keyword ? data.colorName : data.name"
+                />
+              </span>
+            </template>
+          </el-tree>
+        </el-scrollbar>
       </div>
     </el-aside>
-    <el-main>地理信息内容区域</el-main>
+    <el-main class="geometry-main">
+      <div class="geo-content-container" v-if="!selectedData">
+        <EmptyBackground img-type="noneWhite" description="请在左侧选择区域" />
+      </div>
+      <div v-else class="geo-content-container">
+        <div class="geo-content-top">
+          <span>{{ selectedData.name }}</span>
+        </div>
+        <div class="geo-content-middle">
+          <div class="geo-area">
+            <div class="area-label"><span>区域代码</span></div>
+            <div class="area-content">
+              <span>{{ selectedData.id }}</span>
+            </div>
+          </div>
+          <div class="geo-area">
+            <div class="area-label"><span>上级区域</span></div>
+            <div class="area-content">
+              <span>{{ selectedData.parentName }}</span>
+              <span v-if="selectedData.pid" class="area-secondary">{{
+                '(' + selectedData.pid + ')'
+              }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="geo-content-bottom">
+          <div class="area-label"><span>坐标文件</span></div>
+          <el-scrollbar class="area-content-geo">
+            <span>{{ selectedData.geoJson }}</span>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
   </el-container>
 </template>
 
@@ -38,6 +89,10 @@
 import { ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { getWorldTree } from '@/api/map'
+import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
+import { getGeoJsonFile } from '@/views/chart/components/js/util'
+import { cloneDeep } from 'lodash-es'
+import { setColorName } from '@/utils/utils'
 const { t } = useI18n()
 const keyword = ref('')
 const treeData = ref([])
@@ -45,9 +100,29 @@ interface Tree {
   label: string
   children?: Tree[]
 }
+const areaTreeRef = ref(null)
 
-const handleNodeClick = (data: Tree) => {
-  console.log(data)
+const selectedData = ref(null)
+
+const handleNodeClick = async (data: Tree) => {
+  selectedData.value = data
+  const geoJson = cloneDeep(await getGeoJsonFile(data['id']))
+  selectedData.value['geoJson'] = geoJson
+  const pid = data['pid']
+  if (pid) {
+    const parent = areaTreeRef.value.getNode(pid)
+    if (parent) {
+      selectedData.value.parentName = parent.data.name
+    }
+  }
+}
+const filterResource = val => {
+  areaTreeRef.value?.filter(val)
+}
+const filterResourceNode = (value: string, data) => {
+  setColorName(data, value)
+  if (!value) return true
+  return data.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
 }
 
 const loadTreeData = () => {
@@ -61,11 +136,6 @@ const loadTreeData = () => {
     })
 }
 
-const defaultProps = {
-  children: 'children',
-  label: 'name'
-}
-
 loadTreeData()
 </script>
 
@@ -88,6 +158,7 @@ loadTreeData()
         line-height: 24px;
       }
       .add-icon-span {
+        display: none;
         color: #3370ff;
         height: 20px;
         width: 20px;
@@ -110,5 +181,74 @@ loadTreeData()
       overflow-y: auto;
     }
   }
+  .geometry-main {
+    padding: 16px !important;
+  }
+}
+.geo-content-container {
+  width: 100%;
+  height: 100%;
+  .geo-content-top {
+    height: 24px;
+    line-height: 24px;
+    margin-bottom: 16px;
+    span {
+      font-weight: 500;
+      font-size: 16px;
+      color: #1f2329;
+    }
+  }
+  .geo-content-middle {
+    display: flex;
+    .geo-area {
+      height: 48px;
+      width: 50%;
+    }
+    margin-bottom: 16px;
+  }
+  :deep(.area-label) {
+    height: 22px;
+    line-height: 22px;
+    span {
+      font-size: 14px;
+      color: #646a73;
+      font-weight: 400;
+    }
+  }
+  :deep(.area-content) {
+    line-height: 22px;
+    height: 22px;
+    span {
+      font-size: 14px;
+      color: #1f2329;
+      font-weight: 400;
+    }
+    .area-secondary {
+      color: #646a73;
+    }
+  }
+  .geo-content-bottom {
+    width: 100%;
+    height: calc(100% - 110px);
+    .area-content-geo {
+      line-height: 22px;
+      overflow-x: hidden;
+      overflow-y: auto;
+      height: calc(100% - 30px);
+      span {
+        font-size: 14px;
+        color: #1f2329;
+        font-weight: 400;
+      }
+    }
+  }
+}
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  box-sizing: content-box;
+  padding-right: 4px;
+  overflow: hidden;
 }
 </style>