diff --git a/src/assets/images/sheep.png b/src/assets/images/sheep.png index 5348aad0..88713fba 100644 Binary files a/src/assets/images/sheep.png and b/src/assets/images/sheep.png differ diff --git a/src/views/base/base-data/base.data.ts b/src/views/base/base-data/base.data.ts index 6cdb4431..28770676 100644 --- a/src/views/base/base-data/base.data.ts +++ b/src/views/base/base-data/base.data.ts @@ -81,6 +81,31 @@ export const accountFormSchema: FormSchema[] = [ return !!values.id }, }, + // { + // field: 'is_blank', + // label: '是否外部链接', + // required: false, + // component: 'Switch', + // componentProps: { + // checkedChildren: 1, + // unCheckedChildren: 0, + // }, + // // render: ({ model, field }) => { + // // console.log(); + + // // return model[field] ? '是' : '否' + // // }, + // }, + // { + // field: 'blank_url', + // label: '外部链接', + // required: false, + // component: 'Input', + // ifShow: ({ values }) => { + // return !!values.is_blank + // }, + // }, + { field: 'industry_key', label: '产业类型', diff --git a/src/views/visualization/components/Map.vue b/src/views/visualization/components/Map.vue index 07b59f71..cfb57ada 100644 --- a/src/views/visualization/components/Map.vue +++ b/src/views/visualization/components/Map.vue @@ -35,6 +35,7 @@ import { useVisualizationStore } from '/@/store/modules/visualization' import SheepImg from '/@/assets/images/sheep.png' import PigImg from '/@/assets/images/pig.png' + import { forEach } from 'lodash-es' const domImg = document.createElement('img') domImg.style.height = '8px' @@ -90,26 +91,49 @@ { value: 1, label: '稻渔综合种养', - color: 'rgb(242,230,230 , 0.7)', + color: 'rgb(30,54,80 , 0.8)', type: 'map', + data: [ + { + value: [105.198605, 29.280154], + }, + ], }, { value: 2, label: '优品柑桔种植', - color: 'rgb(187,216,106 , 0.7)', + color: 'rgb(54,89,114,0.8)', type: 'map', + data: [ + { + value: [105.383917, 29.387026], + }, + { + value: [105.194187, 29.364692], + }, + ], }, { value: 3, label: '高粱产业', - color: 'rgb(238,98,73 , 0.7)', + color: 'rgba(147, 235, 248, 0.2)', type: 'map', + data: [ + { + value: [105.116049, 29.388207], + }, + ], }, { value: 4, label: '油茶产业', - color: 'rgb(172,220,243 , 0.7)', + color: 'rgb(172,220,243 , 0.4)', type: 'map', + data: [ + { + value: [105.386462, 29.317352], + }, + ], }, { value: 5, @@ -120,12 +144,7 @@ { map: '', name: '猪', - value: ['105.283094', '29.234786'], - }, - { - map: '', - name: '猪', - value: ['105.338434', '29.388883'], + value: [105.292327, 29.401826], }, ], }, @@ -138,17 +157,7 @@ { map: '', name: '羊', - value: ['105.287507', '29.339408'], - }, - { - map: '', - name: '羊', - value: ['105.147012', '29.442367'], - }, - { - map: '', - name: '羊', - value: ['105.115105', '29.383271'], + value: [105.195498, 29.420684], }, ], }, @@ -160,6 +169,18 @@ item = Object.assign(item, _data) }) + const _typeBackArr = _defaultArr.reduce((prev, cur) => { + cur.data?.forEach((item) => { + prev.push({ + type: 'nylx-key', + name: cur.label, + value: item.value, + key: cur.key, + }) + }) + return prev + }, []) + const _seriesData = _defaultArr .filter((item) => item.type === 'dot') .map((e) => { @@ -227,90 +248,54 @@ duration: 100, }, geo: { + show: true, map: 'lcxz', - aspectScale: 0.75, - layoutCenter: ['50%', '50.5%'], - layoutSize: '100%', - silent: true, - roam: false, - z: 0, + roam: true, + zoom: 1, label: { - color: '#fff', - show: false, + emphasis: { + show: false, + }, }, itemStyle: { - areaColor: 'rgba(0, 15, 40, 0.0)', - shadowColor: 'rgba(0, 0, 0, 1)', - shadowBlur: 0, - shadowOffsetX: 0, - shadowOffsetY: 5, - borderColor: '#fff', - borderWidth: 0.1, - }, - emphasis: { - itemStyle: { - areaColor: '#2AB8FF', + normal: { + borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 1, - color: 'green', + areaColor: { + type: 'radial', + x: 0.5, + y: 0.5, + r: 0.8, + colorStops: [ + { + offset: 0, + color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色 + }, + { + offset: 1, + color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + }, + shadowColor: 'rgba(128, 217, 248, 1)', + // shadowColor: 'rgba(255, 255, 255, 1)', + shadowOffsetX: -2, + shadowOffsetY: 2, + shadowBlur: 10, }, - label: { - show: false, + emphasis: { + areaColor: '#389BB7', + borderWidth: 0, }, }, }, series: [ ..._seriesData, - // { - // type: 'scatter', - // name: '生猪产业分布点', - // coordinateSystem: 'geo', - // tooltip: { - // trigger: 'item', - // show: true, - // }, - // symbol: `image://${PigImg}`, - // symbolSize: [30, 30], - // symbolOffset: [0, 0], - // z: 9999, - // data: [ - // { - // img: `image://${PigImg}`, - // map: '', - // name: '羊', - // value: ['105.2333', '29.2641'], - // }, - // ], - // }, - // { - // 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, + zoom: 1, roam: false, map: 'lcxz', name: 'nylx-key', @@ -329,19 +314,63 @@ }, }, itemStyle: { - areaColor: 'rgb(242,230,230 , 0.7)', borderColor: '#fff', borderWidth: 0.1, - }, - itemStyle: { emphasis: { label: { show: false, }, + areaColor: 'rgba(128, 217, 248, 0.2)', + borderWidth: 0, }, }, + data: _data, }, + + { + type: 'scatter', + name: 'nylx-key1', + coordinateSystem: 'geo', + stateAnimation: { + duration: 300, + easing: 'bounceOut', + }, + label: { + show: true, + align: 'center', + formatter: function (params) { + var name = params.name + var text = `{tline|${name}}` + return text + }, + color: '#fff', + rich: { + fline: { + padding: [0, 25], + color: '#fff', + textShadowColor: '#030615', + textShadowOffsetX: 1, + textShadowOffsetY: 1, + fontSize: 14, + fontWeight: 400, + }, + tline: { + padding: [0, 27], + color: '#ABF8FF', + fontSize: 12, + }, + }, + }, + itemStyle: { + color: '#00FFF6', + }, + symbol: img2, + symbolSize: [100, 34], + symbolOffset: [0, -26], + z: 999, + data: _typeBackArr, + }, ], } setOptions(options) @@ -591,7 +620,7 @@ let tempName: any = null - const _seriesName = ['nylx-key', '肉羊产业分布点', '生猪产业分布点'] + const _seriesName = ['nylx-key', 'nylx-key1', '肉羊产业分布点', '生猪产业分布点'] onMounted(async () => { // await getData()