epmet-work-uni/pages/statistics/modules/CrowdPortrait/CrowdPortrait.vue

<template>
    <view>
        <Tabs :tabList="tabList" @tabChange="tabChange" />
        <view class="sub-tit">
            <image src="/static/images/statistics/sub-tit.png" mode="widthFix" />
            <text>不满意人员画像</text>
        </view>
        <picker :range="typeConditionList" range-key="label" v-model="typeCondition" @change="getData" v-if="tabValue === 'provinceAndSelf'">
            <view class="picker">
                {{ typeConditionList[typeCondition].label }}
                <image src="/static/images/statistics/arrow_down.png" mode="widthFix" style="width: 20rpx; height: 12rpx"></image>
            </view>
        </picker>
        <view class="portrait">
            <view class="bg">
                <image src="/static/images/statistics/hx_bg.png" mode="widthFix" />
            </view>
            <view class="tags">
                <view class="tag" v-if="gridName">
                    <view class="text">{{ gridName }}</view>
                </view>
                <view class="tag" v-if="ageClassification">
                    <view class="text">{{ ageClassification }}</view>
                </view>
                <view class="tag" v-if="residentTagName" v-for="(item, index) in residentTagName" :key="index">
                    <view class="text">{{ item }}</view>
                </view>
                <view class="tag" v-if="monthIncomeLevel">
                    <view class="text">{{ monthIncomeLevel }}</view>
                </view>
                <view class="tag" v-if="cultureName">
                    <view class="text">{{ cultureName }}</view>
                </view>
                <view class="tag" v-if="marriageName">
                    <view class="text">{{ marriageName }}</view>
                </view>
                <view class="tag" v-if="gender">
                    <view class="text">{{ gender === '1' ? '男' : gender === '2' ? '女' : gender === '0' ? '未知' : '' }}</view>
                </view>
            </view>
        </view>

        <view class="btn" @tap="gotopage">
            <text>按画像匹配到同类：{{ matchPeopleNum ? matchPeopleNum : 0 }}人</text>
            <image src="/static/images/statistics/btn_right.png" mode="widthFix" />
        </view>
    </view>
</template>

<script>
import Tabs from '../../../../components/Tabs';
import { dictlist, satisfactionCrowdPortrait } from '../../../../utils/statisticsApi';
export default {
    components: {
        Tabs
    },
    data() {
        return {
            tabList: [
                {
                    label: '按省及社区满意度\n调查结果',
                    value: 'provinceAndSelf'
                },
                {
                    label: '按12345热线\n投诉结果',
                    value: '12345'
                }
            ],

            tabValue: 'provinceAndSelf',
            gender: '',
            marriageName: '',
            ageClassification: '',
            cultureLevel: '',
            gridName: '',
            monthIncomeLevel: '',
            residentTagName: '',
            matchPeopleNum: '',
            searchParams: '',
            typeCondition: 0,
            typeConditionList: [],
            cultureName: ''
        };
    },
    props: {},
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready() {
            this.getDisKey();
        },

        tabChange({ detail }) {
            this.setData({
                tabValue: this.tabList[detail].value
            });
            this.getData();
        },

        gotopage() {
            uni.navigateTo({
                url: '/subpages/statistics/pages/crowdPortrait/crowdPortrait?data=' + this.searchParams
            });
        },

        getDisKey() {
            dictlist({
                dictType: 'satisfaction_category'
            }).then(({ data }) => {
                this.setData({
                    typeConditionList: data
                });
                this.getData();
            });
        },

        getData() {
            let params = {
                queryType: this.tabValue
            };
            console.log(this.resultType);
            if (this.tabValue === 'provinceAndSelf') {
                params.category = this.typeConditionList[this.typeCondition].value;
            }
            satisfactionCrowdPortrait(params).then(({ data }) => {
                this.setData({
                    gender: data.gender,
                    marriageName: data.marriageName,
                    ageClassification: data.ageClassification,
                    cultureName: data.cultureName,
                    gridName: data.gridName,
                    monthIncomeLevel: data.monthIncomeLevel,
                    residentTagName: data.residentTagName.split(','),
                    matchPeopleNum: data.matchPeopleNum,
                    searchParams: JSON.stringify({
                        ...data,
                        ...params
                    })
                });
            });
        }
    },
    created: function () {}
};
</script>
<style>
.sub-tit {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    display: flex;
    align-items: center;
    margin: 30rpx 0;
}

.sub-tit image {
    margin-right: 12rpx;
    width: 20rpx;
    height: 20rpx;
}

.portrait {
    position: relative;
    width: 633rpx;
    height: 542rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #3a80e7;
    line-height: 36rpx;
}

.portrait .tag {
    position: absolute;
    background: #f4f8fe;
    padding: 30rpx;
    width: 129rpx;
    height: 129rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
}

.portrait .tag:after {
    content: '';
    display: block;
    width: calc(100% - 28rpx);
    height: calc(100% - 28rpx);
    position: absolute;
    left: 14rpx;
    top: 14rpx;
    background: #d3e3fa;
    border-radius: 50%;
}
.portrait .tag .text {
    position: relative;
    z-index: 2;
}
.portrait .tag:nth-of-type(1) {
    padding: 38rpx;
    width: 163rpx;
    height: 163rpx;
    left: 277rpx;
    top: 0;
}
.portrait .tag:nth-of-type(2) {
    padding: 24rpx;
    width: 121rpx;
    height: 121rpx;
    right: 58rpx;
    top: 101rpx;
}
.portrait .tag:nth-of-type(3) {
    width: 145rpx;
    height: 145rpx;
    right: 0rpx;
    top: 249rpx;
}
.portrait .tag:nth-of-type(4) {
    width: 163rpx;
    height: 163rpx;
    right: 100rpx;
    bottom: 0;
}
.portrait .tag:nth-of-type(5) {
    left: 99rpx;
    bottom: 10rpx;
}
.portrait .tag:nth-of-type(6) {
    left: 0rpx;
    top: 251rpx;
}
.portrait .tag:nth-of-type(7) {
    left: 53rpx;
    top: 101rpx;
}
.btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
    line-height: 42rpx;
    background: #f1f6ff;
    border: 1px solid #3a80e7;
    border-radius: 20rpx;
    padding: 25rpx 30rpx;
    margin-top: 50rpx;
}
.btn image {
    width: 30rpx;
    height: 30rpx;
}
.bg {
    width: 384rpx;
    height: 348rpx;
    position: absolute;
    left: calc(50% - 192rpx);
    top: calc(50% - 174rpx);
}
.bg image {
    width: 100%;
    height: 100%;
}
.picker {
    width: 180rpx;
    background: #3a80e7;
    border-radius: 1000rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
    padding: 15rpx 21rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.picker image {
    margin-left: 5px;
}
</style>