new-map
parent
46317ed4ce
commit
7931bb6093
|
|
@ -70,6 +70,20 @@ export function deleteDevice(device, mode: ErrorMessageMode = 'none') {
|
|||
},
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description:产业数据列表
|
||||
*/
|
||||
export function getKeywordsIndustry(mode: ErrorMessageMode = 'none') {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: '/api/keywords-industry',
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:基地数据列表
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
import { BasicColumn } from '/@/components/Table'
|
||||
import { FormSchema } from '/@/components/Table'
|
||||
import { getcrops, getTownAgriculturalBasic } from '/@/api/sys/user'
|
||||
import { getKeywordsIndustry } from '/@/api/sys/other'
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '基地名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '农业类型',
|
||||
dataIndex: 'industry_label',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
|
|
@ -76,6 +81,20 @@ export const accountFormSchema: FormSchema[] = [
|
|||
return !!values.id
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'industry_key',
|
||||
label: '产业类型',
|
||||
required: true,
|
||||
component: 'ApiSelect',
|
||||
componentProps: {
|
||||
api: async () => {
|
||||
const res = await getKeywordsIndustry()
|
||||
return res
|
||||
},
|
||||
labelField: 'name',
|
||||
valueField: 'key',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: '基地名称',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="relative h-full overflow-hidden">
|
||||
<div
|
||||
v-if="isBack"
|
||||
@click="onBack"
|
||||
v-if="historyMap.length"
|
||||
@click="historyBack"
|
||||
class="absolute left-25px top-25px z-999 text-white border rounded-2px px-30px py-6px text-12px cursor-pointer"
|
||||
>返回</div
|
||||
>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
import { registerMap } from 'echarts'
|
||||
import { deepMerge } from '/@/utils'
|
||||
import { useVContext } from '../useVContext'
|
||||
import { getAgriculturalBasic } from '/@/api/sys/other'
|
||||
import { getAgriculturalBasic, getKeywordsIndustry } from '/@/api/sys/other'
|
||||
import { useVisualizationStore } from '/@/store/modules/visualization'
|
||||
import SheepImg from '/@/assets/images/sheep.png'
|
||||
import PigImg from '/@/assets/images/pig.png'
|
||||
|
|
@ -55,6 +55,8 @@
|
|||
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
const mapJSON = ref()
|
||||
const tempMapJSON = ref()
|
||||
const historyMap = ref([])
|
||||
let loading = false
|
||||
|
||||
let options: any = null
|
||||
|
||||
|
|
@ -62,6 +64,19 @@
|
|||
|
||||
const baseData = ref([])
|
||||
|
||||
function historyBack() {
|
||||
if (!isBack.value) {
|
||||
if (historyMap.value.length >= 1) {
|
||||
historyMap.value.pop()
|
||||
}
|
||||
if (historyMap.value.length === 0) {
|
||||
mapNyTypeInit()
|
||||
}
|
||||
} else {
|
||||
onBack()
|
||||
}
|
||||
}
|
||||
|
||||
function onBack() {
|
||||
visualizationStore.setAddressId(null)
|
||||
rootEmitter.emit('map:back')
|
||||
|
|
@ -71,67 +86,142 @@
|
|||
}
|
||||
|
||||
async function mapNyTypeInit() {
|
||||
const _mapNyNxData = (await (await import('./nylx.json')).default) as any
|
||||
|
||||
const _data = [
|
||||
const _defaultArr = [
|
||||
{
|
||||
value: 1,
|
||||
name: '稻渔综合种养',
|
||||
label: '稻渔综合种养',
|
||||
color: 'rgb(242,230,230 , 0.7)',
|
||||
type: 'map',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
name: '优品柑桔种植',
|
||||
label: '优品柑桔种植',
|
||||
color: 'rgb(187,216,106 , 0.7)',
|
||||
type: 'map',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
name: '高粱产业',
|
||||
label: '高粱产业',
|
||||
color: 'rgb(238,98,73 , 0.7)',
|
||||
type: 'map',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
name: '油茶产业',
|
||||
label: '油茶产业',
|
||||
color: 'rgb(172,220,243 , 0.7)',
|
||||
type: 'map',
|
||||
},
|
||||
]
|
||||
registerMap('lcxz', _mapNyNxData)
|
||||
options = {
|
||||
legend: {
|
||||
{
|
||||
value: 5,
|
||||
label: '生猪产业分布点',
|
||||
icon: `image://${PigImg}`,
|
||||
type: 'dot',
|
||||
data: [
|
||||
{
|
||||
icon: `image://${PigImg}`,
|
||||
name: '生猪产业分布点',
|
||||
map: '',
|
||||
name: '猪',
|
||||
value: ['105.283094', '29.234786'],
|
||||
},
|
||||
{
|
||||
map: '',
|
||||
name: '猪',
|
||||
value: ['105.338434', '29.388883'],
|
||||
},
|
||||
],
|
||||
},
|
||||
// visualMap: {
|
||||
// right: 60,
|
||||
// bottom: 100,
|
||||
// pieces: [
|
||||
// {
|
||||
// value: 1,
|
||||
// label: '稻渔综合种养',
|
||||
// color: 'rgb(242,230,230 , 0.7)',
|
||||
// },
|
||||
// {
|
||||
// value: 2,
|
||||
// label: '优品柑桔种植',
|
||||
// color: 'rgb(187,216,106 , 0.7)',
|
||||
// },
|
||||
// {
|
||||
// value: 3,
|
||||
// label: '高粱产业',
|
||||
// color: 'rgb(238,98,73 , 0.7)',
|
||||
// },
|
||||
// {
|
||||
// value: 4,
|
||||
// label: '油茶产业',
|
||||
// color: 'rgb(172,220,243 , 0.7)',
|
||||
// },
|
||||
// ],
|
||||
// color: '#fff',
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// visibility: 'off',
|
||||
// },
|
||||
{
|
||||
value: 6,
|
||||
label: '肉羊产业分布点',
|
||||
icon: `image://${SheepImg}`,
|
||||
type: 'dot',
|
||||
data: [
|
||||
{
|
||||
map: '',
|
||||
name: '羊',
|
||||
value: ['105.287507', '29.339408'],
|
||||
},
|
||||
{
|
||||
map: '',
|
||||
name: '羊',
|
||||
value: ['105.147012', '29.442367'],
|
||||
},
|
||||
{
|
||||
map: '',
|
||||
name: '羊',
|
||||
value: ['105.115105', '29.383271'],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const resData = await getKeywordsIndustry()
|
||||
_defaultArr.forEach((item) => {
|
||||
const _data = resData.find((i) => i.value == item.value)
|
||||
item = Object.assign(item, _data)
|
||||
})
|
||||
|
||||
const _seriesData = _defaultArr
|
||||
.filter((item) => item.type === 'dot')
|
||||
.map((e) => {
|
||||
return {
|
||||
type: 'scatter',
|
||||
name: e.label,
|
||||
coordinateSystem: 'geo',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
show: true,
|
||||
},
|
||||
symbol: e.icon,
|
||||
symbolSize: [30, 30],
|
||||
symbolOffset: [0, 0],
|
||||
z: 9999,
|
||||
data: e.data?.map((cc) => {
|
||||
return {
|
||||
...cc,
|
||||
key: e.key,
|
||||
}
|
||||
}),
|
||||
}
|
||||
})
|
||||
|
||||
const _mapNyNxData = (await (await import('./nylx.json')).default) as any
|
||||
const _data = _defaultArr
|
||||
.filter((item) => item.type === 'map')
|
||||
.map((item) => Object.assign(item, { name: item.label }))
|
||||
|
||||
registerMap('lcxz', _mapNyNxData)
|
||||
options = {
|
||||
legend: {
|
||||
right: 60,
|
||||
bottom: 40,
|
||||
align: 'right',
|
||||
orient: 'vertical',
|
||||
itemWidth: 18,
|
||||
itemHeight: 18,
|
||||
selectedMode: false,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
inactiveBorderColor: 'rgba(0,0,0,0)',
|
||||
data: _defaultArr
|
||||
.filter((item) => item.type === 'dot')
|
||||
.map((item) => ({
|
||||
name: item.label,
|
||||
icon: item.icon,
|
||||
})),
|
||||
},
|
||||
visualMap: {
|
||||
right: 60,
|
||||
bottom: 100,
|
||||
selectedMode: false,
|
||||
orient: 'vertical',
|
||||
pieces: _defaultArr.filter((item) => item.type === 'map'),
|
||||
color: '#fff',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
visibility: 'off',
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
stateAnimation: {
|
||||
duration: 100,
|
||||
|
|
@ -169,58 +259,89 @@
|
|||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
show: true,
|
||||
},
|
||||
symbol: `image://${PigImg}`,
|
||||
symbolSize: [30, 30],
|
||||
symbolOffset: [0, 0],
|
||||
z: 9999,
|
||||
data: [
|
||||
{
|
||||
img: `image://${SheepImg}`,
|
||||
map: '',
|
||||
name: '羊',
|
||||
value: ['105.2333', '29.2641'],
|
||||
},
|
||||
{
|
||||
img: `image://${PigImg}`,
|
||||
map: '',
|
||||
name: '猪',
|
||||
value: ['105.2333', '29.2643'],
|
||||
},
|
||||
],
|
||||
// data: mapData,
|
||||
},
|
||||
..._seriesData,
|
||||
// {
|
||||
// type: 'map',
|
||||
// zoom: 1.1,
|
||||
// name: 'map',
|
||||
// roam: false,
|
||||
// map: 'lcxz',
|
||||
// select: {
|
||||
// disabled: true,
|
||||
// type: 'scatter',
|
||||
// name: '生猪产业分布点',
|
||||
// coordinateSystem: 'geo',
|
||||
// tooltip: {
|
||||
// trigger: 'item',
|
||||
// show: true,
|
||||
// },
|
||||
// label: {
|
||||
// show: false,
|
||||
// color: '#fff',
|
||||
// normal: {
|
||||
// show: false,
|
||||
// symbol: `image://${PigImg}`,
|
||||
// symbolSize: [30, 30],
|
||||
// symbolOffset: [0, 0],
|
||||
// z: 9999,
|
||||
// data: [
|
||||
// {
|
||||
// img: `image://${PigImg}`,
|
||||
// map: '',
|
||||
// name: '羊',
|
||||
// value: ['105.2333', '29.2641'],
|
||||
// },
|
||||
// },
|
||||
// itemStyle: {
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// data: _data[0],
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// type: 'scatter',
|
||||
// name: '肉羊产业分布点',
|
||||
// coordinateSystem: 'geo',
|
||||
// tooltip: {
|
||||
// trigger: 'item',
|
||||
// show: true,
|
||||
// },
|
||||
// symbol: `image://${SheepImg}`,
|
||||
// symbolSize: [30, 30],
|
||||
// symbolOffset: [0, 0],
|
||||
// z: 9999,
|
||||
// data: [
|
||||
// {
|
||||
// img: `image://${SheepImg}`,
|
||||
// map: '',
|
||||
// name: '羊',
|
||||
// value: ['105.2333', '29.2641'],
|
||||
// },
|
||||
// {
|
||||
// img: `image://${SheepImg}`,
|
||||
// map: '',
|
||||
// name: '猪',
|
||||
// value: ['105.2333', '29.2643'],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
type: 'map',
|
||||
zoom: 1.1,
|
||||
roam: false,
|
||||
map: 'lcxz',
|
||||
name: 'nylx-key',
|
||||
showLegendSymbol: false,
|
||||
select: {
|
||||
disabled: true,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
color: '#fff',
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: 'rgb(242,230,230 , 0.7)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 0.1,
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
data: _data,
|
||||
},
|
||||
],
|
||||
}
|
||||
setOptions(options)
|
||||
|
|
@ -236,8 +357,6 @@
|
|||
img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
|
||||
})
|
||||
})
|
||||
console.log(mapData)
|
||||
|
||||
registerMap('lcxz', tempMapJSON.value)
|
||||
options = {
|
||||
backgroundColor: 'transparent',
|
||||
|
|
@ -445,7 +564,10 @@
|
|||
const resData = await getAgriculturalBasic({
|
||||
parent: visualizationStore.getAddresId,
|
||||
type: 1,
|
||||
industry: historyMap.value[0]?.value,
|
||||
})
|
||||
console.log(resData)
|
||||
|
||||
baseData.value = resData ?? []
|
||||
} finally {
|
||||
mapInit()
|
||||
|
|
@ -468,16 +590,16 @@
|
|||
}
|
||||
|
||||
let tempName: any = null
|
||||
|
||||
const _seriesName = ['nylx-key', '肉羊产业分布点', '生猪产业分布点']
|
||||
|
||||
onMounted(async () => {
|
||||
// await getData()
|
||||
await mapNyTypeInit()
|
||||
getInstance()?.on('mousemove', (e) => {
|
||||
// const arr = options.series[3].data
|
||||
// if (e.seriesType == 'map' && arr.length) {
|
||||
// console.log('=====清除')
|
||||
// options.series[3].data = []
|
||||
// getInstance()?.setOption({ series: options.series }, false)
|
||||
// }
|
||||
if (_seriesName.includes(e.seriesName)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (tempName == e.name && e.seriesType == 'scatter') return
|
||||
if (e.seriesType == 'scatter') {
|
||||
|
|
@ -485,18 +607,19 @@
|
|||
options.series[3].data = [e.data]
|
||||
getInstance()?.setOption({ series: options.series }, false)
|
||||
}
|
||||
|
||||
// if (tempName == e.name) return
|
||||
// tempName = e.name
|
||||
// if (e.componentSubType == 'scatter') {
|
||||
// options.series[3].data = [e.data]
|
||||
// getInstance()?.setOption({ series: options.series }, false)
|
||||
// } else {
|
||||
// options.series[3].data = [e.data]
|
||||
// getInstance()?.setOption({ series: options.series }, false)
|
||||
// }
|
||||
})
|
||||
getInstance()?.on('click', (e) => {
|
||||
getInstance()?.on('click', async (e) => {
|
||||
if (loading) return
|
||||
if (_seriesName.includes(e.seriesName)) {
|
||||
console.log(e)
|
||||
|
||||
loading = true
|
||||
historyMap.value.push({ type: 'nylx', value: e.data.key })
|
||||
await getData()
|
||||
loading = false
|
||||
return
|
||||
}
|
||||
|
||||
if (e.seriesType == 'effectScatter' || e.seriesType == 'scatter') {
|
||||
rootEmitter.emit('base:click', e.data)
|
||||
}
|
||||
|
|
@ -523,7 +646,7 @@
|
|||
},
|
||||
)
|
||||
|
||||
return { chartRef, isBack, onBack }
|
||||
return { chartRef, isBack, onBack, historyMap, historyBack }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue