初始化

.gitignore

@@ -0,0 +1,2 @@
+uni_modules/
+unpackage/

.hbuilderx/launch.json

@@ -0,0 +1,16 @@
+{
+    "version" : "1.0",
+    "configurations" : [
+        {
+            "playground" : "standard",
+            "type" : "uni-app:app-android"
+        },
+	{
+		"app-plus" : 
+		{
+			"launchtype" : "local"
+		},
+		"type" : "uniCloud"
+	}
+    ]
+}

App.vue

@@ -0,0 +1,19 @@
+<script>
+	export default {
+		onLaunch: function() {
+			console.log('App Launch')
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		}
+	}
+</script>
+
+<style>
+	* {
+		box-sizing: border-box;
+	}
+</style>

components/card.vue

@@ -0,0 +1,65 @@
+<template>
+	<view class="card-wrap">
+		<view class="title-wrap">
+			<view class="icon"></view>
+			<view class="name">{{ name }}</view>
+			<view @click="goDetail()" v-if="!notShow" class="detail">点击查看详情</view>
+		</view>
+		<view class="content-wrap">
+			<slot name="content"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			}
+		},
+		props: ['name', 'notShow', 'data'],
+		onLoad() {
+	
+		},
+		methods: {
+			goDetail() {
+				this.$emit('goDetail', this.data)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.card-wrap {
+		overflow: hidden;
+		background: #FFFFFF;
+		box-shadow: 2rpx 14rpx 22px 0px rgba(0,0,0,0.13);
+		border-radius: 14rpx;
+	}
+	.card-wrap .title-wrap {
+		display: flex;
+		align-items: center;
+		height: 89rpx;
+		padding: 24rpx 42rpx 24rpx 24rpx;
+		background: linear-gradient(-90deg, #FFFFFF, #E6FAFF);
+	}
+	.card-wrap .title-wrap .icon {
+		width: 6rpx;
+		height: 100%;
+		margin-right: 23rpx;
+		background-color: #33C777;
+	}
+	.card-wrap .title-wrap .name {
+		width: calc(100% - 29rpx - 132rpx);
+		font-weight: 700;
+		font-size: 33rpx;
+		color: #343434;
+	}
+	.card-wrap .title-wrap .detail {
+		color: #3394F9;
+		font-size: 22rpx;
+	}
+	.content-wrap {
+		background-color: #fff;
+	}
+</style>

components/chart/barChart.vue

@@ -0,0 +1,21 @@
+<template>
+	<view class="chart-wrap" :style="{height: barHeight}">
+		<qiun-data-charts :type="barType" :chartData="data" :opts="optSet" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				chartData: {}
+			}
+		},
+		props: ['data', 'optSet', 'barHeight', 'barType'],
+		mounted() {},
+		methods: {}
+	}
+</script>
+
+<style>
+</style>

components/chart/table.vue

