goufangtong3/pagesA/index/dataCenter.vue

<template>
	<view class="dataCenter">
		<view class="dataCenter-header">
			<view class="u-flex u-row-between" style="padding: 20rpx 0 4rpx 0;border-bottom: 2rpx solid #F5F5F5;height: 100rpx;">
				<view class="header-item u-flex-col u-col-center" v-for="(item,index) in tabs" :key="index" @click="change(index)">
					<text :class="current == index ? 'active1' : 'active'">{{item}}</text>
					<image :style="{opacity:current == index ? 1 : 0}" src="../../static/images/dataCenter1-1.png" mode=""></image>
				</view>
			</view>
			<view class="header-box u-flex u-row-between">
				<view class="name u-flex" @click="showcity = !showcity" v-if="cityleft.length > 0">
					<text>{{cityleft[cityleftindex].name}}</text>
					<text>{{cityright[cityrightindex].name}}</text>
				</view>
				<view class="u-flex" v-show="current == 0">
					<view class="time" v-if="defaulttime">
						<biaofunDatetimePicker placeholder="" :end="defaulttime" fields="day" :defaultValue="defaulttime" @change="changeday"></biaofunDatetimePicker>
					</view>
					<u-icon name="arrow-down" color="#979797" size="28"></u-icon>
				</view>
				<view class="u-flex" v-show="current == 1">
					<view class="time" v-if="defaulttime">
						<biaofunDatetimePicker placeholder="" :end="defaulttime" fields="month" :defaultValue="defaulttime" @change="changemonth"></biaofunDatetimePicker>
					</view>
					<u-icon name="arrow-down" color="#979797" size="28"></u-icon>
				</view>
			</view>
		</view>
		<view v-if="current == 0 || current == 1">
			<view class="data-item" v-for="(item,index) in list" :key="index">
				<view class="item-left">
					{{item.name}}每{{current == 0 ? '日' : '月'}}成交
				</view>
				<view class="item-center u-flex u-row-between">
					<view class="item-item u-flex-col">
						<view class="item-item1">
							总成交量
						</view>
						<view class="item-item2 u-flex u-col-bottom">
							<text>{{item.cover_all}}</text>
							<text>套</text>
						</view>
						<view class="item-item3">
							{{item.area_all}}㎡
						</view>
						<view class="item-item4 u-flex-col u-row-center">
							<view class="u-flex" style="margin-bottom: 12rpx;">
								<text class="item-text1">环比:</text>
								<text class="item-text2">{{item.hb_all}}%</text>
							</view>
							<view class="u-flex">
								<text class="item-text1">同比:</text>
								<text class="item-text2">{{item.tb_all}}%</text>
							</view>
						</view>
					</view>
					<text class="xian"></text>
					<view class="item-item u-flex-col">
						<view class="item-item1">
							其中住宅
						</view>
						<view class="item-item2 u-flex u-col-bottom">
							<text>{{item.cover_residence}}</text>
							<text>套</text>
						</view>
						<view class="item-item3">
							{{item.area_residence}}㎡
						</view>
						<view class="item-item4 u-flex-col u-row-center">
							<view class="u-flex" style="margin-bottom: 12rpx;">
								<text class="item-text1">环比:</text>
								<text class="item-text2">{{item.hb_residence}}%</text>
							</view>
							<view class="u-flex">
								<text class="item-text1">同比:</text>
								<text class="item-text2">{{item.tb_residence}}%</text>
							</view>
						</view>
					</view>
					<text class="xian"></text>
					<view class="item-item u-flex-col">
						<view class="item-item1">
							其中非住宅
						</view>
						<view class="item-item2 u-flex u-col-bottom">
							<text>{{item.cover_general}}</text>
							<text>套</text>
						</view>
						<view class="item-item3">
							{{item.area_general}}㎡
						</view>
						<view class="item-item4 u-flex-col u-row-center">
							<view class="u-flex" style="margin-bottom: 12rpx;">
								<text class="item-text1">环比:</text>
								<text class="item-text2">{{item.hb_general}}%</text>
							</view>
							<view class="u-flex">
								<text class="item-text1">同比:</text>
								<text class="item-text2">{{item.tb_general}}%</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="current == 2">
			<view class="tabs2-box u-flex">
				<text :style="{color:tabs21 == 1 ? '#1F7EFF' : '#666666'}" @click="changetabs1(1)">近半年</text>
				<text :style="{color:tabs21 == 2 ? '#1F7EFF' : '#666666'}" @click="changetabs1(2)">近一年</text>
			</view>
			<view class="" style="height: 378rpx;width: 100%;">
				<echarts-box canvas-id="tabs21" ref="echarts" :option="option21"></echarts-box>
			</view>
			<scroll-view class="tabs21-type" scroll-x="true">
				<text :class="tabs21type == -1 ? 'tabs21-text tabs21-text1' : 'tabs21-text'" @click="changecity1(-1)">全市</text>
				<text v-for="(a,b) in qulist" :key="b" :class="tabs21type == b ? 'tabs21-text tabs21-text1' : 'tabs21-text'" @click="changecity1(b)">{{a.name}}</text>
			</scroll-view>
			<view class="tabs-tips" v-html="config.trend_remark_cover"></view>
			<view class="tabs2-box u-flex">
				<text :style="{color:tabs22 == 1 ? '#1F7EFF' : '#666666'}" @click="changetabs2(1)">近半年</text>
				<text :style="{color:tabs22 == 2 ? '#1F7EFF' : '#666666'}" @click="changetabs2(2)">近一年</text>
			</view>
			<view class="" style="height: 378rpx;width: 100%;">
				<echarts-box canvas-id="tabs22" ref="echarts" :option="option22"></echarts-box>
			</view>
			<scroll-view class="tabs21-type" scroll-x="true">
				<text :class="tabs22type == -1 ? 'tabs21-text tabs21-text1' : 'tabs21-text'" @click="changecity2(-1)">全市</text>
				<text v-for="(a,b) in qulist" :key="b" :class="tabs22type == b ? 'tabs21-text tabs21-text1' : 'tabs21-text'" @click="changecity2(b)">{{a.name}}</text>
			</scroll-view>
			<view class="tabs-tips" v-html="config.trend_remark_area"></view>
		</view>
		<view v-if="current == 3">
			<view class="tabs2-box u-flex">
				<text :style="{color:tabs31 == 1 ? '#1F7EFF' : '#666666'}" @click="changetabs3(1)">近半年</text>
				<text :style="{color:tabs31 == 2 ? '#1F7EFF' : '#666666'}" @click="changetabs3(2)">近一年</text>
			</view>
			<view class="" style="height: 378rpx;width: 100%;">
				<echarts-box canvas-id="tabs31" ref="echarts" :option="option31"></echarts-box>
			</view>
			<scroll-view class="tabs21-type" scroll-x="true">
				<text :class="tabs31type == -1 ? 'tabs21-text tabs21-text1' : 'tabs21-text'" @click="changecity3(-1)">全市</text>
				<text v-for="(a,b) in qulist" :key="b" :class="tabs31type == b ? 'tabs21-text tabs21-text1' : 'tabs21-text'" @click="changecity3(b)">{{a.name}}</text>
			</scroll-view>
			<view class="tabs-tips" v-html="config.trend_remark_price"></view>
		</view>
		<view class="changecity u-flex u-col-top" v-if="showcity" @click="showcity = false">
			<view class="city-box u-flex-col" @click.stop>
				<view class="scroll-box u-flex">
					<scroll-view class="scroll-left" scroll-y="true">
						<view :class="index == cityleftindex ? 'city-item city-item-active' : 'city-item'" v-for="(item,index) in cityleft" :key="index" @click="changecityleft(index)">
							{{item.name}}
						</view>
					</scroll-view>
					<scroll-view class="scroll-right" scroll-y="true">
						<u-radio-group v-model="cityrightindex1">
							<view class="right-item u-flex u-row-between" v-for="(item,index) in cityright" :key="index">
								<text :class="index == cityrightindex1 ? 'text-active' : 'text'" @click="cityrightindex1 = index">{{item.name}}</text>
								<u-radio :name="index"></u-radio>
							</view>
						</u-radio-group>
					</scroll-view>
				</view>
				<view class="city-btn u-flex u-row-between">
					<text @click="showcity = false">取消</text>
					<text @click="tosearch">确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import echartsBox from "../components/echarts-uniapp/echarts-uniapp.vue"
	import * as echarts from '../components/echarts-uniapp/echarts.min.js';
	import biaofunDatetimePicker from "../../components/biaofun-datetime-picker/biaofun-datetime-picker.vue"
	import getDataCenter from "../../common/echartDate.js"
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				config: {},

				option21: {},
				option22: {},
				option31: {},

				tabs: ['每日成交', '每月成交', '成交趋势', '价格趋势'],
				current: 0,

				showcity: false,
				cityleft: [],
				cityleftindex: 0,
				cityright: [],
				cityrightindex: 0,
				cityrightindex1: 0,
				daytime: '',
				monthtime: '',
				defaulttime: '',
				list: [],
				qulist: [],
				tabs21: 1,
				tabs22: 1,
				tabs21type: -1,
				tabs22type: -1,

				tabs31: 1,
				tabs31type: -1,
				title: ''
			}
		},
		onLoad(option) {
			this.title = option.title
			this.defaulttime = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM')
			this.daytime = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')
			this.monthtime = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm')
			this.getsheng()
			this.getconfig()
		},
		onShow() {
			if (this.title) {
				uni.setNavigationBarTitle({
					title: this.title
				})
			}
		},
		components: {
			echartsBox,
			biaofunDatetimePicker
		},
		computed: {
			...mapState(['defaultcity'])
		},
		methods: {
			changetabs3(index) {
				this.tabs31 = index
				this.getdata()
			},
			changecity3(index) {
				this.tabs31type = index
				this.getdata()
			},
			getconfig() {
				this.$u.post('/api/Index/platform_config').then(res => {
					this.config = res.data
				})
			},
			changecity2(index) {
				this.tabs22type = index
				this.getchengjiao(2)
			},
			changecity1(index) {
				this.tabs21type = index
				this.getchengjiao(1)
			},
			tosearch() {
				this.cityrightindex = this.cityrightindex1
				this.showcity = false
				this.tabs21 = 1
				this.tabs22 = 1
				this.tabs21type = -1
				this.tabs22type = -1

				this.tabs31 = 1
				this.tabs31type = -1
				this.getqu()
				this.getdata()
			},
			changecityleft(index) {
				this.cityleftindex = index
				this.cityrightindex1 = 0
				this.cityrightindex = 0
				this.getshi()
			},
			getsheng() {
				this.$u.post('/api/Data/area_list', {
					level: 1
				}).then(res => {
					this.cityleft = res.data
					this.cityleft.forEach((val, key) => {
						if (val.id == this.defaultcity.province_id) {
							this.cityleftindex = key
						}
					})
					this.getshi()
				})
			},
			getshi() {
				this.$u.post('/api/Data/area_list', {
					level: 2,
					province_id: this.cityleft[this.cityleftindex].id
				}).then(res => {
					this.cityright = res.data
					this.cityright.forEach((val, key) => {
						if (val.id == this.defaultcity.city_id) {
							this.cityrightindex1 = key
							this.cityrightindex = key
						}
					})
					this.getqu()
					this.getdata()
				})
			},
			getqu() {
				this.$u.post('/api/Data/area_list', {
					level: 3,
					city_id: this.cityright[this.cityrightindex].id
				}).then(res => {
					this.qulist = res.data
				})
			},
			changetabs1(index) {
				this.tabs21 = index
				this.getchengjiao(1)
			},
			changetabs2(index) {
				this.tabs22 = index
				this.getchengjiao(2)
			},
			getdata() {
				if (this.current == 0 || this.current == 1) {
					this.$u.post('/api/Data/turnover_info', {
						type: this.current == 0 ? 1 : 2,
						time: this.current == 0 ? this.daytime : this.monthtime,
						city_id: this.cityright[this.cityrightindex].id,
						default_time: 0
					}).then(res => {
						this.list = res.data
					})
				}
				if (this.current == 2) {
					this.getchengjiao(1)
					this.getchengjiao(2)
				}
				if (this.current == 3) {
					this.$u.post('/api/Data/trend_info_price', {
						type: this.tabs31,
						area_id: this.tabs31type == -1 ? this.cityright[this.cityrightindex].id : this.qulist[this.tabs31type].id,
					}).then(res => {
						var xAxis = []
						var yAxis = []
						res.data.forEach(val => {
							xAxis.unshift(`${val.month}月`)
							yAxis.unshift(val.price_all)
						})
						this.setechart(getDataCenter.getDataCenter(xAxis, yAxis, '价格'), 3)
					})
				}
			},
			getchengjiao(type) {
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				if (type == 1) {
					this.$u.post('/api/Data/trend_info_cover', {
						type: this.tabs21,
						area_id: this.tabs21type == -1 ? this.cityright[this.cityrightindex].id : this.qulist[this.tabs21type].id,
					}).then(res => {
						var xAxis = []
						var yAxis = []
						res.data.forEach(val => {
							xAxis.unshift(`${val.month}月`)
							yAxis.unshift(val.cover_all)
						})
						uni.showLoading({
							mask: true,
							title: "请稍后"
						})
						this.setechart(getDataCenter.getDataCenter(xAxis, yAxis, '总套数'), 1)
					})
				} else {
					this.$u.post('/api/Data/trend_info_area', {
						type: this.tabs22,
						area_id: this.tabs22type == -1 ? this.cityright[this.cityrightindex].id : this.qulist[this.tabs22type].id,
					}).then(res => {
						var xAxis = []
						var yAxis = []
						res.data.forEach(val => {
							xAxis.unshift(`${val.month}月`)
							yAxis.unshift(val.area_all)
						})
						uni.showLoading({
							mask: true,
							title: "请稍后"
						})
						this.setechart(getDataCenter.getDataCenter(xAxis, yAxis, '总面积'), 2)
					})
				}
			},
			changemonth(e) {
				this.monthtime = e.f6
				this.getdata()
			},
			changeday(e) {
				this.daytime = e.f1
				this.getdata()
			},
			setechart(data, type) {
				// console.log(data);
				// uni.showLoading({
				// 	mask:true,
				// 	title:"请稍后"
				// })
				setTimeout(() => {
					uni.hideLoading()
					if (type == 1) {
						this.option21 = data
					}
					if (type == 2) {
						this.option22 = data
					}
					if (type == 3) {
						this.option31 = data
					}
				}, 200)
				// this.option21 = data
			},
			change(index) {
				this.showcity = false
				this.current = index
				this.option21 = {}
				this.option22 = {}
				this.option31 = {}
				this.getdata()
			}
		}
	}
