Skip to content

I
IT-monitor
Commit 1025eb90 authored by 11528's avatar 11528
Browse files
Options

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

parents 30d414e7 1f068a35
Hide whitespace changes
Inline Side-by-side
Showing with 1199 additions and 31 deletions
src/layout/components/TagsView/index.vue
View file @ 1025eb90
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
@click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''" @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
@contextmenu.prevent.native="openMenu(tag,$event)" @contextmenu.prevent.native="openMenu(tag,$event)"
> >
<span style="color: #168DE8">{{ tag.title }}</span> <span>{{ tag.title }}</span>
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" /> <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link> </router-link>
</scroll-pane> </scroll-pane>
...@@ -242,7 +242,8 @@ export default { ...@@ -242,7 +242,8 @@ export default {
} }
&.active { &.active {
background-color: #fff; background-color: #fff;
color: $color-theme; //color: $color-theme;
color: #168DE8;
border-color: transparent; border-color: transparent;
//&::before { //&::before {
// content: ''; // content: '';
......
src/layout/components/header.vue
View file @ 1025eb90
...@@ -6,25 +6,25 @@ ...@@ -6,25 +6,25 @@
class="hamburger-container" class="hamburger-container"
@toggleClick="toggleSideBar" @toggleClick="toggleSideBar"
/> />
<el-dropdown <!-- <el-dropdown-->
class="change-sys" <!-- class="change-sys"-->
@command="handleCommand" <!-- @command="handleCommand"-->
> <!-- >-->
<!-- <span class="el-dropdown-link">--> <!-- <span class="el-dropdown-link">-->
<!-- 业务中台<i class="el-icon-arrow-down el-icon&#45;&#45;right" />--> <!-- 业务中台<i class="el-icon-arrow-down el-icon&#45;&#45;right" />-->
<!-- </span>--> <!-- </span>-->
<el-dropdown-menu <!-- <el-dropdown-menu-->
slot="dropdown" <!-- slot="dropdown"-->
> <!-- >-->
<el-dropdown-item <!-- <el-dropdown-item-->
v-for="(item) in appList" <!-- v-for="(item) in appList"-->
:key="item.businessId" <!-- :key="item.businessId"-->
:command="specialTag !== '1' ? item.pcUrl : ''" <!-- :command="specialTag !== '1' ? item.pcUrl : ''"-->
> <!-- >-->
{{ item.system }} <!-- {{ item.system }}-->
</el-dropdown-item> <!-- </el-dropdown-item>-->
</el-dropdown-menu> <!-- </el-dropdown-menu>-->
</el-dropdown> <!-- </el-dropdown>-->
</div> </div>
<div class="right-menu"> <div class="right-menu">
<!-- <i class="el-icon-info" />--> <!-- <i class="el-icon-info" />-->
......
src/views/IntegratedMonitor/viewExhibition/logicalGroup.vue
View file @ 1025eb90
...@@ -14,18 +14,163 @@ ...@@ -14,18 +14,163 @@
:expand-row-keys="expand" :expand-row-keys="expand"
: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>
<template slot-scope="scope">
<img v-if="scope.row.noIcon !== '1'" :src="scope.row.icon" class="name-icon">
<span v-if="scope.row.noIcon === '1' " class="square-green" />
<span>{{ scope.row.company }}</span>
</template>
</el-table-column>
<el-table-column label="类型" prop="type" show-overflow-tooltip /> <el-table-column label="类型" prop="type" 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="addGroup">添加逻辑组</el-link> <el-link @click="addGroup">添加逻辑组</el-link>
<el-link @click="addWarn">添加告警</el-link>
<el-link @click="addObject">添加对象</el-link> <el-link @click="addObject">添加对象</el-link>
<el-link @click="updateRow">编辑</el-link> <el-link @click="addGroup">编辑</el-link>
<el-link @click="deleteRow">移除</el-link> <el-link @click="deleteRow">移除</el-link>
<!-- </template>--> <!-- </template>-->
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<el-dialog class="addGroup" width="50%" title="添加逻辑组" :visible.sync="addGroupDialog">
<el-form ref="addgroupForm" label-width="auto" :model="addgroupForm">
<el-form-item label="名称:">
<el-input v-model="addgroupForm.groupName" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary">保存</el-button>
<el-button type="primary" @click="closeGroupDialog">取消</el-button>
</span>
</el-dialog>
<el-dialog class="addWarnClass" width="70%" title="告警添加" :visible.sync="addWarnDialog">
<div class="ninthSteps">
<el-steps :active="stepActive" simple finish-status="success">
<el-step title="1.选定告警目标" />
<el-step title="2.选择发送策略" />
<el-step title="3.选择发送方式" />
</el-steps>
</div>
<el-form v-if="stepActive === 1" ref="addForm" style="width: 80%;height: 400px" label-width="auto" :model="addForm">
<el-form-item label=" 告警名称:">
<el-input v-model="addForm.name" />
</el-form-item>
<el-form-item label=" 选择告警范围:">
<div class="treebody">
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[1, 3]"
:default-checked-keys="[5]"
:props="defaultProps"
>
<template slot-scope="{ node, data }">
<span>
<img :src="data.icon" class="treeIcon">
<label>{{ node.label }}</label>
</span>
</template>
</el-tree>
</div>
</el-form-item>
<el-form-item label="告警描述:">
<el-input v-model="addForm.describe" />
</el-form-item>
</el-form>
<el-form v-if="stepActive === 2" ref="addForm2" style="width: 80%;height: 400px" label-width="auto" :model="addForm2">
<div class="StepTitle">常用策略</div>
<div style="padding: 20px 50px">
<div class="strategyRow">
<el-radio v-model="addForm2.radio" label="1">危险</el-radio>
<el-radio v-model="addForm2.radio" label="2">故障</el-radio>
</div>
<div class="strategyRow">
<el-radio v-model="addForm2.radio2" label="1">
<span> 当时间连续发生</span>
<el-input v-model="addForm2.value" style="width: 30px" />
<span> 次时，发送告警，再每</span>
<el-input v-model="addForm2.value2" style="width: 30px" />
</el-radio>
</div>
<div class="strategyRow">
<el-radio v-model="addForm2.radio3" label="1">
<span> 在</span>
<el-input v-model="addForm2.value3" style="width: 30px" />
<span> 分钟内，有</span>
<el-input v-model="addForm2.value4" style="width: 30px" />
<span> 次同样状态时间发送告警</span>
</el-radio>
</div>
<div class="strategyRow">
<el-radio v-model="addForm2.radio3" label="1">
<span> 事件连续发生</span>
<el-input v-model="addForm2.value5" style="width: 30px" />
<span> 次后，停止发送告警</span>
</el-radio>
</div>
<div class="strategyRow">
<el-radio v-model="addForm2.radio4" label="1">
<span> 当发过告警监测点恢复正常时发送一次告警</span>
</el-radio>
</div>
<div class="strategyRow">
<span>告警级别:</span>
<el-radio v-model="addForm2.radio5" label="1">一级告警</el-radio>
<el-radio v-model="addForm2.radio6" label="1">二级告警</el-radio>
<el-radio v-model="addForm2.radio7" label="1">三级告警</el-radio>
<el-radio v-model="addForm2.radio8" label="1">四级告警</el-radio>
<el-radio v-model="addForm2.radio9" label="1">五级告警</el-radio>
</div>
</div>
</el-form>
<el-form v-if="stepActive === 3" ref="addForm3" style="width: 80%;height: 400px" label-width="auto" :model="addForm3">
<div style="padding: 20px 50px">
<div class="strategyRow">
<el-radio v-model="addForm3.radio" label="1">邮件</el-radio>
<el-radio v-model="addForm3.radio" label="2">短消息</el-radio>
<el-radio v-model="addForm3.radio" label="2">声音</el-radio>
<el-radio v-model="addForm3.radio" label="2">脚本</el-radio>
<el-radio v-model="addForm3.radio" label="2">工单</el-radio>
<el-radio v-model="addForm3.radio" label="2">企业微信</el-radio>
<el-radio v-model="addForm3.radio" label="2">钉钉</el-radio>
</div>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button v-if="stepActive !== 3" type="primary" @click="nextStep">下一步</el-button>
<el-button v-if="stepActive === 3" type="primary" @click="closeNextStep">完成</el-button>
<el-button @click="closeAddDialog">取消</el-button>
</span>
</el-dialog>
<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-item label=" ">
<div class="treebody">
<el-tree
:data="dataTree"
show-checkbox
node-key="id"
:default-expanded-keys="[1, 3]"
:default-checked-keys="[5]"
:props="defaultProps"
>
<template slot-scope="{ node, data }">
<span>
<img :src="data.icon" class="treeIcon">
<label>{{ node.label }}</label>
</span>
</template>
</el-tree>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeObjectDialog">确定</el-button>
<el-button @click="closeObjectDialog">取消</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
...@@ -36,17 +181,120 @@ export default { ...@@ -36,17 +181,120 @@ export default {
name: 'LogicalGroup', name: 'LogicalGroup',
data() { data() {
return { return {
dataTree: [{
id: 1,
icon: require('@/assets/image/shebei.png'),
label: '本机容器',
children: [{
id: 11,
icon: require('@/assets/image/shebei9-guzhang.png'),
label: '虚拟化平台',
children: [{
id: 111,
icon: require('@/assets/image/shebei2-zhengchang.png'),
label: '三级 1-1-1'
}, {
id: 112,
icon: require('@/assets/image/shebei2-zhengchang.png'),
label: '三级 1-1-2'
}]
},
{
id: 12,
icon: require('@/assets/image/shebei9-weixian.png'),
label: '虚拟设备（默认每个设备支持5个监测点）',
children: [{
id: 121,
icon: require('@/assets/image/shebei2-guzhang.png'),
label: '三级 1-1-1'
}, {
id: 122,
icon: require('@/assets/image/shebei2-guzhang.png'),
label: '三级 1-1-2'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
data: [{
id: 1,
icon: require('@/assets/image/shebei.png'),
label: '本机容器',
children: [{
id: 11,
icon: require('@/assets/image/shebei9-guzhang.png'),
label: '虚拟化平台',
children: [{
id: 111,
icon: require('@/assets/image/shebei2-zhengchang.png'),
label: '三级 1-1-1'
}, {
id: 112,
icon: require('@/assets/image/shebei2-zhengchang.png'),
label: '三级 1-1-2'
}]
},
{
id: 12,
icon: require('@/assets/image/shebei9-weixian.png'),
label: '虚拟化平台',
children: [{
id: 121,
icon: require('@/assets/image/shebei2-guzhang.png'),
label: '三级 1-1-1'
}, {
id: 122,
icon: require('@/assets/image/shebei2-guzhang.png'),
label: '三级 1-1-2'
}]
}]
}],
addForm: {
name: '',
describe: ''
},
addForm2: {
radio: '',
radio2: '',
value: '2',
value2: '2',
radio3: '',
radio4: '',
value3: '',
value4: '',
value5: '',
radio5: '',
radio6: '',
radio7: '',
radio8: '',
radio9: ''
},
addForm3: {
},
stepActive: 1,
addWarnDialog: false,
objectDialog: false,
addgroupForm: {
groupName: ''
},
addGroupDialog: false,
dataList: [ dataList: [
{ id: '1', name: '127.0.0.1', type: '容器', describe: '', { id: '1', icon: require('@/assets/image/gongsi-zhengchang.png'), company: '公司', type: '公司',
child: [ child: [
{ id: '11', name: '虚拟设备', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '', { id: '11', icon: require('@/assets/image/liantong-zhengchang.png'), company: '中国联通', type: '逻辑组',
child: [ child: [
{ id: '111', name: 'ping', ip: '', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '', { id: '111', icon: require('@/assets/image/shebei9-zhengchang.png'), company: '服务器硬件', type: '',
child: [ child: [
{ id: '1111', name: 'ping 192.168.8.20', ip: '', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '' } { id: '1111', icon: require('@/assets/image/shebei2-zhengchang.png'), company: '云打印服务器-硬件', type: '' }
] },
{ id: '112', icon: require('@/assets/image/shebei2-zhengchang.png'), company: '云打印服务器-硬件', type: '',
child: [
{ id: '1121', noIcon: '1', company: 'Power Supply -PS 2 Presence-0045', type: '' }
] } ] }
] }, ] }
{ id: '12', name: '服务器系统', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '' }
] } ] }
], ],
// 获取row的key值 // 获取row的key值
...@@ -54,7 +302,7 @@ export default { ...@@ -54,7 +302,7 @@ export default {
return row.id return row.id
}, },
// 要展开的行，数值的元素是row的key值 // 要展开的行，数值的元素是row的key值
expand: [], expand: []
} }
}, },
mounted() { mounted() {
...@@ -64,6 +312,38 @@ export default { ...@@ -64,6 +312,38 @@ export default {
created() { created() {
}, },
methods: { methods: {
closeNextStep() {
this.addWarnDialog = false
},
closeAddDialog() {
this.addWarnDialog = false
},
nextStep() {
if (this.stepActive++ > 2) this.stepActive = 1
},
closeObjectDialog() {
this.objectDialog = false
},
addObject() {
this.objectDialog = true
},
addWarn() {
this.stepActive = 1
this.addWarnDialog = true
},
closeGroupDialog() {
this.addGroupDialog = false
},
addGroup() {
this.addGroupDialog = true
},
deleteRow() {
this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
handleExpandList() { handleExpandList() {
this.expand.push(this.dataList[0].id) this.expand.push(this.dataList[0].id)
}, },
...@@ -84,6 +364,27 @@ export default { ...@@ -84,6 +364,27 @@ export default {
<style lang="scss"> <style lang="scss">
.logicalClass{ .logicalClass{
.el-input__inner{
padding: 0 0 0 9px;
}
.strategyRow{
padding: 5px 0;
}
.logicalBody{
.name-icon{
width: 20px;
height: 20px;
position: relative;
top: 5px;
}
.square-green{
background-color: #3db58d;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
.logicalHead{ .logicalHead{
height: 58px; height: 58px;
padding: 15px 20px 10px 20px; padding: 15px 20px 10px 20px;
...@@ -106,5 +407,34 @@ export default { ...@@ -106,5 +407,34 @@ export default {
} }
} }
} }
.treebody{
border: solid 1px #d7d7d7;
font-size: 12px;
padding: 6px;
height: 250px;
overflow-y: scroll;
.treeIcon{
width: 17px;
height: 17px;
}
}
.ninthSteps{
padding: 10px 30px 30px;
.el-steps--simple{
padding-left: 10px;
padding-right: 10px;
}
.el-step.is-simple:not(:last-of-type) .el-step__title{
max-width: 73%;
}
}
}
.addWarnClass{
.StepTitle{
font-size: 16px;
font-weight: bold;
color: #333333;
}
} }
</style> </style>
src/views/IntegratedMonitor/warning/warningSetup.vue
View file @ 1025eb90
...@@ -186,7 +186,7 @@ export default { ...@@ -186,7 +186,7 @@ export default {
{ {
id: 12, id: 12,
icon: require('@/assets/image/shebei9-weixian.png'), icon: require('@/assets/image/shebei9-weixian.png'),
label: '虚拟化平台', label: '虚拟设备（默认每个设备支持5个监测点）',
children: [{ children: [{
id: 121, id: 121,
icon: require('@/assets/image/shebei2-guzhang.png'), icon: require('@/assets/image/shebei2-guzhang.png'),
...@@ -285,6 +285,7 @@ export default { ...@@ -285,6 +285,7 @@ export default {
this.addDialog = false this.addDialog = false
}, },
addWarn() { addWarn() {
this.stepActive = 1
this.addWarnDialog = true this.addWarnDialog = true
}, },
deleteRow() { deleteRow() {
......
src/views/assetManagement/addAsset.vue 0 → 100644
View file @ 1025eb90
<template>
<div class="addAssetClass">
<div class="addAssetTitle">新增资产</div>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item class="collapseTitle" title="基本信息" name="1">
<el-form ref="form" label-width="auto" :model="form">
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="资产名称:">
<el-input v-model="form.value" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="资产编码:">
<el-input v-model="form.value1" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="状态:">
<el-select
v-model="form.value2"
style="width: 100%"
>
<el-option value="未入库" label="未入库" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属公司:">
<el-select
v-model="form.value3"
style="width: 100%"
>
<el-option value="默认公司" label="默认公司" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="所属部门:">
<el-select
v-model="form.value4"
style="width: 100%"
>
<el-option value="默认部门" label="默认部门" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="拥有者:">
<el-input v-model="form.value5" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="使用者:">
<el-input v-model="form.value6" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="保修开始时间:">
<el-date-picker
style="width: 100%"
v-model="form.value7"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="保修结束时间:">
<el-date-picker
style="width: 100%"
v-model="form.value8"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="采购时间:">
<el-date-picker
style="width: 100%"
v-model="form.value8"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="配置:">
<el-input v-model="form.value9" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="序列号:">
<el-input v-model="form.value10" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-collapse-item>
<el-collapse-item title="资产属性" name="2">
<el-form ref="form" label-width="auto" :model="form">
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="品牌:">
<el-input v-model="form.value11" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="型号:">
<el-input v-model="form.value12" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="设备名称:">
<el-input v-model="form.value13" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备用途:">
<el-input v-model="form.value14" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="出厂日期:">
<el-input v-model="form.value15" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="机房:">
<el-input v-model="form.value16" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="设备U位:">
<el-input v-model="form.value17" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="业务IP地址:">
<el-input v-model="form.value18" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="管理IP地址:">
<el-input v-model="form.value19" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="操作系统及版本:">
<el-input v-model="form.value20" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-collapse-item>
<el-collapse-item title="配置属性" name="3">
<el-row :gutter="12">
<el-col :span="12">
<el-form-item label="操作系统及版本:">
<el-input v-model="form.value21" />
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default {
name: 'AddAsset',
data() {
return {
form: {
value: '',
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
value6: '',
value7: '',
value8: '',
value9: '',
value10: '',
value11: '',
value12: '',
value13: '',
value14: '',
value15: '',
value16: '',
value17: '',
value18: '',
value19: '',
value20: '',
value21: ''
},
activeNames: ['1', '2', '3']
}
},
mounted() {
},
created() {
},
methods: {
}
}
</script>
<style lang="scss">
.addAssetClass{
padding: 15px;
.addAssetTitle{
padding:0 0 20px 0 ;
font-size: 16px;
font-weight: bold;
}
.el-collapse .el-collapse-item__header{
font-weight: bold;
font-size: 15px;
color: #43C2D5;
}
}
</style>
src/views/assetManagement/assetList.vue 0 → 100644
View file @ 1025eb90
<template>
<div id="container_max" class="assetListMoudle">
<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>
</div>
</div>
<div class="assetListBody">
<el-row :gutter="12">
<el-col :span="6">
<div class="leftTop">
<span class="leftTitle">
资产类别（共有7类，178个资产）
</span>
<img :src="addIcon" class="leftImg" @click="leftAdd">
</div>
<div class="groupList">
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[1, 3]"
:default-checked-keys="[5]"
:props="defaultProps"
:expand-on-click-node="false"
>
<template slot-scope="{ node, data }">
<span style="width: 100%" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
<img :src="data.icon" class="treeIcon">
<label>{{ node.label }}</label>
<img v-show="data.show" :src="deleteIcon" class="treeIcon2" @click="deleteRow">
<img v-show="data.show" :src="updateIcon" class="treeIcon2" @click="leftAdd">
</span>
</template>
</el-tree>
</div>
</el-col>
<el-col :span="18">
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column label="资产名称" prop="name" show-overflow-tooltip>
<template slot-scope="scope">
<el-link type="primary" @click="checkDetails">{{ scope.row.name }}</el-link>
</template>
</el-table-column>
<el-table-column label="资产编号" prop="code" show-overflow-tooltip>
<template slot-scope="scope">
<el-link type="primary" @click="checkDetails">{{ scope.row.code }}</el-link>
</template>
</el-table-column>
<el-table-column label="状态" prop="flag" show-overflow-tooltip>
<template slot-scope="scope">
<el-link type="primary" @click="checkDetails">{{ scope.row.flag }}</el-link>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-link @click="updateRow(scope.row)">编辑</el-link>
<el-link @click="deleteRow(scope.row)">删除</el-link>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
/>
</el-col>
</el-row>
</div>
<el-dialog class="addAssetClass" width="60%" title="新增资产" :visible.sync="addAssetDialog">
<div>
<div class="header-tab">服务器</div>
<div class="card" onclick="handleShowAdd()">
<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>
<el-dialog class="addGroup" width="50%" title="添加分类" :visible.sync="leftAddDialog">
<el-form ref="addWarnForm" label-width="auto" :model="leftAddForm">
<el-form-item label="上级分类:">
<el-select
v-model="leftAddForm.value"
style="width: 100%"
>
<el-option value="服务器" label="服务器" />
<el-option value="网络" label="网络" />
<el-option value="摄像机" label="摄像机" />
</el-select>
</el-form-item>
<el-form-item label="资产模板:">
<el-select
v-model="leftAddForm.value2"
style="width: 100%"
>
<el-option value="服务器" label="服务器" />
<el-option value="网络设备" label="网络设备" />
</el-select>
</el-form-item>
<el-form-item label="分类名称:">
<el-input v-model="leftAddForm.value3" />
</el-form-item>
<el-form-item label="标签:">
<el-select
v-model="leftAddForm.value4"
style="width: 100%"
>
<el-option value="test1" label="test1" />
<el-option value="网络" label="网络" />
</el-select>
</el-form-item>
<el-form-item label="描述:">
<el-input v-model="leftAddForm.value5" type="textarea" :rows="2" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeLeftDialog">确定</el-button>
<el-button @click="closeLeftDialog">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'AssetList',
data() {
return {
queryParams: {
pageNum: 1,
pageSize: 10
},
total: 5,
addAssetDialog: false,
tableData: [
{ name: '计量调度平台4#应用服务器', code: 'test1-0406104022-0100', flag: '在用' },
{ name: '计量调度平台1#四线一库接口服务器', code: 'test1-0406104117-0102', flag: '在用' },
{ name: '计量调度平台1#营销接口服务器', code: 'test1-0406104301-0106', flag: '在用' },
{ name: 'ORACLE(备)', code: 'test1-0406104437-0112', flag: '在用' },
{ name: 'ORACLE(主)', code: 'test1-0406104534-0114', flag: '在用' }
],
deleteIcon: require('@/assets/image/delete.png'),
updateIcon: require('@/assets/image/edit.png'),
data: [{
id: 1,
icon: require('@/assets/image/shebei9-guzhang.png'),
label: '全部（178)',
children: [{
id: 11,
icon: require('@/assets/image/shebei9-guzhang.png'),
label: '服务器（172）'
},
{
id: 12,
icon: require('@/assets/image/shebei9-guzhang.png'),
label: '网络（3）'
},
{
id: 13,
icon: require('@/assets/image/shebei9-guzhang.png'),
label: '摄像机（3）',
children: [{
id: 131,
icon: require('@/assets/image/shebei9-guzhang.png'),
label: '物联（1）'
}]
},
{
id: 14,
icon: require('@/assets/image/shebei9-guzhang.png'),
label: 'dvr（0）'
}
]
}],
defaultProps: {
children: 'children',
label: 'label'
},
leftAddForm: {
value: '',
value2: '',
value3: '',
value4: '',
value5: ''
},
leftAddDialog: false,
addIcon: require('@/assets/image/add_btn.png')
}
},
created() {
},
mounted() {
window.handleShowAdd = this.handleShowAdd
this.handleExpand() // 全屏
},
methods: {
mouseenter(data) {
this.$set(data, 'show', true)
},
mouseleave(data) {
this.$set(data, 'show', false)
},
handleShowAdd() {
this.$router.push({
path: '/assetManagement/addAsset'
})
},
addAsset() {
this.addAssetDialog = true
},
checkDetails() {
this.$router.push({
path: '/assetManagement/assetListDetails'
})
},
updateRow() {
this.$router.push({
path: '/assetManagement/addAsset'
})
},
deleteRow() {
this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
closeLeftDialog() {
this.leftAddDialog = false
},
leftAdd() {
this.leftAddDialog = true
},
refresh() {
window.location.reload() // 刷新页面
},
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
}
}
}
</script>
<style lang="scss">
.assetListMoudle{
.assetListHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.assetListTitle{
float: left;
font-size: 24px;
font-weight: bold;
margin-left: 20px!important;
letter-spacing: 2px;
color: #333333;
}
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.assetListBody{
padding: 10px;
.leftTop{
width: 100%;
height: 41px;
background: #fff;
line-height: 41px;
border-bottom: 1px solid #dbdbdb;
border-top-left-radius: 5px;
.leftTitle{
padding-left: 15px;
font-size: 14px;
}
.leftImg{
width: 20px;
float: right;
margin: 10px;
cursor: pointer;
}
}
.groupList{
width: calc(100%);
overflow: auto;
display: inline-block;
padding-bottom: 50px;
font-size: 12px;
.treeIcon{
width: 17px;
height: 17px;
}
.treeIcon2{
margin-left: 10px;
float: right;
width: 17px;
height: 17px;
}
}
}
}
.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/assetManagement/assetListDetails.vue 0 → 100644
View file @ 1025eb90
<template>
<div class="assetListDetails">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="基本信息" name="first">
<el-form ref="firstForm" label-width="auto" :model="firstForm">
<el-row>
<el-col :span="6">
<el-form-item label="分类名称:">
<span>{{ '计量调度平台4#应用服务器' }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="资产编号:">
<span>{{ 'test1-0406104022-0100' }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="状态:">
<span>{{ '在用' }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="所属公司:">
<span>{{ '' }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="所属部门:">
<span>{{ '' }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="拥有者:">
<span>{{ '中国' }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="使用者:">
<span>{{ '北京' }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="保修开始时间:">
<span>{{ '2022-01-01' }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="保修结束时间:">
<span>{{ '2027-01-02' }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="采购时间:">
<span>{{ '2022-01-01' }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="序列号:">
<span>{{ '214239134' }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="二维码:">
<span>{{ '' }}</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="资产属性" name="second">
<el-form ref="secondForm" label-width="auto" :model="secondForm">
<el-row>
<el-col :span="6">
<el-form-item label="品牌:">
<span>{{ '浪潮' }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="型号:">
<span>{{ 'NF5270M3' }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="设备名称:">
<span>{{ '浪潮服务器' }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="设备用途:">
<span>{{ '计量调度平台4#应用服务器' }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="出厂日期:">
<span>{{ '2021-12-25' }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="机房:">
<span>{{ '北京XX' }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="设备U位:">
<span>{{ '23' }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="业务IP地址:">
<span>{{ '10.124.44.142' }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="管理IP地址:">
<span>{{ ' ' }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="采购时间:">
<span>{{ '2022-01-01' }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="操作系统及版:">
<span>{{ 'Red Hat 6.4' }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="操作系统及版本:">
<span>{{ 'Red Hat 6.4' }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="MAC地址:">
<span>{{ '' }}</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="配置属性" name="third">
配置属性
</el-tab-pane>
<el-tab-pane label="变更记录" name="fourth">
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column label="处理日期" prop="date" show-overflow-tooltip />
<el-table-column label="处理人" prop="name" show-overflow-tooltip />
<el-table-column label="处理内容" prop="content" show-overflow-tooltip />
</el-table>
</el-tab-pane>
<el-tab-pane label="维保记录" name="fifth">
维保记录
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name: 'AssetListDetails',
data() {
return {
tableData: [
{ date: '2022-5-22', name: 'test', content: '测试测试' },
{ date: '2022-5-22', name: 'test', content: '测试测试' },
{ date: '2022-5-22', name: 'test', content: '测试测试' }
],
firstForm: {
},
activeName: 'first'
}
},
created() {
},
mounted() {
},
methods: {
}
}
</script>
<style lang="scss">
.assetListDetails{
padding: 10px;
}
</style>
src/views/system/user/index.vue
View file @ 1025eb90
...@@ -615,9 +615,9 @@ export default { ...@@ -615,9 +615,9 @@ export default {
} }
this.getList() this.getList()
this.getTreeSelect() this.getTreeSelect()
this.getConfigKey('sys.user.initPassword').then(response => { // this.getConfigKey('sys.user.initPassword').then(response => {
this.initPassword = response.msg // this.initPassword = response.msg
}) // })
}, },
methods: { methods: {
changeValue() { changeValue() {
......
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