feature: asset界面开发
idc,机柜交互 页面调整 login密码修复
This commit is contained in:
wanghaoyu
@@ -11,7 +11,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="login-input">
|
<div class="login-input">
|
||||||
<input v-model="loginData.password" class="inputL" @keyup.enter="login" placeholder="password" ></input>
|
<input v-model="loginData.password" type="password" class="inputL" @keyup.enter="login" placeholder="password" ></input>
|
||||||
</div>
|
</div>
|
||||||
<div class="login-button">
|
<div class="login-button">
|
||||||
<button @click="login">登录</button>
|
<button @click="login">登录</button>
|
||||||
|
|||||||
@@ -7,8 +7,8 @@
|
|||||||
<div class="sidebar-info-header">ALL</div>
|
<div class="sidebar-info-header">ALL</div>
|
||||||
<div class="sidebar-info-footer">
|
<div class="sidebar-info-footer">
|
||||||
<el-checkbox-group v-model="checkList" size="small">
|
<el-checkbox-group v-model="checkList" size="small">
|
||||||
<el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id
|
<el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id>
|
||||||
@change="getCheckedData(item)">{{item.name}}
|
{{item.name}}
|
||||||
<div class="checkbox-edit" @click.prevent="edit(item.id)">编辑</div>
|
<div class="checkbox-edit" @click.prevent="edit(item.id)">编辑</div>
|
||||||
</el-checkbox>
|
</el-checkbox>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
@@ -47,7 +47,7 @@
|
|||||||
<span>{{scope.row['host']}}</span>
|
<span>{{scope.row['host']}}</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="item.prop == 'option'" class="account-list-options">
|
<div v-if="item.prop == 'option'">
|
||||||
<span @click.stop="tagShow('showDel')" class="account-list-option"><i
|
<span @click.stop="tagShow('showDel')" class="account-list-option"><i
|
||||||
class="el-icon-delete"></i></span>
|
class="el-icon-delete"></i></span>
|
||||||
<span @click.stop="tagShow('showAdd')" class="account-list-option"><i
|
<span @click.stop="tagShow('showAdd')" class="account-list-option"><i
|
||||||
@@ -82,7 +82,8 @@
|
|||||||
<span>{{$t('overall.delete')}}</span>
|
<span>{{$t('overall.delete')}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-box-title">111</div>
|
<div class="right-box-title">Create Asset
|
||||||
|
</div>
|
||||||
<el-form ref="form" :model="form" label-width="120px">
|
<el-form ref="form" :model="form" label-width="120px">
|
||||||
<div class="el-form-style">
|
<div class="el-form-style">
|
||||||
<el-form-item label="IP">
|
<el-form-item label="IP">
|
||||||
@@ -102,14 +103,16 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div style="font-size: 10px">资产信息</div>
|
<div style="font-size: 10px">资产信息</div>
|
||||||
<el-divider></el-divider>
|
<el-divider></el-divider>
|
||||||
|
<!------------------------------------------资产类型---------------------------------------------->
|
||||||
<el-form-item label="资产类型">
|
<el-form-item label="资产类型">
|
||||||
<div class="select-style">
|
<div class="select-style">
|
||||||
<el-select value-key="id" v-model="assetType">
|
<el-select value-key="id" v-model="assetType">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in assetOptionData"
|
v-for="item in assetTypeOptionData"
|
||||||
:key="item.key"
|
:key="item.key"
|
||||||
:label="item.name"
|
:label="item.name"
|
||||||
:value="item.name">
|
:value="item.name"
|
||||||
|
>
|
||||||
<span v-if="!item.isEdit">{{ item.name }}</span>
|
<span v-if="!item.isEdit">{{ item.name }}</span>
|
||||||
<span class="config-dropdown-label-input" v-if="item.isEdit"
|
<span class="config-dropdown-label-input" v-if="item.isEdit"
|
||||||
@click.stop="editing">
|
@click.stop="editing">
|
||||||
@@ -129,41 +132,45 @@
|
|||||||
<el-popover
|
<el-popover
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
trigger="click"
|
trigger="click"
|
||||||
|
v-model="popTypeVisible"
|
||||||
>
|
>
|
||||||
<div class="pop-window-company">
|
<div class="pop-window-assetType">
|
||||||
<span style="display: block;padding-bottom: 20px">资产类型</span>
|
<div class="pop-window-assetType-content">
|
||||||
<span style="display: block;padding-bottom: 20px">新增资产类型</span>
|
<div class="right-box-top-btns">
|
||||||
<input v-model="form.name"/><div>111</div>
|
<div class="right-box-top-btn right-box-top-btn-full"
|
||||||
<span style="display: block;padding-bottom: 20px">已有资产类型</span>
|
@click="popoverClose('type')">
|
||||||
<div class="rm-c-list">
|
<div class="right-box-btn-icon">
|
||||||
<ul>
|
<i class="el-icon-close"></i>
|
||||||
<li style="cursor: pointer;">
|
|
||||||
<div>
|
|
||||||
<span> 1111</span>
|
|
||||||
<i class="el-icon-edit-outline"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<span>{{$t('overall.esc')}}</span>
|
||||||
<span> 1111</span>
|
</div>
|
||||||
<i class="el-icon-edit-outline"></i>
|
</div>
|
||||||
</div>
|
<span style="display: block;padding-bottom: 20px">资产类型</span>
|
||||||
<div>
|
<span style="display: block;padding-bottom: 20px">新增资产类型</span>
|
||||||
<span> 1111</span>
|
<input v-model="assetTypeData"/><input type="button"
|
||||||
<i class="el-icon-edit-outline"></i>
|
value="+Add"></input>
|
||||||
</div>
|
<span style="display: block;padding-bottom: 20px">已有资产类型</span>
|
||||||
<div>
|
<div class="rm-c-list">
|
||||||
<span> 1111</span>
|
<ul>
|
||||||
<i class="el-icon-edit-outline"></i>
|
<li style="cursor: pointer;"
|
||||||
</div>
|
v-for="(item,index) in assetTypeOptionData"
|
||||||
<div>
|
:key="index">
|
||||||
<span> 1111</span>
|
<div>
|
||||||
<i class="el-icon-edit-outline"></i>
|
<span>{{item.name}}</span>
|
||||||
</div>
|
<i class="el-icon-edit-outline"></i>
|
||||||
<div>
|
</div>
|
||||||
<span> 1111</span>
|
</li>
|
||||||
<i class="el-icon-edit-outline"></i>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</div>
|
||||||
|
<div class="right-box-bottom-btns">
|
||||||
|
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
|
||||||
|
@click="popoverClose('type')">
|
||||||
|
{{$t('overall.cancel')}}
|
||||||
|
</div>
|
||||||
|
<div class="right-box-bottom-btn right-box-bottom-btn-50">
|
||||||
|
{{$t('overall.save')}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="el-icon-plus" slot="reference"></span>
|
<span class="el-icon-plus" slot="reference"></span>
|
||||||
@@ -171,101 +178,109 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<!------------------------------------------厂商/型号---------------------------------------------->
|
||||||
<el-form-item label="厂商/型号">
|
<el-form-item label="厂商/型号">
|
||||||
<div class="select-style">
|
<div class="select-style">
|
||||||
<el-select value-key="id" v-model="assetType">
|
<el-cascader
|
||||||
<el-option
|
:options="companyTypeOptionData"
|
||||||
v-for="item in assetOptionData"
|
>
|
||||||
:key="item.key"
|
</el-cascader>
|
||||||
:label="item.name"
|
|
||||||
:value="item.name">
|
|
||||||
<span v-if="!item.isEdit">{{ item.name }}</span>
|
|
||||||
<span class="config-dropdown-label-input" v-if="item.isEdit"
|
|
||||||
@click.stop="editing">
|
|
||||||
<el-input type="text" v-model="item.name" size="mini"/>
|
|
||||||
</span>
|
|
||||||
<span class="config-dropdown-btn"
|
|
||||||
@click.stop="editOptionData(item)">
|
|
||||||
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
|
|
||||||
<i class="el-icon-check" v-if="item.isEdit"></i>
|
|
||||||
</span>
|
|
||||||
<span class="config-dropdown-btn config-dropdown-btn-delete"
|
|
||||||
@click.stop="delOptionData(item)"><i
|
|
||||||
class="el-icon-delete"></i></span>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
<div class="el-select-add-btn">
|
<div class="el-select-add-btn">
|
||||||
<el-popover
|
<el-popover
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
trigger="click"
|
trigger="click"
|
||||||
|
v-model="popCompVisible"
|
||||||
>
|
>
|
||||||
<div class="pop-window-type">
|
<div class="pop-window-assetType">
|
||||||
<span style="display: block;padding-bottom: 20px">商场/型号</span>
|
<div class="pop-window-assetType-content">
|
||||||
<span style="display: block;padding-bottom: 20px">新厂商名称</span>
|
<div class="right-box-top-btns">
|
||||||
<input v-model="form.name"/><div>111</div>
|
<div class="right-box-top-btn right-box-top-btn-full"
|
||||||
<span style="display: block;padding-bottom: 20px">已有厂商</span>
|
@click="popoverClose('comp')">
|
||||||
<div class="companyList">
|
<div class="right-box-btn-icon">
|
||||||
<ul>
|
<i class="el-icon-close"></i>
|
||||||
<li style="cursor: pointer;">
|
|
||||||
<div>
|
|
||||||
<span> 1111</span>
|
|
||||||
<i class="el-icon-edit-outline"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<span>{{$t('overall.esc')}}</span>
|
||||||
<span> 1111</span>
|
</div>
|
||||||
<i class="el-icon-edit-outline"></i>
|
</div>
|
||||||
</div>
|
<div class="pop-window-assetType">
|
||||||
<div>
|
<span style="display: block;padding-bottom: 20px">商场/型号</span>
|
||||||
<span> 1111</span>
|
<input v-model="assetTypeData"/><input type="button"
|
||||||
<i class="el-icon-edit-outline"></i>
|
value="+Add"></input>
|
||||||
</div>
|
<span style="display: block;padding-bottom: 20px">已有厂商</span>
|
||||||
<div>
|
<div class="companyList">
|
||||||
<span> 1111</span>
|
<ul>
|
||||||
<i class="el-icon-edit-outline"></i>
|
<li style="cursor: pointer;">
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<span> 1111</span>
|
||||||
<span> 1111</span>
|
<i class="el-icon-edit-outline"></i>
|
||||||
<i class="el-icon-edit-outline"></i>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div>
|
<span> 1111</span>
|
||||||
<span> 1111</span>
|
<i class="el-icon-edit-outline"></i>
|
||||||
<i class="el-icon-edit-outline"></i>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
</li>
|
<span> 1111</span>
|
||||||
</ul>
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span> 1111</span>
|
||||||
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span> 1111</span>
|
||||||
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span> 1111</span>
|
||||||
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<span style="display: block;padding-bottom: 20px">已有型号</span>
|
||||||
|
<input v-model="assetTypeData"/><input type="button"
|
||||||
|
value="+Add"></input>
|
||||||
|
<div class="companyList">
|
||||||
|
<ul>
|
||||||
|
<li style="cursor: pointer;">
|
||||||
|
<div>
|
||||||
|
<span> 1111</span>
|
||||||
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span> 1111</span>
|
||||||
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span> 1111</span>
|
||||||
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span> 1111</span>
|
||||||
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span> 1111</span>
|
||||||
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span> 1111</span>
|
||||||
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span style="display: block;padding-bottom: 20px">已有型号</span>
|
</div>
|
||||||
<input v-model="form.name"/><div>111</div>
|
|
||||||
<div class="companyList">
|
<div class="right-box-bottom-btns">
|
||||||
<ul>
|
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
|
||||||
<li style="cursor: pointer;">
|
@click="popoverClose('comp')">
|
||||||
<div>
|
{{$t('overall.cancel')}}
|
||||||
<span> 1111</span>
|
</div>
|
||||||
<i class="el-icon-edit-outline"></i>
|
<div class="right-box-bottom-btn right-box-bottom-btn-50">
|
||||||
</div>
|
{{$t('overall.save')}}
|
||||||
<div>
|
|
||||||
<span> 1111</span>
|
|
||||||
<i class="el-icon-edit-outline"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span> 1111</span>
|
|
||||||
<i class="el-icon-edit-outline"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span> 1111</span>
|
|
||||||
<i class="el-icon-edit-outline"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span> 1111</span>
|
|
||||||
<i class="el-icon-edit-outline"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span> 1111</span>
|
|
||||||
<i class="el-icon-edit-outline"></i>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="el-icon-plus" slot="reference"></span>
|
<span class="el-icon-plus" slot="reference"></span>
|
||||||
@@ -275,39 +290,25 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="购买日期">
|
<el-form-item label="购买日期">
|
||||||
<div class="select-style">
|
<div class="select-style">
|
||||||
<el-select value-key="id" v-model="assetType">
|
<el-date-picker
|
||||||
<el-option
|
v-model="value1"
|
||||||
v-for="item in assetOptionData"
|
type="date"
|
||||||
:key="item.key"
|
placeholder="选择日期">
|
||||||
:label="item.name"
|
</el-date-picker>
|
||||||
:value="item.name">
|
|
||||||
<span v-if="!item.isEdit">{{ item.name }}</span>
|
|
||||||
<span class="config-dropdown-label-input" v-if="item.isEdit"
|
|
||||||
@click.stop="editing">
|
|
||||||
<el-input type="text" v-model="item.name" size="mini"/>
|
|
||||||
</span>
|
|
||||||
<span class="config-dropdown-btn"
|
|
||||||
@click.stop="editOptionData(item)">
|
|
||||||
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
|
|
||||||
<i class="el-icon-check" v-if="item.isEdit"></i>
|
|
||||||
</span>
|
|
||||||
<span class="config-dropdown-btn config-dropdown-btn-delete"
|
|
||||||
@click.stop="delOptionData(item)"><i
|
|
||||||
class="el-icon-delete"></i></span>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div style="font-size: 10px">IDC</div>
|
<div style="font-size: 10px">IDC</div>
|
||||||
<el-divider></el-divider>
|
<el-divider></el-divider>
|
||||||
|
<!------------------------------------------IDC---------------------------------------------->
|
||||||
<el-form-item label="IDC Name">
|
<el-form-item label="IDC Name">
|
||||||
<div class="select-style">
|
<div class="select-style">
|
||||||
<el-select value-key="id" v-model="assetType">
|
<el-select v-model="cabinetIDCData" clearable @change="getSingleIDCData">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in assetOptionData"
|
v-for="item in IDCOptionData"
|
||||||
:key="item.key"
|
:key="item.key"
|
||||||
:label="item.name"
|
:label="item.name"
|
||||||
:value="item.name">
|
:value="item.name"
|
||||||
|
>
|
||||||
<span v-if="!item.isEdit">{{ item.name }}</span>
|
<span v-if="!item.isEdit">{{ item.name }}</span>
|
||||||
<span class="config-dropdown-label-input" v-if="item.isEdit"
|
<span class="config-dropdown-label-input" v-if="item.isEdit"
|
||||||
@click.stop="editing">
|
@click.stop="editing">
|
||||||
@@ -327,42 +328,69 @@
|
|||||||
<el-popover
|
<el-popover
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
trigger="click"
|
trigger="click"
|
||||||
|
v-model="popIDCVisible"
|
||||||
>
|
>
|
||||||
<div class="pop-window">
|
<div class="pop-window-assetType-content">
|
||||||
<span style="display: block;padding-bottom: 20px">标题</span>
|
<div class="right-box-top-btns">
|
||||||
<el-form-item label="IP">
|
<div class="right-box-top-btn right-box-top-btn-full"
|
||||||
<el-input v-model="form.name"/>
|
@click="popoverClose('IDC')">
|
||||||
</el-form-item>
|
<div class="right-box-btn-icon">
|
||||||
<el-form-item label="SN">
|
<i class="el-icon-close"></i>
|
||||||
<el-input v-model="form.name"/>
|
</div>
|
||||||
</el-form-item>
|
<span>{{$t('overall.esc')}}</span>
|
||||||
<el-form-item label="Asset Type">
|
</div>
|
||||||
<el-input v-model="form.name"/>
|
</div>
|
||||||
</el-form-item>
|
<div class="pop-window">
|
||||||
|
<span style="display: block;padding-bottom: 20px">标题</span>
|
||||||
|
<el-form-item label="IDC Name">
|
||||||
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Location">
|
||||||
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="负责人">
|
||||||
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Tel">
|
||||||
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-box-bottom-btns">
|
||||||
|
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
|
||||||
|
@click="popoverClose('IDC')">
|
||||||
|
{{$t('overall.cancel')}}
|
||||||
|
</div>
|
||||||
|
<div class="right-box-bottom-btn right-box-bottom-btn-50">
|
||||||
|
{{$t('overall.save')}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="el-icon-plus" slot="reference"></span>
|
<span class="el-icon-plus" slot="reference"></span>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="IP">
|
<el-form-item label="Location">
|
||||||
<span></span>
|
<span>{{idcSelectedData.location}}</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="IP">
|
<el-form-item label="负责人">
|
||||||
<span></span>
|
<span>{{idcSelectedData.principal}}</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="IP">
|
<el-form-item label="Tel">
|
||||||
<span></span>
|
<span>{{idcSelectedData.tel}}</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-divider></el-divider>
|
<el-divider></el-divider>
|
||||||
|
<!------------------------------------------cabinet---------------------------------------------->
|
||||||
<el-form-item label="机柜">
|
<el-form-item label="机柜">
|
||||||
<div class="select-style">
|
<div class="select-style">
|
||||||
<el-select value-key="id" v-model="assetType">
|
<el-select clearable v-model="cabinetModelData"
|
||||||
|
@change="getSingleCabinetData">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in assetOptionData"
|
v-for="item in cabinetOptionData"
|
||||||
:key="item.key"
|
:key="item.key"
|
||||||
:label="item.name"
|
:label="item.name"
|
||||||
:value="item.name">
|
:value="item.name"
|
||||||
|
>
|
||||||
<span v-if="!item.isEdit">{{ item.name }}</span>
|
<span v-if="!item.isEdit">{{ item.name }}</span>
|
||||||
<span class="config-dropdown-label-input" v-if="item.isEdit"
|
<span class="config-dropdown-label-input" v-if="item.isEdit"
|
||||||
@click.stop="editing">
|
@click.stop="editing">
|
||||||
@@ -382,48 +410,71 @@
|
|||||||
<el-popover
|
<el-popover
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
trigger="click"
|
trigger="click"
|
||||||
|
v-model="popCabinetVisible"
|
||||||
>
|
>
|
||||||
<div class="pop-window">
|
<div class="pop-window-assetType-content">
|
||||||
<span style="display: block;padding-bottom: 20px">标题</span>
|
<div class="right-box-top-btns">
|
||||||
<el-form-item label="Name">
|
<div class="right-box-top-btn right-box-top-btn-full"
|
||||||
<el-input v-model="form.name"/>
|
@click="popoverClose('equip')">
|
||||||
</el-form-item>
|
<div class="right-box-btn-icon">
|
||||||
<el-form-item label="SN">
|
<i class="el-icon-close"></i>
|
||||||
<div>{{value1}}</div><el-slider v-model="value1"></el-slider>
|
</div>
|
||||||
</el-form-item>
|
<span>{{$t('overall.esc')}}</span>
|
||||||
<el-form-item label="Asset Type">
|
</div>
|
||||||
<el-input v-model="form.name" type="textarea" :rows="2"/>
|
</div>
|
||||||
</el-form-item>
|
<div class="pop-window">
|
||||||
<el-form-item label="Asset Type">
|
<span style="display: block;padding-bottom: 20px">标题</span>
|
||||||
<el-input v-model="form.name"/>
|
<el-form-item label="Name">
|
||||||
</el-form-item>
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="U Size">
|
||||||
|
<div>{{value1}}</div>
|
||||||
|
<el-slider v-model="value1"></el-slider>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Desc">
|
||||||
|
<el-input v-model="form.name" type="textarea"
|
||||||
|
:rows="2"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="IDC">
|
||||||
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-box-bottom-btns">
|
||||||
|
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
|
||||||
|
@click="popoverClose('equip')">
|
||||||
|
{{$t('overall.cancel')}}
|
||||||
|
</div>
|
||||||
|
<div class="right-box-bottom-btn right-box-bottom-btn-50">
|
||||||
|
{{$t('overall.save')}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="el-icon-plus" slot="reference"></span>
|
<span class="el-icon-plus" slot="reference"></span>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="IP">
|
<el-form-item label="U Size">
|
||||||
<span></span>
|
<span>{{cabinetSelectedData.uSize}}</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="IP">
|
<el-form-item label="Desc">
|
||||||
<span></span>
|
<span>{{cabinetSelectedData.desc}}</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div style="font-size: 10px">IDC</div>
|
<div style="font-size: 10px">CLI Account</div>
|
||||||
<el-divider></el-divider>
|
<el-divider></el-divider>
|
||||||
<el-form-item label="IP">
|
<el-form-item label="IP">
|
||||||
<el-radio-group>
|
<el-radio-group size="mini" v-model="accountType">
|
||||||
<el-radio-button label="Password"></el-radio-button>
|
<el-radio-button label="Password"></el-radio-button>
|
||||||
<el-radio-button label="SSH私钥"></el-radio-button>
|
<el-radio-button label="SSH私钥"></el-radio-button>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="IP">
|
<el-form-item label="Account">
|
||||||
<el-input v-model="form.name"/>
|
<el-input v-model="form.name"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="SN">
|
<el-form-item label="Password">
|
||||||
<el-input v-model="form.name"/>
|
<el-input v-model="form.name"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="IP">
|
<el-form-item label="Port">
|
||||||
<el-input v-model="form.name"/>
|
<el-input v-model="form.name"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
@@ -441,7 +492,9 @@ export default {
|
|||||||
name: "asset",
|
name: "asset",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value1:100,
|
cabinetModelData: '',
|
||||||
|
cabinetIDCData: '',
|
||||||
|
value1: 100,
|
||||||
checkList: [],
|
checkList: [],
|
||||||
sidebarState: '',
|
sidebarState: '',
|
||||||
tableTitle: [
|
tableTitle: [
|
||||||
@@ -470,8 +523,8 @@ export default {
|
|||||||
prop: 'Module',
|
prop: 'Module',
|
||||||
show: true,
|
show: true,
|
||||||
}, {
|
}, {
|
||||||
label: this.$t("asset.tableTitle.alarm"),
|
label: this.$t("asset.tableTitle.alert"),
|
||||||
prop: 'Alarm',
|
prop: 'alert',
|
||||||
show: true,
|
show: true,
|
||||||
}, {
|
}, {
|
||||||
label: this.$t("asset.tableTitle.dataCenter"),
|
label: this.$t("asset.tableTitle.dataCenter"),
|
||||||
@@ -550,26 +603,61 @@ export default {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
checkListData: [],
|
checkListData: [],
|
||||||
assetOptionData: [
|
assetTypeData: '',
|
||||||
|
assetTypeOptionData: [
|
||||||
{
|
{
|
||||||
id: '1',
|
id: '1',
|
||||||
name: 'group1',
|
name: '座机',
|
||||||
}, {
|
}, {
|
||||||
id: '2',
|
id: '2',
|
||||||
name: 'group2',
|
name: '路由器',
|
||||||
}, {
|
}, {
|
||||||
id: '3',
|
id: '3',
|
||||||
name: '小组3',
|
name: '台式机',
|
||||||
}, {
|
|
||||||
id: '4',
|
|
||||||
name: '小组4',
|
|
||||||
}, {
|
|
||||||
id: '5',
|
|
||||||
name: '小组啊小组5',
|
|
||||||
}, {
|
|
||||||
id: '6',
|
|
||||||
name: '小组6',
|
|
||||||
}],
|
}],
|
||||||
|
companyTypeData: '',
|
||||||
|
companyTypeOptionData: [
|
||||||
|
{
|
||||||
|
value: 'zhinan',
|
||||||
|
label: '指南',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'shejiyuanze',
|
||||||
|
label: '设计原则',
|
||||||
|
}, {
|
||||||
|
value: 'daohang',
|
||||||
|
label: '导航',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
value: 'zujian',
|
||||||
|
label: '组件',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: '11',
|
||||||
|
label: '设计原22则',
|
||||||
|
}, {
|
||||||
|
value: '33',
|
||||||
|
label: '导44航',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
value: 'ziyuan',
|
||||||
|
label: '资源',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'shejiyuanze',
|
||||||
|
label: '设计原则',
|
||||||
|
}, {
|
||||||
|
value: 'daohang',
|
||||||
|
label: '导航',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}],
|
||||||
|
IDCData: '',
|
||||||
|
IDCOptionData: [],
|
||||||
|
cabinetData: '',
|
||||||
|
cabinetOptionData: [],
|
||||||
input: '',
|
input: '',
|
||||||
pageObj: {
|
pageObj: {
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
@@ -589,6 +677,24 @@ export default {
|
|||||||
title: ''
|
title: ''
|
||||||
},
|
},
|
||||||
assetType: {},
|
assetType: {},
|
||||||
|
accountType: '',
|
||||||
|
idcSelectedData: {
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
location: '',
|
||||||
|
principal: '',
|
||||||
|
tel: ''
|
||||||
|
},
|
||||||
|
cabinetSelectedData: {
|
||||||
|
name: '',
|
||||||
|
uSize: '',
|
||||||
|
desc: '',
|
||||||
|
idc: ''
|
||||||
|
},
|
||||||
|
popTypeVisible: false,
|
||||||
|
popCompVisible: false,
|
||||||
|
popIDCVisible: false,
|
||||||
|
popCabinetVisible: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -613,13 +719,6 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getAssetData() {
|
getAssetData() {
|
||||||
this.$get('idc', this.pageObj).then(response => {
|
|
||||||
if (response.code == 200) {
|
|
||||||
this.checkListData = response.data.list
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getListData() {
|
|
||||||
this.$get('asset', this.pageObj).then(response => {
|
this.$get('asset', this.pageObj).then(response => {
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
this.tableData = response.data.list;
|
this.tableData = response.data.list;
|
||||||
@@ -627,17 +726,31 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
getIDCOptionData() {
|
||||||
|
this.$get('idc', this.pageObj).then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.checkListData = this.IDCOptionData = response.data.list;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getCabinetOptionData() {
|
||||||
|
this.$get('cabinet', this.pageObj).then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.cabinetOptionData = response.data.list;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
markOptionData() {
|
markOptionData() {
|
||||||
for (let i in this.assetOptionData) {
|
this.assetTypeOptionData.forEach(item => {
|
||||||
this.$set(this.assetOptionData[i], 'isEdit', false);
|
this.$set(item, 'isEdit', false);
|
||||||
this.$set(this.assetOptionData[i], 'oldName', this.assetOptionData[i].name);
|
this.$set(item, 'oldName', item.name);
|
||||||
}
|
})
|
||||||
},
|
},
|
||||||
editOptionData(item) {
|
editOptionData(item) {
|
||||||
if (!item.isEdit) {
|
if (!item.isEdit) {
|
||||||
item.isEdit = true;
|
item.isEdit = true;
|
||||||
} else {
|
} else {
|
||||||
if (item.name != item.oldName) {
|
if (item.name !== item.oldName) {
|
||||||
item.isEdit = false;
|
item.isEdit = false;
|
||||||
} else {
|
} else {
|
||||||
item.isEdit = false;
|
item.isEdit = false;
|
||||||
@@ -660,20 +773,52 @@ export default {
|
|||||||
},
|
},
|
||||||
editing() {
|
editing() {
|
||||||
|
|
||||||
|
},
|
||||||
|
getSingleIDCData(data) {
|
||||||
|
console.log(data)
|
||||||
|
this.idcSelectedData = ''
|
||||||
|
this.IDCOptionData.forEach(item => {
|
||||||
|
if (item.name == data) {
|
||||||
|
this.idcSelectedData = item
|
||||||
|
console.log(this.idcSelectedData)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getSingleCabinetData(data) {
|
||||||
|
this.cabinetOptionData.forEach(item => {
|
||||||
|
if (item.name === data) {
|
||||||
|
this.cabinetSelectedData = item
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
pageNo(val) {
|
pageNo(val) {
|
||||||
this.pageObj.pageNo = val;
|
this.pageObj.pageNo = val;
|
||||||
this.getListData()
|
this.getAssetData()
|
||||||
},
|
},
|
||||||
pageSize(val) {
|
pageSize(val) {
|
||||||
this.pageObj.pageSize = val;
|
this.pageObj.pageSize = val;
|
||||||
this.getListData()
|
this.getAssetData()
|
||||||
}
|
},
|
||||||
|
popoverClose(data) {
|
||||||
|
if (data === 'type') {
|
||||||
|
this.popTypeVisible = false
|
||||||
|
}
|
||||||
|
if (data === 'comp') {
|
||||||
|
this.popCompVisible = false
|
||||||
|
}
|
||||||
|
if (data === 'IDC') {
|
||||||
|
this.popIDCVisible = false
|
||||||
|
}
|
||||||
|
if (data === 'equip') {
|
||||||
|
this.popCabinetVisible = false
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.markOptionData();
|
this.markOptionData();
|
||||||
this.getListData();
|
|
||||||
this.getAssetData();
|
this.getAssetData();
|
||||||
|
this.getIDCOptionData();
|
||||||
|
this.getCabinetOptionData();
|
||||||
window.onresize = () => {
|
window.onresize = () => {
|
||||||
this.tableHeight = document.documentElement.clientHeight - 200;
|
this.tableHeight = document.documentElement.clientHeight - 200;
|
||||||
}
|
}
|
||||||
@@ -685,6 +830,11 @@ export default {
|
|||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-popover {
|
||||||
|
padding: 0px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.el-form-style .el-form-item {
|
.el-form-style .el-form-item {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
@@ -700,7 +850,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-divider--horizontal {
|
.el-divider--horizontal {
|
||||||
margin: 12px;
|
margin: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-checkbox-group {
|
.el-checkbox-group {
|
||||||
@@ -800,6 +950,12 @@ export default {
|
|||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.account-list-option {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
.right-box-top-btns {
|
.right-box-top-btns {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@@ -853,32 +1009,59 @@ export default {
|
|||||||
height: 300px;
|
height: 300px;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
.pop-window-company{
|
|
||||||
height: 600px;
|
.pop-window-assetType {
|
||||||
|
height: 500px;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pop-window-type{
|
.pop-window-assetType-content {
|
||||||
height: 600px;
|
padding: 1px 15px 15px 20px;
|
||||||
width: 400px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.companyList{
|
.companyList {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
border: 1px solid #000000;
|
border: 1px solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rm-c-list li{
|
.rm-c-list li {
|
||||||
width: 300px;
|
|
||||||
height: 400px;
|
|
||||||
border: 1px solid #000000;
|
border: 1px solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rm-c-list span:hover{
|
.rm-c-list span:hover {
|
||||||
background-color:#888;color:#fff;
|
background-color: #888;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.right-box-bottom-btn {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #656565;
|
||||||
|
color: white;
|
||||||
|
line-height: 35px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-box-bottom-btns {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-box-bottom-btn-cancel {
|
||||||
|
background-color: #DADADA;
|
||||||
|
color: #656565;
|
||||||
|
width: 50%;
|
||||||
|
border-bottom-left-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-box-bottom-btn-50 {
|
||||||
|
width: 50%;
|
||||||
|
float: right;
|
||||||
|
border-bottom-right-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes slide-in-from-right {
|
@keyframes slide-in-from-right {
|
||||||
from {
|
from {
|
||||||
|
|||||||
Reference in New Issue
Block a user