125 lines
5.4 KiB
Vue
125 lines
5.4 KiB
Vue
<template>
|
|
<div class="module">
|
|
<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"/>
|
|
</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" />
|
|
</div>
|
|
</div>
|
|
</ModuleCard3>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, inject } from 'vue';
|
|
import { nextTick, onMounted } from 'vue';
|
|
import ModuleCard3 from './card/ModuleCard3.vue';
|
|
import Process from '../components/process/Process.vue';
|
|
import CircleWave from '../components/circle/CircleWave.vue';
|
|
|
|
const personData = reactive({
|
|
lnr: {
|
|
value: 0,
|
|
percent: 0,
|
|
color: 'rgb(34, 149, 230)',
|
|
bgColor: 'rgb(34, 149, 230, 0.44)',
|
|
keyCount: 0,
|
|
},
|
|
cjr: {
|
|
value: 0,
|
|
percent: 0,
|
|
color: 'rgb(255, 255, 0)',
|
|
bgColor: 'rgb(255, 255, 0, 0.44)',
|
|
keyCount: 0,
|
|
},
|
|
tyfy: {
|
|
value: 0,
|
|
percent: 0,
|
|
color: 'rgb(247, 147, 30)',
|
|
bgColor: 'rgb(247, 147, 30, 0.44)',
|
|
keyCount: 0,
|
|
},
|
|
shjz: {
|
|
value: 0,
|
|
percent: 0,
|
|
color: 'rgb(0, 169, 157)',
|
|
bgColor: 'rgb(0, 169, 157, 0.44)',
|
|
keyCount: 0,
|
|
}
|
|
})
|
|
|
|
const axios = inject('axios');
|
|
|
|
onMounted(() => {
|
|
axios.get(`app/query/sqlrelease/q2972694`, {}).then(res => {
|
|
let data = res.data;
|
|
let total = data.list[0].value + data.list[1].value + data.list[2].value + data.list[3].value;
|
|
personData.lnr.value = data.list[0].value;
|
|
personData.lnr.process = (data.list[0].value / total).toFixed(2);
|
|
personData.lnr.percent = (data.list[0].value / total * 100).toFixed(2);
|
|
personData.lnr.keyCount++;
|
|
personData.cjr.value = data.list[1].value;
|
|
personData.cjr.process = (data.list[1].value / total).toFixed(2);
|
|
personData.cjr.percent = (data.list[1].value / total * 100).toFixed(2);
|
|
personData.cjr.keyCount++;
|
|
personData.tyfy.value = data.list[2].value;
|
|
personData.tyfy.process = (data.list[2].value / total).toFixed(2);
|
|
personData.tyfy.percent = (data.list[2].value / total * 100).toFixed(2);
|
|
personData.tyfy.keyCount++;
|
|
personData.shjz.value = data.list[3].value;
|
|
personData.shjz.process = (data.list[3].value / total).toFixed(2);
|
|
personData.shjz.percent = (data.list[3].value / total * 100).toFixed(2);
|
|
personData.shjz.keyCount++;
|
|
}).catch(err => {
|
|
console.error(err)
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.module
|
|
.module-card3
|
|
.module-container
|
|
display flex
|
|
.left
|
|
width 550px
|
|
height 200px
|
|
background-image url(/assets/imgs/bottom-bg.png)
|
|
background-size 100%
|
|
position relative
|
|
.circle-container
|
|
transform scale(0.4)
|
|
background-image url(/assets/imgs/circle-bg.png)
|
|
background-size 128% 100%
|
|
background-position center
|
|
padding 5px
|
|
position absolute
|
|
top 10px
|
|
left 10px
|
|
#lnrPercent
|
|
top -40px
|
|
left 0px
|
|
#cjrPercent
|
|
top 30px
|
|
left 120px
|
|
#tyfyPercent
|
|
top -40px
|
|
left 240px
|
|
#shjzPercent
|
|
top 30px
|
|
left 350px
|
|
.right
|
|
width 250px
|
|
height 200px
|
|
.process
|
|
margin-top 6px
|
|
</style> |