@@ -0,0 +1,94 @@
+<template>
+	<view class="table-wrap">
+		<view class="table-head">
+			<view v-for="(item, index) in tableHead" :key="index" class="th">
+				{{ item }}
+			</view>
+		</view>
+		<view v-for="(item,index) in list" :key="index" class="table-body">
+			<view class="tb">
+				{{ item.name }}
+			</view>
+			<view class="tb" v-for="(item1,index1) in item.params" :key="index1" :style="{color: fontColor(item1)}">
+				<template v-if="item1.status !== undefined && item1.data === undefined">
+					<view :class="item1.status ? 'success' : 'error'"></view>
+				</template>
+				<template v-else>{{ item1.data ? item1.data : item1 }}</template>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			}
+		},
+		props: ['list', 'tableHead'],
+		onLoad() {
+	
+		},
+		methods: {
+			fontColor(data) {
+				if (data.data && data.status) {
+					return '#00FF00'
+				} else if (data.data && !data.status) {
+					return '#FF0000'
+				} else {
+					return '#000000'
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.table-wrap {
+		.table-head {
+			display: flex;
+			align-items: center;
+			height: 92rpx;
+			.th {
+				flex: 1;
+				font-weight: 700;
+				font-size: 28rpx;
+				color: #7A7A7A;
+				text-align: center;
+			}
+		}
+		.table-body {
+			display: flex;
+			align-items: center;
+			border-top: 1px dashed #E5E5E5;
+			.tb:first-child {
+				font-size: 28rpx;
+				color: #A1A1A1;
+			}
+			.tb {
+				display: flex;
+				justify-content: center;
+				font-size: 28rpx;
+				color: #000000;
+				flex: 1;
+				text-align: center;
+				padding: 23rpx 0;
+				height: 100%;
+				
+				.success {
+					width: 38rpx;
+					height: 38rpx;
+					background: #00BD00;
+					border-radius: 6rpx;
+				}
+				
+				.error {
+					width: 38rpx;
+					height: 38rpx;
+					background: #D6000F;
+					border-radius: 6rpx;
+				}
+			}
+		}
+	}
+</style>

components/cmj-animation.vue

@@ -0,0 +1,39 @@
+<template>
+	<view class="animation-wrap">
+		<image class="jt-1" src="@/static/cmj-jt.jpg"/>
+		<image class="jt-2" src="@/static/cmj-jt.jpg"/>
+		<image class="main" src="@/static/cmj-main.jpg"/>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style scoped lang="scss">
+	.animation-wrap {
+		height: 272rpx;
+		position: relative;
+		.main {
+			position: absolute;
+			left: 14rpx;
+			top: 30rpx;
+			width: 520rpx;
+			height: 210rpx;
+			z-index: 1;
+		}
+		.jt-1 {
+			width: 130rpx;
+			height: 130rpx;
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+		.jt-2 {
+			width: 130rpx;
+			height: 130rpx;
+			position: absolute;
+			right: 0;
+			bottom: 0;
+		}
+	}
+</style>

components/electron-chart/electron-chart.vue

@@ -0,0 +1,31 @@
+<template>
+	<view class="img-wrap">
+		<p-1200></p-1200>
+		<!-- <p-880></p-880> -->
+		<!-- <p-1142></p-1142> -->
+		<!-- <p-22-low></p-22-low> -->
+	</view>
+</template>
+
+<script>
+	import p1200 from './p-1200.vue'
+	import p880 from './p-880.vue'
+	import p980 from './p-980.vue'
+	import p1142 from './p-1142.vue'
+	import p22low from './p-22-low.vue'
+	export default {
+		data() {
+			return {}
+		},
+		components: {
+			'p-1200': p1200,
+			'p-880': p880,
+			'p-980': p980,
+			'p-1142': p1142,
+			'p-22-low': p22low
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+</style>

components/electron-chart/p-1142.vue

@@ -0,0 +1,61 @@
+<template>
+	<view class="img-wrap">
+		<view :style="{ left: '62rpx', top: '78rpx' }" class="item success"></view>
+		<view v-for="(item, index) in 7" :key="item" :style="{ left: 166 + (item - 1) * 74 + 'rpx', top: '78rpx' }" class="item error"></view>
+		<view :style="{ left: '710rpx', top: '78rpx' }" class="item success"></view>
+		<view v-for="(item, index) in 6" :key="item" :style="{ left: 848 + (item - 1) * 73 + 'rpx', top: '78rpx' }" class="item error"></view>
+		<view :style="{ left: '1318rpx', top: '78rpx' }" class="item success"></view>
+		<view :style="{ left: '108rpx', top: '700rpx' }" class="item border success"></view>
+		<view v-for="(item, index) in 2" :key="item" :style="{ left: 250 + (item - 1) * 60 + 'rpx', top: '700rpx' }" class="item border error"></view>
+		<view v-for="(item, index) in 3" :key="item" :style="{ left: 404 + (item - 1) * 60 + 'rpx', top: '700rpx' }" class="item border2 error"></view>
+		<view v-for="(item, index) in 3" :key="item" :style="{ left: 616 + (item - 1) * 60 + 'rpx', top: '700rpx' }" class="item border error"></view>
+		<view :style="{ left: 876 + 'rpx', top: '700rpx' }" class="item border error"></view>
+		<view :style="{ left: 1172 + 'rpx', top: '700rpx' }" class="item border error"></view>
+		<view v-for="(item, index) in 2" :key="item" :style="{ left: 1308 + (item - 1) * 60 + 'rpx', top: '700rpx' }" class="item border error"></view>
+		<view v-for="(item, index) in 3" :key="item" :style="{ left: 1462 + (item - 1) * 60 + 'rpx', top: '700rpx' }" class="item border error"></view>
+		<view :style="{ left: 1720 + 'rpx', top: '700rpx' }" class="item border error"></view>
+		<image src="@/static/electron-picture/p-1142.jpg" alt="" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.img-wrap {
+		position: relative;
+		overflow-x: scroll;
+		padding-right: 49rpx;
+		
+		.item {
+			position: absolute;
+			width: 52rpx;
+			height: 100rpx;
+		}
+		
+		.border {
+			border-radius: 10rpx;
+		}
+		
+		.border2 {
+			border-radius: 30rpx;
+		}
+		
+		.success {
+			background-color: #00BD00;
+		}
+		
+		.error {
+			background-color: #D6000F;
+		}
+		
+		image {
+			height: 1095rpx;
+		}
+	}
+</style>

components/electron-chart/p-1200.vue

@@ -0,0 +1,71 @@
+<template>
+	<view class="img-wrap">
+		<view v-for="(item, index) in 19" :style="{ left: 65 + (item - 1) * 66 + 'rpx' }" class="item success"></view>
+		<view v-for="(item, index) in 21" :style="{ left: 65 + (item - 1) * 66 + 'rpx' }" class="item1 error"></view>
+		<view v-for="(item, index) in 4" :style="{ left: 126 + (item - 1) * 47 + 'rpx', borderRadius: '16rpx' }" class="item2 success"></view>
+		<view :style="{ left: '340rpx', borderRadius: '16rpx' }" class="item2 success"></view>
+		<view v-for="(item, index) in 7" :style="{ left: 414 + (item - 1) * 48 + 'rpx' }" class="item2 success"></view>
+		<view v-for="(item, index) in 7" :style="{ left: 774 + (item - 1) * 48 + 'rpx' }" class="item2 error"></view>
+		<view v-for="(item, index) in 4" :style="{ left: '1136rpx' }" class="item2 success"></view>
+		<view v-for="(item, index) in 4" :style="{ left: 1212 + (item - 1) * 47 + 'rpx', borderRadius: '16rpx' }" class="item2 success"></view>
+		<image mode="heightFix" src="@/static/electron-picture/p-1200.jpg" alt="" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.img-wrap {
+		position: relative;
+		overflow-x: scroll;
+		padding-right: 49rpx;
+		
+		.item {
+			width: 37rpx;
+			height: 77rpx;
+			position: absolute;
+			top: 125rpx;
+			left: 63rpx;
+			border-radius: 8rpx;
+			z-index: 999;
+		}
+		
+		.item1 {
+			width: 37rpx;
+			height: 77rpx;
+			position: absolute;
+			top: 500rpx;
+			left: 63rpx;
+			border-radius: 8rpx;
+			z-index: 999;
+		}
+		
+		.item2 {
+			width: 37rpx;
+			height: 77rpx;
+			position: absolute;
+			top: 846rpx;
+			left: 63rpx;
+			border-radius: 8rpx;
+			z-index: 999;
+		}
+		
+		.success {
+			background-color: #00BD00;
+		}
+		
+		.error {
+			background-color: #D6000F;
+		}
+		
+		image {
+			height: 1095rpx;
+		}
+	}
+</style>

components/electron-chart/p-22-low.vue

@@ -0,0 +1,52 @@
+<template>
+	<view class="img-wrap">
+		<view :style="{ left: '-4rpx', top: '148rpx' }" class="item success"></view>
+		<view v-for="(item, index) in 2" :key="item" :style="{ left: 126 + (item - 1) * 224 + 'rpx', top: '346rpx' }" class="item error"></view>
+		<view v-for="(item, index) in 7" :key="item" :style="{ left: 512 + (item - 1) * 96 + 'rpx', top: '346rpx' }" class="item error"></view>
+		<view v-for="(item, index) in 10" :key="item" :style="{ left: 1182 + (item - 1) * 96 + 'rpx', top: '346rpx' }" class="item border error"></view>
+		<view v-for="(item, index) in 2" :key="item" :style="{ left: 2206 + (item - 1) * 224 + 'rpx', top: '346rpx' }" class="item error"></view>
+		<image src="@/static/electron-picture/p-22-low.jpg" alt="" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.img-wrap {
+		position: relative;
+		overflow-x: scroll;
+		padding-right: 49rpx;
+		
+		.item {
+			position: absolute;
+			width: 74rpx;
+			height: 154rpx;
+		}
+		
+		.border {
+			border-radius: 10rpx;
+		}
+		
+		.border2 {
+			border-radius: 30rpx;
+		}
+		
+		.success {
+			background-color: #00BD00;
+		}
+		
+		.error {
+			background-color: #D6000F;
+		}
+		
+		image {
+			height: 1095rpx;
+		}
+	}
+</style>

components/electron-chart/p-880.vue

@@ -0,0 +1,57 @@
+<template>
+	<view class="img-wrap">
+		<view v-for="(item, index) in 5" :key="item" :style="{ left: 84 + (item - 1) * 105 + 'rpx', top: '72rpx' }" class="item success"></view>
+		<view v-for="(item, index) in 4" :key="item" :style="{ left: 705 + (item - 1) * 105 + 'rpx', top: '72rpx' }" class="item success"></view>
+		<view :style="{ left: '19rpx', top: '720rpx' }" class="item border success"></view>
+		<view :style="{ left: '106rpx', top: '720rpx' }" class="item success"></view>
+		<view :style="{ left: '244rpx', top: '720rpx' }" class="item error"></view>
+		<view v-for="(item, index) in 2" :key="item" :style="{ left: 322 + (item - 1) * 64 + 'rpx', top: '720rpx' }" class="item border success"></view>
+		<view v-for="(item, index) in 5" :key="item" :style="{ left: 510 + (item - 1) * 62 + 'rpx', top: '720rpx' }" class="item border success"></view>
+		<view :style="{ left: 842 + 'rpx', top: '720rpx' }" class="item error"></view>
+		<view :style="{ left: 980 + 'rpx', top: '720rpx' }" class="item success"></view>
+		<view v-for="(item, index) in 2" :key="item" :style="{ left: 1064 + (item - 1) * 62 + 'rpx', top: '720rpx' }" class="item border2 error"></view>
+		<image src="@/static/electron-picture/p-880.jpg" alt="" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.img-wrap {
+		position: relative;
+		overflow-x: scroll;
+		padding-right: 49rpx;
+		
+		.item {
+			position: absolute;
+			width: 46rpx;
+			height: 104rpx;
+		}
+		
+		.border {
+			border-radius: 10rpx;
+		}
+		
+		.border2 {
+			border-radius: 30rpx;
+		}
+		
+		.success {
+			background-color: #00BD00;
+		}
+		
+		.error {
+			background-color: #D6000F;
+		}
+		
+		image {
+			height: 1095rpx;
+		}
+	}
+</style>

components/electron-chart/p-980.vue

@@ -0,0 +1,56 @@
+<template>
+	<view class="img-wrap">
+		<view v-for="(item, index) in 17" :key="item" :style="{ left: 49 + (item - 1) * 72 + 'rpx', top: '70rpx' }" class="item error"></view>
+		<view :style="{ left: 0 + 'rpx', top: '724rpx' }" class="item border success"></view>
+		<view v-for="(item, index) in 7" :key="item" :style="{ left: 70 + (item - 1) * 49 + 'rpx', top: '724rpx' }" class="item border success"></view>
+		<view :style="{ left: 434 + 'rpx', top: '724rpx' }" class="item border success"></view>
+		<view v-for="(item, index) in 8" :key="item" :style="{ left: 502 + (item - 1) * 49 + 'rpx', top: '724rpx' }" class="item border error"></view>
+		<view :style="{ left: 914 + 'rpx', top: '724rpx' }" class="item border2 success"></view>
+		<view v-for="(item, index) in 2" :key="item" :style="{ left: 982 + (item - 1) * 49 + 'rpx', top: '724rpx' }" class="item border2 error"></view>
+		<view v-for="(item, index) in 3" :key="item" :style="{ left: 1098 + (item - 1) * 49 + 'rpx', top: '724rpx' }" class="item border success"></view>
+		<view :style="{ left: 1264 + 'rpx', top: '724rpx' }" class="item border success"></view>
+		<image src="@/static/electron-picture/p-980.jpg" alt="" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.img-wrap {
+		position: relative;
+		overflow-x: scroll;
+		padding-right: 49rpx;
+		
+		.item {
+			position: absolute;
+			width: 40rpx;
+			height: 84rpx;
+		}
+		
+		.border {
+			border-radius: 10rpx;
+		}
+		
+		.border2 {
+			border-radius: 30rpx;
+		}
+		
+		.success {
+			background-color: #00BD00;
+		}
+		
+		.error {
+			background-color: #D6000F;
+		}
+		
+		image {
+			height: 1095rpx;
+		}
+	}
+</style>

components/page-header.vue

@@ -0,0 +1,60 @@
+<template>
+	<view>
+		<view class="header-wrap" :style="{backgroundColor: bg}">
+			<view :style="{opacity: showLeft ? 1 : 0}" class="left" @click="goBack()">
+				<image src="@/static/right-arrow.png" alt="" />
+			</view>
+			<view class="center">{{ name }}</view>
+			<view class="right"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			}
+		},
+		props: ['name','showLeft','showRight', 'bg'],
+		onLoad() {
+
+		},
+		methods: {
+			goBack() {
+				this.$emit('goBack')
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.header-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: white;
+		height: 85rpx;
+		font-size: 38rpx;
+		padding: 0 34rpx;
+		
+		.left {
+			width: 20%;
+			transform: rotate(180deg);
+			text-align: right;
+			image {
+				width: 20rpx;
+				height: 36rpx;
+			}
+		}
+		
+		.center {
+			width: 60%;
+			text-align: center;
+		}
+		
+		.right {
+			width: 20%;
+		}
+	}
+</style>

components/status-tip.vue

@@ -0,0 +1,59 @@
+<template>
+	<view @click="clickItem">
+		<view class="tip-wrap">
+			<view class="name">{{ name }}</view>
+			<view class="status-wrap">
+				<view :class="status ? 'success' : 'error'"></view>
+				<view v-if="tip" class="tip">{{ tip }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			}
+		},
+		props: ['name','status','tip'],
+		onLoad() {
+
+		},
+		methods: {
+			clickItem() {
+				this.$emit('clickItem',this.name)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.tip-wrap {
+		display: flex;
+		align-content: center;
+		.name {
+		}
+		.status-wrap {
+			display: flex;
+			align-items: center;
+			.success {
+				width: 30rpx;
+				height: 30rpx;
+				background: #00BD00;
+				border-radius: 6rpx;
+				margin-right: 7rpx;
+			}
+			.error {
+				width: 30rpx;
+				height: 30rpx;
+				background: #D6000F;
+				border-radius: 6rpx;
+				margin-right: 7rpx;
+			}
+			.tip {
+				
+			}
+		}
+	}
+</style>

index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

main.js

@@ -0,0 +1,36 @@
+import App from './App'
+import pageHeader from './components/page-header.vue'
+import pageCard from './components/card.vue'
+import statusTip from './components/status-tip.vue'
+import cmjAnimation from './components/cmj-animation.vue'
+import barChart from './components/chart/barChart'
+import table from './components/chart/table'
+import electronChart from './components/electron-chart/electron-chart'
+
+Vue.component('page-header', pageHeader)
+Vue.component('page-card', pageCard)
+Vue.component('status-tip', statusTip)
+Vue.component('cmj-animation', cmjAnimation)
+Vue.component('bar-chart', barChart)
+Vue.component('simple-table', table)
+Vue.component('electron-chart', electronChart)
+// #ifndef VUE3
+import Vue from 'vue'
+import './uni.promisify.adaptor'
+Vue.config.productionTip = false
+App.mpType = 'app'
+const app = new Vue({
+  ...App
+})
+app.$mount()
+// #endif
+
+// #ifdef VUE3
+import { createSSRApp } from 'vue'
+export function createApp() {
+  const app = createSSRApp(App)
+  return {
+    app
+  }
+}
+// #endif

manifest.json

@@ -0,0 +1,101 @@
+{
+    "name" : "智慧清水营",
+    "appid" : "__UNI__2240606",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "statusbar" : {
+            "immersed" : false,
+            "background" : "#00A1E9"
+        },
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : false,
+            "waiting" : false,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {
+                "dSYMs" : false
+            },
+            /* SDK配置 */
+            "sdkConfigs" : {
+                "ad" : {}
+            },
+            "splashscreen" : {
+                "androidStyle" : "default",
+                "android" : {
+                    "hdpi" : "static/start_page.png",
+                    "xhdpi" : "static/start_page.png",
+                    "xxhdpi" : "static/start_page.png"
+                }
+            },
+            "icons" : {
+                "android" : {
+                    "hdpi" : "static/app_icon.png",
+                    "xhdpi" : "static/app_icon.png",
+                    "xxhdpi" : "static/app_icon.png",
+                    "xxxhdpi" : "static/app_icon.png"
+                }
+            }
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "vueVersion" : "2",
+    "h5" : {
+        "router" : {
+            "base" : "./"
+        }
+    }
+}

package-lock.json

@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}

pages.json

@@ -0,0 +1,203 @@
+{
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/data/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/coal-mining/detail/detail",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/coal-mining/coal-machine/coal-machine",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/coal-mining/pump-machine/pump-machine",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/driving/driving-machine/driving-machine",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/ventilation/detail/detail",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/ventilation/air-system/air-system",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/transport/belt/belt",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/transport/passenger/passenger",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/electron/line-picture/line-picture",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/electron/summary-picture/summary-picture",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/supply-water/detail/detail",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/supply-water/supply-room/supply-room",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/nitrogen/nitrogen-system/nitrogen-system",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/nitrogen/compress-system/compress-system",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/disaster/water-disaster/water-disaster",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/supply-water/pool-system/pool-system",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/ventilation/Lane-system/Lane-system",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/ts-system/flj",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/ts-system/fxj_jc",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/ts-system/fxj_gd",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/cj-system/kjky",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/cj-system/kjsp",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/cj-system/jqr",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/cj-system/gzm",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/nitrogen/flj_yf",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/transport/jdgl",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/gs-system/shgs",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/gs-system/shzs",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/rl-system/hrz",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/rl-system/rqgl",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/data/znjc/page",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "white",
+		"navigationBarTitleText": "数据平台",
+		"navigationBarBackgroundColor": "#00A0E8",
+		"backgroundColor": "#F8F8F8"
+	},
+	"uniIdRouter": {}
+}

pages/data/cj-system/gzm.vue

@@ -0,0 +1,163 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'智能掘进工作面'" :bg="'transparent'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="bg-wrap"></view>
+		<view class="scroll-wrap">
+			<view class="info-wrap">
+				<view class="title">智能掘进工作面参数</view>
+				<view class="table-wrap">
+					<simple-table :tableHead="tableHead" :list="tableList"></simple-table>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tableHead: ['参数', '数值'],
+				tableList: [{
+					name: '人员检测',
+					params: [{
+						status: 1
+					}],
+				},{
+					name: '油泵运行',
+					params: [{
+						status: 1
+					}],
+				},{
+					name: '高速运行',
+					params: [{
+						status: 1
+					}],
+				},{
+					name: '油箱温度',
+					params: ['32℃']
+				}, {
+					name: '油泵计时',
+					params: ['32h32min']
+				}, {
+					name: '截割计时',
+					params: ['29h29min']
+				}, {
+					name: '俯仰角度',
+					params: ['30°']
+				}, {
+					name: '翻滚角度',
+					params: ['01°']
+				}, {
+					name: '回转角度',
+					params: ['01°']
+				}, {
+					name: '升降角度',
+					params: ['30°']
+				}, {
+					name: '自动截取时间',
+					params: ['29min']
+				}, {
+					name: '遥控截割时间',
+					params: ['30min']
+				}]
+			}
+		},
+		onLoad(option) {},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		position: relative;
+		background-color: #f5f6f8;
+		/deep/ .header-wrap {
+			position: relative;
+			z-index: 2;
+		}
+
+		.bg-wrap {
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			width: 100vw;
+			height: 670rpx;
+			background: url(@/static/pg-bg-2.png);
+			background-size: 100%;
+		}
+
+		.scroll-wrap {
+			position: relative;
+			z-index: 2;
+			overflow-y: scroll;
+			height: calc(100vh - 85rpx);
+			padding: 60rpx 35rpx 45rpx;
+
+			.status-wrap {
+				display: flex;
+				height: 167rpx;
+				border-radius: 20rpx;
+				margin-bottom: 60rpx;
+				background: #C5EDFF;
+
+				.item {
+					flex: 1;
+					justify-content: center;
+					padding: 35rpx 97rpx 35rpx 97rpx;
+					border-right: 1rpx dashed #fff;
+
+					.name {
+						font-size: 28rpx;
+						font-weight: 700;
+						text-align: center;
+						margin-bottom: 25rpx;
+					}
+
+					.status {
+						/deep/ .tip-wrap {
+							font-size: 26rpx;
+
+							.name {
+								color: #8D8D8D;
+							}
+
+							.status-wrap {
+								view:first-child {
+									margin: 0 8rpx 0 30rpx;
+								}
+							}
+						}
+					}
+				}
+
+				.item:last-child {
+					border: none;
+				}
+			}
+
+			.info-wrap {
+				.title {
+					margin-bottom: 29rpx;
+					font-weight: 700;
+					font-size: 36rpx;
+					color: #000000;
+				}
+				
+				.table-wrap {
+					overflow: hidden;
+					border-radius: 20rpx;
+					background-color: #fff;
+					
+					/deep/ .table-head {
+						background-color: #F0F0F0;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/cj-system/jqr.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/data/cj-system/kjky.vue

@@ -0,0 +1,177 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'矿井矿压监测'" :bg="'transparent'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="bg-wrap"></view>
+		<view class="scroll-wrap">
+			<view class="info-wrap">
+				<view class="title">矿井矿压参数</view>
+				<view class="table-wrap" style="margin-bottom: 40rpx;">
+					<simple-table :tableHead="tableHead" :list="tableList"></simple-table>
+				</view>
+				<view class="table-wrap" style="margin-bottom: 40rpx;">
+					<simple-table :tableHead="tableHead1" :list="tableList1"></simple-table>
+				</view>
+				<view class="table-wrap">
+					<simple-table :tableHead="tableHead2" :list="tableList2"></simple-table>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '主风机',
+					status: {
+						name: '风门',
+						status: 1
+					}
+				}, {
+					name: '副风机',
+					status: {
+						name: '风门',
+						status: 0
+					}
+				}],
+				tableHead: ['巷道', '测点', '压力', '开关量'],
+				tableList: [{
+					name: '运输巷',
+					params: ['100', '60', 'false']
+				}, {
+					name: '运输巷',
+					params: ['300', '5', 'false']
+				}, {
+					name: '0',
+					params: ['300', '5', 'false']
+				}, {
+					name: '回风巷',
+					params: ['300', '5', 'false']
+				}],
+				tableHead1: ['工作面名称', '开关量', '测点', '机巷', '风巷'],
+				tableList1: [{
+					name: '110207工作面',
+					params: ['1', '2700', '运输巷', '回风巷']
+				}, {
+					name: '002工作面',
+					params: ['0', '1000', '轨道巷', '回风巷']
+				}, {
+					name: '110208工作面',
+					params: ['1', '2500', '运输巷', '回风巷']
+				}, {
+					name: '110209工作面联络巷',
+					params: ['0', '1000', '运输巷', '回风巷']
+				}],
+				tableHead2: ['检测时间', '检测值'],
+				tableList2: [{
+					name: '2025-01-13 08:00:00',
+					params: ['6767']
+				}, {
+					name: '2025-01-14 08:00:00',
+					params: ['6720']
+				}, {
+					name: '2025-01-15 08:00:00',
+					params: ['6842']
+				}]
+			}
+		},
+		onLoad(option) {},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		position: relative;
+		background-color: #f5f6f8;
+		/deep/ .header-wrap {
+			position: relative;
+			z-index: 2;
+		}
+
+		.bg-wrap {
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			width: 100vw;
+			height: 670rpx;
+			background: url(@/static/pg-bg-2.png);
+			background-size: 100%;
+		}
+
+		.scroll-wrap {
+			position: relative;
+			z-index: 2;
+			overflow-y: scroll;
+			height: calc(100vh - 85rpx);
+			padding: 60rpx 35rpx 45rpx;
+
+			.status-wrap {
+				display: flex;
+				height: 167rpx;
+				border-radius: 20rpx;
+				margin-bottom: 60rpx;
+				background: #C5EDFF;
+
+				.item {
+					flex: 1;
+					justify-content: center;
+					padding: 35rpx 97rpx 35rpx 97rpx;
+					border-right: 1rpx dashed #fff;
+
+					.name {
+						font-size: 28rpx;
+						font-weight: 700;
+						text-align: center;
+						margin-bottom: 25rpx;
+					}
+
+					.status {
+						/deep/ .tip-wrap {
+							font-size: 26rpx;
+
+							.name {
+								color: #8D8D8D;
+							}
+
+							.status-wrap {
+								view:first-child {
+									margin: 0 8rpx 0 30rpx;
+								}
+							}
+						}
+					}
+				}
+
+				.item:last-child {
+					border: none;
+				}
+			}
+
+			.info-wrap {
+				.title {
+					margin-bottom: 29rpx;
+					font-weight: 700;
+					font-size: 36rpx;
+					color: #000000;
+				}
+				
+				.table-wrap {
+					overflow: hidden;
+					border-radius: 20rpx;
+					background-color: #fff;
+					
+					/deep/ .table-head {
+						background-color: #F0F0F0;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/cj-system/kjsp.vue

@@ -0,0 +1,245 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'矿井视频智能调速'" :bg="'transparent'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="bg-wrap"></view>
+		<view class="scroll-wrap">
+			<view class="info-wrap">
+				<view class="title">矿井视频参数</view>
+				<view class="table-wrap">
+					<simple-table :tableHead="tableHead" :list="tableList"></simple-table>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '主风机',
+					status: {
+						name: '风门',
+						status: 1
+					}
+				}, {
+					name: '副风机',
+					status: {
+						name: '风门',
+						status: 0
+					}
+				}],
+				tableHead: ['参数', '数值'],
+				tableList: [{
+					name: '1#内部温度',
+					params: ['0018.00']
+				}, {
+					name: '1#输出功率',
+					params: ['0174.00']
+				}, {
+					name: '2#绕组A温度',
+					params: ['0174.00']
+				}, {
+					name: '2部皮带PLC通讯状态',
+					params: ['0082.00']
+				}, {
+					name: '3部AI相机实时煤量',
+					params: ['0000.00']
+				}, {
+					name: '1#输出电压',
+					params: ['9123.00']
+				}, {
+					name: '2#绕组B温度',
+					params: ['0027.00']
+				}, {
+					name: '1#给定频率',
+					params: ['1800.00']
+				}, {
+					name: '相机煤量降速阀值1',
+					params: ['0000.00']
+				}, {
+					name: '1#输出电流',
+					params: ['0111.00']
+				}, {
+					name: '2#绕组c温度',
+					params: ['0027.00']
+				}, {
+					name: '相机煤量提速阈值1',
+					params: ['0000.00']
+				}, {
+					name: '1#母线电压1',
+					params: ['7740.00']
+				}, {
+					name: '1#输出频率',
+					params: ['1800.00']
+				}, {
+					name: '2#给定频率',
+					params: ['1802.00']
+				}, {
+					name: '相机煤量减速阈值2',
+					params: ['0082.00']
+				}, {
+					name: '1#母线电压2',
+					params: ['7749.00']
+				}, {
+					name: '1部皮带速度',
+					params: ['0000.00']
+				}, {
+					name: '2#输入电压',
+					params: ['10992.00']
+				}, {
+					name: '3部皮带速度',
+					params: ['0000.00']
+				}, {
+					name: '1#绕组A温度',
+					params: ['0026.00']
+				}, {
+					name: '2#内部温度',
+					params: ['0019.00']
+				}, {
+					name: '2#输出功率',
+					params: ['0182.00']
+				}, {
+					name: '2部皮带速度',
+					params: ['0000.00']
+				}, {
+					name: '1#绕组B温度',
+					params: ['0026.00']
+				}, {
+					name: '2#前轴温度',
+					params: ['0028.00']
+				}, {
+					name: '2#输出电压',
+					params: ['9051.00']
+				}, {
+					name: '相机煤量减速阈值2',
+					params: ['0000.00']
+				}, {
+					name: '1#绕组c温度',
+					params: ['0026.00']
+				}, {
+					name: '2#后轴温度',
+					params: ['0026.00']
+				}, {
+					name: '2#输出电流',
+					params: ['0117.00']
+				}, {
+					name: '2#输入电抗器温度',
+					params: ['0021.00']
+				}, {
+					name: '1#输入电压',
+					params: ['10961.00']
+				}, {
+					name: '2#母线电压1',
+					params: ['7726.00']
+				}, {
+					name: '2#输出频率',
+					params: ['1802.00']
+				}, {
+					name: '1#前轴温度',
+					params: ['0000.00']
+				}, {
+					name: '1#输入电抗器温度',
+					params: ['0020.00']
+				}]
+			}
+		},
+		onLoad(option) {},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		position: relative;
+		background-color: #f5f6f8;
+		/deep/ .header-wrap {
+			position: relative;
+			z-index: 2;
+		}
+
+		.bg-wrap {
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			width: 100vw;
+			height: 670rpx;
+			background: url(@/static/pg-bg-2.png);
+			background-size: 100%;
+		}
+
+		.scroll-wrap {
+			position: relative;
+			z-index: 2;
+			overflow-y: scroll;
+			height: calc(100vh - 85rpx);
+			padding: 60rpx 35rpx 45rpx;
+
+			.status-wrap {
+				display: flex;
+				height: 167rpx;
+				border-radius: 20rpx;
+				margin-bottom: 60rpx;
+				background: #C5EDFF;
+
+				.item {
+					flex: 1;
+					justify-content: center;
+					padding: 35rpx 97rpx 35rpx 97rpx;
+					border-right: 1rpx dashed #fff;
+
+					.name {
+						font-size: 28rpx;
+						font-weight: 700;
+						text-align: center;
+						margin-bottom: 25rpx;
+					}
+
+					.status {
+						/deep/ .tip-wrap {
+							font-size: 26rpx;
+
+							.name {
+								color: #8D8D8D;
+							}
+
+							.status-wrap {
+								view:first-child {
+									margin: 0 8rpx 0 30rpx;
+								}
+							}
+						}
+					}
+				}
+
+				.item:last-child {
+					border: none;
+				}
+			}
+
+			.info-wrap {
+				.title {
+					margin-bottom: 29rpx;
+					font-weight: 700;
+					font-size: 36rpx;
+					color: #000000;
+				}
+				
+				.table-wrap {
+					overflow: hidden;
+					border-radius: 20rpx;
+					background-color: #fff;
+					
+					/deep/ .table-head {
+						background-color: #F0F0F0;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/coal-mining/coal-machine/coal-machine.vue

@@ -0,0 +1,388 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'采煤机'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="status-tip-wrap" style="margin-bottom: 40rpx;">
+					<status-tip class="item" v-for="(item, index) in basicList" :key="index" :name="item.name"
+						:status="item.status" :tip="item.status ? '正常' : '停止'"></status-tip>
+				</view>
+				<view>
+					<cmj-animation></cmj-animation>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card :name="'设备信息'" :notShow="true" style="margin-bottom: 30rpx;">
+					<template v-slot:content>
+						<view>
+							<simple-table :tableHead="tableHead" :list="deviceList"></simple-table>
+						</view>
+					</template>
+				</page-card>
+				<page-card :name="'采煤机基础信息'" :notShow="true" style="margin-bottom: 30rpx;">
+					<template v-slot:content>
+						<view>
+							<simple-table :tableHead="tableHead" :list="cmjList"></simple-table>
+						</view>
+					</template>
+				</page-card>
+				<page-card :name="'工作面人员环境信息'" :notShow="true" style="margin-bottom: 30rpx;">
+					<template v-slot:content>
+						<view>
+							<simple-table :tableHead="tableHead" :list="peopleList"></simple-table>
+						</view>
+					</template>
+				</page-card>
+				<page-card :name="'产量信息图'" :notShow="true" style="margin-bottom: 30rpx;">
+					<template v-slot:content>
+						<view class="product-info-wrap">
+							<bar-chart :barType="'column'" :optSet="optColumn" :data="columnChartData"
+								:barHeight="'274rpx'"></bar-chart>
+						</view>
+					</template>
+				</page-card>
+				<page-card :name="'综采循环作业图'" :notShow="true" style="margin-bottom: 30rpx;">
+					<template v-slot:content>
+						<view class="product-info-wrap">
+							<bar-chart :barType="'line'" :optSet="optLine" :data="lineChartData"
+								:barHeight="'242rpx'"></bar-chart>
+						</view>
+					</template>
+				</page-card>
+				<page-card :name="'采煤机牵引速度变化图'" :notShow="true">
+					<template v-slot:content>
+						<view class="product-info-wrap">
+							<bar-chart :barType="'column'" :optSet="optColumn1" :data="columnChartData1"
+								:barHeight="'287rpx'"></bar-chart>
+						</view>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tableHead: ['参数名称', '数值'], // 表头
+				basicList: [{ // 基础信息
+					name: '采煤机回路',
+					status: 0
+				}, {
+					name: '1#液泵',
+					status: 0
+				}, {
+					name: '转载机',
+					status: 40
+				}, {
+					name: '2#液泵',
+					status: 23
+				}, {
+					name: '破碎机',
+					status: 22
+				}, {
+					name: '3#液泵',
+					status: 21
+				}, {
+					name: '纵撕',
+					status: 23
+				}, {
+					name: '1#水泵',
+					status: 30
+				}, {
+					name: '烟雾',
+					status: 0
+				}, {
+					name: '2#水泵',
+					status: 0
+				}, {
+					name: '堆煤',
+					status: 1
+				}, {
+					name: '通讯状态',
+					status: 1
+				}, ],
+				deviceList: [{ // 设备信息
+					name: '牵引速度(m/min)',
+					params: [0]
+				}, {
+					name: '采煤机位置(架)',
+					params: [0]
+				}, {
+					name: '俯仰角(°)',
+					params: [0]
+				}, {
+					name: '倾角(°)',
+					params: [0]
+				}, {
+					name: '瓦斯浓度(%)',
+					params: [0]
+				}, {
+					name: '左牵引电流(A)',
+					params: [0]
+				}, {
+					name: '左牵引温度(℃)',
+					params: [0]
+				}, {
+					name: '左截割电流(A)',
+					params: [0]
+				}, {
+					name: '左截割温度(℃)',
+					params: [0]
+				}, {
+					name: '左滚筒温度(℃)',
+					params: [0]
+				}, {
+					name: '右牵引电流(A)',
+					params: [0]
+				}, {
+					name: '右牵引温度(℃)',
+					params: [0]
+				}, {
+					name: '右截割电流(A)',
+					params: [0]
+				}, {
+					name: '右截割温度(℃)',
+					params: [0]
+				}, {
+					name: '右滚筒温度(℃)',
+					params: [0]
+				}, ],
+				cmjList: [{ // 采煤机基础信息
+						name: '机身高度(mm)',
+						params: [0]
+					},
+					{
+						name: '总装机功率(KW)',
+						params: [0]
+					},
+					{
+						name: '滚筒转速(r/min)',
+						params: [0]
+					},
+					{
+						name: '摇臂长度(mm)',
+						params: [0]
+					},
+					{
+						name: '采高范围(m)',
+						params: [0]
+					}
+				],
+				peopleList: [{ // 工作面人员环境信息
+						name: '220707皮带机头CO',
+						params: ['未知']
+					},
+					{
+						name: '220707皮带机尾CO',
+						params: ['未知']
+					},
+					{
+						name: '220707工作面粉尘',
+						params: ['未知']
+					},
+					{
+						name: '220707工作面环境温度',
+						params: ['未知']
+					},
+					{
+						name: '220707回风巷15m',
+						params: ['3人']
+					},
+					{
+						name: '220707回风巷80m',
+						params: ['7人']
+					},
+					{
+						name: '220707回风巷110m',
+						params: ['6人']
+					},
+					{
+						name: '220707回风巷1250m',
+						params: ['0人']
+					},
+				],
+				columnChartData: {}, // 柱状图数据
+				optColumn: { // 柱状图配置
+					dataLabel: false, // 不显示数据标签
+					color: ['#5C79D1'], // 柱状图颜色
+					legend: {
+						show: false, // 不显示底部标签
+					},
+					xAxis: {
+						axisLineColor: '#E5E5E5', // x轴线的颜色
+						fontColor: '#A9A9A9' // x轴字体的颜色
+					},
+					yAxis: {
+						gridColor: '#E5E5E5', // 横向数据标线的颜色
+						showTitle: true, // 是否显示标题
+						data: [{
+							title: '单位：万吨', // 标题内容
+							titleFontColor: '#A9A9A9', // 标题字体颜色
+							titleOffsetY: -5, // 标题纵向偏移量
+							axisLineColor: '#E5E5E5', // y轴线的颜色
+							fontColor: '#A9A9A9' // y轴字体的颜色
+						}]
+					},
+					extra: {
+						column: {
+							width: 18 // 设置柱子的宽度
+						}
+					}
+				},
+				lineChartData: {}, // 折线图数据
+				optLine: { // 折线图配置
+					dataLabel: false, // 不显示数据标签
+					color: ['#5C79D1'], // 折线图颜色
+					dataPointShape: false,
+					legend: {
+						show: false, // 不显示底部标签
+					},
+					xAxis: {
+						boundaryGap: 'justify', // 折线两端是否连接坐标轴
+						axisLineColor: '#E5E5E5', // x轴线的颜色
+						fontColor: '#A9A9A9' // x轴字体的颜色
+					},
+					yAxis: {
+						gridColor: '#E5E5E5', // 横向数据标线的颜色
+						data: [{
+							axisLineColor: '#E5E5E5', // y轴线的颜色
+							fontColor: '#A9A9A9' // y轴字体的颜色
+						}]
+					}
+				},
+				columnChartData1: {}, // 柱状图数据2
+				optColumn1: {
+					dataLabel: false, // 不显示数据标签
+					color: ['#5C79D1'], // 柱状图颜色
+					legend: {
+						show: false, // 不显示底部标签
+					},
+					xAxis: {
+						axisLineColor: '#E5E5E5', // x轴线的颜色
+						fontColor: '#A9A9A9' // x轴字体的颜色
+					},
+					yAxis: {
+						gridColor: '#E5E5E5', // 横向数据标线的颜色
+						showTitle: true, // 是否显示标题
+						data: [{
+							title: '单位：m/min', // 标题内容
+							titleFontColor: '#A9A9A9', // 标题字体颜色
+							titleOffsetY: -5, // 标题纵向偏移量
+							axisLineColor: '#E5E5E5', // y轴线的颜色
+							fontColor: '#A9A9A9' // y轴字体的颜色
+						}]
+					},
+					extra: {
+						column: {
+							width: 18 // 设置柱子的宽度
+						}
+					}
+				}
+			}
+		},
+		onLoad() {
+			this.getColumnData()
+			this.getColumnData1()
+			this.getLineData()
+		},
+		methods: {
+			getColumnData() { // 获取柱状图数据
+				let res = {
+					categories: ["09/08", "09/09", "09/10", "09/11", "09/12", "09/13"],
+					series: [{
+						name: '产量:',
+						data: [0.8, 0.7, 0.8, 0.9, 1.3, 1.4]
+					}]
+				};
+				this.columnChartData = JSON.parse(JSON.stringify(res));
+			},
+			getLineData() { // 获取折线图数据
+				let res = {
+					categories: ["23:32", "23:32", "23:32", "23:32", "23:32", "23:32"],
+					series: [{
+						name: '综采循环作业:',
+						data: [45, 0, 100, 0, 90, 0, 85]
+					}]
+				};
+				this.lineChartData = JSON.parse(JSON.stringify(res));
+			},
+			getColumnData1() { // 获取柱状图数据
+				let res = {
+					categories: ["23:32", "23:32", "23:32", "23:32", "23:32", "23:32"],
+					series: [{
+						name: '产量:',
+						data: [0.8, 0.7, 0.8, 0.9, 1.3, 1.4]
+					}]
+				};
+				this.columnChartData1 = JSON.parse(JSON.stringify(res));
+			},
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow: scroll;
+
+			.basic-info-wrap {
+				position: relative;
+				height: 700rpx;
+				padding: 25rpx 95rpx 60rpx;
+				background: url(../../../../static/page_bg.png);
+				background-size: 100%;
+
+				.status-tip-wrap {
+					display: flex;
+					flex-wrap: wrap;
+
+					.item {
+						width: calc(50% - 44rpx);
+						margin-top: 23rpx;
+						margin-left: 88rpx;
+
+						/deep/ .tip-wrap {
+							justify-content: space-between;
+							color: #fff;
+							font-size: 26rpx
+						}
+					}
+
+					.item:nth-child(2n - 1) {
+						margin-left: 0;
+					}
+
+					.item:nth-child(-n+2) {
+						margin-top: 0;
+					}
+				}
+				
+				.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;
+
+				.product-info-wrap {
+					padding: 39rpx 22rpx 37rpx;
+				}
+			}
+		}
+	}
+</style>

pages/data/coal-mining/detail/detail.vue

@@ -0,0 +1,329 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'智能采煤'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="monitor-wrap">
+					<view class="left">
+						<image class="icon" src="@/static/jg-icon.png" />
+						<view class="tip">
+							综采动态监视
+						</view>
+					</view>
+					<image class="opera" src="@/static/right-arrow.png" />
+				</view>
+				<view class="data-wrap">
+					<view v-for="(item, index) in basicList" :key="index" class="data-item-wrap">
+						<view class="title">{{ item.name }}</view>
+						<view class="data">{{ item.params }}</view>
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card :name="'乳化泵信息'">
+					<template v-slot:content>
+						<view class="info-card-wrap">
+							<view class="status-tip-wrap">
+								<status-tip class="item" v-for="(item, index) in rhbList" :key="index" :name="item.name"
+									:status="item.status" :tip="item.status ? '运行' : '停止'"></status-tip>
+							</view>
+						</view>
+					</template>
+				</page-card>
+				<page-card :name="'采煤机信息'" style="margin-top: 30rpx;">
+					<template v-slot:content>
+						<view class="info-card-wrap">
+							<view class="info-wrap">
+								<view v-for="(item, index) in cardList" :key="index" class="item-wrap">
+									<view class="title">
+										{{ item.name }}
+									</view>
+									<view class="content">
+										{{ item.params }}
+									</view>
+								</view>
+							</view>
+							<cmj-animation></cmj-animation>
+						</view>
+					</template>
+				</page-card>
+				<page-card :name="'顶板压力'" style="margin-top: 30rpx;">
+					<template v-slot:content>
+						<view class="pressure-wrap">
+							<bar-chart :barType="'column'" :optSet="optLine" :data="chartData" :barHeight="'293rpx'"></bar-chart>
+						</view>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				basicList: [{
+					name: '设计可采长度',
+					params: '2159m'
+				},{
+					name: '开采煤层',
+					params: '7'
+				},{
+					name: '面积',
+					params: '450301㎡'
+				},{
+					name: '煤层总厚',
+					params: '3.9m'
+				},{
+					name: '工作面采高',
+					params: '2.6m'
+				},{
+					name: '支架数',
+					params: '130'
+				},{
+					name: '循环刀数',
+					params: '12'
+				},{
+					name: '回采月份',
+					params: '2023.11'
+				}],
+				rhbList: [{ // 乳化泵信息
+					name: '1#液泵',
+					status: 0
+				}, {
+					name: '乳化增压泵',
+					status: 1
+				}, {
+					name: '2#液泵',
+					status: 0
+				}, {
+					name: '1#水泵',
+					status: 0
+				}, {
+					name: '3#液泵',
+					status: 0
+				}, {
+					name: '2#水泵',
+					status: 0
+				}, ],
+				chartData: {}, // 柱状图数据
+				optLine: { // 柱状图配置
+					dataLabel: false, // 不显示数据标签
+					color: ['#3495FA'], // 柱状图颜色
+					legend: {
+						show: false, // 不显示底部标签
+					},
+					xAxis: {
+						axisLineColor: '#E5E5E5', // x轴线的颜色
+						fontColor: '#A9A9A9' // x轴字体的颜色
+					},
+					yAxis: {
+						gridColor: '#E5E5E5', // 横向数据标线的颜色
+						showTitle: true, // 是否显示标题
+						data: [{
+							title: 'Mpa', // 标题内容
+							titleFontColor: '#A9A9A9', // 标题字体颜色
+							titleOffsetY: -5, // 标题纵向偏移量
+							titleOffsetX: -5, // 标题横向偏移量
+							axisLineColor: '#E5E5E5', // y轴线的颜色
+							fontColor: '#A9A9A9' // y轴字体的颜色
+						}]
+					},
+					extra: {
+						column: {
+							width: 15
+						}
+					}
+				},
+				cardList: [{
+					name: '牵引速度',
+					params: '0m/min'
+				},{
+					name: '俯仰角',
+					params: '0°'
+				},{
+					name: '瓦斯浓度',
+					params: '0°'
+				},{
+					name: '倾角',
+					params: '0°'
+				}]
+			}
+		},
+		onLoad() {
+			this.getServerData()
+		},
+		methods: {
+			getServerData() { // 获取柱状图数据
+				let res = {
+					categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"],
+					series: [{
+						name: '顶板压力',
+						data: [35, 36, 31, 33, 13, 34, 35, 36, 38, 41, 37, 45, 54, 46, 50]
+					}]
+				};
+				this.chartData = JSON.parse(JSON.stringify(res));
+			},
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow: scroll;
+
+			.basic-info-wrap {
+				position: relative;
+				height: 520rpx;
+				padding: 25rpx 35rpx 99rpx;
+				background-color: #00A1E9;
+				background: url(../../../../static/page_bg.png);
+				background-size: 100%;
+
+				.monitor-wrap {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 44rpx 36rpx 44rpx 52rpx;
+					height: 120rpx;
+					width: 100%;
+					background: url('../../../../static/opera.png');
+					background-size: 100% 120rpx;
+					background-repeat: no-repeat;
+					margin-bottom: 60rpx;
+
+					.left {
+						display: flex;
+						align-items: center;
+						.icon {
+							width: 37rpx;
+							height: 36rpx;
+							margin-right: 21rpx;
+						}
+
+						.tip {
+							font-size: 34rpx;
+							font-weight: 700;
+							color: #fff;
+						}
+					}
+
+					.opera {
+						width: 16rpx;
+						height: 29rpx;
+					}
+				}
+				
+				.data-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					.data-item-wrap {
+						width: 25%;
+						padding: 9rpx 0;
+						min-height: 81rpx;
+						text-align: center;
+						margin-top: 60rpx;
+						border-right: 1px solid #FFFFFF;
+						.title {
+							font-size: 22rpx;
+							color: #FFFFFF;
+							margin-bottom: 14rpx;
+						}
+						.data {
+							font-weight: 700;
+							font-size: 32rpx;
+							color: #FFF600;
+						}
+					}
+					.data-item-wrap:nth-child(-n+4){
+						margin-top: 0;
+					}
+					.data-item-wrap:nth-child(4n) {
+						border: none;
+					}
+				}
+				
+				.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;
+
+				.info-card-wrap {
+					padding: 35rpx 55rpx;
+
+					.status-tip-wrap {
+						display: flex;
+						flex-wrap: wrap;
+
+						.item {
+							width: 50%;
+							font-size: 26rpx;
+							margin-top: 48rpx;
+
+							/deep/ .name {
+								color: #8D8D8D;
+								width: 130rpx;
+								margin-right: 20rpx;
+							}
+						}
+
+						.item:nth-child(-n+2) {
+							margin-top: 0;
+						}
+					}
+
+					.info-wrap {
+						display: flex;
+						flex-wrap: wrap;
+
+						.item-wrap {
+							width: 50%;
+							display: flex;
+							font-size: 26rpx;
+							margin-top: 53rpx;
+
+							.title {
+								width: 104rpx;
+								margin-right: 58rpx;
+								font-weight: 700;
+								color: #8D8D8D;
+							}
+
+							.content {
+								color: #000000;
+							}
+						}
+
+						.item-wrap:nth-child(-n+2) {
+							margin-top: 0;
+						}
+					}
+
+					/deep/ .animation-wrap {
+						margin-top: 30rpx;
+					}
+				}
+
+				.pressure-wrap {
+					padding: 25rpx 30rpx;
+				}
+			}
+		}
+	}
+</style>

