Commit c65b95e6 authored by 张伯涛's avatar 张伯涛

修改

parent 22870e75
......@@ -13,7 +13,7 @@
@click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
@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)" />
</router-link>
</scroll-pane>
......@@ -242,7 +242,8 @@ export default {
}
&.active {
background-color: #fff;
color: $color-theme;
//color: $color-theme;
color: #168DE8;
border-color: transparent;
//&::before {
// content: '';
......
<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>
<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"
>
<template slot-scope="{ node, data }">
<span>
<img :src="data.icon" class="treeIcon">
<label>{{ node.label }}</label>
</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: '在用' }
],
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: {
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;
}
}
}
}
.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>
<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>
......@@ -615,9 +615,9 @@ export default {
}
this.getList()
this.getTreeSelect()
this.getConfigKey('sys.user.initPassword').then(response => {
this.initPassword = response.msg
})
// this.getConfigKey('sys.user.initPassword').then(response => {
// this.initPassword = response.msg
// })
},
methods: {
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