uni-zhihuikuangshan/pages/origanization/news/tab_1/statistical_chart/statistical_chart.vue

<template>
	<view>
		<view class="list">
			<view class="tubiao">
				<view class="tubiao_title">
					<view class="text">{{tubiao_title}}</view>
				</view>
				<view class="tubiao_box">
					<view class="charts-box">
						<qiun-data-charts type="pie" :opts="pie_1" :chartData="chartData"
							@getIndex="legend_click($event)" tooltipFormat="column_1" />
					</view>
				</view>
				<view class="tubiao_line">
					<view class="line">
						<view class="lable">起始时间</view>
						<picker mode="date" :value="date_start" @change="bindDateChange_start">
							<view class="text">
								<view>{{date_start}}</view>
								<view>
									<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
								</view>
							</view>
						</picker>
					</view>
					<view class="line">
						<view class="lable">结束时间</view>
						<picker mode="date" :value="date_end" @change="bindDateChange_end">
							<view class="text">
								<view>{{date_end}}</view>
								<view>
									<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
								</view>
							</view>
						</picker>
					</view>
					<view class="line">
						<view class="lable">统计项</view>
						<view class="text" @click="change_census_type()">
							<view>
								{{tubiao_census_type}}
							</view>
							<view>
								<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item" v-for="(item,index) in data" :key="index" @click="go_detail(item.num,item.id)">
				<view class="inner">
					<view class="left">
						<view class="user"
							v-if="item.face != 'http://localhost/storage/avatar/avatar_15042504.png' && item.face != 'upload/face/1.jpg'">
							<image :src="item.face" mode="aspectFill"></image>
						</view>
						<view class="user"
							v-if="item.face == 'http://localhost/storage/avatar/avatar_15042504.png' || item.face == 'upload/face/1.jpg'">
							<view class="avatar">{{item.optname.split('')[0]}}</view>
						</view>
					</view>
					<view class="right">
						<view class="name">{{item.optname}}<text>{{item.depart}}</text></view>
						<view style="font-size: 34rpx;font-weight: 700; line-height: 60rpx;">{{item.category_name}}
						</view>
						<view class="text">
							<view v-html="item.str"></view>
						</view>
						<view class="img_box">
							<view class="img_box" v-for="(item_2,index_2) in item.picture" :key="index_2">
								<view class="img" v-for="(item_3,index_3) in item_2" :key="index_3"
									@click.stop="img_chakan(item_2,index_3)">
									<image :src="item_3" mode="aspectFill"></image>
								</view>
							</view>
						</view>
						<view class="time">{{item.optdt}}</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getNextDate
	} from "@/common/time.js"
	export default {
		data() {
			const currentDate_end = this.getDate({
				format: true
			})
			return {
				kq_title: "",
				title: "",
				menu: false,
				menu_1: [],
				menu_2: [],

				active_1: 0,

				// list
				table: "",

				page: 1,
				pageSize: 20,

				name: [],
				data: [],


				// 图表数据
				tubiao_title: "",

				// 图表数据
				chartData: {
					"series": [{
						"data": []
					}]
				},
				pie_1: {
					"dataLabel": true,
					"legend": {
						// "show":false,
						"position": "bottom",
						"float": "center",
						"lineHeight": 20,
					},
					"title": {
						"name": " "
					},
					"subtitle": {
						"name": " "
					},
					"extra": {
						"pie": {
							"border": false,
							"labelWidth": 20
						}
					}
				},

				// 起始时间
				date_start: "",
				// 结束时间
				date_end: currentDate_end,
				// 图标统计项
				tubiao_census_type: "",
				tubiao_census_type_fields: "",

				// 统计项配置参数
				TableFiledRemark: [],

				TableFiledRemark_name: []

			};
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title:option.title
			})
			this.title = option.title
			this.table = option.table
			
			this.change_active_3()
		},
		mounted() {
			this.get_five_fixed_fiveFixedKQ()
			this.get_five_fixed_getRecordDataByTableName()

			this.date_start = getNextDate(this.date_end, -30)
		},
		onReachBottom() {
			this.get_five_fixed_getRecordDataByTableName()
		},
		methods: {
			open_menu() {
				this.menu = !this.menu
			},
			change_active_1(index) {
				this.active_1 = index

				this.kq_title = this.menu_1[index]
				this.menu_2 = []
				this.get_five_fixed_getMenuDataByKQName()
			},
			change_active_3() {
				this.tubiao_title = this.title

				// 获取图表数据
				this.date_end = this.getDate()
				this.date_start = getNextDate(this.date_end, -30)
				this.get_five_fixed_getTableFiledRemark()
			},
			// 获取矿区
			get_five_fixed_fiveFixedKQ() {
				this.$api.five_fixed_fiveFixedKQ({

				}).then((res) => {
					this.menu_1 = res.data.content.data
					this.kq_title = res.data.content.data[0]
					this.title = res.data.content.data[0]

					this.get_five_fixed_getMenuDataByKQName()
				})
			},
			// 记录管理-分类
			get_five_fixed_getMenuDataByKQName() {

				this.$api.five_fixed_getMenuDataByKQName({
					kq_name: this.kq_title
				}).then((res) => {
					this.menu_2 = res.data.content.data
				})
			},
			// 获取该分类下的列表详情
			get_five_fixed_getRecordDataByTableName() {
				uni.showLoading({
					mask: true
				})
				this.$api.five_fixed_getRecordDataByTableName({
					table_name: this.table,
					page: this.page,
					pageSize: this.pageSize
				}).then((res) => {
					uni.hideLoading()

					console.log(res)
					if (this.table == '') {
						if (res.data.content.data.length < 1) {
							uni.showToast({
								icon: "none",
								title: "暂无更多内容。"
							})
						} else {
							this.page++
							this.data = this.data.concat(res.data.content.data)
						}

					} else {
						if (res.data.content.data.data.length < 1) {
							uni.showToast({
								icon: "none",
								title: "暂无更多内容。"
							})
						} else {
							this.page++
							this.data = this.data.concat(res.data.content.data.data)
						}

					}

				})
			},
			img_chakan(url, index) {
				uni.previewImage({
					current: index,
					urls: url,
					loop: true,
					longPressActions: true
				});
			},
			
			go_detail(num, id) {
				uni.navigateTo({
					url:"../../tab_2/all_list/detail/detail?table=" + num + "&id=" + id
				})
			},


			bindDateChange_start: function(e) {
				this.date_start = e.target.value
				this.get_five_fixed_getTableFiledTotalNumber()
			},
			bindDateChange_end: function(e) {
				this.date_end = e.target.value
				this.get_five_fixed_getTableFiledTotalNumber()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			// 获取统计项参数配置
			get_five_fixed_getTableFiledRemark() {
				this.TableFiledRemark_name = []
				this.$api.five_fixed_getTableFiledRemark({
					table_name: this.table
				}).then((res) => {
					this.TableFiledRemark = res.data.content.data

					let data = res.data.content.data

					data.forEach((item, index) => {
						this.TableFiledRemark_name.push(item.name)
					})

					this.tubiao_census_type = this.TableFiledRemark[0].name

					this.tubiao_census_type_fields = this.TableFiledRemark[0].fields

					this.get_five_fixed_getTableFiledTotalNumber()

				})
			},

			// 改变统计项
			change_census_type() {
				uni.showActionSheet({
					itemList: this.TableFiledRemark_name,
					success: (res) => {
						this.tubiao_census_type = this.TableFiledRemark[res.tapIndex].name
						this.tubiao_census_type_fields = this.TableFiledRemark[res.tapIndex].fields
						this.get_five_fixed_getTableFiledTotalNumber()
					}
				});
			},

			// 获取图表数据
			get_five_fixed_getTableFiledTotalNumber() {
				this.$api.five_fixed_getTableFiledTotalNumber({
					table_name: this.table,
					field_name: this.tubiao_census_type_fields,
					start_date: this.date_start,
					end_date: this.date_end
				}).then((res) => {
					this.chartData.series[0].data = res.data.content.data
				})
			},

			legend_click($event) {

				let _this = this;
				let curTime = new Date().getTime();
				let lastTime = _this.lastTapDiffTime;
				_this.lastTapDiffTime = curTime;
				//两次点击间隔小于300ms, 认为是双击
				let diff = curTime - lastTime;
				if (diff < 300) {
					console.log("双击")
					//_this.handleVideo('screen',index)自定义事件
					clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行

					uni.navigateTo({
						url: "../../origanization/news/tab_2/all_list/all_list?title=" + this.title + "&table=" +
							this
							.table + "&tubiao_census_type_fields=" + this.tubiao_census_type_fields +
							"&tubiao_census_type_fields_value=" + this.chartData.series[0].data[$event
								.currentIndex]
							.name.split('(')[0] + "&date_start=" + this.date_start + "&date_end=" + this.date_end
					})
				} else {
					// 单击事件延时300毫秒执行
					_this.lastTapTimeoutFunc = setTimeout(function() {
						console.log("单击")
						//_this.handleVideo('playOrStop',index)自定义事件
					}, 300);
				}

			}
		}
	}
