newEdition/pages/center/dataBoard/dataBoard.vue

<template>
	<view class="pages">
		<!-- 筛选框 -->
		<view class="boxtittabs">
			<view class="items" @tap="screenShow = true">{{ showTimeText }}
				<u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
			</view>
			<view class="items" @tap="showSelect('companyList')">{{ showBeText }}
				<u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
			</view>
			<view class="items" @tap="showSelect('houseList')">{{ showBeText1 }}
				<u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
			</view>
		</view>

		<!-- 编辑指标 -->
		<view class="edit" v-if="CHECKAUTHORITY('biEditTarget')">
			<view class="edits" @click="toEdit">
				编辑指标
			</view>
		</view>

		<!-- 待处理 -->
		<view class="grop">

			<view class="title">
				<image class="title-icon" src="https://static.quhouse.com/bc2ec951ad9a47e5bf58f2829926e143.png"
					mode="" />
				转写消费
			</view>

			<view class="grid5">
				<block v-for="(item,index) in stayPendingProcessingArr">
					<view :key="index" class="real" v-if="item.show">
						<view class="realnum">{{item.data || 0}}</view>
						<view class="realtext">{{ item.title }}</view>
					</view>
				</block>
			</view>

		</view>


		<!-- 接待简报 -->
		<view class="grop">
			<view class="title">
				<image class="title-icon" src="https://static.quhouse.com/bc2ec951ad9a47e5bf58f2829926e143.png"
					mode="" />
				接待简报
			</view>

			<view class="grid4">
				<block v-for="(item,index) in ReceptionBriefingArr">
					<view :key="index" class="real" v-if="item.show">
						<view class="realnum">{{item.data || 0}}{{ item.unit }}</view>
						<view class="realtext">{{ item.title }}</view>
					</view>
				</block>
			</view>
		</view>

		<!-- 排名柱状图 -->
		<block v-for="(item, index) in IndexRankingArr">
			<view class="grop" :key="index" v-if="item.show">
				<view class="titles">
					<view class="lside">
						{{item.title}}排名（top10）
					</view>
					<view class="rside">
						<view class="rside-item" :class="{active: item.isShowCity}" @click="checkCity(item, '按项目')">
							按项目
						</view>
						<view class="rside-item" :class="{active: !item.isShowCity}" @click="checkCity(item, '按城市')">
							按城市
						</view>
					</view>
				</view>

				<view class="echarts">
					<template v-if="item.type">
						<template v-if="item.isShowCity">
							<qiun-data-charts :type="item.type" :chartData="item.lineOptsect" :opts="item.lineOpts"
								background="none" :ontouch="true" :canvasId="item.canvasId" :canvas2d="true" />
						</template>
						<template v-else>
							<qiun-data-charts :type="item.type" :chartData="item.lineOptsect1" :opts="item.lineOpts"
								background="none" :ontouch="true" :canvasId="item.canvasId1" :canvas2d="true" />
						</template>
					</template>
					<template v-else>
						<view class="empty">
							<view
								style="width: 100%;height: 300rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
								<view style="width: 100%;text-align: center;">
									<image style="width: 220rpx;height: 200rpx;"
										src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode="">
									</image>
								</view>
								<view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</block>


		<!-- 趋势折线图 -->
		<block v-for="(item, index) in IndicatorTrendsArr">
			<view class="grop" :key="index" v-if="item.show">
				<view class="titles">
					<view class="lside">
						{{item.title}}趋势
					</view>
				</view>

				<view class="echarts">
					<template v-if="item.lineOptsect">
						<qiun-data-charts :type="item.type" :chartData="item.lineOptsect" :opts="item.lineOpts"
							background="none" :ontouch="true" :canvasId="item.canvasId" :canvas2d="true" />
					</template>
					<template v-else>
						<view class="empty">
							<view
								style="width: 100%;height: 300rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
								<view style="width: 100%;text-align: center;">
									<image style="width: 220rpx;height: 200rpx;"
										src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode="">
									</image>
								</view>
								<view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</block>


		<!-- 分布饼图 -->
		<block v-for="(item, index) in IndicatorDistributionArr">
			<view class="grop" :key="index" v-if="item.show">
				<view class="titles">
					<view class="lside">
						{{item.title}}分布
					</view>
				</view>

				<view class="echarts">
					<template v-if="item.type">
						<qiun-data-charts :type="item.type" :chartData="item.lineOptsect" :opts="item.lineOpts"
							background="none" :ontouch="true" :canvasId="item.canvasId" :canvas2d="true" />
					</template>
					<template v-else>
						<view class="empty">
							<view
								style="width: 100%;height: 300rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
								<view style="width: 100%;text-align: center;">
									<image style="width: 220rpx;height: 200rpx;"
										src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode="">
									</image>
								</view>
								<view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>

		</block>

		<!-- 更多筛选 -->
		<u-popup v-model="screenShow" mode="bottom" height="400">
			<view class="screen">
				<view class="boxtittab">
					<view class="tabbox">
						<view :class="{ activecllasscet: params.dateType == 0 }" @click="tabtimetap(0, '今天')">今天</view>
					</view>
					<view class="tabbox">
						<view :class="{ activecllasscet: params.dateType == 1 }" @click="tabtimetap(1, '近七天')">近七天
						</view>
					</view>
					<view class="tabbox">
						<view :class="{ activecllasscet: params.dateType == 2 }" @click="tabtimetap(2, '近30天')">近30天
						</view>
					</view>
					<view class="tabbox">
						<view :class="{ activecllasscet: params.dateType == null }" @click="tabtimetap(null, '自定义')">自定义
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 日期选择器 -->
		<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>

		<!-- 项目&公司 -->
		<u-select :mask-close-able="false" label-name="templateName" value-name="id" v-model="showTemplate"
			mode="single-column" :list="templateList" @cancel="templateCancel" @confirm="templateConfirm"></u-select>
	</view>
