参数添加

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

@@ -2,7 +2,7 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script>
-import { ref, reactive, watchEffect } from 'vue';
+import { ref, reactive, watchEffect, watch } from 'vue';
 import { cloneDeep } from 'lodash';
 import { useEcharts } from '@/hooks/useEcharts';
 
@@ -66,6 +66,18 @@ 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) {

src/components/customBack.vue

@@ -1,6 +1,16 @@
 <template>
   <div class="custom-back-warp">
-    <subTop :title="topTitle" :postion="topPostion"></subTop>
+    <subTop
+      :title="topTitle"
+      :postion="topPostion"
+      :is-down="isDown"
+      :down-title="downTitle"
+      :label-field="labelField"
+      :value-field="valueField"
+      :down-width="downWidth"
+      :options="options"
+      @command="handeleCommand"
+    ></subTop>
     <div class="custom-back-content">
       <slot name="back"></slot>
     </div>
@@ -23,7 +33,47 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
+  options: {
+    type: Array,
+    default: () => {
+      return [
+        { label: '耿马镇', value: '42611' },
+        { label: '勐撒镇', value: '9259' },
+        { label: '勐永镇', value: '17787' },
+        { label: '孟定镇', value: '42610' },
+        { label: '勐简乡', value: '17788' },
+        { label: '贺派乡', value: '40161' },
+        { label: '四排山乡', value: '40163' },
+        { label: '大兴乡', value: '40159' },
+      ];
+    },
+  },
+  isDown: {
+    type: Boolean,
+    default: false,
+  },
+  downTitle: {
+    type: String,
+    default: '全县',
+  },
+  labelField: {
+    type: String,
+    default: 'label',
+  },
+  valueField: {
+    type: String,
+    default: 'value',
+  },
+  downWidth: {
+    type: String,
+    default: '100px',
+  },
 });
+
+const emit = defineEmits(['command']);
+const handeleCommand = (data) => {
+  emit('command', data);
+};
 </script>
 <style lang="scss" scoped>
 .custom-back-warp {

src/components/subTop.vue

@@ -74,7 +74,7 @@ const props = defineProps({
     default: '100px',
   },
 });
-
+const emit = defineEmits(['command']);
 let topTitle = ref('');
 let pos = ref('');
 
@@ -102,7 +102,8 @@ const handleCommand = (data) => {
   if (index > -1) {
     currentVal = optionsList[index];
   }
-  console.info('handleCommand', currentVal);
+  // console.info('handleCommand', currentVal);
+  emit('command', currentVal);
 };
 </script>
 <style lang="scss">

src/views/land/components/landPatrol.vue

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

src/views/land/index.vue

@@ -16,9 +16,29 @@
         </customBack>
       </div>
       <div class="left-charts-item">
-        <customBack top-title="项目效益分析" :top-postion="'left'">
+        <customBack
+          top-title="项目效益分析"
+          :top-postion="'left'"
+          :down-title="'全县'"
+          :label-field="'label'"
+          :value-field="'value'"
+          :down-width="'100px'"
+          :options="[
+            { label: '全县', value: '530926' },
+            { label: '耿马镇', value: '42611' },
+            { label: '勐撒镇', value: '9259' },
+            { label: '勐永镇', value: '17787' },
+            { label: '孟定镇', value: '42610' },
+            { label: '勐简乡', value: '17788' },
+            { label: '贺派乡', value: '40161' },
+            { label: '四排山乡', value: '40163' },
+            { label: '大兴乡', value: '40159' },
+          ]"
+          :is-down="true"
+          @command="landPatrolCommand"
+        >
           <template #back>
-            <landPatrol></landPatrol>
+            <landPatrol ref="landPatrolRef"></landPatrol>
           </template>
         </customBack>
       </div>
@@ -60,6 +80,15 @@ import landCirculation from './components/landCirculation.vue';
 import landPlan from './components/landPlan.vue';
 import landPatrol from './components/landPatrol.vue';
 import LandAera from './components/LandAera.vue';
+import { nextTick, ref } from 'vue';
+
+const landPatrolRef = ref(null);
+const landPatrolCommand = (data) => {
+  console.info('landPatrolCommand', data);
+  nextTick(() => {
+    landPatrolRef.value && landPatrolRef.value.refresData();
+  });
+};
 </script>
 <style lang="scss" scoped>
 .data-home-index {