Commit a3dae65b authored by 11528's avatar 11528

样式修改

parent 8fe25c01
......@@ -2,19 +2,22 @@
<div id="container_max" class="warnModule">
<div class="warnHead">
<div class="warnBtns">
<el-button class="headBtn" @click="handleAdd">添加</el-button>
<el-button class="headBtn" @click="handleUpdate">编辑</el-button>
<el-button class="headBtn" @click="deleteRow">删除</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
<el-button type="primary" @click="handleAdd">添加</el-button>
<el-button type="primary" @click="handleUpdate">编辑</el-button>
<el-button type="primary" @click="deleteRow">删除</el-button>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button v-if="!fullscreen" id="fullscreen_btn" type="primary">全屏</el-button>
<el-button v-if="fullscreen" id="fullscreen_btn2" type="primary">取消全屏</el-button>
</div>
</div>
<el-divider />
<div class="warnBody">
<span style="font-size:24px;margin-right: 10px ">操作日志查询</span>
<div style="display: flex;justify-content: space-between;padding-top: 5px;padding-bottom: 10px">
<div style="font-weight: bold">操作日志查询</div>
</div>
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px;padding-left: 10px"
>
<el-table-column label="用户名" prop="userName" show-overflow-tooltip />
<el-table-column label="操作类型" prop="operationType" show-overflow-tooltip />
......@@ -137,6 +140,7 @@ export default {
name: 'OperationLog',
data() {
return {
fullscreen: false,
data: [],
stepActive: 1,
updateWarnForm: {
......@@ -214,9 +218,37 @@ export default {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
// if (screenfull.isEnabled) {
// screenfull.request(element)
// }
// 判断是否已经是全屏
// 如果是全屏,退出
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
console.log('已还原!')
} else { // 否则,进入全屏
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen()
}
console.log('已全屏!')
}
// 改变当前全屏状态
this.fullscreen = !this.fullscreen
})// 实现模块全屏
},
refresh() {
......@@ -319,11 +351,17 @@ export default {
max-width: 73%;
}
}
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
//background-color: #edeef3 !important;
//border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
.headBtn{
......@@ -342,7 +380,27 @@ export default {
}
}
.warnBody{
padding: 15px;
padding: 10px 10px 0 10px;
.name-icon{
width: 20px;
height: 20px;
position: relative;
top: 5px;
}
.square-green{
background-color: #3db58d;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
.square-yellow{
background-color: #edb845;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
}
.addWarnClass{
......
......@@ -2,22 +2,31 @@
<div id="container_max" class="warnModule">
<div class="warnHead">
<div class="warnBtns">
<el-button class="headBtn" @click="handleAdd">添加</el-button>
<el-button class="headBtn" @click="handleUpdate">编辑</el-button>
<el-button class="headBtn" @click="deleteRow">删除</el-button>
<el-button class="headBtn" @click="exportRow">导出报表</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
<el-button type="primary" @click="handleAdd">添加</el-button>
<el-button type="primary" @click="handleUpdate">编辑</el-button>
<el-button type="primary" @click="deleteRow">删除</el-button>
<el-button type="primary" @click="exportRow">导出报表</el-button>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button v-if="!fullscreen" id="fullscreen_btn" type="primary">全屏</el-button>
<el-button v-if="fullscreen" id="fullscreen_btn2" type="primary">取消全屏</el-button>
</div>
</div>
<el-divider />
<div class="warnBody">
<div style="display: flex;justify-content: space-between;padding-top: 5px;padding-bottom: 10px">
<div style="font-weight: bold">服务器查询</div>
</div>
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px;padding-left: 10px"
>
<el-table-column label="服务器名称" prop="serverName" show-overflow-tooltip />
<el-table-column label="可用性" prop="available" show-overflow-tooltip />
<el-table-column label="可用性" prop="available" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.available === '可用'" class="st-square" style="background-color: #3db58d;" />
<span v-if="scope.row.available === '不可用'" class="st-square" style="background-color: #b4bccc;" />
</template>
</el-table-column>
<el-table-column label="响应时间(ms)" prop="correspondingTime" show-overflow-tooltip />
<el-table-column label="CPU(%)" prop="cpu" show-overflow-tooltip />
<el-table-column label="物理内存(%)" prop="physicalMemory" show-overflow-tooltip />
......@@ -109,11 +118,14 @@
<script>
import screenfull from 'screenfull'
import Template from "@/views/instance/Template";
export default {
name: 'TheServer',
components: {Template},
data() {
return {
fullscreen: false,
data: [{
id: 1,
label: '本机容器',
......@@ -183,9 +195,9 @@ export default {
},
tableData: [
{ serverName: '人脸识别服务器', available: '可用', correspondingTime: '0', cpu: '4', physicalMemory: '70.2', virtualMemory: '0', diskMax: '6', diskUsageMax: '80', todayAlarm: '0' },
{ serverName: '人脸识别服务器', available: '可用', correspondingTime: '0', cpu: '4', physicalMemory: '70.2', virtualMemory: '0', diskMax: '6', diskUsageMax: '80', todayAlarm: '0' },
{ serverName: '人脸识别服务器', available: '可用', correspondingTime: '0', cpu: '4', physicalMemory: '70.2', virtualMemory: '0', diskMax: '6', diskUsageMax: '80', todayAlarm: '0' },
{ serverName: '人脸识别服务器', available: '可用', correspondingTime: '0', cpu: '4', physicalMemory: '70.2', virtualMemory: '0', diskMax: '6', diskUsageMax: '80', todayAlarm: '0' },
{ serverName: '人脸识别服务器', available: '可用', correspondingTime: '0', cpu: '4', physicalMemory: '70.2', virtualMemory: '0', diskMax: '6', diskUsageMax: '80', todayAlarm: '0' },
{ serverName: '人脸识别服务器', available: '可用', correspondingTime: '0', cpu: '4', physicalMemory: '70.2', virtualMemory: '0', diskMax: '6', diskUsageMax: '80', todayAlarm: '0' },
{ serverName: '人脸识别服务器', available: '可用', correspondingTime: '0', cpu: '4', physicalMemory: '70.2', virtualMemory: '0', diskMax: '6', diskUsageMax: '80', todayAlarm: '0' },
{ serverName: '人脸识别服务器', available: '可用', correspondingTime: '0', cpu: '4', physicalMemory: '70.2', virtualMemory: '0', diskMax: '6', diskUsageMax: '80', todayAlarm: '0' },
{ serverName: '人脸识别服务器', available: '可用', correspondingTime: '0', cpu: '4', physicalMemory: '70.2', virtualMemory: '0', diskMax: '6', diskUsageMax: '80', todayAlarm: '0' },
{ serverName: '人脸识别服务器', available: '可用', correspondingTime: '0', cpu: '4', physicalMemory: '70.2', virtualMemory: '0', diskMax: '6', diskUsageMax: '80', todayAlarm: '0' },
......@@ -207,9 +219,37 @@ export default {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
// if (screenfull.isEnabled) {
// screenfull.request(element)
// }
// 判断是否已经是全屏
// 如果是全屏,退出
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
console.log('已还原!')
} else { // 否则,进入全屏
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen()
}
console.log('已全屏!')
}
// 改变当前全屏状态
this.fullscreen = !this.fullscreen
})// 实现模块全屏
},
refresh() {
......@@ -266,11 +306,17 @@ export default {
.el-input__inner{
padding: 0 0 0 9px;
}
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
//background-color: #edeef3 !important;
//border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
.headBtn{
......@@ -289,7 +335,14 @@ export default {
}
}
.warnBody{
padding: 15px;
padding: 10px 10px 0 10px;
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
}
.addGroup{
......
......@@ -2,18 +2,21 @@
<template>
<div id="container_max" class="warnModule">
<div class="warnHead">
<span style="font-size:24px;margin-right: 10px ">资产维保记录</span>
<div class="warnBtns">
<el-button class="headBtnW" style="background-color: #2c3e50;color: #f4f6fc" @click="addInformation">新增</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
<el-button type="primary" @click="addInformation">新增</el-button>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button v-if="!fullscreen" id="fullscreen_btn" type="primary">全屏</el-button>
<el-button v-if="fullscreen" id="fullscreen_btn2" type="primary">取消全屏</el-button>
</div>
</div>
<el-divider />
<div class="warnBody">
<div style="display: flex;justify-content: space-between;padding-top: 5px;padding-bottom: 10px">
<div style="font-weight: bold">资产维保记录</div>
</div>
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px;padding-left: 10px"
>
<el-table-column label="维修单号" prop="repairOrderNo" show-overflow-tooltip>
<template slot-scope="scope">
......@@ -33,7 +36,7 @@
<el-table-column label="处理人" prop="handler" show-overflow-tooltip />
<el-table-column width="200px" label="操作">
<template slot-scope="scope">
<el-link v-if="scope.row.assetStatus === '1'" @click="implement">完成</el-link>
<el-link v-if="scope.row.assetStatus === '1'" type="primary" @click="implement">完成</el-link>
</template>
</el-table-column>
</el-table>
......@@ -204,6 +207,7 @@ export default {
components: { Template },
data() {
return {
fullscreen: false,
stepActive: 1,
queryParams: {
page: 1,
......@@ -593,9 +597,37 @@ export default {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
// if (screenfull.isEnabled) {
// screenfull.request(element)
// }
// 判断是否已经是全屏
// 如果是全屏,退出
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
console.log('已还原!')
} else { // 否则,进入全屏
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen()
}
console.log('已全屏!')
}
// 改变当前全屏状态
this.fullscreen = !this.fullscreen
})// 实现模块全屏
},
refresh() {
......@@ -710,16 +742,23 @@ export default {
max-width: 73%;
}
}
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
//display: flex;
//justify-content: space-between;
//background-color: #edeef3 !important;
//border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
width: 100px;
color: #fff;
border-color: #768398;
background-color: #768398;
......@@ -732,14 +771,9 @@ export default {
margin: 0 5px;
}
}
}
.mointorHead{
padding-top: 10px;
line-height: 32px;
display: flex;
justify-content: space-between;
.headSearch{
.searchInput{
border: 1px solid #cccccc;
border-left: 0;
.el-input__inner{
border-radius: 0;
......@@ -750,19 +784,16 @@ export default {
display: flex;
}
}
.headBtn{
height: 24px;
border-radius: 4px;
line-height: 22px;
font-size: 16px;
padding: 0 20px;
margin: 5px;
color: #444;
border-color: #ddd;
}
}
.warnBody{
padding: 10px 10px 0 10px;
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
}
......
......@@ -2,18 +2,22 @@
<template>
<div id="container_max" class="warnModule">
<div class="warnHead">
<span style="font-size:24px;margin-right: 10px ">人员信息</span>
<!-- <span style="font-size:24px;margin-right: 10px ">人员信息</span>-->
<div class="warnBtns">
<el-button class="headBtnW" style="background-color: #2c3e50;color: #f4f6fc" @click="addInformation">新增</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
<el-button type="primary" @click="addInformation">新增</el-button>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button v-if="!fullscreen" id="fullscreen_btn" type="primary">全屏</el-button>
<el-button v-if="fullscreen" id="fullscreen_btn2" type="primary">取消全屏</el-button>
</div>
</div>
<el-divider />
<div class="warnBody">
<div style="display: flex;justify-content: space-between;padding-top: 5px;padding-bottom: 10px">
<div style="font-weight: bold">人员信息</div>
</div>
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px;padding-left: 10px"
>
<el-table-column label="变更单号" prop="changeOrderNo" show-overflow-tooltip>
<template slot-scope="scope">
......@@ -33,7 +37,7 @@
<el-table-column label="处理人" prop="handler" show-overflow-tooltip />
<el-table-column width="200px" label="操作">
<template slot-scope="scope">
<el-link v-if="scope.row.assetStatus === '1'" @click="implement">完成</el-link>
<el-link v-if="scope.row.assetStatus === '1'" type="primary" @click="implement">完成</el-link>
</template>
</el-table-column>
</el-table>
......@@ -327,6 +331,7 @@ export default {
components: { Template },
data() {
return {
fullscreen: false,
stepActive: 1,
queryParams: {
page: 1,
......@@ -740,9 +745,37 @@ export default {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
// if (screenfull.isEnabled) {
// screenfull.request(element)
// }
// 判断是否已经是全屏
// 如果是全屏,退出
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
console.log('已还原!')
} else { // 否则,进入全屏
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen()
}
console.log('已全屏!')
}
// 改变当前全屏状态
this.fullscreen = !this.fullscreen
})// 实现模块全屏
},
refresh() {
......@@ -856,16 +889,23 @@ export default {
max-width: 73%;
}
}
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
//display: flex;
//justify-content: space-between;
//background-color: #edeef3 !important;
//border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
width: 100px;
color: #fff;
border-color: #768398;
background-color: #768398;
......@@ -878,14 +918,9 @@ export default {
margin: 0 5px;
}
}
}
.mointorHead{
padding-top: 10px;
line-height: 32px;
display: flex;
justify-content: space-between;
.headSearch{
.searchInput{
border: 1px solid #cccccc;
border-left: 0;
.el-input__inner{
border-radius: 0;
......@@ -896,19 +931,16 @@ export default {
display: flex;
}
}
.headBtn{
height: 24px;
border-radius: 4px;
line-height: 22px;
font-size: 16px;
padding: 0 20px;
margin: 5px;
color: #444;
border-color: #ddd;
}
}
.warnBody{
padding: 10px 10px 0 10px;
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
}
......
......@@ -2,25 +2,31 @@
<template>
<div id="container_max" class="warnModule">
<div class="warnHead">
<span style="font-size:24px;margin-right: 10px ">门禁列表</span>
<el-form inline label-width="auto" label-position="right">
<el-form-item class="headSearch">
<el-input v-model.trim="searchBy.userName" prefix-icon="el-icon-search" clearable placeholder="请输入门禁/数据源名称" />
</el-form-item>
</el-form>
<div>
<el-button type="primary" class="warnBtns" @click="refresh">导出</el-button>
</div>
</div>
<el-divider />
<div class="warnBody">
<div style="margin-top: 10px">
<el-input v-model.trim="searchBy.userName" prefix-icon="el-icon-search" style="width: 20%;margin-left: 10px" class="searchInput" clearable placeholder="请输入门禁/数据源名称" />
<el-button type="button" style="margin-right: 10px;float: right" class="headBtn" @click="refresh">导出</el-button>
<div style="display: flex;justify-content: space-between;padding-top: 5px;padding-bottom: 10px">
<div style="font-weight: bold">门禁列表</div>
</div>
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px;padding-left: 10px"
>
<el-table-column label="序号" type="index" width="50" />
<el-table-column label="门禁名称" prop="userName" show-overflow-tooltip />
<el-table-column label="认证方式" prop="operationType" show-overflow-tooltip />
<el-table-column label="数据源名称" prop="operationStatus" show-overflow-tooltip />
<el-table-column width="300px" label="操作">
<el-link @click="addEquipment">出入记录</el-link>
<el-link @click="addRow">人员信息</el-link>
<el-link type="primary" @click="addEquipment">出入记录</el-link>
<el-link type="primary" @click="addRow">人员信息</el-link>
</el-table-column>
</el-table>
</div>
......@@ -126,16 +132,23 @@ export default {
max-width: 73%;
}
}
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
display: flex;
justify-content: space-between;
//background-color: #edeef3 !important;
//border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
width: 100px;
color: #fff;
border-color: #768398;
background-color: #768398;
......@@ -148,14 +161,9 @@ export default {
margin: 0 5px;
}
}
}
.mointorHead{
padding-top: 10px;
line-height: 32px;
display: flex;
justify-content: space-between;
.headSearch{
.searchInput{
border: 1px solid #cccccc;
border-left: 0;
.el-input__inner{
border-radius: 0;
......@@ -166,19 +174,16 @@ export default {
display: flex;
}
}
.headBtn{
height: 24px;
border-radius: 4px;
line-height: 22px;
font-size: 16px;
padding: 0 20px;
margin: 5px;
color: #444;
border-color: #ddd;
}
}
.warnBody{
padding: 10px 10px 0 10px;
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
}
......
<!--出入记录-->
<template>
<div id="container_max" class="accessModule">
<div class="accessHead">
<span style="font-size:24px;margin-right: 10px ">门禁出入记录</span>
</div>
<div class="accessBody">
<div class="warnHead">
<el-form inline label-width="auto" label-position="right">
<el-form-item class="headSearch" label=" ">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
......@@ -13,6 +12,8 @@
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item class="headSearch" label=" ">
<el-date-picker
v-model="dateTime"
type="daterange"
......@@ -23,17 +24,29 @@
end-placeholder="结束日期"
:picker-options="pickerOptions"
/>
</el-form-item>
<el-form-item class="headSearch" label=" ">
<el-input
v-model="inputPersonName"
placeholder="请输入人员名称"
prefix-icon="el-icon-search"
style="width: 20%"
style="width: 200px"
/>
<el-button style="float: right" @click="exportAccess">导出</el-button>
</el-form-item>
<el-button type="primary" class="headBtn">查询</el-button>
</el-form>
<div>
<el-button type="primary" class="warnBtns" @click="exportAccess">导出</el-button>
</div>
</div>
<el-divider />
<div class="warnBody">
<div style="display: flex;justify-content: space-between;padding-top: 5px;padding-bottom: 10px">
<div style="font-weight: bold">门禁出入记录</div>
</div>
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
border
style="width: 100%;padding-top: 20px;"
>
<el-table-column label="序号" prop="idNum" show-overflow-tooltip />
<el-table-column label="人员姓名" prop="personName" show-overflow-tooltip />
......@@ -217,14 +230,66 @@ export default {
<style lang="scss">
.accessModule {
.accessHead {
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
}
.accessBody {
padding: 15px;
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.warnHead{
padding: 10px 10px 0 10px;
line-height: 32px;
display: flex;
justify-content: space-between;
//.headBtn{
// height: 24px;
// border-radius: 4px;
// line-height: 22px;
// font-size: 12px;
// padding: 0 10px;
// margin: 5px;
// color: #444;
// border-color: #ddd;
//}
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
.headSearch{
.searchInput{
border: 1px solid #cccccc;
border-left: 0;
.el-input__inner{
border-radius: 0;
border: 0;
}
}
.el-form-item__content{
display: flex;
}
}
}
.warnBody{
padding: 10px 10px 0 10px;
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
}
</style>
<template>
<div id="container_max" class="accessModule">
<div class="accessHead">
<span style="font-size:24px;margin-right: 10px ">数据源配置</span>
</div>
<div class="accessBody">
<div class="warnHead">
<!-- <span style="font-size:24px;margin-right: 10px ">数据源配置</span>-->
<el-form inline label-width="auto" label-position="right">
<el-form-item class="headSearch">
<el-input
v-model="inputDataName"
placeholder="数据源名称"
prefix-icon="el-icon-search"
style="width: 20%"
/>
<span style="margin-left: 20px">状态:</span>
</el-form-item>
<el-form-item class="headSearch" label="状态:">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
......@@ -19,14 +19,23 @@
:value="item.value"
/>
</el-select>
<el-button style="margin-left: 300px" type="success" @click="addDataSource">添加数据源</el-button>
<el-button style="" type="success" @click="allStart">批量启用</el-button>
<el-button style="" type="warning" @click="allEnd">批量停用</el-button>
<el-button style="" type="warning" @click="allDelete">批量删除</el-button>
</el-form-item>
</el-form>
<div>
<el-button class="warnBtns" type="primary" @click="addDataSource">添加数据源</el-button>
<el-button class="warnBtns" type="primary" @click="allStart">批量启用</el-button>
<el-button class="warnBtns" type="primary" @click="allEnd">批量停用</el-button>
<el-button class="warnBtns" type="primary" @click="allDelete">批量删除</el-button>
</div>
</div>
<el-divider />
<div class="warnBody">
<div style="display: flex;justify-content: space-between;padding-top: 5px;padding-bottom: 10px">
<div style="font-weight: bold">数据源配置</div>
</div>
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column
type="selection"
......@@ -40,10 +49,10 @@
<el-table-column label="备注描述" prop="remarks" show-overflow-tooltip />\
<el-table-column label="操作">
<template slot-scope="scope">
<el-link style="color: forestgreen" @click="stopRow(scope.row)">停用</el-link>
<el-link style="color: forestgreen" @click="updateRow(scope.row)">编辑</el-link>
<el-link style="color: forestgreen" @click="deleteRow(scope.row)">删除</el-link>
<el-link style="color: forestgreen" @click="queryAccess(scope.row)">查看门禁</el-link>
<el-link type="primary" @click="stopRow(scope.row)">停用</el-link>
<el-link type="primary" @click="updateRow(scope.row)">编辑</el-link>
<el-link type="warning" @click="deleteRow(scope.row)">删除</el-link>
<el-link type="primary" @click="queryAccess(scope.row)">查看门禁</el-link>
</template>
</el-table-column>
</el-table>
......@@ -456,5 +465,59 @@ export default {
.accessBody {
padding: 15px;
}
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
display: flex;
justify-content: space-between;
//background-color: #edeef3 !important;
//border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
margin: 0 5px;
.headBtn{
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
.headSearch{
.searchInput{
border: 1px solid #cccccc;
border-left: 0;
.el-input__inner{
border-radius: 0;
border: 0;
}
}
.el-form-item__content{
display: flex;
}
}
}
.warnBody{
padding: 10px 10px 0 10px;
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
}
</style>
......@@ -2,15 +2,11 @@
<template>
<div id="container_max" class="warnModule">
<div class="warnHead">
<span style="font-size:24px;margin-right: 10px ">巡检计划</span>
<div class="warnBtns">
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="warnBody">
<div style="margin-top: 10px">
<el-input v-model.trim="searchBy.userName" class="searchInput" style="width: 20%;margin-left: 10px" clearable placeholder="请输入巡检计划名称" />
<el-form inline label-width="auto" label-position="right">
<el-form-item class="headSearch">
<el-input v-model.trim="searchBy.userName" clearable placeholder="请输入巡检计划名称" />
</el-form-item>
<el-form-item class="headSearch">
<el-select
v-model="searchBy.operationStatus"
class="searchInput"
......@@ -27,25 +23,24 @@
:value="item.value"
/>
</el-select>
<el-button>搜索</el-button>
<el-select
v-model="value"
class="searchInput"
placeholder="更多操作"
clearable
style="width: 100px;margin-right: 10px;float: right"
maxlength="15"
>
<el-option label="删除" value="" @click.native="userLove">删除</el-option>
<el-option label="启用" value="" @click.native="userMassage">启用</el-option>
<el-option label="停用" value="" @click.native="userHistory">停用</el-option>
</el-select>
<el-button type="button" class="headBtn" style="float: right;margin-right: 10px" @click="addPlan">新增</el-button>
</el-form-item>
<el-button type="primary">搜索</el-button>
</el-form>
<div class="warnBtns">
<el-button type="primary" @click="addPlan">新增</el-button>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button v-if="!fullscreen" id="fullscreen_btn" type="primary">全屏</el-button>
<el-button v-if="fullscreen" id="fullscreen_btn2" type="primary">取消全屏</el-button>
</div>
</div>
<el-divider />
<div class="warnBody">
<div style="display: flex;justify-content: space-between;padding-top: 5px;padding-bottom: 10px">
<div style="font-weight: bold">巡检计划</div>
</div>
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px;padding-left: 10px"
>
<el-table-column type="selection" width="60" align="center" />
<el-table-column label="标题" prop="patrolInspectionTitle" show-overflow-tooltip />
......@@ -58,9 +53,9 @@
<el-table-column label="下次巡检时间" prop="NextTime" show-overflow-tooltip />
<el-table-column label="描述" prop="describe" show-overflow-tooltip />
<el-table-column width="200px" label="操作">
<el-link @click="implement">执行</el-link>
<el-link @click="report">报告</el-link>
<el-link @click="handleUpdate">编辑</el-link>
<el-link type="primary" @click="implement">执行</el-link>
<el-link type="primary" @click="report">报告</el-link>
<el-link type="primary" @click="handleUpdate">编辑</el-link>
<el-tooltip effect="light" placement="bottom" popper-class="moreTip">
<div slot="content" class="tooltipText" @click="deleteRow">删除</div>
<div slot="content" class="tooltipText" @click="addWarn">复制</div>
......@@ -288,6 +283,7 @@ export default {
name: 'PatrolInspectionPlan',
data() {
return {
fullscreen: false,
data: [{
id: 1,
label: '本机容器',
......@@ -499,9 +495,37 @@ export default {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
// if (screenfull.isEnabled) {
// screenfull.request(element)
// }
// 判断是否已经是全屏
// 如果是全屏,退出
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
console.log('已还原!')
} else { // 否则,进入全屏
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen()
}
console.log('已全屏!')
}
// 改变当前全屏状态
this.fullscreen = !this.fullscreen
})// 实现模块全屏
},
refresh() {
......@@ -654,16 +678,23 @@ export default {
max-width: 73%;
}
}
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
display: flex;
justify-content: space-between;
//background-color: #edeef3 !important;
//border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
width: 100px;
color: #fff;
border-color: #768398;
background-color: #768398;
......@@ -676,14 +707,9 @@ export default {
margin: 0 5px;
}
}
}
.mointorHead{
padding-top: 10px;
line-height: 32px;
display: flex;
justify-content: space-between;
.headSearch{
.searchInput{
border: 1px solid #cccccc;
border-left: 0;
.el-input__inner{
border-radius: 0;
......@@ -694,17 +720,16 @@ export default {
display: flex;
}
}
.headBtn{
border-radius: 4px;
line-height: 30px;
font-size: 16px;
padding: 0 20px;
color: #444;
border-color: #ddd;
}
}
.warnBody{
padding: 10px 10px 0 10px;
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
.caretDown{
display: inline-block;
......
......@@ -2,26 +2,24 @@
<template>
<div id="container_max" class="warnModule">
<div class="warnHead">
<span style="font-size:24px;margin-right: 10px ">巡检报告</span>
<div class="warnBtns">
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="warnBody">
<div style="margin-top: 10px">
<el-form inline label-width="auto" label-position="right">
<el-form-item class="headSearch">
<el-date-picker
v-model="searchBy.startTime"
type="date"
placeholder="选择日期"
style="margin-left: 10px;width: 150px"
style="width: 150px"
/>
</el-form-item>
<el-form-item class="headSearch">
<el-date-picker
v-model="searchBy.endTime"
type="date"
placeholder="选择日期"
style="width: 150px"
/>
</el-form-item>
<el-form-item>
<el-select
v-model="searchBy.plan"
class="searchInput"
......@@ -37,6 +35,8 @@
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-select
v-model="searchBy.inspection"
class="searchInput"
......@@ -52,6 +52,8 @@
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-select
v-model="searchBy.sendStatus"
class="searchInput"
......@@ -67,29 +69,45 @@
:value="item.value"
/>
</el-select>
<el-button>搜索</el-button>
</el-form-item>
<el-button type="primary">搜索</el-button>
</el-form>
<div class="warnBtns">
<el-select
class="searchInput"
class="warnBtns"
placeholder="更多操作"
clearable
style="width: 100px;margin-right: 10px;float: right"
style="width: 100px;margin-left: 10px;float: right"
maxlength="15"
>
<el-option label="删除" value="" @click.native="userSend">批量发送</el-option>
<el-option label="启用" value="" @click.native="userMassage">批量下载</el-option>
</el-select>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button v-if="!fullscreen" id="fullscreen_btn" type="primary">全屏</el-button>
<el-button v-if="fullscreen" id="fullscreen_btn2" type="primary">取消全屏</el-button>
</div>
</div>
<el-divider />
<div class="warnBody">
<div style="display: flex;justify-content: space-between;padding-top: 5px;padding-bottom: 10px">
<div style="font-weight: bold">巡检报告</div>
</div>
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px;padding-left: 10px"
>
<el-table-column type="selection" width="60" align="center" />
<el-table-column label="报告名称" prop="patrolInspectionTitle" show-overflow-tooltip />
<el-table-column label="巡检人" prop="inspector" show-overflow-tooltip />
<el-table-column label="巡检时间" prop="patrolInspectionCycle" show-overflow-tooltip />
<el-table-column label="巡检结果" prop="sendingMethod" show-overflow-tooltip />
<el-table-column label="报告发送状态" prop="reportsNumber" show-overflow-tooltip />
<el-table-column label="报告发送状态" prop="reportsNumber" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.reportsNumber === '失败'" class="st-square" style="background-color: #C03639;text-align: center">{{ scope.row.reportsNumber }}</span>
<span v-if="scope.row.reportsNumber === '成功'" class="st-square" style="background-color: #30B08F;text-align: center">{{ scope.row.reportsNumber }}</span>
</template>
</el-table-column>
<el-table-column label="报告发送时间" prop="latestTime" show-overflow-tooltip />
<el-table-column label="巡检计划名称" prop="NextTime" show-overflow-tooltip />
<el-table-column width="250px" label="操作">
......@@ -386,7 +404,8 @@ export default {
sendingMethod: '0个异常', reportsNumber: '成功', latestTime: '2022-05-08 10:22:33', NextTime: 'test' },
{ patrolInspectionTitle: 'fff', inspector: '管理员', patrolInspectionCycle: '2022-04-06 10:12:21',
sendingMethod: '0个异常', reportsNumber: '成功', latestTime: '2022-05-08 10:22:33', NextTime: 'test' }
]
],
fullscreen: false
}
},
mounted() {
......@@ -399,9 +418,37 @@ export default {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
// if (screenfull.isEnabled) {
// screenfull.request(element)
// }
// 判断是否已经是全屏
// 如果是全屏,退出
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
console.log('已还原!')
} else { // 否则,进入全屏
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen()
}
console.log('已全屏!')
}
// 改变当前全屏状态
this.fullscreen = !this.fullscreen
})// 实现模块全屏
},
refresh() {
......@@ -559,16 +606,23 @@ export default {
max-width: 73%;
}
}
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.warnHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
display: flex;
justify-content: space-between;
//background-color: #edeef3 !important;
//border-bottom: 1px solid #DBDDE3;
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
width: 100px;
color: #fff;
border-color: #768398;
background-color: #768398;
......@@ -581,14 +635,9 @@ export default {
margin: 0 5px;
}
}
}
.mointorHead{
padding-top: 10px;
line-height: 32px;
display: flex;
justify-content: space-between;
.headSearch{
.searchInput{
border: 1px solid #cccccc;
border-left: 0;
.el-input__inner{
border-radius: 0;
......@@ -599,17 +648,15 @@ export default {
display: flex;
}
}
.headBtn{
border-radius: 4px;
line-height: 30px;
font-size: 16px;
padding: 0 20px;
color: #444;
border-color: #ddd;
}
}
.warnBody{
padding: 10px 10px 0 10px;
.st-square{
cursor: pointer;
width: 9px;
height: 9px;
display: inline-block;
}
}
.caretDown{
display: inline-block;
......
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment