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': item.per }"></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];
					this.total = this.total1
				} else {
					this.resiCategoryData = [...this.lineData2];
					this.total = this.total2
				}
			},
			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];
					this.lineData1 = this.info.child_service_num.map(item => {
						return {
							name: item.common_service_type_name,
							count: item.service_num,
							per: (item.service_num / this.info.service_total * 100).toFixed(2) + '%'
						};
					});
					this.lineData2 = this.info.child_service_person_num.map(item => {
						return {
							name: item.common_service_type_name,
							count: item.service_person_num,
							per: (item.service_person_num / this.info.service_person_total * 100).toFixed(2) + '%'
						};
					});
					this.lineData1=this.lineData1.slice(0, 10)
					this.lineData2=this.lineData2.slice(0, 10)
					this.resiCategoryData = [...this.lineData1];
					console.log(this.resiCategoryData)
				} else {
					this.$message.error(msg);
				}
			}
		}
	};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped>
	/deep/.linecharts .item .item-name{
		width: 100px;
	}
</style>