zh_tv/pages/index/index.vue

<template>
	<view class="box">
		<image class="bg-img" src="/static/bg.png" mode=""></image>
		<image class="bt-box" src="/static/bt.png" mode=""></image>
		<view class="top-box">
			<view class="top-left">
				<uni-dateformat class="fc-f fs-40 mr-32" :format="'yyyy-MM-dd hh:mm:ss'"
					:date="new Date().toString()"></uni-dateformat>
				<!-- 				<view class="fc-f fs-40 mr-32">
					{{currentDate}}
				</view>
				<view class="fc-f fs-40 mr-32">
					{{currentTime}}
				</view> -->
				<view class="fc-f fs-40">
					{{weekday}}
				</view>
			</view>
			<!-- 			<view class="top-left">
				<view class="fc-f fs-40">
					26°C
				</view>
			</view> -->
		</view>

		<view class="data-box">
			<!-- 左 -->
			<view class="left-box flex-1">
				<view class="top-left mb-56">
					<view class="amount-box flex-1">
						<image class="amount-img" src="/static/k1.png" mode=""></image>
						<image class="amount-img-two z-3" src="/static/zje.png" mode=""></image>
						<view class="z-3">
							<view class="fc-00D5FF fw-b fs-48">
								乡村振兴
							</view>
							<!-- 							<view class="fc-00D5FF fw-b fs-48">
								￥{{setTotalMoney(totalData.total_money)}}万
							</view>
							<view class="fc-f fs-14">
								收款总金额
							</view> -->
						</view>
					</view>
					<view class="amount-box flex-1 mrl-12">
						<image class="amount-img" src="/static/k1.png" mode=""></image>
						<image class="amount-img-two z-3" src="/static/zbs.png" mode=""></image>
						<view class="z-3">
							<view class="fc-00D5FF fw-b fs-48">
								民营经济
							</view>
							<!-- 							<view class="fc-00D5FF fw-b fs-48">
								{{totalData.count}}
							</view>
							<view class="fc-f fs-14">
								收款总笔数
							</view> -->
						</view>
					</view>
					<view class="amount-box flex-1">
						<image class="amount-img" src="/static/k1.png" mode=""></image>
						<image class="amount-img-two z-3" src="/static/zrs.png" mode=""></image>
						<view class="z-3">
							<view class="fc-00D5FF fw-b fs-48">
								实体联盟
							</view>
							<!-- 							<view class="fc-00D5FF fw-b fs-48">
								{{totalData.total_member}}
							</view>
							<view class="fc-f fs-14">
								消费总人数
							</view> -->
						</view>
					</view>
				</view>

				<view class="flex-1 list-box">
					<image class="list-img" src="/static/k3.png" mode=""></image>
					<view class="title-box">
						<image class="title-img" src="/static/xfmx.png" mode=""></image>
					</view>
					<!-- 滚动列表 -->
					<swiper class="scroll-view-css z-3" circular :indicator-dots="false" :autoplay="true"
						:interval="800" :duration="800" :vertical="true" :circular='true' :display-multiple-items="8"
						@change="listChang">
						<swiper-item v-for="(item,i) in listData" :key="i">
							<view class="item-box">
								<view class="user-box w-30">
									<image class="user-img" :src="item.head_img" mode=""></image>
									<view class="">
										<view class="fs-32 fc-f w-90 text-overflow-ellipsis-one">
											{{item.nickname}}
										</view>
										<view class="fs-28 fc-B2D6FF">
											消费者
										</view>
									</view>
								</view>
								<view class="w-30">
									<view class="fs-32 fc-f w-90 text-overflow-ellipsis-one">
										{{item.shop_name}}
									</view>
									<view class="fs-28 fc-B2D6FF">
										消费门店
									</view>
								</view>
								<view class="w-20">
									<view class="fs-32 fc-f">
										￥{{item.pay_money}}
									</view>
									<view class="fs-28 fc-B2D6FF">
										消费金额
									</view>
								</view>
								<view class="w-20 t-r">
									<!-- 									<view class="fs-32 fc-f">
										{{item.created_at}}
									</view> -->
									<!-- 									<view class="fs-28 fc-B2D6FF text-align-right">
										消费时间
									</view> -->
									<view class="fs-32 fc-f">
										银联数字收款支付
									</view>
									<view class="fs-28 fc-B2D6FF text-align-right">
										银联码
									</view>
								</view>
							</view>
							<view class="hr"></view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 右 -->
			<view class="right-box flex-1">
				<view class="flex-1 chart-box">
					<image class="chart-bg" src="/static/k2.png" mode=""></image>
					<view class="title-box">
						<image class="title-img" src="/static/kbt.png" mode=""></image>
						<view class="fc-f fs-28 title-right">
							单位（元）
						</view>
					</view>
					<view class="flex-1 z-3 column-box">
						<!-- 柱状图 -->
						<columnVue ref="columnRef" class="z-3"></columnVue>
					</view>
				</view>
				<view class="flex-1 chart-box mbt-12">
					<image class="chart-bg" src="/static/k2.png" mode=""></image>
					<view class="title-box mb-15">
						<image class="title-img" src="/static/zxxfmx.png" mode=""></image>
						<!-- 						<view class="bfje-num">
							<view class="bfje-title">
								<image class="bf-img" src="/static/bfje.png" mode=""></image>
								<view class="fc-B2D6FF fs-28">
									总帮扶金额(元)
								</view>
							</view>
							<view class="fc-f fs-40">
								{{Number(summaryDaya.total_money).toFixed(2)}}
							</view>
						</view> -->
					</view>
					<swiper class="scroll-view-css z-3" circular :indicator-dots="false" :autoplay="true"
						:interval="850" :duration="800" :vertical="true" :circular='true' :display-multiple-items="2">
						<swiper-item v-for="(item,i) in newListData" :key="i">
							<view class="item-box-two">
								<view class="user-box w-30">
									<image class="user-img" :src="item.head_img" mode=""></image>
									<view class="">
										<view class="fs-32 fc-f w-90 text-overflow-ellipsis-one">
											{{item.nickname}}
										</view>
										<view class="fs-28 fc-B2D6FF">
											消费者
										</view>
									</view>
								</view>
								<view class="w-30">
									<view class="fs-32 fc-f w-90 text-overflow-ellipsis-one">
										{{item.shop_name}}
									</view>
									<view class="fs-28 fc-B2D6FF">
										消费门店
									</view>
								</view>
								<view class="w-20">
									<view class="fs-32 fc-f">
										￥{{item.pay_money}}
									</view>
									<view class="fs-28 fc-B2D6FF">
										消费金额
									</view>
								</view>
							</view>
							<view class="hr"></view>
						</swiper-item>
					</swiper>
					<!-- 					<view class="flex-1 tj-box">
						<view class="hx-box z-3">
							<ringVue ref="ringRef"></ringVue>
						</view>
						<view class="bf-box mr-86 ml-28">
							<view class="bf-num">
								<image class="yhbf-img" src="/static/yhbf.png" mode=""></image>
								<view class="fc-f fs-40 z-3 text-align-center">
									￥{{Number(summaryDaya.total_member).toFixed(2)}}
								</view>
							</view>
							<view class="bf-title">
								<image class="yh-bg" src="/static/yh-bg.png" mode=""></image>
								<image class="yh-img z-3" src="/static/yh.png" mode=""></image>
								<view class="fs-28 fc-f z-3">
									用户帮扶资金 {{userGdp}}%
								</view>
							</view>
						</view>
						<view class="bf-box">
							<view class="bf-num">
								<image class="yhbf-img" src="/static/dpbf.png" mode=""></image>
								<view class="fc-f fs-40 z-3 text-align-center">
									￥{{Number(summaryDaya.total_shop).toFixed(2)}}
								</view>
							</view>
							<view class="bf-title">
								<image class="yh-bg" src="/static/dp-bg.png" mode=""></image>
								<image class="yh-img z-3" src="/static/dp.png" mode=""></image>
								<view class="fs-28 fc-f z-3">
									店铺帮扶资金 {{shopGdp}}%
								</view>
							</view>
						</view>
					</view> -->
				</view>
				<view class="flex-1 chart-box">
					<image class="chart-bg" src="/static/k2.png" mode=""></image>
					<view class="title-box">
						<image class="title-img" src="/static/kbt.png" mode=""></image>
					</view>
					<view class="flex-1 z-3 column-box">
						<!-- 曲线图 -->
						<lineVue ref="lineRef"></lineVue>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import columnVue from './components/column.vue';
	import lineVue from './components/line.vue';
	// import ringVue from './components/ring.vue';
	import {
		chartShop,
		chartConsume,
		chartTotal,
		chartList,
		chartSummary,
		chartNewList
	} from '@/api/chart.js';
	export default {
		components: {
			columnVue,
			lineVue,
			// ringVue
		},
		data() {
			return {
				timer: '', //定时器
				listData: [],
				currentDate: '',
				currentTime: '',
				weekday: '',
				totalData: {},
				summaryDaya: {},
				shopGdp: '',
				userGdp: '',
				page: 1,
				total: 0,
				newListData: [],
				orderId: ''
			}
		},
		onReady() {
			if (window.plus) { // 仅在5+环境中有效
				plus.screen.lockOrientation(
					'portrait-primary'); // 锁定为竖屏，如果你想锁定为横屏，可以使用 'landscape-primary' 或 'landscape-secondary'
			} else {
				// 对于非5+环境，例如H5，你可能需要使用CSS媒体查询或其他JavaScript库来处理横屏模式。
			}
		},
		mounted() {
			// document.addEventListener('keydown', (event) => {
			// 	event.preventDefault();
			// 	event.stopPropagation();
			// });
			this.updateDateTime()
			setInterval(() => { // 每分钟更新一次日期和时间
				this.updateDateTime();
			}, 60000); // 60000毫秒 = 1分钟
			this.updateTime(); // 初始化时间显示
			setInterval(this.updateTime, 1000); // 每秒更新时间
			this.chartShop()
			this.chartConsume()
			this.chartTotal()
			this.chartList()
			// this.chartSummary()
		},
		methods: {
			setTotalMoney(money) {
				let m = ((money * 1 + 100000) / 10000).toFixed(2);
				return m
			},
			chartSummary() {
				chartSummary().then((res) => {
					if (res.code === 1) {
						this.summaryDaya = res.data
						this.shopGdp = ((Number(res.data.total_shop).toFixed(2) / Number(res.data.total_money)
							.toFixed(2)) * 100).toFixed(0)
						this.userGdp = ((Number(res.data.total_member).toFixed(2) / Number(res.data.total_money)
							.toFixed(2)) * 100).toFixed(0)
						this.$refs.ringRef.getServerData(res.data)
					}
				})
			},
			chartList() {
				chartList({
					page: this.page
				}).then((res) => {
					if (res.code === 1) {
						this.total = res.data.total
						this.listData = [...this.listData, ...res.data.items]
						this.orderId = this.listData[0].id
						// res.data.items.forEach((j, k) => {
						// 	if (k <= 9 && this.page === 1) {
						// 		this.newListData.push(j)
						// 	}
						// });
						this.newListData = res.data.items.slice(0, 10)
						setInterval(() => {
							this.chartNewList()
						}, 5000)
					}
				})
			},
			chartNewList() {
				chartNewList({
					order_id: this.orderId
				}).then((res) => {
					if (res.code === 1) {
						if (res.data.id) {
							this.orderId = res.data.id
							this.newListData.splice(0, 1)
							this.newListData.push(res.data)
							// console.log(this.newListData, '1111111');
						}
					}
				})
			},
			listChang(e) {
				// console.log(e.detail.current, '111111111111');
				if (e.detail.current === 90) {
					this.page++
					this.chartList()
				}
			},
			chartTotal() {
				chartTotal().then((res) => {
					this.totalData = res.data
				})
			},
			chartConsume() {
				chartConsume().then((res) => {
					this.$refs.columnRef.getServerData(res)
				})
			},
			chartShop() {
				chartShop().then((res) => {
					this.$refs.lineRef.getServerData(res.categories, res.series)
				})
			},
			updateTime() {
				// 指定中文区域，并使用24小时制
				this.currentTime = new Date().toLocaleTimeString('zh-CN', {
					hour12: false
				});
			},
			updateDateTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份补0
				const day = now.getDate().toString().padStart(2, '0'); // 日期补0

				// 生成 YYYY-MM-DD 格式的日期
				this.currentDate = `${year}-${month}-${day}`;

				// 获取星期几 (返回0-6, 0代表星期日)
				const weekDayNumber = now.getDay();
				const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				this.weekday = weekDays[weekDayNumber];
			}
		}
	}
