unknown
10 months ago
20 changed files with 1513 additions and 18 deletions
-
84common/js/waterMark.js
-
BINcomponents/.DS_Store
-
BINcomponents/cc-waterMark/.DS_Store
-
38components/cc-waterMark/Detail.vue
-
70components/cc-waterMark/index.vue
-
85components/cc-waterMark/waterMark.js
-
23components/myTab/myTab.vue
-
20package.json
-
76pages.json
-
12pages/index/index.vue
-
77pages/sub/batchExecution/batchExecution.vue
-
141pages/sub/batchExecution/executionDetails.vue
-
78pages/sub/batchExecution/selectMachine.vue
-
71pages/sub/batchExecution/selectTemplate.vue
-
152pages/sub/executionRecord/executionRecord.vue
-
87pages/sub/logPanel/addNewLog.vue
-
162pages/sub/logPanel/logPanel.vue
-
86pages/sub/machineList/machineList.vue
-
123pages/sub/mechanicalLog/mechanicalLog.vue
-
146pages/sub/mechanicalMonitor/mechanicalMonitor.vue
@ -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 |
@ -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> |
@ -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> |
@ -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 |
@ -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> |
@ -0,0 +1,20 @@ |
|||
{ |
|||
"id": "cc-waterMark", |
|||
"name": "实现页面加水印文字 单个页面所有页面加水印 水印颜色", |
|||
"displayName": "实现页面加水印文字 单个页面所有页面加水印 水印颜色", |
|||
"version": "1.0", |
|||
"description": "实现页面加水印文字, 可以实现系统所有页面加水印,也可以单个页面加水印, 可更改水印颜色", |
|||
"keywords": [ |
|||
"水印", |
|||
"加水印", |
|||
"图片水印", |
|||
"水印文字", |
|||
"watermark" |
|||
], |
|||
"dcloudext": { |
|||
"category": [ |
|||
"前端组件", |
|||
"通用组件" |
|||
] |
|||
} |
|||
} |
@ -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> |
@ -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> |
@ -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> |
@ -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> |
@ -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> |
@ -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> |
@ -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> |
@ -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> |
@ -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> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue