github/niucloud
1
0
Fork 0
mirror of https://gitee.com/niucloud-team/niucloud.git synced 2026-04-06 04:50:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

同步admin

Browse Source
This commit is contained in:
CQ 2026-04-03 11:07:09 +08:00
parent 330ffa3efc
commit 65d9a38693
15 changed files with 4532 additions and 3248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
admin/components.d.ts vendored
View File

@ -85,6 +85,7 @@ declare module '@vue/runtime-core' {
ExportSure: typeof import('./src/components/export-sure/index.vue')['default']
HeatMap: typeof import('./src/components/heat-map/index.vue')['default']
Icon: typeof import('./src/components/icon/index.vue')['default']
MapSelector: typeof import('./src/components/map-selector/index.vue')['default']
Markdown: typeof import('./src/components/markdown/index.vue')['default']
PopoverInput: typeof import('./src/components/popover-input/index.vue')['default']
RangeInput: typeof import('./src/components/range-input/index.vue')['default']

4
admin/src/app/api/sys.ts
View File

@ -629,8 +629,8 @@ export function setMap(params: Record<string, any>) {
/**
* 获取地图配置
*/
export function getMap() {
return request.get(`sys/config/map`)
export function getMap(params: Record<string, any>) {
return request.get(`sys/config/map`, { params })
}
/**

1372
admin/src/app/components/upgrade/index.vue
View File

File diff suppressed because it is too large Load Diff

25
admin/src/app/views/diy/edit.vue
View File

@ -469,18 +469,21 @@ initPage({
if (import.meta.env.MODE == 'development') {
// env文件配置过wap域名
if (wapDomain.value) {
wapUrl.value = wapDomain.value + '/wap'
repeat = false
setDomain()
}
// if (wapDomain.value) {
// wapUrl.value = wapDomain.value + '/wap'
// repeat = false
// setDomain()
// }
let wap_domain_storage = storage.get('wap_domain')
if (wap_domain_storage) {
wapUrl.value = wap_domain_storage
repeat = false
setDomain()
}
// let wap_domain_storage = storage.get('wap_domain')
// if (wap_domain_storage) {
// wapUrl.value = wap_domain_storage
// repeat = false
// setDomain()
// }
wapUrl.value = 'http://localhost:5173/wap'
repeat = false
setDomain()
}
if (repeat) {

3314
admin/src/app/views/index/store.vue
View File

File diff suppressed because it is too large Load Diff

55
admin/src/app/views/setting/map.vue
View File

@ -7,15 +7,50 @@
</div>
<el-form class="page-form mt-[20px]" :model="formData" :rules="formRules" label-width="150px" ref="formRef" v-loading="loading">
<el-form-item :label="t('mapKey')" prop="key">
<el-input v-model.trim="formData.key" class="input-width" clearable />
<span class="ml-2 cursor-pointer tutorial-btn" @click="tutorialFn">{{ t('clickTutorial') }}</span>
<span class="ml-2 cursor-pointer secret-btn" @click="secretFn('https://lbs.qq.com/dev/console/key/manage')">{{ t('clickSecretKey') }}</span>
</el-form-item>
<el-form-item :label="t('aMapKey')" prop="key">
<el-input v-model.trim="formData.amap_key" class="input-width" clearable />
<span class="ml-2 cursor-pointer secret-btn" @click="secretFn('https://lbs.amap.com/')">{{ t('clickSecretKey') }}</span>
<el-form-item label="地图类型" prop="map_type">
<div>
<el-radio-group v-model="formData.map_type">
<el-radio label="tianditu">天地图</el-radio>
<el-radio label="tencent">腾讯地图</el-radio>
</el-radio-group>
<div class="text-sm text-gray-400 mt-[10px] leading-none">选择地图服务提供商</div>
</div>
</el-form-item>
<template v-if="formData.map_type === 'tencent'">
<el-form-item :label="t('mapKey')" prop="key">
<div>
<div class="flex items-center">
<el-input v-model.trim="formData.key" class="input-width" clearable />
<span class="ml-2 cursor-pointer tutorial-btn" @click="tutorialFn">{{ t('clickTutorial') }}</span>
<span class="ml-2 cursor-pointer secret-btn" @click="secretFn('https://lbs.qq.com/dev/console/key/manage')">{{ t('clickSecretKey') }}</span>
</div>
</div>
</el-form-item>
</template>
<template v-if="formData.map_type === 'tianditu'">
<el-form-item label="天地图服务端KEY" prop="tianditu_map_key">
<div>
<div class="flex items-center">
<el-input v-model.trim="formData.tianditu_map_key" class="input-width" clearable />
<span class="ml-2 cursor-pointer secret-btn" @click="secretFn('https://cloudcenter.tianditu.gov.cn/center/development/myApp')">获取密钥</span>
</div>
<div class="text-sm text-gray-400 mt-[10px] leading-none">天地图服务器端API密钥，用于后端地理编码等服务，请求从业务服务器发起，不支持前端地图瓦片加载与 JS API 渲染。</div>
<div class="text-sm text-gray-400 mt-[10px] leading-none">使用场景：如地理编码、逆地理编码、坐标转换、批量 POI 查询等。</div>
</div>
</el-form-item>
<el-form-item label="天地图浏览器端KEY" prop="tianditu_map_web_key">
<div>
<div class="flex items-center">
<el-input v-model.trim="formData.tianditu_map_web_key" class="input-width" clearable />
<span class="ml-2 cursor-pointer secret-btn" @click="secretFn('https://cloudcenter.tianditu.gov.cn/center/development/myApp')">获取密钥</span>
</div>
<div class="text-sm text-gray-400 mt-[10px] leading-none">天地图浏览器端API密钥，用于前端加载地图，不可用于后端接口鉴权。</div>
<div class="text-sm text-gray-400 mt-[10px] leading-none">使用场景：展示地图瓦片、实现地图交互（缩放、拖拽、图层切换、标注、可视化展示、地图选位置等）。</div>
</div>
</el-form-item>
</template>
<el-form-item :label="t('isOpen')" prop="is_open">
<el-switch v-model="formData.is_open" :active-value="1" :inactive-value="0" />
</el-form-item>
@ -45,8 +80,10 @@ import { FormInstance } from 'element-plus'
const loading = ref(true)
const formRef = ref<FormInstance>()
const formData = reactive({
map_type: 'tencent',
key: '',
amap_key: '',
tianditu_map_key: '',
tianditu_map_web_key: '',
is_open: 0,
valid_time: 0
})

4
admin/src/app/views/setting/notice.vue
View File

@ -351,13 +351,12 @@ import {
getWechatAuthUrl,
getWeappAuthUrl,
sendSms,
bindSms,
bindSms
} from '@/app/api/notice'
import Sms from '@/app/views/setting/components/notice-sms.vue'
import Wechat from '@/app/views/setting/components/notice-wechat.vue'
import Weapp from '@/app/views/setting/components/notice-weapp.vue'
import QRCode from 'qrcode'
import { chain } from 'lodash-es'
import { img } from '@/utils/common'
import { SuccessFilled } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
@ -436,7 +435,6 @@ const isBind = ref({
// 查看是否绑定
const getBindInfoFn = (isFirstQuery = false) => {
getBindInfo().then((res) => {
console.log(res.data)
if (Object.keys(res.data).length > 0) {
isBind.value.bind_sms = res.data.mobile ? 1 : 0 // 新增：更新短信绑定状态
isBind.value.bind_wechat = res.data.wechat_openid ? 1 : 0 // 新增：更新微信绑定状态

262
admin/src/app/views/setting/system.vue
View File

@ -1,79 +1,79 @@
<template>
<div class="main-container">
<el-form class="page-form loading-box" :model="formData" label-width="150px" ref="formRef" :rules="formRules" v-loading="loading">
<el-card class="box-card !border-none" shadow="never">
<h3 class="text-[16px] text-[#1D1F3A] font-bold mb-4">{{ pageName }}</h3>
<h3 class="panel-title !text-[14px] bg-[#F4F5F7] p-3 border-[#E6E6E6] border-solid border-b-[1px]">{{ t('websiteInfo') }}</h3>
<div class="main-container">
<el-form class="page-form loading-box" :model="formData" label-width="150px" ref="formRef" :rules="formRules" v-loading="loading">
<el-card class="box-card !border-none" shadow="never">
<h3 class="text-[16px] text-[#1D1F3A] font-bold mb-4">{{ pageName }}</h3>
<h3 class="panel-title !text-[14px] bg-[#F4F5F7] p-3 border-[#E6E6E6] border-solid border-b-[1px]">{{ t('websiteInfo') }}</h3>
<el-form-item :label="t('siteName')" prop="site_name">
<el-input v-model.trim="formData.site_name" :placeholder="t('siteNamePlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
</el-form-item>
<el-form-item :label="t('logo')" prop="logo">
<div>
<upload-image v-model="formData.logo" />
<p class="text-[12px] text-[#a9a9a9]">{{ t('logoPlaceholder') }}</p>
</div>
</el-form-item>
<el-form-item :label="t('icon')" prop="icon">
<div>
<upload-image v-model="formData.icon" />
<p class="text-[12px] text-[#a9a9a9]">{{ t('iconPlaceholder') }}</p>
</div>
</el-form-item>
<el-form-item :label="t('keywords')">
<el-input v-model.trim="formData.keywords" :placeholder="t('keywordsPlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
</el-form-item>
<el-form-item :label="t('desc')">
<el-input v-model.trim="formData.desc" type="textarea" :rows="4" clearable :placeholder="t('descPlaceholder')" class="input-width" maxlength="100" show-word-limit />
</el-form-item>
<el-form-item :label="t('siteName')" prop="site_name">
<el-input v-model.trim="formData.site_name" :placeholder="t('siteNamePlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
</el-form-item>
<el-form-item :label="t('logo')" prop="logo">
<div>
<upload-image v-model="formData.logo" />
<p class="text-[12px] text-[#a9a9a9]">{{ t('logoPlaceholder') }}</p>
</div>
</el-form-item>
<el-form-item :label="t('icon')" prop="icon">
<div>
<upload-image v-model="formData.icon" />
<p class="text-[12px] text-[#a9a9a9]">{{ t('iconPlaceholder') }}</p>
</div>
</el-form-item>
<el-form-item :label="t('keywords')">
<el-input v-model.trim="formData.keywords" :placeholder="t('keywordsPlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
</el-form-item>
<el-form-item :label="t('desc')">
<el-input v-model.trim="formData.desc" type="textarea" :rows="4" clearable :placeholder="t('descPlaceholder')" class="input-width" maxlength="100" show-word-limit />
</el-form-item>
<div class="mt-[20px]" v-show="appType == 'site'">
<h3 class="panel-title !text-[14px] bg-[#F4F5F7] p-3 border-[#E6E6E6] border-solid border-b-[1px]">{{ t('frontEndInfo') }}</h3>
<el-form-item :label="t('frontEndName')">
<el-input v-model.trim="formData.front_end_name" :placeholder="t('frontEndNamePlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
</el-form-item>
<el-form-item :label="t('phone')">
<el-input v-model.trim="formData.phone" :placeholder="t('phonePlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
</el-form-item>
<el-form-item :label="t('logo')">
<upload-image v-model="formData.front_end_logo" />
</el-form-item>
<el-form-item :label="t('icon')">
<upload-image v-model="formData.front_end_icon" />
</el-form-item>
<div class="mt-[20px]" v-show="appType == 'site'">
<h3 class="panel-title !text-[14px] bg-[#F4F5F7] p-3 border-[#E6E6E6] border-solid border-b-[1px]">{{ t('frontEndInfo') }}</h3>
<el-form-item :label="t('frontEndName')">
<el-input v-model.trim="formData.front_end_name" :placeholder="t('frontEndNamePlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
</el-form-item>
<el-form-item :label="t('phone')">
<el-input v-model.trim="formData.phone" :placeholder="t('phonePlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
</el-form-item>
<el-form-item :label="t('logo')">
<upload-image v-model="formData.front_end_logo" />
</el-form-item>
<el-form-item :label="t('icon')">
<upload-image v-model="formData.front_end_icon" />
</el-form-item>
<el-form-item :label="t('metaTitle')">
<el-input v-model.trim="formData.meta_title" :placeholder="t('MetaPlaceholder')" class="input-width" clearable maxlength="40" show-word-limit />
</el-form-item>
<el-form-item :label="t('metaDescription')">
<el-input v-model.trim="formData.meta_desc" :placeholder="t('metaDescriptionPlaceholder')" class="input-width" clearable maxlength="200" show-word-limit />
</el-form-item>
<el-form-item :label="t('metaKeywords')">
<el-input v-model.trim="formData.meta_keyword" :placeholder="t('metaKeywordsPlaceholder')" class="input-width" clearable maxlength="200" show-word-limit />
</el-form-item>
<el-form-item :label="t('metaTitle')">
<el-input v-model.trim="formData.meta_title" :placeholder="t('MetaPlaceholder')" class="input-width" clearable maxlength="40" show-word-limit />
</el-form-item>
<el-form-item :label="t('metaDescription')">
<el-input v-model.trim="formData.meta_desc" :placeholder="t('metaDescriptionPlaceholder')" class="input-width" clearable maxlength="200" show-word-limit />
</el-form-item>
<el-form-item :label="t('metaKeywords')">
<el-input v-model.trim="formData.meta_keyword" :placeholder="t('metaKeywordsPlaceholder')" class="input-width" clearable maxlength="200" show-word-limit />
</el-form-item>
</div>
<div class="mt-[20px]" v-if="appType == 'admin'">
<h3 class="panel-title !text-[14px] bg-[#F4F5F7] p-3 border-[#E6E6E6] border-solid border-b-[1px]">{{ t('serviceInformation') }}</h3>
<el-form-item :label="t('contactsTel')">
<el-input v-model.trim="formData.tel" :placeholder="t('contactsTelPlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
</el-form-item>
<el-form-item :label="t('wechatCode')">
<upload-image v-model="formData.wechat_code" />
</el-form-item>
<el-form-item :label="t('customerServiceCode')">
<upload-image v-model="formData.enterprise_wechat" />
</el-form-item>
</div>
</el-card>
</el-form>
<div class="fixed-footer-wrap">
<div class="fixed-footer">
<el-button type="primary" :loading="loading" @click="save(formRef)">{{ t('save') }}</el-button>
</div>
</div>
<div class="mt-[20px]" v-if="appType == 'admin'">
<h3 class="panel-title !text-[14px] bg-[#F4F5F7] p-3 border-[#E6E6E6] border-solid border-b-[1px]">{{ t('serviceInformation') }}</h3>
<el-form-item :label="t('contactsTel')">
<el-input v-model.trim="formData.tel" :placeholder="t('contactsTelPlaceholder')" class="input-width" clearable maxlength="20" show-word-limit />
</el-form-item>
<el-form-item :label="t('wechatCode')">
<upload-image v-model="formData.wechat_code" />
</el-form-item>
<el-form-item :label="t('customerServiceCode')">
<upload-image v-model="formData.enterprise_wechat" />
</el-form-item>
</div>
</el-card>
</el-form>
<div class="fixed-footer-wrap">
<div class="fixed-footer">
<el-button type="primary" :loading="loading" @click="save(formRef)">{{ t('save') }}</el-button>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
@ -91,46 +91,46 @@ const pageName = route.meta.title
const loading = ref(true)
const appType = ref(getAppType())
const formData: any = reactive<Record<string, string>>({
site_name: '',
logo: '',
desc: '',
latitude: '',
keywords: '',
longitude: '',
province_id: '',
city_id: '',
district_id: '',
address: '',
full_address: '',
business_hours: '',
phone: '',
front_end_name: '',
front_end_logo: '',
front_end_icon: '',
icon: '',
wechat_code: '',
enterprise_wechat: '',
tel: '',
site_login_logo: '',
site_login_bg_img: '',
meta_title: '',
meta_desc: '',
meta_keyword: ''
site_name: '',
logo: '',
desc: '',
latitude: '',
keywords: '',
longitude: '',
province_id: '',
city_id: '',
district_id: '',
address: '',
full_address: '',
business_hours: '',
phone: '',
front_end_name: '',
front_end_logo: '',
front_end_icon: '',
icon: '',
wechat_code: '',
enterprise_wechat: '',
tel: '',
site_login_logo: '',
site_login_bg_img: '',
meta_title: '',
meta_desc: '',
meta_keyword: ''
})
const setFormData = async () => {
const data = await (await getWebsite()).data
Object.keys(formData).forEach((key: string) => {
if (data[key] != undefined) formData[key] = data[key]
})
const data = await (await getWebsite()).data
Object.keys(formData).forEach((key: string) => {
if (data[key] != undefined) formData[key] = data[key]
})
const service_data: any = await (await getService()).data
formData.wechat_code = service_data.wechat_code
formData.enterprise_wechat = service_data.enterprise_wechat
formData.tel = service_data.tel
formData.site_login_logo = service_data.site_login_logo
formData.site_login_bg_img = service_data.site_login_bg_img
loading.value = false
const service_data: any = await (await getService()).data
formData.wechat_code = service_data.wechat_code
formData.enterprise_wechat = service_data.enterprise_wechat
formData.tel = service_data.tel
formData.site_login_logo = service_data.site_login_logo
formData.site_login_bg_img = service_data.site_login_bg_img
loading.value = false
}
setFormData()
@ -138,42 +138,42 @@ const formRef = ref<FormInstance>()
// 表单验证规则
const formRules = reactive<FormRules>({
site_name: [
{ required: true, message: t('siteNamePlaceholder'), trigger: 'blur' }
],
logo: [
{ required: true, message: t('请选择长方形Logo'), trigger: 'blur' }
],
icon: [
{ required: true, message: t('请选择正方形Logo'), trigger: 'blur' }
],
front_end_name: [
{ required: true, message: t('frontEndNamePlaceholder'), trigger: 'blur' }
]
site_name: [
{ required: true, message: t('siteNamePlaceholder'), trigger: 'blur' }
],
logo: [
{ required: true, message: t('请选择长方形Logo'), trigger: 'blur' }
],
icon: [
{ required: true, message: t('请选择正方形Logo'), trigger: 'blur' }
],
front_end_name: [
{ required: true, message: t('frontEndNamePlaceholder'), trigger: 'blur' }
]
})
/**
* 保存
*/
const save = async (formEl: FormInstance | undefined) => {
if (loading.value || !formEl) return
if (loading.value || !formEl) return
await formEl.validate(async (valid) => {
if (valid) {
loading.value = true
setWebsite(formData).then(() => {
loading.value = false
appType.value == 'admin' ? useSystemStore().getWebsiteInfo() : useUserStore().getSiteInfo()
}).catch(() => {
loading.value = false
})
}
})
await formEl.validate(async (valid) => {
if (valid) {
loading.value = true
setWebsite(formData).then(() => {
loading.value = false
appType.value == 'admin' ? useSystemStore().getWebsiteInfo() : useUserStore().getSiteInfo()
}).catch(() => {
loading.value = false
})
}
})
}
</script>
<style lang="scss" scoped>
:deep(.loading-box .el-loading-spinner){
top: 33%;
top: 33%;
}
</style>

277
admin/src/app/views/setting/transfer_scene.vue
View File

@ -1,149 +1,200 @@
<template>
<div class="main-container">
<el-card class="box-card mt-[15px] !border-none" shadow="never" v-for="(item, key) in screne" :key="key">
<div class="flex items-center mb-[20px]">
<h3 class="text-[14px] mr-[20px]">{{ item.name }}</h3>
<div class="flex items-center">
<span class="text-[14px] mr-[10px]">{{ t('transferSceneId') }}：</span>
<div class="flex items-center">
<el-input v-model.trim="item.scene_id" maxlength="5" class="!w-[60px]" :disabled="item.disabled" @blur="handleInput($event,key,item)" :ref="(el: any) =>{ if(el) inputRefs[key] = el }" v-show="!item.disabled"/>
<div v-show="item.disabled">{{item.scene_id ? item.scene_id : '--'}}</div>
<div @click="handleDisabled(item, key)" class="w-[40xp] flex items-center ml-[8px]"><el-icon size="20" color="var(--el-color-primary)"><Edit /></el-icon></div>
</div>
</div>
</div>
<div>
<div class="flex items-center justify-between p-[10px] table-item-border bg">
<span class="text-base w-[230px]">{{ t('transferType') }}</span>
<span class="text-base w-[230px]">{{ t('recvPerception') }}</span>
<span class="text-base w-[230px]">{{ t('reportInfos') }}</span>
<span class="text-base w-[80px] text-center">{{ t('operation') }}</span>
</div>
<div v-if="Object.values(item.trade_scene_data).length">
<div class="flex items-center justify-between p-[10px] table-item-border" v-for="(subItem, subKey) in item.trade_scene_data" :key="subKey">
<div class="flex w-[230px] flex-shrink-0 text-base">{{ subItem.name }}</div>
<div class="flex w-[230px] flex-shrink-0 text-base">{{ subItem.perception }}</div>
<div class="w-[230px] flex-shrink-0 text-base">
<div v-for="(childItem,childKey) in subItem.infos" :key="childKey">{{ childKey }}：{{ childItem }}</div>
</div>
<div class="flex items-center justify-center w-[80px] select-none">
<button class="text-base text-primary" @click="configFn(item,subItem,subKey)">{{ t('deploy') }}</button>
</div>
</div>
</div>
<div v-else class="min-h-[80px] flex items-center justify-center text-base">
{{ t('noData') }}
</div>
</div>
</el-card>
<el-dialog v-model="showDialog" :title="curData.name" width="550px" :destroy-on-close="true">
<el-form :model="formData" label-width="110px" ref="formRef" class="page-form">
<el-form-item :label="t('recvPerception')" prop="perception" :rules="[{ required: true, message: t('recvPerceptionTips'), trigger: 'blur' }]">
<el-select v-model="formData.perception" :placeholder="t('recvPerceptionTips')" clearable class="!w-[300px]">
<el-option v-for="(item,index) in curData.user_recv_perception" :key="index" :label="item" :value="item" />
</el-select>
</el-form-item>
<template v-for="(item, index) in curData.transfer_scene_report_infos" :key="index">
<el-form-item :label="item" :prop="`infos[${item}]`" :rules="[{ required: true, message: `请输入${item}`, trigger: 'blur' }]">
<el-input v-model.trim="formData.infos[item]" maxlength="40" class="!w-[300px]"/>
</el-form-item>
</template>
</el-form>
<template #footer>
<div class="main-container">
<el-card class="box-card mt-[15px] !border-none" shadow="never" v-for="(item, key) in screne" :key="key">
<div class="flex items-center mb-[20px]">
<h3 class="text-[14px] mr-[20px]">{{ item.name }}</h3>
<div class="flex items-center">
<span class="text-[14px] mr-[10px]">{{ t('transferSceneId') }}：</span>
<div class="flex items-center">
<el-input
v-model.trim="item.scene_id"
maxlength="5"
minlength="4"
class="!w-[60px]"
:class="item.error ? '!border-red-500' : ''"
:disabled="item.disabled"
@blur="handleInput($event,key,item)"
:ref="(el: any) =>{ if(el) inputRefs[key] = el }"
v-show="!item.disabled"
/>
<div v-show="item.disabled">{{ item.scene_id ? item.scene_id : '--' }}</div>
<div @click="handleDisabled(item, key)" class="w-[40px] flex items-center ml-[8px]">
<el-icon size="20" color="var(--el-color-primary)">
<Edit/>
</el-icon>
</div>
<span v-if="item.error" class="text-red-500 text-xs ml-2">场景值最少为4位</span>
</div>
</div>
</div>
<div>
<div class="flex items-center justify-between p-[10px] table-item-border bg">
<span class="text-base w-[230px]">{{ t('transferType') }}</span>
<span class="text-base w-[230px]">{{ t('recvPerception') }}</span>
<span class="text-base w-[230px]">{{ t('reportInfos') }}</span>
<span class="text-base w-[80px] text-center">{{ t('operation') }}</span>
</div>
<div v-if="Object.values(item.trade_scene_data).length">
<div class="flex items-center justify-between p-[10px] table-item-border"
v-for="(subItem, subKey) in item.trade_scene_data" :key="subKey">
<div class="flex w-[230px] flex-shrink-0 text-base">{{ subItem.name }}</div>
<div class="flex w-[230px] flex-shrink-0 text-base">{{ subItem.perception }}</div>
<div class="w-[230px] flex-shrink-0 text-base">
<div v-for="(childItem,childKey) in subItem.infos" :key="childKey">{{ childKey }}：{{ childItem }}</div>
</div>
<div class="flex items-center justify-center w-[80px] select-none">
<button class="text-base text-primary" @click="configFn(item,subItem,subKey)">{{ t('deploy') }}</button>
</div>
</div>
</div>
<div v-else class="min-h-[80px] flex items-center justify-center text-base">
{{ t('noData') }}
</div>
</div>
</el-card>
<el-dialog v-model="showDialog" :title="curData.name" width="550px" :destroy-on-close="true">
<el-form :model="formData" label-width="110px" ref="formRef" class="page-form">
<el-form-item :label="t('recvPerception')" prop="perception"
:rules="[{ required: true, message: t('recvPerceptionTips'), trigger: 'blur' }]">
<el-select v-model="formData.perception" :placeholder="t('recvPerceptionTips')" clearable class="!w-[300px]">
<el-option v-for="(item,index) in curData.user_recv_perception" :key="index" :label="item" :value="item"/>
</el-select>
</el-form-item>
<template v-for="(item, index) in curData.transfer_scene_report_infos" :key="index">
<el-form-item :label="item" :prop="`infos[${item}]`"
:rules="[{ required: true, message: `请输入${item}`, trigger: 'blur' }]">
<el-input v-model.trim="formData.infos[item]" maxlength="40" class="!w-[300px]"/>
</el-form-item>
</template>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">{{ t('cancel') }}</el-button>
<el-button type="primary" :loading="loading" @click="confirm(formRef)">{{ t('confirm') }}</el-button>
<el-button type="primary" :loading="loading" @click="confirm(formRef)">{{
t('confirm')
}}</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { t } from '@/lang'
import { getTransferScene, setSceneId, setTradeScene } from '@/app/api/pay'
import { cloneDeep } from 'lodash-es'
import { FormInstance } from 'element-plus'
import {nextTick, ref} from 'vue'
import {t} from '@/lang'
import {getTransferScene, setSceneId, setTradeScene} from '@/app/api/pay'
import {cloneDeep} from 'lodash-es'
import {FormInstance} from 'element-plus'
const screne = ref<any>({})
const loading = ref(false)
const getTransferSceneFn = () => {
getTransferScene().then(res => {
screne.value = res.data
for (const key in screne.value) {
screne.value[key].disabled = true
}
})
getTransferScene().then(res => {
screne.value = res.data
for (const key in screne.value) {
screne.value[key].disabled = true
screne.value[key].error = false
}
})
}
getTransferSceneFn()
// 更改场景值
// 更改场景值（最终修复版）
const handleInput = (e: any, key: any, data: any) => {
if (e.target.value) {
setSceneId({
scene: key,
scene_id: e.target.value
}).then(() => {
data.disabled = true
getTransferSceneFn()
})
} else {
data.disabled = true
}
}
const inputRefs = ref<any>({})
const handleDisabled = (data: any, key: any) => {
data.disabled = false
nextTick(() => {
inputRefs.value[key].focus()
const val = e.target.value?.trim() || ''
const originalVal = originalValues.value[key] || ''
// 有值 → 清空：必须提交接口置空
if (val === '' && originalVal !== '') {
data.error = false
setSceneId({
scene: key,
scene_id: ''
}).then(() => {
data.disabled = true
getTransferSceneFn()
})
return
}
// 本来就空：不提交
if (val === '' && originalVal === '') {
data.error = false
data.disabled = true
return
}
// 有值但长度不够：提示，不提交
if (val.length < 4) {
data.error = true
return
}
// 合法 4-5 位：提交
if (val.length >= 4 && val.length <= 5) {
data.error = false
setSceneId({
scene: key,
scene_id: val
}).then(() => {
data.disabled = true
getTransferSceneFn()
})
}
}
const inputRefs = ref<any>({})
const originalValues = ref<any>({})
const handleDisabled = (data: any, key: any) => {
originalValues.value[key] = data.scene_id
data.disabled = false
data.error = false
nextTick(() => {
inputRefs.value[key]?.focus()
})
}
const showDialog = ref(false)
const curData = ref<any>({})
const formData = ref({
type: '',
scene: '',
perception: '',
infos: {}
type: '',
scene: '',
perception: '',
infos: {}
})
const configFn = (data: any, subData: any, type: any) => {
curData.value = cloneDeep(data)
formData.value.type = type
formData.value.scene = subData.scene
formData.value.perception = subData.perception
formData.value.infos = cloneDeep(subData.infos)
showDialog.value = true
curData.value = cloneDeep(data)
formData.value.type = type
formData.value.scene = subData.scene
formData.value.perception = subData.perception
formData.value.infos = cloneDeep(subData.infos)
showDialog.value = true
}
const formRef = ref<FormInstance>()
/**
* 确认
* @param formEl
*/
const confirm = async (formEl: FormInstance | undefined) => {
if (loading.value || !formEl) return
await formEl.validate(async (valid) => {
if (valid) {
loading.value = true
setTradeScene(formData.value).then(() => {
loading.value = false
showDialog.value = false
getTransferSceneFn()
}).catch(() => {
loading.value = false
})
}
})
if (loading.value || !formEl) return
await formEl.validate(async (valid) => {
if (valid) {
loading.value = true
setTradeScene(formData.value).then(() => {
loading.value = false
showDialog.value = false
getTransferSceneFn()
}).catch(() => {
loading.value = false
})
}
})
}
const cancel = () => {
showDialog.value = false
showDialog.value = false
}
</script>
<style lang="scss" scoped>
.table-item-border {
@apply border-b border-[var(--el-border-color)];
@apply border-b border-[var(--el-border-color)];
}
</style>

98
admin/src/app/views/tools/attachment.vue
View File

@ -1,18 +1,18 @@
<template>
<div class="main-container attachment-container">
<el-card class="box-card !border-none full-container" shadow="never">
<div class="main-container attachment-container">
<el-card class="box-card !border-none full-container" shadow="never">
<div class="flex justify-between items-center mb-[20px]">
<span class="text-page-title">{{ pageName }}</span>
</div>
<div class="flex justify-between items-center mb-[20px]">
<span class="text-page-title">{{ pageName }}</span>
</div>
<el-tabs v-model="type" tab-position="top">
<el-tab-pane :label="t(tab)" v-for="(tab, index) in attachmentType" :name="tab" :key="index">
<attachment scene="attachment" :type="tab" />
</el-tab-pane>
</el-tabs>
</el-card>
</div>
<el-tabs v-model="type" tab-position="top">
<el-tab-pane :label="t(tab)" v-for="(tab, index) in attachmentType" :name="tab" :key="index">
<attachment scene="attachment" :type="tab" />
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
<script lang="ts" setup>
@ -30,46 +30,46 @@ const type = ref(attachmentType[0])
<style lang="scss">
.attachment-container {
overflow: hidden;
min-height: calc(100vh - 94px);
background-color: var(--el-bg-color-overlay);
overflow: hidden;
min-height: calc(100vh - 94px);
background-color: var(--el-bg-color-overlay);
.full-container {
height: calc(100vh - 100px);
}
.el-card__body {
height: 100%;
}
.el-tabs {
display: flex;
flex-direction: column;
height: calc(100% - 40px);
}
.el-tabs__content {
flex: 1;
.el-tab-pane {
height: 100%;
}
}
.el-tabs__nav-wrap::after {
height: 1px;
}
.main-wrap {
border: none;
.group-wrap {
padding: 0 15px 0 0;
.full-container {
height: calc(100vh - 100px);
}
.attachment-list-wrap {
padding: 0 0 0 15px;
.el-card__body {
height: 100%;
}
.el-tabs {
display: flex;
flex-direction: column;
height: calc(100% - 40px);
}
.el-tabs__content {
flex: 1;
.el-tab-pane {
height: 100%;
}
}
.el-tabs__nav-wrap::after {
height: 1px;
}
.main-wrap {
border: none;
.group-wrap {
padding: 0 15px 0 0;
}
.attachment-list-wrap {
padding: 0 0 0 15px;
}
}
}
}
</style>

512
admin/src/components/map-selector/index.vue Normal file
View File

@ -0,0 +1,512 @@
<template>
<div :id="containerId" :class="containerClass" :style="containerStyle" v-loading="loading"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch, nextTick, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { t } from '@/lang'
import { getMap } from '@/app/api/sys'
import {
createMarker,
createCircle,
createPolygon,
deleteGeometry,
selectGeometry,
latLngToAddress
} from '@/utils/qqmap'
// 天地图工具
import {
createCircle as tdCreateCircle,
createPolygon as tdCreatePolygon,
deleteGeometry as tdDeleteGeometry,
selectGeometry as tdSelectGeometry,
clearAllGeometry,
latLngToAddress as tiandituLatLngToAddress
} from '@/utils/tianditu'
const MAP_INIT_DELAY = 500
const MAP_SEARCH_TIMEOUT = 5000
const MAP_SEARCH_INTERVAL = 100
const MAP_SEARCH_MAX_ATTEMPTS = 50
interface MapInstance {
destroy?: () => void
clearOverLays?: () => void
on?: (event: string, callback: Function) => void
addControl?: (control: any) => void
addOverLay?: (overlay: any) => void
removeOverLay?: (overlay: any) => void
centerAndZoom?: (center: any, zoom: number) => void
setZoom?: (zoom: number) => void
setCenter?: (center: any) => void
addEventListener?: (event: string, callback: Function) => void
}
interface Props {
containerId?: string
containerClass?: string
containerStyle?: string
longitude?: string | number
latitude?: string | number
zoom?: number
selectedKey?: string
disabledClickMarker?: any // 是否禁止点击事件添加标注
}
interface Emits {
(e: 'update:longitude', value: string): void
(e: 'update:latitude', value: string): void
(e: 'locationChange', data: { lat: number, lng: number, address: any }): void
(e: 'areaChange', data: { key: string, type: 'circle' | 'polygon', path: any }): void
(e: 'selectChange', key: string): void
}
const props = withDefaults(defineProps<Props>(), {
containerId: 'map-container',
containerClass: 'w-[800px] h-[500px] relative border border-gray-300',
containerStyle: '',
longitude: 116.397463,
latitude: 39.909187,
zoom: 14,
selectedKey: '',
disabledClickMarker: false
})
const emit = defineEmits<Emits>()
const loading = ref(true)
const mapKey = ref('')
const mapType = ref<'tencent' | 'tianditu'>('tianditu')
let map: MapInstance | null = null
let marker: any = null
const overlays = ref<any[]>([])
// 获取地图配置
const getMapConfigData = () => {
return getMap({
need_encrypt: false
}).then((res: any) => {
mapType.value = res.data.map_type || 'tianditu'
mapKey.value = mapType.value === 'tianditu' ? res.data.tianditu_map_web_key : res.data.key
}).catch((error) => {
loading.value = false
ElMessage.error(t('获取地图配置失败'))
})
}
// 初始化腾讯地图
const initTencentMap = () => {
const mapScript = document.createElement('script')
mapScript.src = 'https://map.qq.com/api/gljs?libraries=tools,service&v=1.exp&key=' + mapKey.value
document.body.appendChild(mapScript)
mapScript.onload = () => {
setTimeout(() => {
const TMap = (window as any).TMap
if (TMap) {
const lng = props.longitude ? Number(props.longitude) : 116.397463
const lat = props.latitude ? Number(props.latitude) : 39.909187
const center = new TMap.LatLng(lat, lng)
map = new TMap.Map(props.containerId, { center, zoom: props.zoom })
map.on('tilesloaded', () => loading.value = false)
marker = createMarker(map)
if(!props.disabledClickMarker) {
map.on('click', (evt: any) => {
const ll = evt?.latLng
if (!ll) return
const lat = typeof ll.getLat === 'function' ? ll.getLat() : ll.lat
const lng = typeof ll.getLng === 'function' ? ll.getLng() : ll.lng
if (lat == null || lng == null || Number.isNaN(lat) || Number.isNaN(lng)) return
const newCenter = new TMap.LatLng(lat, lng)
map.setZoom(16)
map.setCenter(newCenter)
marker.updateGeometries({ id: 'center', position: newCenter })
nextTick(() => {
handleLocationChange(lat, lng)
})
})
}
if (props.latitude && props.longitude) {
handleLocationChange(lat, lng)
}
} else {
loading.value = false
ElMessage.error(t('腾讯地图加载失败'))
}
}, MAP_INIT_DELAY)
}
mapScript.onerror = () => {
loading.value = false
ElMessage.error(t('腾讯地图脚本加载失败'))
}
}
// 初始化天地图
const initTiandituMap = () => {
const mapScript = document.createElement('script')
mapScript.src = 'https://api.tianditu.gov.cn/api?v=4.0&tk=' + mapKey.value
document.body.appendChild(mapScript)
mapScript.onload = () => {
setTimeout(() => {
const T = (window as any).T
if (T) {
const lng = props.longitude ? Number(props.longitude) : 116.397463
const lat = props.latitude ? Number(props.latitude) : 39.909187
map = new T.Map(props.containerId)
map.centerAndZoom(new T.LngLat(lng, lat), props.zoom)
const ctrl = new T.Control.Zoom()
map.addControl(ctrl)
marker = new T.Marker(new T.LngLat(lng, lat))
map.addOverLay(marker)
loading.value = false
if(!props.disabledClickMarker) {
map.addEventListener('click', (evt: any) => {
const lngLat = evt.lnglat
if (!lngLat) return
const lat = lngLat.lat
const lng = lngLat.lng
if (lat == null || lng == null || Number.isNaN(lat) || Number.isNaN(lng)) return
map.removeOverLay(marker)
marker = new T.Marker(new T.LngLat(lng, lat))
map.addOverLay(marker)
map.centerAndZoom(new T.LngLat(lng, lat), 16)
nextTick(() => {
handleLocationChange(lat, lng)
})
})
}
if (props.latitude && props.longitude) {
handleLocationChange(lat, lng)
}
} else {
loading.value = false
ElMessage.error(t('天地图加载失败'))
}
}, MAP_INIT_DELAY)
}
mapScript.onerror = () => {
loading.value = false
ElMessage.error(t('天地图加载失败，请检查密钥配置'))
}
}
// 初始化地图
const initMap = () => {
if (!mapKey.value) {
loading.value = false
return
}
// 防止重复初始化
if (map) {
return
}
if (mapType.value === 'tencent') {
initTencentMap()
} else if (mapType.value === 'tianditu') {
initTiandituMap()
}
}
// 处理位置变化
const handleLocationChange = (lat: number, lng: number) => {
emit('update:longitude', String(lng))
emit('update:latitude', String(lat))
if (mapType.value === 'tencent') {
latLngToAddress({ mapKey: mapKey.value, lat, lng }).then(({ message, result }) => {
if (message == 'query ok' || message == 'Success') {
emit('locationChange', { lat, lng, address: result })
}
})
} else if (mapType.value === 'tianditu') {
tiandituLatLngToAddress({ mapKey: mapKey.value, lat, lng }).then((addressData: any) => {
emit('locationChange', { lat, lng, address: addressData })
}).catch((error: any) => {
ElMessage.error(error.message || t('地址解析失败'))
})
}
}
// 更新地图位置（供外部调用）
const updateLocation = (lat: number, lng: number) => {
if (!map || !marker) return
if (mapType.value === 'tencent') {
const TMap = (window as any).TMap
if (!TMap) return
const newCenter = new TMap.LatLng(lat, lng)
map.setZoom(16)
map.setCenter(newCenter)
marker.updateGeometries({ id: 'center', position: newCenter })
} else if (mapType.value === 'tianditu') {
const T = (window as any).T
if (!T) return
const newCenter = new T.LngLat(lng, lat)
// 移除旧标记
map.removeOverLay(marker)
// 创建新标记
marker = new T.Marker(newCenter)
map.addOverLay(marker)
map.centerAndZoom(newCenter, 16)
}
}
// 地址搜索（供外部调用）
const searchAddress = (address: string): Promise<{ lat: number, lng: number }> => {
return new Promise((resolve, reject) => {
if (!mapKey.value) {
reject(new Error(t('地图配置未加载')))
return
}
const waitForMap = () => {
return new Promise<void>((resolveWait, rejectWait) => {
if (map) {
resolveWait()
return
}
let attempts = 0
const checkInterval = setInterval(() => {
attempts++
if (map) {
clearInterval(checkInterval)
resolveWait()
} else if (attempts > MAP_SEARCH_MAX_ATTEMPTS) {
clearInterval(checkInterval)
rejectWait(new Error(t('地图初始化超时')))
}
}, MAP_SEARCH_INTERVAL)
})
}
waitForMap().then(() => {
if (mapType.value === 'tencent') {
const TMap = (window as any).TMap
if (!TMap?.service) {
reject(new Error(t('腾讯地图服务未加载')))
return
}
const geocoder = new TMap.service.Geocoder({ key: mapKey.value })
geocoder.getLocation({ address }).then((result: any) => {
if (result.status === 0 && result.result?.location) {
const location = result.result.location
const lat = Number(location.lat)
const lng = Number(location.lng)
updateLocation(lat, lng)
resolve({ lat, lng })
} else {
reject(new Error(result.message || t('未找到该地址')))
}
}).catch((error) => {
reject(error)
})
} else if (mapType.value === 'tianditu') {
const T = (window as any).T
if (!T) {
reject(new Error(t('天地图服务未加载')))
return
}
const geocoder = new T.Geocoder()
geocoder.getPoint(address, (result: any) => {
if (result && result.status === '0' && result.location) {
const lat = result.location.lat
const lng = result.location.lon || result.location.lng
if (lat && lng) {
updateLocation(lat, lng)
resolve({ lat, lng })
} else {
reject(new Error(t('坐标解析失败')))
}
} else {
reject(new Error(result?.msg || t('未找到该地址')))
}
})
}
}).catch(reject)
})
}
// 添加圆
const addCircle = (center?: { lat: number; lng: number }, radius = 1000, options?: any) => {
if (!map) return null
const key = options?.key || `circle_${Date.now()}`
let circle = null
// 创建geometriesData对象
const geometriesData = { key, center, radius, ...options }
if (mapType.value === 'tencent') {
createCircle(map, geometriesData, (selectedKey) => {
// 触发selectChange事件
emit('selectChange', selectedKey)
})
// 腾讯地图的createCircle不返回值，创建一个包含key的对象添加到overlays
circle = { key, geometriesData }
} else {
circle = tdCreateCircle(map, geometriesData, (data) => {
// 触发areaChange事件，确保path数据干净，不包含循环引用
emit('areaChange', {
key: data.key,
type: 'circle',
path: {
key: data.key,
center: data.center,
radius: data.radius
}
})
}, (selectedKey) => {
// 触发selectChange事件
emit('selectChange', selectedKey)
})
// 为天地图添加geometriesData引用
if (circle) {
circle.geometriesData = geometriesData
}
}
if (circle) overlays.value.push(circle)
return circle
}
// 添加多边形
const addPolygon = (paths: any[], options?: any) => {
if (!map) return null
const key = options?.key || `poly_${Date.now()}`
let poly = null
// 创建geometriesData对象
const geometriesData = { key, paths, ...options }
if (mapType.value === 'tencent') {
createPolygon(map, geometriesData, (selectedKey) => {
// 触发selectChange事件
emit('selectChange', selectedKey)
})
// 腾讯地图的createPolygon不返回值，创建一个包含key的对象添加到overlays
poly = { key, geometriesData }
} else {
poly = tdCreatePolygon(map, geometriesData, (data) => {
// 触发areaChange事件，确保path数据干净，不包含循环引用
emit('areaChange', {
key: data.key,
type: 'polygon',
path: {
key: data.key,
paths: data.paths.map((point: any) => ({
lat: point.lat,
lng: point.lng
}))
}
})
}, (selectedKey) => {
// 触发selectChange事件
emit('selectChange', selectedKey)
})
// 为天地图添加geometriesData引用
if (poly) {
poly.geometriesData = geometriesData
}
}
if (poly) overlays.value.push(poly)
return poly
}
// 删除覆盖物
const removeOverlay = (overlay: any) => {
if (!map || !overlay) return
const key = overlay.key || ''
mapType.value === 'tencent' ? deleteGeometry(key) : tdDeleteGeometry(map, key)
// 通过key查找并删除覆盖物
const idx = overlays.value.findIndex(item => item.key === key)
if (idx > -1) overlays.value.splice(idx, 1)
}
// 清空所有覆盖物
const clearOverlays = () => {
if (!map) return
mapType.value === 'tencent'
? overlays.value.forEach(o => deleteGeometry(o.key))
: clearAllGeometry(map)
overlays.value = []
}
const selectGeo = (key: string) => {
mapType.value === 'tencent' ? selectGeometry(key) : tdSelectGeometry(key)
}
// 监听选中key变化
watch(() => props.selectedKey, (newKey) => {
if (newKey) {
selectGeo(newKey)
}
})
// 监听地图key和类型变化
watch([mapKey, mapType], ([newKey, newType]) => {
if (newKey && newType) {
initMap()
}
})
onMounted(() => {
getMapConfigData()
})
onBeforeUnmount(() => {
if (map) {
try {
if (mapType.value === 'tencent') {
map.destroy && map.destroy()
} else if (mapType.value === 'tianditu') {
clearOverlays()
map.clearOverLays && map.clearOverLays()
}
} catch (e) {
}
map = null
marker = null
overlays.value = []
}
})
defineExpose({
updateLocation,
searchAddress,
addCircle,
addPolygon,
removeOverlay,
clearOverlays,
selectGeometry: selectGeo,
getMap: () => map,
getMarker: () => marker,
handleLocationChange
})
</script>
<style scoped>
</style>

626
admin/src/layout/lightside/components/aside/index.vue
View File

@ -1,37 +1,37 @@
<template>
<div :class="['layout-aside ease-in duration-200 flex box-border', { 'bright': !dark}]">
<div class="flex flex-col border-0 border-r-[1px] border-solid border-[var(--el-color-info-light-8)] box-border overflow-hidden">
<div :class="['w-[150px] one-menu hide-scrollbar', { 'expanded': systemStore.menuIsCollapse }]" >
<div class="flex flex-col items-center">
<template v-for="(item, index) in oneMenuData">
<div v-if="item.meta.show" :title="systemStore.menuIsCollapse ? item.meta.title : item.meta.short_title" class="menu-item my-[2px] p-2 flex w-full box-border cursor-pointer relative" :class="{'is-active':oneMenuActive===item.original_name,'hover-left': systemStore.menuIsCollapse, 'vertical': !systemStore.menuIsCollapse , 'horizontal': systemStore.menuIsCollapse }" :style="{ height: (systemStore.menuIsCollapse ) ? '40px' : '55px' }" @click="router.push({ name: item.name })">
<div class="w-[20px] h-[20px] flex items-center justify-center menu-icon" :class="{'is-active':oneMenuActive===item.original_name}">
<template v-if="item.meta.icon">
<el-image class="w-[20px] h-[20px] overflow-hidden" :src="item.meta.icon" fit="fill" v-if="isUrl(item.meta.icon)"/>
<icon :name="item.meta.icon" size="20px" color="#1D1F3A" v-else />
</template>
<icon v-else :name="'iconfont iconshezhi1'" color="#1D1F3A" />
</div>
<div v-if="systemStore.menuIsCollapse" class="text-left text-[14px] mt-[3px] w-[75px] using-hidden ml-[10px]">{{ item.meta.title || item.meta.short_title }}</div>
<div v-else class="text-center text-[12px] using-hidden mt-1">{{ item.meta.short_title || item.meta.title }}</div>
<div :class="['layout-aside ease-in duration-200 flex box-border', { 'bright': !dark}]">
<div class="flex flex-col border-0 border-r-[1px] border-solid border-[var(--el-color-info-light-8)] box-border overflow-hidden">
<div :class="['w-[150px] one-menu hide-scrollbar', { 'expanded': systemStore.menuIsCollapse }]" >
<div class="flex flex-col items-center">
<template v-for="(item, index) in oneMenuData">
<div v-if="item.meta.show" :title="systemStore.menuIsCollapse ? item.meta.title : item.meta.short_title" class="menu-item my-[2px] p-2 flex w-full box-border cursor-pointer relative" :class="{'is-active':oneMenuActive===item.original_name,'hover-left': systemStore.menuIsCollapse, 'vertical': !systemStore.menuIsCollapse , 'horizontal': systemStore.menuIsCollapse }" :style="{ height: (systemStore.menuIsCollapse ) ? '40px' : '55px' }" @click="router.push({ name: item.name })">
<div class="w-[20px] h-[20px] flex items-center justify-center menu-icon" :class="{'is-active':oneMenuActive===item.original_name}">
<template v-if="item.meta.icon">
<el-image class="w-[20px] h-[20px] overflow-hidden" :src="item.meta.icon" fit="fill" v-if="isUrl(item.meta.icon)"/>
<icon :name="item.meta.icon" size="20px" color="#1D1F3A" v-else />
</template>
<icon v-else :name="'iconfont iconshezhi1'" color="#1D1F3A" />
</div>
<div v-if="systemStore.menuIsCollapse" class="text-left text-[14px] mt-[3px] w-[75px] using-hidden ml-[10px]">{{ item.meta.title || item.meta.short_title }}</div>
<div v-else class="text-center text-[12px] using-hidden mt-1">{{ item.meta.short_title || item.meta.title }}</div>
</div>
</template>
</div>
</div>
</template>
</div>
<div class="flex flex-col two-menu w-[185px] " v-if="twoMenuData.length">
<el-scrollbar class="flex-1" >
<el-menu :default-active="route.name" :router="true" class="aside-menu">
<menu-item v-for="(route, index) in twoMenuData" :routes="route" :key="index" :isNewVersion="isNewVersion" />
</el-menu>
<div class="h-[48px]"></div>
</el-scrollbar>
</div>
</div>
</div>
<div class="flex flex-col two-menu w-[185px] " v-if="twoMenuData.length">
<el-scrollbar class="flex-1" >
<el-menu :default-active="route.name" :router="true" class="aside-menu">
<menu-item v-for="(route, index) in twoMenuData" :routes="route" :key="index" :isNewVersion="isNewVersion" />
</el-menu>
<div class="h-[48px]"></div>
</el-scrollbar>
</div>
</div>
</template>
<script lang="ts" setup>
import { watch, ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
@ -53,203 +53,203 @@ const router = useRouter()
const addonRouters: Record<string, any> = {}
const addonIndexRoute = userStore.addonIndexRoute
const dark = computed(() => {
return systemStore.dark
return systemStore.dark
})
const twoMenuData = ref<Record<string, any>[]>([])
const oneMenuData = ref<Record<string, any>[]>([])
routers.forEach(item => {
item.original_name = item.name
if (item.meta.addon == '') {
if (item.meta.attr == '') {
if (item.children && item.children.length) {
item.name = findFirstValidRoute(item.children)
}
oneMenuData.value.push(item)
}
} else if (item.meta.addon != '' && siteInfo?.apps.length <= 1 && siteInfo?.apps[0].key == item.meta.addon && item.meta.show) {
if (item.children) {
item.children.forEach((citem: Record<string, any>) => {
citem.original_name = citem.name
if (citem.children && citem.children.length) {
citem.name = findFirstValidRoute(citem.children)
item.original_name = item.name
if (item.meta.addon == '') {
if (item.meta.attr == '') {
if (item.children && item.children.length) {
item.name = findFirstValidRoute(item.children)
}
oneMenuData.value.push(item)
}
} else if (item.meta.addon != '' && siteInfo?.apps.length <= 1 && siteInfo?.apps[0].key == item.meta.addon && item.meta.show) {
if (item.children) {
item.children.forEach((citem: Record<string, any>) => {
citem.original_name = citem.name
if (citem.children && citem.children.length) {
citem.name = findFirstValidRoute(citem.children)
}
})
oneMenuData.value.unshift(...item.children)
} else {
oneMenuData.value.unshift(item)
}
})
oneMenuData.value.unshift(...item.children)
} else {
oneMenuData.value.unshift(item)
addonRouters[item.meta.addon] = item
}
} else {
addonRouters[item.meta.addon] = item
}
// 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
oneMenuData.value.sort((a, b) => {
if (a.meta.sort && b.meta.sort) {
return b.meta.sort - a.meta.sort
} else if (a.meta.sort) {
return -1
} else if (b.meta.sort) {
return 1
} else {
return 0
}
})
// 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
oneMenuData.value.sort((a, b) => {
if (a.meta.sort && b.meta.sort) {
return b.meta.sort - a.meta.sort
} else if (a.meta.sort) {
return -1
} else if (b.meta.sort) {
return 1
} else {
return 0
}
})
})
// 多应用时将应用插入菜单
if (siteInfo?.apps.length > 1) {
const routers:Record<string, any>[] = []
siteInfo?.apps.forEach((item: Record<string, any>) => {
if (addonRouters[item.key]) {
addonRouters[item.key].name = addonIndexRoute[item.key]
routers.push(addonRouters[item.key])
}
})
oneMenuData.value.unshift(...routers)
const routers:Record<string, any>[] = []
siteInfo?.apps.forEach((item: Record<string, any>) => {
if (addonRouters[item.key]) {
addonRouters[item.key].name = addonIndexRoute[item.key]
routers.push(addonRouters[item.key])
}
})
oneMenuData.value.unshift(...routers)
// 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
oneMenuData.value.sort((a, b) => {
if (a.meta.sort && b.meta.sort) {
return b.meta.sort - a.meta.sort
} else if (a.meta.sort) {
return -1
} else if (b.meta.sort) {
return 1
} else {
return 0
}
})
// 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
oneMenuData.value.sort((a, b) => {
if (a.meta.sort && b.meta.sort) {
return b.meta.sort - a.meta.sort
} else if (a.meta.sort) {
return -1
} else if (b.meta.sort) {
return 1
} else {
return 0
}
})
}
const oneMenuActive = ref(route.matched[1].name)
// 从 addonKeys 中提取所有需要匹配的 key
const getAddonAllKeys = (addonData) => {
if (!addonData || typeof addonData !== 'object') return [];
const allKeys = [];
Object.values(addonData).forEach(category => {
if (Array.isArray(category.list)) {
category.list.forEach(item => {
if (item.key) allKeys.push(item.key);
});
}
});
return allKeys;
if (!addonData || typeof addonData !== 'object') return [];
const allKeys = [];
Object.values(addonData).forEach(category => {
if (Array.isArray(category.list)) {
category.list.forEach(item => {
if (item.key) allKeys.push(item.key);
});
}
});
return allKeys;
};
// 处理 specialMenusKeys 子菜单 show 的方法
const handleSpecialMenus = () => {
const specialMenusKeys = storage.get('specialAppList')
if (Array.isArray(specialMenusKeys) && specialMenusKeys.length) {
const processedSpecialMenus = JSON.parse(JSON.stringify(specialMenusKeys));
const activeAppKey = storage.get('activeAppKey');
// 收集所有特殊菜单的name
processedSpecialMenus.forEach(menu => {
if (menu.children && Array.isArray(menu.children)) {
const traverseChildren = (children) => {
children.forEach(child => {
if (child && child.is_show !== undefined) {
child.is_show = (child.menu_key === activeAppKey) ? 1 : 0;
const specialMenusKeys = storage.get('specialAppList')
if (Array.isArray(specialMenusKeys) && specialMenusKeys.length) {
const processedSpecialMenus = JSON.parse(JSON.stringify(specialMenusKeys));
const activeAppKey = storage.get('activeAppKey');
// 收集所有特殊菜单的name
processedSpecialMenus.forEach(menu => {
if (menu.children && Array.isArray(menu.children)) {
const traverseChildren = (children) => {
children.forEach(child => {
if (child && child.is_show !== undefined) {
child.is_show = (child.menu_key === activeAppKey) ? 1 : 0;
}
});
};
traverseChildren(menu.children);
}
});
};
traverseChildren(menu.children);
}
});
// 过滤掉 children 为空的特殊菜单
const filteredSpecialMenus = processedSpecialMenus.filter(menu => {
return menu.children && menu.children.length > 0;
});
return formatRouters(filteredSpecialMenus);
}
return [];
});
// 过滤掉 children 为空的特殊菜单
const filteredSpecialMenus = processedSpecialMenus.filter(menu => {
return menu.children && menu.children.length > 0;
});
return formatRouters(filteredSpecialMenus);
}
return [];
};
watch(route, () => {
if (route.meta.attr != '') {
oneMenuActive.value = route.matched[1].name
twoMenuData.value = route.matched[1].children ?? []
} else {
// 多应用
if (siteInfo?.apps.length > 1) {
twoMenuData.value = route.matched[2].children
oneMenuActive.value = route.matched[2].name
if (route.meta.attr != '') {
oneMenuActive.value = route.matched[1].name
twoMenuData.value = route.matched[1].children ?? []
} else {
// 单应用
const oneMenu = route.matched[2]
if (oneMenu.meta.addon == '') {
oneMenuActive.value = route.matched[2].name
twoMenuData.value = route.matched[2].children ?? []
} else {
if (oneMenu.meta.addon == siteInfo?.apps[0].key) {
oneMenuActive.value = route.matched[3].name
twoMenuData.value = route.matched[3].children ?? []
// 多应用
if (siteInfo?.apps.length > 1) {
twoMenuData.value = route.matched[2].children
oneMenuActive.value = route.matched[2].name
} else {
oneMenuActive.value = route.matched[2].name
twoMenuData.value = route.matched[2].children ?? []
// 单应用
const oneMenu = route.matched[2]
if (oneMenu.meta.addon == '') {
oneMenuActive.value = route.matched[2].name
twoMenuData.value = route.matched[2].children ?? []
} else {
if (oneMenu.meta.addon == siteInfo?.apps[0].key) {
oneMenuActive.value = route.matched[3].name
twoMenuData.value = route.matched[3].children ?? []
} else {
oneMenuActive.value = route.matched[2].name
twoMenuData.value = route.matched[2].children ?? []
}
}
}
}
}
}
// const addonKeys = storage.get('defaultAppList')
// const addonAllKeys = getAddonAllKeys(addonKeys)
// twoMenuData.value = twoMenuData.value.filter((child) =>{
// return !child.name || !addonAllKeys.includes(child.name);
// })
// if(oneMenuActive.value == 'addon'){
// // 处理特殊菜单并插入到 twoMenuData 中（与 addon_list 同级）
// const processedSpecialMenus = handleSpecialMenus();
// if (processedSpecialMenus.length) {
// // 先找到 addon_list 在 twoMenuData 中的索引
// const addonListIndex = twoMenuData.value.findIndex(
// (item) => item.name === 'addon_list'
// );
// if (addonListIndex !== -1) {
// // 将特殊菜单插入到 addon_list 后面（同级）
// twoMenuData.value.splice(
// addonListIndex + 1,
// 0,
// ...processedSpecialMenus
// );
// } else {
// // 如果没有 addon_list，直接将特殊菜单添加到 twoMenuData 中
// twoMenuData.value.push(...processedSpecialMenus);
// }
// }
// }
// const addonKeys = storage.get('defaultAppList')
// const addonAllKeys = getAddonAllKeys(addonKeys)
// twoMenuData.value = twoMenuData.value.filter((child) =>{
// return !child.name || !addonAllKeys.includes(child.name);
// })
// if(oneMenuActive.value == 'addon'){
// // 处理特殊菜单并插入到 twoMenuData 中（与 addon_list 同级）
// const processedSpecialMenus = handleSpecialMenus();
// if (processedSpecialMenus.length) {
// // 先找到 addon_list 在 twoMenuData 中的索引
// const addonListIndex = twoMenuData.value.findIndex(
// (item) => item.name === 'addon_list'
// );
// if (addonListIndex !== -1) {
// // 将特殊菜单插入到 addon_list 后面（同级）
// twoMenuData.value.splice(
// addonListIndex + 1,
// 0,
// ...processedSpecialMenus
// );
// } else {
// // 如果没有 addon_list，直接将特殊菜单添加到 twoMenuData 中
// twoMenuData.value.push(...processedSpecialMenus);
// }
// }
// }
}, { immediate: true })
const frameworkVersionList = ref([])
const isNewVersion = computed(() => {
if (!newVersion.value || newVersion.value.version_no === version.value) {
return false;
}
if (!newVersion.value || newVersion.value.version_no === version.value) {
return false;
}
// 将版本号转为字符串再处理
const currentVersionStr = String(version.value);
const latestVersionStr = String(newVersion.value.version_no);
// 移除点号并转为数字比较
const currentVersionNum = parseInt(currentVersionStr.replace(/\./g, ''), 10);
const latestVersionNum = parseInt(latestVersionStr.replace(/\./g, ''), 10);
return latestVersionNum > currentVersionNum;
// 将版本号转为字符串再处理
const currentVersionStr = String(version.value);
const latestVersionStr = String(newVersion.value.version_no);
// 移除点号并转为数字比较
const currentVersionNum = parseInt(currentVersionStr.replace(/\./g, ''), 10);
const latestVersionNum = parseInt(latestVersionStr.replace(/\./g, ''), 10);
return latestVersionNum > currentVersionNum;
})
const getFrameworkVersionListFn = () => {
getFrameworkVersionList().then(({ data }) => {
frameworkVersionList.value = data
}).catch(() => {
})
getFrameworkVersionList().then(({ data }) => {
frameworkVersionList.value = data
}).catch(() => {
})
}
getFrameworkVersionListFn()
const newVersion: any = computed(() => {
return frameworkVersionList.value.length ? frameworkVersionList.value[0] : null
return frameworkVersionList.value.length ? frameworkVersionList.value[0] : null
})
const version = ref('')
const getVersionsInfo = () => {
getVersions().then((res) => {
version.value = res.data.version.version
})
getVersions().then((res) => {
version.value = res.data.version.version
})
}
getVersionsInfo()
@ -257,148 +257,148 @@ getVersionsInfo()
<style lang="scss">
.one-menu{
padding: 20px 10px 10px;
width: 78px;
overflow-y: auto;
// transition: width 0.1s ease-out;
&.expanded {
width: 185px;
padding: 18px 15px 15px;
}
.menu-item{
border-radius: 2px;
justify-content: center;
&.vertical {
width: 55px;
height: 55px;
flex-direction: column;
align-items: center;
padding: 20px 10px 10px;
width: 78px;
overflow-y: auto;
// transition: width 0.1s ease-out;
&.expanded {
width: 185px;
padding: 18px 15px 15px;
}
.menu-item{
border-radius: 2px;
justify-content: center;
&.vertical {
width: 55px;
height: 55px;
flex-direction: column;
align-items: center;
}
&.horizontal {
flex-direction: row;
align-items: center;
}
.menu-icon {
// background-color: transparent; /* 默认无背景色 */
color: #1D1F3A;
}
&.horizontal {
flex-direction: row;
align-items: center;
}
.menu-icon {
// background-color: transparent; /* 默认无背景色 */
color: #1D1F3A;
}
// .menu-icon.is-active {
// background-color: var(--el-color-primary); /* 选中时背景色 */
// color: white; /* 选中时图标颜色变白 */
// border-radius: 4px; /* 可选：使图标背景为圆形 */
// }
// .menu-icon.is-active {
// background-color: var(--el-color-primary); /* 选中时背景色 */
// color: white; /* 选中时图标颜色变白 */
// border-radius: 4px; /* 可选：使图标背景为圆形 */
// }
&:hover{
background-color: #EAEBF0 !important;
border-radius: 6px;
// background-color: var(--el-color-primary-light-9) !important;
// color:var(--el-color-primary);
&:hover{
background-color: #EAEBF0 !important;
border-radius: 6px;
// background-color: var(--el-color-primary-light-9) !important;
// color:var(--el-color-primary);
}
&.is-active{
background-color: #EAEBF0 !important;
border-radius: 6px;
// background-color: var(--el-color-primary-light-9) !important;
// border: none;
// color:var(--el-color-primary);
}
span{
font-size: 14px;
margin-left: 8px;
}
}
&.is-active{
background-color: #EAEBF0 !important;
border-radius: 6px;
// background-color: var(--el-color-primary-light-9) !important;
// border: none;
// color:var(--el-color-primary);
.menu-item.hover-left {
justify-content: flex-start;
padding-left: 5px;
}
span{
font-size: 14px;
margin-left: 8px;
&.expanded .menu-item .text-center {
opacity: 1;
}
.el-menu{
border: 0;
}
.el-scrollbar{
height: calc(100vh - 65px);
}
}
.menu-item.hover-left {
justify-content: flex-start;
padding-left: 5px;
}
&.expanded .menu-item .text-center {
opacity: 1;
}
.el-menu{
border: 0;
}
.el-scrollbar{
height: calc(100vh - 65px);
}
}
.two-menu{
.aside-menu:not(.el-menu--collapse) {
width: 185px;
border: 0;
padding-top: 15px;
.el-menu-item{
height: 40px;
margin: 4px 15px;
padding: 0 8px !important;
border-radius: 2px;
span{
margin-left: 8px;
font-size: 14px;
}
&.is-active{
background-color: #EAEBF0 !important;
border-radius: 6px;
color: inherit;
// background-color: var(--el-color-primary-light-9) !important;
}
&:hover{
background-color: #EAEBF0 !important;
border-radius: 6px;
// background-color: var(--el-color-primary-light-9) !important;
// color: var(--el-color-primary);
}
.aside-menu:not(.el-menu--collapse) {
width: 185px;
border: 0;
padding-top: 15px;
.el-menu-item{
height: 40px;
margin: 4px 15px;
padding: 0 8px !important;
border-radius: 2px;
span{
margin-left: 8px;
font-size: 14px;
}
&.is-active{
background-color: #EAEBF0 !important;
border-radius: 6px;
color: inherit;
// background-color: var(--el-color-primary-light-9) !important;
}
&:hover{
background-color: #EAEBF0 !important;
border-radius: 6px;
// background-color: var(--el-color-primary-light-9) !important;
// color: var(--el-color-primary);
}
}
.el-sub-menu{
width: 185px;
margin: 4px 0;
// margin-bottom: 8px;
.el-sub-menu__title{
margin: 0 15px;
height: 40px;
padding-left: 8px;
border-radius: 2px;
span{
height: 40px;
display: flex;
align-items: center;
font-size: 14px;
}
&:hover{
background-color:#EAEBF0 !important;
border-radius: 6px;
// background-color: var(--el-color-primary-light-9) !important;
// color: var(--el-color-primary);
}
.el-icon.el-sub-menu__icon-arrow{
right: 5px;
}
}
.el-menu-item{
padding-left: 25px !important;
}
}
}
.el-sub-menu{
width: 185px;
margin: 4px 0;
// margin-bottom: 8px;
.el-sub-menu__title{
margin: 0 15px;
height: 40px;
padding-left: 8px;
border-radius: 2px;
span{
height: 40px;
display: flex;
align-items: center;
font-size: 14px;
}
&:hover{
background-color:#EAEBF0 !important;
border-radius: 6px;
// background-color: var(--el-color-primary-light-9) !important;
// color: var(--el-color-primary);
}
.el-icon.el-sub-menu__icon-arrow{
right: 5px;
}
}
.el-menu-item{
padding-left: 25px !important;
}
}
}
}
.logo-wrap {
padding: 0;
display: flex;
white-space: nowrap;
align-items: center;
padding: 0;
display: flex;
white-space: nowrap;
align-items: center;
.logo {
height: 100%;
box-sizing: border-box;
}
.logo {
height: 100%;
box-sizing: border-box;
}
.logo-title {
flex: 1;
width: 0;
text-overflow: ellipsis;
overflow: hidden;
font-size: var(--el-font-size-base);
}
.logo-title {
flex: 1;
width: 0;
text-overflow: ellipsis;
overflow: hidden;
font-size: var(--el-font-size-base);
}
}
// :deep(.el-scrollbar__bar){
// display: none !important;
@ -408,15 +408,15 @@ getVersionsInfo()
// }
// 隐藏滚动条
.hide-scrollbar::-webkit-scrollbar {
display: none;
/* Chrome/Safari/Edge */
display: none;
/* Chrome/Safari/Edge */
}
.hide-scrollbar {
-ms-overflow-style: none;
/* IE/Edge */
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE/Edge */
scrollbar-width: none;
/* Firefox */
}
// .layout-aside .menu-item.is-active{
// position: relative;

450
admin/src/utils/common.ts
View File

@ -9,54 +9,54 @@ import storage from './storage'
* @param app
*/
export function useElementIcon(app: App): void {
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
}
/**
* 设置主题色
*/
export function setThemeColor(color: string, mode: string = 'light'): void {
useCssVar('--el-color-primary', null).value = color
useCssVar('--el-color-primary', null).value = color
const colors: any = {
dark: {
'light-3': 'shade(20%)',
'light-5': 'shade(30%)',
'light-7': 'shade(50%)',
'light-8': 'shade(60%)',
'light-9': 'shade(70%)',
'dark-2': 'tint(20%)'
},
light: {
'dark-2': 'shade(20%)',
'light-3': 'tint(30%)',
'light-5': 'tint(50%)',
'light-7': 'tint(70%)',
'light-8': 'tint(80%)',
'light-9': 'tint(90%)'
}
}
const colors: any = {
dark: {
'light-3': 'shade(20%)',
'light-5': 'shade(30%)',
'light-7': 'shade(50%)',
'light-8': 'shade(60%)',
'light-9': 'shade(70%)',
'dark-2': 'tint(20%)'
},
light: {
'dark-2': 'shade(20%)',
'light-3': 'tint(30%)',
'light-5': 'tint(50%)',
'light-7': 'tint(70%)',
'light-8': 'tint(80%)',
'light-9': 'tint(90%)'
}
}
Object.keys(colors[mode]).forEach((key) => {
useCssVar('--el-color-primary' + '-' + key, null).value = colorFunction.convert(`color(${ color } ${ colors[mode][key] })`)
})
Object.keys(colors[mode]).forEach((key) => {
useCssVar('--el-color-primary' + '-' + key, null).value = colorFunction.convert(`color(${ color } ${ colors[mode][key] })`)
})
}
/**
* 获取当前访问应用类型
*/
export function getAppType() {
const path = location.pathname.split('/').filter((val) => {
return val
})
const path = location.pathname.split('/').filter((val) => {
return val
})
if (!path.length) {
return 'admin'
} else {
return path[0]
}
if (!path.length) {
return 'admin'
} else {
return path[0]
}
}
/**
@ -64,8 +64,8 @@ export function getAppType() {
* @param value
*/
export function setWindowTitle(value: string = ''): void {
const title = useTitle()
title.value = value ? value : import.meta.env.VITE_DETAULT_TITLE
const title = useTitle()
title.value = value ? value : import.meta.env.VITE_DETAULT_TITLE
}
/**
@ -73,7 +73,7 @@ export function setWindowTitle(value: string = ''): void {
* @returns
*/
export function getToken(): null | string {
return storage.get('token')
return storage.get('token')
}
/**
@ -82,7 +82,7 @@ export function getToken(): null | string {
* @returns
*/
export function setToken(token: string): void {
storage.set({ key: 'token', data: token })
storage.set({ key: 'token', data: token })
}
/**
@ -90,7 +90,7 @@ export function setToken(token: string): void {
* @returns
*/
export function removeToken(): void {
storage.remove('token')
storage.remove('token')
}
/**
@ -100,16 +100,16 @@ export function removeToken(): void {
* @returns
*/
export function debounce(fn: (args?: any) => any, delay: number = 300) {
let timer: null | number = null
return function (...args) {
if (timer != null) {
clearTimeout(timer)
timer = null
}
timer = setTimeout(() => {
fn.call(this, ...args)
}, delay);
}
let timer: null | number = null
return function (...args) {
if (timer != null) {
clearTimeout(timer)
timer = null
}
timer = setTimeout(() => {
fn.call(this, ...args)
}, delay);
}
}
/**
@ -118,7 +118,7 @@ export function debounce(fn: (args?: any) => any, delay: number = 300) {
* @returns
*/
export function isUrl(str: string): boolean {
return str.indexOf('http://') != -1 || str.indexOf('https://') != -1
return str.indexOf('http://') != -1 || str.indexOf('https://') != -1
}
/**
@ -127,14 +127,14 @@ export function isUrl(str: string): boolean {
* @returns
*/
export function img(path: string): string {
if (!path) return ''
let imgDomain = import.meta.env.VITE_IMG_DOMAIN || location.origin
if (!path) return ''
if (path.startsWith('/')) path = path.replace(/^\//, '')
if (imgDomain.endsWith('/')) imgDomain = imgDomain.slice(0, -1)
return isUrl(path) ? path : `${imgDomain}/${path}`
let imgDomain = import.meta.env.VITE_IMG_DOMAIN || location.origin
if (path.startsWith('/')) path = path.replace(/^\//, '')
if (imgDomain.endsWith('/')) imgDomain = imgDomain.slice(0, -1)
return isUrl(path) ? path : `${imgDomain}/${path}`
}
/**
@ -143,7 +143,7 @@ export function img(path: string): string {
* @returns
*/
export function assetImg(path: string) {
return new URL('@/', import.meta.url) + path
return new URL('@/', import.meta.url) + path
}
/**
@ -152,15 +152,15 @@ export function assetImg(path: string) {
* @returns
*/
export function strByteLength(str: string = ''): number {
let len = 0;
for (let i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 127 || str.charCodeAt(i) == 94) {
len += 2;
} else {
len++;
}
}
return len;
let len = 0;
for (let i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 127 || str.charCodeAt(i) == 94) {
len += 2;
} else {
len++;
}
}
return len;
}
/**
@ -168,22 +168,22 @@ export function strByteLength(str: string = ''): number {
* @param url
*/
export function urlToRouteRaw(url: string) {
const query: any = {}
const [path, param] = url.split('?')
const query: any = {}
const [path, param] = url.split('?')
param && param.split('&').forEach((str: string) => {
let [name, value] = str.split('=')
query[name] = value
})
param && param.split('&').forEach((str: string) => {
let [name, value] = str.split('=')
query[name] = value
})
return { path, query }
return { path, query }
}
const isArray = (value: any) => {
if (typeof Array.isArray === 'function') {
return Array.isArray(value)
}
return Object.prototype.toString.call(value) === '[object Array]'
if (typeof Array.isArray === 'function') {
return Array.isArray(value)
}
return Object.prototype.toString.call(value) === '[object Array]'
}
/**
@ -192,19 +192,19 @@ const isArray = (value: any) => {
* @returns {*} 克隆后的对象或者原值（不是对象）
*/
export function deepClone(obj: object) {
// 对常见的“非”值，直接返回原来值
if ([null, undefined, NaN, false].includes(obj)) return obj
if (typeof obj !== 'object' && typeof obj !== 'function') {
// 原始类型直接返回
return obj
}
const o = isArray(obj) ? [] : {}
for (const i in obj) {
if (obj.hasOwnProperty(i)) {
o[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
}
}
return o
// 对常见的“非”值，直接返回原来值
if ([null, undefined, NaN, false].includes(obj)) return obj
if (typeof obj !== 'object' && typeof obj !== 'function') {
// 原始类型直接返回
return obj
}
const o = isArray(obj) ? [] : {}
for (const i in obj) {
if (obj.hasOwnProperty(i)) {
o[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
}
}
return o
}
/**
@ -214,91 +214,91 @@ export function deepClone(obj: object) {
* @param {Number} radix
*/
export function guid(len = 10, firstU = true, radix: any = null) {
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
const uuid = []
radix = radix || chars.length
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
const uuid = []
radix = radix || chars.length
if (len) {
// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
} else {
let r
// rfc4122标准要求返回的uuid中,某些位为固定的字符
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
uuid[14] = '4'
if (len) {
// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
} else {
let r
// rfc4122标准要求返回的uuid中,某些位为固定的字符
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
uuid[14] = '4'
for (let i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random() * 16
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]
}
}
}
// 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
if (firstU) {
uuid.shift()
return `u${ uuid.join('') }`
}
return uuid.join('')
for (let i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random() * 16
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]
}
}
}
// 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
if (firstU) {
uuid.shift()
return `u${ uuid.join('') }`
}
return uuid.join('')
}
/**
* 金额格式化
*/
export function moneyFormat(money: string): string {
return isNaN(parseFloat(money)) ? money : parseFloat(money).toFixed(2)
return isNaN(parseFloat(money)) ? money : parseFloat(money).toFixed(2)
}
/**
* 时间戳转日期格式
*/
export function timeStampTurnTime(timeStamp: any, type = "") {
if (timeStamp != undefined && timeStamp != "" && timeStamp > 0) {
const date = new Date();
date.setTime(timeStamp * 1000);
const y: any = date.getFullYear();
let m: any = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
let d: any = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h: any = date.getHours();
h = h < 10 ? ('0' + h) : h;
let minute: any = date.getMinutes();
let second: any = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
if (type) {
if (type == 'yearMonthDay') {
return y + '年' + m + '月' + d + '日';
}
return y + '-' + m + '-' + d;
} else {
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
}
if (timeStamp != undefined && timeStamp != "" && timeStamp > 0) {
const date = new Date();
date.setTime(timeStamp * 1000);
const y: any = date.getFullYear();
let m: any = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
let d: any = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h: any = date.getHours();
h = h < 10 ? ('0' + h) : h;
let minute: any = date.getMinutes();
let second: any = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
if (type) {
if (type == 'yearMonthDay') {
return y + '年' + m + '月' + d + '日';
}
return y + '-' + m + '-' + d;
} else {
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
}
} else {
return "";
}
} else {
return "";
}
}
/**
* 获取当前日期时间
*/
export function getCurrentDataTime(timeStamp: any) {
const addZero = (t) => {
return t < 10 ? '0' + t : t;
}
const time = new Date(timeStamp);
let Y = time.getFullYear(), // 年
M = time.getMonth() + 1, // 月
D = time.getDate(), // 日
h = time.getHours(), // 时
m = time.getMinutes(), // 分
s = time.getSeconds(); // 秒
if (M > 12) {
M = M - 12;
}
return `${Y}-${addZero(M)}-${addZero(D)} ${addZero(h)}:${addZero(m)}:${addZero(s)}`
const addZero = (t) => {
return t < 10 ? '0' + t : t;
}
const time = new Date(timeStamp);
let Y = time.getFullYear(), // 年
M = time.getMonth() + 1, // 月
D = time.getDate(), // 日
h = time.getHours(), // 时
m = time.getMinutes(), // 分
s = time.getSeconds(); // 秒
if (M > 12) {
M = M - 12;
}
return `${Y}-${addZero(M)}-${addZero(D)} ${addZero(h)}:${addZero(m)}:${addZero(s)}`
}
/**
@ -306,17 +306,17 @@ export function getCurrentDataTime(timeStamp: any) {
* @param {Object} date
*/
export function timeTurnTimeStamp(date: string) {
const f = date.split(' ', 2);
const d = (f[0] ? f[0] : '').split('-', 3);
const t = (f[1] ? f[1] : '').split(':', 3);
return (new Date(
parseInt(d[0], 10) || null,
(parseInt(d[1], 10) || 1) - 1,
parseInt(d[2], 10) || null,
parseInt(t[0], 10) || null,
parseInt(t[1], 10) || null,
parseInt(t[2], 10) || null
)).getTime() / 1000;
const f = date.split(' ', 2);
const d = (f[0] ? f[0] : '').split('-', 3);
const t = (f[1] ? f[1] : '').split(':', 3);
return (new Date(
parseInt(d[0], 10) || null,
(parseInt(d[1], 10) || 1) - 1,
parseInt(d[2], 10) || null,
parseInt(t[0], 10) || null,
parseInt(t[1], 10) || null,
parseInt(t[2], 10) || null
)).getTime() / 1000;
}
/**
@ -324,15 +324,15 @@ export function timeTurnTimeStamp(date: string) {
* @param event
*/
export function filterDigit(event: any) {
event.target.value = event.target.value.replace(/[^\d\.]/g, '');
event.target.value = event.target.value.replace(/^\./g, '');
event.target.value = event.target.value.replace(/\.{2,}/g, '.');
// 限制最多两位小数
const decimalParts = event.target.value.split('.');
if (decimalParts.length > 1 && decimalParts[1].length > 2) {
// 如果有小数部分且超过两位，则截取前两位
event.target.value = `${ decimalParts[0] }.${ decimalParts[1].slice(0, 2) }`;
}
event.target.value = event.target.value.replace(/[^\d\.]/g, '');
event.target.value = event.target.value.replace(/^\./g, '');
event.target.value = event.target.value.replace(/\.{2,}/g, '.');
// 限制最多两位小数
const decimalParts = event.target.value.split('.');
if (decimalParts.length > 1 && decimalParts[1].length > 2) {
// 如果有小数部分且超过两位，则截取前两位
event.target.value = `${ decimalParts[0] }.${ decimalParts[1].slice(0, 2) }`;
}
}
/**
@ -340,7 +340,7 @@ export function filterDigit(event: any) {
* @param event
*/
export function filterNumber(event: any) {
event.target.value = event.target.value.replace(/[^\d]/g, '');
event.target.value = event.target.value.replace(/[^\d]/g, '');
}
/**
@ -348,8 +348,8 @@ export function filterNumber(event: any) {
* @param event
*/
export function filterSpecial(event: any) {
event.target.value = event.target.value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')
event.target.value = event.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '')
event.target.value = event.target.value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')
event.target.value = event.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '')
}
/**
@ -357,7 +357,7 @@ export function filterSpecial(event: any) {
* @param event
*/
export function filterBlank(event: any) {
event.target.value = event.target.value.replace(/\s/g, '');
event.target.value = event.target.value.replace(/\s/g, '');
}
/**
* 设置表格分页数据的本地存储
@ -366,23 +366,23 @@ export function filterBlank(event: any) {
* @param where
*/
export function setTablePageStorage(page: any = 1, limit: any = 10, where: any = {}) {
let data = storage.get('tablePageStorage');
if (!data) {
data = {};
}
let data = storage.get('tablePageStorage');
if (!data) {
data = {};
}
const key = location.pathname + JSON.stringify(where);
data[key] = {
page,
limit
};
const key = location.pathname + JSON.stringify(where);
data[key] = {
page,
limit
};
const MAX_COUNT = 5; // 最多存储 5 个页面的分页缓存，超出则删除最开始的第一个页面
if (Object.keys(data).length > MAX_COUNT) {
delete data[Object.keys(data)[0]];
}
const MAX_COUNT = 5; // 最多存储 5 个页面的分页缓存，超出则删除最开始的第一个页面
if (Object.keys(data).length > MAX_COUNT) {
delete data[Object.keys(data)[0]];
}
storage.set({ key: 'tablePageStorage', data });
storage.set({ key: 'tablePageStorage', data });
}
/**
@ -390,49 +390,49 @@ export function setTablePageStorage(page: any = 1, limit: any = 10, where: any =
* @param where
*/
export function getTablePageStorage(where: any = {}) {
let data = storage.get('tablePageStorage');
const key = location.pathname + JSON.stringify(where);
if (!data || !data[key]) {
data = {
page: 1,
limit: 10
};
} else {
data = data[key];
}
return data;
let data = storage.get('tablePageStorage');
const key = location.pathname + JSON.stringify(where);
if (!data || !data[key]) {
data = {
page: 1,
limit: 10
};
} else {
data = data[key];
}
return data;
}
// 距离显示
export function distance(distance: string | number): string {
const dist = typeof distance === 'string' ? parseFloat(distance) : distance;
if (isNaN(dist)) return distance.toString();
return dist < 1 ? parseInt((dist * 1000).toString()) + 'm' : dist.toFixed(1) + 'km'
const dist = typeof distance === 'string' ? parseFloat(distance) : distance;
if (isNaN(dist)) return distance.toString();
return dist < 1 ? parseInt((dist * 1000).toString()) + 'm' : dist.toFixed(1) + 'km'
}
// 获取图片尺寸的函数
export function getImageDimensions (url: string) {
return new Promise((resolve) => {
const imgObj = new Image()
imgObj.onload = () => {
// 成功加载
const size = {
width: imgObj.naturalWidth,
height: imgObj.naturalHeight
}
resolve(size)
}
return new Promise((resolve) => {
const imgObj = new Image()
imgObj.onload = () => {
// 成功加载
const size = {
width: imgObj.naturalWidth,
height: imgObj.naturalHeight
}
resolve(size)
}
imgObj.onerror = (err) => {
// 加载失败
resolve(null)
}
imgObj.onerror = (err) => {
// 加载失败
resolve(null)
}
// 设置图片源，开始加载
// 注意：如果图片跨域且服务器未设置CORS，可能会触发onerror
imgObj.src = img(url)
})
}
// 设置图片源，开始加载
// 注意：如果图片跨域且服务器未设置CORS，可能会触发onerror
imgObj.src = img(url)
})
}

269
admin/src/utils/qqmap.ts
View File

@ -4,8 +4,11 @@ const geometry: any = {}
/**
* 在地图上创建一个圆形
* @param map 地图实例
* @param geometriesData 圆形数据
* @param onSelect 图形被选中时的回调函数
*/
export const createCircle = (map: any, geometriesData: any) => {
export const createCircle = (map: any, geometriesData: any, onSelect?: (key: string) => void) => {
const TMap = (window as any).TMap
const LatLng = TMap.LatLng
@ -27,7 +30,11 @@ export const createCircle = (map: any, geometriesData: any) => {
showBorder: true,
borderColor: `rgb(${color.toString()})`,
borderWidth: 2
})
}),
highlight: new TMap.PolygonStyle({
color: 'rgba(255, 255, 0, 0.6)'
})
},
geometries: [
{
@ -38,25 +45,84 @@ export const createCircle = (map: any, geometriesData: any) => {
}
]
})
geometry[geometriesData.key] = { graphical: multiCircle }
// 如果已存在该图形，先删除
if (geometry[geometriesData.key]) {
try {
geometry[geometriesData.key].graphical.remove(geometriesData.key)
geometry[geometriesData.key].editor?.delete()
} catch (e) {
// 删除旧图形失败
// console.warn('删除旧图形失败:', e)
}
}
// 创建图形编辑器
const editor = new TMap.tools.GeometryEditor({
map: map,
overlayList: [
{
overlay: multiCircle,
id: geometriesData.key,
}
],
actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT,
activeOverlayId: geometriesData.key, // 激活图层
selectable: true // 开启点选功能
})
let editor = null
// 检查 TMap.tools 是否存在
if (TMap.tools) {
// 创建图形编辑器 - 支持拖动中心点和调整半径
try {
editor = new TMap.tools.GeometryEditor({
map: map,
overlayList: [
{
overlay: multiCircle,
id: geometriesData.key,
selectedStyleId: 'highlight'
}
],
actionMode: TMap.tools.constants?.EDITOR_ACTION?.INTERACT || 0, // 交互模式，支持拖动中心点和调整半径
activeOverlayId: null, // 初始不激活，等待用户选择
selectable: true ,// 开启点选功能
snappable: true // 开启吸附
})
editor.setKeyboardDeleteEnable(false);
editor.on('adjust_complete', (data: any) => {
geometriesData.center = { lat: data.center.lat, lng: data.center.lng }
geometriesData.radius = parseInt(data.radius)
// 监听调整开始事件 - 禁用地图拖拽
editor.on('adjust_start', () => {
currentMap?.setDraggable(false)
})
// 监听调整完成事件
editor.on('adjust_complete', (data: any) => {
if (data?.center && data.radius !== undefined) {
geometriesData.center = { lat: data.center.lat, lng: data.center.lng }
geometriesData.radius = parseInt(data.radius)
}
setTimeout(() => currentMap?.setDraggable(true), 100)
})
// 监听调整中事件（实时更新）
editor.on('adjust', (data: any) => {
if (data?.center && data.radius !== undefined) {
geometriesData.center = { lat: data.center.lat, lng: data.center.lng }
geometriesData.radius = parseInt(data.radius)
}
})
// 监听选中事件
editor.on('select', () => {
// 只有在用户点击地图上的图形时才触发，而不是在切换页面时
if (onSelect) {
onSelect(geometriesData.key)
}
})
} catch (e) {
console.warn('创建编辑器失败:', e)
}
}
// 为圆形添加点击事件监听器
multiCircle.on('click', () => {
// 先选中当前图形，使其高亮显示
if (editor) {
editor.select([geometriesData.key])
editor.setActiveOverlay?.(geometriesData.key)
}
// 然后触发选中回调
if (onSelect) {
onSelect(geometriesData.key)
}
})
geometry[geometriesData.key] = { graphical: multiCircle, editor }
@ -64,10 +130,11 @@ export const createCircle = (map: any, geometriesData: any) => {
/**
* 在地图上创建一个多边形
* @param map
* @param geometriesData
* @param map 地图实例
* @param geometriesData 多边形数据
* @param onSelect 图形被选中时的回调函数
*/
export const createPolygon = (map: any, geometriesData: any) => {
export const createPolygon = (map: any, geometriesData: any, onSelect?: (key: string) => void) => {
const TMap = (window as any).TMap
const LatLng = TMap.LatLng
@ -86,6 +153,17 @@ export const createPolygon = (map: any, geometriesData: any) => {
Math.floor(Math.random() * 255)
]
// 如果已存在该图形，先删除
if (geometry[geometriesData.key]) {
try {
geometry[geometriesData.key].graphical.remove(geometriesData.key)
geometry[geometriesData.key].editor?.delete()
} catch (e) {
// 删除旧多边形失败
// console.warn('删除旧多边形失败:', e)
}
}
const multiPolygon = new TMap.MultiPolygon({
map: map,
styles: {
@ -94,7 +172,10 @@ export const createPolygon = (map: any, geometriesData: any) => {
showBorder: true,
borderColor: `rgb(${color.toString()})`,
borderWidth: 2
})
}),
highlight: new TMap.PolygonStyle({
color: 'rgba(255, 255, 0, 0.6)'
})
},
geometries: [
{
@ -107,23 +188,70 @@ export const createPolygon = (map: any, geometriesData: any) => {
]
});
const editor = new TMap.tools.GeometryEditor({
map: map,
overlayList: [
{
overlay: multiPolygon,
id: geometriesData.key,
}
],
actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT,
activeOverlayId: geometriesData.key, // 激活图层
selectable: true, // 开启点选功能
})
let editor = null
// 检查 TMap.tools 是否存在
if (TMap.tools) {
// 创建图形编辑器 - 支持拖动边框和调整形状
try {
editor = new TMap.tools.GeometryEditor({
map: map,
overlayList: [
{
overlay: multiPolygon,
id: geometriesData.key,
selectedStyleId: 'highlight'
}
],
actionMode: TMap.tools.constants?.EDITOR_ACTION?.INTERACT || 0, // 交互模式，支持拖动边框和调整形状
activeOverlayId: null, // 初始不激活，等待用户选择
selectable: true, // 开启点选功能
snappable: true // 开启吸附
})
editor.on('adjust_complete', (data: any) => {
geometriesData.paths = data.paths.map(item => {
return { lat: item.lat, lng: item.lng}
})
editor.setKeyboardDeleteEnable(false);
// 监听调整开始事件 - 禁用地图拖拽
editor.on('adjust_start', () => {
currentMap?.setDraggable(false)
})
// 监听调整完成事件
editor.on('adjust_complete', (data: any) => {
if (data?.paths) {
geometriesData.paths = data.paths.map((item: any) => ({ lat: item.lat, lng: item.lng }))
}
setTimeout(() => currentMap?.setDraggable(true), 100)
})
// 监听调整中事件（实时更新）
editor.on('adjust', (data: any) => {
if (data?.paths) {
geometriesData.paths = data.paths.map((item: any) => ({ lat: item.lat, lng: item.lng }))
}
})
// 监听选中事件
editor.on('select', () => {
// 只有在用户点击地图上的图形时才触发，而不是在切换页面时
if (onSelect) {
onSelect(geometriesData.key)
}
})
} catch (e) {
console.warn('创建编辑器失败:', e)
}
}
// 为多边形添加点击事件监听器
multiPolygon.on('click', () => {
// 先选中当前图形，使其高亮显示
if (editor) {
editor.select([geometriesData.key])
editor.setActiveOverlay?.(geometriesData.key)
}
// 然后触发选中回调
if (onSelect) {
onSelect(geometriesData.key)
}
})
geometry[geometriesData.key] = { graphical: multiPolygon, editor }
@ -131,25 +259,68 @@ export const createPolygon = (map: any, geometriesData: any) => {
/**
* 删除图形
* @param key
*/
export const deleteGeometry = (key: string) => {
if (!geometry[key]) {
return
if (!geometry[key]) return
try {
geometry[key].graphical?.remove(key)
geometry[key].editor?.delete()
delete geometry[key]
} catch (e) {
console.warn('删除图形失败:', e)
}
geometry[key].graphical.remove(key)
geometry[key].editor.delete()
}
/**
* 清空所有图形
*/
export const clearAllGeometry = () => {
Object.keys(geometry).forEach(deleteGeometry)
}
// 保存地图引用，用于控制地图拖拽
let currentMap: any = null
/**
* 设置地图引用
* @param map 地图实例
*/
export const setMapInstance = (map: any) => {
currentMap = map
}
/**
* 选中图形
* @param key
*/
export const selectGeometry = (key: string) => {
if (!geometry[key] || !geometry[key].editor) {
return
if (!geometry[key]?.editor) return
try {
// 取消其他图形的选中状态
Object.keys(geometry).forEach(k => {
if (k !== key && geometry[k]?.editor) {
geometry[k].editor.deselect?.()
geometry[k].editor.setActiveOverlay?.(null)
}
})
// 选中当前图形
geometry[key].editor.select?.([key])
geometry[key].editor.setActiveOverlay?.(key)
} catch (e) {
// 删除图形失败
// console.error('选中图形失败:', e)
}
geometry[key].editor.select([key])
}
/**
* 取消选中所有图形
*/
export const deselectAllGeometry = () => {
Object.keys(geometry).forEach(k => {
geometry[k]?.editor?.deselect?.()
geometry[k]?.editor?.setActiveOverlay?.(null)
})
currentMap?.setDraggable(true)
}
/**
@ -185,4 +356,4 @@ export const latLngToAddress = (params: any) => {
*/
export const addressToLatLng = (params: any) => {
return jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?key=${params.mapKey}&address=${params.address}&output=jsonp&callback=addressToLatLng`, { callbackName: 'addressToLatLng' })
}
}

511
admin/src/utils/tianditu.ts Normal file
View File

@ -0,0 +1,511 @@
const geometry: any = {}
// 保存地图引用，用于控制地图拖拽
let currentMap: any = null
/**
* 设置地图引用
* @param map 地图实例
*/
export const setMapInstance = (map: any) => {
currentMap = map
}
/**
* 在天地图上创建一个圆形
* @param map 天地图实例
* @param geometriesData 圆形数据
* @param onChange 图形变化时的回调函数
* @param onSelect 图形被选中时的回调函数
*/
export const createCircle = (map: any, geometriesData: any, onChange?: (data: any) => void, onSelect?: (key: string) => void) => {
const T = (window as any).T
if (!T) return null
geometriesData.radius = geometriesData.radius ?? 1000
geometriesData.center = geometriesData.center ?? { lat: map.getCenter().lat, lng: map.getCenter().lng }
const color = [
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255)
]
// 保存原始样式
const originalStyle = {
color: geometriesData.color || `rgba(${color.toString()}, .4)`,
weight: geometriesData.weight || 3,
opacity: geometriesData.opacity || 0.8,
fillColor: geometriesData.fillColor || `rgba(${color.toString()}, .4)`,
fillOpacity: geometriesData.fillOpacity || 0.3
}
const circle = new T.Circle(new T.LngLat(geometriesData.center.lng, geometriesData.center.lat), geometriesData.radius, originalStyle)
// 如果已存在该图形，先删除
if (geometry[geometriesData.key]) {
try {
if (geometry[geometriesData.key].editTimer) {
clearTimeout(geometry[geometriesData.key].editTimer)
}
map.removeOverLay(geometry[geometriesData.key].graphical)
} catch (e) {
// 删除旧图形失败
}
}
map.addOverLay(circle)
// 保存几何数据的引用，确保在事件监听器中可用
const circleData = { ...geometriesData }
// 保存上一次的中心点和半径
let preCenter = { ...circleData.center }
let preRadius = circleData.radius
// 监听地图触摸结束事件，检测圆形变化
const handleTouchEnd = () => {
if (!circle.isEditable()) return
if (geometry[circleData.key]?.editTimer) {
clearTimeout(geometry[circleData.key].editTimer)
}
geometry[circleData.key].editTimer = setTimeout(() => {
const curCenter = circle.getCenter()
const curRadius = circle.getRadius()
// 中心点改变了
if (curCenter.lng !== preCenter.lng || curCenter.lat !== preCenter.lat) {
circleData.center = { lat: curCenter.lat, lng: curCenter.lng }
preCenter = { ...circleData.center }
// console.log('圆形中心点改变了', circleData.center)
// 调用回调函数
if (onChange) {
onChange(circleData)
}
}
// 半径改变了
if (curRadius !== preRadius) {
circleData.radius = curRadius
preRadius = curRadius
// console.log('圆形半径改变了', curRadius)
// 调用回调函数
if (onChange) {
onChange(circleData)
}
}
}, 200)
}
// 监听圆形点击事件
const handleClick = () => {
// 调用选择回调函数
if (onSelect) {
onSelect(circleData.key)
}
}
// 初始时不启用编辑功能，只有在选中时才启用
// circle.enableEdit()
// 添加事件监听
map.addEventListener('touchend', handleTouchEnd)
map.addEventListener('mouseup', handleTouchEnd)
circle.addEventListener('click', handleClick)
geometry[circleData.key] = { graphical: circle, handleTouchEnd, handleClick, originalStyle }
return circle
}
/**
* 在天地图上创建一个矩形
* @param map 天地图实例
* @param geometriesData 矩形数据
*/
export const createRectangle = (map: any, geometriesData: any) => {
const T = (window as any).T
if (!T) return null
const { lat, lng } = map.getCenter()
geometriesData.bounds = geometriesData.bounds ?? {
southwest: { lat: lat - 0.005, lng: lng - 0.005 },
northeast: { lat: lat + 0.005, lng: lng + 0.005 }
}
const lngLats = [
new T.LngLat(geometriesData.bounds.southwest.lng, geometriesData.bounds.southwest.lat),
new T.LngLat(geometriesData.bounds.northeast.lng, geometriesData.bounds.southwest.lat),
new T.LngLat(geometriesData.bounds.northeast.lng, geometriesData.bounds.northeast.lat),
new T.LngLat(geometriesData.bounds.southwest.lng, geometriesData.bounds.northeast.lat)
]
const color = [
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255)
]
const rectangle = new T.Polygon(lngLats, {
color: geometriesData.color || `rgba(${color.toString()}, .4)`,
weight: geometriesData.weight || 3,
opacity: geometriesData.opacity || 0.8,
fillColor: geometriesData.fillColor || `rgba(${color.toString()}, .4)`,
fillOpacity: geometriesData.fillOpacity || 0.3
})
map.addOverLay(rectangle)
geometry[geometriesData.key] = { graphical: rectangle }
return rectangle
}
/**
* 在天地图上创建一个多边形
* @param map 天地图实例
* @param geometriesData 多边形数据
* @param onChange 图形变化时的回调函数
* @param onSelect 图形被选中时的回调函数
*/
export const createPolygon = (map: any, geometriesData: any, onChange?: (data: any) => void, onSelect?: (key: string) => void) => {
const T = (window as any).T
if (!T) return null
const { lat, lng } = map.getCenter()
geometriesData.paths = geometriesData.paths ?? [
{ lat: lat + 0.01, lng: lng + 0.01 },
{ lat: lat - 0.01, lng: lng + 0.01 },
{ lat: lat - 0.01, lng: lng - 0.01 },
{ lat: lat + 0.01, lng: lng - 0.01 }
]
const lngLats = geometriesData.paths.map((item: any) => new T.LngLat(item.lng, item.lat))
const color = [
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255)
]
// 保存原始样式
const originalStyle = {
color: geometriesData.color || `rgba(${color.toString()}, .4)`,
weight: geometriesData.weight || 3,
opacity: geometriesData.opacity || 0.8,
fillColor: geometriesData.fillColor || `rgba(${color.toString()}, .4)`,
fillOpacity: geometriesData.fillOpacity || 0.3
}
const polygon = new T.Polygon(lngLats, originalStyle)
// 如果已存在该图形，先删除
if (geometry[geometriesData.key]) {
try {
if (geometry[geometriesData.key].editTimer) {
clearTimeout(geometry[geometriesData.key].editTimer)
}
map.removeOverLay(geometry[geometriesData.key].graphical)
} catch (e) {
// 删除旧图形失败
}
}
map.addOverLay(polygon)
// 保存上一次的路径
let prePaths = JSON.parse(JSON.stringify(geometriesData.paths))
// 保存几何数据的引用，确保在事件监听器中可用
const polygonData = { ...geometriesData }
// 监听地图触摸结束事件，检测多边形变化
const handleTouchEnd = () => {
if (!polygon.isEditable()) return
if (geometry[polygonData.key]?.editTimer) {
clearTimeout(geometry[polygonData.key].editTimer)
}
geometry[polygonData.key].editTimer = setTimeout(() => {
try {
const curLngLats = polygon.getLngLats()
// 确保 curLngLats 是数组
if (Array.isArray(curLngLats)) {
// 检查 curLngLats[0] 是否是数组（多边形可能返回嵌套数组）
let pathsArray = curLngLats
if (Array.isArray(curLngLats[0])) {
pathsArray = curLngLats[0]
}
const curPaths = pathsArray.map((lngLat: any) => {
// 检查 lngLat 是否是数组 [lng, lat]
if (Array.isArray(lngLat)) {
return {
lat: lngLat[1],
lng: lngLat[0]
}
} else {
// 否则，假设是对象 { lat, lng }
return {
lat: lngLat.lat,
lng: lngLat.lng
}
}
})
// 检查路径是否改变
const pathsChanged = JSON.stringify(curPaths) !== JSON.stringify(prePaths)
if (pathsChanged) {
polygonData.paths = curPaths
prePaths = JSON.parse(JSON.stringify(polygonData.paths))
// 调用回调函数
if (onChange) {
onChange(polygonData)
}
}
} else {
console.error('curLngLats 不是数组:', curLngLats)
}
} catch (error) {
console.error('获取多边形路径失败:', error)
}
}, 200)
}
// 监听多边形点击事件
const handleClick = () => {
// 调用选择回调函数
if (onSelect) {
onSelect(polygonData.key)
}
}
// 初始时不启用编辑功能，只有在选中时才启用
// polygon.enableEdit()
// 添加事件监听
map.addEventListener('touchend', handleTouchEnd)
map.addEventListener('mouseup', handleTouchEnd)
polygon.addEventListener('click', handleClick)
geometry[polygonData.key] = { graphical: polygon, handleTouchEnd, handleClick, originalStyle }
return polygon
}
/**
* 删除图形
* @param map 地图实例
* @param key 图形key
*/
export const deleteGeometry = (map: any, key: string) => {
if (!geometry[key]) return
try {
const T = (window as any).T
if (T && geometry[key].graphical) {
// 清除定时器
if (geometry[key].editTimer) {
clearTimeout(geometry[key].editTimer)
}
// 移除事件监听器
if (geometry[key].handleTouchEnd) {
map.removeEventListener('touchend', geometry[key].handleTouchEnd)
map.removeEventListener('mouseup', geometry[key].handleTouchEnd)
}
// 移除点击事件监听器
if (geometry[key].handleClick) {
geometry[key].graphical.removeEventListener('click', geometry[key].handleClick)
}
// 移除覆盖物
map.removeOverLay(geometry[key].graphical)
}
delete geometry[key]
} catch (e) {
console.warn('删除图形失败:', e)
}
}
/**
* 清空所有图形
* @param map 地图实例
*/
export const clearAllGeometry = (map: any) => {
const T = (window as any).T
if (T) {
// 先清除所有图形的事件监听器和定时器
Object.keys(geometry).forEach(key => {
if (geometry[key].editTimer) {
clearTimeout(geometry[key].editTimer)
}
if (geometry[key].handleTouchEnd) {
map.removeEventListener('touchend', geometry[key].handleTouchEnd)
map.removeEventListener('mouseup', geometry[key].handleTouchEnd)
}
if (geometry[key].handleClick) {
geometry[key].graphical.removeEventListener('click', geometry[key].handleClick)
}
})
// 一次性清空地图上的所有覆盖物
map.clearOverLays()
}
// 清空几何对象存储
Object.keys(geometry).forEach(key => delete geometry[key])
}
/**
* 选中图形
* @param key 图形key
*/
export const selectGeometry = (key: string) => {
if (!geometry[key]?.graphical) return
try {
// 先取消所有图形的选中状态
deselectAllGeometry()
// 设置选中状态
geometry[key].graphical.setSelected?.(true)
// 启用当前图形的编辑功能
geometry[key].graphical.enableEdit()
const color = [
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255),
Math.floor(Math.random() * 255)
]
// 修改样式，使其显示为选中状态
geometry[key].graphical.setStyle({
color: '#1890ff', // 选中时的边框颜色
weight: 2, // 选中时的边框宽度
opacity: 1, // 选中时的边框透明度
fillColor: `rgba(${color.toString()}, .6)`, // 选中时的填充颜色
fillOpacity: 1// 选中时的填充透明度
})
} catch (e) {
console.error('选中图形失败:', e)
}
}
/**
* 取消选中所有图形
*/
export const deselectAllGeometry = () => {
Object.keys(geometry).forEach(key => {
try {
// 取消选中状态
geometry[key]?.graphical?.setSelected?.(false)
// 禁用编辑功能
geometry[key]?.graphical?.disableEdit?.()
// 恢复原始样式
if (geometry[key]?.originalStyle) {
geometry[key].graphical.setStyle(geometry[key].originalStyle)
}
} catch (e) {
console.warn('取消选中图形失败:', e)
}
})
}
/**
* 创建点标记
* @param map 天地图实例
* @returns 标记实例
*/
export const createMarker = (map: any) => {
const T = (window as any).T
if (!T) return null
const { lat, lng } = map.getCenter()
const marker = new T.Marker(new T.LngLat(lng, lat))
map.addOverLay(marker)
return marker
}
/**
* 逆地址解析
* @param params 参数 { mapKey, lat, lng }
* @returns Promise
*/
export const latLngToAddress = (params: any) => {
return new Promise((resolve, reject) => {
const T = (window as any).T
if (!T) {
reject(new Error('天地图服务未加载'))
return
}
const geocoder = new T.Geocoder()
const lngLat = new T.LngLat(params.lng, params.lat)
geocoder.getLocation(lngLat, (result: any) => {
if (result && result.status === '0') {
const addrComp = result.addressComponent || {}
let detailAddress = ''
if (result.formattedAddress) {
detailAddress = result.formattedAddress
} else if (result.address) {
detailAddress = result.address
} else {
const parts = []
if (addrComp.road) parts.push(addrComp.road)
if (addrComp.address) parts.push(addrComp.address)
if (addrComp.poi) parts.push(addrComp.poi)
detailAddress = parts.join('')
}
const addressData = {
location: { lat: params.lat, lng: params.lng },
address: addrComp ?
`${ addrComp.province || '' }${ addrComp.city || '' }${ addrComp.county || '' }` : '',
formatted_addresses: {
recommend: detailAddress
},
address_component: {
province: addrComp.province || '',
city: addrComp.city || '',
district: addrComp.county || '',
street: addrComp.road || '',
street_number: addrComp.address || ''
},
addressComponent: addrComp,
formatted_address: detailAddress
}
resolve(addressData)
} else {
reject(new Error(result?.msg || '地址解析失败'))
}
})
})
}
/**
* 地址解析
* @param params 参数 { mapKey, address }
* @returns Promise
*/
export const addressToLatLng = (params: any) => {
return new Promise((resolve, reject) => {
const T = (window as any).T
if (!T) {
reject(new Error('天地图服务未加载'))
return
}
const geocoder = new T.Geocoder()
geocoder.getPoint(params.address, (result: any) => {
if (result && result.status === '0' && result.location) {
const lat = result.location.lat
const lng = result.location.lon || result.location.lng
if (lat && lng) {
resolve({ lat, lng })
} else {
reject(new Error('坐标解析失败'))
}
} else {
reject(new Error(result?.msg || '未找到该地址'))
}
})
})
}