bt-xtgxq-population-bigdata/src/module/ModuleBottom.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" @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"  @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>
    </div>
</template>

<script setup>
import { ref, reactive, inject, defineEmits } 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 emits = defineEmits(['click']);

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

const onLnrClick = () => {
    emits('click', {
        type: 'baozhang',
        name: '老年人'
    });
}

const onCjrClick = () => {
    emits('click', {
        type: 'baozhang',
        name: '残疾人'
    });
}

const onTyfyClick = () => {
    emits('click', {
        type: 'baozhang',
        name: '退役/服役'
    });
}

const onShjzClick = () => {
    emits('click', {
        type: 'baozhang',
        name: '社会救助信息'
    });
}

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
                    cursor pointer
                    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
                    cursor pointer
                    margin-top 6px
</style>