uni-zhihuikuangshan-2/components/t-o-news-tab-1/t-o-news-tab-1 - 初始版本备份.vue

<template>
	<view>
		<scroll-view scroll-x>
			<view class="tab">
				<view class="item" @click="change_active(index,item)" v-for="(item,index) in fiveFixedCategory" :key="index">
					<view class="text" :class="active == index?'active':''">{{item}}</view>
				</view>

			</view>
		</scroll-view>

		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" v-if="item.table_data.length > 0">
				<view class="icon_tubiao" @click="popup_tubiao(item)">
					<image src="./icon/icon_tubiao.png" mode=""></image>
				</view>
				<view class="title">{{item.title}}</view>

				<uni-table border emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="60">序号</uni-th>
						<uni-th align="center" v-for="(item_2,index_2) in item.name" :key="index_2">{{item_2}}</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item_2,index_2) in item.table_data" :key="index_2">
						<uni-td style="vertical-align: middle;" align="center">
							<view class="icon">
								<image v-if="index_2 < 3" src="./icon/new.png" mode=""></image> <text
									style="margin-left: 10rpx;">{{index_2+1}}</text>
								<!-- <text style="margin-left: 10rpx;">{{index_2+1}}</text> -->
							</view>
						</uni-td>
						<uni-td style="vertical-align: middle;" align="center" v-for="(item_3,index_3) in item_2" :key="index_3">
							<view v-if="typeof(item_3) == 'object'" style="display: flex;align-items: center;">
								<image style="margin-right: 10rpx;" v-for="(item_4,index_4) in item_3" :src="item_4"
									:key="index_4">
								</image>
							</view>
							<view v-else>{{item_3}}</view>
						</uni-td>
					</uni-tr>

				</uni-table>

				<view class="btn">
					<view class="icon">
						<image src="./icon/btn.png" mode=""></image>
					</view>
					<view class="btn_text" @click="go_all_list(item.title,item.table,item.num)">点击查看全部信息</view>
				</view>
			</view>
		</view>


		<view class="popup_tubiao">
			<uni-popup ref="popup_tubiao">
				<view class="tubiao">
					<view class="tubiao_title">
						<view class="icon"></view>
						<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"
								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>

			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		getNextDate
	} from "@/common/time.js"


	export default {
		name: "t-o-news-tab-1",
		data() {
			const currentDate_end = this.getDate({
				format: true
			})
			return {
				active: 0,

				// 五定表分类
				fiveFixedCategory: [],
				// 五定表列表
				list: [],
				// 图表数据
				tubiao: {},


				// 图表数据
				chartData: {
					"series": [{
						// "data": [{
						// 		"name": "一班 (50)",
						// 		"value": 50
						// 	}, {
						// 		"name": "二班",
						// 		"value": 30
						// 	},
						// 	{
						// 		"name": "三班",
						// 		"value": 20
						// 	},
						// 	{
						// 		"name": "二班",
						// 		"value": 30
						// 	},
						// ]
						"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.date_start = getNextDate(this.date_end, -30)
			this.get_five_fixed_fiveFixedCategory()
		},
		methods: {
			change_active(index, item) {
				this.active = index

				this.get_list(item)
			},
			// 五定表分类
			get_five_fixed_fiveFixedCategory() {
				this.$api.five_fixed_fiveFixedCategory({

				}).then((res) => {
					// console.log(res)

					this.fiveFixedCategory = res.data.content.data

					this.get_list(res.data.content.data[0])
				})
			},
			// 五定表列表
			get_list(category_name) {
				uni.showLoading({
					mask: true
				})
				this.$api.five_fixed_fiveFixed({
					category_name: category_name
				}).then((res) => {
					uni.hideLoading()
					// console.log(res.data.content.data)

					this.list = res.data.content.data
				})
			},
			go_all_list(title, table,num) {
				uni.navigateTo({
					url: "../../origanization/news/tab_1/all_list/all_list?title=" + title + "&table=" + table + "&num=" + num
				})
			},

			popup_tubiao(item) {
				// console.log(item)
				this.tubiao = item

				this.chartData.series[0].data = []
				this.tubiao_census_type = ""

				this.$refs.popup_tubiao.open()

				this.get_five_fixed_getTableFiledRemark(item.table)
			},
			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(table) {
				uni.showLoading({
					mask: true
				})
				this.TableFiledRemark_name = []
				this.$api.five_fixed_getTableFiledRemark({
					table_name: 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) => {
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						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.tubiao.table,
					field_name: this.tubiao_census_type_fields,
					start_date: this.date_start,
					end_date: this.date_end
				}).then((res) => {
					// console.log(res)

					this.chartData.series[0].data = res.data.content.data
				})
			}

		}
	}
</script>

<style lang="scss">
	.uni-table-th.table--border {
		color: #000000;
		background-color: #D8D8D8;
	}

	.uni-table-td.table--border {
		color: #666666;
	}

	.tab {
		display: flex;

		margin-bottom: 20rpx;
		background-color: #FFFFFF;

		box-sizing: border-box;
		padding: 0 20rpx;

		.item {
			background-color: #FFFFFF;

			.text {
				box-sizing: border-box;

				height: 90rpx;
				line-height: 90rpx;

				width: 188rpx;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				font-size: 30rpx;
				color: #666666;
			}

			.active {
				font-weight: 700;
				color: #000000;
				border-bottom: 4rpx solid #009FE8;
			}

		}
	}

	.list {
		box-sizing: border-box;
		padding: 0 25rpx;

		.item {
			position: relative;

			margin-bottom: 20rpx;
			width: 700rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;

			box-sizing: border-box;
			padding: 0 25rpx;
			padding-bottom: 20rpx;

			.icon_tubiao {
				position: absolute;
				top: 40rpx;
				right: 30rpx;

				image {
					width: 46rpx;
					height: 46rpx;
					display: block;
				}
			}

			.title {
				text-align: center;
				height: 120rpx;
				line-height: 120rpx;
				font-size: 40rpx;
				font-weight: 700;
				
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.btn {
				margin: 20rpx auto;
				width: 400rpx;
				height: 50rpx;

				background-color: #69BBFA;
				border-radius: 50rpx;

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

				.icon {
					image {
						width: 23rpx;
						height: 24rpx;

						display: block;
					}
				}

				.btn_text {
					margin-left: 10rpx;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.icon {
		position: relative;
		top: 0;
		right: 0;

		image {
			width: 33rpx;
			height: 18rpx;
		}
	}

	image {
		width: 80rpx;
		height: 80rpx;
		display: block;
	}

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

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

		.tubiao_title {
			height: 90rpx;
			display: flex;
			align-items: center;

			.icon {
				width: 6rpx;
				height: 40rpx;
				background-color: #009fe8;
			}

			.text {
				margin-left: 20rpx;
				font-size: 36rpx;
				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>