政务大屏产出品管理 大屏修改优化

new-digital-agriculture-screen/src/views/entities/components/categoryCharts.vue

@@ -14,16 +14,16 @@ const data = ref([
     value: 10.8,
     itemStyle: { color: '#5b7bc7', opacity: 0.8 },
   },
-  {
+  // {
-    name: ' 合作社',
+  //   name: ' 合作社',
-    value: 18.4,
+  //   value: 18.4,
-    itemStyle: { color: '#8ed0f3', opacity: 0.8 },
+  //   itemStyle: { color: '#8ed0f3', opacity: 0.8 },
-  },
+  // },
-  {
+  // {
-    name: ' 村集体',
+  //   name: ' 村集体',
-    value: 14.3,
+  //   value: 14.3,
-    itemStyle: { color: '#65be97', opacity: 0.8 },
+  //   itemStyle: { color: '#65be97', opacity: 0.8 },
-  },
+  // },
   {
     name: ' 个体',
     value: 23.7,

new-digital-agriculture-screen/src/views/entities/components/entitiesMap.vue

@@ -23,7 +23,7 @@ import { ref, reactive } from 'vue';
 
 const unit = ref('家');
 const list = reactive([
-  { title: '年总产值', value: 3.49, color: '#01FEFD', unit: '亿元' },
+  { title: '年总产值', value: 3.49, color: '#01FEFD', unit: '万元' },
   { title: '年人均收入', value: 6.98, color: '#FEF906', unit: '万元' },
 ]);
 

new-digital-agriculture-screen/src/views/entities/components/entitiesStatistics.vue

@@ -38,7 +38,6 @@ const state = reactive({
       backgroundColor: 'rgba(0,0,0,0.5)',
       borderColor: '#35d0c0',
       formatter: (data) => {
-        console.log('data', data);
         const params = data[0];
         let str = `<div class="custom-echarts-tips">
           <span>${params.name}</span><br/>

new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue

@@ -0,0 +1,153 @@
+<template>
+  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
+</template>
+<script setup>
+import { reactive, watch } from 'vue';
+import { isEmpty } from '@/utils';
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  query: {
+    type: String,
+    default: '',
+  },
+});
+
+const state = reactive({
+  data: [],
+  option: {
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '5%',
+      top: '10%',
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      backgroundColor: 'rgba(0,0,0,0.6);',
+      borderColor: '#35d0c0',
+      borderRadius: 8,
+      formatter: (data) => {
+        const params = data[0];
+        let str = `<div class="custom-echarts-tips" >
+          <span>${params.name}</span><br/>
+          <span>${params.marker} ${params.data} 万元</span>
+        </div>`;
+        return str;
+      },
+      extraCssText: 'backdrop-filter: blur(8px);',
+    },
+    barStyle: {
+      barWidth: 10,
+      itemStyle: {
+        borderWidth: 10,
+        borderRadius: [8, 8, 8, 8], // 设置柱子的圆角半径
+      },
+      color: {
+        type: 'linear',
+        x: 1,
+        y: 0,
+        x2: 0,
+        y2: 0,
+        colorStops: [
+          { offset: 0, color: '#35D0C0' },
+          { offset: 1, color: 'rgba(53,208,192,0)' },
+        ],
+        global: false,
+      },
+    },
+    xAxis: {
+      type: 'value',
+      splitLine: {
+        show: false,
+        lineStyle: {
+          type: 'dashed',
+          color: '#E5E5E5',
+        },
+      },
+      axisLabel: {
+        show: false,
+        textStyle: {
+          color: '#424242',
+        },
+      },
+      show: false,
+      axisLine: {
+        show: true,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'category',
+      data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+    },
+    series: [
+      {
+        type: 'bar',
+        // barWidth: '40%', // 设置柱的宽度
+        // barMinHeight: 2, // 设置柱的最小高度
+        // barGap: '20%', // 设置柱之间的间隙
+      },
+    ],
+  },
+});
+
+watch(
+  () => 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,
+  }
+);
+const loadData = (val) => {
+  if (val === 'all') {
+    state.data = props.data;
+    state.option.yAxis.data = ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'];
+  } else {
+    for (let i in props.data) {
+      if (val === props.data[i].name) {
+        state.data = [];
+        state.data.push(props.data[i]);
+        state.option.yAxis.data = [props.data[i].name];
+      }
+    }
+  }
+  console.log(val);
+};
+</script>

new-digital-agriculture-screen/src/views/entities/index.vue

@@ -10,21 +10,19 @@
           :value-field="'value'"
           :down-width="''"
           :options="[
-            { label: '全县', value: '530926' },
+            { label: '全县', value: 'all' },
-            { label: '耿马镇', value: '42611' },
+            { label: '耿马镇', value: '耿马镇' },
-            { label: '勐撒镇', value: '9259' },
+            { label: '勐撒镇', value: '勐撒镇' },
-            { label: '勐永镇', value: '17787' },
+            { label: '勐永镇', value: '勐永镇' },
-            { label: '孟定镇', value: '42610' },
+            { label: '孟定镇', value: '孟定镇' },
-            { label: '勐简乡', value: '17788' },
+            { label: '大兴乡', value: '大兴乡' },
-            { label: '贺派乡', value: '40161' },
-            { label: '四排山乡', value: '40163' },
-            { label: '大兴乡', value: '40159' },
           ]"
           :is-down="true"
           @command="handleCommand"
         >
           <template #back>
-            <entitiesCategoryCharts ref="oneRef" :data="state.data.one" :query="state.queryCode"></entitiesCategoryCharts>
+            <value-charts :data="state.data.one" :query="state.queryCode"></value-charts>
+            <!--            <entitiesCategoryCharts ref="oneRef" :data="state.data.one" :query="state.queryCode"></entitiesCategoryCharts>-->
           </template>
         </customBack>
       </div>
@@ -98,6 +96,7 @@ import entitiesStatistics from './components/entitiesStatistics.vue';
 import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
 import entitiesMap from './components/entitiesMap.vue';
 import { sleep } from '@/utils';
+import ValueCharts from '@/views/entities/components/valueCharts.vue';
 
 const oneRef = ref(null);
 const thirdRef = ref(null);
@@ -113,12 +112,11 @@ const loadData = async () => {
   await sleep(500);
   state.data = {
     one: [
-      { value: 5, name: '2020' },
+      { value: 3500, name: '耿马镇' },
-      { value: 36, name: '2021' },
+      { value: 6000, name: '勐撒镇' },
-      { value: 70, name: '2022' },
+      { value: 4000, name: '勐永镇' },
-      { value: 56, name: '2023' },
+      { value: 8000, name: '孟定镇' },
-      { value: 70, name: '2024' },
+      { value: 12000, name: '大兴乡' },
-      { value: 20, name: '2025' },
     ],
     third: [
       { value: 98, value1: 88, name: '耿马镇' },