调整中心背景图片和布局，增加部分事件

src/components/card/CardCount1.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container" :style="{backgroundImage: `url(${bg})`}">
+    <div class="container" :style="{backgroundImage: `url(${bg})`, color: props.type === 2 ? 'black': 'white'}">
         <div class="top">{{ props.title }}</div>
         <div class="bottom">
             <div class="left">{{ props.value }}</div>
@@ -30,13 +30,9 @@ const props = defineProps({
     }
 });
 
-const bg = ref('assets/imgs/card/bg1.png');
+const bg = ref('assets/imgs/card/bg10.png');
 if(props.type === 2) {
-    bg.value = 'assets/imgs/card/bg2.png';
-} else if(props.type === 3) {
-    bg.value = 'assets/imgs/card/bg3.png';
-} else if(props.type === 4) {
-    bg.value = 'assets/imgs/card/bg4.png';
+    bg.value = 'assets/imgs/card/bg11.png';
 }
 </script>
 
@@ -51,6 +47,7 @@ if(props.type === 2) {
     background-repeat no-repeat
     background-size 100% 100%
     color #FFFFFF
+    font-weight bold
     .top
         font-size 14px
         font-weight bold

src/components/card/CardTwoCount.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="container">
-        <CardCount2 class="left" :title="props.data.count1.title" :unit="props.data.count1.unit" :value="props.data.count1.value" :percent="props.data.count1.percent" :color="props.data.count1.color"/>
-        <CardCount2 class="right" :title="props.data.count2.title" :unit="props.data.count2.unit" :value="props.data.count2.value" :percent="props.data.count2.percent" :color="props.data.count2.color"/>
+        <CardCount2 class="card-count2 left" :title="props.data.count1.title" :unit="props.data.count1.unit" :value="props.data.count1.value" :percent="props.data.count1.percent" :color="props.data.count1.color"/>
+        <CardCount2 class="card-count2 right" :title="props.data.count2.title" :unit="props.data.count2.unit" :value="props.data.count2.value" :percent="props.data.count2.percent" :color="props.data.count2.color"/>
     </div>    
 </template>
 
@@ -37,10 +37,11 @@ const props = defineProps({
 .container
     width 360px
     height 180px
-    background-image url(/assets/imgs/card/bg8.png)
-    background-size 100% 100%
-    background-repeat no-repeat
     position relative
+    .card-count2
+        background-image url(/assets/imgs/card/bg12.png)
+        background-size 100% 100%
+        background-repeat no-repeat
     .left
         width 120px
         position absolute
@@ -50,5 +51,5 @@ const props = defineProps({
         width 120px
         position absolute
         top 6px
-        right 44px
+        right 50px
 </style>

src/components/echarts/Bar3d.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="bar">
+        <div :id="domId" :style="{ width: w, height: h }"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, inject } from 'vue';
+import { onMounted } from 'vue';
+import 'echarts-gl';
+const props = defineProps({
+    id: String,
+    w: {
+        type: Number,
+        default: 200
+    },
+    h: {
+        type: Number,
+        default: 200
+    },
+    title: {
+        type: String,
+        default: '柱状图'
+    },
+    xData: {
+        type: Array,
+        default: []
+    },
+    data: {
+        type: Array,
+        default: []
+    }
+});
+const emits = defineEmits(['click']);
+const echarts = inject('echarts');
+const domId = ref(props.id);
+const w = ref(`${props.w}px`);
+const h = ref(`${props.h}px`);
+
+const init = () => {
+    var chart = echarts.init(document.getElementById(domId.value));
+    var data = [];
+    props.data.forEach((item, index) => {
+        data.push([index, 0, item])
+    })
+    chart.setOption({
+        title: {
+            text: props.title
+        },
+        legend: {
+            show: true,
+            type: 'scroll',
+            orient: 'vertical',
+            right: 60,
+            top: 20,
+            bottom: 20,
+            textStyle: {
+                color: '#FFF'
+            },
+        },
+        xAxis3D: {
+            type: 'category',
+            data: props.xData,
+            name: '年龄段',
+            nameGap: 30,
+            axisLine: {
+                lineStyle: {
+                    color: '#FFF'
+                }
+            },
+        },
+        yAxis3D: {
+            type: 'category',
+            data: ['年龄段'],
+            name: null,
+            axisLine: {
+                lineStyle: {
+                    color: '#FFF'
+                }
+            },
+        },
+        zAxis3D: {
+            type: 'value',
+            name: '人数',
+            nameGap: 30,
+            axisLine: {
+                lineStyle: {
+                    color: '#FFF'
+                }
+            },
+        },
+        grid3D: {
+            boxWidth: 200,
+            boxDepth: 40,
+            viewControl: {
+                // projection: 'orthographic'
+            },
+            light: {
+                main: {
+                    intensity: 1.0,
+                    shadow: true
+                },
+                ambient: {
+                    intensity: 0.3
+                }
+            }
+        },
+        series: [
+            {
+                type: 'bar3D',
+                data: data,
+                shading: 'lambert',
+                label: {
+                    fontSize: 16,
+                    borderWidth: 1
+                },
+                emphasis: {
+                    label: {
+                        fontSize: 20,
+                        color: '#FFFFFF'
+                    },
+                    itemStyle: {
+                        color: '#FFFFFF'
+                    }
+                }
+            }
+        ]
+    });
+    chart.on('click', (params) => {
+        emits('click', {
+            index: params.dataIndex,
+            name: props.xData[params.dataIndex],
+            value: props.data[params.dataIndex]
+        })
+    })
+}
+
+onMounted(() => {
+    init();
+});
+
+</script>
+
+<style lang="stylus" scoped>
+</style>

src/components/echarts/Pie3d.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, inject } from 'vue';
+import { ref, reactive, inject, defineProps, defineEmits } from 'vue';
 import { onMounted } from 'vue';
 import 'echarts-gl';
 
@@ -21,17 +21,14 @@ const props = defineProps({
     },
     title: {
         type: String,
-        default: '柱状图'
-    },
-    xData: {
-        type: Array,
-        default: []
+        default: '饼状图'
     },
     data: {
         type: Array,
         default: []
     }
 });
+const emits = defineEmits(['click']);
 const echarts = inject('echarts');
 const domId = ref(props.id);
 const w = ref(`${props.w}px`);
@@ -285,7 +282,14 @@ const init = () => {
     });
     let option = getPie3D(paramsList);
     var chart = echarts.init(document.getElementById(domId.value));
-    chart.setOption(option)
+    chart.setOption(option);
+    chart.on('click', (params) => {
+        emits('click', {
+            index: params.seriesIndex,
+            name: props.data[params.seriesIndex].name,
+            value: props.data[params.seriesIndex].value
+        })
+    })
 }
 
 onMounted(() => {

src/module/ModuleCenter.vue

@@ -1,8 +1,9 @@
 <template>
     <div class="module-center">
+        <div class="map"></div>
         <CardCount1 id="xtlCount" class="item" :type="1" title="稀土路街道" unit="人" :value="xtlCount" :key="keyCount.xtl"/>
-        <CardCount1 id="mxlCount" class="item" :type="3" title="民馨路街道" unit="人" :value="mxlCount" :key="keyCount.mxl"/>
-        <CardCount1 id="wsqCount" class="item" :type="4" title="万水泉镇" unit="人" :value="wsqCount" :key="keyCount.wsq"/>
+        <CardCount1 id="mxlCount" class="item" :type="1" title="民馨路街道" unit="人" :value="mxlCount" :key="keyCount.mxl"/>
+        <CardCount1 id="wsqCount" class="item" :type="1" title="万水泉镇" unit="人" :value="wsqCount" :key="keyCount.wsq"/>
         <CardCount1 id="totalCount" class="item" :type="2" title="总人口数" unit="人" :value="totalCount" :key="keyCount.total"/>
         <PersonPercent id="manPercent" class="item" :value="manCount"/>
         <PersonPercent id="womenPercent" class="item" type="women" :value="womenCount"/>
@@ -100,11 +101,19 @@ axios.get(`app/query/sqlrelease/qdf8f806`, {}).then(res => {
 .module-center
     width 800px
     height 600px
-    background-image url(/assets/imgs/center-map-bg.png)
-    background-size 100% 400px
+    background-image url(/assets/imgs/center-map-box-bg.png)
+    background-size 800px 550px
     background-repeat no-repeat
     position relative
+    .map
+        width 785px
+        height 530px
+        background-image url(/assets/imgs/center-map-bg.png)
+        background-size 780px 462px
+        background-repeat no-repeat
+        background-position 15px 45px
     .item
+        cursor pointer
         position absolute
         top 0
         left 0
@@ -114,35 +123,34 @@ axios.get(`app/query/sqlrelease/qdf8f806`, {}).then(res => {
         left 0
         width 25px
     #totalCount
-        top 280px
-        left 300px
+        top 100px
+        left 590px
     #xtlIcon
-        top 30px
-        left 300px
+        top 180px
+        left 250px
     #xtlCount
-        top 20px
-        left 330px
+        top 155px
+        left 285px
     #mxlIcon
-        top 140px
+        top 250px
         left 60px
     #mxlCount
-        top 180px
-        left 10px
+        top 225px
+        left 90px
     #wsqIcon
-        top 220px
-        left 560px
+        top 350px
+        left 450px
     #wsqCount
-        top 220px
-        left 600px
+        top 325px
+        left 480px
     #manPercent
-        top 450px
-        left 120px
-        transform scale(1.2)
+        top 560px
+        left 40px
+        transform scale(1.3)
     #womenPercent
-        top 470px
-        left 160px
-        transform scale(0.8)
+        top 580px
+        left 120px
     #cardTwoCount
-        top 450px
-        left 380px
+        top 580px
+        left 480px
 </style>

src/module/ModuleRight1.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="module">
         <ModuleCard2 title="年龄分布情况">
-            <Bar id="bar" w="400" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount"/>
+            <Bar3d id="bar" w="400" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount" @click="onClick"/>
         </ModuleCard2>
     </div>
 </template>
@@ -9,7 +9,7 @@
 <script setup>
 import { ref, reactive, inject } from 'vue';
 import ModuleCard2 from './card/ModuleCard2.vue';
-import Bar from '../components/echarts/Bar.vue';
+import Bar3d from '../components/echarts/Bar3d.vue';
 
 const axios = inject('axios');
 const keyCount = ref(0);
@@ -19,6 +19,9 @@ const barChart = reactive({
     data: []
 })
 
+const onClick = (params) => {
+    console.log(params);
+}
 
 axios.get(`app/query/sqlrelease/q2c03064`, {}).then(res => {
     let data = res.data;

src/module/ModuleRight2.vue

@@ -6,8 +6,8 @@
                     <PersonCount1 :value="totalCount" :key="keyCount"/>
                 </div>
                 <div class="person-count2-container">
-                    <PersonCount2 class="count1" title="社区矫正" :value="sqjzCount" :key="keyCount"/>
-                    <PersonCount2 class="count2" title="刑满释放" :value="xmsfCount" :bg-type="2" :key="keyCount"/>
+                    <PersonCount2 class="count1" title="社区矫正" :value="sqjzCount" :key="keyCount" @click="onCount1Click(sqjzCount)"/>
+                    <PersonCount2 class="count2" title="刑满释放" :value="xmsfCount" :bg-type="2" :key="keyCount" @click="onCount2Click(xmsfCount)"/>
                 </div>
             </div>
         </ModuleCard2>
@@ -36,6 +36,14 @@ axios.get(`app/query/sqlrelease/qab48a3b`).then(res => {
     console.error(err);
 })
 
+const onCount1Click = (count) => {
+    console.log(count)
+}
+
+const onCount2Click = (count) => {
+    console.log(count)
+}
+
 </script>
 
 <style lang="stylus" scoped>
@@ -53,10 +61,12 @@ axios.get(`app/query/sqlrelease/qab48a3b`).then(res => {
             height 60px
             position relative
             .count1
+                cursor pointer
                 position absolute
                 top 0
                 left 0
             .count2
+                cursor pointer
                 position absolute
                 top 0
                 left 110px

src/module/ModuleRight3.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="module">
         <ModuleCard2 title="政治面貌统计">
-            <Pie3d id="pie3d" w="400" h="200" :data="pie3dData" :key="keyCount"/>
+            <Pie3d id="pie3d" w="400" h="200" :data="pie3dData" :key="keyCount" @click="onClick"/>
         </ModuleCard2>
     </div>
 </template>
@@ -15,6 +15,10 @@ const axios = inject('axios');
 const keyCount = ref(0);
 const pie3dData = reactive([]);
 
+const onClick = (params) => {
+    console.log(params)
+}
+
 axios.get(`app/query/sqlrelease/qe41cc66`, {}).then(res => {
     let data = res.data;
     data.forEach(item => {