修改

src/api/sys/other.ts

@@ -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:基地数据列表
  */

src/views/base/base-data/base.data.ts

@@ -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: '基地名称',

src/views/visualization/components/Map.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="relative h-full overflow-hidden">
     <div
-      v-if="isBack"
+      v-if="historyMap.length"
-      @click="onBack"
+      @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 _defaultArr = [
-
-        const _data = [
           {
             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)
+            value: 5,
-        options = {
+            label: '生猪产业分布点',
-          legend: {
+            icon: `image://${PigImg}`,
+            type: 'dot',
             data: [
               {
-                icon: `image://${PigImg}`,
+                map: '',
-                name: '生猪产业分布点',
+                name: '猪',
+                value: ['105.283094', '29.234786'],
+              },
+              {
+                map: '',
+                name: '猪',
+                value: ['105.338434', '29.388883'],
               },
             ],
           },
-          // visualMap: {
+          {
-          //   right: 60,
+            value: 6,
-          //   bottom: 100,
+            label: '肉羊产业分布点',
-          //   pieces: [
+            icon: `image://${SheepImg}`,
-          //     {
+            type: 'dot',
-          //       value: 1,
+            data: [
-          //       label: '稻渔综合种养',
+              {
-          //       color: 'rgb(242,230,230 , 0.7)',
+                map: '',
-          //     },
+                name: '羊',
-          //     {
+                value: ['105.287507', '29.339408'],
-          //       value: 2,
+              },
-          //       label: '优品柑桔种植',
+              {
-          //       color: 'rgb(187,216,106 , 0.7)',
+                map: '',
-          //     },
+                name: '羊',
-          //     {
+                value: ['105.147012', '29.442367'],
-          //       value: 3,
+              },
-          //       label: '高粱产业',
+              {
-          //       color: 'rgb(238,98,73 , 0.7)',
+                map: '',
-          //     },
+                name: '羊',
-          //     {
+                value: ['105.115105', '29.383271'],
-          //       value: 4,
+              },
-          //       label: '油茶产业',
+            ],
-          //       color: 'rgb(172,220,243 , 0.7)',
+          },
-          //     },
+        ]
-          //   ],
+
-          //   color: '#fff',
+        const resData = await getKeywordsIndustry()
-          //   textStyle: {
+        _defaultArr.forEach((item) => {
-          //     color: '#fff',
+          const _data = resData.find((i) => i.value == item.value)
-          //   },
+          item = Object.assign(item, _data)
-          //   visibility: 'off',
+        })
-          // },
+
+        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: [
-            {
+            ..._seriesData,
-              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,
-            },
             // {
-            //   type: 'map',
+            //   type: 'scatter',
-            //   zoom: 1.1,
+            //   name: '生猪产业分布点',
-            //   name: 'map',
+            //   coordinateSystem: 'geo',
-            //   roam: false,
+            //   tooltip: {
-            //   map: 'lcxz',
+            //     trigger: 'item',
-            //   select: {
+            //     show: true,
-            //     disabled: true,
             //   },
-            //   label: {
+            //   symbol: `image://${PigImg}`,
-            //     show: false,
+            //   symbolSize: [30, 30],
-            //     color: '#fff',
+            //   symbolOffset: [0, 0],
-            //     normal: {
+            //   z: 9999,
-            //       show: false,
+            //   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 (_seriesName.includes(e.seriesName)) {
-          // if (e.seriesType == 'map' && arr.length) {
+            return
-          //   console.log('=====清除')
+          }
-          //   options.series[3].data = []
-          //   getInstance()?.setOption({ series: options.series }, false)
-          // }
 
           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>