fangwenqiao
/
moin_app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

静态页面

master
unknown 10 months ago
parent
8f611061ca
commit
5618b6e13c
20 changed files with 1513 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 84
      common/js/waterMark.js
  2. BIN
      components/.DS_Store
  3. BIN
      components/cc-waterMark/.DS_Store
  4. 38
      components/cc-waterMark/Detail.vue
  5. 70
      components/cc-waterMark/index.vue
  6. 85
      components/cc-waterMark/waterMark.js
  7. 23
      components/myTab/myTab.vue
  8. 20
      package.json
  9. 76
      pages.json
  10. 12
      pages/index/index.vue
  11. 77
      pages/sub/batchExecution/batchExecution.vue
  12. 141
      pages/sub/batchExecution/executionDetails.vue
  13. 78
      pages/sub/batchExecution/selectMachine.vue
  14. 71
      pages/sub/batchExecution/selectTemplate.vue
  15. 152
      pages/sub/executionRecord/executionRecord.vue
  16. 87
      pages/sub/logPanel/addNewLog.vue
  17. 162
      pages/sub/logPanel/logPanel.vue
  18. 86
      pages/sub/machineList/machineList.vue
  19. 123
      pages/sub/mechanicalLog/mechanicalLog.vue
  20. 146
      pages/sub/mechanicalMonitor/mechanicalMonitor.vue

84
common/js/waterMark.js
View File

@ -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

BIN
components/.DS_Store
View File

BIN
components/cc-waterMark/.DS_Store
View File

38
components/cc-waterMark/Detail.vue
View File

@ -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>

70
components/cc-waterMark/index.vue
View File

@ -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>

85
components/cc-waterMark/waterMark.js
View File

@ -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

23
components/myTab/myTab.vue
View File

@ -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>

20
package.json
View File

@ -0,0 +1,20 @@
{
"id": "cc-waterMark",
"name": "实现页面加水印文字 单个页面所有页面加水印 水印颜色",
"displayName": "实现页面加水印文字 单个页面所有页面加水印 水印颜色",
"version": "1.0",
"description": "实现页面加水印文字, 可以实现系统所有页面加水印,也可以单个页面加水印, 可更改水印颜色",
"keywords": [
"水印",
"加水印",
"图片水印",
"水印文字",
"watermark"
],
"dcloudext": {
"category": [
"前端组件",
"通用组件"
]
}
}

76
pages.json
View File

@ -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": {

12
pages/index/index.vue
View File

@ -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'
},
]
}

77
pages/sub/batchExecution/batchExecution.vue
View File

@ -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>

141
pages/sub/batchExecution/executionDetails.vue
View File

@ -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>

78
pages/sub/batchExecution/selectMachine.vue
View File

@ -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>

71
pages/sub/batchExecution/selectTemplate.vue
View File

@ -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>

152
pages/sub/executionRecord/executionRecord.vue
View File

@ -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>

87
pages/sub/logPanel/addNewLog.vue
View File

@ -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>

162
pages/sub/logPanel/logPanel.vue
View File

@ -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>

86
pages/sub/machineList/machineList.vue
View File

@ -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>

123
pages/sub/mechanicalLog/mechanicalLog.vue
View File

@ -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>

146
pages/sub/mechanicalMonitor/mechanicalMonitor.vue
View File

@ -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