qsy-zdh/pages/data/electron/line-picture/line-picture.vue

<template>
	<view class="page-body">
		<page-header :name="pageName" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
		<view class="scroll-wrap">
			<view class="basic-info-wrap">
				<electron-chart></electron-chart>
				<view class="radius-wrap"></view>
			</view>
			<view class="detail-info-wrap">
				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'引自35KV变5211变电箱信息'">
					<template v-slot:content>
						<simple-table class="card-table" :tableHead="tableHead" :list="list"></simple-table>
					</template>
				</page-card>
				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'引自35KV变5110变电箱信息'">
					<template v-slot:content>
						<simple-table class="card-table" :tableHead="tableHead" :list="list"></simple-table>
					</template>
				</page-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableHead: ['名称', 'Q:kVar', 'p:kw', 'Uab:V', 'cos', 'Ia:A'], // 表头名称
				pageName: '',
				list: [{ // 列表数据
					name: 5401,
					params: [0, 0, 0, 0, 0]
				}, {
					name: 5402,
					params: [0, 0, 0, 0, 0]
				}, {
					name: 5403,
					params: [0, 0, 0, 0, 0]
				}, {
					name: 5404,
					params: [0, 0, 0, 0, 0]
				}, {
					name: 5405,
					params: [0, 0, 0, 0, 0]
				}, {
					name: 5406,
					params: [0, 0, 0, 0, 0]
				}, {
					name: 5407,
					params: [124.8, 124.8, 124.8, 124.8, 124.8]
				}, {
					name: 5408,
					params: [0, 0, 0, 0, 0]
				}, {
					name: 5409,
					params: [0, 0, 0, 0, 0]
				}, {
					name: 5410,
					params: [0, 0, 0, 0, 0]
				}, {
					name: 5411,
					params: [0, 0, 0, 0, 0]
				}, {
					name: 5412,
					params: [0, 0, 0, 0, 0]
				}, {
					name: 500,
					params: [0, 0, 0, 0, 0]
				}]
			}
		},
		onLoad(option) {
			this.pageName = JSON.parse(option.data).name
		},
		methods: {
			goBack() { // 返回上一頁面
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-body {
		.scroll-wrap {
			height: calc(100vh - 85rpx);
			overflow: scroll;

			.basic-info-wrap {
				position: relative;
				height: 1195rpx;
				padding: 50rpx 0 0 49rpx;
				background: url(../../../../static/page_bg.png);
				background-size: 175%;

				.radius-wrap {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100vw;
					height: 30rpx;
					background-color: #fff;
					border-radius: 35rpx 35rpx 0 0;
				}
			}

			.detail-info-wrap {
				padding: 40rpx 35rpx;

				.card-table {
					/deep/ .table-head {
						.th {
							color: #1966E2;
						}
					}
				}
				
				/deep/ .card-wrap:last-child {
					margin-bottom: 0 !important;
				}
			}
		}
	}
</style>