feat: asset列表中的alert可以点击查看了
1.asset列表中的alert可以点击查看了 2.alert-msg增加asset搜索
This commit is contained in:
chenjinsong
@@ -12,11 +12,11 @@ const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
|
||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
|
||||
|
||||
const env = require('../config/prod.env')
|
||||
const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
|
||||
const createServerConfig = function(compilation){
|
||||
let cfgJson={ApiUrl:"http://192.168.40.247:8080/nz-admin"};
|
||||
/*const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
|
||||
const createConfig = function(compilation){
|
||||
let cfgJson={baseUrl:"http://192.168.40.247:8080/nz-admin"};
|
||||
return JSON.stringify(cfgJson);
|
||||
}
|
||||
}*/
|
||||
const webpackConfig = merge(baseWebpackConfig, {
|
||||
module: {
|
||||
rules: utils.styleLoaders({
|
||||
@@ -32,13 +32,13 @@ const webpackConfig = merge(baseWebpackConfig, {
|
||||
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
|
||||
},
|
||||
plugins: [
|
||||
new GenerateAssetPlugin({
|
||||
filename: 'serverconfig.json',
|
||||
/*new GenerateAssetPlugin({
|
||||
filename: 'config.json',
|
||||
fn: (compilation, cb) => {
|
||||
cb(null, createServerConfig(compilation));
|
||||
cb(null, createConfig(compilation));
|
||||
},
|
||||
extraFiles: []
|
||||
}),
|
||||
}),*/
|
||||
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': env
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
export default {
|
||||
name: 'App',
|
||||
mounted() {
|
||||
/*this.$http.get("serverconfig.json").then((result)=>{
|
||||
this.$axios.defaults.baseURL = result.body.ApiUrl;
|
||||
/*this.$http.get("config.json").then((result)=>{
|
||||
this.$axios.defaults.baseURL = result.body.baseUrl;
|
||||
});*/
|
||||
this.$axios.defaults.baseURL = 'http://192.168.40.247:8080/nz-admin';
|
||||
}
|
||||
|
||||
@@ -126,6 +126,7 @@ const en = {
|
||||
},
|
||||
tip: {
|
||||
confirmDelete: "Confirm Delete?",
|
||||
assetConfirmDelete: 'The associated Endpoints and Alerts will also be deleted, confirm delete?',
|
||||
yes: "Yes",
|
||||
no: "No",
|
||||
deleteSuccess: "Successfully Deleted",
|
||||
@@ -280,7 +281,7 @@ const en = {
|
||||
device: 'SN',
|
||||
host: 'Host',
|
||||
assetState: 'State',
|
||||
endpoints: 'Endpoints',
|
||||
modules: 'Modules',
|
||||
alerts: 'Alerts',
|
||||
dataCenter: 'Data Center',
|
||||
cabinet: 'Cabinet',
|
||||
@@ -405,7 +406,7 @@ const en = {
|
||||
},
|
||||
metrics: {
|
||||
metrics: "Metrics",
|
||||
name: 'name',
|
||||
name: 'Name',
|
||||
type: 'Type',
|
||||
description: 'Desc'
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<i class="el-icon-close" @click="close_selcet_list(ind,$event)"></i>
|
||||
</div>
|
||||
<div v-else-if="!change_sreach_show && ind==sreach_num && val.id!==7 " class="select_input">
|
||||
<input type="text" id="sreach_input" v-model="input_sreach" @keyup="enter(val.name, $event)" @click="stop_click">
|
||||
<input type="text" autocomplete="off" id="sreach_input" v-model="input_sreach" @keyup="enter(val.name, $event)" @click="stop_click">
|
||||
<div class="select_info_list" v-if="val.type == 'select'">
|
||||
<ul>
|
||||
<li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
|
||||
@@ -175,21 +175,117 @@
|
||||
downBool:false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
alertListAssetId() {
|
||||
return this.$store.state.assetForAlertList;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
select_list: {
|
||||
//监听下拉列表
|
||||
handler(newDate, oldDate) {
|
||||
if (newDate.length == 0) {
|
||||
this.change_sreach_show = true
|
||||
handler(newData, oldData) {
|
||||
if (newData.length == 0) {
|
||||
this.change_sreach_show = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
no_condition: {
|
||||
handler(newDate, oldDate) {
|
||||
if (newDate != '') {
|
||||
handler(newData, oldData) {
|
||||
if (newData != '') {
|
||||
this.input_list = true
|
||||
}
|
||||
}
|
||||
},
|
||||
alertListAssetId: {
|
||||
immediate: true,
|
||||
handler(newData, oldData) {
|
||||
if (newData && this.$route.path == '/alertList') {
|
||||
setTimeout(()=>{
|
||||
//
|
||||
//1.条件名alertType
|
||||
//
|
||||
this.searchLabelList.splice(1, 1);
|
||||
this.select_list.push({
|
||||
name: this.$t('alert.list.type'),
|
||||
id: 3,
|
||||
type: 'select',
|
||||
label: 'alertType',
|
||||
disabled: false
|
||||
});
|
||||
//
|
||||
//2.条件值asset
|
||||
//
|
||||
this.select_list.forEach(val => {
|
||||
if (val.label == 'alertType') {
|
||||
val.val = this.$t('alert.config.typeOption.asset');
|
||||
val.valnum = 3;
|
||||
//alertList页type选择asset时，可以搜索asset
|
||||
if (this.$route.path == '/alertList' && val.label == 'alertType' && val.valnum == 3) {
|
||||
for (let i = 0; i < this.searchLabelList.length; i++) {
|
||||
if (this.searchLabelList[i].label == 'asset') {
|
||||
this.searchLabelList[i].disabled = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (this.$route.path == '/alertList' && val.label == 'alertType' && val.valnum != 3) {
|
||||
let ind = -1;
|
||||
for (let i = 0; i < this.searchLabelList.length; i++) {
|
||||
if (this.searchLabelList[i].label == 'asset') {
|
||||
this.searchLabelList[i].disabled = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < this.select_list.length; i++) {
|
||||
if (this.select_list[i].label == 'asset') {
|
||||
ind = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (ind >= 0) {
|
||||
this.close_selcet_list(ind);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
//
|
||||
//3.条件名asset
|
||||
//
|
||||
this.input_list = false;
|
||||
this.searchLabelList.splice(2, 1);
|
||||
this.select_list.push({
|
||||
name: this.$t('asset.asset'),
|
||||
id: 11,
|
||||
type: 'asset',
|
||||
label: 'asset',
|
||||
disabled: false
|
||||
});
|
||||
//
|
||||
//4.条件值：指定的asset
|
||||
//
|
||||
let assetHost = '';
|
||||
for (let i = 0; i < this.assetSelect.length; i++) {
|
||||
if (this.assetSelect[i].id == newData) {
|
||||
assetHost = this.assetSelect[i].host;
|
||||
}
|
||||
}
|
||||
this.select_list.forEach(val => {
|
||||
if (val.label == 'asset') {
|
||||
val.val = assetHost;
|
||||
val.valnum = newData;
|
||||
}
|
||||
});
|
||||
this.input_sreach = '';
|
||||
this.sreach_num = this.select_list.length;
|
||||
this.change_sreach_show = false;
|
||||
this.input_list = true;
|
||||
//
|
||||
//5.点击搜索
|
||||
//
|
||||
this.select();
|
||||
}, 100);
|
||||
this.$store.commit('assetForAlertListChange', '');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
props:['searchMsg','defaultItem','defaultValue'],
|
||||
@@ -314,6 +410,32 @@
|
||||
if(val.label == selectLabel){
|
||||
val.val = label;
|
||||
val.valnum = value;
|
||||
//alertList页type选择asset时，可以搜索asset
|
||||
if (this.$route.path == '/alertList' && val.label == 'alertType' && val.valnum == 3) {
|
||||
for (let i = 0; i < this.searchLabelList.length; i++) {
|
||||
if (this.searchLabelList[i].label == 'asset') {
|
||||
this.searchLabelList[i].disabled = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (this.$route.path == '/alertList' && val.label == 'alertType' && val.valnum != 3) {
|
||||
let ind = -1;
|
||||
for (let i = 0; i < this.searchLabelList.length; i++) {
|
||||
if (this.searchLabelList[i].label == 'asset') {
|
||||
this.searchLabelList[i].disabled = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < this.select_list.length; i++) {
|
||||
if (this.select_list[i].label == 'asset') {
|
||||
ind = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (ind >= 0) {
|
||||
this.close_selcet_list(ind);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
this.input_sreach = '';
|
||||
@@ -495,8 +617,10 @@
|
||||
objectInfo[val.label] = val.valnum;
|
||||
} else if (val.type == 'dc') {
|
||||
objectInfo.idcId = val.valnum;
|
||||
} else if (val.type == 'asset') {
|
||||
} else if (val.type == 'asset' && this.$route.path == "/project") {
|
||||
objectInfo.assetId = val.valnum;
|
||||
} else if (val.type == 'asset' && this.$route.path == "/alertList") {
|
||||
objectInfo.linkId = val.valnum;
|
||||
} else {
|
||||
objectInfo[val.label] = val.val;
|
||||
}
|
||||
@@ -759,7 +883,24 @@
|
||||
},
|
||||
//删除要搜索的条件
|
||||
close_selcet_list(ind, e){
|
||||
if (e) {
|
||||
this.stop_click(e)
|
||||
}
|
||||
// 处理alertType--asset联动问题
|
||||
if (this.select_list[ind].label == 'alertType') {
|
||||
for (let i = 0; i < this.select_list.length; i++) {
|
||||
if (this.select_list[i].label == 'asset') {
|
||||
this.close_selcet_list(i);
|
||||
for (let j = 0; j < this.searchLabelList.length; j++) {
|
||||
if (this.searchLabelList[j].label == 'asset') {
|
||||
this.searchLabelList[j].disabled = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.searchMsg.searchLabelList.forEach((val, key) => {
|
||||
if (this.select_list[ind].id == val.id) {
|
||||
this.searchLabelList.splice(key + 1, 0, val)
|
||||
@@ -998,7 +1139,7 @@
|
||||
if (this.$route.path == '/promServer') {
|
||||
this.getDcData();
|
||||
}
|
||||
if (this.$route.path == '/project') {
|
||||
if (this.$route.path == '/project' || this.$route.path == '/alertList') {
|
||||
this.getAssetData();
|
||||
}
|
||||
if (this.$route.path == '/asset') {
|
||||
|
||||
@@ -154,6 +154,12 @@ export default {
|
||||
type: 'selectString',
|
||||
label: 'severity',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 11,
|
||||
name: this.$t('asset.asset'),
|
||||
type: 'asset',
|
||||
label: 'asset',
|
||||
disabled: true
|
||||
}],
|
||||
},
|
||||
searchLabel: { //搜索参数
|
||||
|
||||
@@ -4,6 +4,9 @@
|
||||
<div class="sidebar-title">Asset</div>
|
||||
<div class="sidebar-info">
|
||||
<!--<div class="sidebar-info-header">ALL</div>-->
|
||||
<el-checkbox class="sidebar-info-item" :checked="(checkList.length == checkListData.length) && checkListData.length > 0" @change="dcSelectAll">
|
||||
<span style="font-weight: bold;">All</span>
|
||||
</el-checkbox>
|
||||
<el-checkbox-group v-model="checkList" size="small" @change="getSingleAsset()">
|
||||
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': checkList.indexOf(item.id) != -1}"
|
||||
v-for="(item,key) in checkListData" :key="key" :label=item.id>
|
||||
@@ -13,67 +16,6 @@
|
||||
<i class="el-icon-edit-outline" @click="getSingleIDCData(item.id,'edit')"></i>
|
||||
</template>
|
||||
</idc-config-box>
|
||||
<!--<el-popover
|
||||
placement="left"
|
||||
v-model="item[item.id]"
|
||||
>
|
||||
<div class="pop-window-assetType-content">
|
||||
<div class="right-box-top-btns">
|
||||
<div class="right-box-top-btn right-box-top-btn-full"
|
||||
@click="item[item.id] = false">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-close"></i>
|
||||
</div>
|
||||
<span>{{$t('overall.esc')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pop-window">
|
||||
<span style="display: block;padding-bottom: 20px">标题</span>
|
||||
<div style="padding-top: 10px;padding-left: 20px">
|
||||
<div>
|
||||
<label style="font-size: 12px">DN name</label>
|
||||
<input class='sidebar-pop-input' v-model="addIdcData.popName"/>
|
||||
</div>
|
||||
<div style="padding-top: 40px">
|
||||
<label style="font-size: 12px">Loaction</label>
|
||||
<input class='sidebar-pop-input' v-model="addIdcData.location"/>
|
||||
</div>
|
||||
<div style="padding-top: 40px">
|
||||
<label style="font-size: 12px;padding-right: 20px">负责人</label>
|
||||
<select class='sidebar-pop-input-select'
|
||||
style="margin-left:-40px "
|
||||
v-model="addIdcData.principal"
|
||||
clearable>
|
||||
<option
|
||||
v-for="item in idcUserData"
|
||||
:key="item.key"
|
||||
:label="item.username"
|
||||
:value="item.userId"
|
||||
>
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="padding-top: 40px">
|
||||
<label style="font-size: 12px">Tel</label>
|
||||
<input class='sidebar-pop-input' v-model="addIdcData.tel"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box-bottom-btns">
|
||||
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
|
||||
@click.stop="item[item.id]= false">
|
||||
{{$t('overall.cancel')}}
|
||||
</div>
|
||||
<div class="right-box-bottom-btn right-box-bottom-btn-50"
|
||||
@click="editData('idc',item)">
|
||||
{{$t('overall.save')}}
|
||||
</div>
|
||||
</div>
|
||||
<span class="checkbox-edit" slot="reference"
|
||||
@click.prevent="getSingleIDCData(item.id,'edit')"><i
|
||||
class="el-icon-edit-outline"></i></span>
|
||||
</el-popover>-->
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
@@ -128,15 +70,19 @@
|
||||
<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=='Module'" @click="getAssetModuleList(scope.row.id)">
|
||||
<div v-if="item.prop=='Module'">
|
||||
<div v-if="scope.row.moduleNum > 0" @click="getAssetModuleList(scope.row.id)">
|
||||
<module-list-pop :assetId="scope.row.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + scope.row.id">
|
||||
<template v-slot:optionZone>
|
||||
<div class="tab-input-square link">{{scope.row.moduleNum}}</div>
|
||||
<div class="tab-input-square tab-input-square-high link">{{scope.row.moduleNum}}</div>
|
||||
</template>
|
||||
</module-list-pop>
|
||||
</div>
|
||||
<div v-else class="tab-input-square">{{scope.row.moduleNum}}</div>
|
||||
</div>
|
||||
<div v-if="item.prop=='Alert'">
|
||||
<div class="tab-input-square link">{{scope.row.alertNum}}</div>
|
||||
<div v-if="scope.row.alertNum > 0" class="tab-input-square tab-input-square-high link" @click="jumpToAlertMsg(scope.row.id)">{{scope.row.alertNum}}</div>
|
||||
<div class="tab-input-square" v-else>{{scope.row.alertNum}}</div>
|
||||
</div>
|
||||
<div v-if="item.prop=='dataCenter'">
|
||||
<idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" placement="left" @after="getAssetData(null, true)" :button-class="'checkbox-edit'">
|
||||
@@ -259,7 +205,7 @@
|
||||
prop: 'state',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.endpoints"),
|
||||
label: this.$t("asset.tableTitle.modules"),
|
||||
prop: 'Module',
|
||||
show: true,
|
||||
}, {
|
||||
@@ -294,10 +240,12 @@
|
||||
label: this.$t("asset.tableTitle.principalTel"),
|
||||
prop: 'tel',
|
||||
show: true,
|
||||
width: 115
|
||||
}, {
|
||||
label: this.$t('config.account.option'),
|
||||
prop: 'option',
|
||||
show: true,
|
||||
width: 115
|
||||
}],
|
||||
tableData: [],
|
||||
checkListData: [],
|
||||
@@ -387,9 +335,20 @@
|
||||
created() {
|
||||
this.checkList.push(this.$store.state.assetData.selectedData)
|
||||
this.getSingleAsset()
|
||||
|
||||
},
|
||||
methods: {
|
||||
dcSelectAll() { //DC全选
|
||||
if (this.checkListData.length > 0) {
|
||||
if (this.checkList.length != this.checkListData.length) {
|
||||
this.checkList = [];
|
||||
for (let i = 0; i < this.checkListData.length; i++) {
|
||||
this.checkList.push(this.checkListData[i].id);
|
||||
}
|
||||
} else {
|
||||
this.checkList = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
openModuleBox(module) {
|
||||
this.module = module;
|
||||
this.$refs.moduleBox.show(true);
|
||||
@@ -437,6 +396,15 @@
|
||||
});
|
||||
window.open(routeData.href);
|
||||
},
|
||||
jumpToAlertMsg(assetId) {
|
||||
this.$store.commit('assetForAlertListChange', assetId);
|
||||
this.$router.push({
|
||||
path: "/alertList",
|
||||
query: {
|
||||
t: +new Date()
|
||||
}
|
||||
});
|
||||
},
|
||||
getAssetData(data, flushRightBoxDc) {
|
||||
this.searchLabel = Object.assign(this.searchLabel, this.pageObj);
|
||||
this.$get('asset', this.searchLabel).then(response => {
|
||||
@@ -677,13 +645,16 @@
|
||||
}
|
||||
|
||||
.tab-input-square {
|
||||
border: 1px solid #1166bb;
|
||||
border: 1px solid #606266;
|
||||
height: 22px;
|
||||
width: 50px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
.tab-input-square-high {
|
||||
border: 1px solid #1166bb;
|
||||
}
|
||||
|
||||
.account-list-option {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -58,7 +58,6 @@ export default {
|
||||
},
|
||||
hidePop() {
|
||||
this.pageObj.name = '';
|
||||
this.pageObj.assetId = '';
|
||||
this.moduleList = [];
|
||||
},
|
||||
show(show) {
|
||||
|
||||
@@ -8,7 +8,8 @@ const store = new Vuex.Store({
|
||||
selectedData:'',
|
||||
step: 0
|
||||
},
|
||||
assetDcList: 0,
|
||||
assetDcList: 0, //监听此值，改变则刷新dc列表
|
||||
assetForAlertList: '', //asset页跳转alertList时传递的assetId
|
||||
currentProject: {
|
||||
id: '',
|
||||
name: '',
|
||||
@@ -58,6 +59,9 @@ const store = new Vuex.Store({
|
||||
setPosition(state, data) { //设置坐标
|
||||
state.position = data;
|
||||
},
|
||||
assetForAlertListChange(state, data) { //asset跳转alertmsg时
|
||||
state.assetForAlertList = data;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user