From 5618b6e13c3b162a2a2283c742aec81029e745b5 Mon Sep 17 00:00:00 2001
From: unknown <331404948@qq.com>
Date: Thu, 23 Nov 2023 18:59:04 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/js/waterMark.js                            |  84 +++++++++++
 components/.DS_Store                              | Bin 0 -> 6148 bytes
 components/cc-waterMark/.DS_Store                 | Bin 0 -> 6148 bytes
 components/cc-waterMark/Detail.vue                |  38 +++++
 components/cc-waterMark/index.vue                 |  70 ++++++++++
 components/cc-waterMark/waterMark.js              |  85 ++++++++++++
 components/myTab/myTab.vue                        |  23 +++
 package.json                                      |  20 +++
 pages.json                                        |  76 +++++++++-
 pages/index/index.vue                             |  12 +-
 pages/sub/batchExecution/batchExecution.vue       |  77 ++++++++++
 pages/sub/batchExecution/executionDetails.vue     | 141 +++++++++++++++++++
 pages/sub/batchExecution/selectMachine.vue        |  78 +++++++++++
 pages/sub/batchExecution/selectTemplate.vue       |  71 ++++++++++
 pages/sub/executionRecord/executionRecord.vue     | 152 ++++++++++++++++++++
 pages/sub/logPanel/addNewLog.vue                  |  87 ++++++++++++
 pages/sub/logPanel/logPanel.vue                   | 162 ++++++++++++++++++++++
 pages/sub/machineList/machineList.vue             |  86 +++++++++++-
 pages/sub/mechanicalLog/mechanicalLog.vue         | 123 ++++++++++++++++
 pages/sub/mechanicalMonitor/mechanicalMonitor.vue | 146 +++++++++++++++++++
 20 files changed, 1513 insertions(+), 18 deletions(-)
 create mode 100644 common/js/waterMark.js
 create mode 100644 components/.DS_Store
 create mode 100644 components/cc-waterMark/.DS_Store
 create mode 100644 components/cc-waterMark/Detail.vue
 create mode 100644 components/cc-waterMark/index.vue
 create mode 100644 components/cc-waterMark/waterMark.js
 create mode 100644 components/myTab/myTab.vue
 create mode 100644 package.json
 create mode 100644 pages/sub/batchExecution/batchExecution.vue
 create mode 100644 pages/sub/batchExecution/executionDetails.vue
 create mode 100644 pages/sub/batchExecution/selectMachine.vue
 create mode 100644 pages/sub/batchExecution/selectTemplate.vue
 create mode 100644 pages/sub/executionRecord/executionRecord.vue
 create mode 100644 pages/sub/logPanel/addNewLog.vue
 create mode 100644 pages/sub/logPanel/logPanel.vue
 create mode 100644 pages/sub/mechanicalLog/mechanicalLog.vue
 create mode 100644 pages/sub/mechanicalMonitor/mechanicalMonitor.vue

