From e9a5bbe0a13a0e320e5141a615e0c39d3ee174da Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 23 Nov 2023 22:14:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=B0=E7=90=86=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/assets/svg/de-json.svg |   1 +
 .../views/system/parameter/map/Geometry.vue   |  11 +-
 .../system/parameter/map/GeometryEdit.vue     | 240 ++++++++++++++++++
 .../views/system/parameter/map/interface.ts   |   5 +
 4 files changed, 255 insertions(+), 2 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/de-json.svg
 create mode 100644 core/core-frontend/src/views/system/parameter/map/GeometryEdit.vue
 create mode 100644 core/core-frontend/src/views/system/parameter/map/interface.ts

diff --git a/core/core-frontend/src/assets/svg/de-json.svg b/core/core-frontend/src/assets/svg/de-json.svg
new file mode 100644
index 0000000000..9e62a6c556
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/de-json.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h1024v1024H0z" fill="#D8D8D8" fill-opacity="0" /><path d="M882.602667 277.952v585.130667a73.152 73.152 0 0 1-73.152 73.152H224.32a73.152 73.152 0 0 1-73.152-73.152V131.648a73.152 73.152 0 0 1 73.152-73.130667h439.232" fill="#005FE0" /><path d="M381.568 753.216v20.842667a43.861333 43.861333 0 0 1-35.733333-5.056 37.482667 37.482667 0 0 1-11.84-31.146667V707.2c0-12.288-5.269333-18.410667-15.36-18.410667v-19.968c10.090667 0 15.36-6.122667 15.36-18.410666v-30.698667a37.482667 37.482667 0 0 1 11.84-30.912 43.861333 43.861333 0 0 1 35.733333-5.269333v20.842666a16.874667 16.874667 0 0 0-15.146667 1.088c-3.370667 4.437333-4.949333 10.026667-4.373333 15.573334v29.376c0.362667 6.122667-0.213333 12.266667-1.749333 18.197333a19.946667 19.946667 0 0 1-13.589334 10.304c3.093333 0.874667 6.058667 2.218667 8.746667 3.946667a12.928 12.928 0 0 1 4.842667 6.570666c0.725333 2.218667 1.237333 4.48 1.536 6.826667v40.32c0 7.893333 0 12.714667 3.733333 14.912 3.712 2.197333 7.893333 2.624 16 1.749333z m145.578667-155.008v87.701333a69.056 69.056 0 0 1-18.197334 49.557334 65.770667 65.770667 0 0 1-49.322666 19.072 67.968 67.968 0 0 1-48.896-17.536 65.770667 65.770667 0 0 1-18.432-49.344h28.501333a34.645333 34.645333 0 0 0 38.826667 39.68 35.733333 35.733333 0 0 0 28.714666-11.392c6.912-8.426667 10.432-19.136 9.856-30.037334v-60.736h-46.250666v-26.965333h75.2z m110.72 56.576l-14.912 17.536a38.144 38.144 0 0 0-26.730667-9.642667c-13.162667 0-19.733333 3.712-19.733333 10.730667 0 7.04 6.570667 10.965333 20.16 11.84l12.714666 1.322667c4.181333 0.768 8.277333 1.856 12.288 3.285333 3.946667 1.344 7.68 3.349333 10.965334 5.930667 3.029333 2.688 5.482667 5.973333 7.232 9.642666 2.090667 4.522667 3.136 9.472 3.072 14.464a32 32 0 0 1-12.288 25.429334c-9.834667 7.317333-21.973333 10.88-34.197334 10.090666a85.077333 85.077333 0 0 1-26.965333-3.946666 55.253333 55.253333 0 0 1-23.04-15.36l13.162667-19.072c4.608 4.842667 10.325333 8.448 16.661333 10.538666 6.506667 2.858667 13.504 4.437333 20.608 4.608 4.8 0.341333 9.578667-0.896 13.610667-3.52a10.752 10.752 0 0 0 5.909333-9.429333 8.768 8.768 0 0 0-5.034667-8.106667 42.538667 42.538667 0 0 0-16.448-3.285333 85.077333 85.077333 0 0 1-15.786666-2.410667 70.826667 70.826667 0 0 1-14.250667-5.482666 26.965333 26.965333 0 0 1-10.752-10.304 32 32 0 0 1 0-31.146667 32.213333 32.213333 0 0 1 11.178667-10.517333 67.306667 67.306667 0 0 1 72.362666 6.805333h0.213334z m12.949333 119.253333v-20.821333c5.290667 1.408 10.922667 0.789333 15.786667-1.749333a20.608 20.608 0 0 0 3.712-14.912v-40.32a24.32 24.32 0 0 1 1.536-6.826667 13.802667 13.802667 0 0 1 4.608-6.570667c2.794667-1.728 5.824-3.072 8.981333-3.946666a24.32 24.32 0 0 1-8.96-3.946667 13.802667 13.802667 0 0 1-4.629333-6.570667 21.930667 21.930667 0 0 1-1.536-6.805333V621.013333a20.394667 20.394667 0 0 0-4.608-15.573333c-2.837333-2.624-7.893333-2.837333-14.890667-1.088v-20.842667a43.861333 43.861333 0 0 1 35.733333 5.269334c8.533333 7.893333 12.906667 19.328 11.84 30.933333v30.677333c0 12.288 5.034667 18.410667 15.36 18.410667v19.968c-10.325333 0-15.36 6.122667-15.36 18.410667v30.698666a37.482667 37.482667 0 0 1-11.84 31.146667 43.861333 43.861333 0 0 1-35.733333 5.034667z" fill="#FFFFFF" /><path d="M663.168 58.517333l219.434667 219.434667h-160.917334a58.517333 58.517333 0 0 1-58.517333-58.517333V58.517333zM87.765333 131.648H585.173333c19.498667 0 29.248 9.770667 29.248 29.269333v175.530667c0 19.52-9.749333 29.269333-29.248 29.269333H87.765333c-19.498667 0-29.248-9.749333-29.248-29.269333V160.917333c0-19.498667 9.749333-29.269333 29.248-29.269333z" fill="#3289FF" /><path d="M120.661333 331.776c27.818667 0 46.933333-13.824 46.933334-45.909333V180.224H133.802667v104.448c0 13.653333-3.072 21.333333-16.896 21.333333-2.730667 0-6.997333-0.170667-10.922667-0.853333v25.6c4.608 0.682667 10.069333 1.024 14.677333 1.024z m100.693334-31.402667c36.693333 0 48.128-13.824 48.128-37.376 0-21.504-3.584-30.890667-33.109334-38.570666-14.677333-3.754667-17.237333-4.949333-17.237333-10.410667 0-5.632 4.266667-8.192 15.189333-8.192 9.386667 0 24.234667 2.218667 29.184 4.096V182.784c-6.656-2.218667-15.872-4.266667-30.72-4.266667-28.330667 0-46.421333 8.874667-46.421333 36.864 0 20.992 6.144 29.184 32.085333 35.157334 14.848 3.584 17.066667 6.485333 17.066667 11.434666 0 7.338667-1.877333 9.728-16.042667 9.728a137.557333 137.557333 0 0 1-32.256-4.437333v29.184c8.362667 2.048 20.992 3.925333 34.133334 3.925333z m121.002666 0c35.328 0 55.808-12.117333 55.808-60.928 0-48.64-20.48-60.928-55.808-60.928-35.157333 0-55.808 12.288-55.808 60.928 0 48.810667 20.650667 60.928 55.808 60.928z m0-27.989333c-16.213333 0-19.968-7.509333-19.968-32.938667 0-25.770667 3.754667-33.450667 19.968-33.450666s20.138667 7.68 20.138667 33.450666c0 25.429333-3.925333 32.938667-20.138667 32.938667zM451.072 298.666667v-79.189334h1.024L480.256 298.666667h47.274667V180.224h-33.109334v74.24h-1.024l-24.576-74.24h-51.2V298.666667h33.450667z" fill="#FFFFFF" /></svg>
\ No newline at end of file
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 47c21db890..68768887d2 100644
--- a/core/core-frontend/src/views/system/parameter/map/Geometry.vue
+++ b/core/core-frontend/src/views/system/parameter/map/Geometry.vue
@@ -3,7 +3,7 @@
     <el-aside class="geonetry-aside">
       <div class="geo-title">
         <span>{{ t('online_map.geometry') }}</span>
