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">
				<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">
								￥{{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">
								{{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">
								{{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 mb-26">
						<image class="title-img" src="/static/xfmx.png" mode=""></image>
					</view>
					<!-- 滚动列表 -->
					<scroll-view class="scroll-view-css z-3" scroll-y="true" :scroll-top="scrollTop"
						scroll-with-animation="true">
						<view class="item-box" v-for="(item,i) in listData" :key="i">
							<view class="user-box">
								<image class="user-img" :src="item.head_img" mode=""></image>
								<view class="">
									<view class="fs-32 fc-f text-overflow-ellipsis-one w-max-441">
										{{item.nickname}}
									</view>
									<view class="fs-28 fc-B2D6FF">
										消费者
									</view>
								</view>
							</view>
							<view class="">
								<view class="fs-32 fc-f">
									{{item.shop_name}}
								</view>
								<view class="fs-28 fc-B2D6FF">
									消费门店
								</view>
							</view>
							<view class="">
								<view class="fs-32 fc-f">
									￥{{item.pay_money}}
								</view>
								<view class="fs-28 fc-B2D6FF">
									消费金额
								</view>
							</view>
							<view class="">
								<view class="fs-32 fc-f">
									{{item.created_at}}
								</view>
								<view class="fs-28 fc-B2D6FF text-align-right">
									消费时间
								</view>
							</view>
						</view>
					</scroll-view>
				</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/xfdb.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">
						<image class="title-img" src="/static/zjtj.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">
								27998.00
							</view>
						</view>
					</view>
					<view class="flex-1 tj-box">
						<view class="hx-box z-3">
							<!-- 环形图 -->
							<ringVue></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">
									￥8999.00
								</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">
									用户帮扶资金 40%
								</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">
									￥18999.00
								</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">
									店铺帮扶资金 60%
								</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/rztj.png" mode=""></image>
					</view>
					<view class="flex-1 z-3">
						<!-- 曲线图 -->
						<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
	} from '@/api/chart.js';
	export default {
		components: {
			columnVue,
			lineVue,
			ringVue
		},
		data() {
			return {
				scrollTop: 0,
				timer: '', //定时器
				listData: [],
				currentDate: '',
				currentTime: '',
				weekday: '',
				totalData: {}
			}
		},
		mounted() {
			this.startAutoScroll();
			this.updateDateTime()
			setInterval(() => { // 每分钟更新一次日期和时间
				this.updateDateTime();
			}, 60000); // 60000毫秒 = 1分钟
			this.updateTime(); // 初始化时间显示
			setInterval(this.updateTime, 1000); // 每秒更新时间
			this.chartShop()
			this.chartConsume()
			this.chartTotal()
			this.chartList()
		},
		methods: {
			chartList() {
				chartList().then((res) => {
					if (res.code === 1) {
						this.listData = res.data.items
					}
				})
			},
			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() {
				this.currentTime = new Date().toLocaleTimeString(); // 更新时间，例如 "2:05:30 PM" 格式（根据地区不同）
			},
			updateDateTime() {
				const now = new Date();
				this.currentDate = now.toLocaleDateString(); // 获取日期（格式可能因地区而异）
				this.weekday = now.toLocaleDateString('default', {
					weekday: 'long'
				}); // 获取星期
			},
			startAutoScroll() {
				this.timer = setInterval(() => {
					this.scrollTop += 84;
					// console.log(this.scrollTop);
					// console.log(10 * 84);
					// 到底
					if (this.scrollTop >= (10 * 84)) {
						this.scrollTop = 0;
					}
				}, 2000);
			},
		}
	}
</script>

<style>
	.box {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

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

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

	.top-box {
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 86rpx;
		margin-bottom: 60rpx;
		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: 48rpx;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.left-box {
		display: flex;
		flex-direction: column;
	}

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

	.amount-box {
		width: 620rpx;
		height: 204rpx;
		position: relative;
		padding: 20rpx 50rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-right: 62rpx;
	}

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

	.amount-img-two {
		width: 168rpx;
		height: 168rpx;
		margin-right: 40rpx;
	}

	.list-box {
		position: relative;
		padding: 60rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		margin-right: 62rpx;
	}

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

	.right-box {
		display: flex;
		flex-direction: column;
	}

	.chart-box {
		position: relative;
		padding: 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.chart-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.title-box {
		position: relative;
		width: 1404rpx;
		height: 78rpx;
	}

	.title-img {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

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

	.bfje-num {
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 2rpx;
		border-image: linear-gradient(90deg, rgba(113, 203, 255, 0.5), rgba(0, 161, 255, 0.05)) 0 0;
		z-index: 2;
	}

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

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

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

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

	.bf-num {
		width: 376rpx;
		height: 180rpx;
		position: relative;
		margin-bottom: 24rpx;
	}

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

	.yh-bg {
		position: absolute;
		top: 0;
		height: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

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

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

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

	.scroll-view-css {
		width: 100%;
		height: 1060rpx;
		overflow: auto;
	}

	.scroll-view-css ::-webkit-scrollbar {
		display: none;
	}

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

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

	.user-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.column-box {
		padding: 40rpx 0 28rpx;
		box-sizing: border-box;
	}
	.w-max-441{
		max-width: 100rpx;
	}
</style>