epmet-work-pc/src/views/dataBoard/sida/cpts/sqpj.vue

<template>
	<div>
		<div class="tablist">
			<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" @click="currentTab = item">{{ item }}</div>
		</div>
		<div>
			<div class="linecharts" v-if="resiCategoryData.length > 0">
				<div class="item" @click="toResiClassPage(item.code, item.name)" :key="item.code + index" v-for="(item, index) in resiCategoryData">
					<div>{{ ('0' + (index + 1)).substr(-2) }}.</div>
					<div class="item-name">{{ item.name }}</div>
					<div class="item-count">
						<b>{{ item.count }}</b>
						人
					</div>
					<div class="item-progress"><b :style="{ width: item.ratio + '%' }"></b></div>
					<div class="item-per">
						<span>较上月</span>
						<img v-if="item.growth >= 0" src="~@/assets/images/shuju/renfang/index/up.png" />
						<img v-else src="~@/assets/images/shuju/renfang/index/down.png" />
						<b>{{ item.growthAbs }}</b>
						<span>人</span>
					</div>
				</div>
			</div>
			<div class="empty" v-else><img src="~@/assets/images/shuju/renfang/index/empty.png" /></div>
		</div>
	</div>
</template>
<script>
import screenEchartsFrame from '@/views/dataBoard/cpts/screen-echarts-frame/index';
import { requestPostBi } from '@/js/dai/request-bipass';
export default {
	props: {
		orgId: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			resiCategoryData: [],
			showNoData: false,
			timer: null,
			pieChart: '',
			pieOption: {},
			pieInitState: false,
			pieData: [],
			tabList: [
				'满意度',
				'关注度',
				'期盼度',
				'烦心度'
				// "下级人口分布",
			],
			currentTab: '满意度',
			info: {
				male_count: 0,
				female_count: 0,
				resi_y_house_y_count: 0,
				resi_y_house_n_count: 0,
				resi_n_house_y_count: 0,
				primary_count: 0,
				junior_high_count: 0,
				second_speci_count: 0,
				high_school_count: 0,
				junior_college_count: 0,
				undergrad_count: 0,
				master_count: 0,
				doctor_count: 0,
				local_count: 0,
				field_count: 0,
				age50_count: 0,
				age5059_count: 0,
				age6069_count: 0,
				age7079_count: 0,
				age80_count: 0,
				culture_count: 0,
				committee_count: 0,
				capable_count: 0,
				friend_count: 0,
				agent_count: 0,
				mediator_count: 0,
				collector_count: 0,
				security_count: 0,
				party_mem_count: 0
			}
		};
	},
	components: {
		screenEchartsFrame
	},
	mounted() {
		this.init();
	},
	watch: {
		currentTab() {
			this.getResiCategoryData();
		},
		orgId() {
			this.init();
		}
	},
	methods: {
		async init() {
			this.getResiCategoryData();
		},
		handleClickItem(item) {
			const { type, name } = item;
			this.$router.push({
				path: '/dataBoard/renfang/resi-analyze',
				query: {
					org_id: this.orgId,
					type,
					type_category: this.currentTab,
					type_name: name
				}
			});
		},
		selItem(selItem, selIndex) {
			this.tabList.forEach((element, index) => {
				if (index === selIndex) {
					element.sel = true;
				} else {
					element.sel = false;
				}
			});
		},
		async getResiCategoryData() {
			console.log('=========================getResiCategoryData');
			const url = 'resident_class_statics';
			const { data, code, msg } = await requestPostBi(
				url,
				{
					queryParam: {
						org_id: this.orgId
					}
				},
				{
					// mockId: 60031937,
				}
			);
			if (code === 0) {
				this.resiCategoryData = data.map(item => {
					return {
						code: item.label_id,
						name: item.label,
						count: item.count,
						ratio: item.ratio,
						growth: item.growth,
						growthAbs: Math.abs(item.growth)
					};
				});
			} else {
				this.$message.error(msg);
			}
		}
	}
};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style>