feat:land-apis

src/views/land/components/cake.vue

@@ -1,66 +0,0 @@
-<template>
-  <customEchartHyalineCake :chart-data="data" height="100%" :option="option" />
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive } from 'vue';
-
-/* --------------- data --------------- */
-// #region
-const data = ref([
-  {
-    name: '小麦',
-    value: 60.8,
-  },
-  {
-    name: '荞麦',
-    value: 44.4,
-  },
-  {
-    name: '贡菜',
-    value: 24.3,
-  },
-  {
-    name: '油菜',
-    value: 32.7,
-  },
-  {
-    name: '马铃薯',
-    value: 32.9,
-  },
-  {
-    name: '玉米',
-    value: 32.1,
-  },
-]);
-const option = reactive({
-  opacity: 0.6,
-  itemGap: 0.2,
-  legendSuffix: '万亩',
-  itemHeight: 120,
-  grid3D: {
-    show: false,
-    boxHeight: 5,
-    top: '0',
-    left: '-20%',
-    viewControl: {
-      //3d效果可以放大、旋转等，请自己去查看官方配置
-      alpha: 30, //角度(这个很重要 调节角度的)
-      distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
-      rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
-      zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
-      panSensitivity: 10, //设置平移灵敏度，0无法平移
-      autoRotate: true, //自动旋转
-      autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
-    },
-  },
-});
-// #endregion
-
-/* --------------- methods --------------- */
-// #region
-
-// #endregion
-</script>
-
-<style lang="scss" scoped></style>

src/views/land/components/landFive.vue

@@ -2,20 +2,18 @@
   <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
 </template>
 <script setup>
