From 2e08c6be4c68de1747cccb7a6811e8b065cc71c8 Mon Sep 17 00:00:00 2001
From: TS-QD1 <tskj_pc1@163.com>
Date: Thu, 1 Feb 2024 16:15:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=90=8D=E5=AD=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/echarts/Bar3d.vue      | 25 ++++++++++++++-
 src/components/echarts/BarFake3d1.vue |  2 +-
 src/module/ModuleLeft2.vue            |  2 +-
 src/module/ModuleLeft3.vue            | 46 +++++++++++++++++++--------
 src/module/ModuleRight1.vue           |  4 ++-
 5 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/src/components/echarts/Bar3d.vue b/src/components/echarts/Bar3d.vue
index 99d7980..15a0393 100644
--- a/src/components/echarts/Bar3d.vue
+++ b/src/components/echarts/Bar3d.vue
@@ -1,6 +1,11 @@
 <template>
-    <div class="bar">
+    <div class="bar-3d">
         <div :id="domId" :style="{ width: w, height: h }"></div>
+        <div class="percent">
+            <ul>
+                <li v-for="item in pData" :key="item">{{ item }}</li>
+            </ul>
+        </div>
     </div>
 </template>
 
@@ -26,6 +31,10 @@ const props = defineProps({
         type: Array,
         default: []
     },
+    pData: {
+        type: Array,
+        default: []
+    },
     data: {
         type: Array,
         default: []
@@ -142,4 +151,18 @@ onMounted(() => {
 </script>
 
 <style lang="stylus" scoped>
+
+.bar-3d
+    position relative
+    .percent
+        font-size 12px
+        ul
+            position absolute
+            list-style none
+            padding 0
+            left 0
+            bottom 0
+            li
+                max-width 200px
+
 </style>
\ No newline at end of file
diff --git a/src/components/echarts/BarFake3d1.vue b/src/components/echarts/BarFake3d1.vue
index ddd6ca9..f16e0cd 100644
--- a/src/components/echarts/BarFake3d1.vue
+++ b/src/components/echarts/BarFake3d1.vue
@@ -244,7 +244,7 @@ onMounted(() => {
             top 0
             right 0
             li
-                width 100px
+                max-width 200px
                 text-align end
 
 </style>
\ No newline at end of file
diff --git a/src/module/ModuleLeft2.vue b/src/module/ModuleLeft2.vue
index 6c2b674..b6463f6 100644
--- a/src/module/ModuleLeft2.vue
+++ b/src/module/ModuleLeft2.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="module">
-        <ModuleCard1 title="信访管理类人员">
+        <ModuleCard1 title="特殊人员管理">
             <PolarHalf id="polarHalf" w="500" :data="polarHalfChart.data" :unit="polarHalfChart.unit" title="" :key="keyCount" @click="onClick"/>
         </ModuleCard1>
     </div>
diff --git a/src/module/ModuleLeft3.vue b/src/module/ModuleLeft3.vue
index 8f9d039..631f1e6 100644
--- a/src/module/ModuleLeft3.vue
+++ b/src/module/ModuleLeft3.vue
@@ -1,7 +1,8 @@
 <template>
     <div class="module">
         <ModuleCard1 title="宗教信仰统计">
-            <ScrollPanel :data="scrollData" :key="keyCount" @click="onClick"/>
+            <!-- <ScrollPanel :data="scrollData" :key="keyCount" @click="onClick"/> -->
+            <BarFake3d1 id="religion" w="440" h="300" :x-data="barChart.xData" :p-data="barChart.pData" :data="barChart.data" title="" :key="keyCount" @click="onClick" />
         </ModuleCard1>
     </div>
 </template>
@@ -10,6 +11,7 @@
 import { ref, reactive, inject, defineEmits } from 'vue';
 import ModuleCard1 from './card/ModuleCard1.vue';
 import ScrollPanel from '../components/scroll/ScrollPanel.vue';
+import BarFake3d1 from '../components/echarts/BarFake3d1.vue';
 
 const emits = defineEmits(['click']);
 
@@ -23,25 +25,43 @@ const onClick = (params) => {
 }
 
 const keyCount = ref(0)
-const scrollData = reactive([])
-
+const barChart = reactive({
+    xData: [],
+    pData: [],
+    data: []
+});
 axios.get(`app/query/sqlrelease/qaf6b78b`, {}).then(res => {
     let data = res.data;
-    let total = 0;
     data.forEach((item, index) => {
-        total += item.value;
-    });
-    data.forEach((item, index) => {
-        scrollData.push({
-            name: item.name,
-            value: item.value,
-            percent: (item.value / total * 100).toFixed(2)
-        })
+        barChart.xData.push(item.name);
+        barChart.pData.push(`${item.name}：${item.percent}%`)
+        barChart.data.push(item.value);
     })
     keyCount.value++;
 }).catch(err => {
     console.error(err);
-})
+});
+
+
+// const scrollData = reactive([])
+
+// axios.get(`app/query/sqlrelease/qaf6b78b`, {}).then(res => {
+//     let data = res.data;
+//     let total = 0;
+//     data.forEach((item, index) => {
+//         total += item.value;
+//     });
+//     data.forEach((item, index) => {
+//         scrollData.push({
+//             name: item.name,
+//             value: item.value,
+//             percent: (item.value / total * 100).toFixed(2)
+//         })
+//     })
+//     keyCount.value++;
+// }).catch(err => {
+//     console.error(err);
+// })
 
 </script>
 
diff --git a/src/module/ModuleRight1.vue b/src/module/ModuleRight1.vue
index f680289..d29aed8 100644
--- a/src/module/ModuleRight1.vue
+++ b/src/module/ModuleRight1.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="module">
         <ModuleCard2 title="年龄分布情况">
-            <Bar3d id="bar" w="400" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount" @click="onClick"/>
+            <Bar3d id="bar" w="400" h="300" :x-data="barChart.xData" :p-data="barChart.pData" :data="barChart.data" title="" :key="keyCount" @click="onClick"/>
         </ModuleCard2>
     </div>
 </template>
@@ -18,6 +18,7 @@ const keyCount = ref(0);
 
 const barChart = reactive({
     xData: [],
+    pData: [],
     data: []
 })
 
@@ -32,6 +33,7 @@ axios.get(`app/query/sqlrelease/q2c03064`, {}).then(res => {
     let data = res.data;
     data.forEach(item => {
         barChart.xData.push(item.name);
+        barChart.pData.push(`${item.name}：${item.percent}%`);
         barChart.data.push(item.value);
     })
     keyCount.value++;