waterElectricityMinApp/pagesRepairs/home/home.vue

<template>
	<view class="container">
		<view class="">首页</view>
		<view class="charts">
			<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
		</view>
		<view class="table">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th width="50" align="center">姓名</uni-th>
					<uni-th width="50" align="center">工种</uni-th>
					<uni-th width="80" align="center">状态</uni-th>
					<uni-th width="80" align="center">是否值班</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td>{{ item.name }}</uni-td>
					<uni-td>{{ item.type }}</uni-td>
					<uni-td>{{ item.status }}</uni-td>
					<uni-td>{{ item.work }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<view class="more"></view>

		<!-- 悬浮按钮区域 -->
		<FloatButton />
	</view>
</template>

<script>
import FloatButton from '../components/floatButton.vue'

export default {
	components: {
		FloatButton
	},
	data() {
		return {
			chartData: {
				categories: ['张三', '李四', '王五', '老六', '刘八', '钱七'],
				series: [
					{
						name: '好评数',
						data: [35, 36, 31, 33, 13, 34]
					},
					{
						name: '完成数',
						data: [18, 27, 21, 24, 6, 28]
					}
				]
			},
			opts: {
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [15, 30, 0, 5],
				enableScroll: false,
				legend: {},
				xAxis: {
					boundaryGap: 'justify',
					disableGrid: false,
					min: 0,
					axisLine: false,
					max: 40
				},
				yAxis: {},
				extra: {
					bar: {
						type: 'group',
						width: 30,
						meterBorde: 1,
						meterFillColor: '#FFFFFF',
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
						linearType: 'custom',
						barBorderCircle: true,
						seriesGap: 2,
						categoryGap: 2
					}
				}
			},
			tableData: [
				{
					name: '张三',
					type: '电工',
					status: 0,
					work: 0
				},
				{
					name: '张三三',
					type: '泥工',
					status: 0,
					work: 0
				}
			]
		}
	},
	mounted() {},
	methods: {}
}
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: calc(100vh - 102rpx);
	background-color: salmon;

	.charts {
		width: 100%;
		height: 600rpx;
	}
	.table {
		margin: auto;
		width: 90%;
		color: #000;
	}

	.more {
		height: 600rpx;
		background-color: skyblue;
	}
}
</style>