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

<template>
	<div class="m-sqpj">
		<el-row :gutter="16">
			<el-col :span="12">
				<div class="kuangkuang">
					<h3>公共服务数量</h3>
					<h2>{{ info.service_total }}</h2>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="kuangkuang">
					<h3>指派服务数量</h3>
					<h2>{{ info.service_person_total }}</h2>
				</div>
			</el-col>
		</el-row>
		<div class="tablist">
			<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" @click="changTab(item)">{{ item }}</div>
		</div>
		<div>
			<div class="linecharts" v-if="resiCategoryData.length > 0">
				<div class="item"  :key="index" v-for="(item, index) in resiCategoryData">
					<div>{{ ('0' + (index + 1)).substr(-2) }}.</div>
					<div class="item-name">{{ item.name }}</div>
					<div class="item-progress"><b :style="{ width: + '0%' }"></b></div>
					<div class="item-count">
						<b>{{ item.count }}</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: ''
		},
		searchDate: Array
	},
	data() {
		return {
			lineData1: [],
			lineData2: [],
			resiCategoryData: [],
			showNoData: false,
			timer: null,
			pieChart: '',
			pieOption: {},
			pieInitState: false,
			pieData: [],
			tabList: ['服务次数排名', '服务人数排名'],
			currentTab: '服务次数排名',
			info: {}
		};
	},
	components: {
		screenEchartsFrame
	},
	mounted() {
		this.init();
	},
	watch: {},
	methods: {
		changTab(item) {
			this.currentTab=item
			if (item == '服务次数排名') {
				this.resiCategoryData = [...this.lineData1];
			} else {
				this.resiCategoryData = [...this.lineData2];
			}
		},

		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() {
			let url = 'service_search_person';

			const { data, code, msg } = await requestPostBi(
				url,
				{
					queryParam: {
						org_id: this.orgId,
						start_date: this.searchDate[0],
						end_date: this.searchDate[1]
					}
				},
				{
					// mockId: 60031937,
				}
			);
			if (code === 0) {
				this.info = data[0];
				console.log(this.info);
				this.lineData1 = this.info.child_service_num.map(item => {
					return {
						name: item.common_service_type_name,
						count: item.service_num
					};
				});
				console.log(this.lineData1);
				this.lineData2 = this.info.child_service_person_num.map(item => {
					return {
						name: item.common_service_type_name,
						count: item.service_person_num
					};
				});
				this.resiCategoryData = [...this.lineData1];
			} else {
				this.$message.error(msg);
			}
		}
	}
};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style>