</script>

<style>
	.t-r {
		text-align: right;
	}

	.box {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.bg-img {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100vw;
		height: 101vh;
	}

	.bt-box {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 39rpx;
	}

	.top-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx 16rpx 12rpx;
		margin-bottom: 10rpx;
		position: relative;
		z-index: 2;
	}

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

	.text-align-center {
		text-align: center;
	}

	.text-overflow-ellipsis-one {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.fw-b {
		font-weight: bold;
	}

	.fc-00D5FF {
		color: #00D5FF;
	}

	.fc-B2D6FF {
		color: #B2D6FF;
	}

	.fc-f {
		color: #fff;
	}

	.fs-13 {
		font-size: 13rpx;
	}

	.fs-48 {
		font-size: 9rpx;
	}

	.fs-10 {
		font-size: 10rpx;
	}

	.fs-40 {
		font-size: 7rpx;
	}

	.fs-32 {
		font-size: 6.2rpx;
	}

	.fs-28 {
		font-size: 5rpx;
	}

	.fs-7 {
		font-size: 7rpx;
	}

	.fs-16 {
		font-size: 16rpx;
	}

	.fs-5 {
		font-size: 5rpx;
	}

	.fs-14 {
		font-size: 5rpx;
	}

	.mr-32 {
		margin-right: 6rpx;
	}

	.mr-6 {
		margin-right: 6rpx;
	}

	.mr-86 {
		margin-right: 16rpx;
	}

	.ml-28 {
		margin-left: 28rpx;
	}

	.ml-142 {
		margin-left: 142rpx;
	}

	.mb-10 {
		margin-bottom: 10rpx;
	}

	.mb-15 {
		margin-bottom: 15rpx;
	}

	.mb-5 {
		margin-bottom: 5rpx;
	}

	.mb-26 {
		margin-bottom: 26rpx;
	}

	.mb-56 {
		margin-bottom: 10rpx;
	}

	.mrl-12 {
		margin: 0 12rpx;
	}

	.mbt-12 {
		margin: 12rpx 0;
	}

	.text-align-right {
		text-align: right;
	}

	.flex-1 {
		flex: 1;
	}

	.z-3 {
		position: relative;
		z-index: 3;
	}

	.w-30 {
		width: 30%;
	}

	.w-20 {
		width: 20%;
	}

	.left-box {
		display: flex;
		flex-direction: column;
		width: 384rpx;
		margin-right: 12rpx;
	}

	.data-box {
		padding: 0 23rpx 23rpx 25rpx;
		box-sizing: border-box;
		display: flex;
		flex: 1;
	}

	.amount-box {
		width: 121rpx;
		height: 39rpx;
		position: relative;
		padding: 3rpx 9rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.amount-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 121rpx;
		height: 100%;
		z-index: 2;
	}

	.amount-img-two {
		width: 32rpx;
		height: 32rpx;
		margin-right: 7.8rpx;
		flex-shrink: 0;
	}

	.list-box {
		width: 386rpx;
		height: 297rpx;
		position: relative;
		padding: 12rpx 7rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.list-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 386rpx;
		height: 297rpx;
		z-index: 2;
	}

	.right-box {
		display: flex;
		flex-direction: column;
		width: 304rpx;
		height: 350rpx;
	}

	.chart-box {
		width: 304rpx;
		height: 105rpx;
		position: relative;
		padding: 7rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.chart-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 304rpx;
		height: 105rpx;
		z-index: 2;
	}

	.title-box {
		position: relative;
		width: 274rpx;
		height: 15rpx;
	}

	.title-img {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 274rpx;
		height: 15rpx;
		z-index: 2;
	}

	.title-right {
		text-align: right;
		position: relative;
		top: 4rpx;
		z-index: 2;
	}

	.bfje-num {
		position: absolute;
		top: 0;
		right: 0;
		padding: 2rpx 4rpx 3rpx;
		box-sizing: border-box;
		border-radius: 2rpx;
		background: linear-gradient(to right, RGBA(19, 56, 87, 1), RGBA(0, 28, 59, 1));
		z-index: 2;
	}

	.bfje-title {
		display: flex;
		align-items: center;
		margin-bottom: 1rpx;
	}

	.bf-img {
		width: 6rpx;
		height: 6rpx;
		margin-right: 1rpx;
	}

	.tj-box {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bf-box {
		width: 73rpx;
		height: auto;
	}

	.bf-num {
		width: 73rpx;
		height: 35rpx;
		position: relative;
		margin-bottom: 4rpx;
	}

	.bf-title {
		width: 100%;
		height: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.yh-bg {
		position: absolute;
		top: 0;
		height: 0;
		width: 73rpx;
		height: 10rpx;
		z-index: 2;
	}

	.yh-img {
		width: 7rpx;
		height: 7rpx;
		margin-right: 1rpx;
	}

	.yhbf-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 73rpx;
		height: 35rpx;
		z-index: 2;
	}

	.hx-box {
		width: 54rpx;
		height: 54rpx;
	}

	.scroll-view-css {
		width: 100%;
		height: 269rpx;
		overflow: auto;
		padding: 5rpx 0;
		box-sizing: border-box;
	}

	.item-box {
		width: 370rpx;
		height: 27rpx;
		background: rgba(0, 161, 255, 0.05);
		border-radius: 9rpx;
		margin-bottom: 6rpx;
		padding: 5rpx 9rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-box-two {
		width: 100%;
		height: 27rpx;
		background: rgba(0, 161, 255, 0.05);
		border-radius: 9rpx;
		margin-bottom: 6rpx;
		padding: 5rpx 9rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.hr {
		width: 375rpx;
		height: 6rpx;
		background: transparent;
	}

	.user-box {
		display: flex;
		align-items: center;
	}

	.user-img {
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		margin-right: 3rpx;
		flex-shrink: 0;
	}

	.column-box {
		width: 304rpx;
		height: 82rpx;
		/* padding: 7rpx 11rpx 5rpx; */
		/* box-sizing: border-box; */
	}

	.w-max-441 {
		max-width: 100rpx;
	}

	.w-90 {
		max-width: 80%;
	}
</style>