Tenlion/bt-xtgxq-population-bigdata
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加事件

Browse Source
This commit is contained in:
TS-QD1 2023-11-25 17:18:28 +08:00
parent 173b039b77
commit 87db9114d9
9 changed files with 127 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/card/CardTwoCount.vue
View File

@ -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 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" @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" @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>

10
src/components/echarts/BarSpike.vue
View File

@ -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(() => {

21
src/components/echarts/PolarHalf.vue
View File

@ -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(() => {

15
src/components/scroll/ScrollPanel.vue
View File

@ -7,8 +7,8 @@
<span class="item item4">占有率(%)</span>
</div>
<div class="scroll">
<vue3-seamless-scroll :list="props.data" :step="0.5">
<div class="line" v-for="(item, index) in props.data" :key="item">
<vue3-seamless-scroll :list="props.data" :step="0.5" :hover="true">
<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

34
src/module/ModuleBottom.vue
View File

@ -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="cjrPercent" ref="cjrPercent" :value="personData.cjr.percent" :color="personData.cjr.color" :key="personData.cjr.keyCount"/>
<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="shjzPercent" ref="shjzPercent" :value="personData.shjz.percent" :color="personData.shjz.color" :key="personData.shjz.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" @click="onCjrClick"/>
<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" @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="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="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="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="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" @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" @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" @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>

42
src/module/ModuleCenter.vue
View File

@ -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="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"/>
<CardTwoCount id="cardTwoCount" class="item" :data="populstionTypeData" />
<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" @click="onMxlCLick"/>
<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" @click="onTotalCLick"/>
<PersonPercent id="manPercent" class="item" :value="manCount" @click="onManClick"/>
<PersonPercent id="womenPercent" class="item" type="women" :value="womenCount" @click="onWomenClick"/>
<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;

6
src/module/ModuleLeft1.vue
View File

@ -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);

7
src/module/ModuleLeft2.vue
View File

@ -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({

7
src/module/ModuleLeft3.vue
View File

@ -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([])