perf: asset底部上滑框开、关动画优化，resize未优化
This commit is contained in:
chenjinsong
@@ -211,7 +211,7 @@ li{
|
|||||||
.nz-btn.nz-btn-size-normal.nz-btn-size-alien { //弹框顶部异形按钮
|
.nz-btn.nz-btn-size-normal.nz-btn-size-alien { //弹框顶部异形按钮
|
||||||
height: 40px;
|
height: 40px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 4px 8px;
|
padding: 4px 35px;
|
||||||
border-radius: 0 0 10px 10px;
|
border-radius: 0 0 10px 10px;
|
||||||
}
|
}
|
||||||
.nz-btn.nz-btn-size-small.nz-btn-size-alien { //弹框顶部异形按钮
|
.nz-btn.nz-btn-size-small.nz-btn-size-alien { //弹框顶部异形按钮
|
||||||
@@ -645,7 +645,7 @@ li{
|
|||||||
height: calc(50% - 4px);
|
height: calc(50% - 4px);
|
||||||
}
|
}
|
||||||
.sub-list {
|
.sub-list {
|
||||||
height: calc(50% - 4px);
|
height: calc(100% - 9px);
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.main-and-sub-transition {
|
.main-and-sub-transition {
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<span>
|
<div style="height: 50%">
|
||||||
<!-- 副列表 -->
|
<!-- 副列表 -->
|
||||||
<div @mousedown="listResize" class="sub-list-resize" v-if="showSubList && !isFullScreen">一</div>
|
<div @mousedown="listResize" class="sub-list-resize" v-if="showSubList && !isFullScreen">一</div>
|
||||||
<div class="sub-list main-and-sub-transition" v-if="showSubList">
|
<div class="sub-list">
|
||||||
<!--窗口大小控制-->
|
<!--<div class="sub-list main-and-sub-transition" v-if="showSubList">-->
|
||||||
|
<!--窗口大小控制-->
|
||||||
<div class="sub-list-window-control">
|
<div class="sub-list-window-control">
|
||||||
<!--退出全屏-->
|
<!--退出全屏-->
|
||||||
<div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen"><i class="nz-icon nz-icon-exit-full-screen"></i></div>
|
<div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen"><i class="nz-icon nz-icon-exit-full-screen"></i></div>
|
||||||
@@ -13,37 +14,37 @@
|
|||||||
<div class="window-control-btn" @click="closeSubList"><i class="el-icon-close"></i></div>
|
<div class="window-control-btn" @click="closeSubList"><i class="el-icon-close"></i></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!------TAB区------>
|
<!------TAB区------>
|
||||||
<!--通用详情-->
|
<!--通用详情-->
|
||||||
<!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="detail" :targetTab.sync="targetTab"
|
<!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="detail" :targetTab.sync="targetTab"
|
||||||
v-if="targetTab == 'detail'"
|
v-if="targetTab == 'detail'"
|
||||||
@changeTab="changeTab"
|
@changeTab="changeTab"
|
||||||
></common-detail-tab>-->
|
></common-detail-tab>-->
|
||||||
<!--机柜-->
|
<!--机柜-->
|
||||||
<cabinet-tab v-show="subResizeShow" v-if="from == 'dc' && targetTab == 'cabinet'" :obj="obj" @changeTab="changeTab"></cabinet-tab>
|
<cabinet-tab v-show="subResizeShow" v-if="from == 'dc' && targetTab == 'cabinet'" :obj="obj" @changeTab="changeTab"></cabinet-tab>
|
||||||
<!--告警信息-->
|
<!--告警信息-->
|
||||||
<alert-message-tab v-show="subResizeShow" v-if="((from == 'alertRule' || from == 'asset') && targetTab == 'alertMessage')" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
|
<alert-message-tab v-show="subResizeShow" v-if="((from == 'alertRule' || from == 'asset') && targetTab == 'alertMessage')" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
|
||||||
<!--asset页的endpoint列表-->
|
<!--asset页的endpoint列表-->
|
||||||
<endpoint-tab v-show="subResizeShow" v-if="from == 'asset' && targetTab == 'endpoint'" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
|
<endpoint-tab v-show="subResizeShow" v-if="from == 'asset' && targetTab == 'endpoint'" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
|
||||||
<!--endpoint页的asset详情-->
|
<!--endpoint页的asset详情-->
|
||||||
<!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="assetDetail" :targetTab.sync="targetTab"
|
<!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="assetDetail" :targetTab.sync="targetTab"
|
||||||
v-if="targetTab == 'assetDetail' && from == 'endpoint'"
|
v-if="targetTab == 'assetDetail' && from == 'endpoint'"
|
||||||
@changeTab="changeTab"></common-detail-tab>-->
|
@changeTab="changeTab"></common-detail-tab>-->
|
||||||
<!--endpoint-query-->
|
<!--endpoint-query-->
|
||||||
<endpoint-query-tab v-show="subResizeShow" v-if="(from == 'endpoint' && targetTab == 'endpointQuery')" :from="from" :obj="obj" @changeTab="changeTab" ref="endpointQuery"></endpoint-query-tab>
|
<endpoint-query-tab v-show="subResizeShow" v-if="(from == 'endpoint' && targetTab == 'endpointQuery')" :from="from" :obj="obj" @changeTab="changeTab" ref="endpointQuery"></endpoint-query-tab>
|
||||||
|
|
||||||
<!--alertMessage页的详情-->
|
<!--alertMessage页的详情-->
|
||||||
<!--<template v-if="from == 'alertMessage'">
|
<!--<template v-if="from == 'alertMessage'">
|
||||||
<common-detail-tab v-show="subResizeShow" :from="from" :targetTab.sync="targetTab" v-for="(item, index) in tabList" :key="index" :detail="detailList[index]"
|
<common-detail-tab v-show="subResizeShow" :from="from" :targetTab.sync="targetTab" v-for="(item, index) in tabList" :key="index" :detail="detailList[index]"
|
||||||
v-if="targetTab == item" @changeTab="changeTab"></common-detail-tab>
|
v-if="targetTab == item" @changeTab="changeTab"></common-detail-tab>
|
||||||
</template>-->
|
</template>-->
|
||||||
|
|
||||||
<!-- model-panel/asset-detail/project-overview的panel-->
|
<!-- model-panel/asset-detail/project-overview的panel-->
|
||||||
<panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project' || from == 'alertRule' || from == 'endpoint') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
|
<panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project' || from == 'alertRule' || from == 'endpoint') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
|
||||||
@changeTab="changeTab" :targetTab.sync="targetTab" :detail="detail"></panel-tab>
|
@changeTab="changeTab" :targetTab.sync="targetTab" :detail="detail"></panel-tab>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="panel" :class="{'sub-list': from != 'project'}">
|
<div class="panel">
|
||||||
<!--model和asset的工具栏-->
|
<!--model和asset的工具栏-->
|
||||||
<div class="sub-top-tools" v-if="from != 'project'">
|
<div class="sub-top-tools" v-if="from != 'project'">
|
||||||
<div class="sub-list-tabs">
|
<div class="sub-list-tabs">
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="right-box right-box-account" v-clickoutside="clickos">
|
<div class="right-box right-box-account" v-clickoutside="clickos">
|
||||||
<!-- begin--顶部按钮-->
|
<!-- begin--顶部按钮-->
|
||||||
<div class="right-box-top-btns">
|
<div class="right-box-top-btns">
|
||||||
<button type="button" v-if="editUser.userId" @click="del()"
|
<button type="button" v-if="editUser.userId" @click="del"
|
||||||
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light"
|
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light"
|
||||||
id="account-edit-del">
|
id="account-edit-del">
|
||||||
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
|
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
|
||||||
@@ -72,9 +72,6 @@
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
rightBox: {
|
|
||||||
title: '',
|
|
||||||
},
|
|
||||||
rules: { //表单校验规则
|
rules: { //表单校验规则
|
||||||
username: [
|
username: [
|
||||||
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
|
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
|
||||||
@@ -149,6 +146,7 @@
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
//将prop里的user转为组件内部对象
|
||||||
user: {
|
user: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true,
|
deep: true,
|
||||||
|
|||||||
@@ -5,210 +5,212 @@
|
|||||||
<div class="sidebar-title">{{$t('asset.asset')}}</div>
|
<div class="sidebar-title">{{$t('asset.asset')}}</div>
|
||||||
<div class="sidebar-info" style="height: 90%">
|
<div class="sidebar-info" style="height: 90%">
|
||||||
<el-scrollbar ref="leftScrollbar" style="height: 100%">
|
<el-scrollbar ref="leftScrollbar" style="height: 100%">
|
||||||
<el-collapse v-model="activeType" class="left-menu-bg">
|
<el-collapse v-model="activeType" class="left-menu-bg">
|
||||||
<el-collapse-item name="dataCenter" :title="$t('asset.left.dataCenter')">
|
<el-collapse-item name="dataCenter" :title="$t('asset.left.dataCenter')">
|
||||||
<el-checkbox-group v-model="checkList" size="small" @change="changeCheckBox">
|
<el-checkbox-group v-model="checkList" size="small" @change="changeCheckBox">
|
||||||
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(checkList, item.id)}"
|
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(checkList, item.id)}"
|
||||||
v-for="(item,key) in checkListData" :key="key" :label=item.id>
|
v-for="(item,key) in checkListData" :key="key" :label=item.id>
|
||||||
<div class="sidebar-info-item-txt">
|
<div class="sidebar-info-item-txt">
|
||||||
<el-popover v-if="item.name.length > 16" trigger="hover" placement="top-start" :content="item.name" >
|
<el-popover v-if="item.name.length > 16" trigger="hover" placement="top-start" :content="item.name" >
|
||||||
<span slot="reference">{{item.name}}</span>
|
<span slot="reference">{{item.name}}</span>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
<span v-else>{{item.name}}</span>
|
<span v-else>{{item.name}}</span>
|
||||||
</div>
|
</div>
|
||||||
</el-checkbox>
|
</el-checkbox>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<el-collapse-item name="assetType" :title="$t('asset.left.assetType')">
|
<el-collapse-item name="assetType" :title="$t('asset.left.assetType')">
|
||||||
<el-checkbox-group v-model="assetTypeCheckList" size="small" @change="changeAssetTypeCheckBox">
|
<el-checkbox-group v-model="assetTypeCheckList" size="small" @change="changeAssetTypeCheckBox">
|
||||||
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(assetTypeCheckList, item.id)}" v-for="(item,key) in assetTypeCheckListData" :key="key" :label=item.id>
|
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(assetTypeCheckList, item.id)}" v-for="(item,key) in assetTypeCheckListData" :key="key" :label=item.id>
|
||||||
<div class="sidebar-info-item-txt">
|
<div class="sidebar-info-item-txt">
|
||||||
<el-popover v-if="item.value.length > 16" trigger="hover" placement="top-start" :content="item.value" >
|
<el-popover v-if="item.value.length > 16" trigger="hover" placement="top-start" :content="item.value" >
|
||||||
<span slot="reference">{{item.value}}</span>
|
<span slot="reference">{{item.value}}</span>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
<span v-else>{{item.value}}</span>
|
<span v-else>{{item.value}}</span>
|
||||||
</div>
|
</div>
|
||||||
</el-checkbox>
|
</el-checkbox>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<el-collapse-item name="vendor" :title="$t('asset.left.vendor')">
|
<el-collapse-item name="vendor" :title="$t('asset.left.vendor')">
|
||||||
<el-checkbox-group v-model="vendorCheckList" size="small" @change="changeVendorCheckBox">
|
<el-checkbox-group v-model="vendorCheckList" size="small" @change="changeVendorCheckBox">
|
||||||
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(vendorCheckList, item.id)}" v-for="(item,key) in vendorCheckListData" :key="key" :label=item.id>
|
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(vendorCheckList, item.id)}" v-for="(item,key) in vendorCheckListData" :key="key" :label=item.id>
|
||||||
<div class="sidebar-info-item-txt">
|
<div class="sidebar-info-item-txt">
|
||||||
<el-popover v-if="item.value.length > 16" trigger="hover" placement="top-start" :content="item.value" >
|
<el-popover v-if="item.value.length > 16" trigger="hover" placement="top-start" :content="item.value" >
|
||||||
<span slot="reference">{{item.value}}</span>
|
<span slot="reference">{{item.value}}</span>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
<span v-else>{{item.value}}</span>
|
<span v-else>{{item.value}}</span>
|
||||||
</div>
|
</div>
|
||||||
</el-checkbox>
|
</el-checkbox>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<el-collapse-item name="ping" :title="$t('asset.left.ping')">
|
<el-collapse-item name="ping" :title="$t('asset.left.ping')">
|
||||||
<el-checkbox-group v-model="pingCheckList" size="small" @change="changePingCheckBox">
|
<el-checkbox-group v-model="pingCheckList" size="small" @change="changePingCheckBox">
|
||||||
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.value)}" v-for="(item,key) in pingCheckListData" :key="key" :label=item.value>
|
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.value)}" v-for="(item,key) in pingCheckListData" :key="key" :label=item.value>
|
||||||
<div class="sidebar-info-item-txt">
|
<div class="sidebar-info-item-txt">
|
||||||
<el-popover v-if="item.label.length > 16" trigger="hover" placement="top-start" :content="item.label" >
|
<el-popover v-if="item.label.length > 16" trigger="hover" placement="top-start" :content="item.label" >
|
||||||
<span slot="reference">{{item.label}}</span>
|
<span slot="reference">{{item.label}}</span>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
<span v-else>{{item.label}}</span>
|
<span v-else>{{item.label}}</span>
|
||||||
</div>
|
</div>
|
||||||
</el-checkbox>
|
</el-checkbox>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div slot="content-right" class="slot-content">
|
<div slot="content-right" class="slot-content">
|
||||||
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
|
<div class="main-list" :class="{'main-list-with-sub': showSubList}">
|
||||||
<div class="top-tools" v-show="mainResizeShow">
|
<div class="top-tools" v-show="mainResizeShow">
|
||||||
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
|
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
|
||||||
<div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input></div>
|
<div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input></div>
|
||||||
<export-excel
|
<export-excel
|
||||||
export-file-name="asset"
|
export-file-name="asset"
|
||||||
export-url="/asset/export"
|
export-url="/asset/export"
|
||||||
import-url="/asset/import"
|
import-url="/asset/import"
|
||||||
:params="searchLabel"
|
:params="searchLabel"
|
||||||
@afterImport="getAssetData"
|
@afterImport="getAssetData"
|
||||||
>
|
|
||||||
<template slot="optionZone">
|
|
||||||
<button @click.stop="tagShow('showAdd')" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset">
|
|
||||||
<i class="nz-icon nz-icon-create-square"></i></button>
|
|
||||||
</template>
|
|
||||||
</export-excel>
|
|
||||||
</div>
|
|
||||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-table
|
|
||||||
class="nz-table"
|
|
||||||
:height="mainTableHeight"
|
|
||||||
style="width: 100%;"
|
|
||||||
:data="tableData"
|
|
||||||
v-scrollBar:el-table="'large'"
|
|
||||||
v-show="mainResizeShow"
|
|
||||||
border
|
|
||||||
v-loading="loading"
|
|
||||||
tooltip-effect="light"
|
|
||||||
ref="assetTable"
|
|
||||||
:cell-class-name="messageStyle"
|
|
||||||
>
|
>
|
||||||
<el-table-column
|
<template slot="optionZone">
|
||||||
:resizable="false"
|
<button @click.stop="tagShow('showAdd')" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset">
|
||||||
v-for="(item, index) in tablelable"
|
<i class="nz-icon nz-icon-create-square"></i></button>
|
||||||
v-if="item.show"
|
</template>
|
||||||
:width="item.width"
|
</export-excel>
|
||||||
:key="`col_${index}`"
|
</div>
|
||||||
:label="item.label"
|
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||||
:fixed="item.fixed"
|
</div>
|
||||||
:show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
|
|
||||||
min-width="110px"
|
<el-table
|
||||||
:class-name="item.prop == 'option' ? 'content-right-options' : ''"
|
class="nz-table"
|
||||||
>
|
:height="mainTableHeight"
|
||||||
<template slot-scope="scope" :column="item">
|
style="width: 100%;"
|
||||||
<div v-if="item.prop=='ID'">
|
:data="tableData"
|
||||||
<span>{{scope.row.id}}</span>
|
v-scrollBar:el-table="'large'"
|
||||||
|
v-show="mainResizeShow"
|
||||||
|
border
|
||||||
|
v-loading="loading"
|
||||||
|
tooltip-effect="light"
|
||||||
|
ref="assetTable"
|
||||||
|
:cell-class-name="messageStyle"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
:resizable="false"
|
||||||
|
v-for="(item, index) in tablelable"
|
||||||
|
v-if="item.show"
|
||||||
|
:width="item.width"
|
||||||
|
:key="`col_${index}`"
|
||||||
|
:label="item.label"
|
||||||
|
:fixed="item.fixed"
|
||||||
|
:show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
|
||||||
|
min-width="110px"
|
||||||
|
:class-name="item.prop == 'option' ? 'content-right-options' : ''"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope" :column="item">
|
||||||
|
<div v-if="item.prop=='ID'">
|
||||||
|
<span>{{scope.row.id}}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.prop=='assetType'">
|
||||||
|
<span>{{scope.row.model.type.value}}</span>
|
||||||
|
</div>
|
||||||
|
<template v-if="item.prop=='SN'">{{scope.row.sn}}</template>
|
||||||
|
<div v-if="item.prop=='HOST'">
|
||||||
|
<span>{{scope.row.host}}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.prop=='state'">
|
||||||
|
<span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.prop == 'pingStatus'">
|
||||||
|
<el-popover
|
||||||
|
placement="right"
|
||||||
|
width="200"
|
||||||
|
trigger="hover"
|
||||||
|
:content="formatPingTime(scope.row.pingLastUpdate)">
|
||||||
|
<div slot="reference" style="width: 20px">
|
||||||
|
<div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="item.prop=='assetType'">
|
</el-popover>
|
||||||
<span>{{scope.row.model.type.value}}</span>
|
</div>
|
||||||
</div>
|
<template v-if="item.prop=='Module'">
|
||||||
<template v-if="item.prop=='SN'">{{scope.row.sn}}</template>
|
<span class="link" @click="showEndpoint(scope.row)">{{scope.row.endpointNum}}</span>
|
||||||
<div v-if="item.prop=='HOST'">
|
</template>
|
||||||
<span>{{scope.row.host}}</span>
|
<template v-if="item.prop=='Alert'">
|
||||||
</div>
|
<span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
|
||||||
<div v-if="item.prop=='state'">
|
</template>
|
||||||
<span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
|
<div v-if="item.prop=='dataCenter'">
|
||||||
</div>
|
<span >{{scope.row.idc.name}}</span>
|
||||||
<div v-if="item.prop == 'pingStatus'">
|
</div>
|
||||||
<el-popover
|
<template v-if="item.prop=='cabinet'">
|
||||||
placement="right"
|
<span v-if="scope.row.cabinet&&scope.row.cabinet!='--'">{{returnData(scope.row.cabinet).name}}</span>
|
||||||
width="200"
|
<span v-else >{{returnData(scope.row.cabinet)}}</span>
|
||||||
trigger="hover"
|
</template>
|
||||||
:content="formatPingTime(scope.row.pingLastUpdate)">
|
<div v-if="item.prop=='model'">
|
||||||
<div slot="reference" style="width: 20px">
|
<span>{{scope.row.model.name}}</span>
|
||||||
<div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>
|
</div>
|
||||||
</div>
|
<div v-if="item.prop=='vendor'">
|
||||||
</el-popover>
|
<span>{{scope.row.model.vendor.value}}</span>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="item.prop=='Module'">
|
<div v-if="item.prop=='purchaseDate'">
|
||||||
<span class="link" @click="showEndpoint(scope.row)">{{scope.row.endpointNum}}</span>
|
<span>{{returnData(scope.row.purchaseDate)}}</span>
|
||||||
</template>
|
</div>
|
||||||
<template v-if="item.prop=='Alert'">
|
<div v-if="item.prop=='principal'">
|
||||||
<span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
|
<span>{{getPrincipalName(scope.row.idc.principal)}}</span>
|
||||||
</template>
|
</div>
|
||||||
<div v-if="item.prop=='dataCenter'">
|
<div v-if="item.prop=='tel'">
|
||||||
<span >{{scope.row.idc.name}}</span>
|
<span>{{scope.row.idc.tel}}</span>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="item.prop=='cabinet'">
|
<template v-if="item.prop == 'option'">
|
||||||
<span v-if="scope.row.cabinet&&scope.row.cabinet!='--'">{{returnData(scope.row.cabinet).name}}</span>
|
|
||||||
<span v-else >{{returnData(scope.row.cabinet)}}</span>
|
|
||||||
</template>
|
|
||||||
<div v-if="item.prop=='model'">
|
|
||||||
<span>{{scope.row.model.name}}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="item.prop=='vendor'">
|
|
||||||
<span>{{scope.row.model.vendor.value}}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="item.prop=='purchaseDate'">
|
|
||||||
<span>{{returnData(scope.row.purchaseDate)}}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="item.prop=='principal'">
|
|
||||||
<span>{{getPrincipalName(scope.row.idc.principal)}}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="item.prop=='tel'">
|
|
||||||
<span>{{scope.row.idc.tel}}</span>
|
|
||||||
</div>
|
|
||||||
<template v-if="item.prop == 'option'">
|
|
||||||
<span :title="$t('overall.view')" @click.stop="tagShow('showView',scope.row)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
|
<span :title="$t('overall.view')" @click.stop="tagShow('showView',scope.row)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
|
||||||
class="el-icon-view"></i>
|
class="el-icon-view"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span :title="$t('overall.edit')" @click.stop="tagShow('showEdit',scope.row)" class="content-right-option" :id="'asset-edit-'+scope.row.id"><i
|
<span :title="$t('overall.edit')" @click.stop="tagShow('showEdit',scope.row)" class="content-right-option" :id="'asset-edit-'+scope.row.id"><i
|
||||||
class="nz-icon nz-icon-edit"></i>
|
class="nz-icon nz-icon-edit"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span :title="$t('overall.delete')" @click.stop="deleteData('asset',scope.row.id)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i
|
<span :title="$t('overall.delete')" @click.stop="deleteData('asset',scope.row.id)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i
|
||||||
class="el-icon-delete"></i>
|
class="el-icon-delete"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<el-dropdown trigger="hover" @command="cli">
|
<el-dropdown trigger="hover" @command="cli">
|
||||||
<span title="CLI" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
|
<span title="CLI" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
|
||||||
class="nz-icon nz-icon-cli" :class="{'gray-filter': !scope.row.accounts || scope.row.accounts.length == 0}"></i>
|
class="nz-icon nz-icon-cli" :class="{'gray-filter': !scope.row.accounts || scope.row.accounts.length == 0}"></i>
|
||||||
</span>
|
</span>
|
||||||
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-menu slot="dropdown">
|
||||||
<el-dropdown-item v-for="(account, index) in scope.row.accounts" v-if="account && account.protocol != 'SNMP'" :key="index" :command="[scope.row.id ,scope.row.host, account]">{{account.protocol}}</el-dropdown-item>
|
<el-dropdown-item v-for="(account, index) in scope.row.accounts" v-if="account && account.protocol != 'SNMP'" :key="index" :command="[scope.row.id ,scope.row.host, account]">{{account.protocol}}</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
|
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</el-table-column>
|
||||||
</el-table-column>
|
<el-table-column width="28" fixed="right" :resizable="false">
|
||||||
<el-table-column width="28" fixed="right" :resizable="false">
|
<template slot="header" slot-scope="scope">
|
||||||
<template slot="header" slot-scope="scope">
|
|
||||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||||
<i class="nz-icon nz-icon-gear"></i>
|
<i class="nz-icon nz-icon-gear"></i>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot="scope">
|
<template v-slot="scope">
|
||||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<div class="pagination-bottom" v-show="!showSubList">
|
<div class="pagination-bottom" v-show="!showSubList">
|
||||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<transition name="el-zoom-in-bottom">
|
||||||
|
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertMsgAsset" :isFullScreen="isFullScreen" :from="'asset'" :targetTab.sync="targetTab" :detail="assetDetail"
|
||||||
|
@reload="getAssetData"
|
||||||
|
@closeSubList="showSubList = false"
|
||||||
|
@fullScreen="fullScreen"
|
||||||
|
@exitFullScreen="exitFullScreen"
|
||||||
|
@listResize="listResize" ></bottom-box>
|
||||||
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertMsgAsset" :isFullScreen="isFullScreen" :from="'asset'" :targetTab.sync="targetTab" :detail="assetDetail"
|
|
||||||
@reload="getAssetData"
|
|
||||||
@closeSubList="showSubList = false"
|
|
||||||
@fullScreen="fullScreen"
|
|
||||||
@exitFullScreen="exitFullScreen"
|
|
||||||
@listResize="listResize" ></bottom-box>
|
|
||||||
</div>
|
|
||||||
</left-menu>
|
</left-menu>
|
||||||
|
|
||||||
<asset-box :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl" v-if="rightBox.show"
|
<asset-box :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl" v-if="rightBox.show"
|
||||||
ref="assetEditUnit"></asset-box>
|
ref="assetEditUnit"></asset-box>
|
||||||
<element-set
|
<element-set
|
||||||
v-if="showElementSet"
|
v-if="showElementSet"
|
||||||
@close="elementsetHide"
|
@close="elementsetHide"
|
||||||
@@ -997,7 +999,7 @@
|
|||||||
let label = this.tablelable[i];
|
let label = this.tablelable[i];
|
||||||
|
|
||||||
if (label.prop == 'pingStatus') {
|
if (label.prop == 'pingStatus') {
|
||||||
this.tablelable.splice(i, 1);
|
this.tablelable.splice(i, 1);
|
||||||
console.log(this.tablelable)
|
console.log(this.tablelable)
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -297,9 +297,6 @@
|
|||||||
this.getTableData();
|
this.getTableData();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
clickos() {
|
|
||||||
this.rightBox.show = false;
|
|
||||||
},
|
|
||||||
edit(u) {
|
edit(u) {
|
||||||
this.user = JSON.parse(JSON.stringify(u));
|
this.user = JSON.parse(JSON.stringify(u));
|
||||||
this.rightBox.show = true;
|
this.rightBox.show = true;
|
||||||
@@ -328,18 +325,7 @@
|
|||||||
this.cleanUser();
|
this.cleanUser();
|
||||||
this.rightBox.show = true;
|
this.rightBox.show = true;
|
||||||
},
|
},
|
||||||
tabSave: function () {
|
save() {
|
||||||
this.$put('sys/user/update', this.user).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.rightBox.show = false;
|
|
||||||
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
|
||||||
} else {
|
|
||||||
this.$message.error(response.msg);
|
|
||||||
}
|
|
||||||
this.getTableData();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
save: function () {
|
|
||||||
this.$refs.accountForm.validate((valid) => {
|
this.$refs.accountForm.validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
if (this.user.userId) {
|
if (this.user.userId) {
|
||||||
@@ -368,17 +354,9 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
saveOrToEdit: function () {
|
statusChange(user) {
|
||||||
if (!this.rightBox.isEdit) {
|
|
||||||
this.rightBox.isEdit = true;
|
|
||||||
this.rightBox.title = this.$t("config.account.editAccount") + " ID：" + this.user.userId;
|
|
||||||
} else {
|
|
||||||
this.save();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
statusChange: function (user) {
|
|
||||||
this.user = user;
|
this.user = user;
|
||||||
this.tabSave();
|
this.save();
|
||||||
},
|
},
|
||||||
jumpTo(data, id) {
|
jumpTo(data, id) {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
@@ -388,41 +366,10 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
toEditReceiver: function (item) {
|
esc() {
|
||||||
if (!item.isEdit) {
|
|
||||||
//如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑
|
|
||||||
this.blurEditReceiver();
|
|
||||||
item.isEdit = true;
|
|
||||||
} else {
|
|
||||||
//如果已在编辑状态，判断name是否有变更，有变更则发请求
|
|
||||||
if (item.name != item.oldName) {
|
|
||||||
if (this.updateReceiverName(item) == 200) {
|
|
||||||
item.isEdit = false;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
item.errorMessage = '';
|
|
||||||
item.isEdit = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
blurEditReceiver: function () {
|
|
||||||
for (let i = 0; i < this.receiverData.length; i++) {
|
|
||||||
if (this.receiverData[i].isEdit) {
|
|
||||||
this.receiverData[i].name = this.receiverData[i].oldName;
|
|
||||||
this.receiverData[i].isEdit = false;
|
|
||||||
this.receiverData[i].errorMessage = '';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toDelReceiver: function (item) {
|
|
||||||
this.blurEditReceiver();
|
|
||||||
//TODO 请求后台，删除用户组
|
|
||||||
},
|
|
||||||
esc: function () {
|
|
||||||
this.rightBox.show = false;
|
this.rightBox.show = false;
|
||||||
},
|
},
|
||||||
cleanUser: function () {
|
cleanUser() {
|
||||||
this.user = {
|
this.user = {
|
||||||
userId: '',
|
userId: '',
|
||||||
username: '',
|
username: '',
|
||||||
|
|||||||
Reference in New Issue
Block a user