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

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

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;
    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-box-bg.png)
    background-size 800px 550px
    background-repeat no-repeat
    position relative
    .map
        width 785px
        height 530px
        background-image url(/assets/imgs/center-map-bg.png)
        background-size 780px 462px
        background-repeat no-repeat
        background-position 15px 45px
    .item
        cursor pointer
        position absolute
        top 0
        left 0
    .stree-icon
        position absolute
        top 0
        left 0
        width 25px
    #totalCount
        top 100px
        left 590px
    #xtlIcon
        top 180px
        left 250px
    #xtlCount
        top 155px
        left 285px
    #mxlIcon
        top 250px
        left 60px
    #mxlCount
        top 225px
        left 90px
    #wsqIcon
        top 350px
        left 450px
    #wsqCount
        top 325px
        left 480px
    #manPercent
        top 560px
        left 40px
        transform scale(1.3)
    #womenPercent
        top 580px
        left 120px
    #cardTwoCount
        top 580px
        left 480px
</style>