</script>

<style lang="scss">
	.title {
		box-sizing: border-box;
		padding: 0 25rpx;
		height: 90rpx;

		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			align-items: center;

			.icon {
				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.text {
				max-width: 550rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-left: 18rpx;
				font-size: 30rpx;
				color: #009fe8;
			}
		}
	}

	.menu {
		background-color: #FFFFFF;
		border-radius: 20rpx;

		margin: 0 25rpx;
		width: 700rpx;

		margin-bottom: 40rpx;

		overflow: hidden;

		.menu_item {
			display: flex;

			.left {
				.item {
					width: 260rpx;
					text-align: center;
					padding: 40rpx 0;
					color: #8C8C8C;
					font-size: 30rpx;
					box-sizing: border-box;
				}

				.active {
					background-color: #F8FDFF;
					color: #00A0E8;
					border-left: 4rpx solid #00A0E8;
				}
			}

			.right {
				width: 390rpx;
				box-sizing: border-box;
				border-left: 4rpx solid #EEEEEE;

				/deep/.uni-collapse-item__title-wrap .uni-collapse-item__title-box .uni-collapse-item__title-text {
					min-width: 360rpx;
					font-size: 30rpx;
					line-height: 100rpx;
				}

				.title_box {
					.item {
						margin-left: 50rpx;
						border-bottom: 2rpx dashed #E5E5E5;
						height: 90rpx;

						display: flex;
						align-items: center;

						.icon {}

						.text {
							margin-left: 20rpx;
							font-size: 28rpx;
							color: #757575;

							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.item:last-child {
						border-bottom: none;
					}
				}
			}
		}
	}

	.list {
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 25rpx;

		.item {
			border-bottom: 1rpx solid #f0f0f0;
			margin-bottom: 40rpx;

			.inner {
				margin-bottom: 40rpx;
				width: 700rpx;
				display: flex;

				.left {
					.user {
						image {
							width: 90rpx;
							height: 90rpx;

							border-radius: 50%;
						}

						.avatar {
							width: 90rpx;
							height: 90rpx;
							text-align: center;
							line-height: 90rpx;
							border-radius: 50%;
							background-color: #7EB1A0;
							color: #FFFFFF;
							font-size: 36rpx;
							font-weight: 700;
						}
					}
				}

				.right {
					margin-left: 20rpx;

					width: 650rpx;

					.name {
						margin-top: 5rpx;
						font-size: 32rpx;

						text {
							margin-left: 20rpx;
							font-size: 28rpx;
							color: #3a3a3a;
						}
					}

					.text {
						width: 600rpx;
						margin-top: 10rpx;
						margin-bottom: 20rpx;
						font-size: 30rpx;
					}

					.img_box {
						width: 550rpx;
						overflow: hidden;

						.img {
							margin-bottom: 10rpx;
							float: left;
							margin-right: 20rpx;

							image {
								width: 170rpx;
								height: 170rpx;

								border-radius: 10rpx;
							}
						}

						.img:nth-child(3n) {
							margin-right: 0;
						}
					}

					.time {
						font-size: 26rpx;
						color: #999999;
					}


				}
			}
		}
	}

	.tubiao {
		position: relative;
		width: 700rpx;
		background-color: #FFFFFF;
		// height: 900rpx;

		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 25rpx;

		border-bottom: 2rpx solid #EEEEEE;
		margin-bottom: 40rpx;

		.tubiao_title {
			text-align: center;
			// height: 90rpx;

			.text {
				font-size: 38rpx;
				font-weight: 700;
			}
		}

		.tubiao_box {
			width: 650rpx;
			height: 640rpx;

			display: flex;
			justify-content: center;
			align-items: top;

			.charts-box {
				width: 100%;
				height: 640rpx;
			}
		}

		.tubiao_line {
			padding-top: 20rpx;
			width: 650rpx;
			border-top: 2rpx solid #f7f7f7;

			.line {
				display: flex;
				align-items: center;

				font-size: 30rpx;
				margin-bottom: 10rpx;

				.lable {
					color: #666666;
					width: 200rpx;
				}

				.text {
					width: 400rpx;
					border-radius: 8rpx;
					border: 2rpx solid #E9EBF2;

					box-sizing: border-box;
					padding: 10rpx 25rpx;

					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
</style>