bt-xtgxq-population-bigdata/src/module/ModuleCenter.vue

<template>
    <div class="module-center">
        <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="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" />
        <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">
    </div>
</template>

<script setup>
import { ref, reactive, inject } from 'vue';
import PersonPercent from '../components/card/PersonPercent.vue';
import CardCount1 from '../components/card/CardCount1.vue';
import CardTwoCount from '../components/card/CardTwoCount.vue';

const icons = reactive({
    xtl: 'assets/imgs/icon/xtl.png',
    mxl: 'assets/imgs/icon/mxl.png',
    wsq: 'assets/imgs/icon/wsq.png'
})

const axios = inject('axios');

const keyCount = reactive({
    xtl: 0,
    mxl: 0,
    wsq: 0,
    totalCount: 0
});

const xtlCount = ref(0);
const mxlCount = ref(0);
const wsqCount = ref(0);
const totalCount = ref(0);

// 人口
axios.get(`app/query/sqlrelease/q3cd32d5`, {}).then(res => {
    let data = res.data;
    xtlCount.value = data.xiTu;
    mxlCount.value = data.minXin;
    wsqCount.value = data.wanShuiQuan;
    totalCount.value = data.renKou;

    keyCount.xtl += 1;
    keyCount.mxl += 1;
    keyCount.wsq += 1;
    keyCount.totalCount += 1;
}).catch(err => {
    console.error(err);
})

const manCount = ref(0);
const womenCount = ref(0);
// 性别
axios.get(`app/query/sqlrelease/q1152adc`, {}).then(res => {
    let data = res.data;
    manCount.value = data[0].value;
    womenCount.value = data[1].value;
}).catch(err => {
    console.error(err);
});

const populstionTypeData = reactive({
    count1: {
        value: 0,
        title: '常住人口',
        unit: '人',
        percent: 0,
        color: 'white',
    },
    count2: {
        value: 0,
        title: '流动人口',
        unit: '人',
        percent: 0,
        color: 'white',
    },
})
// 常驻人口
axios.get(`app/query/sqlrelease/qdf8f806`, {}).then(res => {
    let data = res.data;
    let total = data[0].value + data[1].value;
    populstionTypeData.count1.value = data[0].value;
    populstionTypeData.count1.percent = (data[0].value / total).toFixed(2);
    populstionTypeData.count2.value = data[1].value;
    populstionTypeData.count2.percent = (data[1].value / total).toFixed(2);
}).catch(err => {
    console.error(err);
})

</script>

<style lang="stylus" scoped>
.module-center
    width 800px
    height 600px
    background-image url(/assets/imgs/center-map-bg.png)
    background-size 100% 400px
    background-repeat no-repeat
    position relative
    .item
        position absolute
        top 0
        left 0
    .stree-icon
        position absolute
        top 0
        left 0
        width 25px
    #totalCount
        top 280px
        left 300px
    #xtlIcon
        top 30px
        left 300px
    #xtlCount
        top 20px
        left 330px
    #mxlIcon
        top 140px
        left 60px
    #mxlCount
        top 180px
        left 10px
    #wsqIcon
        top 220px
        left 560px
    #wsqCount
        top 220px
        left 600px
    #manPercent
        top 450px
        left 120px
        transform scale(1.2)
    #womenPercent
        top 470px
        left 160px
        transform scale(0.8)
    #cardTwoCount
        top 450px
        left 380px
</style>