uni-zhihuikuangshan/components/t-o-news-tab-2/t-o-news-tab-2.vue

<template>
	<view>
		<!-- 标题 -->
		<view class="title" @click="open_menu()">
			<view class="left">
				<view class="icon">
					<image src="./icon/menu.png" mode=""></image>
				</view>
				<view class="text">{{title}}</view>
			</view>
			<view class="right">
				<view class="icon">
					<image src="./icon/right_icon.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="menu" v-show="menu">
			<view class="menu_item">
				<view class="left">
					<view class="item" v-for="(item,index) in menu_1" :key="index" @click="change_active_1(index)"
						:class="active_1 == index ? 'active' : ''">{{item}}</view>
				</view>
				<view class="right">
					<view class="item" v-for="(item,index) in menu_2" :key="index" @click="change_active_2(index)">
						<view class="icon" v-if="active_2 == index">
							<image src="./icon/active.png" mode=""></image>
						</view>
						<view class="text" :style="{color: active_2 == index ? '#000' : ''}">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="tubiao" v-if="title != '全部'">
				<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 class="text">
							<view v-html="item.str"></view>
						</view>
						<view class="img_box">
							<view 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">
									<image :src="item_3" mode="aspectFill" @click.stop="img_chakan(item_3)"></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 {
		name: "t-o-news-tab-2",
		data() {
			const currentDate_end = this.getDate({
				format: true
			})
			return {
				title: "全部",
				menu: false,
				menu_1: [],
				menu_2: [],

				active_1: 0,
				active_2: 0,

				// list
				table: "",

				page: 1,
				pageSize: 20,

				name: [],
				data: [],


				// 图表数据
				tubiao_title: "",

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

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

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

				TableFiledRemark_name: []

			};
		},
		mounted() {
			this.get_five_fixed_fiveFixedCategory()
			this.get_five_fixed_getRecordDataByTableName()

			this.date_start = getNextDate(this.date_end, -30)
		},
		methods: {
			// 翻页
			nextPage() {
				this.page++
				this.get_five_fixed_getRecordDataByTableName()
			},
			open_menu() {
				this.menu = !this.menu
			},
			change_active_1(index) {
				this.active_1 = index
				this.active_2 = 0

				this.title = this.menu_1[index]
				this.get_five_fixed_getRecordDataByCategoryName(this.menu_1[index])
			},
			change_active_2(index) {
				this.active_2 = index
				this.title = this.menu_2[index].title
				this.tubiao_title = this.menu_2[index].title

				// 当前详情参数
				this.table = this.menu_2[index].table
				// 获取图表数据
				this.date_end = this.getDate()
				this.date_start = getNextDate(this.date_end, -30)
				this.get_five_fixed_getTableFiledRemark()
				// 获取列表
				this.page = 1
				this.data = []
				this.get_five_fixed_getRecordDataByTableName()
				this.open_menu()
			},
			// 记录管理分类
			get_five_fixed_fiveFixedCategory() {
				this.$api.five_fixed_fiveFixedCategory({

				}).then((res) => {
					this.menu_1 = res.data.content.data

					this.get_five_fixed_getRecordDataByCategoryName(res.data.content.data[0])
				})
			},
			// 获取记录管理列表
			get_five_fixed_getRecordDataByCategoryName(category_name) {
				uni.showLoading({
					mask: true
				})
				this.$api.five_fixed_getRecordDataByCategoryName({
					category_name: category_name
				}).then((res) => {
					uni.hideLoading()

					this.menu_2 = res.data.content.data
				})
			},
			// 获取该分类下的列表详情
			get_five_fixed_getRecordDataByTableName() {
				console.log(this.table)
				this.$api.five_fixed_getRecordDataByTableName({
					table_name: this.table,
					page: this.page,
					pageSize: this.pageSize
				}).then((res) => {
					this.data = this.data.concat(res.data.content.data.table_data.data)
				})
			},
			img_chakan(url) {
				let data = []
				data[0] = url
				uni.previewImage({
					urls: data
				});
			},
			go_detail(num, id) {
				uni.navigateTo({
					url: "../../origanization/news/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() {
				uni.showLoading({
					mask: true
				})
				this.TableFiledRemark_name = []
				this.$api.five_fixed_getTableFiledRemark({
					table_name: this.table
				}).then((res) => {
					uni.hideLoading()
					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) {
				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
				})
			}
		}
	}
</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;

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

			.text {
				margin-left: 18rpx;
				font-size: 30rpx;
				color: #009fe8;
			}
		}

		.right {
			text-align: right;
			width: 50rpx;

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

	.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;
					line-height: 120rpx;
					color: #8C8C8C;
					box-sizing: border-box;
				}

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

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

				.item {
					position: relative;
					line-height: 120rpx;

					display: flex;

					.icon {
						position: absolute;
						left: 0;
						top: 0;

						image {
							width: 14rpx;
							height: 26rpx;
						}
					}

					.text {
						margin-left: 48rpx;
						color: #8C8C8C;

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

	.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;
						font-size: 30rpx;
					}

					.img_box {
						margin-top: 20rpx;

						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>