feat

components.d.ts

@@ -17,7 +17,6 @@ declare module 'vue' {
     CustomEchartBar: typeof import('./src/components/custom-echart-bar/index.vue')['default']
     CustomEchartBubble: typeof import('./src/components/custom-echart-bubble/index.vue')['default']
     CustomEchartColumnLine: typeof import('./src/components/custom-echart-column-line/index.vue')['default']
-    CustomEchartHyaline: typeof import('./src/components/custom-echart-hyaline/index.vue')['default']
     CustomEchartHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/index.vue')['default']
     CustomEchartLine: typeof import('./src/components/custom-echart-line/index.vue')['default']
     CustomEchartLineLine: typeof import('./src/components/custom-echart-line-line/index.vue')['default']

src/components/centerMap.vue

@@ -5,7 +5,18 @@
       <custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
     </div>
 
-    <el-dialog v-model="isShow" :title="currentMap.name + dialogTitle" width="360" :before-close="handleClose" custom-class="map-info-dialog">
+    <el-dialog
+      v-model="isShow"
+      :title="currentMap.name + dialogTitle"
+      width="360"
+      :show-close="false"
+      :before-close="handleClose"
+      custom-class="map-info-dialog"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <slot name="header"></slot>
+      </template>
+      <slot name="dialogContent"></slot>
     </el-dialog>
   </div>
 </template>
@@ -163,7 +174,7 @@ let currentMap = reactive({});
 const mapClick = (data) => {
   isShow.value = true;
   currentMap = data;
-  console.info('mapClick', data);
+  emit('mapclick', currentMap);
 };
 const handleClose = () => {
   isShow.value = false;
@@ -171,6 +182,8 @@ const handleClose = () => {
 onMounted(() => {
   console.info('iconUrl', iconUrl);
 });
+
+const emit = defineEmits(['mapclick']);
 </script>
 <style lang="scss" scoped>
 div {
@@ -184,6 +197,7 @@ div {
     overflow-y: auto;
     background-size: 100% 100%;
     padding: 16px;
+    margin-top: 15%;
   }
   .el-dialog__header {
     margin-top: 10px;
@@ -197,6 +211,14 @@ div {
       top: 8px !important;
     }
   }
+  .map-dialog-my-header {
+    margin-top: 4px;
+    display: inline-flex;
+    justify-content: space-between;
+    h4 {
+      font-weight: normal !important;
+    }
+  }
 }
 .map-center-warp {
   width: 100%;

src/components/custom-echart-line/index.vue

@@ -2,7 +2,7 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script>
-import { ref, reactive, watchEffect, watch } from 'vue';
+import { ref, reactive, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash';
 import { useEcharts } from '@/hooks/useEcharts';
 
@@ -66,18 +66,6 @@ export default {
       props.chartData && initCharts();
     });
 
-    watch(
-      () => props.chartData,
-      () => {
-        console.info('props.chartData变化', props.chartData);
-        props.chartData && initCharts();
-      },
-      {
-        deep: true,
-        immediate: true,
-      }
-    );
-
     function hexToRGBA(hex, alpha = 1) {
       let hexCode = hex.replace('#', '');
       if (hexCode.length === 3) {
@@ -155,8 +143,8 @@ export default {
         seriesIndex: 0,
         showTooltip: true,
       });
-      getInstance()?.off('click', onClick);
+      // getInstance()?.off('click', onClick);
-      getInstance()?.on('click', onClick);
+      // getInstance()?.on('click', onClick);
     }
 
     function onClick(params) {

src/hooks/useEcharts.js

@@ -141,14 +141,13 @@ export const useEcharts = (elRef, theme = 'default') => {
   function setOptions(options = {}, clear = true) {
     const mergedOptions = {
       animation: true,
-      animationDuration: 3000,
+      animationDuration: 1000,
       animationEasing: 'cubicOut',
       ...unref(options),
       animationThreshold: 2000, // 数据量超过2000自动关闭动画
       animationDelayUpdate: (idx) => idx * 50, // 数据项延迟
     };
     cacheOptions.value = mergedOptions;
-    cacheOptions.value = options;
     if (unref(elRef)?.offsetHeight === 0) {
       useTimeoutFn(() => {
         setOptions(unref(getOptions));
@@ -164,7 +163,6 @@ export const useEcharts = (elRef, theme = 'default') => {
         }
         clear && chartInstance?.clear();
         chartInstance?.setOption(unref(getOptions));
-
         // 立即绑定事件
         chartInstance.off('click');
         chartInstance.on('click', handleMapClick);

src/views/inputs/components/inputsMap.vue

@@ -0,0 +1,102 @@
+<template>
+  <centerMap :dialog-title="'土地类型'" @mapclick="doMapclick">
+    <template #header>
+      <div class="land-map-pop-header">
+        <div class="title">{{ currentRegion && currentRegion.name ? currentRegion.name : '投入品' }}</div>
+      </div>
+    </template>
+    <template #dialogContent>
+      <div class="land-map-pop-content">
+        <div v-for="(n, index) in list" :key="index" class="list-item">
+          <div class="title">
+            <span class="title-val"> {{ n.title }}</span>
+          </div>
+          <div class="value">{{ n.value }}{{ n.unit }}</div>
+        </div>
+      </div>
+    </template>
+  </centerMap>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import centerMap from '@/components/centerMap.vue';
+
+const unit = ref('家');
+const list = reactive([
+  { title: '监管机构', value: '1', color: '#01FEFD', unit: '家' },
+  { title: '监管人员', value: '2', color: '#FEF906', unit: '人' },
+  { title: '村级监管员', value: '5', color: '#02FD94', unit: '人' },
+  { title: '农资经营单位', value: '42', color: '#FE7F03', unit: '家' },
+  { title: '生产主体', value: '2', color: '#41BDFC', unit: '家' },
+  { title: '投入品规模', value: '3000', color: '#FC0003', unit: '万元' },
+]);
+
+let currentRegion = reactive(null);
+const doMapclick = (data) => {
+  currentRegion = data;
+};
+</script>
+
+<style lang="scss" scoped>
+.land-map-pop-header {
+  display: inline-flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 3px;
+  .title,
+  .value {
+    display: inline-block;
+    vertical-align: middle;
+    color: $color-white;
+  }
+  .title {
+    font-size: 18px;
+  }
+  .value {
+    font-size: 14px;
+  }
+}
+.land-map-pop-content {
+  width: 100%;
+  gap: 10px;
+  display: inline-flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  .list-item {
+    width: calc((100% - 10px) / 2);
+    display: inline-flex;
+    justify-content: space-between;
+    padding: 6px 0;
+    .title {
+      display: inline-flex;
+      justify-content: flex-start;
+      .before {
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .b-content {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+      .before,
+      .title-val {
+        display: inline-block;
+        vertical-align: middle;
+        padding: 0 5px 0 2px;
+        color: $color-custom-main;
+      }
+    }
+
+    .value {
+      display: inline-block;
+      text-align: right;
+      color: $color-white;
+      font-size: 12px;
+    }
+  }
+}
+</style>

src/views/inputs/index.vue

@@ -24,7 +24,7 @@
       </div>
     </el-col>
     <el-col :span="12">
-      <centerMap></centerMap>
+      <inputsMap></inputsMap>
     </el-col>
     <el-col :span="6" class="right-charts">
       <div class="right-charts-item">
@@ -59,6 +59,7 @@ import monthlyuseCharts from './components/monthlyuseCharts.vue';
 import dealerDistributionCharts from './components/dealerDistributionCharts.vue';
 import casesAlerts from './components/casesAlerts.vue';
 import inputsType from './components/inputsType.vue';
+import inputsMap from './components/inputsMap.vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {

src/views/land/components/landMap.vue

@@ -0,0 +1,101 @@
+<template>
+  <centerMap :dialog-title="'土地类型'">
+    <template #header>
+      <div class="land-map-pop-header">
+        <div class="title">土地类型</div>
+        <div class="value">总：88.5{{ unit }}</div>
+      </div>
+    </template>
+    <template #dialogContent>
+      <div class="land-map-pop-content">
+        <div v-for="(n, index) in list" :key="index" class="list-item">
+          <div class="title">
+            <div class="before">
+              <div class="b-content" :style="{ background: n.color }"></div>
+            </div>
+            <span class="title-val"> {{ n.title }}</span>
+          </div>
+          <div class="value">{{ n.value }}{{ unit }}</div>
+        </div>
+      </div>
+    </template>
+  </centerMap>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
+import centerMap from '@/components/centerMap.vue';
+
+const unit = ref('万亩');
+const list = reactive([
+  { title: '望天田', value: '60.8', color: '#01FEFD' },
+  { title: '菜地', value: '60.8', color: '#FEF906' },
+  { title: '水浇地', value: '60.8', color: '#02FD94' },
+  { title: '果园', value: '60.8', color: '#FE7F03' },
+  { title: '灌溉水田', value: '60.8', color: '#41BDFC' },
+  { title: '旱地', value: '60.8', color: '#FC0003' },
+]);
+</script>
+
+<style lang="scss" scoped>
+.land-map-pop-header {
+  display: inline-flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 3px;
+  .title,
+  .value {
+    display: inline-block;
+    vertical-align: middle;
+    color: $color-white;
+  }
+  .title {
+    font-size: 18px;
+  }
+  .value {
+    font-size: 14px;
+  }
+}
+.land-map-pop-content {
+  width: 100%;
+  gap: 10px;
+  display: inline-flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  .list-item {
+    width: calc((100% - 10px) / 2);
+    display: inline-flex;
+    justify-content: space-between;
+    padding: 6px 0;
+    .title {
+      display: inline-flex;
+      justify-content: flex-start;
+      .before {
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .b-content {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+      .before,
+      .title-val {
+        display: inline-block;
+        vertical-align: middle;
+        padding: 0 5px 0 2px;
+        color: $color-white;
+      }
+    }
+
+    .value {
+      display: inline-block;
+      text-align: right;
+      color: $color-white;
+      font-size: 12px;
+    }
+  }
+}
+</style>

src/views/land/components/landPatrol.vue

@@ -1,34 +1,16 @@
 <template>
-  <custom-echart-line :chart-data="dataList" height="100%" :option="state.option" />
+  <custom-echart-line ref="lineCharts" :chart-data="state.data" height="100%" :option="state.option" />
 </template>
 <script setup>
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
-let dataList = reactive([
+let dataList = [
-  {
+  { value: 10, name: '2020' },
-    value: 10,
+  { value: 66, name: '2021' },
-    name: '2020',
+  { value: 100, name: '2022' },
-  },
+  { value: 120, name: '2023' },
-  {
+  { value: 150, name: '2024' },
-    value: 66,
+  { value: 80, name: '2025' },
-    name: '2021',
+];
-  },
-  {
-    value: 100,
-    name: '2022',
-  },
-  {
-    value: 120,
-    name: '2023',
-  },
-  {
-    value: 150,
-    name: '2024',
-  },
-  {
-    value: 80,
-    name: '2025',
-  },
-]);
 const state = reactive({
   option: {
     color: ['#35D0C0'],
@@ -76,35 +58,16 @@ const state = reactive({
   },
   data: dataList,
 });
-
+const lineCharts = ref(null);
 const refresData = () => {
-  console.info('landPatrol********************refresData');
+  state.data = [
-  state.data = dataList = reactive([
+    { value: 5, name: '2020' },
-    {
+    { value: 36, name: '2021' },
-      value: 20,
+    { value: 70, name: '2022' },
-      name: '2020',
+    { value: 56, name: '2023' },
-    },
+    { value: 70, name: '2024' },
-    {
+    { value: 20, name: '2025' },
-      value: 86,
+  ];
-      name: '2021',
-    },
-    {
-      value: 120,
-      name: '2022',
-    },
-    {
-      value: 140,
-      name: '2023',
-    },
-    {
-      value: 170,
-      name: '2024',
-    },
-    {
-      value: 100,
-      name: '2025',
-    },
-  ]);
 };
 
 defineExpose({

src/views/land/index.vue

@@ -44,7 +44,7 @@
       </div>
     </el-col>
     <el-col :span="12">
-      <centerMap :dialog-title="'土地资源'"></centerMap>
+      <landMap></landMap>
     </el-col>
     <el-col :span="6" class="right-charts">
       <div class="right-charts-item">
@@ -81,6 +81,7 @@ import landPlan from './components/landPlan.vue';
 import landPatrol from './components/landPatrol.vue';
 import LandAera from './components/LandAera.vue';
 import cake from './components/cake.vue';
+import landMap from './components/landMap.vue';
 import { nextTick, ref } from 'vue';
 
 const landPatrolRef = ref(null);