pages/data/coal-mining/pump-machine/pump-machine.vue

@@ -0,0 +1,262 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'乳化泵'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="status-tip-wrap" style="margin-bottom: 26rpx;">
+					<status-tip :class="active === index ? 'active-item' : ''" @clickItem="tabChange" class="item" v-for="(item, index) in rhbList" :key="index" :name="item.name"
+						:status="item.status" :tip="item.status ? '运行' : '停止'"></status-tip>
+				</view>
+				<view class="detail-wrap">
+					<view class="icon">
+						<image src="@/static/rhb.jpg"/>
+					</view>
+					<view class="info">
+						<view class="item">{{ rhbList[active].name }}</view>
+						<view class="item"><span>润滑油温(℃)</span>{{ rhbList[active].temperature }}</view>
+						<view class="item"><span>润滑油压(Mpa)</span>{{ rhbList[active].mpa }}</view>
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card :name="'乳化泵油压变化曲线'" style="margin-bottom: 30rpx;" :notShow="true">
+					<template v-slot:content>
+						<view class="change-wrap">
+							<bar-chart :barType="'line'" :optSet="optLine" :data="lineChartData"
+								:barHeight="'249rpx'"></bar-chart>
+						</view>
+					</template>
+				</page-card>
+				<page-card :name="'乳化泵系统压力曲线图'" :notShow="true">
+					<template v-slot:content>
+						<view class="pressure-wrap">
+							<bar-chart :barType="'column'" :optSet="optColumn" :data="columnChartData"
+								:barHeight="'273rpx'"></bar-chart>
+						</view>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				active: 0, // 当前活动的tab
+				rhbList: [{ // 乳化泵信息
+					name: '1#液泵',
+					status: 0,
+					temperature: 0,
+					mpa: 1
+				}, {
+					name: '乳化增压泵',
+					status: 1,
+					temperature: 10,
+					mpa: 23
+				}, {
+					name: '2#液泵',
+					status: 0,
+					temperature: 35,
+					mpa: 26
+				}, {
+					name: '1#水泵',
+					status: 0,
+					temperature: 22,
+					mpa: 56
+				}, {
+					name: '3#液泵',
+					status: 0,
+					temperature: 45,
+					mpa: 67
+				}, {
+					name: '2#水泵',
+					status: 0,
+					temperature: 12,
+					mpa: 32
+				}, {
+					name: '其他',
+					status: null,
+					temperature: 80,
+					mpa: 1
+				}, ],
+				lineChartData: {}, // 折线图数据
+				optLine: { // 折线图配置
+					dataLabel: false, // 不显示数据标签
+					color: ['#5C79D1'], // 折线图颜色
+					dataPointShape: false,
+					legend: {
+						show: false, // 不显示底部标签
+					},
+					xAxis: {
+						boundaryGap: 'justify', // 折线两端是否连接坐标轴
+						axisLineColor: '#E5E5E5', // x轴线的颜色
+						fontColor: '#A9A9A9' // x轴字体的颜色
+					},
+					yAxis: {
+						gridColor: '#E5E5E5', // 横向数据标线的颜色
+						data: [{
+							axisLineColor: '#E5E5E5', // y轴线的颜色
+							fontColor: '#A9A9A9' // y轴字体的颜色
+						}]
+					}
+				},
+				columnChartData: {}, // 柱状图数据
+				optColumn: { // 柱状图配置
+					dataLabel: false, // 不显示数据标签
+					color: ['#5C79D1'], // 柱状图颜色
+					legend: {
+						show: false, // 不显示底部标签
+					},
+					xAxis: {
+						axisLineColor: '#E5E5E5', // x轴线的颜色
+						fontColor: '#A9A9A9' // x轴字体的颜色
+					},
+					yAxis: {
+						gridColor: '#E5E5E5', // 横向数据标线的颜色
+						showTitle: true, // 是否显示标题
+						data: [{
+							title: '单位：m/min', // 标题内容
+							titleFontColor: '#A9A9A9', // 标题字体颜色
+							titleOffsetY: -5, // 标题纵向偏移量
+							axisLineColor: '#E5E5E5', // y轴线的颜色
+							fontColor: '#A9A9A9' // y轴字体的颜色
+						}]
+					},
+					extra: {
+						column: {
+							width: 18 // 设置柱子的宽度
+						}
+					}
+				}
+			}
+		},
+		onLoad() {
+			this.getColumnData()
+			this.getLineData()
+		},
+		methods: {
+			tabChange(e) { // 乳化泵切换
+				this.active = this.rhbList.findIndex((v) => {return v.name === e})
+			},
+			getColumnData() { // 获取柱状图数据
+				let res = {
+					categories: ["23:32", "23:32", "23:32", "23:32", "23:32", "23:32"],
+					series: [{
+						name: '产量:',
+						data: [0.8, 0.7, 0.8, 0.9, 1.3, 1.4]
+					}]
+				};
+				this.columnChartData = JSON.parse(JSON.stringify(res));
+			},
+			getLineData() { // 获取折线图数据
+				let res = {
+					categories: ["23:32", "23:32", "23:32", "23:32", "23:32", "23:32"],
+					series: [{
+						name: '综采循环作业:',
+						data: [45, 0, 100, 0, 90, 0, 85]
+					}]
+				};
+				this.lineChartData = JSON.parse(JSON.stringify(res));
+			},
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow: scroll;
+
+			.basic-info-wrap {
+				position: relative;
+				height: 630rpx;
+				padding: 25rpx 35rpx 0;
+				background: url(../../../../static/page_bg.png);
+				background-size: 100%;
+				.status-tip-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					border-bottom: 1rpx dashed #fff;
+					padding-bottom: 42rpx;
+					
+					.active-item {
+						background: #3495FA;
+						border-radius: 14rpx;
+					}
+				
+					.item {
+						width: calc(50% - 21rpx);
+						margin-left: 21rpx;
+						padding: 0 47rpx;
+				
+						/deep/ .tip-wrap {
+							padding: 23rpx 0;
+							justify-content: space-between;
+							color: #fff;
+							font-size: 26rpx
+						}
+					}
+				
+					.item:nth-child(2n - 1) {
+						margin-left: 0;
+					}
+				
+					.item:nth-child(-n+2) {
+						margin-top: 0;
+					}
+				}
+				
+				.detail-wrap {
+					display: flex;
+					padding: 0 76rpx;
+					.icon {
+						margin-right: 82rpx;
+						image {
+							width: 112rpx;
+							height: 150rpx;
+						}
+					}
+					.info {
+						width: calc(100% - 194rpx);
+						font-size: 28rpx;
+						color: #fff;
+						.item {
+							display: flex;
+							justify-content: space-between;
+							margin-bottom: 20rpx;
+						}
+					}
+				}
+				
+				.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;
+				
+				.change-wrap {
+					padding: 28rpx 20rpx;
+				}
+				
+				.pressure-wrap {
+					padding: 28rpx 20rpx;
+				}
+			}
+		}
+	}
+</style>

pages/data/disaster/water-disaster/water-disaster.vue

@@ -0,0 +1,323 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view class="data-wrap">
+						<view class="data-item-wrap" v-for="(item, index) in list">
+							<view class="title">{{ item.name }}</view>
+							<view class="data">{{ item.data }}</view>
+						</view>
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'分站统计'">
+					<template v-slot:content>
+						<bar-chart :barType="'pie'" :data="pieChartData" :optSet="pieSet"
+							:barHeight="'431rpx'"></bar-chart>
+						<view class="icon-wrap">
+							<view class="item" v-for="(item, index) in statusList">
+								<view :style="{ backgroundColor: item.color }" class="icon"></view>
+								<view class="title">{{ item.name }}</view>
+							</view>
+						</view>
+					</template>
+				</page-card>
+				<page-card class="mix-chart-wrap" :notShow="true" :name="`${getCurrentTime()}隆雨星统计`">
+					<template v-slot:content>
+						<view class="type-wrap">
+							<image @click="chartChange('line')" v-if="chartType === 'column'" src="@/static/line.png"/>
+							<image v-if="chartType === 'line'" src="@/static/line-active.png"/>
+							<image @click="chartChange('column')" v-if="chartType === 'line'" src="@/static/bar.png"/>
+							<image v-if="chartType === 'column'" src="@/static/bar-active.png"/>
+						</view>
+						<bar-chart :barType="chartType" :data="chartData" :optSet="chartType === 'column' ? chartSet : chartSet1"
+							:barHeight="'363rpx'"></bar-chart>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{ // 列表
+					name: '地面传感器',
+					data: '9'
+				}, {
+					name: '压力水位传感器',
+					data: '2'
+				}, {
+					name: '流量传感器',
+					data: '23'
+				}, {
+					name: '自动雨量站',
+					data: '1'
+				}, {
+					name: '地面断线传感器',
+					data: '0'
+				}, {
+					name: '井下断线传感器',
+					data: '0'
+				}],
+				pageData: {}, // 页头信息
+				pieChartData: {}, // 饼状图数据
+				statusList: [{ // 状态列表
+					name: '(2016款)KJ402-F系列',
+					color: '#1890FF'
+				}, {
+					name: 'XN水质分站',
+					color: '#EE6666'
+				}, {
+					name: 'XN-流国统计分站',
+					color: '#FAC858'
+				}, {
+					name: 'KJ402-FB-1',
+					color: '#1890FF'
+				}, {
+					name: 'X飪肛H气氨站6要素',
+					color: '#73C0DE'
+				}],
+				pieSet: { // 饼转图配置
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE"],
+					dataLabel: false,
+					legend: {
+						show: false
+					},
+					extra: {
+						pie: {
+							activeOpacity: 0.5,
+							activeRadius: 10,
+							offsetAngle: 0,
+							labelWidth: 15,
+							border: true,
+							borderWidth: 3,
+							borderColor: "#FFFFFF"
+						}
+					}
+				},
+				chartType: 'column', // 图表类型
+				chartData: {}, // 柱图表数据
+				chartSet: { // 柱状图配置
+					color: ["#1890FF", "#91CB74"],
+					legend: {
+						show: false
+					},
+					xAxis: {
+						disableGrid: true
+					},
+					extra: {
+						column: {
+							type: "group",
+							width: 15,
+							activeBgColor: "#000000",
+							activeBgOpacity: 0.08
+						}
+					}
+				},
+				chartSet1: { // 折现线图配置
+					color: ["#1890FF", "#91CB74"],
+					legend: {
+						show: false
+					},
+					yAxis: {
+						gridType: "dash",
+						dashLength: 2
+					},
+					extra: {
+						line: {
+							type: "straight",
+							width: 2,
+							activeType: "hollow"
+						}
+					}
+				}
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+			this.getPieData()
+			this.getChartData()
+		},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			},
+			getPieData() { // 获取饼图数据
+				let res = {
+					series: [{
+						data: [{
+							"value": 50
+						}, {
+							"value": 30
+						}, {
+							"value": 20
+						}, {
+							"value": 18
+						}, {
+							"value": 8
+						}]
+					}]
+				};
+				this.pieChartData = JSON.parse(JSON.stringify(res));
+			},
+			getChartData() {  // 获取图表数据
+				let res = {
+					categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
+					series: [{
+							name: "目标值",
+							data: [35, 36, 31, 33, 13, 34]
+						},
+						{
+							name: "完成量",
+							data: [18, 27, 21, 24, 6, 28]
+						}
+					]
+				};
+				this.chartData = JSON.parse(JSON.stringify(res));
+			},
+			getCurrentTime() { // 获取当前时间
+				const now = new Date();
+				const year = now.getFullYear();
+				const month = String(now.getMonth() + 1).padStart(2, '0');
+				return `${year}年${month}月`;
+			},
+			chartChange(data) { // 图标切换
+				this.chartType = data
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow: scroll;
+
+			.basic-info-wrap {
+				position: relative;
+				height: 390rpx;
+				padding: 48rpx 90rpx;
+				background: url(../../../../static/page_bg.png);
+				background-size: 150%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+				}
+
+				.data-wrap {
+					display: flex;
+					flex-wrap: wrap;
+
+					.data-item-wrap {
+						width: 33.33%;
+						padding: 9rpx 0;
+						min-height: 81rpx;
+						text-align: center;
+						margin-top: 60rpx;
+
+						.title {
+							font-size: 22rpx;
+							color: #FFFFFF;
+							margin-bottom: 14rpx;
+						}
+
+						.data {
+							font-weight: 700;
+							font-size: 36rpx;
+							color: #FFF600;
+						}
+					}
+
+					.data-item-wrap:nth-child(-n+3) {
+						margin-top: 0;
+					}
+				}
+
+				.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;
+
+				.icon-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					padding: 4rpx 40rpx 45rpx;
+
+					.item {
+						display: flex;
+						width: calc(50% - 20rpx);
+						margin-top: 36rpx;
+
+						.icon {
+							width: 32rpx;
+							height: 32rpx;
+							border-radius: 6rpx;
+							margin-right: 8rpx;
+						}
+
+						.title {
+							font-size: 24rpx;
+							color: #000000;
+						}
+					}
+
+					.item:nth-child(2n) {
+						margin-left: 30rpx;
+					}
+				}
+				
+				.chart-wrap {
+					padding: 30rpx 24rpx;
+				}
+				
+				.mix-chart-wrap {
+					.type-wrap {
+						display: flex;
+						justify-content: end;
+						padding: 0 24rpx;
+						image {
+							width: 30rpx;
+							height: 26rpx;
+						}
+						image:last-child {
+							margin-left: 30rpx;
+						}
+					}
+					
+					.type-wrap {
+						position: absolute;
+						top: -54rpx;
+						right: 0;
+					}
+					
+					/deep/ .content-wrap {
+						position: relative;
+					}
+				}
+				
+				
+				/deep/ .card-wrap:last-child {
+					margin-bottom: 0 !important;
+				}
+			}
+		}
+	}
+</style>