</template>

<script>
	const config = require("@/config");
	import * as allArrList from './arr.js'
	export default {
		data() {
			return {
				showTimeText: '近七天', // 展示文字
				showBeText: '公司', // 
				showBeText1: '项目', // 
				showTemplate: false,
				screenShow: false, // 日期选择器
				totalTimeShow: false, // 日期选择器
				templateList: [], // 销讲业务
				houseList: [], // 项目列表
				companyList: [], // 项目列表
				stayPendingProcessingArr: allArrList.stayPendingProcessingArr, // 待处理
				ReceptionBriefingArr: allArrList.ReceptionBriefingArr, // 接待简报
				IndexRankingArr: allArrList.IndexRankingArr, // 排名
				IndicatorTrendsArr: allArrList.IndicatorTrendsArr, // 排名
				IndicatorDistributionArr: allArrList.IndicatorDistributionArr, // 排名
				params: {
					staDate: '', //开启时间
					endDate: '', // 结束时间
					houseId: '', // 楼盘
					orgCode: '', // 公司code
					dateType: 1, // 自定义时间 今天0  近七天1 30天2
				},
				needFormatArr: ['stayPendingProcessingArr', 'ReceptionBriefingArr', 'IndexRankingArr',
					'IndicatorTrendsArr', 'IndicatorDistributionArr'
				], // 需要格式化的数组
				publicId: '', // 标识区别选择的是公司还是项目

				publicOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: true,
					legend: {},
					xAxis: {
						rotateLabel: true,
						rotateAngle: 90,
						fontSize: 10,
						itemCount: 4,
					},
					yAxis: {
						gridType: "dash",
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			};
		},

		onLoad() {
			this.getHouse()
			this.getCompany()
			this.initPage()
		},

		onPullDownRefresh() {
			this.initPage()

			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 2000)
		},

		methods: {

			// 字典
			biDictionary() {
				this.$u.get('/customer/biDict').then(res => {
					if (res) {
						this.needFormatArr.forEach((item, index) => {
							this[item] = this[item].map(it => {
								return {
									...it,
									indexType: index
								}
							})

							let arr1 = res.filter(arr => arr.indexType == index)
							arr1.map(ie => {
								let objs = this[item].findIndex(obj => {
									return obj.title == ie.indexName && obj.indexType == ie
										.indexType
								}) || 0
								this[item][objs].id = ie.id || ''
							})
						})
						this.getFindBiByAccountId()
					}
				})
			},

			// 回显
			getFindBiByAccountId() {
				this.$u.get('/customer/findBiByAccountId').then(res => {
					if (res) {
						let arr = [...res.index1.split(','), ...res.index2.split(','), ...res.index3.split(','),
							...res.index4.split(','), ...res.index5.split(',')
						]
						this.needFormatArr.forEach(item => {
							this[item].forEach(items => {
								let obj = arr.find(obj => obj == items.id)
								if (obj) items.show = true
								else items.show = false
							})
						})
					}
				})
			},

			async initPage() {
				await this.biDictionary()
				await this.bishowIndex1()
				await this.bishowIndex2()
				this.$nextTick(() => {
					this.bishowIndex3()
					this.bishowIndex4()
					this.bishowIndex5()
				})
			},

			checkCity(item, name) {
				if (name == '按项目') {
					item.isShowCity = true
				} else {
					item.isShowCity = false
				}
				this.$forceUpdate()
			},

			bishowIndex1() {
				this.$u.post('/customer/bishowIndex1', this.params).then(res => {
					if (res) {
						this.stayPendingProcessingArr.forEach(item => {
							item.data = res[item.id] || 0
						})
					}
				})
			},

			bishowIndex2() {
				this.$u.post('/customer/bishowIndex2', this.params).then(res => {
					if (res) {
						this.ReceptionBriefingArr.forEach(item => {
							item.data = res[item.id] || 0
						})
					}
				})
			},

			bishowIndex3() {
				this.$u.post('/customer/bishowIndex3', this.params).then(res => {
					if (res) {
						this.IndexRankingArr.forEach(item => {
							if (res[item.id] && res[item.id].data.length > 0) {
								// 按项目
								item.canvasId = `IndexRankingArr${item.id}`
								item.lineOptsect = {
									categories: res[item.id].data.map(itme => {
										return itme.name
									}),
									series: [{
										name: item.title,
										data: JSON.parse(JSON.stringify(res[item.id].data)),
									}]
								}
								item.type = 'column'
								item.lineOpts = this.publicOpts
								item.lineOpts.legend = {
									show: false
								}

								// 按城市
								item.canvasId1 = `IndexRankingArrs${item.id}`
								item.lineOptsect1 = {
									categories: res[item.id].data2.map(itme => {
										return itme.name
									}),
									series: [{
										name: item.title,
										data: JSON.parse(JSON.stringify(res[item.id].data2))
									}]
								}
								this.$forceUpdate()
							} else {
								item.lineOptsect = null
								this.$forceUpdate()
							}
						})
					}
				})
			},

			bishowIndex5() {
				this.$u.post('/customer/bishowIndex5', this.params).then(res => {
					if (res) {
						this.IndicatorDistributionArr.forEach(item => {
							if (res[item.id]) {
								item.type = 'pie'
								item.canvasId = `IndicatorDistributionArrs${item.id}`
								item.lineOptsect = {
									series: [{
										data: JSON.parse(JSON.stringify(res[item.id]))
									}]
								}
								item.lineOpts = {
									color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE",
										"#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"
									],
									padding: [20, 20, 20, 20],
									enableScroll: false,
									extra: {
										pie: {
											activeOpacity: 0.5,
											activeRadius: 10,
											offsetAngle: 0.5,
											labelWidth: 15,
											border: false,
											borderWidth: 3,
											borderColor: "#FFFFFF"
										},
										markLine: {
											labelOffsetX: 10,
											labelOffsetY: 10,
										}
									},

								}
								// '无效原因'
								if (item.id == 55) {
									item.lineOpts.legend = {
										show: false
									}
								}
								this.$forceUpdate()
							} else {
								item.lineOptsect = null
								this.$forceUpdate()
							}

						})
					}
				})
			},

			bishowIndex4() {
				this.$u.post('/customer/bishowIndex4', this.params).then(res => {
					if (res) {
						this.IndicatorTrendsArr.forEach(item => {
							if (res[item.id]) {
								item.canvasId = `IndicatorTrendsArr${item.id}`
								item.lineOptsect = {
									categories: [],
									series: [{
										name: item.title,
										data: []
									}]
								}
								item.type = 'line'
								item.lineOpts = this.publicOpts
								res[item.id].forEach(itme => {
									item.lineOptsect.categories.push(itme.statDate.split(' ')[0])
									item.lineOptsect.series[0].data.push(itme[item.params] || 0)
								})
								this.$forceUpdate()
							} else {
								item.lineOptsect = null
								this.$forceUpdate()
							}
						})
					}
				})
			},

			toEdit() {
				uni.navigateTo({
					url: '/pages/center/RuleEditing/RuleEditing'
				})
			},

			showSelect(params) {
				this.publicId = params
				this.templateList = this[params]
				this.showTemplate = true
			},

			// 获取项目
			getHouse() {
				uni.request({
					url: config.service.getUser,
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
					},
					success: (res) => {
						this.houseList = res.data.data.houseList.map(item => {
							return {
								id: item.id,
								templateName: item.propertyName,
							}
						})
					}
				})
			},

			// 获取公司
			getCompany() {
				this.$u.post('/customer/getMyOrg').then(res => {
					if (res) {
						this.companyList = res.map(item => {
							return {
								id: item.orgCode,
								templateName: item.name
							}
						})
					}
				})
			},

			//时间切换
			tabtimetap(index, text) {
				this.params.dateType = index;
				if (index == null) {
					this.totalTimeShow = true;
					this.screenShow = false
				} else {
					this.screenShow = false
					this.showTimeText = text
					this.params.endDate = ''
					this.params.staDate = ''
					this.initPage()
				}
			},

			//自定义时间
			totalTimeChange(e) {
				this.screenShow = false
				this.showTimeText = `${e.startDate}-${e.endDate}`
				this.params.dateType = null;
				this.params.endDate = e.endDate
				this.params.staDate = e.startDate
				this.initPage()
			},

			// 
			templateCancel() {
				this.showTemplate = false;
			},

			// 
			templateConfirm(e) {
				this.showTemplate = false;
				if (this.publicId == 'houseList') {
					this.showBeText1 = e[0].label
					this.params.houseId = e[0].value
				} else {
					this.showBeText = e[0].label
					this.params.orgCode = e[0].value
				}
				this.initPage()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pages {
		padding: 0 0 20rpx 0;
		width: 100vw;
		min-height: 100vh;
		background: #f2f2f2;
		display: flex;
		flex-direction: column;

		.boxtittabs {
			width: 100%;
			height: 92rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			position: sticky;
			top: var(--window-top);

			.items {
				padding: 0 24rpx;
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.screen {

			//时间切换的样式
			.boxtittab {
				width: 100%;
				height: 100%;
				background: #FFFFFF;
				display: flex;
				flex-direction: column;
				border: none;

				.tabbox {
					flex: 1;
					height: 100%;
					text-align: center;
					line-height: 92rpx;
					color: #666666;
					font-size: 28rpx;
					font-weight: 400;
					display: flex;
					justify-content: center;

					.activecllasscet {
						width: 96rpx;
						color: #2671E2;
						font-weight: 600;
						border-bottom: 4rpx solid #2671E2;
					}
				}
			}

		}

		.edit {
			margin: 20rpx 0 0 0;
			padding: 0 20rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.edits {
				padding: 10rpx 20rpx;
				background: #1890FF;
				color: #fff;
				border-radius: 16rpx;
				font-size: 32rpx;
			}
		}


		.grop {
			margin: 20rpx 0 0 0;
			padding: 20rpx;
			width: 100%;
			background: #fff;

			.title {
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 42rpx;
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;

				.title-icon {
					width: 12rpx;
					height: 20rpx;
					margin-right: 18rpx;
				}
			}

			.titles {
				width: 100%;
				display: flex;

				.lside {
					flex-grow: 1;
					height: 42rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 42rpx;
					margin-bottom: 24rpx;
					display: flex;
					align-items: center;
				}

				.rside {
					flex-shrink: 0;
					display: flex;
					align-items: center;

					.rside-item {
						margin: 0 10rpx 0 0;

						&.active {
							color: #1890FF;
						}
					}
				}
			}

			.grid5 {
				padding: 20rpx 0;
				grid-row-gap: 20rpx;

				.real {
					width: 100%;
					height: 100%;

					.realnum {
						width: 100%;
						text-align: center;
						height: 50rpx;
						font-size: 36rpx;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: bold;
						color: #333333;
						line-height: 50rpx;

						.qushi-icon {
							width: 28rpx;
							height: 14rpx;
							margin-left: 2rpx;
						}
					}

					.realtext {
						width: 100%;
						text-align: center;
						margin-top: 8rpx;
						height: 32rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 32rpx;
					}
				}
			}

			.grid4 {
				padding: 20rpx 0;
				grid-row-gap: 20rpx;

				.real {
					width: 100%;
					height: 100%;

					.realnum {
						width: 100%;
						text-align: center;
						height: 50rpx;
						font-size: 36rpx;
						font-family: SourceHanSansCN-Medium, SourceHanSansCN;
						font-weight: bold;
						color: #333333;
						line-height: 50rpx;

						.qushi-icon {
							width: 28rpx;
							height: 14rpx;
							margin-left: 2rpx;
						}
					}

					.realtext {
						width: 100%;
						text-align: center;
						margin-top: 8rpx;
						height: 32rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 32rpx;
					}
				}

			}
		}

		.grid5 {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
		}

		.grid4 {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
		}
	}
</style>