</script>

<style lang="scss">
	.dataCenter {
		.changecity {
			position: fixed;
			z-index: 99;
			width: 750rpx;
			height: calc(100vh - 220rpx);
			background-color: rgba(0, 0, 0, 0.4);
			left: 0;
			bottom: 0;

			.city-box {
				width: 750rpx;
				height: 70vh;
				background: #FFFFFF;

				.scroll-box {
					flex: 1;
					min-height: 1rpx;
					width: 750rpx;

					.scroll-right {
						flex: 1;
						height: 100%;

						.right-item {
							height: 100rpx;
							padding: 0 52rpx;

							.text {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
							}

							.text-active {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #1F7EFF;
							}
						}
					}

					.scroll-left {
						width: 258rpx;
						height: 100%;
						background: #F7F7F7;

						.city-item {
							width: 258rpx;
							line-height: 100rpx;
							// background: #FFFFFF;
							text-align: center;
							padding: 0 20rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.city-item-active {
							background-color: rgba(255, 255, 255, 1);
							color: rgba(31, 126, 255, 1);
						}
					}
				}

				.city-btn {
					width: 750rpx;
					height: 166rpx;
					background: #FFFFFF;
					padding: 0 48rpx;

					text:first-child {
						width: 200rpx;
						line-height: 84rpx;
						background: #CCCCCC;
						border-radius: 20rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}

					text:last-child {
						width: 414rpx;
						line-height: 84rpx;
						background: #1F7EFF;
						border-radius: 20rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}

		.tabs-tips {
			font-size: 18rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #CCCCCC;
			padding: 24rpx 30rpx 24rpx 30rpx;
			border-bottom: 1rpx solid #F5F5F5;
		}

		.tabs21-type {
			white-space: nowrap;
			margin: 0 20rpx;

			.tabs21-text {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				display: inline-block;
				padding: 10rpx 14rpx;
			}

			.tabs21-text1 {
				color: #1F7EFF;
			}
		}

		.tabs2-box {
			padding: 24rpx;
			border-bottom: 2rpx solid #F5F5F5;

			text {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-right: 36rpx;
			}
		}

		.data-item {
			width: 702rpx;
			background: rgba(31, 126, 255, 0.1);
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding-bottom: 14rpx;

			.item-center {
				width: 662rpx;
				height: 320rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 16rpx auto;

				.xian {
					width: 2rpx;
					height: 180rpx;
					background: #F5F5F5;
					border-radius: 20rpx;
				}

				.item-item {
					flex: 1;
					padding: 26rpx 20rpx 42rpx 20rpx;

					.item-item1 {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.item-item2 {
						text:first-child {
							font-size: 48rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						text:last-child {
							font-size: 24rpx;
							color: #999999;
							margin-bottom: 10rpx;
						}
					}

					.item-item3 {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-bottom: 20rpx;
					}

					.item-item4 {
						// width: 168rpx;
						height: 98rpx;
						background: #F5F5F5;
						border-radius: 8rpx;
						padding: 0 10rpx;

						.item-text1 {
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.item-text2 {
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FF2600;
						}
					}
				}
			}

			.item-left {
				width: 242rpx;
				line-height: 80rpx;
				background: #1F7EFF;
				border-radius: 20rpx 0px 20rpx 0px;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-bottom: 8rpx;
			}
		}

		.header-box {
			width: 702rpx;
			height: 80rpx;
			background: #E8F2FF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 0 20rpx;

			.name {
				text:first-child {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-right: 20rpx;
				}

				text:last-child {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.time {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-right: 10rpx;
			}
		}

		.dataCenter-header {
			padding: 0 24rpx 1rpx 24rpx;
			// height: 120rpx;
			background-color: #fff;
			position: sticky;
			top: 0;
			left: 0;
			z-index: 10;


			.header-item {
				.active {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.active1 {
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				image {
					width: 50rpx;
					height: 20rpx;
					// margin-top: 10rpx;
				}
			}
		}
	}
</style>