增加事件

src/components/card/CardTwoCount.vue

@@ -1,14 +1,16 @@
 <template>
     <div class="container">
-        <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 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" @click="onClick('cz')"/>
-        <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"/>
+        <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" @click="onClick('ld')"/>
     </div>    
 </template>
 
 <script setup>
-import {ref, defineProps} from 'vue';
+import {ref, defineProps, defineEmits} from 'vue';
 import CardCount2 from './CardCount2.vue';
 
+const emits = defineEmits(['click']);
+
 const props = defineProps({
     data: {
         type: Object,
@@ -31,6 +33,10 @@ const props = defineProps({
     }
 })
 
+const onClick = (type) => {
+    emits('click', type);
+}
+
 </script>
 
 <style lang="stylus" scoped>

src/components/echarts/BarSpike.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { ref, defineProps, inject } from 'vue';
+import { ref, defineProps, defineEmits, inject } from 'vue';
 import { onMounted } from 'vue';
 const props = defineProps({
     id: String,
@@ -30,6 +30,7 @@ const props = defineProps({
         default: []
     }
 });
+const emits = defineEmits(['click']);
 const echarts = inject('echarts');
 const domId = ref(props.id);
 const w = ref(`${props.w}px`);
@@ -69,6 +70,13 @@ const init = () => {
             data: props.data,
         }]
     })