pages/data/driving/driving-machine/driving-machine.vue

@@ -0,0 +1,224 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'智能采煤'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="data-wrap">
+					<view class="data-item-wrap" v-for="(item, index) in dataList" :key="index">
+						<view class="title">{{ item.name }}</view>
+						<view class="data">{{ item.params }}</view>
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card :name="'掘进机信息'" style="margin-bottom: 30rpx;">
+					<template v-slot:content>
+						<view class="info-wrap">
+							<view class="item-wrap">
+								<view class="name">未掘进距离</view>
+								<view class="data">324.8m</view>
+							</view>
+							<view class="item-wrap">
+								<view class="name">已掘进距离</view>
+								<view class="data">2344.2m</view>
+							</view>
+						</view>
+						<view class="driving-info-wrap">
+							<image src="@/static/znjj.png"/>
+						</view>
+					</template>
+				</page-card>
+				<page-card :name="'机身姿态'" :notShow="true" style="margin-bottom: 30rpx;">
+					<template v-slot:content>
+						<view>
+							<simple-table :tableHead="tableHead" :list="bodyList"></simple-table>
+						</view>
+					</template>
+				</page-card>
+				<page-card :name="'旋臂姿态'" :notShow="true" style="margin-bottom: 30rpx;">
+					<template v-slot:content>
+						<view>
+							<simple-table :tableHead="tableHead" :list="armList"></simple-table>
+						</view>
+					</template>
+				</page-card>
+				<page-card :name="'输入电压'" :notShow="true">
+					<template v-slot:content>
+						<view>
+							<simple-table :tableHead="tableHead" :list="voltageList"></simple-table>
+						</view>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tableHead: ['名称', '参数'], // 表头名称
+				dataList: [{ // 掘进机信息
+					name: '工作面名称',
+					params: '150201工作面胶带巷'
+				},{
+					name: '施工单位',
+					params: '综掘二队'
+				},{
+					name: '生产组织模式',
+					params: '二掘一修'
+				},{
+					name: '综掘机型号',
+					params: 'EBZ200M-2A'
+				},{
+					name: '截割功率',
+					params: '200kw'
+				},{
+					name: '巷道长度',
+					params: '2667'
+				},{
+					name: '掘进断面',
+					params: '23.31m²'
+				},{
+					name: '永久支护工艺',
+					params: '锚、网、索、W钢带 桁架联合支护'
+				},{
+					name: '胶带机型号',
+					params: 'DSJ100/40/160 胶带输送机'
+				},{
+					name: '胶带机控制方式',
+					params: '集控'
+				}],
+				machineList: [{
+					name: '未掘进距离',
+					params: '324.8m'
+				},{
+					name: '已掘进距离',
+					params: '2344.2m'
+				}],
+				bodyList: [{ // 机身姿态
+					name: '俯仰角度(°)',
+					params: ['-0.09']
+				},{
+					name: '水平角度(°)',
+					params: ['91.47']
+				},{
+					name: '翻滚角度(°)',
+					params: ['0.2']
+				},{
+					name: '掘进机行走速度(mm/s)',
+					params: ['0']
+				}],
+				armList: [{ // 旋臂姿态
+					name: '回旋角度(°)',
+					params: ['0']
+				},{
+					name: '升降角度(°)',
+					params: ['0']
+				}],
+				voltageList: [{
+					name: '线线电压(V)',
+					params: ['0']
+				}]
+			}
+		},
+		onLoad() {
+		},
+		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: 810rpx;
+				padding: 25rpx 35rpx 99rpx;
+				background-color: #00A1E9;
+				background: url(../../../../static/page_bg.png);
+				background-size: 100% 110%;
+				background-repeat: no-repeat;
+				
+				.data-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					.data-item-wrap {
+						width: 33.33%;
+						padding: 9rpx 0;
+						min-height: 81rpx;
+						text-align: center;
+						margin-top: 60rpx;
+						border-right: 1px solid #FFFFFF;
+						.title {
+							font-size: 22rpx;
+							color: #FFFFFF;
+							margin-bottom: 14rpx;
+						}
+						.data {
+							font-weight: 700;
+							font-size: 32rpx;
+							color: #FFF600;
+						}
+					}
+					.data-item-wrap:nth-child(-n+3){
+						margin-top: 0;
+					}
+					.data-item-wrap:nth-child(3n) {
+						border: none;
+					}
+				}
+				
+				.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;
+				
+				.info-wrap {
+					display: flex;
+					padding: 36rpx 35rpx 58rpx;
+					.item-wrap {
+						display: flex;
+						font-size: 26rpx;
+						width: 50%;
+						.name {
+							color: #8D8D8D;
+							margin-right: 31rpx;
+						}
+						.data {
+							color: #000000;
+						}
+					}
+				}
+				
+				.driving-info-wrap {
+					text-align: center;
+					image {
+						width: 427rpx;
+						height: 264rpx;
+						vertical-align: bottom;// 解决image背景图片下方有10rpx 的白边
+						padding-bottom: 44rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,125 @@
+<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>

pages/data/electron/summary-picture/summary-picture.vue

@@ -0,0 +1,45 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'供电总图'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<image mode="widthFix" src="@/static/electron-picture/summary.png"/>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		},
+		onLoad() {},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+
+			.basic-info-wrap {
+				position: relative;
+				overflow: scroll;
+				padding: 64rpx 35rpx;
+				height: 100%;
+				background: url(../../../../static/page_bg.png);
+				background-size: 100vw 100vh;
+				
+				image {
+					width: 100%;
+				}
+			}
+		}
+	}
+</style>

pages/data/gs-system/shgs.vue

@@ -0,0 +1,279 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view v-for="(item,index) in list" class="data-item-wrap">
+						<view class="title">{{ item.name }}</view>
+						<view class="data">{{ item.data }}</view>
+					</view>
+				</view>
+				<view class="img-wrap">
+					<image src="@/static/pool.png" />
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'设备状态'">
+					<template v-slot:content>
+						<view class="detail-wrap">
+							<template v-for="(item, index) in statusList">
+								<view class="item" v-if="!item.data">
+									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
+								</view>
+								<view class="item" v-else>
+									<view>{{ item.name }}</view>
+									<view class="params">{{ item.data }}</view>
+								</view>
+							</template>
+						</view>
+					</template>
+				</page-card>
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'水泵故障'">
+					<template v-slot:content>
+						<view class="detail-wrap">
+							<template v-for="(item, index) in statusList1">
+								<view class="item" v-if="!item.data">
+									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
+								</view>
+								<view class="item" v-else>
+									<view>{{ item.name }}</view>
+									<view class="params">{{ item.data }}</view>
+								</view>
+							</template>
+						</view>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '管道压力',
+					data: '0.45MPa'
+				}, {
+					name: '瞬时流量',
+					data: '20.12m³/h'
+				}, {
+					name: '累计流量',
+					data: '39589m³'
+				}, {
+					name: '清水池液位',
+					data: '2.69m'
+				}],
+				statusList: [{
+					name: '1#阀门',
+					status: 1,
+				}, {
+					name: '2#阀门',
+					status: 1,
+				}, {
+					name: '3#阀门',
+					status: 1,
+				}, {
+					name: '4#阀门',
+					status: 1,
+				}, {
+					name: '稳压',
+					status: 1,
+				}],
+				statusList1: [{
+					name: '报警水位',
+					status: 1,
+				}, {
+					name: '消防报警水位',
+					status: 1,
+				}, {
+					name: '出口压力低PJ5',
+					status: 1,
+				}, {
+					name: '消防溢流水位',
+					status: 1,
+				}, {
+					name: 'JK压力低PJ6',
+					status: 1,
+				}, {
+					name: '系统故障',
+					status: 1,
+				}, {
+					name: '出口压力低',
+					status: 1,
+				}, {
+					name: '溢流水位',
+					status: 1,
+				}, {
+					name: '出口压力高',
+					status: 1,
+				}, {
+					name: '控制柜自动',
+					status: 1,
+				}, {
+					name: '软启动器1故障',
+					status: 1,
+				}, {
+					name: '控制柜手动',
+					status: 1,
+				}, {
+					name: '软启动器2故障',
+					status: 1,
+				}, {
+					name: '变频器故障',
+					status: 1,
+				}, {
+					name: '软启动器3故障',
+					status: 1,
+				}, {
+					name: '管道漏水',
+					status: 1,
+				}],
+				pageData: {}
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+		},
+		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: auto;
+				padding: 50rpx 49rpx 0;
+				background: url(../../../static/page_bg.png);
+				background-size: 110%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+
+					.data-item-wrap {
+						width: 33.33%;
+						padding: 9rpx 0;
+						min-height: 81rpx;
+						text-align: center;
+						margin-top: 48rpx;
+						border-right: 1px solid #FFFFFF;
+
+						.title {
+							font-size: 22rpx;
+							color: #FFFFFF;
+							margin-bottom: 14rpx;
+						}
+
+						.data {
+							font-weight: 700;
+							font-size: 32rpx;
+							color: #FFF600;
+						}
+					}
+
+					.data-item-wrap:nth-child(-n+3) {
+						margin-top: 0;
+					}
+
+					.data-item-wrap:nth-child(3n) {
+						border: none;
+					}
+				}
+
+				.img-wrap {
+					padding: 38rpx 0 57rpx;
+					text-align: center;
+
+					image {
+						width: 350rpx;
+						height: 194rpx;
+					}
+				}
+
+				.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;
+				
+				.detail-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					padding: 35rpx 55rpx 18rpx 55rpx;
+					color: #8D8D8D;
+					.item {
+						display: flex;
+						font-size: 26rpx;
+						justify-content: space-between;
+						width: calc(50% - 61rpx);
+						margin-bottom: 50rpx;
+						
+						.params {
+							color: #00BD00;
+						}
+						
+						.status-wrap {
+							width: 100%;
+							
+							/deep/ .tip-wrap {
+								width: 100%;
+								justify-content: space-between;
+							}
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 120rpx;
+					}
+				}
+				
+				.params-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					font-size: 26rpx;
+					padding: 35rpx 55rpx;
+					
+					.item {
+						width: calc(50% - 32rpx);
+						display: flex;
+						justify-content: space-between;
+						margin-top: 50rpx;
+						
+						view:first-child {
+							color: #8D8D8D;
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 62rpx;
+					}
+					
+					.item:nth-child(-n+2) {
+						margin-top: 0;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/gs-system/shzs.vue

@@ -0,0 +1,236 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view v-for="(item,index) in list" class="data-item-wrap">
+						<view class="title">{{ item.name }}</view>
+						<view class="data">{{ item.data }}</view>
+					</view>
+				</view>
+				<view class="img-wrap">
+					<image src="@/static/pool.png" />
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'设备状态'">
+					<template v-slot:content>
+						<view class="detail-wrap">
+							<template v-for="(item, index) in statusList">
+								<view class="item" v-if="!item.data">
+									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
+								</view>
+								<view class="item" v-else>
+									<view>{{ item.name }}</view>
+									<view class="params">{{ item.data }}</view>
+								</view>
+							</template>
+						</view>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '液位高限',
+					data: '300m'
+				}, {
+					name: '液位低限',
+					data: '206m³/h'
+				}, {
+					name: '净水瞬时流量',
+					data: '20.0m³/h'
+				}, {
+					name: '累计流量',
+					data: '46512.0m³'
+				}, {
+					name: '原水池液位',
+					data: '243m'
+				}, {
+					name: '变频器运行频率',
+					data: '39.00Hz'
+				}, {
+					name: '变频器运行电流',
+					data: '25.00A'
+				}, {
+					name: '供电压力',
+					data: '0.45MPa'
+				}, {
+					name: '设定压力',
+					data: '0.20MPa'
+				}, {
+					name: '压力高报值',
+					data: '1.20MPa'
+				}, {
+					name: '压力低报值',
+					data: '0.03MPa'
+				}, {
+					name: '消防水池液位',
+					data: '2.69m'
+				}],
+				statusList: [{
+					name: '1#阀门',
+					status: 1,
+				}, {
+					name: '2#阀门',
+					status: 1,
+				}, {
+					name: '3#阀门',
+					status: 1,
+				}, {
+					name: '4#阀门',
+					status: 1,
+				}],
+				pageData: {}
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+		},
+		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: auto;
+				padding: 50rpx 49rpx 0;
+				background: url(../../../static/page_bg.png);
+				background-size: 140%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+
+					.data-item-wrap {
+						width: 33.33%;
+						padding: 9rpx 0;
+						min-height: 81rpx;
+						text-align: center;
+						margin-top: 48rpx;
+						border-right: 1px solid #FFFFFF;
+
+						.title {
+							font-size: 22rpx;
+							color: #FFFFFF;
+							margin-bottom: 14rpx;
+						}
+
+						.data {
+							font-weight: 700;
+							font-size: 32rpx;
+							color: #FFF600;
+						}
+					}
+
+					.data-item-wrap:nth-child(-n+3) {
+						margin-top: 0;
+					}
+
+					.data-item-wrap:nth-child(3n) {
+						border: none;
+					}
+				}
+
+				.img-wrap {
+					padding: 38rpx 0 57rpx;
+					text-align: center;
+
+					image {
+						width: 350rpx;
+						height: 194rpx;
+					}
+				}
+
+				.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;
+				
+				.detail-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					padding: 35rpx 55rpx 18rpx 55rpx;
+					color: #8D8D8D;
+					.item {
+						display: flex;
+						font-size: 26rpx;
+						justify-content: space-between;
+						width: calc(50% - 61rpx);
+						margin-bottom: 50rpx;
+						
+						.params {
+							color: #00BD00;
+						}
+						
+						.status-wrap {
+							width: 100%;
+							
+							/deep/ .tip-wrap {
+								width: 100%;
+								justify-content: space-between;
+							}
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 120rpx;
+					}
+				}
+				
+				.params-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					font-size: 26rpx;
+					padding: 35rpx 55rpx;
+					
+					.item {
+						width: calc(50% - 32rpx);
+						display: flex;
+						justify-content: space-between;
+						margin-top: 50rpx;
+						
+						view:first-child {
+							color: #8D8D8D;
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 62rpx;
+					}
+					
+					.item:nth-child(-n+2) {
+						margin-top: 0;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/index.vue

@@ -0,0 +1,272 @@
+<template>
+	<view class="content">
+		<page-header :name="'自动化监控系统'" :bg="'#009fe8'" :showLeft="false"></page-header>
+		<view class="scroll-wrap">
+			<image class="img-wrap" src="@/static/index.jpg" />
+			<view class="classify-wrap">
+				<view class="left">
+					<view @click="tabChange(index)"
+						:class="active === index ? 'item-wrap active' : 'item-wrap deactive'"
+						v-for="(item, index) in list" :key="index">
+						{{ item.name }}
+					</view>
+				</view>
+				<view class="right">
+					<view @click="goPage(item)" v-for="(item, index) in list[active].children" class="item-wrap">
+						<image src="@/static/gxsx.png" />
+						<view class="title">
+							{{ item.name }}
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				active: 0, // 当前激活的tab
+				list: [{ // 列表数据
+					name: '智能监测',
+					children: [{
+						name: '人员定位',
+						path: `/pages/data/znjc/page`,
+						src: 'http://anstatic.nxmy.com:8011/assets/html/zhks-quankuang/ningmeijituan/h5/#/pages/production/personnel_orientation/personnel_orientation?mine=640181B0011010026856'
+					}, {
+						name: '安全监测',
+						path: `/pages/data/znjc/page`,
+						src: 'http://anstatic.nxmy.com:8011/assets/html/zhks-quankuang/ningmeijituan/h5/#/pages/production/safety_monitoring/safety_monitoring?mine=640181B0011010026856'
+					}, {
+						name: '工业视频',
+						path: `/pages/data/znjc/page`,
+						src: 'http://anstatic.nxmy.com:8011/assets/html/zhks-quankuang/ningmeijituan/video_ws/video_XXX/?mine_code=qingshuiying_jituan#/'
+					}]
+				},{
+					name: '排水系统',
+					children: [{
+						name: '+786m水泵房',
+						path: `/pages/data/supply-water/supply-room/supply-room`
+					}, {
+						name: '+1065m水泵房',
+						path: `/pages/data/supply-water/supply-room/supply-room`
+					}]
+				}, {
+					name: '提升系统',
+					children: [{
+						name: '副立井提升',
+						path: '/pages/data/ts-system/flj'
+					}, {
+						name: '副斜井绞车',
+						path: '/pages/data/ts-system/fxj_jc'
+					}, {
+						name: '副斜井轨道运输',
+						path: '/pages/data/ts-system/fxj_gd'
+					}]
+				}, {
+					name: '采掘系统',
+					children: [{
+						name: '矿井矿压',
+						path: '/pages/data/cj-system/kjky'
+					}, {
+						name: '矿井视频智能调速',
+						path: '/pages/data/cj-system/kjsp'
+					}, {
+						name: '智能掘进工作面',
+						path: '/pages/data/cj-system/gzm'
+					}]
+				}, {
+					name: '通风系统',
+					children: [{
+						name: '主通风机监控系统',
+						path: '/pages/data/ventilation/air-system/air-system',
+						children: [{
+							name: '1#风机',
+							status: 1
+						}, {
+							name: '2#风机',
+							status: 0
+						}]
+					}, {
+						name: '制氮监控系统',
+						path: '/pages/data/nitrogen/compress-system/compress-system'
+					}, {
+						name: '压风监控系统',
+						path: '/pages/data/nitrogen/nitrogen-system/nitrogen-system'
+					}, {
+						name: '副立井压风监控系统',
+						path: '/pages/data/nitrogen/flj_yf'
+					}]
+				}, {
+					name: '运输系统',
+					children: [{
+							name: '架空人车监控系统',
+							path: '/pages/data/transport/passenger/passenger'
+						},
+						{
+							name: '甲带给料机监控',
+							path: '/pages/data/transport/jdgl'
+						}, {
+							name: '主运输06机巷皮带',
+							path: '/pages/data/transport/belt/belt'
+						}, {
+							name: '主运输07风巷皮带',
+							path: '/pages/data/transport/belt/belt'
+						}, {
+							name: '井下皮带监控',
+							path: '/pages/data/transport/belt/belt'
+						}, {
+							name: '二煤上山皮带监控',
+							path: '/pages/data/transport/belt/belt'
+						}
+					]
+				}, {
+					name: '供水系统',
+					children: [{
+						name: '生活水供水监控',
+						path: '/pages/data/gs-system/shzs'
+					}, {
+						name: '消防供水监控',
+						path: '/pages/data/gs-system/shgs'
+					}, {
+						name: '生产水供水监控',
+						path: '/pages/data/gs-system/shgs'
+					}]
+				}, {
+					name: '热力系统',
+					children: [{
+						name: '燃气锅炉房监控',
+						path: '/pages/data/rl-system/rqgl'
+					}, {
+						name: '新锅炉房监控',
+						path: '/pages/data/rl-system/rqgl'
+					}, {
+						name: '换热站监控',
+						path: '/pages/data/rl-system/hrz'
+					}]
+				}, {
+					name: '供电系统',
+					children: [{
+						name: '井下高压监控',
+						path: '/pages/data/electron/line-picture/line-picture'
+					}, {
+						name: '井下低压监控',
+						path: '/pages/data/electron/line-picture/line-picture'
+					}, {
+						name: '地面10KV监控',
+						path: '/pages/data/electron/line-picture/line-picture'
+					}, {
+						name: '地面低压监控',
+						path: '/pages/data/electron/line-picture/line-picture'
+					}]
+				}]
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			tabChange(index) {
+				this.active = index
+			},
+			goPage(item) {
+				uni.navigateTo({
+					url: item.path + `?data=${JSON.stringify(item)}`
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.content {
+		height: 100vh;
+		background-color: #fff;
+
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow-y: scroll;
+
+			.img-wrap {
+				width: 100%;
+				height: 500rpx;
+				margin-bottom: 10rpx;
+				vertical-align: bottom; // 解决image背景图片下方有10rpx 的白边
+			}
+
+			.classify-wrap {
+				display: flex;
+				flex-direction: row;
+				background-color: #f4f5f9;
+				padding-bottom: 100rpx;
+
+				.left {
+					border-radius: 0 20rpx 20rpx 0;
+					overflow: hidden;
+					width: 30vw;
+					margin-right: 10rpx;
+
+					.item-wrap {
+						text-align: center;
+						padding: 30rpx 20rpx;
+					}
+
+					.active {
+						font-weight: 700;
+					}
+
+					.deactive {
+						color: #c0c0c0;
+						background-color: #fff;
+					}
+				}
+
+				.right {
+					padding-top: 40rpx;
+					display: flex;
+					align-content: flex-start;
+					flex-direction: row;
+					flex-wrap: wrap;
+					overflow: hidden;
+					border-radius: 20rpx 0 0 20rpx;
+					width: calc(70vw - 10rpx);
+					background-color: #fff;
+
+					.item-wrap {
+						width: 50%;
+						margin-bottom: 40rpx;
+						display: flex;
+						justify-content: start;
+						align-items: center;
+						flex-direction: column;
+
+						image {
+							width: 90rpx;
+							height: 90rpx;
+							margin-bottom: 20rpx;
+						}
+
+						.title {
+							font-weight: 700;
+							text-align: center;
+						}
+					}
+
+					.item-wrap:nth-child(2n) {
+						.title {
+							padding: 0 10px 0 5px;
+						}
+					}
+
+					.item-wrap:nth-child(2n-1) {
+						.title {
+							padding: 0 5px 0 10px;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/nitrogen/compress-system/compress-system.vue

@@ -0,0 +1,153 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+				</view>
+				<view class="img-wrap">
+					<image src="@/static/nitrogen-static.png"/>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card v-for="(item,index) in 4" :key="index" style="margin-bottom: 30rpx;" :notShow="true" :name="`${index + 1}#制氮机`">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="paramsList"></simple-table>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pageData: {}, // 页面数据
+				tableHead: ['名称', '参数状态'], // 页头
+				paramsList: [{ // 参数列表
+						name: '1号阀',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: '2号阀',
+						params: [{
+							status: 0
+						}]
+					},
+					{
+						name: '3号阀',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: '排空阀',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: '系统阀',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: '送气阀',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: '4号阀',
+						params: [{
+							status: 0
+						}]
+					},
+					{
+						name: '空气罐压力(Mpa)',
+						params: ['0.00']
+					},
+					{
+						name: '氨气罐压力(Mpa)',
+						params: ['0.00']
+					},
+					{
+						name: '氧气含量(%)',
+						params: ['0.00']
+					},
+					{
+						name: '瞬时流量(m³/h)',
+						params: ['00.00']
+					}
+				]
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+		},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			},
+			activeChange(item) { // 状态切换
+				this.activeData = item
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow: scroll;
+
+			.basic-info-wrap {
+				position: relative;
+				height: 244rpx;
+				padding: 0 49rpx 0;
+				background: url(../../../../static/page_bg.png);
+				background-size: 120%;
+
+				.info-wrap {
+					border-bottom: 1rpx dashed #fff;
+					
+				}
+
+				.img-wrap {
+					padding: 49rpx 0;
+					text-align: center;
+
+					image {
+						width: 310rpx;
+						height: 138rpx;
+					}
+				}
+
+				.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;
+
+				/deep/ .card-wrap:last-child {
+					margin-bottom: 0 !important;
+				}
+			}
+		}
+	}
+</style>

pages/data/nitrogen/flj_yf.vue

@@ -0,0 +1,265 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view @click="activeChange(item)" v-for="(item,index) in list"
+						:class="activeData.name === item.name ? 'active item' : 'item'" :key="index">
+						<status-tip class="status-wrap" :name="item.name" :status="item.status"
+							:tip="item.status ? '运行' : '停止'"></status-tip>
+					</view>
+				</view>
+				<view class="img-wrap">
+					<image v-if="activeData.status" src="@/static/nitrogen.jpg" />
+					<image v-else src="@/static/nitrogen-static.png" />
+					<view>
+						{{ activeData.name }}
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="activeData.name">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="paramsList"></simple-table>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pageData: {},
+				activeData: {},
+				list: [{
+					name: '副立井1#空压机',
+					status: 1
+				}, {
+					name: '副立井2#空压机',
+					status: 1
+				}],
+				tableHead: ['名称', '参数/状态'],
+				paramsList: [{
+						name: '运行时间(h)',
+						params: ['30439']
+					},
+					{
+						name: '加载时间(s)',
+						params: ['28116']
+					},
+					{
+						name: '排气压力(MPa)',
+						params: ['0.51']
+					},
+					{
+						name: '排气温度(℃)',
+						params: ['80.30']
+					},
+					{
+						name: '电机电流(A)',
+						params: ['0.00']
+					},
+					{
+						name: '油气桶压力(MPa)',
+						params: ['0.58']
+					},
+					{
+						name: '油漆桶温度(℃)',
+						params: ['72.40']
+					},
+					{
+						name: 'KYJ自动运行停机',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: 'KYJ排气压力异常',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: 'KYJ风机接触器故障',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: 'KYJ主接触器故障',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: 'KYJ油压过低',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: 'KYJA\D故障',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: 'KYJ风机过滤',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: 'KYJ排气高温',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: 'KYJ油滤压差',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: 'KYJ相序错误',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: 'KYJ主电机过流',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: 'KYJ空滤压差',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: 'KYJ油细压差',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: '重故障',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: '轻故障',
+						params: [{
+							status: 1
+						}]
+					}
+				]
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+			this.activeData = this.list[0]
+		},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			},
+			activeChange(item) { // 切换状态
+				this.activeData = item
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow: scroll;
+
+			.basic-info-wrap {
+				position: relative;
+				height: auto;
+				padding: 50rpx 49rpx 0;
+				background: url(../../../static/page_bg.png);
+				background-size: 120%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					border-bottom: 1rpx dashed #fff;
+					padding-bottom: 30rpx;
+
+					.item {
+						display: flex;
+						padding: 24rpx 14rpx;
+						justify-content: space-between;
+						width: 50%;
+						color: #fff;
+						font-size: 26rpx;
+
+						.status-wrap {
+							width: 100%;
+
+							/deep/ .tip-wrap {
+								justify-content: space-between;
+							}
+						}
+
+						.params {
+							color: #FFFF00;
+						}
+					}
+
+					.active {
+						background: #3495FA;
+						box-shadow: 0px 3px 7px 0px rgba(0, 8, 35, 0.31);
+						border-radius: 14px;
+					}
+				}
+
+				.img-wrap {
+					padding: 49rpx 0;
+					text-align: center;
+
+					image {
+						width: 310rpx;
+						height: 138rpx;
+					}
+
+					view {
+						margin-top: 25rpx;
+						color: #fff;
+					}
+				}
+
+				.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;
+
+				/deep/ .card-wrap:last-child {
+					margin-bottom: 0 !important;
+				}
+			}
+		}
+	}
+</style>

pages/data/nitrogen/nitrogen-system/nitrogen-system.vue

@@ -0,0 +1,184 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view @click="activeChange(item)" v-for="(item,index) in list" :class="activeData.name === item.name ? 'active item' : 'item'"
+						:key="index">
+						<status-tip class="status-wrap" :name="item.name" :status="item.status"
+							:tip="item.status ? '运行' : '停止'"></status-tip>
+					</view>
+				</view>
+				<view class="img-wrap">
+					<image v-if="activeData.status" src="@/static/nitrogen.jpg" />
+					<image v-else src="@/static/nitrogen-static.png" />
+					<view>
+						{{ activeData.name }}
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="activeData.name">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="paramsList"></simple-table>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pageData: {},
+				activeData: {},
+				list: [{
+					name: '1#空压',
+					status: 1
+				}, {
+					name: '2#空压',
+					status: 1
+				}, {
+					name: '3#空压',
+					status: 1
+				}],
+				tableHead: ['名称', '参数/状态'],
+				paramsList: [{
+						name: '气压(Mpa)',
+						params: ['0.59']
+					},
+					{
+						name: '排空阀',
+						params: [{
+							status: 0
+						}]
+					},
+					{
+						name: '系统阀',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: '送气阀',
+						params: [{
+							status: 1
+						}]
+					},
+					{
+						name: '罐压(Mpa)',
+						params: ['0.59']
+					},
+					{
+						name: '罐温(℃)',
+						params: ['31.0']
+					},
+					{
+						name: '罐报警值(℃)',
+						params: ['120.0']
+					}
+				]
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+			this.activeData = this.list[0]
+		},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			},
+			activeChange(item) { // 切换状态
+				this.activeData = item
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow: scroll;
+
+			.basic-info-wrap {
+				position: relative;
+				height: auto;
+				padding: 50rpx 49rpx 0;
+				background: url(../../../../static/page_bg.png);
+				background-size: 120%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					border-bottom: 1rpx dashed #fff;
+					padding-bottom: 30rpx;
+
+					.item {
+						display: flex;
+						padding: 24rpx 26rpx;
+						justify-content: space-between;
+						width: 50%;
+						color: #fff;
+						font-size: 26rpx;
+
+						.status-wrap {
+							width: 100%;
+
+							/deep/ .tip-wrap {
+								justify-content: space-between;
+							}
+						}
+
+						.params {
+							color: #FFFF00;
+						}
+					}
+
+					.active {
+						background: #3495FA;
+						box-shadow: 0px 3px 7px 0px rgba(0, 8, 35, 0.31);
+						border-radius: 14px;
+					}
+				}
+
+				.img-wrap {
+					padding: 49rpx 0;
+					text-align: center;
+
+					image {
+						width: 310rpx;
+						height: 138rpx;
+					}
+					
+					view {
+						margin-top: 25rpx;
+						color: #fff;
+					}
+				}
+
+				.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;
+
+				/deep/ .card-wrap:last-child {
+					margin-bottom: 0 !important;
+				}
+			}
+		}
+	}
+</style>

