realty/virgo.wzfrontend/yui_wx/pages/projectAdmin/projectAdmin.vue

<template>
	<view class="project-container">
		<view class="project-item">
			<view class="project-title">
				<view class="title-line"></view>
				<view class="title-label">房源管理</view>
			</view>
			<view class="project-content">
				<view class="air-item">
					<view class="test-item">
						<view class="name">总面积(㎡)</view>
						<view class="number">{{houseData.totalArea}}</view>
					</view>
					<view class="line"></view>
					<view class="test-item">
						<view class="name">已租面积(㎡)</view>
						<view class="number">{{houseData.remainArea}}</view>
					</view>
					<view class="line"></view>
					<view class="test-item">
						<view class="name">剩余面积(㎡)</view>
						<view class="number">{{houseData.haveRentedArea}}</view>
					</view>
				</view>
				<view class="air-item">
					<view class="test-item">
						<view class="name">总房源(个)</view>
						<view class="number">{{houseData.totalRoom}}</view>
					</view>
					<view class="line"></view>
					<view class="test-item">
						<view class="name">已租房源(个)</view>
						<view class="number">{{houseData.remainRoom}}</view>
					</view>
					<view class="line"></view>
					<view class="test-item">
						<view class="name">剩余房源(个)</view>
						<view class="number">{{houseData.haveRentedRoom}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="project-item">
			<view class="project-title">
				<view class="title-line"></view>
				<view class="title-label">费用管理</view>
				<view class="title-tab">
					<uv-subsection :list="billList" :current="billIndex" activeColor="#08979c"
						custom-style="border-radius: 16rpx;" custom-item-style="border-radius: 12rpx;"
						@change="changeBill">
					</uv-subsection>
				</view>
			</view>
			<view class="project-content">
				<view class="bill-title">房租</view>
				<view class="bill-content">
					<view class="air-item">
						<view class="test-item">
							<view class="name">应收(元)</view>
							<view class="number">{{nowPaymentData.property.receivable}}</view>
						</view>
						<view class="line"></view>
						<view class="test-item">
							<view class="name">已收(元)</view>
							<view class="number">{{nowPaymentData.property.received}}</view>
						</view>
						<view class="line"></view>
						<view class="test-item">
							<view class="name">逾期(元)</view>
							<view class="number">{{nowPaymentData.property.overdue}}</view>
						</view>
					</view>
				</view>
				<view class="bill-title">物业</view>
				<view class="bill-content">
					<view class="air-item">
						<view class="test-item">
							<view class="name">应收(元)</view>
							<view class="number">{{nowPaymentData.rent.receivable}}</view>
						</view>
						<view class="line"></view>
						<view class="test-item">
							<view class="name">已收(元)</view>
							<view class="number">{{nowPaymentData.rent.received}}</view>
						</view>
						<view class="line"></view>
						<view class="test-item">
							<view class="name">逾期(元)</view>
							<view class="number">{{nowPaymentData.rent.overdue}}</view>
						</view>
					</view>
				</view>
				<view class="bill-title">水电</view>
				<view class="bill-content">
					<view class="air-item">
						<view class="test-item">
							<view class="name">应收(元)</view>
							<view class="number">{{nowPaymentData.hydropower.receivable}}</view>
						</view>
						<view class="line"></view>
						<view class="test-item">
							<view class="name">已收(元)</view>
							<view class="number">{{nowPaymentData.hydropower.received}}</view>
						</view>
						<view class="line"></view>
						<view class="test-item">
							<view class="name">逾期(元)</view>
							<view class="number">{{nowPaymentData.hydropower.overdue}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="project-item">
			<view class="project-title">
				<view class="title-line"></view>
				<view class="title-label">提醒管理</view>
			</view>
			<view class="project-content">
				<view class="remind-chart">
					<qiun-data-charts type="pie" :opts="remindData.option" :chartData="remindData.data" :canvas2d="true"
						canvasId="remind1">
					</qiun-data-charts>
				</view>
			</view>
		</view>
		<view class="project-item">
			<view class="project-title">
				<view class="title-line"></view>
				<view class="title-label">工单管理</view>
			</view>
			<view class="project-content">
				<view class="order-title">内部工单</view>
				<view class="order-item">
					<view class="order-content">
						<view class="order-item-li">
							<view class="order-number">
								{{orderData.internal.totalNumber}}
							</view>
							<view class="order-label">工单数</view>
						</view>
						<view class="order-item-li">
							<view class="order-number">
								{{orderData.internal.completedNumber}}
							</view>
							<view class="order-label">已完成</view>
						</view>
						<view class="order-item-li">
							<view class="order-number">
								{{orderData.internal.incompleteNumber}}
							</view>
							<view class="order-label">未完成</view>
						</view>
					</view>
					<view class="order-chart">
						<qiun-data-charts type="arcbar" :opts="internal.option" :chartData="internal.data"
							:canvas2d="true" canvasId="order1">
						</qiun-data-charts>
					</view>
				</view>
				<view class="order-title">外部工单</view>
				<view class="order-item">
					<view class="order-content">
						<view class="order-item-li">
							<view class="order-number">{{orderData.external.totalNumber}}</view>
							<view class="order-label">工单数</view>
						</view>
						<view class="order-item-li">
							<view class="order-number">{{orderData.external.completedNumber}}</view>
							<view class="order-label">已完成</view>
						</view>
						<view class="order-item-li">
							<view class="order-number">{{orderData.external.incompleteNumber}}</view>
							<view class="order-label">未完成</view>
						</view>
					</view>
					<view class="order-chart">
						<qiun-data-charts type="arcbar" :opts="external.option" :chartData="external.data"
							:canvas2d="true" canvasId="order2">
						</qiun-data-charts>
					</view>
				</view>
			</view>
		</view>
		<view class="project-item">
			<view class="project-title">
				<view class="title-line"></view>
				<view class="title-label">设备管理</view>
			</view>
			<view class="project-content">
				<view class="device-content">
					<view class="order-item-li">
						<view class="order-number">{{deviceData.device.totalNumber}}</view>
						<view class="order-label">总设备</view>
					</view>
					<view class="line"></view>
					<view class="order-item-li">
						<view class="order-number">{{deviceData.device.onLineNumber}}</view>
						<view class="order-label">在线</view>
					</view>
					<view class="line"></view>
					<view class="order-item-li">
						<view class="order-number">{{deviceData.device.offLineNumber}}</view>
						<view class="order-label">离线</view>
					</view>
					<view class="line"></view>
					<view class="order-item-li">
						<view class="order-number">{{deviceData.device.faultNumber}}</view>
						<view class="order-label">故障</view>
					</view>
				</view>
				<view class="device-content">
					<view class="order-item-li">
						<view class="order-number">{{deviceData.alarm.totalNumber}}</view>
						<view class="order-label">总设备</view>
					</view>
					<view class="line"></view>
					<view class="order-item-li">
						<view class="order-number">{{deviceData.alarm.dayNumber}}</view>
						<view class="order-label">在线</view>
					</view>
					<view class="line"></view>
					<view class="order-item-li">
						<view class="order-number">{{deviceData.alarm.handledNumber}}</view>
						<view class="order-label">离线</view>
					</view>
					<view class="line"></view>
					<view class="order-item-li">
						<view class="order-number">{{deviceData.alarm.unhandledNumber}}</view>
						<view class="order-label">故障</view>
					</view>
				</view>
			</view>
		</view>
		<view class="project-item">
			<view class="project-title">
				<view class="title-line"></view>
				<view class="title-label">客户管理</view>
			</view>
			<view class="project-content">
				<view class="bill-content" style="margin: 30rpx 0;">
					<view class="air-item">
						<view class="test-item">
							<view class="name">总客户</view>
							<view class="number">{{clientData.totalNumber}}</view>
						</view>
						<view class="line"></view>
						<view class="test-item">
							<view class="name">月新增</view>
							<view class="number">{{clientData.monthNowAddNumber}}</view>
						</view>
						<view class="line"></view>
						<view class="test-item">
							<view class="name">洽商客户</view>
							<view class="number">{{clientData.negotiateNumber}}</view>
						</view>
					</view>
				</view>
				<view class="remind-chart">
					<qiun-data-charts type="line" :opts="clinetOpts" :chartData="clientChartData" :ontouch="true"
						:canvas2d="true" canvasId="clent1">
					</qiun-data-charts>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		houseManagement,
		paymentManagement,
		clientManagement,
		eventManagement,
		orderManagement,
		deviceManagement
	} from '@/request/api/staging.js'
	import {
		getCustomerListByPage
	} from '@/request/api/my.js'
	const color = ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"];
	export default {
		data() {
			return {
				project: {},
				houseData: {
					remainArea: 0,
					remainRoom: 0,
					totalRoom: 0,
					totalArea: 0,
					haveRentedRoom: 0,
					haveRentedArea: 0,
				},
				paymentData: {},
				nowPaymentData: {
					hydropower: { //水电
						overdue: 0,
						received: 0,
						receivable: 0
					},
					property: { //房租
						overdue: 0,
						received: 0,
						receivable: 0
					},
					rent: { //物业
						overdue: 0,
						received: 0,
						receivable: 0
					}
				},
				billList: [{
					id: 1,
					name: '当月',
					type: 'month'
				}, {
					id: 2,
					name: '当年',
					type: 'year'
				}, {
					id: 3,
					name: '累计',
					type: 'accumulate'
				}],
				billIndex: 0,
				remindData: {
					option: {},
					data: {}
				},
				orderData: {
					external: {
						totalNumber: 0,
						completedNumber: 0,
						incompleteNumber: 0
					},
					internal: {
						totalNumber: 0,
						completedNumber: 0,
						incompleteNumber: 0
					}
				},
				external: {
					option: {},
					data: {}
				},
				internal: {
					option: {},
					data: {}
				},
				deviceData: {
					alarm: {
						totalNumber: 0,
						handledNumber: 0,
						dayNumber: 0,
						unhandledNumber: 0
					},
					device: {
						totalNumber: 0,
						faultNumber: 0,
						onLineNumber: 0,
						offLineNumber: 0
					}
				},
				clientData: {
					monthNowAddNumber: 0,
					totalNumber: 0,
					negotiateNumber: 0
				},
				clientChartData: {},
				clientOpts: {
					color: color,
					padding: [15, 15, 0, 5],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4
					},
					yAxis: {
						gridType: "dash"
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			}
		},
		onReady() {
			this.project = this.$store.getters.project;
			this.init();
		},
		methods: {
			init() {
				this.initHouseData();
				this.initPaymentData();
				this.initRemind();
				this.initOrder();
				this.initDevice();
				this.initClientData();
			},
			initHouseData() {
				houseManagement(this.project.id).then(res => {
					if (res.code === 200) this.houseData = res.data;
				})
			},
			initPaymentData() {
				paymentManagement(this.project.id).then(res => {
					if (res.code === 200) {
						this.paymentData = res.data;
						this.nowPaymentData = this.paymentData[this.billList[this.billIndex].type];
					}
				})
			},
			initRemind() {
				eventManagement(this.project.id).then(res => {
					if (res.code === 200) {
						let data = res.data;
						this.remindData = {
							option: {
								color: color,
								padding: [5, 5, 5, 5],
								enableScroll: false,
								extra: {
									pie: {
										activeOpacity: 0.5,
										activeRadius: 10,
										offsetAngle: 0,
										labelWidth: 15,
										border: true,
										borderWidth: 3,
										borderColor: "#FFFFFF",
										linearType: "custom"
									}
								}
							},
							data: {
								series: [{
									data: [{
										"name": "重要",
										"value": data.importantNumber,
										"labelShow": false
									}, {
										"name": "会议",
										"value": data.meetingNumber,
										"labelShow": false
									}, {
										"name": "看房",
										"value": data.seeRoomNumber,
										"labelShow": false
									}, {
										"name": "日常",
										"value": data.remoteNumber,
										"labelShow": false
									}]
								}]
							}
						}
					}
				})
			},
			initOrder() {
				orderManagement(this.project.id).then(res => {
					if (res.code === 200) {
						this.orderData = res.data;
						this.internal = {
							option: {
								color: color,
								padding: undefined,
								title: {
									name: this.returnPercent(this.orderData.internal) + '%',
									fontSize: 15,
									color: "#2fc25b"
								},
								subtitle: {
									name: "",
									fontSize: 25,
									color: "#666666"
								},
								extra: {
									arcbar: {
										type: "default",
										width: 12,
										backgroundColor: "#E9E9E9",
										startAngle: 0.75,
										endAngle: 0.25,
										gap: 2,
										linearType: "custom"
									}
								}
							},
							data: {
								series: [{
									name: "",
									color: "#2fc25b",
									data: this.returnPercent(this.orderData.internal) / 100
								}]
							}
						}
						this.external = {
							option: {
								color: color,
								padding: undefined,
								title: {
									name: this.returnPercent(this.orderData.external) + '%',
									fontSize: 15,
									color: "#2fc25b"
								},
								subtitle: {
									name: "",
									fontSize: 25,
									color: "#666666"
								},
								extra: {
									arcbar: {
										type: "default",
										width: 12,
										backgroundColor: "#E9E9E9",
										startAngle: 0.75,
										endAngle: 0.25,
										gap: 2,
										linearType: "custom"
									}
								}
							},
							data: {
								series: [{
									name: "",
									color: "#2fc25b",
									data: this.returnPercent(this.orderData.external) / 100
								}]
							}
						}
					}
				})
			},
			initClientData() {
				clientManagement(this.project.id).then(res => {
					if (res.code === 200) this.clientData = res.data;
				})
				getCustomerListByPage({
					currPage: 1,
					pageSize: 100,
					organizationId: this.$store.getters.organization.id,
					projectId: this.project.id
				}).then(res => {
					if (res.code === 200) {
						let resData = res.data.dataList;
						let obj = {},
							x = [],
							data = [];
						for (let i = 0; i < resData.length; i++) {
							let date = this.$dayjs(resData[i].visitingTime).format('YY/MM');
							if (!obj[date]) obj[date] = 0;
							obj[date]++
						}
						for (let key in obj) {
							x.push(key);
							data.push(obj[key]);
						}
						this.clientChartData = {
							categories: x,
							series: [{
								name: "客户分析",
								data: data
							}]
						}
					}
				})



			},
			initDevice() {
				deviceManagement(this.project.id).then(res => {
					if (res.code === 200) this.deviceData = res.data;
				})
			},
			returnPercent(data) {
				let num = 0
				if (data.totalNumber) {
					num = parseInt(data.completedNumber / data.totalNumber * 100)
				}
				return num;
			},
			changeBill(index) {
				this.billIndex = index;
				this.nowPaymentData = this.paymentData[this.billList[this.billIndex].type];
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	.project-container {
		padding: 30rpx;

		.device-content {
			text-align: center;
			padding-right: 30rpx;
			display: flex;
			margin-top: 30rpx;
			align-items: center;

			.line {
				height: 32rpx;
				width: 2rpx;
				background: $uni-border-1;
			}

			.order-item-li {
				flex: 1;
				text-align: center;
			}

			.order-number {
				font-size: 40rpx;
				color: $uni-primary;
			}

			.order-label {
				font-size: 24rpx;
				color: $uni-secondary-color;
			}

			.order-title {
				text-align: left;
			}
		}

		.order-item {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.order-content {
			flex: 1;
			width: 0;
			padding-right: 30rpx;
			display: flex;

			.order-item-li {
				flex: 1;
				text-align: center;
			}

			.order-number {
				font-size: 40rpx;
				color: $uni-primary;
			}

			.order-label {
				font-size: 24rpx;
				color: $uni-secondary-color;
			}

			.order-title {
				text-align: left;
			}
		}

		.order-chart {
			width: 200rpx;
			height: 200rpx;
		}

		.bill-title,
		.order-title {
			padding: 10rpx;
			font-weight: bold;
		}

		.bill-content {
			background: $uni-background-color;
			padding: 6rpx 0 14rpx 0;
			border-radius: 16rpx;
		}

		.remind-chart {
			height: 400rpx;
		}

		.project-item {
			padding: 30rpx;
			background: #fff;
			margin-bottom: 20rpx;
			border-radius: 16rpx;

			.project-title {
				display: flex;
				align-items: center;
			}

			.title-line {
				width: 18rpx;
				height: 52rpx;
				background: $uni-primary;
				border-radius: 18rpx;
			}

			.title-label {
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 20rpx;
				flex: 1;
				width: 0;
			}

			.title-tab {
				width: 320rpx;
			}

			.air-item {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.test-item {
					flex: 1;
					width: 0;
					overflow: hidden;
					text-align: center;
					position: relative;
				}

				.name {
					font-size: 24rpx;
					margin-bottom: 8rpx;
					line-height: 36rpx;
					color: $uni-secondary-color;
				}

				.number {
					font-size: 18px;
					color: $uni-primary;
				}

				.line {
					height: 32rpx;
					width: 2rpx;
					background: $uni-border-1;
				}
			}
		}
	}
</style>