+    chart.on('click', (params) => {
+        emits('click', {
+            index: params.dataIndex,
+            name: props.xData[params.dataIndex],
+            value: props.data[params.dataIndex]
+        })
+    })
 }
 
 onMounted(() => {

src/components/echarts/PolarHalf.vue

@@ -3,7 +3,7 @@
         <div class="card" :style="{scale: cardScale, left: cardL, top: cardT}">
             <div :id="domId" class="chart"></div>
             <div class="info">
-                <div class="label" v-for="item in infoLabelDataArray" :key="item">
+                <div class="label" v-for="(item, index) in infoLabelDataArray" :key="item" @click="onClick(index, item.title, item.value)">
                     <span class="color" :style="{backgroundColor: item.color}">{{ item.item }}</span>
                     <span class="title">{{ item.title }}</span>
                     <span class="percent">{{ item.percent }}%</span>
@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import { ref, defineProps, inject, reactive } from 'vue';
+import { ref, defineProps, defineEmits, inject, reactive } from 'vue';
 import { onMounted } from 'vue';
 import { listColorArray } from '../../utils/utils'
 const props = defineProps({
@@ -40,6 +40,7 @@ const props = defineProps({
         default: ''
     }
 });
+const emits = defineEmits(['click']);
 const echarts = inject('echarts');
 const domId = ref(props.id);
 const cardScale = ref(props.w / 600);
@@ -50,6 +51,15 @@ const cardT = ref(`${ (props.w - 600) / 4 }px`);
 const colors = listColorArray();
 const bgColor = '#0C1B32';
 const infoLabelDataArray = reactive([]);
+
+const onClick = (index, name, value) => {
+    emits('click', {
+        index: index,
+        name: name,
+        value: value
+    });
+}
+
 const init = () => {
     // 标签
     let labelArray = [];
@@ -143,6 +153,13 @@ const init = () => {
             },
         ],
     })
+    chart.on('click', (params) => {
+        emits('click', {
+            index: params.dataIndex,
+            name: labelArray[params.dataIndex],
+            value: props.data[params.dataIndex].value
+        })
+    })
 }
 
 onMounted(() => {

src/components/scroll/ScrollPanel.vue

@@ -7,8 +7,8 @@
             <span class="item item4">占有率(%)</span>
         </div>
         <div class="scroll">
-            <vue3-seamless-scroll :list="props.data" :step="0.5">
+            <vue3-seamless-scroll :list="props.data" :step="0.5" :hover="true">
-                <div class="line" v-for="(item, index) in props.data" :key="item">
+                <div class="line" v-for="(item, index) in props.data" :key="item" @click="onClick(index, item)">
                     <span class="item item1">{{ index + 1 }}</span>
                     <span class="item item2">{{ item.name }}</span>
                     <span class="item item3">{{ item.value }}</span>
@@ -21,15 +21,23 @@
 </template>
 
 <script setup>
-import { reactive, defineProps } from 'vue';
+import { reactive, defineProps, defineEmits } from 'vue';
 import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 
+const emits = defineEmits(['click']);
+
 const props = defineProps({
     data: {
         type: Array,
         default: []
     }
 })
+
+const onClick = (index, item) => {
+    item.index = index;
+    emits('click', item);
+}
+
 </script>
 
 <style lang="stylus" scoped>
@@ -54,6 +62,7 @@ const props = defineProps({
         height 180px
         overflow hidden
         .line
+            cursor pointer
             height 30px
             line-height 30px
             padding 5px 0

src/module/ModuleBottom.vue

@@ -3,16 +3,16 @@
         <ModuleCard3 class="module-card3" title="社会保障类人员">
             <div class="module-container">
                 <div class="left">
-                    <CircleWave class="circle-container" id="lnrPercent" ref="lnrPercent" :value="personData.lnr.percent" :color="personData.lnr.color" :key="personData.lnr.keyCount"/>
+                    <CircleWave class="circle-container" id="lnrPercent" ref="lnrPercent" :value="personData.lnr.percent" :color="personData.lnr.color" :key="personData.lnr.keyCount" @click="onLnrClick"/>
-                    <CircleWave class="circle-container" id="cjrPercent" ref="cjrPercent" :value="personData.cjr.percent" :color="personData.cjr.color" :key="personData.cjr.keyCount"/>
+                    <CircleWave class="circle-container" id="cjrPercent" ref="cjrPercent" :value="personData.cjr.percent" :color="personData.cjr.color" :key="personData.cjr.keyCount" @click="onCjrClick"/>
-                    <CircleWave class="circle-container" id="tyfyPercent" ref="tyfyPercent" :value="personData.tyfy.percent" :color="personData.tyfy.color" :key="personData.tyfy.keyCount"/>
+                    <CircleWave class="circle-container" id="tyfyPercent" ref="tyfyPercent" :value="personData.tyfy.percent" :color="personData.tyfy.color" :key="personData.tyfy.keyCount" @click="onCjrClick"/>
-                    <CircleWave class="circle-container" id="shjzPercent" ref="shjzPercent" :value="personData.shjz.percent" :color="personData.shjz.color" :key="personData.shjz.keyCount"/>
+                    <CircleWave class="circle-container" id="shjzPercent" ref="shjzPercent" :value="personData.shjz.percent" :color="personData.shjz.color" :key="personData.shjz.keyCount" @click="onShjzClick"/>
                 </div>
                 <div class="right">
-                    <Process class="process" title="老年人" :icon-type="1" :value="personData.lnr.value" :process="personData.lnr.process" :color="personData.lnr.color" :bg-color="personData.lnr.bgColor" :key="personData.lnr.keyCount" />
+                    <Process class="process" title="老年人" :icon-type="1" :value="personData.lnr.value" :process="personData.lnr.process" :color="personData.lnr.color" :bg-color="personData.lnr.bgColor" :key="personData.lnr.keyCount"  @click="onLnrClick"/>
-                    <Process class="process" title="残疾人保障" :icon-type="2" :value="personData.cjr.value" :process="personData.cjr.process" :color="personData.cjr.color" :bg-color="personData.cjr.bgColor" :key="personData.cjr.keyCount" />
+                    <Process class="process" title="残疾人保障" :icon-type="2" :value="personData.cjr.value" :process="personData.cjr.process" :color="personData.cjr.color" :bg-color="personData.cjr.bgColor" :key="personData.cjr.keyCount" @click="onCjrClick"/>
-                    <Process class="process" title="退役/服役情况" :icon-type="3" :value="personData.tyfy.value" :process="personData.tyfy.process" :color="personData.tyfy.color" :bg-color="personData.tyfy.bgColor" :key="personData.tyfy.keyCount" />
+                    <Process class="process" title="退役/服役情况" :icon-type="3" :value="personData.tyfy.value" :process="personData.tyfy.process" :color="personData.tyfy.color" :bg-color="personData.tyfy.bgColor" :key="personData.tyfy.keyCount" @click="onCjrClick"/>
-                    <Process class="process" title="社会救助信息" :icon-type="4" :value="personData.shjz.value" :process="personData.shjz.process" :color="personData.shjz.color" :bg-color="personData.shjz.bgColor" :key="personData.shjz.keyCount" />
+                    <Process class="process" title="社会救助信息" :icon-type="4" :value="personData.shjz.value" :process="personData.shjz.process" :color="personData.shjz.color" :bg-color="personData.shjz.bgColor" :key="personData.shjz.keyCount" @click="onShjzClick"/>
                 </div>
             </div>
         </ModuleCard3>
@@ -59,6 +59,22 @@ const personData = reactive({
 
 const axios = inject('axios');
 
+const onLnrClick = () => {
+    console.log('lnr')
+}
+
+const onCjrClick = () => {
+    console.log('cjr')
+}
+
+const onTyfyClick = () => {
+    console.log('tyfy')
+}
+
+const onShjzClick = () => {
+    console.log('shjz')
+}
+
 onMounted(() => {
     axios.get(`app/query/sqlrelease/q2972694`, {}).then(res => {
         let data = res.data;
@@ -97,6 +113,7 @@ onMounted(() => {
                 background-size 100%
                 position relative
                 .circle-container
+                    cursor pointer
                     transform scale(0.4)
                     background-image  url(/assets/imgs/circle-bg.png)
                     background-size 128% 100%
@@ -121,5 +138,6 @@ onMounted(() => {
                 width 250px
                 height 200px
                 .process
+                    cursor pointer
                     margin-top 6px
 </style>

src/module/ModuleCenter.vue

@@ -1,13 +1,13 @@
 <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="xtlCount" class="item" :type="1" title="稀土路街道" unit="人" :value="xtlCount" :key="keyCount.xtl" @click="onXtlCLick"/>
-        <CardCount1 id="mxlCount" class="item" :type="1" title="民馨路街道" unit="人" :value="mxlCount" :key="keyCount.mxl"/>
+        <CardCount1 id="mxlCount" class="item" :type="1" title="民馨路街道" unit="人" :value="mxlCount" :key="keyCount.mxl" @click="onMxlCLick"/>
-        <CardCount1 id="wsqCount" class="item" :type="1" title="万水泉镇" unit="人" :value="wsqCount" :key="keyCount.wsq"/>
+        <CardCount1 id="wsqCount" class="item" :type="1" title="万水泉镇" unit="人" :value="wsqCount" :key="keyCount.wsq" @click="onWsqCLick"/>
-        <CardCount1 id="totalCount" class="item" :type="2" title="总人口数" unit="人" :value="totalCount" :key="keyCount.total"/>
+        <CardCount1 id="totalCount" class="item" :type="2" title="总人口数" unit="人" :value="totalCount" :key="keyCount.total" @click="onTotalCLick"/>
-        <PersonPercent id="manPercent" class="item" :value="manCount"/>
+        <PersonPercent id="manPercent" class="item" :value="manCount" @click="onManClick"/>
-        <PersonPercent id="womenPercent" class="item" type="women" :value="womenCount"/>
+        <PersonPercent id="womenPercent" class="item" type="women" :value="womenCount" @click="onWomenClick"/>
-        <CardTwoCount id="cardTwoCount" class="item" :data="populstionTypeData" />
+        <CardTwoCount id="cardTwoCount" class="item" :data="populstionTypeData" @click="onTwoCardCLick"/>
         <img id="xtlIcon" class="stree-icon" :src="icons.xtl">
         <img id="mxlIcon" class="stree-icon" :src="icons.mxl">
         <img id="wsqIcon" class="stree-icon" :src="icons.wsq">
@@ -40,6 +40,34 @@ const mxlCount = ref(0);
 const wsqCount = ref(0);
 const totalCount = ref(0);
 
+const onXtlCLick = () => {
+    console.log('xtl')
+}
+
+const onMxlCLick = () => {
+    console.log('mxl')
+}
+
+const onWsqCLick = () => {
+    console.log('wsq')
+}
+
+const onTotalCLick = () => {
+    console.log('total')
+}
+
+const onManClick = () => {
+    console.log('man')
+}
+
+const onWomenClick = () => {
+    console.log('women')
+}
+
+const onTwoCardCLick = (type) => {
+    console.log('twoCard', type)
+}
+
 // 人口
 axios.get(`app/query/sqlrelease/q3cd32d5`, {}).then(res => {
     let data = res.data;

src/module/ModuleLeft1.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="module">
         <ModuleCard1 title="民族分布统计">
-            <BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount"/>
+            <BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount" @click="onClick"/>
         </ModuleCard1>
     </div>
 </template>
@@ -11,6 +11,10 @@ import { ref, reactive, inject } from 'vue';
 import ModuleCard1 from './card/ModuleCard1.vue';
 import BarSpike from '../components/echarts/BarSpike.vue';
 
+const onClick = (prams) => {
+    console.log(prams);
+}
+
 const axios = inject('axios');
 
 const keyCount = ref(0);

src/module/ModuleLeft2.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="module">
         <ModuleCard1 title="信访管理类人员">
-            <PolarHalf id="polarHalf" w="500" :data="polarHalfChart.data" :unit="polarHalfChart.unit" title="" :key="keyCount"/>
+            <PolarHalf id="polarHalf" w="500" :data="polarHalfChart.data" :unit="polarHalfChart.unit" title="" :key="keyCount" @click="onClick"/>
         </ModuleCard1>
     </div>
 </template>
@@ -12,6 +12,11 @@ import ModuleCard1 from './card/ModuleCard1.vue';
 import PolarHalf from '../components/echarts/PolarHalf.vue';
 
 const axios = inject('axios');
+
+const onClick = (params) => {
+    console.log(params);
+}
+
 const keyCount = ref(0);
 
 const polarHalfChart = reactive({

src/module/ModuleLeft3.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="module">
         <ModuleCard1 title="宗教信仰统计">
-            <ScrollPanel :data="scrollData" :key="keyCount"/>
+            <ScrollPanel :data="scrollData" :key="keyCount" @click="onClick"/>
         </ModuleCard1>
     </div>
 </template>
@@ -12,6 +12,11 @@ import ModuleCard1 from './card/ModuleCard1.vue';
 import ScrollPanel from '../components/scroll/ScrollPanel.vue';
 
 const axios = inject('axios');
+
+const onClick = (params) => {
+    console.log(params)
+}
+
 const keyCount = ref(0)
 const scrollData = reactive([])