-import { reactive } from 'vue';
+import { reactive, watch } from 'vue';
+import { isEmpty } from '@/utils';
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
 
 const state = reactive({
-  data: [
+  data: [],
-    { value: 20, name: '耿马镇' },
-    { value: 15, name: '勐撒镇' },
-    { value: 12, name: '勐永镇' },
-    { value: 16, name: '孟定镇' },
-    { value: 8, name: '勐简乡' },
-    { value: 12, name: '贺派乡' },
-    { value: 10, name: '四排山乡' },
-    { value: 9, name: '芒洪乡' },
-    { value: 8, name: '大兴乡' },
-  ],
   option: {
     grid: {
       left: '5%',
@@ -105,4 +103,17 @@ const state = reactive({
     ],
   },
 });
+
+watch(
+  () => props.data,
+  (val) => {
+    if (!isEmpty(val)) {
+      state.data = val;
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
 </script>

src/views/land/components/landFour.vue

@@ -28,18 +28,7 @@ const props = defineProps({
   data: {
     type: Array,
     default: () => {
-      return [
+      return [];
-        { value: 58.9, label: '灌溉水田' },
-        { value: 56.1, label: '基地地' },
-        { value: 60.8, label: '望天田' },
-        { value: 60.6, label: '水浇地' },
-        { value: 32.6, label: '林地' },
-        { value: 25.8, label: '育苗地' },
-        { value: 56.0, label: '果园' },
-        { value: 52.4, label: '草地' },
-        { value: 6.3, label: '观测用地' },
-        { value: 6.1, label: '监测用地' },
-      ];
     },
   },
 });

src/views/land/components/landOne.vue

@@ -2,7 +2,15 @@
   <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
 </template>
 <script setup>
-import { reactive } from 'vue';
+import { reactive, watch } from 'vue';
+import { isEmpty } from '@/utils';
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
 
 const state = reactive({
   option: {
@@ -109,16 +117,19 @@ const state = reactive({
     //   },
     // },
   },
-  data: [
+  data: [],
-    { value: 20, name: '耿马镇' },
-    { value: 15, name: '勐撒镇' },
-    { value: 12, name: '勐永镇' },
-    { value: 16, name: '孟定镇' },
-    { value: 8, name: '勐简乡' },
-    { value: 12, name: '贺派乡' },
-    { value: 10, name: '四排山乡' },
-    { value: 9, name: '芒洪乡' },
-    { value: 8, name: '大兴乡' },
-  ],
 });
+
+watch(
+  () => props.data,
+  (val) => {
+    if (!isEmpty(val)) {
+      state.data = val;
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
 </script>

src/views/land/components/landSix.vue

@@ -0,0 +1,54 @@
+<template>
+  <custom-echart-hyaline-cake height="100%" :chart-data="state.data" :option="state.option" />
+</template>
+
+<script setup>
+import { reactive, watch } from 'vue';
+import { isEmpty } from '@/utils';
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const state = reactive({
+  option: {
+    opacity: 0.6,
+    itemGap: 0.2,
+    legendSuffix: '万亩',
+    itemHeight: 120,
+    grid3D: {
+      show: false,
+      boxHeight: 5,
+      top: '0',
+      left: '-20%',
+      viewControl: {
+        //3d效果可以放大、旋转等，请自己去查看官方配置
+        alpha: 30, //角度(这个很重要 调节角度的)
+        distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+        rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
+        zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
+        panSensitivity: 10, //设置平移灵敏度，0无法平移
+        autoRotate: true, //自动旋转
+        autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
+      },
+    },
+  },
+  data: [],
+});
+
+watch(
+  () => props.data,
+  (val) => {
+    if (!isEmpty(val)) {
+      state.data = val;
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+</script>

src/views/land/components/landThere.vue

@@ -1,16 +1,21 @@
 <template>
-  <custom-echart-line ref="lineCharts" :chart-data="state.data" height="100%" :option="state.option" />
+  <custom-echart-line :chart-data="state.data" height="100%" :option="state.option" />
 </template>
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive, watch } from 'vue';
-let dataList = [
+import { isEmpty, sleep } from '@/utils';
-  { value: 10, name: '2020' },
+
-  { value: 66, name: '2021' },
+const props = defineProps({
-  { value: 100, name: '2022' },
+  data: {
-  { value: 120, name: '2023' },
+    type: Array,
-  { value: 150, name: '2024' },
+    default: () => [],
-  { value: 80, name: '2025' },
+  },
-];
+  query: {
+    type: String,
+    default: '',
+  },
+});
+
 const state = reactive({
   option: {
     color: ['#35D0C0'],
@@ -58,10 +63,21 @@ const state = reactive({
       // name: '',
     },
   },
-  data: dataList,
+  data: [],
 });
-const lineCharts = ref(null);
+
-const refresData = () => {
+const loadData = async (code = '') => {
+  state.loading = true;
+  // GetInputsInfo()
+  //   .then((res) => {
+  //     if (res.code === 200) {
+  //       state.data = res.data;
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     app.$message.error(err.msg);
+  //   });
+  await sleep(500);
   state.data = [
     { value: 5, name: '2020' },
     { value: 36, name: '2021' },
@@ -72,7 +88,29 @@ const refresData = () => {
   ];
 };
 
-defineExpose({
+watch(
-  refresData,
+  () => props.data,
-});
+  (val) => {
+    if (!isEmpty(val)) {
+      state.data = val;
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+watch(
+  () => props.query,
+  (val) => {
+    if (!isEmpty(val)) {
+      loadData(val);
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
 </script>

src/views/land/components/landTwo.vue

@@ -1,29 +1,25 @@
 <template>
   <div class="rank">
-    <custom-rank-List :chart-config="options" />
+    <custom-rank-List :chart-config="state" />
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { reactive, watch } from 'vue';
-const options = ref({
+import { isEmpty } from '@/utils';
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const state = reactive({
   attr: { w: '100%', h: 240 },
   option: {
     // 数据
-    dataset: [
+    dataset: [],
-      { name: '耿马镇', value: 87.84 },
-      { name: '勐撒镇', value: 60.7 },
-      { name: '勐永镇', value: 85.84 },
-      { name: '孟定镇', value: 63.25 },
-      { name: '勐简乡', value: 79.45 },
-      { name: '贺派乡', value: 66.22 },
-      { name: '四排山乡', value: 58.34 },
-      { name: '芒洪乡', value: 68.12 },
-      { name: '大兴乡', value: 66.34 },
-      { name: '信阳', value: 55.75 },
-      { name: '新乡', value: 53.32 },
-      { name: '大同', value: 51.11 },
-    ],
     type: 'column',
     rowNum: 6,
     isAnimation: true,
@@ -44,6 +40,19 @@ const options = ref({
     },
   },
 });
+
+watch(
+  () => props.data,
+  (val) => {
+    if (!isEmpty(val)) {
+      state.option.dataset = val;
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
 </script>
 <style scoped lang="scss">
 .rank {

src/views/land/components/landareaCharts.vue

@@ -1,118 +0,0 @@
-<template>
-  <div class="land-area-charts">
-    <custom-echart-line-line :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
-  </div>
-</template>
-<script setup>
-import { ref, reactive, onMounted } from 'vue';
-
-const chartsData = reactive({
-  option: {
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true,
-    },
-    // color: ['#3685fe', '#41b879', '#fed500'],
-    title: {
-      text: ' ',
-      textStyle: {
-        color: '#333',
-      },
-    },
-    legend: {
-      right: '0', // 距离左侧10%的位置
-      top: '0', // 垂直居中
-      itemWidth: 15, // 图例标记的宽度
-      itemHeight: 8, // 图例标记的高度
-      textStyle: {
-        fontSize: 10, // 图例文字的字体大小
-        color: '#fff', // 图例文字的颜色
-      },
-      data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
-    },
-    xAxis: {
-      type: 'category',
-      name: ' ',
-      data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
-    },
-    yAxis: {
-      type: 'value',
-      name: '',
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#BAE7FF',
-          width: 1,
-          type: 'solid',
-        },
-      },
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(186, 231, 255, 0.2)',
-          type: 'dashed',
-        },
-      },
-      axisLabel: {
-        show: true,
-        textStyle: {
-          color: 'white',
-        },
-      },
-    },
-    series: [
-      {
-        name: '耿马镇',
-        type: 'line',
-        data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
-      },
-      {
-        name: '勐撒镇',
-        type: 'line',
-        data: [485, 182, 353, 265, 290, 354, 215, 200, 158],
-      },
-      {
-        name: '勐永镇',
-        type: 'line',
-        data: [120, 516, 238, 453, 368, 519, 432, 128, 578],
-      },
-      {
-        name: '孟定镇',
-        type: 'line',
-        data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
-      },
-      {
-        name: '勐简乡',
-        type: 'line',
-        data: [485, 182, 353, 265, 290, 354, 215, 200, 158],
-      },
-      {
-        name: '贺派乡',
-        type: 'line',
-        data: [386, 182, 191, 332, 290, 330, 690, 510, 563],
-      },
-      {
-        name: '四排山乡',
-        type: 'line',
-        data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
-      },
-      {
-        name: '芒洪乡',
-        type: 'line',
-        data: [543, 182, 191, 106, 290, 330, 310, 510, 762],
-      },
-      {
-        name: '大兴乡',
-        type: 'line',
-        data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
-      },
-    ],
-  },
-});
-</script>
-<style lang="scss" scoped>
-.land-area-charts {
-  height: 100%;
-}
-</style>

src/views/land/components/landuseCharts.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="land-use-charts">
-    <custom-echart-pictorial-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
-  </div>
-</template>
-<script setup>
-import { ref, reactive, onMounted } from 'vue';
-let seriesData = reactive([
-  { value: 205.6 },
-  { value: 308.7 },
-  { value: 359.6 },
-  { value: 452.6 },
-  { value: 388.9 },
-  { value: 508.7 },
-  { value: 369.5 },
-  { value: 610.8 },
-  { value: 754.3 },
-]);
-
-const chartsData = reactive({
-  option: {
-    color: ['#3685fe', '#41b879', '#ffd500'],
-    title: {
-      text: ' ',
-      textStyle: {
-        color: '#333',
-      },
-    },
-    tooltip: {
-      trigger: 'axis',
-    },
-    xAxis: {
-      type: 'category',
-      name: '  ',
-      //   data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
-      axisLine: {
-        show: false,
-        lineStyle: {
-          color: '#BAE7FF',
-          width: 1,
-          type: 'solid',
-        },
-      },
-    },
-    yAxis: {
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#BAE7FF',
-          width: 1,
-          type: 'solid',
-        },
-      },
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(186, 231, 255, 0.2)',
-          type: 'dashed',
-        },
-      },
-      axisLabel: {
-        show: true,
-        textStyle: {
-          color: 'white',
-        },
-      },
-    },
-    series: [
-      {
-        type: 'pictorialBar',
-        barCategoryGap: '40%',
-        barWidth: '100%',
-        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
-        data: seriesData,
-        labelLine: { show: true },
-        z: 10,
-        itemStyle: {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#000001', // 起始颜色
-              },
-              {
-                offset: 1,
-                color: '#0175b6', // 结束颜色
-              },
-            ],
-            global: false, // 默认为 false
-          },
-        },
-        label: {
-          show: false,
-          position: 'top',
-          formatter: '{c}',
-          color: 'white',
-          fontSize: 14,
-        },
-      },
-    ],
-  },
-  valData: seriesData,
-});
-</script>
-<style lang="scss" scoped>
-.land-use-charts {
-  height: 90%;
-}
-</style>

src/views/land/index.vue

@@ -4,14 +4,14 @@
       <div class="left-charts-item">
         <customBack top-title="耕地面积统计" :top-postion="'left'">
           <template #back>
-            <distributionCharts></distributionCharts>
+            <landOne :data="state.data.one" />
           </template>
         </customBack>
       </div>
       <div class="left-charts-item">
         <customBack top-title="农村土地资源" :top-postion="'left'">
           <template #back>
-            <landCirculation></landCirculation>
+            <landTwo :data="state.data.two" />
           </template>
         </customBack>
       </div>
@@ -35,36 +35,36 @@
             { label: '大兴乡', value: '40159' },
           ]"
           :is-down="true"
-          @command="landPatrolCommand"
+          @command="handleCommand"
         >
           <template #back>
-            <landPatrol ref="landPatrolRef"></landPatrol>
+            <landThere :data="state.data.there" :query="state.queryCode" />
           </template>
         </customBack>
       </div>
     </el-col>
     <el-col :span="12">
-      <landMap></landMap>
+      <landMap />
     </el-col>
     <el-col :span="6" class="right-charts">
       <div class="right-charts-item">
         <customBack top-title="全县耕地面积" :top-postion="'right'">
           <template #back>
-            <LandAera />
+            <landFour :data="state.data.four" />
           </template>
         </customBack>
       </div>
       <div class="right-charts-item">
         <customBack top-title="年度农用地规划面积" :top-postion="'right'">
           <template #back>
-            <landPlan></landPlan>
+            <landFive :data="state.data.five" />
           </template>
         </customBack>
       </div>
       <div class="right-charts-item">
         <customBack top-title="各地农用地利用面积" :top-postion="'right'">
           <template #back>
-            <cake />
+            <landSix :data="state.data.six" />
           </template>
         </customBack>
       </div>
@@ -72,24 +72,132 @@
   </el-row>
 </template>
 <script setup>
-import centerMap from '@/components/centerMap.vue';
+import { nextTick, reactive } from 'vue';
-import distributionCharts from './components/distributionCharts.vue';
-import landuseCharts from './components/landuseCharts.vue';
-import landareaCharts from './components/landareaCharts.vue';
-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 cake from './components/cake.vue';
 import landMap from './components/landMap.vue';
-import { nextTick, ref } from 'vue';
+import landOne from './components/landOne.vue';
+import landTwo from './components/landTwo.vue';
+import landThere from './components/landThere.vue';
+import landFour from './components/landFour.vue';
+import landFive from './components/landFive.vue';
+import landSix from './components/landSix.vue';
+import { useApp } from '@/hooks';
+import { sleep } from '@/utils';
+import { GetLandInfo } from '@/apis/land';
 
-const landPatrolRef = ref(null);
+const state = reactive({
-const landPatrolCommand = (data) => {
+  loading: false,
-  console.info('landPatrolCommand', data);
+  data: {},
-  nextTick(() => {
+  queryCode: '',
-    landPatrolRef.value && landPatrolRef.value.refresData();
+});
-  });
+
+// 加载
+const loadData = async () => {
+  state.loading = true;
+  // GetInputsInfo()
+  //   .then((res) => {
+  //     if (res.code === 200) {
+  //       state.data = res.data;
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     app.$message.error(err.msg);
+  //   });
+  await sleep(500);
+  state.data = {
+    one: [
+      { value: 20, name: '耿马镇' },
+      { value: 15, name: '勐撒镇' },
+      { value: 12, name: '勐永镇' },
+      { value: 16, name: '孟定镇' },
+      { value: 8, name: '勐简乡' },
+      { value: 12, name: '贺派乡' },
+      { value: 10, name: '四排山乡' },
+      { value: 9, name: '芒洪乡' },
+      { value: 8, name: '大兴乡' },
+    ],
+    two: [
+      { name: '耿马镇', value: 87.84 },
+      { name: '勐撒镇', value: 60.7 },
+      { name: '勐永镇', value: 85.84 },
+      { name: '孟定镇', value: 63.25 },
+      { name: '勐简乡', value: 79.45 },
+      { name: '贺派乡', value: 66.22 },
+      { name: '四排山乡', value: 58.34 },
+      { name: '芒洪乡', value: 68.12 },
+      { name: '大兴乡', value: 66.34 },
+      { name: '信阳', value: 55.75 },
+      { name: '新乡', value: 53.32 },
+      { name: '大同', value: 51.11 },
+    ],
+    there: [
+      { value: 10, name: '2020' },
+      { value: 66, name: '2021' },
+      { value: 100, name: '2022' },
+      { value: 120, name: '2023' },
+      { value: 150, name: '2024' },
+      { value: 80, name: '2025' },
+    ],
+    four: [
+      { value: 58.9, label: '灌溉水田' },
+      { value: 56.1, label: '基地地' },
+      { value: 60.8, label: '望天田' },
+      { value: 60.6, label: '水浇地' },
+      { value: 32.6, label: '林地' },
+      { value: 25.8, label: '育苗地' },
+      { value: 56.0, label: '果园' },
+      { value: 52.4, label: '草地' },
+      { value: 6.3, label: '观测用地' },
+      { value: 6.1, label: '监测用地' },
+    ],
+    five: [
+      { value: 20, name: '耿马镇' },
+      { value: 15, name: '勐撒镇' },
+      { value: 12, name: '勐永镇' },
+      { value: 16, name: '孟定镇' },
+      { value: 8, name: '勐简乡' },
+      { value: 12, name: '贺派乡' },
+      { value: 10, name: '四排山乡' },
+      { value: 9, name: '芒洪乡' },
+      { value: 8, name: '大兴乡' },
+    ],
+    six: [
+      {
+        name: '小麦',
+        value: 60.8,
+      },
+      {
+        name: '荞麦',
+        value: 44.4,
+      },
+      {
+        name: '贡菜',
+        value: 24.3,
+      },
+      {
+        name: '油菜',
+        value: 32.7,
+      },
+      {
+        name: '马铃薯',
+        value: 32.9,
+      },
+      {
+        name: '玉米',
+        value: 32.1,
+      },
+    ],
+  };
+  state.loading = false;
+};
+
+loadData();
+
+const handleCommand = (data) => {
+  state.queryCode = data.value;
+  // console.info('data=', data);
+  // nextTick(() => {
+  //   fiveRef.value && fiveRef.value.refresData();
+  // });
 };
 </script>
 <style lang="scss" scoped>