supervise-customer-wxmp/pages/index/index2.vue

<template>
	<view class="charts-box">

		<view style="display: flex;justify-content: center; width: 100%; ">
			<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;"
				@click="jump(1)">1</text>
			<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;"
				@click="jump(2)">2</text>
			<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;"
				@click="jump(3)">3</text>
		</view>

		<view style="margin-top: 20px;margin-left: 20px;">
			<text>2当日数据</text>
			<text style="margin-left: 10px;">{{newDate}}</text>

		</view>

		<view style="margin-top: 15px;margin-left: 10px;margin-right: 10px;">
			<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
		</view>


		<view style="margin-top: 25px;margin-left: 15px;margin-right: 15px;">
			<text>到货时间预警表</text>
		</view>

		<view style="margin-top: 20px;margin-left: 15px;margin-right: 15px;">

			<uni-table ref="table" :border="true" stripe type="" emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="50" align="center">序号</uni-th>
					<uni-th width="280" align="center">供应商名称</uni-th>
					<uni-th align="center">到货日期</uni-th>
					<uni-th align="center">是否延期</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData2" :key="index">
					<uni-td align="center">{{ index+1 }}</uni-td>
					<uni-td align="center">{{ item.supplierName }}</uni-td>
					<uni-td align="center">{{ item.allArrivedDate }}</uni-td>
					<uni-td align="center">{{ item.isDelay }}</uni-td>
				</uni-tr>
			</uni-table>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				newDate: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),

				tableData2: [{
						supplierName: "中粮可口可乐饮料（河北）有限公司",
						allArrivedDate: "2022.12.29",
						isDelay: "是",
					},
					{
						supplierName: "中顺洁柔纸业股份有限公司",
						allArrivedDate: "2022.12.29",
						isDelay: "是",
					},
					{
						supplierName: "今麦郎食品股份有限公司石家庄分公司",
						allArrivedDate: "2022.12.29",
						isDelay: "是",
					}, {
						supplierName: "农夫山泉股份有限公司",
						allArrivedDate: "2022.12.29",
						isDelay: "是",
					}, {
						supplierName: "北京百事可乐饮料有限公司",
						allArrivedDate: "2022.12.29",
						isDelay: "是",
					}, {
						supplierName: "今麦郎食品股份有限公司石家庄分公司",
						allArrivedDate: "2022.12.29",
						isDelay: "是",
					}, {
						supplierName: "农夫山泉股份有限公司",
						allArrivedDate: "2022.12.29",
						isDelay: "是",
					}, {
						supplierName: "北京百事可乐饮料有限公司",
						allArrivedDate: "2022.12.29",
						isDelay: "是",
					}
				],
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				}
			};
		},
		onLoad() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "一班",
								"value": 50
							}, {
								"name": "二班",
								"value": 30
							}, {
								"name": "三班",
								"value": 20
							}, {
								"name": "四班",
								"value": 18
							}, {
								"name": "五班",
								"value": 8
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			jump(index) {
				console.log("index>>2",index)
				switch (index) {
					case 1:
						uni.navigateTo({
							url: 'index'
						});
			
						break;
			
					case 2:
			
						break;
			
					case 3:
						uni.navigateTo({
							url: 'index3'
						});
			
						break;
				}
			}
		},
		
	}
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>