uni-zhihuikuangshan/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="title">{{item.title}}</view>

				<view class="tubiao">
					<view class="tubiao_box">
						<view class="charts-box">
							<qiun-data-charts type="pie" :opts="pie_1" :chartData="item.chartData" @getIndex="legend_click($event,item.title,item.table,item.num,index)" tooltipFormat="column_1" />
						</view>
					</view>
					<view class="tubiao_line">
						<view class="line">
							<view class="lable">起始时间</view>
							<picker mode="date" :value="item.date_start" @change="bindDateChange_start($event,index,item.table)">
								<view class="text">
									<view>{{item.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="item.date_end" @change="bindDateChange_end($event,index,item.table)">
								<view class="text">
									<view>{{item.date_end}}</view>
									<view>
										<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
									</view>
								</view>
							</picker>
						</view>
					</view>
				</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">{{item_2}}</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item_2,index_2) in item.table_data" :key="index_2" @row-click="go_detail(item.num,item_2.id)">
						<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" v-if="typeof(item_3) == 'string' || typeof(item_3) == 'object'">
							<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>
</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: [],


				// 图表数据
				// chartData: {
				// 	"series": [{
				// 		"data": [{
				// 			"name": "已完成",
				// 			"value": 23
				// 		}, {
				// 			"name": "未完成",
				// 			"value": 30
				// 		}]
				// 	}]
				// },
				pie_1: {
					"color": [
						"#1890FF",
						"#EE6666"
					],
					"dataLabel": true,
					"legend": {
						// "show":false,
						"position": "bottom",
						"float": "center",
						"lineHeight": 20,
					},
					"title": {
						"name": " "
					},
					"subtitle": {
						"name": " "
					},
				},
				
				// 起始时间
				date_start: "",
				// 结束时间
				date_end: currentDate_end,
			};
		},
		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()
					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 + "&status=" + ''
				})
			},

			bindDateChange_start($event,index,table){
				// console.log($event.detail.value,index,table)
				
				this.date_start = $event.detail.value
				this.list[index].date_start = $event.detail.value
				this.get_five_fixed_getYesOrNoDataByTableName(index,table)
			},
			bindDateChange_end($event,index,table){
				// console.log($event.detail.value,index,table)
				
				this.date_end = $event.detail.value
				this.list[index].date_end = $event.detail.value
				this.get_five_fixed_getYesOrNoDataByTableName(index,table)
			},
			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_getYesOrNoDataByTableName(index,table) {
				this.$api.five_fixed_getYesOrNoDataByTableName({
					table_name: table,
					date_start: this.date_start,
					date_end: this.date_end
				}).then((res) => {
					console.log(res)

					this.list[index].chartData = res.data.content.data[0].chartData
				})
			},
			
			go_detail(num,id){
				console.log(num,id)
				uni.navigateTo({
					url:"../../origanization/news/tab_2/all_list/detail/detail?table=" + num + "&id=" + id
				})
			},
			
			legend_click($event,title,table,num,index){
				console.log($event.currentIndex)
				let status = $event.currentIndex+1
				uni.navigateTo({
					url: "../../origanization/news/tab_1/all_list/all_list?title=" + title + "&table=" + table + "&num=" + num + "&status=" + status + "&date_start=" + this.list[index].date_start + "&date_end=" + this.list[index].date_end
				})
			}

		}
	}
</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;

			.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: 640rpx;
		background-color: #FFFFFF;
		// height: 900rpx;

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

		.tubiao_box {
			width: 640rpx;
			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>