Skip to content

I
IT-monitor
Commit 8fe25c01 authored by 11528's avatar 11528
Browse files
Options

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

parents 9ba91d90 0764f7d8
Show whitespace changes
Inline Side-by-side
Showing with 1726 additions and 220 deletions
src/styles/variables.scss
View file @ 8fe25c01
......@@ -90,7 +90,7 @@ $menuHover:#1A2137;
$subMenuBg:#232C48;
$subMenuHover:#1A2137;
$sideBarWidth: 224px;
$sideBarWidth: 200px;
$sideHideWidth: 54px;
// the :export directive is the magic sauce for webpack
......
src/views/IntegratedMonitor/Linux.vue
View file @ 8fe25c01
......@@ -7,7 +7,7 @@
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[0,1,2, 3,4,7]"
:default-expanded-keys="[0,1,2, 3,4,7,10]"
:default-checked-keys="[0,1,2,5]"
:props="defaultProps"
/>
......@@ -101,7 +101,7 @@
<el-input v-model="additionalForm.value" />
</el-form-item>
<el-form-item label="错误频率:">
<el-input style="width: 69%" v-model="additionalForm.value1" />
<el-input v-model="additionalForm.value1" style="width: 69%" />
<el-select
v-model="additionalForm.value2"
style="width: 30%"
......@@ -214,7 +214,7 @@
<el-input v-model="additionalForm2.value4" />
</el-form-item>
<el-form-item label="错误频率:">
<el-input style="width: 69%" v-model="additionalForm.value1" />
<el-input v-model="additionalForm.value1" style="width: 69%" />
<el-select
v-model="additionalForm.value2"
style="width: 30%"
......@@ -323,7 +323,7 @@
<el-input v-model="additionalForm.value" />
</el-form-item>
<el-form-item label="错误频率:">
<el-input style="width: 69%" v-model="additionalForm.value1" />
<el-input v-model="additionalForm.value1" style="width: 69%" />
<el-select
v-model="additionalForm.value2"
style="width: 30%"
......@@ -431,7 +431,7 @@
<el-input v-model="additionalForm.value" />
</el-form-item>
<el-form-item label="错误频率:">
<el-input style="width: 69%" v-model="additionalForm.value1" />
<el-input v-model="additionalForm.value1" style="width: 69%" />
<el-select
v-model="additionalForm.value2"
style="width: 30%"
......@@ -539,7 +539,7 @@
<el-input v-model="additionalForm.value" />
</el-form-item>
<el-form-item label="错误频率:">
<el-input style="width: 69%" v-model="additionalForm.value1" />
<el-input v-model="additionalForm.value1" style="width: 69%" />
<el-select
v-model="additionalForm.value2"
style="width: 30%"
......@@ -586,7 +586,7 @@
<el-input v-model="additionalForm.value" />
</el-form-item>
<el-form-item label="错误频率:">
<el-input style="width: 69%" v-model="additionalForm.value1" />
<el-input v-model="additionalForm.value1" style="width: 69%" />
<el-select
v-model="additionalForm.value2"
style="width: 30%"
......@@ -623,7 +623,7 @@
<el-input v-model="additionalForm.value" />
</el-form-item>
<el-form-item label="错误频率:">
<el-input style="width: 69%" v-model="additionalForm.value1" />
<el-input v-model="additionalForm.value1" style="width: 69%" />
<el-select
v-model="additionalForm.value2"
style="width: 30%"
......@@ -721,7 +721,7 @@
<el-input v-model="additionalForm.value" />
</el-form-item>
<el-form-item label="错误频率:">
<el-input style="width: 69%" v-model="additionalForm.value1" />
<el-input v-model="additionalForm.value1" style="width: 69%" />
<el-select
v-model="additionalForm.value2"
style="width: 30%"
......@@ -798,11 +798,11 @@ export default {
return {
faultForm: {
value: '',
value1: '',
value1: ''
},
faultForm2: {
value: '',
value1: '',
value1: ''
},
additionalForm: {
value: '',
......@@ -856,7 +856,7 @@ export default {
},
basicForm3: {
value: '',
value1: '',
value1: ''
},
activeNames: ['1', '2', '3', '4'],
activeNames2: ['1', '2', '3', '4'],
......@@ -879,39 +879,57 @@ export default {
}, {
id: 2,
label: '交换分区'
}, {
id: 13,
label: '物理内存'
}, {
id: 3,
label: '一级 1',
label: '磁盘',
children: [{
id: 4,
label: '二级 1-1',
label: '/dev/mapper/centos-root (/)',
children: [{
id: 5,
label: '三级 1-1-1'
label: '/dev/sda1 (/boot)'
}, {
id: 6,
label: '三级 1-1-2'
label: 'devtmpfs (/dev)'
}]
}]
}, {
id: 7,
label: '一级 2',
label: '进程',
children: [{
id: 8,
label: '二级 2-1'
label: '/bin/bash /usr/local/JianKongYi/Server/bin/../python/python.sh ../web_terminal/webserver.py'
}, {
id: 9,
label: '二级 2-2'
label: '/bin/bash /usr/sbin/ksmtuned'
}, {
id: 14,
label: '/bin/ps auxw'
}, {
id: 15,
label: '/sbin/audispd'
}, {
id: 16,
label: '/sbin/rpcbind -w'
}]
}, {
id: 10,
label: '一级 3',
label: '磁盘IO',
children: [{
id: 11,
label: '二级 3-1'
label: 'dm-o'
}, {
id: 12,
label: '二级 3-2'
label: 'dm-1'
}, {
id: 17,
label: 'scd0'
}, {
id: 18,
label: 'sda'
}]
}],
defaultProps: {
......
src/views/IntegratedMonitor/addEquipment.vue
View file @ 8fe25c01
......@@ -10,7 +10,52 @@
</el-form>
<div class="equipmentBody">Windows 服务器</div>
<div v-for="(item, index) in firstList" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm">
<el-card class="box-card" @click.native="addEquipmentForm(1)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">Linux 服务器</div>
<div v-for="(item, index) in firstListLinux" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(1)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">IBM 服务器</div>
<div v-for="(item, index) in firstListIBM" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(1)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">HP UX 服务器</div>
<div v-for="(item, index) in firstListHP" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(1)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">FreeBSD 服务器</div>
<div v-for="(item, index) in firstListFree" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(1)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">SCO UNIX 服务器</div>
<div v-for="(item, index) in firstListSCO" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(1)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
......@@ -26,7 +71,25 @@
</el-form>
<div class="equipmentBody">数据库</div>
<div v-for="(item, index) in secondList" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm">
<el-card class="box-card" @click.native="addEquipmentForm(2)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">Web应用</div>
<div v-for="(item, index) in secondListWeb" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(2)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">中间商</div>
<div v-for="(item, index) in secondListMiddle" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(2)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
......@@ -42,7 +105,25 @@
</el-form>
<div class="equipmentBody">设备厂商：迈普自主安全交换机</div>
<div v-for="(item, index) in thirdList" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm">
<el-card class="box-card" @click.native="addEquipmentForm(3)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">设备厂商：浪潮</div>
<div v-for="(item, index) in thirdListWave" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(3)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">设备厂商：H3C</div>
<div v-for="(item, index) in thirdListH3C" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(3)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
......@@ -50,7 +131,7 @@
</el-card>
</div>
</el-tab-pane>
<el-tab-pane label="存储设备" name="fourth">
<el-tab-pane label="安全设备" name="fourth">
<el-form inline label-width="auto" label-position="right">
<el-form-item class="headSearch" label=" ">
<el-input v-model.trim="serchForm.CONNAMECN" suffix-icon="el-icon-search" class="searchInput" clearable placeholder="请输入关键字" />
......@@ -58,7 +139,25 @@
</el-form>
<div class="equipmentBody">防火墙</div>
<div v-for="(item, index) in fourthList" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm">
<el-card class="box-card" @click.native="addEquipmentForm(4)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">上网行为管理</div>
<div v-for="(item, index) in fourthListSurf" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(4)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">Web应用防护系统</div>
<div v-for="(item, index) in fourthListWeb" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(4)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
......@@ -72,9 +171,36 @@
<el-input v-model.trim="serchForm.CONNAMECN" suffix-icon="el-icon-search" class="searchInput" clearable placeholder="请输入关键字" />
</el-form-item>
</el-form>
<div class="equipmentBody">HP</div>
<div class="equipmentBody">VMware服务器</div>
<div v-for="(item, index) in fifthList" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm">
<el-card class="box-card" @click.native="addEquipmentForm(5)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">Microsoft</div>
<div v-for="(item, index) in fifthListMic" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(5)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">Xen</div>
<div v-for="(item, index) in fifthListXen" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(5)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">IBM HMC</div>
<div v-for="(item, index) in fifthListIBM" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(5)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
......@@ -88,9 +214,36 @@
<el-input v-model.trim="serchForm.CONNAMECN" suffix-icon="el-icon-search" class="searchInput" clearable placeholder="请输入关键字" />
</el-form-item>
</el-form>
<div class="equipmentBody">VMware服务器</div>
<div class="equipmentBody">设备厂商：科士达</div>
<div v-for="(item, index) in sixthList" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm">
<el-card class="box-card" @click.native="addEquipmentForm(6)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">设备厂商：CSTC</div>
<div v-for="(item, index) in sixthListCSTC" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(6)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">设备厂商：通用</div>
<div v-for="(item, index) in sixthListCurrency" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(6)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">设备厂商：APC</div>
<div v-for="(item, index) in sixthListAPC" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(6)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
......@@ -98,7 +251,7 @@
</el-card>
</div>
</el-tab-pane>
<el-tab-pane label="UPS" name="seventh">
<el-tab-pane label="其他" name="seventh">
<el-form inline label-width="auto" label-position="right">
<el-form-item class="headSearch" label=" ">
<el-input v-model.trim="serchForm.CONNAMECN" suffix-icon="el-icon-search" class="searchInput" clearable placeholder="请输入关键字" />
......@@ -106,7 +259,34 @@
</el-form>
<div class="equipmentBody">UPS</div>
<div v-for="(item, index) in sevenList" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm">
<el-card class="box-card" @click.native="addEquipmentForm(7)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">被动式设备</div>
<div v-for="(item, index) in sevenListPassive" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(7)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">自定义</div>
<div v-for="(item, index) in sevenListCustom" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(7)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
</div>
</el-card>
</div>
<div class="equipmentBody">天楚云x-sky</div>
<div v-for="(item, index) in sevenListSky" :key="index" class="equipmentList">
<el-card class="box-card" @click.native="addEquipmentForm(7)">
<div style="display: flex">
<img :src="item.img">
<div style="line-height: 30px;padding-left: 10px">{{ item.name }}</div>
......@@ -118,26 +298,45 @@
</div>
<el-dialog class="addGroup" width="50%" title="基本设置" :visible.sync="addEqFormDialog" @close="reserForms">
<el-form ref="loginFormRef" label-width="auto" :model="addEqForm">
<el-form-item label="IP地址:" prop="ipPath">
<el-form-item v-if="formType === 6" label="Modbus地址:" prop="value10">
<el-input v-model="addEqForm.value11" />
</el-form-item>
<el-form-item v-if="formType !== 7" label="IP地址:" prop="ipPath">
<el-input v-model="addEqForm.ipPath" />
</el-form-item>
<el-form-item label="SNMP端口:" prop="SNMP">
<el-input v-model="addEqForm.SNMP" />
<el-form-item v-if="formType === 6" label="TCP端口号:" prop="ipPath">
<el-input v-model="addEqForm.value12" />
</el-form-item>
<el-form-item label="可读共同体名称:" prop="value">
<el-input v-model="addEqForm.value" />
<el-form-item v-if="formType === 5" label="用户名:" prop="value10">
<el-input v-model="addEqForm.value10" />
</el-form-item>
<el-form-item v-if="formType === 5" label="密码:" prop="value11">
<el-input v-model="addEqForm.value11" />
</el-form-item>
<el-form-item label="版本:" prop="value2">
<el-form-item v-if="formType === 1" label="Agent端口:" prop="SNMP">
<el-input v-model="addEqForm.value6" />
</el-form-item>
<el-form-item v-if="formType === 1 || formType === 5 || formType === 7" label="设备型号:" prop="value2">
<el-select
v-model="addEqForm.value2"
v-model="addEqForm.value7"
style="width: 100%"
>
<el-option value="v1" label="v1" />
<el-option value="v2" label="v2" />
<el-option value="v3" label="v3" />
<el-option value="普通设备" label="普通设备" />
</el-select>
</el-form-item>
<el-form-item label="设备型号:" prop="value3">
<el-form-item v-if="formType === 1|| formType === 4 || formType === 5 || formType === 6 || formType === 7" label="标题:" prop="SNMP">
<el-input v-model="addEqForm.value8" />
</el-form-item>
<el-form-item v-if="formType === 2 || formType === 3|| formType === 4" label="SNMP端口:" prop="SNMP">
<el-input v-model="addEqForm.SNMP" />
</el-form-item>
<el-form-item v-if="formType === 2 || formType === 3|| formType === 4" label="可读共同体名称:" prop="value">
<el-input v-model="addEqForm.value" />
</el-form-item>
<el-form-item v-if="formType === 2 || formType === 3" label="可写共同体名称:" prop="value">
<el-input v-model="addEqForm.value9" />
</el-form-item>
<el-form-item v-if="formType === 2 || formType === 3|| formType === 4" label="设备型号:" prop="value3">
<el-select
v-model="addEqForm.value3"
style="width: 100%"
......@@ -145,10 +344,17 @@
<el-option value="通用设备" label="通用设备" />
</el-select>
</el-form-item>
<el-form-item label="标题:" prop="value4">
<el-input v-model="addEqForm.value4" />
<el-form-item v-if="formType === 2 || formType === 3|| formType === 4" label="版本:" prop="value2">
<el-select
v-model="addEqForm.value2"
style="width: 100%"
>
<el-option value="v1" label="v1" />
<el-option value="v2" label="v2" />
<el-option value="v3" label="v3" />
</el-select>
</el-form-item>
<el-form-item label="告警级别:" prop="value5">
<el-form-item v-if="formType === 1|| formType === 4 || formType === 5 || formType === 6 || formType === 7" label="告警级别:" prop="value5">
<el-select
v-model="addEqForm.value5"
style="width: 100%"
......@@ -172,6 +378,7 @@ export default {
name: 'AddEquipment',
data() {
return {
formType: '',
addEqFormDialog: false,
addEqForm: {
ipPath: '',
......@@ -188,41 +395,174 @@ export default {
{ img: require('@/assets/image/img.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img.png'), name: 'Agent Windows' }
],
firstListLinux: [
{ img: require('@/assets/image/26linux_1.png'), name: 'Agent Linux' },
{ img: require('@/assets/image/26linux_1.png'), name: 'SSH Linux' },
{ img: require('@/assets/image/26linux_1.png'), name: 'Telnet Linux' },
{ img: require('@/assets/image/26linux_1.png'), name: 'Snmp Linux' }
],
firstListIBM: [
{ img: require('@/assets/image/img_6.png'), name: 'SSH IBM AIX' },
{ img: require('@/assets/image/img_6.png'), name: 'Telnet IBM AIX' },
{ img: require('@/assets/image/img_6.png'), name: 'Snmp IBM AIX' }
],
firstListHP: [
{ img: require('@/assets/image/img_7.png'), name: 'SSH HP UX' },
{ img: require('@/assets/image/img_7.png'), name: 'Telnet HP UX' },
{ img: require('@/assets/image/img_7.png'), name: 'Snmp HP UX' }
],
firstListFree: [
{ img: require('@/assets/image/img_8.png'), name: 'SSH FreeBSD' },
{ img: require('@/assets/image/img_8.png'), name: 'Telnet FreeBSD' },
{ img: require('@/assets/image/img_8.png'), name: 'Snmp FreeBSD' }
],
firstListSCO: [
{ img: require('@/assets/image/img_9.png'), name: 'SSH SCO UNIX' },
{ img: require('@/assets/image/img_9.png'), name: 'Telnet SCO UNIX' },
{ img: require('@/assets/image/img_9.png'), name: 'Snmp SCO UNIX' }
],
secondList: [
{ img: require('@/assets/image/img_1.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_1.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_1.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_1.png'), name: 'Agent Windows' }
{ img: require('@/assets/image/img.png'), name: 'SQL Server 2008' },
{ img: require('@/assets/image/img.png'), name: 'SQL Server' },
{ img: require('@/assets/image/img_6.png'), name: 'DB2' },
{ img: require('@/assets/image/img_6.png'), name: 'DB2_linux' },
{ img: require('@/assets/image/img_8.png'), name: 'Oracle' },
{ img: require('@/assets/image/img_8.png'), name: 'Oracle RAC' },
{ img: require('@/assets/image/img_8.png'), name: 'ODBC Oracle' },
{ img: require('@/assets/image/img_1.png'), name: 'Postgresql 9.x' },
{ img: require('@/assets/image/img_1.png'), name: 'Postgresql 8.x 9.0.x' },
{ img: require('@/assets/image/img_10.png'), name: 'SyBase' },
{ img: require('@/assets/image/img_10.png'), name: 'Sybase_New' },
{ img: require('@/assets/image/img_10.png'), name: '人大金仓' },
{ img: require('@/assets/image/img_10.png'), name: '人大金仓(v8)' }
],
secondListWeb: [
{ img: require('@/assets/image/img_11.png'), name: 'URL' },
{ img: require('@/assets/image/img_11.png'), name: 'Url Transaction' },
{ img: require('@/assets/image/img_11.png'), name: 'DNS' }
],
secondListMiddle: [
{ img: require('@/assets/image/img_12.png'), name: '金蝶' },
{ img: require('@/assets/image/img_6.png'), name: 'WebSphere' },
{ img: require('@/assets/image/img_6.png'), name: 'WebSphere' },
{ img: require('@/assets/image/img_13.png'), name: 'JBoss 4.x' },
{ img: require('@/assets/image/img_13.png'), name: 'JBoss 4.0.x 5.x' },
{ img: require('@/assets/image/img_13.png'), name: 'JBoss 6.x' },
{ img: require('@/assets/image/img_13.png'), name: 'JBoss 7.1.x' },
{ img: require('@/assets/image/img_8.png'), name: 'WebLogic 8.x' },
{ img: require('@/assets/image/img_8.png'), name: 'WebLogic 9.x 10.x' },
{ img: require('@/assets/image/img_8.png'), name: 'weblogic 11' },
{ img: require('@/assets/image/img_14.png'), name: 'Tomcat JMX' }
],
thirdList: [
{ img: require('@/assets/image/img_2.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_2.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_2.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_2.png'), name: 'Agent Windows' }
{ img: require('@/assets/image/img_2.png'), name: 'MyPower NSS12800系列' },
{ img: require('@/assets/image/img_2.png'), name: 'MyPower NSS8900系列' },
{ img: require('@/assets/image/img_2.png'), name: 'MyPower NSS6600系列' },
{ img: require('@/assets/image/img_2.png'), name: 'MyPower NSS5820系列' },
{ img: require('@/assets/image/img_2.png'), name: 'MyPower NSS5800系列' },
{ img: require('@/assets/image/img_2.png'), name: 'MyPower NSS4320系列' },
{ img: require('@/assets/image/img_2.png'), name: 'MyPower NSS4300系列' },
{ img: require('@/assets/image/img_2.png'), name: 'MyPower NSS3320系列' },
{ img: require('@/assets/image/img_2.png'), name: 'MyPower NSS3300系列' }
],
thirdListWave: [
{ img: require('@/assets/image/img_15.png'), name: '浪潮S5350|s6350' },
{ img: require('@/assets/image/img_15.png'), name: 'S5560系列(交换机)' },
{ img: require('@/assets/image/img_15.png'), name: 'S5960系列(交换机)' },
{ img: require('@/assets/image/img_15.png'), name: 'S6550系列(交换机)' },
{ img: require('@/assets/image/img_15.png'), name: 'S6650系列(交换机)' },
{ img: require('@/assets/image/img_15.png'), name: 'S6650L系列(交换机)' },
{ img: require('@/assets/image/img_15.png'), name: 'S6850系列(交换机)' },
{ img: require('@/assets/image/img_15.png'), name: 'IAC6000系列' },
{ img: require('@/assets/image/img_15.png'), name: 'CN60000(交换机)' },
{ img: require('@/assets/image/img_15.png'), name: '浪潮堆叠交换机' }
],
thirdListH3C: [
{ img: require('@/assets/image/img_16.png'), name: 'WX5510E' },
{ img: require('@/assets/image/img_16.png'), name: 'H3C' },
{ img: require('@/assets/image/img_16.png'), name: 'H3C无线AC' }
],
fourthList: [
{ img: require('@/assets/image/img_3.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_3.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_3.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_3.png'), name: 'Agent Windows' }
{ img: require('@/assets/image/img_17.png'), name: 'Pix' },
{ img: require('@/assets/image/img_17.png'), name: 'Tos3.3.002' },
{ img: require('@/assets/image/img_17.png'), name: 'TOSV3.2073N' },
{ img: require('@/assets/image/img_17.png'), name: 'Tosvi3.3.005' },
{ img: require('@/assets/image/img_18.png'), name: '联想网御' },
{ img: require('@/assets/image/img_18.png'), name: '联想网御' },
{ img: require('@/assets/image/img_3.png'), name: '启明星辰' },
{ img: require('@/assets/image/img_3.png'), name: '14600' },
{ img: require('@/assets/image/img_3.png'), name: '启明星辰' },
{ img: require('@/assets/image/img_3.png'), name: '天玥设备' },
{ img: require('@/assets/image/img_3.png'), name: '启明星辰WAG' }
],
fourthListSurf: [
{ img: require('@/assets/image/img_19.png'), name: '迪普UAG3000' },
{ img: require('@/assets/image/img_20.png'), name: '深信服上网行为' },
{ img: require('@/assets/image/img_20.png'), name: '深信服AC6.1设备' },
{ img: require('@/assets/image/img_21.png'), name: '锐捷UAC3.2.30' },
{ img: require('@/assets/image/img_21.png'), name: '锐捷RG上网行为管理' },
{ img: require('@/assets/image/img_21.png'), name: '锐捷行为管理' },
{ img: require('@/assets/image/img_21.png'), name: 'Uac 6000-e50' }
],
fourthListWeb: [
{ img: require('@/assets/image/img_22.png'), name: '华为（waf系列）' },
{ img: require('@/assets/image/img_23.png'), name: '安恒-WAF-150AG' },
{ img: require('@/assets/image/img_24.png'), name: '360（waf系列）' },
{ img: require('@/assets/image/img_25.png'), name: '天融信堡垒机器(yzh)' },
{ img: require('@/assets/image/img_25.png'), name: '天融信waf(yzh)' },
{ img: require('@/assets/image/img_25.png'), name: '天融信堡垒机器' }
],
fifthList: [
{ img: require('@/assets/image/img_4.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_4.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_4.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_4.png'), name: 'Agent Windows' }
{ img: require('@/assets/image/img_4.png'), name: 'ESX Server' },
{ img: require('@/assets/image/img_4.png'), name: ' 硬件监控' },
{ img: require('@/assets/image/img_4.png'), name: 'vCenter Server' },
{ img: require('@/assets/image/img_4.png'), name: 'ESXI Server' },
{ img: require('@/assets/image/img_4.png'), name: 'VMware(定制)' }
],
fifthListMic: [
{ img: require('@/assets/image/img.png'), name: ' Hyper-V' }
],
fifthListXen: [
{ img: require('@/assets/image/img_26.png'), name: ' Xen Server' }
],
fifthListIBM: [
{ img: require('@/assets/image/img_6.png'), name: 'IBM HMC' },
{ img: require('@/assets/image/img_6.png'), name: 'IBM HMC API' }
],
sixthList: [
{ img: require('@/assets/image/img_5.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_5.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_5.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img_5.png'), name: 'Agent Windows' }
{ img: require('@/assets/image/img_5.png'), name: '科士达UPS(YMK33)' },
{ img: require('@/assets/image/img_5.png'), name: '科士达 EP20 UPS' },
{ img: require('@/assets/image/img_5.png'), name: '科士达 EP20 UPS' }
],
sixthListCSTC: [
{ img: require('@/assets/image/img_5.png'), name: 'CSTC-UPS' }
],
sixthListCurrency: [
{ img: require('@/assets/image/img_5.png'), name: 'UPS' }
],
sixthListAPC: [
{ img: require('@/assets/image/img_5.png'), name: 'APC(APC)' },
{ img: require('@/assets/image/img_5.png'), name: 'APC(2200 RM)UPS' },
{ img: require('@/assets/image/img_5.png'), name: 'APC(GALAXY)UPS' }
],
sevenList: [
{ img: require('@/assets/image/img.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img.png'), name: 'Agent Windows' },
{ img: require('@/assets/image/img.png'), name: 'Agent Windows' }
{ img: require('@/assets/image/img_27.png'), name: 'Ping' },
{ img: require('@/assets/image/img_28.png'), name: 'Port' }
],
sevenListPassive: [
{ img: require('@/assets/image/img_29.png'), name: '被动式设备监测' }
],
sevenListCustom: [
{ img: require('@/assets/image/img_30.png'), name: 'Xml自定义监测' },
{ img: require('@/assets/image/img_30.png'), name: '对监测点的统计运算' }
],
sevenListSky: [
{ img: require('@/assets/image/img_31.png'), name: 'x-sky存储池' },
{ img: require('@/assets/image/img_31.png'), name: 'x-sky服务器' },
{ img: require('@/assets/image/img_31.png'), name: 'x-sky硬盘' },
{ img: require('@/assets/image/img_31.png'), name: 'x-sky缓存分区' },
{ img: require('@/assets/image/img_31.png'), name: 'x-sky块存储卷' }
],
serchForm: {
CONNAMECN: ''
......@@ -241,7 +581,8 @@ export default {
closeAddFormDialog() {
this.addEqFormDialog = false
},
addEquipmentForm() {
addEquipmentForm(type) {
this.formType = type
this.addEqFormDialog = true
},
handleClick() {
......
src/views/IntegratedMonitor/equipment.vue
View file @ 8fe25c01
<template>
<div id="container_max" class="monitor">
<div class="mointorHead">
<span>监测总数:
<span class="equipmentCount" @click="toMonitorPage">104</span>设备的
<span class="MonitorPointCount" @click="toMonitorPage">2142</span>个监测点</span>
<!-- <el-form inline label-width="auto" label-position="right">-->
<!-- <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" />-->
<!-- <el-input v-model.trim="serchForm.CONNAMECN" class="searchInput" clearable placeholder="请输入关键字" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<el-form inline label-width="auto" label-position="right">
<el-form-item v-if="showList === false" class="headSearch" label=" ">
<el-input v-model.trim="serchForm.CONNAMECN" clearable placeholder="请输入关键字" />
</el-form-item>
<el-button type="primary" size="mini" class="headBtn">查询</el-button>
</el-form>
<el-link v-if="showList" class="backClass" type="primary" @click.stop="handleGoback">返回</el-link>
<div>
<el-button type="primary" size="mini" class="headBtn" @click="handleToRecovery">回收站</el-button>
<el-button type="primary" size="mini" class="headBtn" @click="refresh">刷新</el-button>
<el-button v-if="!fullscreen" id="fullscreen_btn" type="primary" size="mini" class="headBtn">全屏</el-button>
<el-button v-if="fullscreen" id="fullscreen_btn2" type="primary" size="mini" class="headBtn">取消全屏</el-button>
</div>
</div>
<el-divider />
<div class="mointorBody">
<div style="display: flex;justify-content: space-between;padding-top: 5px;padding-bottom: 10px">
<div style="font-weight: bold">设备管理列表</div>
<div style="display: flex">
<div>
<span><span style="color: #333333">监测总数:</span>
<span class="equipmentCount" @click="toMonitorPage">104</span><span style="color: #333333">设备的</span>
<span class="MonitorPointCount" @click="toMonitorPage">2142</span><span style="color: #333333">个监测点</span></span>
</div>
<div style="display: flex">
<div id="count1" class="blockDiv" onclick="handleShowList(1)">
<span class="st-square" style="background-color: #3db58d;" />
......@@ -26,20 +53,8 @@
<span class="blockCount">1</span>
</div>
</div>
<el-form inline label-width="auto" label-position="right">
<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" />
<el-input v-model.trim="serchForm.CONNAMECN" class="searchInput" clearable placeholder="请输入关键字" />
</el-form-item>
</el-form>
<el-link v-if="showList" class="backClass" type="primary" @click.stop="handleGoback">返回</el-link>
<div>
<el-button type="button" size="mini" class="headBtn" @click="handleToRecovery">回收站</el-button>
<el-button type="button" size="mini" class="headBtn" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" type="button" size="mini" class="headBtn">全屏</el-button>
</div>
</div>
<div class="mointorBody">
<el-table
v-if="showList === true"
:data="countDataList"
......@@ -140,6 +155,7 @@ export default {
name: 'Equipment',
data() {
return {
fullscreen: false,
prohibitForm: {
starTime: '',
timeLength: ''
......@@ -264,9 +280,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
})// 实现模块全屏
},
handleGoback() {
......@@ -323,7 +367,34 @@ export default {
}
}
.monitor{
padding: 10px;
.blockDiv{
margin: 0 15px;
.blockCount{
cursor: pointer;
color: #3c8dbc;
}
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
.equipmentCount{
color: #72afd2;
cursor: pointer;
}
.MonitorPointCount{
color: #eb5d5d;
cursor: pointer;
}
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.caretDown{
display: inline-block;
width: 0;
......@@ -335,6 +406,7 @@ export default {
border-left: 4px solid transparent;
}
.mointorBody{
padding: 10px 10px 0 10px;
.name-icon{
width: 20px;
height: 20px;
......@@ -357,22 +429,20 @@ export default {
}
}
.mointorHead{
padding-top: 10px;
background-color: #edeef3 !important;
padding: 10px 10px 0 10px;
line-height: 32px;
display: flex;
justify-content: space-between;
padding-left: 15px;
.headBtn{
height: 24px;
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 5px;
color: #444;
border-color: #ddd;
}
//.headBtn{
// height: 24px;
// border-radius: 4px;
// line-height: 22px;
// font-size: 12px;
// padding: 0 10px;
// margin: 5px;
// color: #444;
// border-color: #ddd;
//}
.headSearch{
.searchInput{
border: 1px solid #cccccc;
......@@ -386,28 +456,6 @@ export default {
display: flex;
}
}
.blockDiv{
margin: 0 15px;
.blockCount{
cursor: pointer;
color: #3c8dbc;
}
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
.equipmentCount{
color: #72afd2;
cursor: pointer;
}
.MonitorPointCount{
color: #eb5d5d;
cursor: pointer;
}
}
}
</style>
src/views/IntegratedMonitor/viewExhibition/logicalGroup.vue
View file @ 8fe25c01
......@@ -2,10 +2,12 @@
<div id="container_max" class="logicalClass">
<div class="logicalHead">
<div class="logicalBtns">
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</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="logicalBody">
<el-table
:data="dataList"
......@@ -181,6 +183,7 @@ export default {
name: 'LogicalGroup',
data() {
return {
fullscreen: false,
dataTree: [{
id: 1,
icon: require('@/assets/image/shebei.png'),
......@@ -229,25 +232,25 @@ export default {
children: [{
id: 111,
icon: require('@/assets/image/shebei2-zhengchang.png'),
label: '三级 1-1-1'
label: '智盘服务器10.1.1.50'
}, {
id: 112,
icon: require('@/assets/image/shebei2-zhengchang.png'),
label: '三级 1-1-2'
label: '127.0.0.1'
}]
},
{
id: 12,
icon: require('@/assets/image/shebei9-weixian.png'),
label: '虚拟化平台',
label: '虚拟设备（默认每个设备支持5个监测点）',
children: [{
id: 121,
icon: require('@/assets/image/shebei2-guzhang.png'),
label: '三级 1-1-1'
label: 'ping'
}, {
id: 122,
icon: require('@/assets/image/shebei2-guzhang.png'),
label: '三级 1-1-2'
label: 'url'
}]
}]
}],
......@@ -353,9 +356,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
})// 实现模块全屏
}
}
......@@ -364,6 +395,12 @@ export default {
<style lang="scss">
.logicalClass{
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.el-input__inner{
padding: 0 0 0 9px;
}
......@@ -371,6 +408,7 @@ export default {
padding: 5px 0;
}
.logicalBody{
padding: 10px;
.name-icon{
width: 20px;
height: 20px;
......@@ -388,8 +426,8 @@ export default {
.logicalHead{
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;
.logicalBtns{
float: right;
.headBtn{
......
src/views/IntegratedMonitor/viewExhibition/monitorView.vue
View file @ 8fe25c01
<template>
<div class="monitorView">
<div id="container_max" class="monitorView">
<div class="warnHead">
<el-form ref="searchForm" :inline="true" label-width="auto" :model="searchForm">
<el-form-item label="设备标题:">
<el-select
v-model="searchForm.title"
>
<el-option value="名称" label="名称" />
<el-option value="ip地址" label="ip地址" />
</el-select>
</el-form-item>
<el-form-item label="状态:">
<el-select
v-model="searchForm.type"
>
<el-option value="故障" label="故障" />
<el-option value="危险" label="危险" />
<el-option value="正常" label="正常" />
</el-select>
</el-form-item>
<el-button type="primary">查询</el-button>
</el-form>
<div class="warnBtns">
<el-button class="headBtn" @click="handleAdd">添加</el-button>
<el-button class="headBtn" @click="handleAdd">修改</el-button>
<el-button class="headBtn">删除</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="handleAdd">修改</el-button>
<el-button type="primary">删除</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="monitorViewBody">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="设备视图" name="first">
......@@ -54,27 +76,8 @@
</el-table>
</el-tab-pane>
<el-tab-pane name="searchBtn">
<span slot="label">
<el-form ref="searchForm" :inline="true" label-width="auto" :model="searchForm">
<el-form-item label="设备标题:">
<el-select
v-model="searchForm.title"
>
<el-option value="名称" label="名称" />
<el-option value="ip地址" label="ip地址" />
</el-select>
</el-form-item>
<el-form-item label="状态:">
<el-select
v-model="searchForm.type"
>
<el-option value="故障" label="故障" />
<el-option value="危险" label="危险" />
<el-option value="正常" label="正常" />
</el-select>
</el-form-item>
</el-form>
</span>
<!-- <span slot="label">-->
<!-- </span>-->
</el-tab-pane>
</el-tabs>
</div>
......@@ -111,6 +114,7 @@ export default {
name: 'MonitorView',
data() {
return {
fullscreen: false,
searchForm: {
title: '',
type: ''
......@@ -188,9 +192,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() {
......@@ -208,6 +240,12 @@ export default {
<style lang="scss">
.monitorView{
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.name-icon{
width: 20px;
height: 20px;
......@@ -242,10 +280,12 @@ export default {
}
}
.warnHead{
display: flex;
justify-content: space-between;
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{
......
src/views/IntegratedMonitor/viewExhibition/stateStatistics.vue
View file @ 8fe25c01
<template>
<div class="stateModule">
<div id="container_max" class="stateModule">
<div class="warnHead">
<div class="warnBtns">
<el-button class="headBtn" @click="handleAdd">添加</el-button>
<el-button class="headBtn" @click="handleAdd">修改</el-button>
<el-button class="headBtn">删除</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="handleAdd">修改</el-button>
<el-button type="primary">删除</el-button>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button type="primary" v-if="!fullscreen" id="fullscreen_btn" >全屏</el-button>
<el-button type="primary" v-if="fullscreen" id="fullscreen_btn2" >取消全屏</el-button>
</div>
</div>
<el-divider />
<div style="padding: 15px 40px 15px;">
<div class="bar-header">
<span class="header-pre" />
......@@ -153,6 +155,7 @@ export default {
name: 'StateStatistics',
data() {
return {
fullscreen: false,
data: [{
id: 1,
label: '本机容器',
......@@ -389,9 +392,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() {
......@@ -409,6 +440,12 @@ export default {
<style lang="scss">
.stateModule{
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.columLabel{
padding: 8px;
}
......@@ -426,8 +463,8 @@ export default {
.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{
......
src/views/IntegratedMonitor/warning/warningSetup.vue
View file @ 8fe25c01
......@@ -2,14 +2,16 @@
<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">删除</el-button>
<el-button class="headBtn">禁止</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">删除</el-button>
<el-button type="primary">禁止</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>
<el-link type="primary" @click="addWarn">新增告警</el-link>
......@@ -165,6 +167,7 @@ export default {
name: 'WarningSetup',
data() {
return {
fullscreen: false,
data: [{
id: 1,
icon: require('@/assets/image/shebei.png'),
......@@ -176,11 +179,11 @@ export default {
children: [{
id: 111,
icon: require('@/assets/image/shebei2-zhengchang.png'),
label: '三级 1-1-1'
label: '智盘服务器10.1.1.50'
}, {
id: 112,
icon: require('@/assets/image/shebei2-zhengchang.png'),
label: '三级 1-1-2'
label: '127.0.0.1'
}]
},
{
......@@ -190,11 +193,11 @@ export default {
children: [{
id: 121,
icon: require('@/assets/image/shebei2-guzhang.png'),
label: '三级 1-1-1'
label: 'ping'
}, {
id: 122,
icon: require('@/assets/image/shebei2-guzhang.png'),
label: '三级 1-1-2'
label: 'url'
}]
}]
}],
......@@ -255,9 +258,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
})// 实现模块全屏
},
closeAddDialog() {
......@@ -301,6 +332,12 @@ export default {
<style lang="scss">
.warnModule{
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.strategyRow{
padding: 5px 0;
}
......@@ -331,8 +368,8 @@ export default {
.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{
......
src/views/assetManagement/assetList.vue
View file @ 8fe25c01
......@@ -3,13 +3,14 @@
<div class="assetListHead">
<div class="assetListTitle">资产清单</div>
<div class="warnBtns">
<el-button class="headBtn" @click="addAsset">新增</el-button>
<el-button class="headBtn" @click="deleteRow">删除</el-button>
<el-button class="headBtn">更多</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
<el-button type="primary" @click="addAsset">新增</el-button>
<el-button type="primary" @click="deleteRow">删除</el-button>
<el-button type="primary">更多</el-button>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" type="primary">全屏</el-button>
</div>
</div>
<el-divider />
<div class="assetListBody">
<el-row :gutter="12">
<el-col :span="6">
......@@ -287,11 +288,17 @@ export default {
<style lang="scss">
.assetListMoudle{
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.assetListHead{
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;
.assetListTitle{
float: left;
font-size: 24px;
......
src/views/assetManagement/cleanUpScrap/index.vue 0 → 100644
View file @ 8fe25c01
<template>
<div id="container_max" class="cleanUpModule">
<div class="cleanUpHead">
<span style="font-size:24px;margin-right: 10px ">资产清理报废</span>
<div class="cleanUpBtns">
<el-button class="headBtn" @click="addCleanUp">新增</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="cleanUpBody">
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column label="报废单号">
<template slot-scope="scope">
<el-link @click="queryCleanUp(scope.row)">{{scope.row.cleanUpId}}</el-link>
</template>
</el-table-column>
<el-table-column label="资产名称" prop="name" show-overflow-tooltip />
<el-table-column label="资产分类" prop="assetType" show-overflow-tooltip />
<el-table-column label="状态" prop="type" show-overflow-tooltip width="50"/>
<el-table-column label="登记时间" prop="registerTime" show-overflow-tooltip />
<el-table-column label="完成时间" prop="finishTime" show-overflow-tooltip />
<el-table-column label="变更说明" prop="changeIllustrate" show-overflow-tooltip />
<el-table-column label="处理人" prop="doPerson" show-overflow-tooltip width="80"/>
<el-table-column label="操作" width="50">
<template slot-scope="scope">
<el-link @click="finishRow(scope.row)">完成</el-link>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog class="cleanUpClass" width="50%" title="新增资产报废单" :visible.sync="addAssetDialog">
<el-form ref="cleanUpForm" label-width="auto" :model="cleanUpForm">
<span>基本信息</span>
<el-divider></el-divider>
<el-form-item label="报废单号：">
<el-input
v-model="cleanUpForm.inputCleanUpNum"
:disabled="true">
</el-input>
</el-form-item>
<el-form-item label="登记时间：">
<div class="pickBody">
<el-date-picker
v-model="cleanUpForm.doTime"
type="date"
placeholder="选择日期"
style="width: 100%">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="处理人：">
<el-input
v-model="cleanUpForm.inputFinishPer">
</el-input>
</el-form-item>
<el-form-item label="提交人：">
<el-input
v-model="cleanUpForm.submitPer">
</el-input>
</el-form-item>
<el-form-item label="报废说明：">
<el-input
type="textarea"
:rows="2"
v-model="cleanUpForm.inputCleanUpMen">
</el-input>
</el-form-item>
<span>
<el-button type="primary" @click="chooseAssetDialog">选择资产</el-button>
<el-button @click="deleteAssetTab(tempTableData1.map(i => i.id))">删除</el-button>
</span>
<el-divider></el-divider>
<el-table
ref="multipleTable"
:data="tableData1"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange1">
<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>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeAssetDialog">保存</el-button>
<el-button @click="closeAssetDialog">放弃</el-button>
</span>
</el-dialog>
<el-dialog class="cleanUpClass1" width="50%" title="基本信息" :visible.sync="nomalMessDialog">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="用户管理" name="first">
<el-form ref="cleanUpForm1" label-width="auto" :model="cleanUpForm1">
<el-form-item label="报废单号：">
{{cleanUpForm1.inputCleanUpNum}}
</el-form-item>
<el-form-item label="登记时间：">
{{cleanUpForm1.doTime}}
</el-form-item>
<el-form-item label="处理人：">
{{cleanUpForm1.inputFinishPer}}
</el-form-item>
<el-form-item label="提交人：">
{{cleanUpForm1.submitPer}}
</el-form-item>
<el-form-item label="报废说明：">
{{cleanUpForm1.inputCleanUpMen}}
</el-form-item>
<el-divider></el-divider>
<el-table
ref="multipleTable"
:data="tableData2"
tooltip-effect="dark"
style="width: 100%">
<el-table-column
prop="assetID"
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>
</el-form>
</el-tab-pane>
</el-tabs>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeAssetDialog1">确认</el-button>
<el-button @click="closeAssetDialog1">取消</el-button>
</span>
</el-dialog>
<el-dialog class="cleanUpClass2" width="50%" title="选择资产" :visible.sync="chooseAsset">
<el-row>
<el-col :span="7" style="border-right: 2px solid #DCDFE6">
<el-tabs >
<el-tab-pane label="资产类别">
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false"></el-tree>
</el-tab-pane>
</el-tabs>
</el-col>
<el-col :span="17">
<el-table
:data="tableData3"
border
style="width: 100%;padding-top: 20px"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column label="资产名称" prop="assetName" show-overflow-tooltip />
<el-table-column label="资产编号" prop="assetNum" show-overflow-tooltip />
<el-table-column label="状态" prop="assetType" show-overflow-tooltip width="50"/>
</el-table>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveAssetDialog2">保存</el-button>
<el-button @click="closeAssetDialog2">放弃</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
import moment from 'moment'
export default {
name: 'Index',
data() {
return {
data: [
{
id: 1,
label: '服务器'
}, {
id: 2,
label: '网络'
}, {
id: 3,
label: '测试资产',
children: [
{
id: 31,
label: '二级3-1',
children: [
{
id: 311,
label: '三级3-1-1'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
},
activeName: 'first',
tempAssetClassify: '',
tableData1: [
{
assetNum: '1',
assetName: '测试资产1',
assetClassify: '服务器',
assetType: '空闲'
}
],
tableData2: [
{
assetID: '1',
assetName: '测试资产1',
assetClassify: '服务器',
assetType: '空闲'
}
],
tableData3: [
{
assetName: '',
assetNum: '',
assetClassify: '',
assetType: ''
}
],
tableData: [
{
cleanUpId: 'qj-123456',
name: '测试资产',
assetType: 'test',
type: '完成',
registerTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss'),
finishTime: '',
changeIllustrate: '',
doPerson: '张三'
}
],
tempData: [
{
assetName: 'test',
assetNum: 'qj-12345',
assetType: '在用'
}, {
assetName: 'acd',
assetNum: 'zxw-12345',
assetType: '在用'
}, {
assetName: 'dvb',
assetNum: 'zzz-12345',
assetType: '在用'
}
],
tempData1: [
{
assetName: 'test',
assetNum: 'qj-12345',
assetType: '在用'
}, {
assetName: 'acd',
assetNum: 'zxw-12345',
assetType: '空闲'
}, {
assetName: 'dvb',
assetNum: 'zzz-12345',
assetType: '在用'
}, {
assetName: 'ghj',
assetNum: 'ldw-12345',
assetType: '空闲'
}, {
assetName: 'vbn',
assetNum: 'zrt-12345',
assetType: '空闲'
}, {
assetName: 'ccv',
assetNum: 'zsz-123d5',
assetType: '在用'
}
],
tempData2: [
{
assetName: '4td',
assetNum: 'qj-12345',
assetType: '在用'
}, {
assetName: 'gds',
assetNum: 'zxw-12345',
assetType: '在用'
}, {
assetName: 'dvb',
assetNum: 'wqd-32522',
assetType: '在用'
}, {
assetName: '4td',
assetNum: 'qdf-467754',
assetType: '在用'
}
],
tempTableData: [],
tempTableData1: [],
addAssetDialog: false,
nomalMessDialog: false,
chooseAsset: false,
cleanUpForm: {
inputCleanUpNum: 'qj-1111111',
doTime: '',
inputFinishPer: '',
submitPer: '',
inputCleanUpMen: ''
},
cleanUpForm1: {
inputCleanUpNum: 'qj-1111111',
doTime: '',
inputFinishPer: '',
submitPer: '',
inputCleanUpMen: ''
}
}
},
created() {
},
mounted() {
if (this.$route.query.type === '1') {
this.addWarnDialog = true
}
this.handleExpand() // 全屏
},
methods: {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
addCleanUp() {
this.tableData1 = []
this.addAssetDialog = true
},
closeAssetDialog() {
this.addAssetDialog = false
},
closeAssetDialog1() {
this.nomalMessDialog = false
},
queryCleanUp() {
this.nomalMessDialog = true
},
finishRow() {
this.$confirm('是否处理完成该资产？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
chooseAssetDialog() {
this.tableData3 = [
{
assetName: '',
assetNum: '',
assetClassify: '',
assetType: ''
}
]
this.chooseAsset = true
},
closeAssetDialog2() {
this.chooseAsset = false
},
saveAssetDialog2() {
this.chooseAsset = false
this.tableData1 = this.tempTableData
},
deleteAssetTab(idArr) {
this.tableData1 = this.tableData1.filter(i => !idArr.includes(i.id))
},
handleNodeClick(val) {
console.log(val)
this.tempAssetClassify = val.label
if (val.id === 31) {
this.tableData3 = this.tempData
} else if (val.id === 1) {
this.tableData3 = this.tempData1
} else if (val.id === 2) {
this.tableData3 = this.tempData2
} else {
this.tableData3 = []
}
},
handleSelectionChange(val) {
console.log(val)
val.forEach((ele, index) => {
ele.assetClassify = this.tempAssetClassify
ele.id = index
})
this.tempTableData = val
},
handleSelectionChange1(val) {
console.log(val)
this.tempTableData1 = val
}
}
}
</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>
src/views/assetManagement/propertyAssessment/index.vue 0 → 100644
View file @ 8fe25c01
<template>
<div id="container_max" class="cleanUpModule">
<div class="cleanUpHead">
<span style="font-size:24px;margin-right: 10px ">资产盘点</span>
<div class="cleanUpBtns">
<el-button class="headBtn" @click="addCleanUp">新增</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="cleanUpBody">
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column label="盘点单号">
<template slot-scope="scope">
<el-link @click="queryCleanUp(scope.row)">{{scope.row.propertyId}}</el-link>
</template>
</el-table-column>
<el-table-column label="盘点单名称" prop="propertyName" show-overflow-tooltip />
<el-table-column label="盘点数量" prop="propertyNum" show-overflow-tooltip />
<el-table-column label="状态" prop="type" show-overflow-tooltip width="50"/>
<el-table-column label="创建时间" prop="registerTime" show-overflow-tooltip />
<el-table-column label="完成时间" prop="finishTime" show-overflow-tooltip />
<el-table-column label="盘点说明" prop="propertyIllustrate" show-overflow-tooltip />
<el-table-column label="处理人" prop="doPerson" show-overflow-tooltip width="80"/>
<el-table-column label="操作" width="50">
<template slot-scope="scope">
<el-link @click="finishRow2(scope.row)">完成</el-link>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog class="propertyClass" width="50%" title="新增资产盘点单" :visible.sync="addAssetDialog">
<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="propertyForm">
<el-form-item label="盘点单号：">
<el-input
v-model="propertyForm.inputPropertyNum"
:disabled="true">
</el-input>
</el-form-item>
<el-form-item label="盘点单名称：">
<el-input
v-model="propertyForm.inputPropertyName">
</el-input>
</el-form-item>
<el-form-item label="盘点说明：">
<el-input
type="textarea"
:rows="2"
v-model="propertyForm.inputPropertyMen">
</el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form ref="cleanUpForm" label-width="auto" :model="propertyForm">
<el-form-item label="盘点时间：">
<div class="pickBody">
<el-date-picker
v-model="propertyForm.propertyTime"
type="date"
placeholder="选择日期"
style="width: 100%">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="处理人：">
<el-input
v-model="propertyForm.inputFinishPer">
</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-form ref="cleanUpForm1" label-width="auto" :model="propertyForm1">
<el-form-item label="采购日期：">
<div class="block">
<el-date-picker
v-model="propertyForm1.value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="报废日期：">
<div class="block">
<el-date-picker
v-model="propertyForm1.value2"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</el-form-item>
</el-form>
<el-row>
<el-col :span="12">
<el-form ref="cleanUpForm1" label-width="auto" :model="propertyForm1">
<el-form-item label="资产分类：">
<el-select v-model="propertyForm1.classification" 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 v-model="propertyForm1.depart" 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="propertyForm1.usePer"
style="width: 83%">
</el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form ref="cleanUpForm1" label-width="auto" :model="propertyForm1">
<el-form-item label="所属公司：">
<el-select v-model="propertyForm1.company" placeholder="请选择">
<el-option
v-for="item in assetList3"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="拥有者：">
<el-input
v-model="propertyForm1.ownPer"
style="width: 83%">
</el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeAssetDialog">提交</el-button>
</span>
</el-dialog>
<el-dialog
title="资产盘点单"
:visible.sync="nomalMessDialog"
width="50%"
class="propertyClass">
<span>全部：{{3}} 未盘：{{1}} 已盘：{{1}} 盘盈：{{1}} 盘亏：{{1}}</span>
<el-button style="float: right">更多+</el-button>
<el-table
:data="tableData2"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<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="propertyType" show-overflow-tooltip />
<el-table-column label="盘点备注" prop="propertyRemarks" show-overflow-tooltip />
<el-table-column label="操作" width="50">
<template slot-scope="scope">
<el-link @click="finishRow(scope.row)">删除</el-link>
<el-link @click="finishRow1(scope.row)">已盘</el-link>
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="addAssetDialog1 = true">新增盘盈</el-button>
</span>
</el-dialog>
<el-dialog class="addAssetClass" width="60%" title="新增资产" :visible.sync="addAssetDialog1">
<div>
<div class="header-tab">服务器</div>
<div class="card" onclick="handleShowAdd2()">
<div class="textNme">服务器</div>
</div>
</div>
<div>
<div class="header-tab">网络</div>
<div class="card">
<div class="textNme">网络</div>
</div>
</div>
<div>
<el-row :gutter="30">
<div style="padding-left: 25px!important;" class="header-tab">摄像机</div>
<el-col :span="7">
<div class="card">
<div class="textNme">摄像机</div>
</div>
</el-col>
<el-col :span="7">
<div class="card">
<div class="textNme">物联</div>
</div>
</el-col>
</el-row>
</div>
<div>
<div class="header-tab">dvr</div>
<div class="card">
<div class="textNme">dvr</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
import moment from 'moment'
export default {
name: 'Index',
data() {
return {
activeNames: ['1', '2'],
activeName: 'first',
tableData: [
{
propertyId: 'qj-123456',
propertyName: '测试资产',
propertyNum: 'test',
type: '完成',
registerTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss'),
finishTime: '',
propertyIllustrate: '',
doPerson: '张三'
}
],
tableData2: [
{
assetNum: 'zxw-12345',
assetName: '测试资产1',
assetClassify: '测试',
propertyType: '已盘',
propertyRemarks: ''
}
],
addAssetDialog: false,
nomalMessDialog: false,
chooseAsset: false,
addAssetDialog1: false,
propertyForm: {
inputPropertyNum: 'qj-1111111',
inputPropertyName: '',
inputPropertyMen: '',
inputFinishPer: '',
propertyTime: ''
},
propertyForm1: {
value1: '',
value2: '',
usePer: '',
ownPer: '',
classification: 1,
depart: 1,
company: 1
},
assetList1: [
{
value: 1,
label: '全部'
},
{
value: 2,
label: '服务器'
},
{
value: 3,
label: '网络'
},
{
value: 4,
label: '摄影机'
}
],
assetList2: [
{
value: 1,
label: '默认部门'
}
],
assetList3: [
{
value: 1,
label: '默认公司'
}
]
}
},
created() {
},
mounted() {
window.handleShowAdd2 = this.handleShowAdd2
this.handleExpand() // 全屏
},
methods: {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
addCleanUp() {
this.addAssetDialog = true
},
closeAssetDialog() {
this.addAssetDialog = false
},
closeAssetDialog1() {
this.nomalMessDialog = false
},
queryCleanUp() {
this.nomalMessDialog = true
},
finishRow() {
this.$confirm('是否删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
finishRow1() {
this.$confirm('是否盘点已完成？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
finishRow2() {
this.$confirm('是否已完成？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
handleShowAdd2() {
this.$router.push({
path: '/assetManagement/addAsset'
})
}
}
}
</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;
}
.addAssetClass{
.header-tab{
padding: 10px;
}
.card{
cursor: pointer;
width: 200px;
height: 80px;
border: 1px solid #ccc;
display: inline-block;
margin: 0 10px;
padding: 15px 0;
.textNme{
display: inline-block;
margin-left: 50px;
margin-top: 15px;
}
}
}
}
</style>
src/views/overView/dashboard/equipment.vue
View file @ 8fe25c01
......@@ -3,7 +3,7 @@
<el-row :gutter="12">
<el-col :span="6">
<div class="equipmentLeft">
<div style="height: 50px"></div>
<div style="height: 50px" />
<el-card class="box-card">
<div style="display: flex;margin-top: 10px">
<el-divider direction="vertical" />
......@@ -106,7 +106,8 @@
<el-col :span="6">
<div class="equipmentRight">
<div style="display: flex;justify-content: end; height: 50px;padding-right: 5px">
<img id="fullscreen_btn" style=" cursor:pointer;height: 35px;width: 35px" :src="expandPage">
<img v-if="!fullscreen" id="fullscreen_btn" style=" cursor:pointer;height: 35px;width: 35px" :src="expandPage">
<img v-if="fullscreen" id="fullscreen_btn2" style=" cursor:pointer;height: 35px;width: 35px" :src="expandPageShrink">
<div style="font-size: 30px;padding-left: 20px; padding-right: 20px">{{ nowDate }}</div>
<div>
<div style="font-size: 20px">{{ week }}</div>
......@@ -159,6 +160,7 @@ export default {
name: 'Equipment',
data() {
return {
fullscreen: false,
isFullscrenn: false,
expandPage: require('@/assets/image/expand.png'),
nowDate: '',
......@@ -173,6 +175,7 @@ export default {
{ label: '智盘服务器-10.1.154', time: '2019-12-09' }
],
equipmentIcon: require('@/assets/image/shebeizongshu.png'),
expandPageShrink: require('@/assets/image/exitFullBtn.png'),
monitorIcon: require('@/assets/image/jiankongdianshu.png'),
warnIcon: require('@/assets/image/gaojingshu.png')
}
......@@ -270,9 +273,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
})// 实现模块全屏
},
getTime() {
......@@ -349,7 +380,7 @@ export default {
grid: {
top: '3%',
left: '3%',
right: '4%',
right: '8%',
containLabel: true
},
xAxis: {
......@@ -427,7 +458,7 @@ export default {
grid: {
top: '3%',
left: '3%',
right: '4%',
right: '8%',
containLabel: true
},
xAxis: {
......
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