diff --git a/common/js/waterMark.js b/common/js/waterMark.js
new file mode 100644
index 0000000..51c4c59
--- /dev/null
+++ b/common/js/waterMark.js
@@ -0,0 +1,84 @@
+'use strict'
+
+const watermark = {}
+
+/**
+ *
+ * @param {要设置的水印的内容} str
+ * @param {需要设置水印的容器} container
+ */
+const setWatermark = (str, container, fillColor) => {
+
+	// 唯一id
+	const id = '1.23452384164.123412415'
+
+	// 
+	if ((container === '') || (container === undefined)) {
+		// 如何不传值 默认以body作为水印底板
+		container = document.body;
+
+	}
+
+	// 查看页面上有没有，如果有则删除
+	if (document.getElementById(id) !== null) {
+		const childelement = document.getElementById(id)
+		childelement.parentNode.removeChild(childelement)
+	}
+
+	var containerWidth = container.offsetWidth // 获取父容器宽
+	var containerHeight = container.offsetHeight + 360 // 获取父容器高再加上一个固定高度
+	container.style.position = 'relative' // 设置布局为相对布局
+
+	// 创建canvas元素(先制作一块背景图)
+	const can = document.createElement('canvas')
+	// 获取屏幕宽度的一半
+	can.width = document.body.clientWidth / 2 // 设置每一块的宽度
+	can.height = 240 // 高度
+	const cans = can.getContext('2d') // 获取canvas画布
+	cans.rotate(-20 * Math.PI / 180) // 逆时针旋转π/9  
+	cans.font = '14px Vedana' // 设置字体
+	// 'rgba(200, 200, 200, 0.20)'
+	if (fillColor == undefined) {
+
+		cans.fillStyle = '#4473FF' // 设置字体的颜色
+	} else {
+
+		cans.fillStyle = fillColor // 设置字体的颜色
+
+	}
+
+	cans.textAlign = 'left' // 文本对齐方式
+	cans.textBaseline = 'Middle' // 文本基线
+	cans.fillText(str, 0, 4 * can.height / 5) // 绘制文字
+
+	// 创建一个div元素
+	const div = document.createElement('div')
+	div.id = id // 设置id
+	div.style.pointerEvents = 'none' // 取消所有事件
+	div.style.top = '0px'
+	div.style.left = '0px'
+	div.style.position = 'absolute'
+	div.style.zIndex = '100000'
+	div.style.width = containerWidth + 'px'
+	div.style.height = containerHeight + 'px'
+	div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
+	container.appendChild(div) // 追加到页面
+
+	return id
+}
+
+// 该方法只允许调用一次
+watermark.set = (str, container, fillColor) => {
+	let id = setWatermark(str, container, fillColor)
+	setInterval(() => {
+		if (document.getElementById(id) === null) {
+			id = setWatermark(str, container, fillColor)
+		}
+	}, 500)
+	// 监听页面大小的变化
+	window.onresize = () => {
+		setWatermark(str, container)
+	}
+}
+
+export default watermark
\ No newline at end of file
diff --git a/components/.DS_Store b/components/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..b3546068000f6d9b043230c2bc8cde3e066665d9
GIT binary patch
literal 6148
zcmeHKO;6iE5S<MvID$$!fW*;KuRsG-e29w)^uU1&M)c64V3Vj=7;oe__z*?%8U7Hz
zgum0i+1*f8fgVvoGtumu%+9mDZ>?P~5vlgDyH3<3A`i}3YoK|?xSxH>YA!PaROT8H
z71X1gjwza|mc;+40MFe5UE;S&C1&l<{N;3gl<Lbk)iG-L1=)wM{W6B=AH296^d0XZ
z?x)G1Xtf?yZKnQVcFvpg=DqXqN|#{~6~jS0%D?l!Q?1i@5=Ze_(kna7#RHucQIhp?
zLrA(kl>GRXWL;gh^)TxW3^%kLUc+m2n#-fn`c7-b-`L(9ulS?g4a8qIx5nd!xAf`r
z-bv>=y~*^Q838H0x5hp?oWMPT7j?M}^DNcbPt;8K6P}<bAPR^AZ$SaKc6sw};bG+&
zMFCOZRTbd%!G|*j4l9dh=|E$S0KhuZ#t`$TB6EC)fy2rodSJ>@ftIS=5kpxz^1iDJ
z999-Bos>I#D0gS&PAJOU9oP3wIjO*+w4#70@V5ed_JcKf|Nr{(`QH>tBMOKD?^6L)
zKMW7s7@ON$r$)(ptq;F|vvFNz@ri=KY{jVMt#}!340)deVBoN_hzv|V1dI&Qhyt&w
Fz;C+)T;%`&

literal 0
HcmV?d00001

diff --git a/components/cc-waterMark/.DS_Store b/components/cc-waterMark/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..c8f5d5d7c4921b123a9ac376353670901731df9d
GIT binary patch
literal 6148
zcmeHKyG{c!5FA5_NHi%ZDE$LO;txy|3M4xC0JtOtQj|!bP+!Mq!|VgZ=|G~QK(o<$
z?DdYFo8tBsKv^8t7r+d_lx~Pu8^&h)<|8}GNFmaB#tv(2@Pr#Yj<UZG821z_{?2h2
z@OM1v4iD(?j5%JoySd)(SKW5skz;@Ol0JWP<4h(6q<|EV0#ZN<{6+z*y|n2`phhVm
z1*E{I0``8Wbi<a|2l}gngSP<03BzujdoMw(79h67K9CVw2`VwDC0mRVbjEAuwZuL!
z=qP?O&&iuhb|}SfXS{kkN(<B|1*E`Gf#X=tto~oof9U^*B(0=?6!=#Pl*#gTx!@yZ
zZ5=(F)!ItGr+*l8J)MJ>VxpH~F02%veaWjf=YC7<1D(#e(~0^JFkNI);4c(-2M6jN
AfdBvi

literal 0
HcmV?d00001

diff --git a/components/cc-waterMark/Detail.vue b/components/cc-waterMark/Detail.vue
new file mode 100644
index 0000000..e85a13c
--- /dev/null
+++ b/components/cc-waterMark/Detail.vue
@@ -0,0 +1,38 @@
+<template>
+	<view>
+		<view class="text-area">
+			<text class="title">{{'详情页面'}}</text>
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+
+	.text-area {
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		margin-top: 30px;
+	}
+
+	.title {
+		font-size: 36rpx;
+		color: #8f8f94;
+		text-align: center;
+	}
+</style>
diff --git a/components/cc-waterMark/index.vue b/components/cc-waterMark/index.vue
new file mode 100644
index 0000000..f169a6f
--- /dev/null
+++ b/components/cc-waterMark/index.vue
@@ -0,0 +1,70 @@
+<template>
+	<div class="content" ref="content">
+
+		<view class="text-area">
+			<text class="title">{{title}}</text>
+
+			<button @click="goDetail" style="margin-top: 20px;"> {{' 跳转 '}} </button>
+		</view>
+	</div>
+</template>
+
+<script>
+	import Watermark from "./waterMark";
+
+
+	export default {
+		data() {
+			return {
+				title: 'Hello'
+			}
+		},
+
+		mounted() {
+
+			/* 给系统所有页面加水印*/
+			// 第一个参数:水印文字  第二个参数: 加水印的底图,默认body 给所有页面加水印, 第三个参数:水印颜色
+			Watermark.set("cc-innovation.gd", '', 'blue');
+
+
+			// /* 给当前页面加水印*/
+			// // 第一个参数:水印文字  第二个参数: 加水印的底图,默认body 给所有页面加水印, 第三个参数:水印颜色
+			// Watermark.set("cc-innovation.gd", this.$refs.content, 'red');
+
+		},
+		methods: {
+
+			goDetail() {
+
+				uni.navigateTo({
+					url: './Detail'
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+
+	}
+
+
+
+	.text-area {
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		margin-top: 30px;
+	}
+
+	.title {
+		font-size: 36rpx;
+		color: #8f8f94;
+		text-align: center;
+	}
+</style>
\ No newline at end of file
diff --git a/components/cc-waterMark/waterMark.js b/components/cc-waterMark/waterMark.js
new file mode 100644
index 0000000..202d4a9
--- /dev/null
+++ b/components/cc-waterMark/waterMark.js
@@ -0,0 +1,85 @@
+'use strict'
+
+const watermark = {}
+
+/**
+ *
+ * @param {要设置的水印的内容} str
+ * @param {需要设置水印的容器} container
+ */
+const setWatermark = (str, container, fillColor) => {
+
+	// 唯一id
+	const id = '1.23452384164.123412415'
+
+	// 
+	if ((container === '') || (container === undefined)) {
+		// 如何不传值 默认以body作为水印底板
+		container = document.body;
+
+	}
+
+	// 查看页面上有没有，如果有则删除
+	if (document.getElementById(id) !== null) {
+		const childelement = document.getElementById(id)
+		childelement.parentNode.removeChild(childelement)
+	}
+
+	var containerWidth = container.offsetWidth // 获取父容器宽
+	var containerHeight = container.offsetHeight + 360 // 获取父容器高再加上一个固定高度
+	container.style.position = 'relative' // 设置布局为相对布局
+
+	// 创建canvas元素(先制作一块背景图)
+	const can = document.createElement('canvas')
+	// 获取屏幕宽度的一半
+	can.width = document.body.clientWidth / 2 // 设置每一块的宽度
+	can.height = 240 // 高度
+	const cans = can.getContext('2d') // 获取canvas画布
+	cans.rotate(-20 * Math.PI / 180) // 逆时针旋转π/9  
+	cans.font = '14px Vedana' // 设置字体
+	// 'rgba(200, 200, 200, 0.20)'
+	if (fillColor == undefined) {
+
+		cans.fillStyle = '#4473FF' // 设置字体的颜色
+	} else {
+
+		cans.fillStyle = fillColor // 设置字体的颜色
+
+	}
+
+	cans.textAlign = 'left' // 文本对齐方式
+	cans.textBaseline = 'Middle' // 文本基线
+	cans.fillText(str, 0, 4 * can.height / 5) // 绘制文字
+
+	// 创建一个div元素
+	const div = document.createElement('div')
+	div.id = id // 设置id
+	div.style.pointerEvents = 'none' // 取消所有事件
+	div.style.top = '0px'
+	div.style.left = '0px'
+	div.style.position = 'absolute'
+	div.style.zIndex = '100000'
+	div.style.width = containerWidth + 'px'
+	div.style.fontSize = '24px'
+	div.style.height = containerHeight + 'px'
+	div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
+	container.appendChild(div) // 追加到页面
+
+	return id
+}
+
+// 该方法只允许调用一次
+watermark.set = (str, container, fillColor) => {
+	let id = setWatermark(str, container, fillColor)
+	setInterval(() => {
+		if (document.getElementById(id) === null) {
+			id = setWatermark(str, container, fillColor)
+		}
+	}, 500)
+	// 监听页面大小的变化
+	window.onresize = () => {
+		setWatermark(str, container)
+	}
+}
+
+export default watermark
\ No newline at end of file
diff --git a/components/myTab/myTab.vue b/components/myTab/myTab.vue
new file mode 100644
index 0000000..1eab540
--- /dev/null
+++ b/components/myTab/myTab.vue
@@ -0,0 +1,23 @@
+<template>
+	<view class="myTab">
+		<u-tabs :list="tabList" @click="tabClick" lineHeight="4rpx" lineWidth="40rpx" itemStyle="height: 66rpx;" inactiveStyle="fontSize:28rpx" :activeStyle="{
+		    color: '#3195fa',
+		    fontWeight: '600',
+			fontSize:'28rpx'
+		}"></u-tabs>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: ['tabList'],
+		methods: {
+			tabClick(item) {
+				this.$emit('tabClick',item)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..b27f2e6
--- /dev/null
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+    "id": "cc-waterMark",
+    "name": "实现页面加水印文字 单个页面所有页面加水印 水印颜色",
+    "displayName": "实现页面加水印文字 单个页面所有页面加水印 水印颜色",
+    "version": "1.0",
+    "description": "实现页面加水印文字, 可以实现系统所有页面加水印,也可以单个页面加水印, 可更改水印颜色",
+    "keywords": [
+        "水印",
+        "加水印",
+        "图片水印",
+        "水印文字",
+        "watermark"
+    ],
+    "dcloudext": {
+        "category": [
+            "前端组件",
+            "通用组件"
+        ]
+    }
+}
\ No newline at end of file
diff --git a/pages.json b/pages.json
index c9cc932..edb58ac 100644
--- a/pages.json
+++ b/pages.json
@@ -20,12 +20,78 @@
 		"root": "pages/sub",
 		"pages": [
 			{
-			"path": "machineList/machineList",
-			"style": {
-				"navigationBarTitleText": "机器列表",
-				"enablePullDownRefresh": true
+				"path": "machineList/machineList",
+				"style": {
+					"navigationBarTitleText": "机器列表",
+					"enablePullDownRefresh": true
+				}
+			},
+			{
+				"path": "mechanicalMonitor/mechanicalMonitor",
+				"style": {
+					"navigationBarTitleText": "机器列表",
+					"enablePullDownRefresh": true
+				}
+			},
+			{
+				"path": "mechanicalLog/mechanicalLog",
+				"style": {
+					"navigationBarTitleText": "机器日志",
+					"enablePullDownRefresh": true
+				}
+			},
+			{
+				"path": "executionRecord/executionRecord",
+				"style": {
+					"navigationBarTitleText": "执行记录",
+					"enablePullDownRefresh": true
+				}
+			},
+			{
+				"path": "logPanel/logPanel",
+				"style": {
+					"navigationBarTitleText": "日志面板",
+					"enablePullDownRefresh": true
+				}
+			},
+			{
+				"path": "logPanel/addNewLog",
+				"style": {
+					"navigationBarTitleText": "新增日志",
+					"enablePullDownRefresh": true
+				}
+			},
+			{
+				"path": "batchExecution/batchExecution",
+				"style": {
+					"navigationBarTitleText": "批量执行",
+					"enablePullDownRefresh": true
+				}
+			},
+			{
+				"path": "batchExecution/selectMachine",
+				"style": {
+					"navigationBarTitleText": "选择机器",
+					"enablePullDownRefresh": true
+				}
+			},
+			{
+				"path": "batchExecution/selectTemplate",
+				"style": {
+					"navigationBarTitleText": "选择模版",
+					"enablePullDownRefresh": true
+				}
+			},
+			{
+				"path": "batchExecution/executionDetails",
+				"style": {
+					"navigationBarTitleText": "选择模版",
+					"enablePullDownRefresh": true
+				}
 			}
-		}
+			
+			
+			
 		]
 	}],
 	"globalStyle": {
diff --git a/pages/index/index.vue b/pages/index/index.vue
index e9c3360..ef766e8 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -12,7 +12,7 @@
 			</view>
 			<view class="h2">执行管理</view>
 			<view class="ul">
-				<view class="li" v-for="(item,index) in list2" :key="index">
+				<view class="li" v-for="(item,index) in list2" :key="index"  @click="$goPage(item.url)">
 					<view class="icon2">
 						<image :src="item.icon" mode=""></image>
 					</view>
@@ -37,7 +37,7 @@
 					{
 						text: '机器监控',
 						icon: require('../../static/images/icon (7).png'),
-						url: '/pages/'
+						url: '/pages/sub/mechanicalMonitor/mechanicalMonitor'
 					},
 					{
 						text: '终端日志',
@@ -52,24 +52,24 @@
 					{
 						text: '机器日志',
 						icon: require('../../static/images/icon (13).png'),
-						url: '/pages/'
+						url: '/pages/sub/mechanicalLog/mechanicalLog'
 					},
 				],
 				list2: [
 					{
 						text: '批量执行',
 						icon: require('../../static/images/icon (15).png'),
-						url: '/pages/'
+						url: '/pages/sub/batchExecution/batchExecution'
 					},
 					{
 						text: '执行记录',
 						icon: require('../../static/images/icon (24).png'),
-						url: '/pages/'
+						url: '/pages/sub/executionRecord/executionRecord'
 					},
 					{
 						text: '日志面板',
 						icon: require('../../static/images/icon (16).png'),
-						url: '/pages/'
+						url: '/pages/sub/logPanel/logPanel'
 					},
 				]
 			}
diff --git a/pages/sub/batchExecution/batchExecution.vue b/pages/sub/batchExecution/batchExecution.vue
new file mode 100644
index 0000000..826d930
--- /dev/null
+++ b/pages/sub/batchExecution/batchExecution.vue
@@ -0,0 +1,77 @@
+<template>
+	<view class="main batchExecution">
+		<view class="pad">
+			<u--form labelPosition="left" :model="FormData" ref="uForm" labelWidth="160rpx">
+				<u-form-item label="执行机器" :required="true" @click="$goPage('/pages/sub/batchExecution/selectMachine')">
+					<u--input v-model="FormData.sex"  placeholder="请选择" disabledColor="#ffffff" style="pointer-events: none;"  
+						border="none"></u--input>
+					<u-icon slot="right" name="arrow-right" ></u-icon>
+				</u-form-item>
+				<u-form-item label="执行命令" :required="true">
+					<view class="blueTxt" @click="$goPage('/pages/sub/batchExecution/selectTemplate')">选择模版</view>
+				</u-form-item>
+				<view class="modalBox">
+					<view class="modalCon"></view>
+				</view>
+				
+				<u-form-item label="执行描述" :required="true">
+					<u--input v-model="FormData.name" border="none" placeholder="请输入"></u--input>
+				</u-form-item>
+			</u--form>
+		</view>
+		<view class="btn_row">
+			<view class="btnBg" @click="$goPage('/pages/sub/batchExecution/executionDetails')">执 行</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				FormData: {
+					name: ''
+				},
+
+			}
+		}
+	}
+</script>
+
+<style>
+	.batchExecution .u-form-item {
+		background-color: #ffff;
+		border-radius: 6rpx;
+		padding: 0 34rpx;
+		margin-bottom: 30rpx;
+	}
+</style>
+
+<style lang="scss" scoped>
+	.btn_row {
+		padding: 40rpx;
+		.btnBg {
+			width: 100%;
+		}
+	}
+	.blueTxt {
+		color: $themC;
+		text-align: right;
+		width: 100%;
+	}
+
+	.pad {
+		padding: 32rpx;
+	}
+	.modalBox {
+		background-color: #fff;
+		padding: 0 30rpx 20rpx 30rpx;
+		transform: translateY(-30rpx);
+		.modalCon {
+			width: 100%;
+			background-color: #f5f5f5;
+			padding: 20px;
+		}
+	}
+	
+</style>
\ No newline at end of file
diff --git a/pages/sub/batchExecution/executionDetails.vue b/pages/sub/batchExecution/executionDetails.vue
new file mode 100644
index 0000000..ba9ebb1
--- /dev/null
+++ b/pages/sub/batchExecution/executionDetails.vue
@@ -0,0 +1,141 @@
+<template>
+	<view class="main">
+		<view class="pad">
+			<view class="top_row">
+				<view class="flex">
+					<view class="icon">
+						<image src="@/static/images/icon (9).png" mode=""></image>
+					</view>
+					<view class="text">192.168.1.44</view>
+				</view>
+				<view class="flex">
+					<view class="text">已完成</view>
+					<view class="icon" style="width: 26rpx;height: 24rpx;">
+						<image src="@/static/images/icon (5).png" mode=""></image>
+					</view>
+				</view>
+			</view>
+			
+			<view class="blackBg">
+				<view class="ul">
+					<view class="tit">#准备执行命令</view>
+					<view class="li">
+						<view class="lab">执行用户</view>
+						<view class="val">root@123</view>
+					</view>
+				</view>
+				<view class="ul">
+					<view class="tit">#执行命令</view>
+					<view class="li">
+						<view class="lab skyBlue">eho 123</view>
+						<view class="lab skyBlue">eho 123</view>
+					</view>
+				</view>
+				<view class="ul">
+					<view class="tit">#开始执行</view>
+					<view class="li">
+						<view class="lab">123</view>
+						<view class="lab">12345</view>
+					</view>
+				</view>
+				<view class="ul">
+					<view class="tit">#命令执行完毕</view>
+					<view class="li">
+						<view class="lab">exitcode</view>
+						<view class="val">0</view>
+					</view>
+					<view class="li">
+						<view class="lab">结束时间</view>
+						<view class="val">0</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import Watermark from "@/common/js/waterMark.js";
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		mounted() {
+		
+			/* 给系统所有页面加水印*/
+			// 第一个参数:水印文字  第二个参数: 加水印的底图,默认body 给所有页面加水印, 第三个参数:水印颜色
+			Watermark.set("用户名", '', '#8c9093');
+		
+		
+			// /* 给当前页面加水印*/
+			// // 第一个参数:水印文字  第二个参数: 加水印的底图,默认body 给所有页面加水印, 第三个参数:水印颜色
+			// Watermark.set("cc-innovation.gd", this.$refs.content, 'red');
+		
+		},
+	}
+</script>
+
+<style lang="scss" lang="scss">
+	.main {
+		.pad {
+			background-color: #fff;
+		}
+	  .top_row {
+		  display: flex;
+		  align-items: center;
+		  justify-content: space-between;
+		  height: 72rpx;
+		  border: 1rpx solid  $themC;
+		  background-color: #e8f4ff;
+		  padding: 0 30rpx;
+	    .flex {
+	      .icon {
+	        width: 36rpx;
+			height: 32rpx;
+	      }
+		  
+	
+	      .text {
+			font-size: 26rpx;
+			color: $themC;
+			margin: 0 16rpx;
+	      }
+	    }
+	  }
+	
+	  .blackBg {
+		  background: #000;
+		  padding: 16rpx;
+		  margin-top: 30rpx;
+		  border-radius: 8rpx;
+	    .ul {
+			margin-bottom: 40rpx;
+	      .tit {
+			font-size: 28rpx;
+			color: #6cb71d;
+			margin-bottom: 4rpx;
+	      }
+	
+	      .li {
+			  display: flex;
+			  font-size: 24rpx;
+			  align-items: center;
+			  margin-bottom: 4rpx;
+	        .lab {
+				color: #ffffff;
+	        }
+	
+	        .val {
+				color: #4a62c3;
+				margin-left: 20rpx;
+	        }
+			.skyBlue {
+				color: #55d7b4;
+			}
+	      }
+	    }
+	  }
+	}
+</style>
\ No newline at end of file
diff --git a/pages/sub/batchExecution/selectMachine.vue b/pages/sub/batchExecution/selectMachine.vue
new file mode 100644
index 0000000..5534ef8
--- /dev/null
+++ b/pages/sub/batchExecution/selectMachine.vue
@@ -0,0 +1,78 @@
+<template>
+	<view class="main">
+		<view class="top_row">
+			<view class="row selectAll">
+				<view class="icon ">
+					<image src="@/static/images/icon (20).png" mode=""></image>
+					<!-- <image src="@/static/images/icon (22).png" mode=""></image> -->
+				</view>
+				<view class="txt">全选</view>
+			</view>
+			<view class="searchBox">
+				<searchRow placeholder="名称/IP过滤" />
+			</view>
+		</view>
+		<view class="card">
+			<view class="row" v-for="(item,index) in 5" :key="index">
+				<view class="icon">
+					<image src="@/static/images/icon (20).png" mode="" v-if="index==1"></image>
+					<image src="@/static/images/icon (22).png" mode="" v-else></image>
+				</view>
+				<view class="txt">192.168.1.44</view>
+			</view>
+		</view>
+		<view class="btnPoz">
+			<view class="btnBg">确 定</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.btnPoz {
+		position: fixed;
+		bottom: 30rpx;
+		left: 0;
+		width: 100%;
+		padding: 0 32rpx;
+	}
+	.top_row {
+		display: flex;
+		align-items: center;
+		padding: 14rpx 30rpx;
+		background-color: #fff;
+		font-size: 26rpx;
+		.selectAll {
+			width: 130rpx;
+		}
+		.searchBox {
+			flex: 1;
+		}
+	}
+	.row {
+		align-items: center;
+		display: flex;
+		padding: 24rpx 0;
+		.icon {
+			width: 32rpx;
+			height: 32rpx;
+			
+		}
+		.txt {
+			padding: 0 16rpx;
+			font-size: 26rpx;
+		}
+		
+	}
+	.card {
+		margin-top: 8rpx;
+		padding: 30rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/sub/batchExecution/selectTemplate.vue b/pages/sub/batchExecution/selectTemplate.vue
new file mode 100644
index 0000000..bdb368d
--- /dev/null
+++ b/pages/sub/batchExecution/selectTemplate.vue
@@ -0,0 +1,71 @@
+<template>
+	<view class="main">
+		<view class="searchBox">
+			<searchRow placeholder="请输入模版名称/模版内容" />
+		</view>
+		<view class="ul">
+			<view class="total">共3条</view>
+			<view class="card">
+				<view class="row">
+					<view class="lab">模版名称</view>
+					<view class="val">abc</view>
+				</view>
+				<view class="row">
+					<view class="lab">模版内容</view>
+					<view class="val">abc</view>
+				</view>
+				<view class="row">
+					<view class="lab">模版描述</view>
+					<view class="val">abc</view>
+				</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+	.searchBox {
+		padding: 14rpx 30rpx;
+		background-color: #fff;
+	}
+	.ul {
+		padding: 0rpx 30rpx;
+		.total {
+			height: 66rpx;
+			line-height: 66rpx;
+			font-size: 24rpx;
+			color: #999;
+			text-align: right;
+		}
+	}
+	.card {
+		padding: 20rpx;
+		margin-bottom: 20rpx;
+		background-color: #fff;
+		&.active {
+			border: 1px solid $themC;
+			background-color: #dfeaf5;
+			.row {
+				color: $themC;
+			}
+		}
+		.row {
+			display: flex;
+			font-size: 24rpx;
+			color: #333;
+			padding: 20rpx 0;
+			.lab {
+				width: 140rpx;
+			}
+			.val {
+				flex: 1;
+				width: 0;
+				text-align: right;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/sub/executionRecord/executionRecord.vue b/pages/sub/executionRecord/executionRecord.vue
new file mode 100644
index 0000000..3c6cdd2
--- /dev/null
+++ b/pages/sub/executionRecord/executionRecord.vue
@@ -0,0 +1,152 @@
+<template>
+	<view class="main">
+		<view class="searchBox">
+			<searchRow placeholder="请输入机器/命令/退出码/描述" />
+		</view>
+		<view class="tabs">
+			<myTab :tabList="tabList" @tabClick="tabClick"></myTab>
+		</view>
+		<view class="ul">
+			<view class="total">共3条</view>
+			<view class="card">
+				<view class="row">
+					<view class="lab">执行机器</view>
+					<view class="val">192.68.1.44主机</view>
+				</view>
+				<view class="row">
+					<view class="lab">执行命令</view>
+					<view class="val ">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">退出码</view>
+					<view class="val blue">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">持续时间</view>
+					<view class="val ">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">执行用户</view>
+					<view class="val ">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">创建时间</view>
+					<view class="val ">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">描述</view>
+					<view class="val ">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">状态</view>
+					<view class="val">
+						已停止 执行中 异常 未开始 已完成
+					</view>
+				</view>
+				<view class="status_row">
+					<view class="blueTxt">日志</view>
+					<view class="blueTxt">再次执行</view>
+					<view class="blueTxt" style="color: #ff2222;">删除</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabList: [{
+					name: '全部',
+					id: 0
+				}, {
+					name: '未开始',
+				}, {
+					name: '执行中'
+				},{
+					name: '已完成'
+				},{
+					name: '异常'
+				}, {
+					name: '已停止'
+				},  ]
+			}
+		},
+		methods: {
+			tabClick(item) {
+				console.log('item', item);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.searchBox {
+		padding: 16rpx 30rpx;
+		background-color: #fff;
+	}
+
+	.tabs {
+		background-color: #fff;
+		margin-top: 8rpx;
+		padding: 16rpx 0;
+	}
+	
+	.ul {
+		width: 100%;
+		padding: 0 30rpx 40rpx 30rpx;
+	  .total {
+		height: 66rpx;
+		line-height: 66rpx;
+		font-size: 24rpx;
+		color: #999;
+		text-align: right;
+	  }
+	
+	  .card {
+		  padding: 10rpx 28rpx;
+	    .row {
+			align-items: center;
+			display: flex;
+			justify-content: space-between;
+			padding: 16rpx 0;
+			font-size: 26rpx;
+			color: #333;
+	      .lab {
+	      }
+	
+	      .val {
+			  &.blue {
+				  color: $themC;
+			  }
+			  &.hui {
+				  color: #999;
+			  }
+			  &.yellow {
+				  color: #fc7710;
+			  }
+	      }
+		  .flex {
+			  display: flex;
+			  justify-content: flex-end;
+			  .icon {
+				  width: 28rpx;
+				  height: 30rpx;
+				  margin-right: 20rpx;
+			  }
+		  }
+	    }
+		.status_row {
+			color: $themC;
+			font-size: 28rpx;
+			font-weight: 600;
+			display: flex;
+			padding:  20rpx 0;
+			.blueTxt {
+				flex: 1;
+			}
+		}
+	  }
+	}
+</style>
\ No newline at end of file
diff --git a/pages/sub/logPanel/addNewLog.vue b/pages/sub/logPanel/addNewLog.vue
new file mode 100644
index 0000000..e2b78ff
--- /dev/null
+++ b/pages/sub/logPanel/addNewLog.vue
@@ -0,0 +1,87 @@
+<template>
+	<view class="main">
+		<view class="h2">新增日志文件</view>
+		<view class="pad addLog">
+			<u--form labelPosition="left" :model="FormData" ref="uForm" labelWidth="160rpx">
+				<u-form-item label="机器" :required="true">
+					<u--input v-model="FormData.sex" disabled placeholder="请选择"
+						border="none"></u--input>
+					<u-icon slot="right" name="arrow-right"></u-icon>
+				</u-form-item>
+				<u-form-item label="名称" :required="true">
+					<u--input v-model="FormData.name" border="none" placeholder="请输入"></u--input>
+				</u-form-item>
+				<u-form-item label="文件路径" :required="true">
+					<u--input v-model="FormData.name" border="none" placeholder="请输入"></u--input>
+				</u-form-item>
+				<u-form-item label="命令" :required="true">
+					<u--input v-model="FormData.name" border="none" placeholder="请输入" type="textarea"></u--input>
+				</u-form-item>
+				<u-form-item label="文件偏移量(行)" :required="true" labelWidth="220rpx">
+					<u--input v-model="FormData.name" border="none" placeholder="请输入"></u--input>
+				</u-form-item>
+				<u-form-item label="文件编码" :required="true">
+					<u--input v-model="FormData.name" border="none" placeholder="请输入"></u--input>
+				</u-form-item>
+			</u--form>
+		</view>
+		<view class="btn_row">
+			<view class="btnBorder btn">取消</view>
+			<view class="btnBg btn">确定</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				FormData: {
+					name: ''
+				},
+
+			}
+		}
+	}
+</script>
+
+<style>
+	.addLog .u-form-item {
+		background-color: #f5f5f5;
+		border-radius: 6rpx;
+		padding: 0 34rpx;
+		margin-bottom: 30rpx;
+	}
+</style>
+
+<style lang="scss" scoped>
+	.btn_row {
+		display: flex;
+		justify-content: space-around;
+		padding: 40rpx;
+
+		.btn {
+			width: 200rpx;
+		}
+
+		.btnBorder {
+			color: $themC;
+		}
+	}
+
+	.h2 {
+		font-size: 30rpx;
+		border-bottom: 1rpx solid #F5F5F5;
+		height: 112rpx;
+		line-height: 150rpx;
+		font-weight: 600;
+		padding: 0 24rpx;
+		background-color: #fff;
+		margin-top: 10rpx;
+	}
+
+	.pad {
+		background: #fff;
+		padding: 32rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/sub/logPanel/logPanel.vue b/pages/sub/logPanel/logPanel.vue
new file mode 100644
index 0000000..0c75dcb
--- /dev/null
+++ b/pages/sub/logPanel/logPanel.vue
@@ -0,0 +1,162 @@
+<template>
+	<view class="main">
+		<view class="searchBox">
+			<searchRow placeholder="请输入机器/名称/路径/命令" />
+		</view>
+		
+		<view class="ul">
+			<view class="total">共3条</view>
+			<view class="card">
+				<view class="row">
+					<view class="lab">机器</view>
+					<view class="val">192.68.1.44主机</view>
+				</view>
+				<view class="row">
+					<view class="lab">名称</view>
+					<view class="val ">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">路径</view>
+					<view class="val blue">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">命令</view>
+					<view class="val ">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">偏移量（行）</view>
+					<view class="val ">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">修改时间</view>
+					<view class="val ">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">创建时间</view>
+					<view class="val ">host</view>
+				</view>
+				 
+				<view class="status_row">
+					<view class="blueTxt">
+						<view class="icon">
+							<image src="../../../static/images/icon (21).png" mode=""></image>
+						</view>
+						<view class="text">修改</view>
+					</view>
+					<view class="blueTxt" style="color: #ff2222;">
+						<view class="icon">
+							<image src="../../../static/images/icon (17).png" mode=""></image>
+						</view>
+						<view class="text">删除</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="addBtn">
+			<view class="btnBg" @click="$goPage('/pages/sub/logPanel/addNewLog')">添 加</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				 
+			}
+		},
+		methods: {
+			 
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.searchBox {
+		padding: 16rpx 30rpx;
+		background-color: #fff;
+	}
+	.addBtn {
+		text-align: center;
+		position: fixed;
+		bottom: 20rpx;
+		left: 0;
+		width: 100%;
+		padding: 0 30rpx;
+		.btnBg {
+			line-height: 96rpx;
+			height: 96rpx;
+		}
+	}
+	.tabs {
+		background-color: #fff;
+		margin-top: 8rpx;
+		padding: 16rpx 0;
+	}
+	
+	.ul {
+		width: 100%;
+		padding: 0 30rpx 140rpx 30rpx;
+	  .total {
+		height: 66rpx;
+		line-height: 66rpx;
+		font-size: 24rpx;
+		color: #999;
+		text-align: right;
+	  }
+	
+	  .card {
+		  padding: 10rpx 28rpx;
+	    .row {
+			align-items: center;
+			display: flex;
+			justify-content: space-between;
+			padding: 16rpx 0;
+			font-size: 26rpx;
+			color: #333;
+	      .lab {
+	      }
+	
+	      .val {
+			  &.blue {
+				  color: $themC;
+			  }
+			  &.hui {
+				  color: #999;
+			  }
+			  &.yellow {
+				  color: #fc7710;
+			  }
+	      }
+		  .flex {
+			  display: flex;
+			  justify-content: flex-end;
+			  .icon {
+				  width: 28rpx;
+				  height: 30rpx;
+				  margin-right: 20rpx;
+			  }
+		  }
+	    }
+		.status_row {
+			color: $themC;
+			font-size: 28rpx;
+			font-weight: 600;
+			display: flex;
+			padding:  20rpx 0;
+			.blueTxt {
+				flex: 1;
+				text-align: center;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				.icon {
+					width: 28rpx;
+					height: 28rpx;
+					margin-right: 14rpx;
+				}
+			}
+		}
+	  }
+	}
+</style>
\ No newline at end of file
diff --git a/pages/sub/machineList/machineList.vue b/pages/sub/machineList/machineList.vue
index 4240703..42d27cf 100644
--- a/pages/sub/machineList/machineList.vue
+++ b/pages/sub/machineList/machineList.vue
@@ -4,11 +4,37 @@
 			<searchRow placeholder="请输入名称/标识/主机/描述" />
 		</view>
 		<view class="tabs">
-			<u-tabs :list="list1" @click="click" lineHeight="4rpx" lineWidth="40rpx" itemStyle="height: 66rpx;" inactiveStyle="fontSize:28rpx" :activeStyle="{
-            color: '#3195fa',
-            fontWeight: '600',
-			fontSize:'28rpx'
-        }"></u-tabs>
+			<myTab :tabList="tabList" @tabClick="tabClick"></myTab>
+		</view>
+		<view class="ul">
+			<view class="total">共3条</view>
+			<view class="card">
+				<view class="row">
+					<view class="lab">名称</view>
+					<view class="val">192.68.1.44主机</view>
+				</view>
+				<view class="row">
+					<view class="lab">标识</view>
+					<view class="val">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">机器主机</view>
+					<view class="val blue">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">描述</view>
+					<view class="val">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">状态</view>
+					<view class="flex">
+						<view class="icon">
+							<image src="../../../static/images/icon (12).png" mode=""></image>
+						</view>
+						<view class="val hui">host</view>
+					</view>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -17,8 +43,9 @@
 	export default {
 		data() {
 			return {
-				list1: [{
+				tabList: [{
 					name: '全部',
+					id: 0
 				}, {
 					name: '启用',
 				}, {
@@ -27,7 +54,7 @@
 			}
 		},
 		methods: {
-			click(item) {
+			tabClick(item) {
 				console.log('item', item);
 			}
 		}
@@ -45,4 +72,49 @@
 		margin-top: 8rpx;
 		padding: 16rpx 0;
 	}
+	
+	.ul {
+		width: 100%;
+		padding: 0 30rpx 40rpx 30rpx;
+	  .total {
+		height: 66rpx;
+		line-height: 66rpx;
+		font-size: 24rpx;
+		color: #999;
+		text-align: right;
+	  }
+	
+	  .card {
+		  padding: 10rpx 28rpx;
+	    .row {
+			align-items: center;
+			display: flex;
+			justify-content: space-between;
+			padding: 16rpx 0;
+			font-size: 26rpx;
+			color: #333;
+	      .lab {
+	      }
+	
+	      .val {
+			  &.blue {
+				  color: $themC;
+			  }
+			  &.hui {
+				  color: #999;
+			  }
+			  
+	      }
+		  .flex {
+			  display: flex;
+			  justify-content: flex-end;
+			  .icon {
+				  width: 28rpx;
+				  height: 30rpx;
+				  margin-right: 20rpx;
+			  }
+		  }
+	    }
+	  }
+	}
 </style>
\ No newline at end of file
diff --git a/pages/sub/mechanicalLog/mechanicalLog.vue b/pages/sub/mechanicalLog/mechanicalLog.vue
new file mode 100644
index 0000000..d996ec5
--- /dev/null
+++ b/pages/sub/mechanicalLog/mechanicalLog.vue
@@ -0,0 +1,123 @@
+<template>
+	<view class="main">
+		<view class="searchBox">
+			<searchRow placeholder="搜索机器名称/用户名" />
+		</view>
+		<view class="tabs">
+			<myTab :tabList="tabList" @tabClick="tabClick"></myTab>
+		</view>
+		<view class="ul">
+			<view class="total">共3条</view>
+			<view class="card">
+				<view class="row">
+					<view class="lab">机器名称</view>
+					<view class="val">192.68.1.44主机</view>
+				</view>
+				<view class="row">
+					<view class="lab">用户名称</view>
+					<view class="val">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">用户昵称</view>
+					<view class="val">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">操作类型</view>
+					<view class="val">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">操作详情</view>
+					<view class="val">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">操作ip</view>
+					<view class="val">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">创建时间</view>
+					<view class="val">host</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabList: [{
+					name: '全部',
+					id: 0
+				}, {
+					name: '启用',
+				}, {
+					name: '停用'
+				}, ]
+			}
+		},
+		methods: {
+			tabClick(item) {
+				console.log('item', item);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.searchBox {
+		padding: 16rpx 30rpx;
+		background-color: #fff;
+	}
+
+	.tabs {
+		background-color: #fff;
+		margin-top: 8rpx;
+		padding: 16rpx 0;
+	}
+	
+	.ul {
+		width: 100%;
+		padding: 0 30rpx 40rpx 30rpx;
+	  .total {
+		height: 66rpx;
+		line-height: 66rpx;
+		font-size: 24rpx;
+		color: #999;
+		text-align: right;
+	  }
+	
+	  .card {
+		  padding: 10rpx 28rpx;
+	    .row {
+			align-items: center;
+			display: flex;
+			justify-content: space-between;
+			padding: 16rpx 0;
+			font-size: 26rpx;
+			color: #333;
+	      .lab {
+	      }
+	
+	      .val {
+			  &.blue {
+				  color: $themC;
+			  }
+			  &.hui {
+				  color: #999;
+			  }
+			  
+	      }
+		  .flex {
+			  display: flex;
+			  justify-content: flex-end;
+			  .icon {
+				  width: 28rpx;
+				  height: 30rpx;
+				  margin-right: 20rpx;
+			  }
+		  }
+	    }
+	  }
+	}
+</style>
\ No newline at end of file
diff --git a/pages/sub/mechanicalMonitor/mechanicalMonitor.vue b/pages/sub/mechanicalMonitor/mechanicalMonitor.vue
new file mode 100644
index 0000000..d367f88
--- /dev/null
+++ b/pages/sub/mechanicalMonitor/mechanicalMonitor.vue
@@ -0,0 +1,146 @@
+<template>
+	<view class="main">
+		<view class="searchBox">
+			<searchRow placeholder="搜索主机" />
+		</view>
+		<view class="tabs">
+			<myTab :tabList="tabList" @tabClick="tabClick"></myTab>
+		</view>
+		<view class="ul">
+			<view class="total">共3条</view>
+			<view class="card">
+				<view class="row">
+					<view class="lab">机器名称</view>
+					<view class="val">192.68.1.44主机</view>
+				</view>
+				<view class="row">
+					<view class="lab">机器主机</view>
+					<view class="val blue">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">插件版本</view>
+					<view class="val blue">host</view>
+				</view>
+				<view class="row">
+					<view class="lab">安装状态</view>
+					<view class="val">
+						<view class="flex">
+							<view class="flex">
+								<view class="icon">
+									<image src="../../../static/images/icon (8).png" mode=""></image>
+								</view>
+								<view class="val yellow">启动中</view>
+							</view>
+							<view class="flex" style="margin-left: 36rpx;">
+								<view class="icon">
+									<image src="../../../static/images/icon (11).png" mode=""></image>
+								</view>
+								<view class="val blue">运行中</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="status_row">
+					<view class="blueTxt">监控</view>
+					<view class="blueTxt">检测</view>
+					<view class="blueTxt">报警配置</view>
+					<view class="blueTxt" style="text-align: right;">报警记录</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tabList: [{
+					name: '全部',
+					id: 0
+				}, {
+					name: '运行中',
+				}, {
+					name: '启动中'
+				},{
+					name: '未启动'
+				}, ]
+			}
+		},
+		methods: {
+			tabClick(item) {
+				console.log('item', item);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.searchBox {
+		padding: 16rpx 30rpx;
+		background-color: #fff;
+	}
+
+	.tabs {
+		background-color: #fff;
+		margin-top: 8rpx;
+		padding: 16rpx 0;
+	}
+	
+	.ul {
+		width: 100%;
+		padding: 0 30rpx 40rpx 30rpx;
+	  .total {
+		height: 66rpx;
+		line-height: 66rpx;
+		font-size: 24rpx;
+		color: #999;
+		text-align: right;
+	  }
+	
+	  .card {
+		  padding: 10rpx 28rpx;
+	    .row {
+			align-items: center;
+			display: flex;
+			justify-content: space-between;
+			padding: 16rpx 0;
+			font-size: 26rpx;
+			color: #333;
+	      .lab {
+	      }
+	
+	      .val {
+			  &.blue {
+				  color: $themC;
+			  }
+			  &.hui {
+				  color: #999;
+			  }
+			  &.yellow {
+				  color: #fc7710;
+			  }
+	      }
+		  .flex {
+			  display: flex;
+			  justify-content: flex-end;
+			  .icon {
+				  width: 28rpx;
+				  height: 30rpx;
+				  margin-right: 20rpx;
+			  }
+		  }
+	    }
+		.status_row {
+			color: $themC;
+			font-size: 28rpx;
+			font-weight: 600;
+			display: flex;
+			padding:  20rpx 0;
+			.blueTxt {
+				flex: 1;
+			}
+		}
+	  }
+	}
+</style>
\ No newline at end of file