pages/data/rl-system/hrz.vue

@@ -0,0 +1,225 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view v-for="(item,index) in list" class="data-item-wrap">
+						<view class="title">{{ item.name }}</view>
+						<view class="data">{{ item.data }}</view>
+					</view>
+				</view>
+				<view class="img-wrap">
+					<image src="@/static/rhb.jpg" />
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'进气压力'">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="paramsList"></simple-table>
+					</template>
+				</page-card>
+				
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'泵压力'">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead1" :list="paramsList1"></simple-table>
+					</template>
+				</page-card>
+				
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'压力/温度'">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead2" :list="paramsList2"></simple-table>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '水箱液位高报值',
+					data: '0.0m'
+				}, {
+					name: '水箱液位低报值',
+					data: '0.0m'
+				}, {
+					name: '软化水箱液位',
+					data: '1.30m'
+				}],
+				pageData: {},
+				tableHead: ['名称', '进气压力'],
+				paramsList: [{
+					name: '1#板式换热器',
+					params: ['00.00MPa']
+				},{
+					name: '2#板式换热器',
+					params: ['00.00MPa']
+				}],
+				tableHead1: ['名称', '压力'],
+				paramsList1: [{
+					name: '1#泵',
+					params: ['00.55MPa']
+				},{
+					name: '2#泵',
+					params: ['00.39MPa']
+				},{
+					name: '补水泵',
+					params: ['0.36MPa']
+				}],
+				tableHead2: ['名称', '压力', '温度'],
+				paramsList2: [{
+					name: '回水罐',
+					params: ['0.38MPa', '-03.09℃']
+				},{
+					name: '供水罐',
+					params: ['0.45MPa', '50.08℃']
+				}]
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+		},
+		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: auto;
+				padding: 50rpx 49rpx 0;
+				background: url(../../../static/page_bg.png);
+				background-size: 140%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+
+					.data-item-wrap {
+						width: 33.33%;
+						padding: 9rpx 0;
+						min-height: 81rpx;
+						text-align: center;
+						margin-top: 48rpx;
+						border-right: 1px solid #FFFFFF;
+
+						.title {
+							font-size: 22rpx;
+							color: #FFFFFF;
+							margin-bottom: 14rpx;
+						}
+
+						.data {
+							font-weight: 700;
+							font-size: 32rpx;
+							color: #FFF600;
+						}
+					}
+
+					.data-item-wrap:nth-child(-n+3) {
+						margin-top: 0;
+					}
+
+					.data-item-wrap:nth-child(3n) {
+						border: none;
+					}
+				}
+
+				.img-wrap {
+					padding: 38rpx 0 57rpx;
+					text-align: center;
+
+					image {
+						width: 100rpx;
+						height: 120rpx;
+					}
+				}
+
+				.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;
+				
+				.detail-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					padding: 35rpx 55rpx 18rpx 55rpx;
+					color: #8D8D8D;
+					.item {
+						display: flex;
+						font-size: 26rpx;
+						justify-content: space-between;
+						width: calc(50% - 61rpx);
+						margin-bottom: 50rpx;
+						
+						.params {
+							color: #00BD00;
+						}
+						
+						.status-wrap {
+							width: 100%;
+							
+							/deep/ .tip-wrap {
+								width: 100%;
+								justify-content: space-between;
+							}
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 120rpx;
+					}
+				}
+				
+				.params-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					font-size: 26rpx;
+					padding: 35rpx 55rpx;
+					
+					.item {
+						width: calc(50% - 32rpx);
+						display: flex;
+						justify-content: space-between;
+						margin-top: 50rpx;
+						
+						view:first-child {
+							color: #8D8D8D;
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 62rpx;
+					}
+					
+					.item:nth-child(-n+2) {
+						margin-top: 0;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/rl-system/rqgl.vue

@@ -0,0 +1,208 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="img-wrap">
+					<image src="@/static/rhb.jpg" />
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'设备参数'">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="paramsList"></simple-table>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pageData: {},
+				tableHead: ['名称', '参数'],
+				paramsList: [{
+					name: 'PID自动调节设定值',
+					params: ['0.02MPa']
+				},{
+					name: '2#补水流量',
+					params: ['203.01m³/h']
+				},{
+					name: '锅筒水位',
+					params: ['0.02MM']
+				},{
+					name: '锅筒压力',
+					params: ['0.02MM']
+				},{
+					name: '排烟温度',
+					params: ['0.02℃']
+				},{
+					name: '燃烧器负荷',
+					params: ['0.02%']
+				},{
+					name: '起停炉设定值',
+					params: ['0.02MPa']
+				},{
+					name: '主蒸汽压力',
+					params: ['0.02MPa']
+				},{
+					name: '主蒸汽温度',
+					params: ['0.02℃']
+				},{
+					name: '2#蒸汽电动闸',
+					params: ['0.02%']
+				},{
+					name: '水箱液位',
+					params: ['0.02m']
+				},{
+					name: '3#补水泵运行频率',
+					params: ['0.02Hz']
+				}]
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+		},
+		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: auto;
+				padding: 0rpx 49rpx 0;
+				background: url(../../../static/page_bg.png);
+				background-size: 140%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+
+					.data-item-wrap {
+						width: 33.33%;
+						padding: 9rpx 0;
+						min-height: 81rpx;
+						text-align: center;
+						margin-top: 48rpx;
+						border-right: 1px solid #FFFFFF;
+
+						.title {
+							font-size: 22rpx;
+							color: #FFFFFF;
+							margin-bottom: 14rpx;
+						}
+
+						.data {
+							font-weight: 700;
+							font-size: 32rpx;
+							color: #FFF600;
+						}
+					}
+
+					.data-item-wrap:nth-child(-n+3) {
+						margin-top: 0;
+					}
+
+					.data-item-wrap:nth-child(3n) {
+						border: none;
+					}
+				}
+
+				.img-wrap {
+					padding: 38rpx 0 57rpx;
+					text-align: center;
+
+					image {
+						width: 100rpx;
+						height: 120rpx;
+					}
+				}
+
+				.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;
+				
+				.detail-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					padding: 35rpx 55rpx 18rpx 55rpx;
+					color: #8D8D8D;
+					.item {
+						display: flex;
+						font-size: 26rpx;
+						justify-content: space-between;
+						width: calc(50% - 61rpx);
+						margin-bottom: 50rpx;
+						
+						.params {
+							color: #00BD00;
+						}
+						
+						.status-wrap {
+							width: 100%;
+							
+							/deep/ .tip-wrap {
+								width: 100%;
+								justify-content: space-between;
+							}
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 120rpx;
+					}
+				}
+				
+				.params-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					font-size: 26rpx;
+					padding: 35rpx 55rpx;
+					
+					.item {
+						width: calc(50% - 32rpx);
+						display: flex;
+						justify-content: space-between;
+						margin-top: 50rpx;
+						
+						view:first-child {
+							color: #8D8D8D;
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 62rpx;
+					}
+					
+					.item:nth-child(-n+2) {
+						margin-top: 0;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/rl-system/xgl.vue

@@ -0,0 +1,220 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="img-wrap">
+					<image src="@/static/rhb.jpg" />
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'设备参数'">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="paramsList"></simple-table>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pageData: {},
+				tableHead: ['名称', '参数'],
+				paramsList: [{
+					name: '1#锅炉',
+					params: ['???℃']
+				},{
+					name: '2#锅炉',
+					params: ['???℃']
+				},{
+					name: '3#锅炉',
+					params: ['???℃']
+				},{
+					name: '4#锅炉',
+					params: ['???℃']
+				},{
+					name: '锅炉供水管',
+					params: ['???℃']
+				},{
+					name: '二次供水管',
+					params: ['???℃']
+				},{
+					name: '实际目标水温',
+					params: ['???℃']
+				},{
+					name: '当前室内水温',
+					params: ['???℃']
+				},{
+					name: '低低控制温度',
+					params: ['???℃']
+				},{
+					name: '最低控制温度',
+					params: ['???℃']
+				},{
+					name: '最高控制温度',
+					params: ['???℃']
+				},{
+					name: '出水超温',
+					params: ['???℃']
+				},{
+					name: '二次供水超温',
+					params: ['???℃']
+				},{
+					name: '二次回水低压',
+					params: ['???MPa']
+				},{
+					name: '水箱液位高',
+					params: ['???M']
+				},{
+					name: '水箱液位低',
+					params: ['???M']
+				}]
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+		},
+		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: auto;
+				padding: 50rpx 49rpx 0;
+				background: url(../../../static/page_bg.png);
+				background-size: 140%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+
+					.data-item-wrap {
+						width: 33.33%;
+						padding: 9rpx 0;
+						min-height: 81rpx;
+						text-align: center;
+						margin-top: 48rpx;
+						border-right: 1px solid #FFFFFF;
+
+						.title {
+							font-size: 22rpx;
+							color: #FFFFFF;
+							margin-bottom: 14rpx;
+						}
+
+						.data {
+							font-weight: 700;
+							font-size: 32rpx;
+							color: #FFF600;
+						}
+					}
+
+					.data-item-wrap:nth-child(-n+3) {
+						margin-top: 0;
+					}
+
+					.data-item-wrap:nth-child(3n) {
+						border: none;
+					}
+				}
+
+				.img-wrap {
+					padding: 38rpx 0 57rpx;
+					text-align: center;
+
+					image {
+						width: 100rpx;
+						height: 120rpx;
+					}
+				}
+
+				.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;
+				
+				.detail-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					padding: 35rpx 55rpx 18rpx 55rpx;
+					color: #8D8D8D;
+					.item {
+						display: flex;
+						font-size: 26rpx;
+						justify-content: space-between;
+						width: calc(50% - 61rpx);
+						margin-bottom: 50rpx;
+						
+						.params {
+							color: #00BD00;
+						}
+						
+						.status-wrap {
+							width: 100%;
+							
+							/deep/ .tip-wrap {
+								width: 100%;
+								justify-content: space-between;
+							}
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 120rpx;
+					}
+				}
+				
+				.params-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					font-size: 26rpx;
+					padding: 35rpx 55rpx;
+					
+					.item {
+						width: calc(50% - 32rpx);
+						display: flex;
+						justify-content: space-between;
+						margin-top: 50rpx;
+						
+						view:first-child {
+							color: #8D8D8D;
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 62rpx;
+					}
+					
+					.item:nth-child(-n+2) {
+						margin-top: 0;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/supply-water/detail/detail.vue

@@ -0,0 +1,352 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'排水系统'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view class="system-wrap">
+						<view class="title">
+							<view class="left">
+								<image src="@/static/jg-icon.png"/>
+								<view class="center">多级排水系统</view>
+							</view>
+							<view class="right">
+								<image src="@/static/right-arrow.png"/>
+							</view>
+						</view>
+						<view class="params-wrap">
+							<view class="item" style="width: 40%;">
+								<view>1#水池液位</view>
+								<view>3m</view>
+							</view>
+							<view class="item" style="width: calc(60% - 52rpx);">
+								<view>通讯状态</view>
+								<view>通讯正常</view>
+							</view>
+							<view class="item" style="width: 40%;">
+								<view>2#水池液位</view>
+								<view>2.74m</view>
+							</view>
+							<view class="item" style="width: calc(60% - 52rpx);">
+								<view>通讯地址</view>
+								<view>172.16.59.241</view>
+							</view>
+						</view>
+					</view>
+					<view class="system-wrap">
+						<view class="title">
+							<view class="left">
+								<image src="@/static/jg-icon.png"/>
+								<view class="center">多级供水系统</view>
+							</view>
+							<view class="right">
+								<image src="@/static/right-arrow.png"/>
+							</view>
+						</view>
+						<view class="params-wrap">
+							<view class="item" style="width: calc(60% - 52rpx);">
+								<view>补清水量</view>
+								<view>29759m³</view>
+							</view>
+							<view class="item" style="width: 40%;margin-left: 42rpx;">
+								<view>通讯状态</view>
+								<view>通讯正常</view>
+							</view>
+							<view class="item" style="width: 100%;justify-content: start;">
+								<view>复用水累计流量</view>
+								<view>10358744.8m³</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card v-for="(item, index) in list" style="margin-bottom: 30rpx;" :name="item.name" :data="item" @goDetail="goDetail">
+					<template v-slot:content>
+						<view class="item-wrap">
+							<view class="position">
+								<view>太仓水位</view>
+								<view>{{ item.position }}</view>
+							</view>
+							<view class="status-wrap">
+								<status-tip class="item" v-for="(item1,index1) in item.children" :key="index1" :name="item1.name" :status="item1.status" :tip="item1.status ? '运行' : '停止'"></status-tip>
+							</view>
+						</view>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				systemList: [{ // 系统列表
+					name: '多级排水系统',
+					children: [{
+						name: '1#水池液位',
+						data: '3m'
+					},{
+						name: '通讯状态',
+						data: '通讯正常'
+					},{
+						name: '2#水池液位',
+						data: '2.74m'
+					},{
+						name: '通讯地址',
+						data: '172.16.59.241'
+					}]
+				},{
+					name: '多级供水系统',
+					children: [{
+						name: '补清水量',
+						data: '29759m³'
+					},{
+						name: '通讯状态',
+						data: '通讯正常'
+					},{
+						name: '复用水累计流量',
+						data: '10358744.8m³'
+					}]
+				}],
+				list: [{ // 泵房列表
+					name: '清水泵房',
+					position: '2.14m',
+					children: [{
+						name: '1#清水泵',
+						status: 0
+					},{
+						name: '4#清水泵',
+						status: 1
+					},{
+						name: '2#清水泵',
+						status: 0
+					},{
+						name: '5#清水泵',
+						status: 0
+					},{
+						name: '3#清水泵',
+						status: 0
+					},{
+						name: '6#清水泵',
+						status: 0
+					}]
+				},{
+					name: '+1000水泵房',
+					position: '2.14m',
+					children: [{
+						name: '1#清水泵',
+						status: 0
+					},{
+						name: '3#清水泵',
+						status: 1
+					},{
+						name: '2#清水泵',
+						status: 0
+					},{
+						name: '4#清水泵',
+						status: 0
+					}]
+				},{
+					name: '13207水泵房',
+					position: '2.14m',
+					children: [{
+						name: '1#清水泵',
+						status: 0
+					},{
+						name: '3#清水泵',
+						status: 1
+					},{
+						name: '2#清水泵',
+						status: 0
+					},{
+						name: '4#清水泵',
+						status: 0
+					}]
+				},{
+					name: '880水泵房',
+					position: '2.14m',
+					children: [{
+						name: '1#清水泵',
+						status: 0
+					},{
+						name: '3#清水泵',
+						status: 1
+					},{
+						name: '2#清水泵',
+						status: 0
+					}]
+				},{
+					name: '929水泵房',
+					position: '2.14m',
+					children: [{
+						name: '1#清水泵',
+						status: 0
+					},{
+						name: '3#清水泵',
+						status: 1
+					},{
+						name: '2#清水泵',
+						status: 0
+					}]
+				},{
+					name: '950水泵房',
+					position: '2.14m',
+					children: [{
+						name: '1#清水泵',
+						status: 0
+					},{
+						name: '3#清水泵',
+						status: 1
+					},{
+						name: '2#清水泵',
+						status: 0
+					}]
+				}]
+			}
+		},
+		onLoad() {},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			},
+			goDetail(data) { // 卡片右上角跳转详情
+				uni.navigateTo({
+					url: `/pages/data/supply-water/supply-room/supply-room?data=${JSON.stringify(data)}`,
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow: scroll;
+
+			.basic-info-wrap {
+				position: relative;
+				height: 610rpx;
+				padding: 50rpx 49rpx 0;
+				background: url(../../../../static/page_bg.png);
+				background-size: 100%;
+				
+				.info-wrap {
+					.system-wrap {
+						width: calc(100vw - 98rpx);
+						height: 235rpx;
+						padding: 42rpx 35rpx 38rpx 52rpx;
+						background: url(../../../../static/chart-bg.png);
+						background-size: calc(100vw - 98rpx) 235rpx;
+						margin-bottom: 27rpx;
+						
+						.title {
+							display: flex;
+							justify-content: space-between;
+							
+							.left {
+								display: flex;
+								align-items: center;
+								image {
+									width: 37rpx;
+									height: 36rpx;
+									margin-right: 21rpx;
+									vertical-align: bottom;
+								}
+								.center {
+									color: #fff;
+									font-size: 34rpx;
+									font-weight: 700;
+								}
+							}
+							
+							.right {
+								image {
+									width: 16rpx;
+									height: 29rpx;
+								}
+							}
+						}
+						
+						.params-wrap {
+							display: flex;
+							flex-wrap: wrap;
+							.item {
+								margin-top: 26rpx;
+								display: flex;
+								justify-content: space-between;
+								width: calc(50% - 26rpx);
+								font-size: 26rpx;
+								color: #fff;
+								
+								view:last-child {
+									color: #FFFF00;
+								}
+							}
+							
+							.item:nth-child(2n) {
+								margin-left: 52rpx;
+							}
+						}
+					}
+				}
+				
+				.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;
+				
+				.item-wrap {
+					padding: 47rpx 62rpx 35rpx 55rpx;
+					color: #8D8D8D;
+					
+					.position {
+						display: flex;
+						
+						view:first-child {
+							margin-right: 20rpx;
+						}
+					}
+					
+					.status-wrap {
+						display: flex;
+						flex-wrap: wrap;
+						
+						.item {
+							width: calc(50% - 30rpx);
+							margin-top: 48rpx;
+							
+							/deep/ .status-wrap {
+								color: #000000;
+								view:first-child {
+									margin: 0 7rpx 0 14rpx;
+								}
+							}
+						}
+						
+						.item:nth-child(2n) {
+							margin-left: 60rpx;
+						}
+					}
+				}
+
+				/deep/ .card-wrap:last-child {
+					margin-bottom: 0 !important;
+				}
+			}
+		}
+	}
+</style>

pages/data/supply-water/pool-system/pool-system.vue

@@ -0,0 +1,174 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view class="status-list">
+						<view class="item-wrap" v-for="(item, index) in sbList" :key="item.id">
+							<view class="name">{{ item.name }}</view>
+							<status-tip class="status" v-for="(item1, index1) in item.status" :key="index1" :name="''" :status="item1.status" :tip="item1.tip"></status-tip>
+						</view>
+					</view>
+				</view>
+				<view class="img-wrap">
+					<image src="@/static/pool.png" />
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card v-for="(item, index) in 2" style="margin-bottom: 30rpx;" :notShow="true" :name="`${index + 1}号水池`">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="paramsList"></simple-table>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				activeData: {}, // 当前选中的数据
+				sbList: [{ // 水泵列表
+					id: 0,
+					name: '来自950水泵房',
+					status: [{
+						tip: '1号闸阀',
+						status: 1
+					}, {
+						tip: '3号闸阀',
+						status: 1
+					}]
+				}, {
+					id: 1,
+					name: '来自五分区水泵房',
+					status: [{
+						tip: '2号闸阀',
+						status: 1
+					}, {
+						tip: '4号闸阀',
+						status: 1
+					}]
+				}],
+				pageData: {}, // 页头信息
+				tableHead: ['名称', '参数'], // 表头信息
+				paramsList: [{ // 液位列表
+					name: '液位(m)',
+					params: ['2.98'],
+				}, {
+					name: '超高液位设定值(m)',
+					params: ['3'],
+				}, {
+					name: '高液位设定值(m)',
+					params: ['2.8'],
+				}, {
+					name: '低液位设定值(m)',
+					params: ['1'],
+				}]
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+			this.activeData = this.sbList[0]
+		},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			},
+			kindChange(data) { // 切换水泵状态
+				this.activeData = data
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow: scroll;
+
+			.basic-info-wrap {
+				position: relative;
+				height: 531rpx;
+				padding: 0 49rpx;
+				background: url(../../../../static/page_bg.png);
+				background-size: 150%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					border-bottom: 1rpx dashed #fff;
+				}
+
+				.img-wrap {
+					padding-top: 54rpx;
+					text-align: center;
+
+					image {
+						width: 324rpx;
+						height: 128rpx;
+					}
+
+					view {
+						margin-top: 26rpx;
+						color: #fff;
+						font-size: 26rpx;
+					}
+				}
+
+				.status-list {
+					width: 100%;
+					padding: 60rpx 0;
+					
+					.item-wrap {
+						display: flex;
+						width: 100%;
+						font-size: 26rpx;
+						color: #FFFFFF;
+						padding: 23rpx 32rpx;
+						
+						.name {
+							width: 40%;
+						}
+						
+						.status {
+							width: 30%;
+						}
+					}
+					
+					.active {
+						background: #3495FA;
+						box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0,8,35,0.31);
+						border-radius: 14rpx;
+					}
+					
+					/deep/ .tip-wrap {
+						margin-left: 12rpx;
+					}
+				}
+				
+				.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;
+
+				/deep/ .card-wrap:last-child {
+					margin-bottom: 0 !important;
+				}
+			}
+		}
+	}
+</style>

pages/data/supply-water/supply-room/supply-room.vue

@@ -0,0 +1,233 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view class="data-wrap">
+						<view class="data-item-wrap" v-for="(item, index) in list">
+							<view class="title">{{ item.name }}</view>
+							<view class="data">{{ item.params }}</view>
+						</view>
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card v-for="(item, index) in itemList" :key="index" style="margin-bottom: 30rpx;" :notShow="true" :name="item.name">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="item.paramsList"></simple-table>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				activeData: {}, // 当前选中的项
+				list: [{ // 基础信息
+					name: '1#管路流量',
+					params: '818547.8m³/h'
+				}, {
+					name: '2#管路流量',
+					params: '206.2m³/h'
+				}, {
+					name: '3#管路流量',
+					params: '639019.3m³/h'
+				}, {
+					name: '1#水位',
+					params: '1.50m'
+				}, {
+					name: '2#水位',
+					params: '1.49m'
+				}],
+				pageData: {}, // 页头信息
+				tableHead: ['名称', '参数'], // 表名
+				itemList: [{
+					name: '一号泵控制',
+					paramsList: [{
+						name: '负压',
+						params: ['0.000Mpa']
+					}, {
+						name: '正压',
+						params: ['0.03Mpa']
+					}, {
+						name: '电压',
+						params: ['00.00V']
+					}]
+				}, {
+					name: '二号泵控制',
+					paramsList: [{
+						name: '负压',
+						params: ['-0.002Mpa']
+					}, {
+						name: '正压',
+						params: ['0.06Mpa']
+					}, {
+						name: '电压',
+						params: ['00.00V']
+					}]
+				}, {
+					name: '三号泵控制',
+					paramsList: [{
+						name: '负压',
+						params: ['0.000Mpa']
+					}, {
+						name: '正压',
+						params: ['0.00Mpa']
+					}, {
+						name: '电压',
+						params: ['00.00V']
+					}]
+				}, {
+					name: '五号泵控制',
+					paramsList: [{
+						name: '负压',
+						params: ['0.000Mpa']
+					}, {
+						name: '正压',
+						params: ['0.00Mpa']
+					}, {
+						name: '电压',
+						params: ['00.00V']
+					}]
+				}, {
+					name: '六号泵控制',
+					paramsList: [{
+						name: '负压',
+						params: ['0.000Mpa']
+					}, {
+						name: '正压',
+						params: ['0.00Mpa']
+					}, {
+						name: '电压',
+						params: ['00.00V']
+					}]
+				}]
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+		},
+		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: auto;
+				padding: 50rpx 49rpx 0;
+				background: url(../../../../static/page_bg.png);
+				background-size: 150%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					border-bottom: 1rpx dashed #fff;
+					padding-bottom: 85rpx;
+				}
+
+				.img-wrap {
+					padding-top: 34rpx;
+					text-align: center;
+
+					image {
+						width: 324rpx;
+						height: 128rpx;
+					}
+
+					view {
+						margin-top: 26rpx;
+						color: #fff;
+						font-size: 26rpx;
+					}
+				}
+
+				.data-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					width: 100%;
+
+					.data-item-wrap {
+						width: 33.33333%;
+						padding: 9rpx 0;
+						min-height: 81rpx;
+						text-align: center;
+						margin-top: 60rpx;
+
+						.title {
+							font-size: 22rpx;
+							color: #FFFFFF;
+							margin-bottom: 14rpx;
+						}
+
+						.data {
+							font-weight: 700;
+							font-size: 36rpx;
+							color: #FFF600;
+							word-wrap: break-word;
+						}
+					}
+
+					.data-item-wrap:nth-child(-n+3) {
+						margin-top: 0;
+					}
+				}
+
+				.status-list {
+					width: 100%;
+					padding-top: 60rpx;
+					
+					.item-wrap {
+						display: flex;
+						font-size: 26rpx;
+						color: #FFFFFF;
+						padding: 23rpx 32rpx;
+					}
+					
+					.active {
+						background: #3495FA;
+						box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0,8,35,0.31);
+						border-radius: 14rpx;
+					}
+					
+					/deep/ .tip-wrap {
+						margin-left: 12rpx;
+					}
+				}
+				
+				.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;
+
+				/deep/ .card-wrap:last-child {
+					margin-bottom: 0 !important;
+				}
+			}
+		}
+	}
+</style>

pages/data/transport/belt/belt.vue

@@ -0,0 +1,183 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view @click="activeChange(item)" v-for="(item,index) in list" :class="activeData.name === item.name ? 'active item' : 'item'"
+						:key="index">
+						<status-tip class="status-wrap" :name="item.name" :status="item.status"
+							:tip="item.status ? '运行' : '停止'"></status-tip>
+					</view>
+				</view>
+				<view class="img-wrap">
+					<image src="@/static/pd.png"/>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'皮带参数'">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="paramsList"></simple-table>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				activeData: {},
+				list: [{
+					name: '1#皮带',
+					status: 1
+				},{
+					name: '2#皮带',
+					status: 1
+				},{
+					name: '3#皮带',
+					status: 1
+				}],
+				tableHead: ['名称', '参数/状态'],
+				paramsList: [{
+					name: '速度',
+					params: ['23m/s']
+				},{
+					name: '远近控状态',
+					params: ['正常']
+				},{
+					name: '联锁模式',
+					params: ['暂无']
+				},{
+					name: '区域闯入',
+					params: ['暂无']
+				},{
+					name: '急停',
+					params: ['暂无']
+				},{
+					name: '备要信号',
+					params: [{
+						status: 1
+					}]
+				},{
+					name: '烟雾',
+					params: [{
+						status: 1
+					}]
+				},{
+					name: '堆煤',
+					params: [{
+						status: 1
+					}]
+				},{
+					name: '纵断',
+					params: [{
+						status: 1
+					}]
+				},{
+					name: '跑偏',
+					params: [{
+						status: 1
+					}]
+				}]
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+			this.activeData = this.list[0]
+		},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			},
+			activeChange(item) { // 切换状态
+				this.activeData = item
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow: scroll;
+
+			.basic-info-wrap {
+				position: relative;
+				height: auto;
+				padding: 50rpx 49rpx 0;
+				background: url(../../../../static/page_bg.png);
+				background-size: 100%;
+				
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					border-bottom: 1rpx dashed #fff;
+					padding-bottom: 20rpx;
+					
+					.item {
+						display: flex;
+						justify-content: space-between;
+						width: calc(50% - 64rpx);
+						padding: 20rpx;
+						color: #fff;
+						font-size: 26rpx;
+						
+						.status-wrap {
+							width: 100%;
+							/deep/ .tip-wrap {
+								justify-content: space-between;
+							}
+						}
+						
+						.params {
+							color: #FFFF00;
+						}
+					}
+					
+					.item:nth-child(2n-1) {
+						margin-right: 120rpx
+					}
+					
+					.active {
+						background: #3495FA;
+						box-shadow: 0px 3px 7px 0px rgba(0, 8, 35, 0.31);
+						border-radius: 14px;
+					}
+				}
+				
+				.img-wrap {
+					padding: 70rpx 0;
+					text-align: center;
+					
+					image {
+						width: 443rpx;
+						height: 48rpx;
+					}
+				}
+				
+				.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;
+
+				/deep/ .card-wrap:last-child {
+					margin-bottom: 0 !important;
+				}
+			}
+		}
+	}
+</style>

pages/data/transport/gmj.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/data/transport/jdgl.vue

@@ -0,0 +1,175 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view @click="activeChange(item)" v-for="(item,index) in list" :class="activeData.name === item.name ? 'active item' : 'item'"
+						:key="index">
+						<status-tip class="status-wrap" :name="item.name" :status="item.status"
+							:tip="item.status ? '运行' : '停止'"></status-tip>
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="activeData.name">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="paramsList"></simple-table>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pageData: {},
+				activeData: {},
+				list: [{
+					name: '1#甲带给料机',
+					status: 1
+				},{
+					name: '2#甲带给料机',
+					status: 1
+				},{
+					name: '3#甲带给料机',
+					status: 0
+				},{
+					name: '4#甲带给料机',
+					status: 1
+				}],
+				tableHead: ['名称', '参数/状态'],
+				paramsList: [{
+						name: '控制方式',
+						params: ['就地']
+					},
+					{
+						name: '变频器母线电压(V)',
+						params: ['9999']
+					},
+					{
+						name: '变频器输出电压(V)',
+						params: ['9999']
+					},
+					{
+						name: '变频器输出电流(A)',
+						params: ['20.23']
+					},
+					{
+						name: '变频器输出频率(Hz)',
+						params: ['9364']
+					},
+					{
+						name: '变频器温度(℃)',
+						params: ['80.24']
+					},
+					{
+						name: '变频器故障',
+						params: [{
+							status: 1
+						}]
+					}
+				]
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+			this.activeData = this.list[0]
+		},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			},
+			activeChange(item) { // 切换状态
+				this.activeData = item
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow: scroll;
+
+			.basic-info-wrap {
+				position: relative;
+				height: auto;
+				padding: 50rpx 49rpx 40rpx;
+				background: url(../../../static/page_bg.png);
+				background-size: 120%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					padding-bottom: 30rpx;
+
+					.item {
+						display: flex;
+						padding: 24rpx 14rpx;
+						justify-content: space-between;
+						width: 50%;
+						color: #fff;
+						font-size: 26rpx;
+
+						.status-wrap {
+							width: 100%;
+
+							/deep/ .tip-wrap {
+								justify-content: space-between;
+							}
+						}
+
+						.params {
+							color: #FFFF00;
+						}
+					}
+
+					.active {
+						background: #3495FA;
+						box-shadow: 0px 3px 7px 0px rgba(0, 8, 35, 0.31);
+						border-radius: 14px;
+					}
+				}
+
+				.img-wrap {
+					padding: 49rpx 0;
+					text-align: center;
+
+					image {
+						width: 310rpx;
+						height: 138rpx;
+					}
+					
+					view {
+						margin-top: 25rpx;
+						color: #fff;
+					}
+				}
+
+				.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;
+
+				/deep/ .card-wrap:last-child {
+					margin-bottom: 0 !important;
+				}
+			}
+		}
+	}
+</style>

pages/data/transport/passenger/passenger.vue