-        <span class="add-icon-span">
+        <span class="add-icon-span" @click="add()">
           <el-icon>
             <Icon name="icon_add_outlined"></Icon>
           </el-icon>
@@ -83,6 +83,7 @@
       </div>
     </el-main>
   </el-container>
+  <geometry-edit ref="editor" :tree-data="treeData" @saved="loadTreeData" />
 </template>
 
 <script lang="ts" setup>
@@ -93,9 +94,11 @@ import EmptyBackground from '@/components/empty-background/src/EmptyBackground.v
 import { getGeoJsonFile } from '@/views/chart/components/js/util'
 import { cloneDeep } from 'lodash-es'
 import { setColorName } from '@/utils/utils'
+import GeometryEdit from './GeometryEdit.vue'
 const { t } = useI18n()
 const keyword = ref('')
 const treeData = ref([])
+const editor = ref()
 interface Tree {
   label: string
   children?: Tree[]
@@ -136,6 +139,10 @@ const loadTreeData = () => {
     })
 }
 
+const add = (pid?: string) => {
+  editor?.value.edit(pid)
+}
+
 loadTreeData()
 </script>
 
@@ -158,7 +165,7 @@ loadTreeData()
         line-height: 24px;
       }
       .add-icon-span {
-        display: none;
+        // display: none;
         color: #3370ff;
         height: 20px;
         width: 20px;
diff --git a/core/core-frontend/src/views/system/parameter/map/GeometryEdit.vue b/core/core-frontend/src/views/system/parameter/map/GeometryEdit.vue
new file mode 100644
index 0000000000..cb4d663e2f
--- /dev/null
+++ b/core/core-frontend/src/views/system/parameter/map/GeometryEdit.vue
@@ -0,0 +1,240 @@
+<script lang="ts" setup>
+import { ref, reactive, PropType } from 'vue'
+import { ElMessage, ElLoading } from 'element-plus-secondary'
+import { useI18n } from '@/hooks/web/useI18n'
+import type {
+  FormInstance,
+  FormRules,
+  UploadRequestOptions,
+  UploadProps
+} from 'element-plus-secondary'
+import request from '@/config/axios'
+import { GeometryFrom } from './interface'
+const { t } = useI18n()
+const dialogVisible = ref(false)
+const loadingInstance = ref(null)
+const geoForm = ref<FormInstance>()
+const props = defineProps({
+  treeData: {
+    type: Array as PropType<unknown[]>,
+    default: () => []
+  }
+})
+const geoFile = ref()
+const fileName = ref()
+const state = reactive({
+  form: reactive<GeometryFrom>({
+    pid: null,
+    code: null,
+    name: null
+  })
+})
+const treeProps = {
+  value: 'id',
+  label: 'name',
+  disabled: 'readOnly'
+}
+
+const rule = reactive<FormRules>({
+  pid: [
+    {
+      required: true,
+      message: t('common.require'),
+      trigger: 'blur'
+    }
+  ],
+  code: [
+    {
+      required: true,
+      message: t('common.require'),
+      trigger: 'blur'
+    }
+  ],
+  name: [
+    {
+      required: true,
+      message: t('common.require'),
+      trigger: 'blur'
+    }
+  ]
+})
+
+const edit = (pid?: string) => {
+  state.form.pid = pid
+  state.form.code = null
+  state.form.name = null
+  geoFile.value = null
+  fileName.value = null
+  dialogVisible.value = true
+}
+
+const emits = defineEmits(['saved'])
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const param = { ...state.form }
+      showLoading()
+      request
+        .post({ url: '/sysParameter/map/save', data: param })
+        .then(res => {
+          if (!res.msg) {
+            ElMessage.success(t('common.save_success'))
+            emits('saved')
+            reset()
+          }
+          closeLoading()
+        })
+        .catch(() => {
+          closeLoading()
+        })
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  geoFile.value = null
+  fileName.value = null
+  formEl.resetFields()
+  dialogVisible.value = false
+}
+
+const reset = () => {
+  resetForm(geoForm.value)
+}
+
+const showLoading = () => {
+  loadingInstance.value = ElLoading.service({ target: '.basic-info-drawer' })
+}
+const closeLoading = () => {
+  loadingInstance.value?.close()
+}
+const handleExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning(t('userimport.exceedMsg'))
+}
+const handleError = () => {
+  ElMessage.warning('执行失败请联系管理员')
+}
+const setFile = (options: UploadRequestOptions) => {
+  geoFile.value = options.file
+  fileName.value = options.file.name
+}
+const uploadValidate = file => {
+  const suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
+  if (suffix !== 'json') {
+    ElMessage.warning('只能上传json文件')
+    return false
+  }
+
+  if (file.size / 1024 / 1024 > 200) {
+    ElMessage.warning('最大上传200M')
+    return false
+  }
+  return true
+}
+defineExpose({
+  edit
+})
+</script>
+
+<template>
+  <el-drawer
+    title="地理信息"
+    v-model="dialogVisible"
+    custom-class="basic-info-drawer"
+    size="600px"
+    direction="rtl"
+  >
+    <el-form
+      ref="geoForm"
+      require-asterisk-position="right"
+      :model="state.form"
+      :rules="rule"
+      label-width="80px"
+      label-position="top"
+    >
+      <el-form-item label="上级区域" prop="pid">
+        <el-tree-select
+          class="map-tree-selector"
+          node-key="id"
+          v-model="state.form.pid"
+          :props="treeProps"
+          :data="props.treeData"
+          check-strictly
+          :render-after-expand="false"
+          :placeholder="t('common.please_select')"
+        />
+      </el-form-item>
+
+      <el-form-item label="区域代码" prop="code">
+        <el-input v-model="state.form.code" />
+      </el-form-item>
+
+      <el-form-item label="区域名称" prop="name">
+        <el-input v-model="state.form.name" />
+      </el-form-item>
+
+      <div class="geo-label-mask" />
+      <el-form-item label="坐标文件">
+        <el-upload
+          class="upload-geo"
+          action=""
+          accept=".json"
+          :on-exceed="handleExceed"
+          :before-upload="uploadValidate"
+          :on-error="handleError"
+          :show-file-list="false"
+          :http-request="setFile"
+        >
+          <el-input :placeholder="t('userimport.placeholder')" readonly v-model="fileName">
+            <template #suffix>
+              <el-icon>
+                <Icon name="icon_upload_outlined" />
+              </el-icon>
+            </template>
+            <template #prefix>
+              <el-icon v-if="!!fileName">
+                <Icon name="de-json" />
+              </el-icon>
+            </template>
+          </el-input>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="resetForm(geoForm)">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submitForm(geoForm)">
+          {{ t('commons.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-drawer>
+</template>
+
+<style scoped lang="less">
+.map-tree-selector {
+  width: 100%;
+}
+.geo-btn-container {
+  position: absolute;
+  bottom: 33px;
+  right: 0px;
+}
+.upload-geo {
+  width: 100%;
+  height: 32px;
+  :deep(.ed-upload) {
+    width: 100% !important;
+  }
+}
+.geo-label-mask {
+  position: absolute;
+  width: calc(100% - 48px);
+  height: 30px;
+}
+</style>
diff --git a/core/core-frontend/src/views/system/parameter/map/interface.ts b/core/core-frontend/src/views/system/parameter/map/interface.ts
new file mode 100644
index 0000000000..1600eae66d
--- /dev/null
+++ b/core/core-frontend/src/views/system/parameter/map/interface.ts
@@ -0,0 +1,5 @@
+export interface GeometryFrom {
+  pid?: string
+  code?: string
+  name?: string
+}