Commit 68a34490 authored by 11528's avatar 11528

Merge remote-tracking branch 'origin/master' into master

parents a3dae65b 363ba4a6
<template> <template>
<div id="container_max" class="monitor"> <div id="container_max" class="monitor">
<div class="mointorHead"> <div class="mointorHead">
<!-- <el-form inline label-width="auto" label-position="right">--> <!-- <el-form inline label-width="auto" label-position="right">-->
<!-- <el-form-item v-if="showList === false" class="headSearch" label=" ">--> <!-- <el-form-item v-if="showList === false" class="headSearch" label=" ">-->
<!-- <i style="font-size: 23px;line-height: 32px; background-color: #d6d6d6; border: 1px solid #cccccc " class="el-icon-search" />--> <!-- <i style="font-size: 23px;line-height: 32px; background-color: #d6d6d6; border: 1px solid #cccccc " class="el-icon-search" />-->
<!-- <el-input v-model.trim="serchForm.CONNAMECN" class="searchInput" clearable placeholder="请输入关键字" />--> <!-- <el-input v-model.trim="serchForm.CONNAMECN" class="searchInput" clearable placeholder="请输入关键字" />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- </el-form>--> <!-- </el-form>-->
<el-form inline label-width="auto" label-position="right"> <el-form inline label-width="auto" label-position="right">
<el-form-item v-if="showList === false" class="headSearch" label=" "> <el-form-item v-if="showList === false" class="headSearch" label=" ">
<el-input v-model.trim="serchForm.CONNAMECN" clearable placeholder="请输入关键字" /> <el-input v-model.trim="serchForm.CONNAMECN" clearable placeholder="请输入关键字" />
</el-form-item> </el-form-item>
<el-button type="primary" size="mini" class="headBtn">查询</el-button> <el-button type="primary" size="mini" class="headBtn">查询</el-button>
</el-form> </el-form>
...@@ -95,20 +95,32 @@ ...@@ -95,20 +95,32 @@
<el-table-column label="最新数据时间" prop="newTime" show-overflow-tooltip /> <el-table-column label="最新数据时间" prop="newTime" show-overflow-tooltip />
<el-table-column label="描述" prop="describe" show-overflow-tooltip /> <el-table-column label="描述" prop="describe" show-overflow-tooltip />
<el-table-column width="300px" label="操作"> <el-table-column width="300px" label="操作">
<!-- <template slot-scope="scope">--> <template slot-scope="scope">
<el-link @click="addEquipment">添加设备</el-link> <el-link @click="addEquipment">添加设备</el-link>
<el-link @click="addRow">添加组</el-link> <el-link @click="addRow">添加组</el-link>
<el-link @click="addRow">编辑</el-link> <el-link @click="addRow">编辑</el-link>
<el-link @click="deleteRow">删除</el-link> <el-link @click="deleteRow">删除</el-link>
<el-tooltip effect="light" placement="bottom" popper-class="moreTip"> <el-popover
<div slot="content" onclick="clickLinux()" class="tooltipText">配置Linux自定义监测</div> placement="bottom"
<div slot="content" class="tooltipText" @click="addWarn">添加告警</div> width="200"
<div slot="content" onclick="prohibit()" class="tooltipText">临时禁止</div> trigger="click"
<el-link>更多 >
<div class="caretDown" /> <div onclick="clickLinux()" class="tooltipText">配置Linux自定义监测</div>
</el-link> <div class="tooltipText" @click="addWarn">添加告警</div>
</el-tooltip> <div onclick="prohibit()" class="tooltipText">临时禁止</div>
<!-- </template>--> <el-link slot="reference">更多
<div class="caretDown" />
</el-link>
</el-popover>
<!-- <el-tooltip effect="light" placement="bottom" popper-class="moreTip">-->
<!-- <div slot="content" onclick="clickLinux()" class="tooltipText">配置Linux自定义监测</div>-->
<!-- <div slot="content" class="tooltipText" @click="addWarn">添加告警</div>-->
<!-- <div slot="content" onclick="prohibit()" class="tooltipText">临时禁止</div>-->
<!-- <el-link>更多-->
<!-- <div class="caretDown" />-->
<!-- </el-link>-->
<!-- </el-tooltip>-->
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
...@@ -155,6 +167,7 @@ export default { ...@@ -155,6 +167,7 @@ export default {
name: 'Equipment', name: 'Equipment',
data() { data() {
return { return {
visible: false,
fullscreen: false, fullscreen: false,
prohibitForm: { prohibitForm: {
starTime: '', starTime: '',
...@@ -355,12 +368,10 @@ export default { ...@@ -355,12 +368,10 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.moreTip{
.tooltipText{ .tooltipText{
cursor: pointer; cursor: pointer;
padding: 5px!important; padding: 5px!important;
} }
}
.addGroup{ .addGroup{
.el-dialog__footer{ .el-dialog__footer{
text-align: center; text-align: center;
......
...@@ -9,11 +9,13 @@ ...@@ -9,11 +9,13 @@
</div> </div>
<el-divider /> <el-divider />
<div class="logicalBody"> <div class="logicalBody">
<div style="font-weight: bold;padding: 0 10px 10px 5px">设备管理列表</div>
<el-table <el-table
:data="dataList" :data="dataList"
border border
:row-key="getKeys" :row-key="getKeys"
:expand-row-keys="expand" :expand-row-keys="expand"
:default-expand-all="true"
:tree-props="{children: 'child'}" :tree-props="{children: 'child'}"
> >
<el-table-column label="公司" prop="company" show-overflow-tooltip> <el-table-column label="公司" prop="company" show-overflow-tooltip>
...@@ -146,7 +148,7 @@ ...@@ -146,7 +148,7 @@
<el-button @click="closeAddDialog">取消</el-button> <el-button @click="closeAddDialog">取消</el-button>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog class="addWarnClass" width="50%" title="告警添加" :visible.sync="objectDialog"> <el-dialog class="addWarnClass" width="50%" title="添加对象" :visible.sync="objectDialog">
<el-form v-if="stepActive === 1" ref="addForm" style="width: 100%;height: 300px" label-width="auto" :model="addForm"> <el-form v-if="stepActive === 1" ref="addForm" style="width: 100%;height: 300px" label-width="auto" :model="addForm">
<el-form-item label=" "> <el-form-item label=" ">
<div class="treebody"> <div class="treebody">
...@@ -195,11 +197,11 @@ export default { ...@@ -195,11 +197,11 @@ export default {
children: [{ children: [{
id: 111, id: 111,
icon: require('@/assets/image/shebei2-zhengchang.png'), icon: require('@/assets/image/shebei2-zhengchang.png'),
label: '三级 1-1-1' label: '智盘服务器10.1.1.50'
}, { }, {
id: 112, id: 112,
icon: require('@/assets/image/shebei2-zhengchang.png'), icon: require('@/assets/image/shebei2-zhengchang.png'),
label: '三级 1-1-2' label: '127.0.0.1'
}] }]
}, },
{ {
...@@ -209,11 +211,11 @@ export default { ...@@ -209,11 +211,11 @@ export default {
children: [{ children: [{
id: 121, id: 121,
icon: require('@/assets/image/shebei2-guzhang.png'), icon: require('@/assets/image/shebei2-guzhang.png'),
label: '三级 1-1-1' label: 'ping'
}, { }, {
id: 122, id: 122,
icon: require('@/assets/image/shebei2-guzhang.png'), icon: require('@/assets/image/shebei2-guzhang.png'),
label: '三级 1-1-2' label: 'url'
}] }]
}] }]
}], }],
...@@ -291,11 +293,19 @@ export default { ...@@ -291,11 +293,19 @@ export default {
child: [ child: [
{ id: '111', icon: require('@/assets/image/shebei9-zhengchang.png'), company: '服务器硬件', type: '', { id: '111', icon: require('@/assets/image/shebei9-zhengchang.png'), company: '服务器硬件', type: '',
child: [ child: [
{ id: '1111', icon: require('@/assets/image/shebei2-zhengchang.png'), company: '云打印服务器-硬件', type: '' } { id: '1111', icon: require('@/assets/image/shebei2-zhengchang.png'), company: '云打印服务器-硬件', type: '' },
{ id: '1112', icon: require('@/assets/image/shebei2-zhengchang.png'), company: 'B0629虚拟化服务器HPE DL580G9', type: '' },
{ id: '1113', icon: require('@/assets/image/shebei2-zhengchang.png'), company: '温泉翁群翁', type: '' }
] }, ] },
{ id: '112', icon: require('@/assets/image/shebei2-zhengchang.png'), company: '云打印服务器-硬件', type: '', { id: '112', icon: require('@/assets/image/shebei2-zhengchang.png'), company: '云打印服务器-硬件', type: '',
child: [ child: [
{ id: '1121', noIcon: '1', company: 'Power Supply -PS 2 Presence-0045', type: '' } { id: '1121', noIcon: '1', company: 'Power Supply -PS 2 Presence-0045', type: '' },
{ id: '1122', noIcon: '1', company: 'Temperature -16-VR P1 Mem-0011', type: '' },
{ id: '1123', noIcon: '1', company: 'Fan -Fan 4 DutyCycle-0038', type: '' },
{ id: '1124', noIcon: '1', company: 'Temperature -22-PCI 2-0017', type: '' },
{ id: '1125', noIcon: '1', company: 'Temperature -38-I/O Zone-0027', type: '' },
{ id: '1126', noIcon: '1', company: 'Power Supply -Power Supply 2-0043', type: '' },
{ id: '1127', noIcon: '1', company: 'Temperature -43-Storage Batt-002c', type: '' }
] } ] }
] } ] }
] } ] }
......
...@@ -121,20 +121,39 @@ export default { ...@@ -121,20 +121,39 @@ export default {
}, },
tableData: [ tableData: [
{ equipment: '智盘服务器10.1.1.50', icon: require('@/assets/image/shebei2-zhengchang.png'), point: '/dev/sda1 (/boot)', value: '物理内存', value2: 'Ping', value3: '连接' }, { equipment: '智盘服务器10.1.1.50', icon: require('@/assets/image/shebei2-zhengchang.png'), point: '/dev/sda1 (/boot)', value: '物理内存', value2: 'Ping', value3: '连接' },
{ equipment: '总部24F-机柜8-17U-16U-电票系统', icon: require('@/assets/image/shebei2-guzhang.png'), point: '/dev/sda1 (/boot)', value: '物理内存', value2: 'Ping', value3: '/dev/sda2 (/media/disk)' }, { equipment: '总部24F-机柜8-17U-16U-电票系统', icon: require('@/assets/image/shebei2-guzhang.png'), point: 'ora_s000_vbsrun12', value: 'CPU', value2: 'Ping', value3: '/dev/sda2 (/media/disk)' },
{ equipment: '人脸识别服务器-10.1.1.52', icon: require('@/assets/image/shebei2-zhengchang.png'), point: '/dev/sda1 (/boot)', value: '物理内存', value2: 'Ping', value3: 'Snmp连接检测' } { equipment: '人脸识别服务器-10.1.1.52', icon: require('@/assets/image/shebei2-zhengchang.png'), point: 'ora_asmb_vbsrun12', value: '物理内存', value2: 'Ping', value3: 'Snmp连接检测' },
{ equipment: '跳板机_192.168.8.20', icon: require('@/assets/image/shebei2-zhengchang.png'), point: '/dev/fslv01 (/bkp)', value: 'CPU', value2: 'Ping', value3: 'Snmp连接检测' },
{ equipment: '运维服务器_192.168.6.16', icon: require('@/assets/image/shebei2-zhengchang.png'), point: 'ora_rbal_vbsrun12', value: 'AgentWin CPU', value2: 'Ping', value3: 'Snmp连接检测' },
{ equipment: '智盘服务器-10.1.1.54', icon: require('@/assets/image/shebei2-zhengchang.png'), point: 'ora_dbw0_vbsrun12', value: '物理内存', value2: 'Ping', value3: 'Snmp连接检测' },
{ equipment: '上网代理服务器-10.1.1.58', icon: require('@/assets/image/shebei2-zhengchang.png'), point: '/dev/sda1 (/boot)', value: '虚拟内存', value2: 'Ping', value3: 'Snmp连接检测' },
], ],
tableData2: [ tableData2: [
{ equipment: '餐厅服务器-10.1.1.61', point: 'C:', value: '1', value2: '磁盘使用率(%)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' }, { equipment: '餐厅服务器-10.1.1.61', point: 'C:', value: '1', value2: '磁盘使用率(%)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' },
{ equipment: '餐厅服务器-10.1.1.61', point: 'alg.exe', value: '1', value2: '进程数(个)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' }, { equipment: '餐厅服务器-10.1.1.61', point: 'alg.exe', value: '1', value2: '进程数(个)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' },
{ equipment: '餐厅服务器-10.1.1.61', point: '虚拟内存', value: '1', value2: '内存使用率(%)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' } { equipment: '餐厅服务器-10.1.1.61', point: '虚拟内存', value: '1', value2: '内存使用率(%)', value3: '19.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' },
{ equipment: '餐厅服务器-10.1.1.61', point: 'Ping', value: '1', value2: '服务成功率(%)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' },
{ equipment: '餐厅服务器-10.1.1.61', point: 'Windows CPU', value: '1', value2: 'CPU使用率(%)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' },
{ equipment: '餐厅服务器-10.1.1.61', point: 'Wmi连接', value: '1', value2: '内存使用率(%)', value3: '2', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' },
{ equipment: '餐厅服务器-10.1.1.61', point: '物理内存', value: '1', value2: '服务成功率(%)', value3: '100.000', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' },
{ equipment: '餐厅服务器-10.1.1.61', point: '虚拟内存', value: '1', value2: '内存使用率(%)', value3: '11.550', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' },
{ equipment: '餐厅服务器-10.1.1.61', point: '物理内存', value: '1', value2: '内存使用率(%)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' },
{ equipment: '餐厅服务器-10.1.1.61', point: 'G:', value: '1', value2: '磁盘使用率(%)', value3: '89.400', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' },
], ],
equipmentList: [ equipmentList: [
{ img: require('@/assets/image/shebei1-weizhi.png'), name: '' }, { img: require('@/assets/image/shebei1-weizhi.png'), name: '' },
{ img: require('@/assets/image/shebei2-zhengchang.png'), name: '总部24F-机柜8-17U-16U' },
{ img: require('@/assets/image/shebei2-guzhang.png'), name: '人脸识别服务器-10.1' },
{ img: require('@/assets/image/shebei2-guzhang.png'), name: '人脸应用服务器-10.1' },
{ img: require('@/assets/image/shebei2-zhengchang.png'), name: '智盘服务器10.1.1.50' }, { img: require('@/assets/image/shebei2-zhengchang.png'), name: '智盘服务器10.1.1.50' },
{ img: require('@/assets/image/shebei2-guzhang.png'), name: '智盘服务器10.1.1.50' }, { img: require('@/assets/image/shebei2-zhengchang.png'), name: '跳板机_192.168.8.20' },
{ img: require('@/assets/image/shebei2-guzhang.png'), name: '智盘服务器10.1.1.50' }, { img: require('@/assets/image/shebei2-zhengchang.png'), name: '运维服务器_192.168.6.16' },
{ img: require('@/assets/image/shebei2-zhengchang.png'), name: '智盘服务器10.1.1.50' } { img: require('@/assets/image/shebei2-zhengchang.png'), name: '绩效系统-10.1.1.60' },
{ img: require('@/assets/image/shebei2-zhengchang.png'), name: '餐厅服务器-10.1.1.61' },
{ img: require('@/assets/image/shebei2-zhengchang.png'), name: '集成平台主节点' },
{ img: require('@/assets/image/shebei2-zhengchang.png'), name: '短信平台-10.1.1.65' },
{ img: require('@/assets/image/shebei2-zhengchang.png'), name: '停车服务器-10.1.1.71' },
{ img: require('@/assets/image/shebei2-zhengchang.png'), name: '停车服务器-10.1.1.73' },
], ],
activeName: 'first', activeName: 'first',
data: [{ data: [{
......
...@@ -37,39 +37,39 @@ ...@@ -37,39 +37,39 @@
<span class="bar-header-span">故障统计</span> <span class="bar-header-span">故障统计</span>
</div> </div>
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="16"> <el-col :span="15">
<div id="echarts-enter3" class="span_1"> <div id="echarts-enter3" class="span_1">
<div id="dataCharts_enter3" ref="chart_enter" style="height: 45vh" /> <div id="dataCharts_enter3" ref="chart_enter" style="height: 45vh" />
</div> </div>
</el-col> </el-col>
<el-col style="margin-top: 30px" :span="8"> <el-col style="margin-top: 30px" :span="9">
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">服务器</div> <div class="columLabel">服务器:1 个设备(11.11%),4 个监测点(23.53%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">应用</div> <div class="columLabel">应用:1 个设备(11.11%),1 个监测点(5.88%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">网络</div> <div class="columLabel">网络:7 个设备(77.78%),12 个监测点(70.59%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">安全</div> <div class="columLabel">安全:0 个设备(0.00%),0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">存储</div> <div class="columLabel">存储:0 个设备(0.00%),0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">虚拟机</div> <div class="columLabel">虚拟机:0 个设备(0.00%),0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">物联网</div> <div class="columLabel">物联网:0 个设备(0.00%),0 个监测点(0.00%)</div>
</div> </div>
</el-col> </el-col>
...@@ -81,39 +81,39 @@ ...@@ -81,39 +81,39 @@
<span class="bar-header-span">危险统计</span> <span class="bar-header-span">危险统计</span>
</div> </div>
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="16"> <el-col :span="15">
<div id="echarts-enter4" class="span_1"> <div id="echarts-enter4" class="span_1">
<div id="dataCharts_enter4" ref="chart_enter" style="height: 45vh" /> <div id="dataCharts_enter4" ref="chart_enter" style="height: 45vh" />
</div> </div>
</el-col> </el-col>
<el-col style="margin-top: 30px" :span="8"> <el-col style="margin-top: 30px" :span="9">
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">服务器</div> <div class="columLabel">服务器:3 个设备(75.00%),11 个监测点(91.67%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">应用</div> <div class="columLabel">应用: 0 个设备(0.00%),0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">网络</div> <div class="columLabel">网络:1 个设备(25.00%),1 个监测点(8.33%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">安全</div> <div class="columLabel">安全:0 个设备(0.00%),0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">存储</div> <div class="columLabel">存储:0 个设备(0.00%),0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">虚拟机</div> <div class="columLabel">虚拟机: 0 个设备(0.00%),0 个监测点(0.00%)</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<span class="columSquare"></span> <span class="columSquare"></span>
<div class="columLabel">物联网</div> <div class="columLabel">物联网: 0 个设备(0.00%),0 个监测点(0.00%)</div>
</div> </div>
</el-col> </el-col>
...@@ -268,7 +268,8 @@ export default { ...@@ -268,7 +268,8 @@ export default {
}, },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
bottom: 'bottom' left: 'left',
top: '50%'
}, },
series: [ series: [
{ {
...@@ -276,11 +277,11 @@ export default { ...@@ -276,11 +277,11 @@ export default {
type: 'pie', type: 'pie',
radius: ['50%', '70%'], radius: ['50%', '70%'],
data: [ data: [
{ value: 9, name: '故障:' }, { value: 9, name: '故障: 9个, 8.49%' },
{ value: 3, name: '危险:' }, { value: 3, name: '危险: 3 个,2.83%' },
{ value: 83, name: '正常:' }, { value: 83, name: '正常: 83 个,78.30%' },
{ value: 18, name: '未知:' }, { value: 18, name: '未知: 11 个,10.38%' },
{ value: 0, name: '禁止:' } { value: 0, name: '禁止: 0 个,0.00%' }
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
...@@ -303,7 +304,8 @@ export default { ...@@ -303,7 +304,8 @@ export default {
}, },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
bottom: 'bottom' left: 'left',
top: '50%'
}, },
series: [ series: [
{ {
...@@ -311,11 +313,11 @@ export default { ...@@ -311,11 +313,11 @@ export default {
type: 'pie', type: 'pie',
radius: ['50%', '70%'], radius: ['50%', '70%'],
data: [ data: [
{ value: 17, name: '故障:' }, { value: 17, name: '故障: 17 个,0.78%' },
{ value: 12, name: '危险:' }, { value: 12, name: '危险: 12 个,0.55%' },
{ value: 1693, name: '正常:' }, { value: 1693, name: '正常: 1693 个,77.80%' },
{ value: 454, name: '未知:' }, { value: 454, name: '未知: 453 个,20.82%' },
{ value: 1, name: '禁止:' } { value: 1, name: '禁止: 1 个,0.05%' }
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
...@@ -378,11 +380,11 @@ export default { ...@@ -378,11 +380,11 @@ export default {
}, },
series: [ series: [
{ {
data: [120, 200, 150, 80, 70, 110, 130], data: [80, 140, 150, 180, 40, 30, 130],
type: 'bar' type: 'bar'
}, },
{ {
data: [12, 20, 15, 80, 70, 10, 30], data: [200, 60, 40, 50, 170, 110, 210],
type: 'bar' type: 'bar'
} }
] ]
......
...@@ -181,7 +181,7 @@ export default { ...@@ -181,7 +181,7 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.warnModule { .warnModule {
.strategyRow { .strategyRow {
padding: 5px 0; padding: 5px 0;
...@@ -190,17 +190,6 @@ export default { ...@@ -190,17 +190,6 @@ export default {
.el-input__inner { .el-input__inner {
padding: 0 0 0 9px; padding: 0 0 0 9px;
} }
.lineInput {
/deep/ .el-input__inner{
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 1px;
border-radius: 0;
text-align: center;
width: 70px;
}
}
.warnHead { .warnHead {
height: 58px; height: 58px;
padding: 15px 20px 10px 20px; padding: 15px 20px 10px 20px;
...@@ -218,7 +207,17 @@ export default { ...@@ -218,7 +207,17 @@ export default {
} }
} }
} }
.lineInput {
/deep/ .el-input__inner{
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 1px;
border-radius: 0;
text-align: center;
width: 70px;
}
}
.warnBody { .warnBody {
padding: 15px; padding: 15px;
} }
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</div> </div>
<el-divider /> <el-divider />
<div class="warnBody"> <div class="warnBody">
<span style="font-size:24px;margin-right: 10px ">告警设置</span> <span style="font-weight: bold;margin-right: 10px ">告警设置</span>
<el-link type="primary" @click="addWarn">新增告警</el-link> <el-link type="primary" @click="addWarn">新增告警</el-link>
<el-table <el-table
:data="tableData" :data="tableData"
......
<template> <template>
<div id="container_max" class="assetListMoudle"> <div id="container_max" class="assetListMoudle">
<div class="assetListHead"> <div class="assetListHead">
<div class="assetListTitle">资产清单</div> <!-- <div class="assetListTitle">资产清单</div>-->
<div class="warnBtns"> <div class="warnBtns">
<el-button type="primary" @click="addAsset">新增</el-button> <el-button type="primary" @click="addAsset">新增</el-button>
<el-button type="primary" @click="deleteRow">删除</el-button> <el-button type="primary" @click="deleteRow">删除</el-button>
...@@ -42,10 +42,11 @@ ...@@ -42,10 +42,11 @@
</div> </div>
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<div style="font-weight: bold;padding: 10px 10px 0 5px">资产清单列表</div>
<el-table <el-table
:data="tableData" :data="tableData"
border border
style="width: 100%;padding-top: 20px" style="width: 100%;padding-top: 10px"
> >
<el-table-column label="资产名称" prop="name" show-overflow-tooltip> <el-table-column label="资产名称" prop="name" show-overflow-tooltip>
<template slot-scope="scope"> <template slot-scope="scope">
......
<template>
<div id="container_max" class="cleanUpModule">
<div class="cleanUpHead">
<span style="font-size:24px;margin-right: 10px ">综合查询</span>
<span>| 查询到<span style="color: #3db58d">{{182}}</span>个符合记录的数据 </span>
<div class="cleanUpBtns">
<el-button type="primary" @click="saveForExcel">保存为报表</el-button>
<el-dropdown>
<el-button type="primary">更多</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>批量入库</el-dropdown-item>
<el-dropdown-item>打印标签</el-dropdown-item>
<el-dropdown-item>设为闲置</el-dropdown-item>
<el-dropdown-item>维修登记</el-dropdown-item>
<el-dropdown-item>清理报废</el-dropdown-item>
<el-dropdown-item>批量删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="cleanUpBody">
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column
type="selection"
width="55"
/>
<el-table-column label="资产编号" prop="assetNum" show-overflow-tooltip />
<el-table-column label="资产名称" prop="assetName" show-overflow-tooltip />
<el-table-column label="资产分类" prop="assetClassify" show-overflow-tooltip />
<el-table-column label="状态" prop="type" show-overflow-tooltip width="50"/>
<el-table-column label="保修到期日期" prop="editTime" show-overflow-tooltip />
<el-table-column label="操作">
<template slot-scope="scope">
<el-link type="primary" @click="updateRow(scope.row)">编辑</el-link>
<el-link type="primary" style="margin-left: 20px" @click="finishRow(scope.row)">报废</el-link>
<el-link type="primary" style="margin-left: 20px" @click="outTabRow(scope.row)">打印标签</el-link>
</template>
</el-table-column>
</el-table>
<el-pagination
align="center"
:current-page="currentPage"
:page-sizes="[5,10,20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<el-dialog class="propertyClass" width="50%" title="编辑资产" :visible.sync="updateAsset">
<el-collapse v-model="activeNames">
<el-collapse-item name="1">
<template slot="title">
<h3 style="color: #1cc2bc">基本信息</h3>
</template>
<el-row>
<el-col :span="12">
<el-form ref="cleanUpForm" label-width="auto" :model="assetForm">
<el-form-item label="资产名称:">
<el-input
v-model="assetForm.assetName">
</el-input>
</el-form-item>
<el-form-item label="状态:">
<el-select :disabled="true" v-model="assetForm.classify" placeholder="请选择">
<el-option
v-for="item in assetList1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属部门:">
<el-select :disabled="true" v-model="assetForm.ownDepartment" placeholder="请选择">
<el-option
v-for="item in assetList2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="使用者:">
<el-input
v-model="assetForm.usePer">
</el-input>
</el-form-item>
<el-form-item label="保修结束时间:">
<div class="block">
<el-date-picker
v-model="assetForm.editEndTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="配置:">
<el-input
v-model="assetForm.edit"
style="width: 60%">
</el-input>
<el-button type="primary" style="margin-left: 20px">配置</el-button>
</el-form-item>
<el-form-item label="二维码:">
<el-input
type="textarea"
:rows="2"
v-model="assetForm.QRCode">
</el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form ref="cleanUpForm" label-width="auto" :model="assetForm">
<el-form-item label="资产编号:">
<el-input
v-model="assetForm.assetNum"
:disabled="true">
</el-input>
</el-form-item>
<el-form-item label="所属公司:">
<el-select :disabled="true" v-model="assetForm.ownCompany" placeholder="请选择">
<el-option
v-for="item in assetList2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="拥有者:">
<el-input
v-model="assetForm.ownerPer">
</el-input>
</el-form-item>
<el-form-item label="保修开始时间:">
<div class="block">
<el-date-picker
v-model="assetForm.editStartTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="采购时间:">
<div class="block">
<el-date-picker
v-model="assetForm.buyTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="序列号:">
<el-input
v-model="assetForm.serialNumber">
</el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item name="2">
<template slot="title">
<h3 style="color: #1cc2bc">资产属性</h3>
</template>
<el-row>
<el-col :span="12">
<el-form ref="cleanUpForm" label-width="auto" :model="assetForm1">
<el-form-item label="品牌:">
<el-input
v-model="assetForm1.brand">
</el-input>
</el-form-item>
<el-form-item label="设备名称:">
<el-input
v-model="assetForm1.devName">
</el-input>
</el-form-item>
<el-form-item label="出厂日期:">
<el-input
v-model="assetForm1.projectTime">
</el-input>
</el-form-item>
<el-form-item label="设备U位:">
<el-input
v-model="assetForm1.devUBit">
</el-input>
</el-form-item>
<el-form-item label="管理IP地址:">
<el-input
v-model="assetForm1.manIPAdderss">
</el-input>
</el-form-item>
<el-form-item label="MAC地址:">
<el-input
v-model="assetForm1.MACAdderss">
</el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form ref="cleanUpForm" label-width="auto" :model="assetForm1">
<el-form-item label="型号:">
<el-input
v-model="assetForm1.model">
</el-input>
</el-form-item>
<el-form-item label="设备用途:">
<el-input
v-model="assetForm1.devUse">
</el-input>
</el-form-item>
<el-form-item label="机房:">
<el-input
v-model="assetForm1.machineRoom">
</el-input>
</el-form-item>
<el-form-item label="业务IP地址:">
<el-input
v-model="assetForm1.thingIPAddress">
</el-input>
</el-form-item>
<el-form-item label="操作系统及版本:">
<el-input
v-model="assetForm1.oprSysLevel">
</el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item name="3">
<template slot="title">
<h3 style="color: #1cc2bc">配置属性</h3>
</template>
</el-collapse-item>
</el-collapse>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeAssetDialog">保存</el-button>
</span>
</el-dialog>
<el-dialog class="propertyClass" width="50%" title="新增报废" :visible.sync="addAsset">
<el-collapse v-model="activeNames1">
<el-collapse-item name="1">
<template slot="title">
<h3 style="color: #1cc2bc">基本信息</h3>
</template>
<el-form ref="cleanUpForm" label-width="auto" :model="assetForm2">
<el-form-item label="报废单号:">
<el-input
v-model="assetForm2.inputCleanUpNum"
:disabled="true">
</el-input>
</el-form-item>
<el-form-item label="登记时间:">
<div class="pickBody">
<el-date-picker
v-model="assetForm2.doTime"
type="date"
placeholder="选择日期"
style="width: 100%">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="处理人:">
<el-input
v-model="assetForm2.inputFinishPer">
</el-input>
</el-form-item>
<el-form-item label="提交人:">
<el-input
v-model="assetForm2.submitPer">
</el-input>
</el-form-item>
<el-form-item label="报废说明:">
<el-input
type="textarea"
:rows="2"
v-model="assetForm2.inputCleanUpMen">
</el-input>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
<el-table
ref="multipleTable"
:data="tableData1"
tooltip-effect="dark"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="assetNum"
label="资产编号"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="assetName"
label="资产名称"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="assetClassify"
label="资产分类"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="assetType"
label="资产状态"
show-overflow-tooltip>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeAssetDialog1">保存</el-button>
<el-button type="primary" @click="closeAssetDialog1">放弃</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import moment from 'moment'
export default {
name: 'Index',
data() {
return {
tableData: [
{
assetNum: 'cty-34324',
assetName: '测试资产1',
assetClassify: '服务器',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'cry-67454',
assetName: '测试资产2',
assetClassify: '设备',
type: '禁用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: '4cty-3324',
assetName: '测试资产3',
assetClassify: '服务器',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'c343ty-24',
assetName: '测试资产5',
assetClassify: '网络',
type: '空闲',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'cty24-343',
assetName: '测试资产1',
assetClassify: '服务器',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'zcf-34ss4',
assetName: '测试资产3',
assetClassify: '服务器',
type: '空闲',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'ctr-43324',
assetName: '测试资产2',
assetClassify: '设备',
type: '禁用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'crr-34244',
assetName: '测试资产5',
assetClassify: '服务器',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'ty4-34c324',
assetName: '测试资产5',
assetClassify: '测试',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'eey32-344',
assetName: '测试资产7',
assetClassify: '设备',
type: '空闲',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'wry43-324',
assetName: '测试资产2',
assetClassify: '服务器',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'cto-34u24',
assetName: '测试资产2',
assetClassify: '服务器',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
}
],
tableData1: [
{
assetNum: '1',
assetName: '测试资产1',
assetClassify: '服务器',
assetType: '在用'
},
{
assetNum: '2',
assetName: '测试资产2',
assetClassify: '设备',
assetType: '空闲'
},
{
assetNum: '3',
assetName: '测试资产3',
assetClassify: '设备',
assetType: '在用'
},
{
assetNum: '4',
assetName: '测试资产4',
assetClassify: '服务器',
assetType: '空闲'
},
{
assetNum: '5',
assetName: '测试资产5',
assetClassify: '设备',
assetType: '在用'
},
{
assetNum: '6',
assetName: '测试资产6',
assetClassify: '设备',
assetType: '在用'
},
{
assetNum: '7',
assetName: '测试资产7',
assetClassify: '摄像机',
assetType: '空闲'
},
{
assetNum: '8',
assetName: '测试资产8',
assetClassify: '摄像机',
assetType: '在用'
},
{
assetNum: '9',
assetName: '测试资产9',
assetClassify: '服务器',
assetType: '在用'
},
{
assetNum: '10',
assetName: '测试资产10',
assetClassify: '摄像机',
assetType: '空闲'
}
],
activeNames: ['1', '2', '3'],
activeNames1: ['1'],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 10, // 每页的数据条数
updateAsset: false,
assetForm: {
assetName: '',
classify: 1,
ownDepartment: 1,
usePer: '',
ownerPer: '',
editEndTime: '',
edit: '',
QRCode: '',
assetNum: 'cty-34324',
ownCompany: 1,
editStartTime: '',
buyTime: '',
serialNumber: ''
},
assetForm1: {
brand: '',
devName: '',
projectTime: '',
devUBit: '',
manIPAdderss: '',
MACAdderss: '',
model: '',
devUse: '',
machineRoom: '',
thingIPAddress: '',
oprSysLevel: ''
},
assetForm2: {
inputCleanUpNum: '',
doTime: '',
inputFinishPer: '',
submitPer: '',
inputCleanUpMen: ''
},
assetList1: [
{
value: 1,
label: '在用'
}
],
assetList2: [
{
value: 1,
label: '默认公司'
}
],
addAsset: false
}
},
methods: {
saveForExcel() {},
moreMess() {},
updateRow() {
this.updateAsset = true
},
finishRow() {
this.addAsset = true
},
outTabRow() {},
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.currentPage = val
},
closeAssetDialog() {
this.updateAsset = false
},
closeAssetDialog1() {
this.addAsset = false
}
}
}
</script>
<style lang="scss">
.cleanUpModule {
.cleanUpHead {
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.cleanUpBtns {
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;
}
}
}
.cleanUpBody {
padding: 15px;
}
}
</style>
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