@@ -0,0 +1,345 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'东井驾空乘人器'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view v-for="(item,index) in list" class="data-item-wrap">
+						<view class="title">{{ item.name }}</view>
+						<view class="data">{{ item.data }}</view>
+					</view>
+				</view>
+				<view class="img-wrap">
+					<image src="@/static/passenger.png" />
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'信号参数'">
+					<template v-slot:content>
+						<view class="detail-wrap">
+							<template v-for="(item, index) in statusList">
+								<view class="item" v-if="!item.data">
+									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
+								</view>
+								<view class="item" v-else>
+									<view>{{ item.name }}</view>
+									<view class="params">{{ item.data }}</view>
+								</view>
+							</template>
+						</view>
+					</template>
+				</page-card>
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'变频参数'">
+					<template v-slot:content>
+						<view class="params-wrap">
+							<view class="item" v-for="(item, index) in paramsList">
+								<view>
+									{{ item.name }}
+								</view>
+								<view>
+									{{ item.data }}
+								</view>
+							</view>
+						</view>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '停车倒计时',
+					data: '0s'
+				}, {
+					name: '猴车速度',
+					data: '0m/s'
+				}, {
+					name: '制动闸压力',
+					data: '07.54MPa'
+				}],
+				statusList: [{
+					name: '操作台急停',
+					status: 1,
+				}, {
+					name: '965通讯中断',
+					status: 1,
+				}, {
+					name: '1172通讯中断',
+					status: 1,
+				}, {
+					name: '机尾上人信号',
+					status: 1,
+				}, {
+					name: '1065上人信号',
+					status: 1,
+				}, {
+					name: '1172上人信号',
+					status: 1,
+				}, {
+					name: '上位机急停',
+					status: 1,
+				}, {
+					name: '1065通讯中断',
+					status: 1,
+				}, {
+					name: '机尾通讯中断',
+					status: 1,
+				}],
+				statusList: [{
+					name: '欠速保护',
+					status: 1,
+				},{
+					name: '尾轮限位',
+					status: 1,
+				},{
+					name: '机尾越位',
+					status: 1,
+				},{
+					name: '重锤落地',
+					status: 1,
+				},{
+					name: '绳张紧',
+					status: 1,
+				},{
+					name: '主电机超温',
+					status: 1,
+				},{
+					name: '机尾吊椅间距保护',
+					status: 1,
+				},{
+					name: '掉绳保护',
+					status: 1,
+				},{
+					name: '油温过低',
+					status: 1,
+				},{
+					name: '抱闸失控',
+					status: 1,
+				},{
+					name: '超温保护',
+					status: 1,
+				},{
+					name: '机头越位',
+					status: 1,
+				},{
+					name: '断轴保护',
+					status: 1,
+				},{
+					name: '打滑保护',
+					status: 1,
+				},{
+					name: '液压站超温',
+					status: 1,
+				},{
+					name: '主电机断电',
+					status: 1,
+				},{
+					name: '安全闸保护',
+					status: 1,
+				},{
+					name: '断绳保护',
+					status: 1,
+				},{
+					name: '沿线急停',
+					status: 1,
+				},{
+					name: '减速机超温',
+					status: 1,
+				}],
+				paramsList: [{
+					name: '母线电压',
+					data: '999.00',
+				},{
+					name: '输入电压',
+					data: '699.60',
+				},{
+					name: '输入电流',
+					data: '9.49',
+				},{
+					name: '输入频率',
+					data: '49.94',
+				},{
+					name: '有功功率',
+					data: '11.00',
+				},{
+					name: '无功功率',
+					data: '0.00',
+				},{
+					name: '变频温度',
+					data: '19.80',
+				},{
+					name: '逆母线电压',
+					data: '995.00',
+				},{
+					name: '输出电压',
+					data: '584.40',
+				},{
+					name: '输出转矩',
+					data: '50.10',
+				},{
+					name: '输出频率',
+					data: '44.30',
+				},{
+					name: '电机速度',
+					data: '885.00',
+				},{
+					name: '输出电流',
+					data: '27.00',
+				},{
+					name: '输出功率',
+					data: '4.30',
+				},{
+					name: '输入功率',
+					data: '6.30',
+				},{
+					name: '交频温度',
+					data: '21.20',
+				}]
+			}
+		},
+		onLoad() {},
+		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: auto;
+				padding: 50rpx 49rpx 0;
+				background: url(../../../../static/page_bg.png);
+				background-size: 110%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+
+					.data-item-wrap {
+						width: 33.33%;
+						padding: 9rpx 0;
+						min-height: 81rpx;
+						text-align: center;
+						margin-top: 48rpx;
+						border-right: 1px solid #FFFFFF;
+
+						.title {
+							font-size: 22rpx;
+							color: #FFFFFF;
+							margin-bottom: 14rpx;
+						}
+
+						.data {
+							font-weight: 700;
+							font-size: 32rpx;
+							color: #FFF600;
+						}
+					}
+
+					.data-item-wrap:nth-child(-n+3) {
+						margin-top: 0;
+					}
+
+					.data-item-wrap:nth-child(3n) {
+						border: none;
+					}
+				}
+
+				.img-wrap {
+					padding: 38rpx 0 57rpx;
+					text-align: center;
+
+					image {
+						width: 350rpx;
+						height: 194rpx;
+					}
+				}
+
+				.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;
+				
+				.detail-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					padding: 35rpx 55rpx 18rpx 55rpx;
+					color: #8D8D8D;
+					.item {
+						display: flex;
+						font-size: 26rpx;
+						justify-content: space-between;
+						width: calc(50% - 61rpx);
+						margin-bottom: 50rpx;
+						
+						.params {
+							color: #00BD00;
+						}
+						
+						.status-wrap {
+							width: 100%;
+							
+							/deep/ .tip-wrap {
+								width: 100%;
+								justify-content: space-between;
+							}
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 120rpx;
+					}
+				}
+				
+				.params-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					font-size: 26rpx;
+					padding: 35rpx 55rpx;
+					
+					.item {
+						width: calc(50% - 32rpx);
+						display: flex;
+						justify-content: space-between;
+						margin-top: 50rpx;
+						
+						view:first-child {
+							color: #8D8D8D;
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 62rpx;
+					}
+					
+					.item:nth-child(-n+2) {
+						margin-top: 0;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/ts-system/flj.vue

@@ -0,0 +1,379 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'副立井提升'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view v-for="(item,index) in list" class="data-item-wrap">
+						<view class="title">{{ item.name }}</view>
+						<view class="data">{{ item.data }}</view>
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'小罐'">
+					<template v-slot:content>
+						<view class="detail-wrap">
+							<template v-for="(item, index) in statusList">
+								<view class="item" v-if="!item.data">
+									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
+								</view>
+								<view class="item" v-else>
+									<view>{{ item.name }}</view>
+									<view class="params">{{ item.data }}</view>
+								</view>
+							</template>
+						</view>
+					</template>
+				</page-card>
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'大罐'">
+					<template v-slot:content>
+						<view class="detail-wrap">
+							<template v-for="(item, index) in statusList1">
+								<view class="item" v-if="!item.data">
+									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
+								</view>
+								<view class="item" v-else>
+									<view>{{ item.name }}</view>
+									<view class="params">{{ item.data }}</view>
+								</view>
+							</template>
+						</view>
+					</template>
+				</page-card>
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'提升类型'">
+					<template v-slot:content>
+						<view class="detail-wrap">
+							<template v-for="(item, index) in statusList2">
+								<view class="item" v-if="!item.data">
+									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
+								</view>
+								<view class="item" v-else>
+									<view>{{ item.name }}</view>
+									<view class="params">{{ item.data }}</view>
+								</view>
+							</template>
+						</view>
+					</template>
+				</page-card>
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'运行状态'">
+					<template v-slot:content>
+						<view class="detail-wrap">
+							<template v-for="(item, index) in statusList3">
+								<view class="item" v-if="!item.data">
+									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
+								</view>
+								<view class="item" v-else>
+									<view>{{ item.name }}</view>
+									<view class="params">{{ item.data }}</view>
+								</view>
+							</template>
+						</view>
+					</template>
+				</page-card>
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'去向'">
+					<template v-slot:content>
+						<view class="detail-wrap">
+							<template v-for="(item, index) in statusList4">
+								<view class="item" v-if="!item.data">
+									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
+								</view>
+								<view class="item" v-else>
+									<view>{{ item.name }}</view>
+									<view class="params">{{ item.data }}</view>
+								</view>
+							</template>
+						</view>
+					</template>
+				</page-card>
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'开车方式'">
+					<template v-slot:content>
+						<view class="detail-wrap">
+							<template v-for="(item, index) in statusList5">
+								<view class="item" v-if="!item.data">
+									<status-tip class="status-wrap" :name="item.name" :status="item.status"></status-tip>
+								</view>
+								<view class="item" v-else>
+									<view>{{ item.name }}</view>
+									<view class="params">{{ item.data }}</view>
+								</view>
+							</template>
+						</view>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '磁场电流',
+					data: '22.27A'
+				}, {
+					name: '运行速度',
+					data: '32/s'
+				}, {
+					name: '液压站压力',
+					data: '0.7MPa'
+				}, {
+					name: '小罐深度',
+					data: '15M'
+				}, {
+					name: '电枢电流',
+					data: '22.98A'
+				}, {
+					name: '大罐深度',
+					data: '45M'
+				}, {
+					name: '提物钩数',
+					data: '9'
+				}, {
+					name: '提人钩数',
+					data: '5'
+				}],
+				statusList: [{
+					name: '下碰撞开关',
+					status: 1,
+				}, {
+					name: '下过卷开关',
+					status: 1,
+				}, {
+					name: '下换层开关',
+					status: 1,
+				}, {
+					name: '下停车开关',
+					status: 1,
+				}, {
+					name: '下2M/s开关',
+					status: 1,
+				}, {
+					name: '下减速开关',
+					status: 1,
+				}, {
+					name: '下同步开关',
+					status: 1,
+				}],
+				statusList1: [{
+					name: '上碰撞开关',
+					status: 1,
+				}, {
+					name: '上过卷开关',
+					status: 1,
+				}, {
+					name: '上换层开关',
+					status: 1,
+				}, {
+					name: '上停车开关',
+					status: 1,
+				}, {
+					name: '上2M/s开关',
+					status: 1,
+				}, {
+					name: '上减速开关',
+					status: 1,
+				}, {
+					name: '上同步开关',
+					status: 1,
+				}],
+				statusList2: [{
+					name: '信号提人',
+					status: 1,
+				}, {
+					name: '信号提物',
+					status: 1,
+				}, {
+					name: '信号特运',
+					status: 1,
+				}, {
+					name: '信号检修',
+					status: 1,
+				}, {
+					name: '信号换层',
+					status: 1,
+				}],
+				statusList3: [{
+					name: '信号慢上',
+					status: 1,
+				}, {
+					name: '信号慢下',
+					status: 1,
+				}, {
+					name: '信号停车',
+					status: 1,
+				}, {
+					name: '信号急停',
+					status: 1,
+				}],
+				statusList4: [{
+					name: '去+井口',
+					status: 1,
+				}, {
+					name: '去+1075',
+					status: 1,
+				}, {
+					name: '去+井底',
+					status: 1,
+				}],
+				statusList5: [{
+					name: '手动',
+					status: 1,
+				}, {
+					name: '检修',
+					status: 1,
+				}, {
+					name: '半自动',
+					status: 1,
+				}, {
+					name: '下大件',
+					status: 1,
+				}, {
+					name: '过卷复位',
+					status: 1,
+				}],
+			}
+		},
+		onLoad() {},
+		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: auto;
+				padding: 50rpx 49rpx 80rpx;
+				background: url(../../../static/page_bg.png);
+				background-size: 110%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+
+					.data-item-wrap {
+						width: 33.33%;
+						padding: 9rpx 0;
+						min-height: 81rpx;
+						text-align: center;
+						margin-top: 48rpx;
+						border-right: 1px solid #FFFFFF;
+
+						.title {
+							font-size: 22rpx;
+							color: #FFFFFF;
+							margin-bottom: 14rpx;
+						}
+
+						.data {
+							font-weight: 700;
+							font-size: 32rpx;
+							color: #FFF600;
+						}
+					}
+
+					.data-item-wrap:nth-child(-n+3) {
+						margin-top: 0;
+					}
+
+					.data-item-wrap:nth-child(3n) {
+						border: none;
+					}
+				}
+
+				.img-wrap {
+					padding: 38rpx 0 57rpx;
+					text-align: center;
+
+					image {
+						width: 350rpx;
+						height: 194rpx;
+					}
+				}
+
+				.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;
+				
+				.detail-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					padding: 35rpx 55rpx 18rpx 55rpx;
+					color: #8D8D8D;
+					.item {
+						display: flex;
+						font-size: 26rpx;
+						justify-content: space-between;
+						width: calc(50% - 61rpx);
+						margin-bottom: 50rpx;
+						
+						.params {
+							color: #00BD00;
+						}
+						
+						.status-wrap {
+							width: 100%;
+							
+							/deep/ .tip-wrap {
+								width: 100%;
+								justify-content: space-between;
+							}
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 120rpx;
+					}
+				}
+				
+				.params-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					font-size: 26rpx;
+					padding: 35rpx 55rpx;
+					
+					.item {
+						width: calc(50% - 32rpx);
+						display: flex;
+						justify-content: space-between;
+						margin-top: 50rpx;
+						
+						view:first-child {
+							color: #8D8D8D;
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 62rpx;
+					}
+					
+					.item:nth-child(-n+2) {
+						margin-top: 0;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/ts-system/fxj_gd.vue

@@ -0,0 +1,341 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'副斜井轨道运输'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view v-for="(item,index) in list" class="data-item-wrap">
+						<view class="title">{{ item.name }}</view>
+						<view class="data">{{ item.data }}</view>
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card v-for="(item, index) in itemList" :key="index" style="margin-bottom: 30rpx;" :notShow="true" :name="item.name">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="item.paramsList"></simple-table>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '绞车移动距离',
+					data: '153m'
+				}, {
+					name: '移动速度',
+					data: '15m/s'
+				}, {
+					name: '设定距离',
+					data: '462M'
+				}, {
+					name: '报警时长',
+					data: '0S'
+				}, {
+					name: '报警设定',
+					data: '5S'
+				}],
+				tableHead: ['名称', '状态'], // 表名
+				itemList: [{
+					name: '设备状态',
+					paramsList: [{
+						name: '一号阻车器开到位856',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '一号阻车器关到位856',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '二号阻车器开到位856',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '二号阻车器关到位856',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '挡车器开到位856',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '挡车器关到位856',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '一号阻车器开到位上井口',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '一号阻车器关到位上井口',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '二号阻车器开到位上井口',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '二号阻车器关到位上井口',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '挡车器开到位上井口',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '挡车器关到位上井口',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '一号阻车器开到位1172',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '一号阻车器关到位1172',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '二号阻车器开到位1172',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '二号阻车器关到位1172',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '挡车器开到位1172',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '挡车器关到位1172',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '一号阻车器开到位1065',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '一号阻车器关到位1065',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '二号阻车器开到位1065',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '二号阻车器关到位1065',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '挡车器开到位1065',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '挡车器关到位1065',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '一号阻车器开到位965',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '一号阻车器关到位965',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '二号阻车器开到位965',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '二号阻车器关到位965',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '挡车器开到位965',
+						params: [{
+							status: 1
+						}]
+					}, {
+						name: '挡车器关到位965',
+						params: [{
+							status: 1
+						}]
+					}]
+				}]
+			}
+		},
+		onLoad() {},
+		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: auto;
+				padding: 50rpx 49rpx 80rpx;
+				background: url(../../../static/page_bg.png);
+				background-size: 110%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+
+					.data-item-wrap {
+						width: 33.33%;
+						padding: 9rpx 0;
+						min-height: 81rpx;
+						text-align: center;
+						margin-top: 48rpx;
+						border-right: 1px solid #FFFFFF;
+
+						.title {
+							font-size: 22rpx;
+							color: #FFFFFF;
+							margin-bottom: 14rpx;
+						}
+
+						.data {
+							font-weight: 700;
+							font-size: 32rpx;
+							color: #FFF600;
+						}
+					}
+
+					.data-item-wrap:nth-child(-n+3) {
+						margin-top: 0;
+					}
+
+					.data-item-wrap:nth-child(3n) {
+						border: none;
+					}
+				}
+
+				.img-wrap {
+					padding: 38rpx 0 57rpx;
+					text-align: center;
+
+					image {
+						width: 350rpx;
+						height: 194rpx;
+					}
+				}
+
+				.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;
+				
+				.detail-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					padding: 35rpx 55rpx 18rpx 55rpx;
+					color: #8D8D8D;
+					.item {
+						display: flex;
+						font-size: 26rpx;
+						justify-content: space-between;
+						width: calc(50% - 61rpx);
+						margin-bottom: 50rpx;
+						
+						.params {
+							color: #00BD00;
+						}
+						
+						.status-wrap {
+							width: 100%;
+							
+							/deep/ .tip-wrap {
+								width: 100%;
+								justify-content: space-between;
+							}
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 120rpx;
+					}
+				}
+				
+				.params-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					font-size: 26rpx;
+					padding: 35rpx 55rpx;
+					
+					.item {
+						width: calc(50% - 32rpx);
+						display: flex;
+						justify-content: space-between;
+						margin-top: 50rpx;
+						
+						view:first-child {
+							color: #8D8D8D;
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 62rpx;
+					}
+					
+					.item:nth-child(-n+2) {
+						margin-top: 0;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/ts-system/fxj_jc.vue

@@ -0,0 +1,259 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'副斜井绞车'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="info-wrap">
+					<view v-for="(item,index) in list" class="data-item-wrap">
+						<view class="title">{{ item.name }}</view>
+						<view class="data">{{ item.data }}</view>
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card v-for="(item, index) in itemList" :key="index" style="margin-bottom: 30rpx;" :notShow="true" :name="item.name">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="item.paramsList"></simple-table>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '提升高度',
+					data: '25m'
+				}, {
+					name: '提升速度',
+					data: '18m/s'
+				}, {
+					name: '制动油压',
+					data: '0.07Mpa'
+				}, {
+					name: '电枢电流',
+					data: '22.86A'
+				}, {
+					name: '励磁电流',
+					data: '22.45A'
+				}, {
+					name: '润滑油压',
+					data: '0.11Mpa'
+				}, {
+					name: '电机温度1',
+					data: '82.5℃'
+				}, {
+					name: '电机温度2',
+					data: '85.3℃'
+				}],
+				tableHead: ['名称', '深指', '行控'], // 表名
+				itemList: [{
+					name: '提升',
+					paramsList: [{
+						name: '过卷',
+						params: [{
+							status: 1
+						},{
+							status: 1
+						}]
+					}, {
+						name: '停车',
+						params: [{
+							status: 1
+						},{
+							status: 1
+						}]
+					}, {
+						name: '校正',
+						params: [{
+							status: 1
+						},{
+							status: 1
+						}]
+					}, {
+						name: '减速',
+						params: [{
+							status: 1
+						},{
+							status: 0
+						}]
+					}]
+				}, {
+					name: '下放',
+					paramsList: [{
+						name: '过卷',
+						params: [{
+							status: 1
+						},{
+							status: 1
+						}]
+					}, {
+						name: '停车',
+						params: [{
+							status: 1
+						},{
+							status: 1
+						}]
+					}, {
+						name: '校正',
+						params: [{
+							status: 0
+						},{
+							status: 1
+						}]
+					}, {
+						name: '减速',
+						params: [{
+							status: 1
+						},{
+							status: 1
+						}]
+					}]
+				}]
+			}
+		},
+		onLoad() {},
+		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: auto;
+				padding: 50rpx 49rpx 80rpx;
+				background: url(../../../static/page_bg.png);
+				background-size: 110%;
+
+				.info-wrap {
+					display: flex;
+					flex-wrap: wrap;
+
+					.data-item-wrap {
+						width: 33.33%;
+						padding: 9rpx 0;
+						min-height: 81rpx;
+						text-align: center;
+						margin-top: 48rpx;
+						border-right: 1px solid #FFFFFF;
+
+						.title {
+							font-size: 22rpx;
+							color: #FFFFFF;
+							margin-bottom: 14rpx;
+						}
+
+						.data {
+							font-weight: 700;
+							font-size: 32rpx;
+							color: #FFF600;
+						}
+					}
+
+					.data-item-wrap:nth-child(-n+3) {
+						margin-top: 0;
+					}
+
+					.data-item-wrap:nth-child(3n) {
+						border: none;
+					}
+				}
+
+				.img-wrap {
+					padding: 38rpx 0 57rpx;
+					text-align: center;
+
+					image {
+						width: 350rpx;
+						height: 194rpx;
+					}
+				}
+
+				.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;
+				
+				.detail-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					padding: 35rpx 55rpx 18rpx 55rpx;
+					color: #8D8D8D;
+					.item {
+						display: flex;
+						font-size: 26rpx;
+						justify-content: space-between;
+						width: calc(50% - 61rpx);
+						margin-bottom: 50rpx;
+						
+						.params {
+							color: #00BD00;
+						}
+						
+						.status-wrap {
+							width: 100%;
+							
+							/deep/ .tip-wrap {
+								width: 100%;
+								justify-content: space-between;
+							}
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 120rpx;
+					}
+				}
+				
+				.params-wrap {
+					display: flex;
+					flex-wrap: wrap;
+					font-size: 26rpx;
+					padding: 35rpx 55rpx;
+					
+					.item {
+						width: calc(50% - 32rpx);
+						display: flex;
+						justify-content: space-between;
+						margin-top: 50rpx;
+						
+						view:first-child {
+							color: #8D8D8D;
+						}
+					}
+					
+					.item:nth-child(2n) {
+						margin-left: 62rpx;
+					}
+					
+					.item:nth-child(-n+2) {
+						margin-top: 0;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/ventilation/Lane-system/Lane-system.vue

@@ -0,0 +1,251 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'220708胶带巷通风机'" :bg="'transparent'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="bg-wrap"></view>
+		<view class="scroll-wrap">
+			<view class="status-wrap">
+				<view v-for="(item, index) in list" :key="index" class="item">
+					<view class="name">{{ item.name }}</view>
+					<view class="status">
+						<status-tip :name="item.status.name" :status="item.status.status"
+							:tip="item.status.status ? '开' : '关'"></status-tip>
+					</view>
+				</view>
+			</view>
+			<view class="info-wrap">
+				<view class="title">风机参数</view>
+				<view class="table-wrap">
+					<simple-table :tableHead="tableHead" :list="tableList"></simple-table>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '主风机',
+					status: {
+						name: '风门',
+						status: 1
+					}
+				}, {
+					name: '副风机',
+					status: {
+						name: '风门',
+						status: 0
+					}
+				}],
+				tableHead: ['参数名称', '主风机', '副风机'],
+				tableList: [{
+					name: '	主风机la电流(A) ',
+					params: ['14', '14']
+				}, {
+					name: '主风机Ib电流(A)',
+					params: ['14', '14']
+				}, {
+					name: '主风机lc电流(A)',
+					params: ['14', '14']
+				}, {
+					name: '主风机la电流(A)',
+					params: ['18', '18']
+				}, {
+					name: '主风机lb电流(A)',
+					params: ['18', '18']
+				}, {
+					name: '主风机Ic电流(A)',
+					params: ['18', '18']
+				}, {
+					name: '工作方式',
+					params: ['对旋1', '对旋1']
+				}, {
+					name: '控制方式',
+					params: ['遥控', '遥控']
+				}, {
+					name: '故障状态 ',
+					params: ['无故障', '无故障']
+				}, {
+					name: '风机电压(V)',
+					params: ['1089', '1089']
+				}, {
+					name: '主风机la电流(A)',
+					params: ['18', '18']
+				}, {
+					name: '主风机Ib电流(A)',
+					params: ['18', '18']
+				}, {
+					name: '主风机Ic电流(A)',
+					params: ['17', '17']
+				}, {
+					name: '主备选择',
+					params: ['主机', '主机']
+				}, {
+					name: '负荷设备',
+					params: ['空载', '空载']
+				}, {
+					name: '欠压保护',
+					params: ['打开', '打开']
+				}, {
+					name: '过压保护',
+					params: ['打开', '打开']
+				}, {
+					name: '主风机IA电流(A)',
+					params: ['14', '14']
+				}, {
+					name: '主风机IB电流(A)',
+					params: ['14', '14']
+				}, {
+					name: '主风机C电流(A)',
+					params: ['14', '14']
+				}, {
+					name: '装置地址',
+					params: ['2', '2']
+				}, {
+					name: '系统电压(V)',
+					params: ['1140', '1140']
+				}, {
+					name: '欠压整定',
+					params: ['65%', '65%']
+				}, {
+					name: '过压整定值',
+					params: ['14%', '14%']
+				}, {
+					name: '工作方式',
+					params: ['对旋1', '对旋1']
+				}, {
+					name: '控制方式',
+					params: ['遥控', '遥控']
+				}, {
+					name: '故障状态',
+					params: ['无故障', '无故障']
+				}, {
+					name: '运行选择',
+					params: ['1-2号电机', '1-2号电机']
+				}, {
+					name: '主风机电压(V)',
+					params: ['1089', '1089']
+				}, {
+					name: '欠压动作时间(S)',
+					params: ['10', '10']
+				}, {
+					name: '过压动作时间(S)',
+					params: ['10', '10']
+				}, {
+					name: '1号电机速断定值',
+					params: ['8倍', '8倍']
+				}, {
+					name: '1号过流保护',
+					params: ['打开', '打开']
+				}, {
+					name: '1号电机漏电闭锁',
+					params: ['打开', '打开']
+				}, {
+					name: '1号电机过载保护',
+					params: ['关闭', '关闭']
+				}, {
+					name: '1号电机断相保护',
+					params: ['打开', '打开']
+				}]
+			}
+		},
+		onLoad(option) {},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		position: relative;
+		background-color: #f5f6f8;
+		/deep/ .header-wrap {
+			position: relative;
+			z-index: 2;
+		}
+
+		.bg-wrap {
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			width: 100vw;
+			height: 670rpx;
+			background: url(@/static/pg-bg-2.png);
+			background-size: 100%;
+		}
+
+		.scroll-wrap {
+			position: relative;
+			z-index: 2;
+			overflow-y: scroll;
+			height: calc(100vh - 85rpx);
+			padding: 60rpx 35rpx 45rpx;
+
+			.status-wrap {
+				display: flex;
+				height: 167rpx;
+				border-radius: 20rpx;
+				margin-bottom: 60rpx;
+				background: #C5EDFF;
+
+				.item {
+					flex: 1;
+					justify-content: center;
+					padding: 35rpx 97rpx 35rpx 97rpx;
+					border-right: 1rpx dashed #fff;
+
+					.name {
+						font-size: 28rpx;
+						font-weight: 700;
+						text-align: center;
+						margin-bottom: 25rpx;
+					}
+
+					.status {
+						/deep/ .tip-wrap {
+							font-size: 26rpx;
+
+							.name {
+								color: #8D8D8D;
+							}
+
+							.status-wrap {
+								view:first-child {
+									margin: 0 8rpx 0 30rpx;
+								}
+							}
+						}
+					}
+				}
+
+				.item:last-child {
+					border: none;
+				}
+			}
+
+			.info-wrap {
+				.title {
+					margin-bottom: 29rpx;
+					font-weight: 700;
+					font-size: 36rpx;
+					color: #000000;
+				}
+				
+				.table-wrap {
+					overflow: hidden;
+					border-radius: 20rpx;
+					background-color: #fff;
+					
+					/deep/ .table-head {
+						background-color: #F0F0F0;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/ventilation/air-system/air-system.vue

@@ -0,0 +1,285 @@
+<template>
+	<view class="page-body">
+		<page-header :name="pageData.name" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="item-wrap">
+					<view :class="index === active ? 'active item' : 'item'" v-for="(item, index) in pageData.children"
+						:key="index" @click="tabChange(index)">
+						<view class="title">
+							{{ item.name }}
+						</view>
+						<view class="params">
+							<view>负压</view>
+							<view class="unit">
+								<view>-53.52</view>
+								<view>Pa</view>
+							</view>
+						</view>
+						<view class="params">
+							<view>风速</view>
+							<view class="unit">
+								<view>2.30</view>
+								<view>m/s</view>
+							</view>
+						</view>
+						<view class="params">
+							<view>风量</view>
+							<view class="unit">
+								<view>11043.0</view>
+								<view>m³/min</view>
+							</view>
+						</view>
+						<view class="icon">
+							<status-tip :name="'风门'" :status="item.status" :tip="item.status ? '开' : '关'"></status-tip>
+						</view>
+					</view>
+				</view>
+				<view class="icon-wrap">
+					<view v-for="(item, index) in pageData.children" :key="index" class="icon">
+						<image v-if="item.status" src="@/static/tf.jpg" />
+						<image v-else src="@/static/tf-static.png" />
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'1#机组'">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="data"></simple-table>
+					</template>
+				</page-card>
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'2#机组'">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead" :list="data"></simple-table>
+					</template>
+				</page-card>
+				<page-card style="margin-bottom: 30rpx;" :notShow="true" :name="'设备状态'">
+					<template v-slot:content>
+						<simple-table :tableHead="tableHead1" :list="data1"></simple-table>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pageData: {}, // 页面基础数据
+				active: 0, // 当前选中的tab
+				tableHead: ['参数名称', '1#电机', '2#电机'],
+				data: [{
+					name: '定子1温度℃',
+					params: [75.45, 89.35],
+				}, {
+					name: '定子2温度℃',
+					params: [80.39, 91.92],
+				}, {
+					name: '定子3温度℃',
+					params: [81.17, 86.78],
+				}, {
+					name: '前轴温度℃',
+					params: [33.92, 50.07],
+				}, {
+					name: '后轴温度℃',
+					params: [12.70, 50.26],
+				}, {
+					name: '直母电压V',
+					params: [932.89, 831.67],
+				}, {
+					name: '输出电压V',
+					params: [385.95, 373.87],
+				}, {
+					name: '输出电流A',
+					params: [295.52, 293.54],
+				}, {
+					name: '输出功率KW',
+					params: [113.93, 116.79],
+				}, {
+					name: '输出频率Hz',
+					params: [46.00, 45.00],
+				}, {
+					name: '水平振动mm/s',
+					params: [1.98, 2.27],
+				}, {
+					name: '垂直振动mm/s',
+					params: [0.56, 0.56],
+				}, {
+					name: '远程',
+					params: [{
+						status: 1
+					}, {
+						status: 1
+					}],
+				}],
+				tableHead1: ['设备名称', '状态'],
+				data1: [{
+					name: '1#风机监测通讯',
+					params: [{
+						status: 1
+					}],
+				},{
+					name: '2#风机监测通讯',
+					params: [{
+						status: 1
+					}],
+				},{
+					name: '1500PLC主站通讯',
+					params: [{
+						status: 1
+					}],
+				},{
+					name: '1-1变频DP通讯正常',
+					params: [{
+						status: 1
+					}],
+				},{
+					name: '1-2变频DP通讯正常',
+					params: [{
+						status: 1
+					}],
+				},{
+					name: '2-1变频DP通讯正常',
+					params: [{
+						status: 1
+					}],
+				},{
+					name: '2-2变频DP通讯正常',
+					params: [{
+						status: 1
+					}],
+				}]
+			}
+		},
+		onLoad(option) {
+			this.pageData = JSON.parse(option.data)
+		},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			},
+			tabChange(index) { // 切换tab
+				this.active = index
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow: scroll;
+
+			.basic-info-wrap {
+				position: relative;
+				height: auto;
+				padding: 50rpx 49rpx 60rpx;
+				background: url(../../../../static/page_bg.png);
+				background-size: 100%;
+
+				.item-wrap {
+					display: flex;
+
+					.item {
+						width: 50%;
+						color: #fff;
+						padding: 27rpx 26rpx;
+
+						.title {
+							text-align: center;
+							margin-bottom: 27rpx;
+						}
+
+						.params {
+							display: flex;
+							font-size: 26rpx;
+							margin-bottom: 27rpx;
+
+							.unit {
+								width: calc(100% - 77rpx);
+								display: flex;
+								justify-content: space-between;
+								margin-left: 25rpx;
+							}
+						}
+
+						/deep/ .tip-wrap {
+							font-size: 26rpx;
+
+							.name {
+								margin-right: 25rpx;
+							}
+						}
+					}
+
+					.active {
+						background: #3495FA;
+						box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 8, 35, 0.31);
+						border-radius: 14rpx;
+					}
+				}
+
+				.icon-wrap {
+					display: flex;
+					padding-top: 47rpx;
+
+					.icon {
+						width: 50%;
+						text-align: center;
+
+						image {
+							width: 159rpx;
+							height: 159rpx;
+						}
+					}
+				}
+
+				.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;
+
+				/deep/ .card-wrap:last-child {
+					margin-bottom: 0 !important;
+				}
+
+				.change-wrap {
+					padding: 32rpx 24rpx 45rpx;
+					
+					.legend-wrap {
+						display: flex;
+						justify-content: center;
+						padding-top: 32rpx;
+						.item {
+							display: flex;
+							align-items: center;
+							margin-right: 30rpx;
+							.icon {
+								width: 18rpx;
+								height: 18rpx;
+								margin-right: 5rpx;
+								border-radius: 4rpx;
+							}
+							.label {
+								font-size: 16rpx
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/ventilation/detail/detail.vue

@@ -0,0 +1,485 @@
+<template>
+	<view class="page-body">
+		<page-header :name="'智能通风'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
+		<view class="scroll-wrap">
+			<view class="basic-info-wrap">
+				<view class="detail-wrap">
+					<view class="system-wrap">
+						<view class="system-left">
+							<image src="@/static/jg-icon.png" />
+							<view class="system-center">通风智能决策及控制系统</view>
+						</view>
+						<view class="system-right">
+							<image src="@/static/right-arrow.png" />
+						</view>
+					</view>
+					<view class="annular-wrap">
+						<view class="left">
+							<bar-chart :barType="'ring'" :optSet="optRing" :data="ringChartData"
+								:barHeight="'200rpx'"></bar-chart>
+							<view class="title">
+								有效风率
+							</view>
+							<view class="legend">
+								<view class="left">
+									<view class="name">有效风</view>
+									<view class="icon"></view>
+								</view>
+								<view class="right">
+									<view class="name">无效风</view>
+									<view class="icon"></view>
+								</view>
+							</view>
+						</view>
+						<view class="right">
+							<bar-chart :barType="'ring'" :optSet="optRing1" :data="ringChartData1"
+								:barHeight="'200rpx'"></bar-chart>
+							<view class="title">
+								供需比
+							</view>
+							<view class="legend">
+								<view class="left">
+									<view class="name">有效风</view>
+									<view class="icon"></view>
+								</view>
+								<view class="right">
+									<view class="name">无效风</view>
+									<view class="icon"></view>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="info-wrap">
+						<view class="item" v-for="(item, index) in infoList" :key="index">
+							<view class="name">{{ item.name }}</view>
+							<view class="data">{{ item.data }}</view>
+						</view>
+					</view>
+				</view>
+				<view class="radius-wrap"></view>
+			</view>
+			<view class="detail-info-wrap">
+				<page-card v-for="(item, index) in list" :key="index" :name="item.name" :data="item"
+					style="margin-bottom: 30rpx;" @goDetail="goDetail">
+					<template v-slot:content>
+						<view class="machine-wrap">
+							<status-tip v-for="(item1, index1) in item.children" :key="index1" :name="item1.name"
+								:status="item1.status" :tip="item1.status ? '运行' : '停止'"></status-tip>
+						</view>
+					</template>
+				</page-card>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				infoList: [{
+					name: '自动风门',
+					data: '2扇'
+				}, {
+					name: '自动风窗',
+					data: '2扇'
+				}, {
+					name: '变频风扇',
+					data: '6扇'
+				}],
+				list: [{
+					name: '东井通风机',
+					children: [{
+						name: '1#风机',
+						status: 0
+					}, {
+						name: '2#风机',
+						status: 1
+					}]
+				}, {
+					name: '西井通风机',
+					children: [{
+						name: '1#风机',
+						status: 0
+					}, {
+						name: '2#风机',
+						status: 1
+					}]
+				}, {
+					name: '五分区通风机',
+					children: [{
+						name: '1#风机',
+						status: 0
+					}, {
+						name: '2#风机',
+						status: 1
+					}]
+				}, {
+					name: '1314通风机',
+					children: [{
+						name: '1#风机',
+						status: 0
+					}, {
+						name: '2#风机',
+						status: 1
+					}]
+				}, {
+					name: '150201回风巷通风机',
+					children: [{
+						name: '主风机',
+						status: 0
+					}, {
+						name: '副风机',
+						status: 1
+					}]
+				}, {
+					name: '150201机巷通风机',
+					children: [{
+						name: '主风机',
+						status: 0
+					}, {
+						name: '副风机',
+						status: 1
+					}]
+				}, {
+					name: '220708辅助巷通风机',
+					children: [{
+						name: '主风机',
+						status: 0
+					}, {
+						name: '副风机',
+						status: 1
+					}]
+				}, {
+					name: '220708回风巷通风机',
+					children: [{
+						name: '主风机',
+						status: 0
+					}, {
+						name: '副风机',
+						status: 1
+					}]
+				}, {
+					name: '220708胶带巷通风机',
+					children: [{
+						name: '主风机',
+						status: 0
+					}, {
+						name: '副风机',
+						status: 1
+					}]
+				}, ],
+				ringChartData: {},
+				optRing: {
+					color: ["#00FF00", "#FFFF00"], // 圆环中数据的颜色
+					dataLabel: false, // 是否启用数据标签
+					legend: { // 是否启用图例
+						show: false
+					},
+					title: { // 标题内容
+						name: "90%",
+						fontSize: 18,
+						color: "#fff"
+					},
+					subtitle: { // 副标题内容
+						name: ""
+					},
+					extra: {
+						ring: {
+							ringWidth: 10, // 圆环宽度
+							border: false, // 是否绘制数据间的边框
+							centerColor: 'rgb(1, 143, 252)' // 圆环中间填充的颜色
+						}
+					}
+				},
+				ringChartData1: {},
+				optRing1: {
+					color: ["#51FFF1", "#FFB944"], // 圆环中数据的颜色
+					dataLabel: false, // 是否启用数据标签
+					legend: { // 是否启用图例
+						show: false
+					},
+					title: { // 标题内容
+						name: "1.07",
+						fontSize: 18,
+						color: "#fff"
+					},
+					subtitle: { // 副标题内容
+						name: ""
+					},
+					extra: {
+						ring: {
+							ringWidth: 10, // 圆环宽度
+							offsetAngle: 90,
+							border: false, // 是否绘制数据间的边框
+							centerColor: 'rgb(1, 143, 252)' // 圆环中间填充的颜色
+						}
+					}
+				}
+			}
+		},
+		onLoad() {
+			this.getServerData()
+		},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			},
+			getServerData() { // 获取环形图数据
+				let res = {
+					series: [{
+						data: [{
+							"name": "有效风",
+							"value": 90
+						}, {
+							"name": "无效风",
+							"value": 10
+						}]
+					}]
+				};
+				this.ringChartData = JSON.parse(JSON.stringify(res));
+				let res1 = {
+					series: [{
+						data: [{
+							"name": "供风量",
+							"value": 1.07
+						}, {
+							"name": "需风量",
+							"value": 1
+						}]
+					}]
+				};
+				this.ringChartData1 = JSON.parse(JSON.stringify(res1));
+			},
+			goDetail(data) {
+				if (data.name === "220708胶带巷通风机") {
+					uni.navigateTo({
+						url: `/pages/data/ventilation/Lane-system/Lane-system?data=${JSON.stringify(data)}`,
+					})
+				} else {
+					uni.navigateTo({
+						url: `/pages/data/ventilation/air-system/air-system?data=${JSON.stringify(data)}`,
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.page-body {
+		.scroll-wrap {
+			height: calc(100vh - 85rpx);
+			overflow: scroll;
+
+			.basic-info-wrap {
+				position: relative;
+				height: 530rpx;
+				padding: 25rpx 35rpx 0;
+				background: url(../../../../static/page_bg.png);
+				background-size: 100%;
+
+				.detail-wrap {
+					width: 100%;
+					height: 447rpx;
+					padding: 42rpx 50rpx;
+					background: url(../../../../static/chart-bg.png);
+					background-repeat: no-repeat;
+					background-size: 100% 447rpx;
+
+					.system-wrap {
+						display: flex;
+						justify-content: space-between;
+
+						.system-left {
+							display: flex;
+							align-items: center;
+							margin-right: 21rpx;
+
+							image {
+								width: 37rpx;
+								height: 36rpx;
+								margin-right: 21rpx;
+								vertical-align: bottom;
+							}
+						}
+
+						.system-center {
+							font-size: 34rpx;
+							font-weight: 700;
+							color: #fff;
+						}
+
+						.system-right {
+							image {
+								width: 16rpx;
+								height: 29rpx;
+								vertical-align: middle;
+							}
+						}
+					}
+
+					.annular-wrap {
+						display: flex;
+						margin-bottom: 20rpx;
+
+						.left {
+							width: 50%;
+
+							.title {
+								text-align: center;
+								margin-bottom: 10rpx;
+								font-size: 26rpx;
+								color: #fff;
+							}
+
+							.legend {
+								display: flex;
+
+								.left {
+									display: flex;
+									justify-content: center;
+									align-items: center;
+
+									.name {
+										margin-right: 8rpx;
+										color: #fff;
+										font-size: 22rpx;
+									}
+
+									.icon {
+										width: 18rpx;
+										height: 18rpx;
+										background-color: #00FF00;
+									}
+								}
+
+								.right {
+									display: flex;
+									justify-content: center;
+									align-items: center;
+
+									.name {
+										margin-right: 8rpx;
+										color: #fff;
+										font-size: 22rpx;
+									}
+
+									.icon {
+										width: 18rpx;
+										height: 18rpx;
+										background-color: #FFFF00;
+									}
+								}
+							}
+						}
+
+						.right {
+							width: 50%;
+
+							.title {
+								text-align: center;
+								margin-bottom: 10rpx;
+								font-size: 26rpx;
+								color: #fff;
+							}
+
+							.legend {
+								display: flex;
+
+								.left {
+									display: flex;
+									justify-content: center;
+									align-items: center;
+
+									.name {
+										margin-right: 8rpx;
+										color: #fff;
+										font-size: 22rpx;
+									}
+
+									.icon {
+										width: 18rpx;
+										height: 18rpx;
+										background-color: #51FFF1;
+									}
+								}
+
+								.right {
+									display: flex;
+									justify-content: center;
+									align-items: center;
+
+									.name {
+										margin-right: 8rpx;
+										color: #fff;
+										font-size: 22rpx;
+									}
+
+									.icon {
+										width: 18rpx;
+										height: 18rpx;
+										background-color: #FFB944;
+									}
+								}
+							}
+						}
+					}
+
+					.info-wrap {
+						display: flex;
+
+						.item {
+							width: 33.33%;
+							display: flex;
+							justify-content: center;
+							font-size: 26rpx;
+
+							.name {
+								color: #fff;
+								margin-right: 11rpx;
+							}
+
+							.data {
+								color: #FFFF00;
+							}
+						}
+					}
+				}
+
+				.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;
+
+				/deep/ .card-wrap:last-child {
+					margin-bottom: 0 !important;
+				}
+
+				.machine-wrap {
+					display: flex;
+					justify-content: space-between;
+					padding: 40rpx 58rpx;
+
+					/deep/ .tip-wrap {
+						font-size: 26rpx;
+
+						.name {
+							color: #8D8D8D;
+							margin-right: 40rpx;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/data/znjc/page.vue

@@ -0,0 +1,28 @@
+<template>
+	<view>
+		<web-view :src="webUrl"></web-view>  
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				webUrl: '',
+				pageName: ''
+			}
+		},
+		onLoad(option) {
+			this.pageName = JSON.parse(option.data).name
+			this.webUrl = JSON.parse(option.data).src
+		},
+		methods: {
+			goBack() { // 返回上一頁面
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+</style>

pages/index/index.vue

@@ -0,0 +1,23 @@
+<template>
+	<view class="content">
+		<page-header :name="'首页'"></page-header>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+</style>

pages/personal-center/index.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/work/index.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

uni.promisify.adaptor.js

@@ -0,0 +1,10 @@
+uni.addInterceptor({
+  returnValue (res) {
+    if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
+      return res;
+    }
+    return new Promise((resolve, reject) => {
+      res.then((res) => res[0] ? reject(res[0]) : resolve(res[1]));
+    });
+  },
+});

uni.scss

@@ -0,0 +1,76 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color:#333;//基本色
+$uni-text-color-inverse:#fff;//反色
+$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color:#ffffff;
+$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color:#c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm:12px;
+$uni-font-size-base:14px;
+$uni-font-size-lg:16px;
+
+/* 图片尺寸 */
+$uni-img-size-sm:20px;
+$uni-img-size-base:26px;
+$uni-img-size-lg:40px;
+
+/* Border Radius */
+$uni-border-radius-sm: 2px;
+$uni-border-radius-base: 3px;
+$uni-border-radius-lg: 6px;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 5px;
+$uni-spacing-row-base: 10px;
+$uni-spacing-row-lg: 15px;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 4px;
+$uni-spacing-col-base: 8px;
+$uni-spacing-col-lg: 12px;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-font-size-title:20px;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle:26px;
+$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-font-size-paragraph:15px;