gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'codeCheck' of https://git.mesalab.cn/nezha/nezha-fronted into codeCheck

Browse Source
This commit is contained in:
chenjinsong
2020-01-10 20:09:45 +08:00
parent 97b7b15bfc cda2dd7daf
commit a127516f73
16 changed files with 639 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -7,10 +7,13 @@
.noData{
text-align: center
}
.list-width{
width:98%;
}
</style>
<template>
<div>
<div class="list-width">
<div class="chartBox" v-for="(item, index) in dataList" :key="item.id">
<line-chart-block v-if="item.type === 'line' || item.type === 'bar' || item.type === 4" :key="'inner' + item.id"
@@ -69,11 +72,6 @@ export default {
},
// 获取panel详情数据,获取panel下所有chart列表
getData(params) {
if (this.dataList.length > 0) {
this.$refs.editChart.forEach((item) => {
//item.showLoad();//之后要实现
});
}
//param 目前没有用
const param = {
panelId: params.panelId,
@@ -92,6 +90,11 @@ export default {
}else {
this.dataList = response.data;
}
if (this.dataList.length > 0) {
this.$refs.editChart.forEach((item) => {
item.showLoad();//之后要实现
});
}
//alert(JSON.stringify(response)); 查着，返回的内容就没有图表表达式了？？
this.dataSetFirst(this.dataList);
}
@@ -136,10 +139,11 @@ export default {
startTime = this.filter.start_time;
endTime = this.filter.end_time;
}
let step = bus.getStep(startTime,endTime);
this.$nextTick(() => {
const axiosArr = chartItem.elements.map((ele) => {
const filterItem = ele;
return this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step=3600s');
return this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step='+step);
});
// 一个图表的所有element单独获取数据
axios.all(axiosArr).then((res) => {

10
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -38,7 +38,7 @@
</el-table>
</div>
<!--全屏-->
<el-dialog title="查看" :visible.sync="screenModal" width="96%" :before-close="handleClose">
<el-dialog :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" :before-close="handleClose">
<div class="clearfix element-top-border">
<div class="float-left table-title">
{{data.title}}
@@ -59,8 +59,8 @@
</div>
<div class=" element-bottom-border" ></div>
<span slot="footer" class="dialog-footer" >
<el-button @click="screenModal = false">取 消</el-button>
<el-button type="primary" @click="screenModal = false">确 定</el-button>
<el-button @click="screenModal = false">{{$t('dashboard.panel.cancel')}}</el-button>
<el-button type="primary" @click="screenModal = false">{{$t('dashboard.panel.confirm')}}</el-button>
</span>
</el-dialog>
</div>
@@ -130,7 +130,9 @@ export default {
},
watch: {},
methods: {
showLoad() {},
showLoad() {
this.tableLoading = true;
},
// 展示图表编辑区
showTool() {
this.toolbox = !this.toolbox;

278
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -25,15 +25,13 @@
<!--
<Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
<el-dialog class="line-chart-block-modal"
title="查看"
:title="$t('dashboard.panel.view')"
:visible.sync="screenModal"
width="90%"
:before-close="handleClose"
@opened="initDialog">
<el-row class="element-top-border" >
<div class="float-right">
<div class="block">
<!--
<div class="float-right" style="padding-top:10px;">
<el-date-picker size="small" ref="calendar"
format="yyyy/MM/dd HH:mm"
@change="dateChange"
@@ -45,15 +43,13 @@
:end-placeholder="$t('dashboard.panel.endTime')"
align="right">
</el-date-picker>
-->
</div>
</div>
</el-row>
<div class="line-area " ref="screenShowArea" ></div>
<div class=" element-bottom-border" ></div>
<span slot="footer" class="dialog-footer" >
<el-button @click="screenModal = false">取 消</el-button>
<el-button type="primary" @click="screenModal = false">确 定</el-button>
<el-button @click="screenModal = false">{{$t('dashboard.panel.cancel')}}</el-button>
<el-button type="primary" @click="screenModal = false">{{$t('dashboard.panel.confirm')}}</el-button>
</span>
</el-dialog>
@@ -62,13 +58,8 @@
</template>
<script>
import axios from 'axios';
//import highstock from 'highcharts/highstock';
import echarts from 'echarts';
import bus from '../../libs/bus';
//import calendarSelect from '../page/calendar-select';
//import { getQueryChart } from '../../models/service';
//require('highcharts/modules/no-data-to-display')(highstock);
export default {
name: 'lineChartBlock',
@@ -107,7 +98,7 @@ export default {
firstLoad: false, // 是否第一次加载
highchartStore: null, // 保存图表数据
echartStore:null,// 保存图表数据
highchartModalStore: null, // 全屏查看时数据
echartModalStore: null, // 全屏查看时数据
chartType: 'line', // 图表类型
screenModal: false,
// 查询数据使用
@@ -116,8 +107,90 @@ export default {
end_time: '',
},
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
legend:[]
legend:[],
// firstShow: false, // 默认不显示操作按钮,
searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
pickerOptions: {
shortcuts: [
{
text: this.$t("dashboard.panel.recOne"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setHours(start.getHours() - 1);
picker.$emit('pick', [start, end]);
}
},{
text: this.$t("dashboard.panel.recFour"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setHours(start.getHours() - 4);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.recOneDay"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 1);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.yesterday"),
onClick(picker) {
const start = new Date();
const end = new Date();
start.setDate(start.getDate() - 1);
start.setHours(0);
start.setMinutes(0);
start.setSeconds(0);
end.setDate(end.getDate() - 1);
end.setHours(23);
end.setMinutes(59);
end.setSeconds(59);
picker.$emit('pick', [start, end]);
}
},{
text: this.$t("dashboard.panel.recSevenDay"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 7);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.recOneMonth"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 30);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.curMonth"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(1);
start.setHours(0);
start.setMinutes(0);
picker.$emit('pick', [start, end]);
}
},{
text: this.$t("dashboard.panel.lastMonth"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(1);
start.setMonth(start.getMonth() - 1);
end.setDate(0);
start.setStart();
end.setEnd();
picker.$emit('pick', [start, end]);
}
}]
},
};
},
computed: {
@@ -140,7 +213,11 @@ export default {
if ( chartInfo.type === 4) {//line,bar
this.chartType = 'line';
}
this.echartStore = echarts.init(ele);
if (chartSite === 'local') {
this.echartStore = echarts.init(ele);
}else if (chartSite === 'screen') {
this.echartModalStore = echarts.init(ele);
}
var chartWidth = ele.clientWidth;
var option = {
title: {
@@ -331,6 +408,7 @@ export default {
*/
this.echartStore.setOption(option);//创建图表
this.echartStore.hideLoading();
this.echartStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
} else if (chartSite === 'screen') { // 全屏显示
/*
option.series = dataArg.map((item) => {// params.series = dataArg.map((item) => {
@@ -378,10 +456,11 @@ export default {
});
*/
// eslint-disable-next-line
this.echartStore.setOption(option);//显示全屏界面
this.echartStore.hideLoading();
this.echartModalStore.clear();
this.echartModalStore.setOption(option);//显示全屏界面
this.echartModalStore.hideLoading();
this.echartModalStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
}
this.echartStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,legend) {
@@ -392,6 +471,8 @@ export default {
this.panelIdInner = panelId;
this.data = chartItem;
this.seriesItem = seriesItem;
this.searchTime[0] = filter.start_time;
this.searchTime[1] = filter.end_time;
this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'local',legend);
/*
if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 4) {
@@ -432,15 +513,161 @@ export default {
this.screenModal = true;
},
dateChange(time) {
/*
this.filter.start_time = `${time[0]}:00`;
this.filter.end_time = `${time[1]}:59`;
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
if (this.showSetting) {
this.getQueryChart('list');
} else {
this.getQueryChart('dashboard');
}
*/
},
// 查询数据,修改日期查询全屏数据
getQueryChart(type) {
if (this.echartModalStore) {
this.echartModalStore.showLoading();
}
let axiosArr = [];
this.$nextTick(() => {
if (type === 'list') { // 普通模式,主控台使用
let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
if(!startTime || !endTime){//如果时间为空，则默认取最近1小时
let now = new Date();
startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
endTime = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
this.searchTime[0] = startTime;
this.searchTime[1] = endTime;
}
let step = bus.getStep(startTime,endTime);
axiosArr = this.data.elements.map((ele) => {
const filterItem = ele;
return this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step='+step);
});
} else if (type === 'dashboard') { // 概览模式,指标概览中使用
/*
// 概览模式,需要区分单独一个和多个
if (this.stableFilter.chartCount === 'multiple') {
// 所有tag标签
const tagAllArr = this.proTags(this.data.tags);
// 根据title格式化的标签
const titles = this.data.title.split(',');
const titleArr = titles.map(item => item.trim());
// 获取所需标签
const tagArr = this.getCompilation(tagAllArr, titleArr);
axiosArr = [getQueryChart({
product_id: this.productId,
metric: this.data.metric,
tags: tagArr.toString(),
start: this.filter.start_time,
end: this.filter.end_time,
})];
} else {
axiosArr = [getQueryChart({
product_id: this.productId,
metric: this.data.metric,
tags: this.data.tags,
start: this.filter.start_time,
end: this.filter.end_time,
})];
}
*/
}
// 一个图表
axios.all(axiosArr).then((res) => {
if (res.length > 0) {
const series = [];
const legend = [];
const sumData = {
name: 'sum',
data: [],
visible: true,
threshold: null,
};
res.forEach((response) => {
if (response.status === 'success') {
if (response.data.result) {
// 循环处理每个elements下获取的数据列
response.data.result.forEach((queryItem,innerPos) => {
const seriesItem = {
theData: {
name: '',
data: [],
type:this.data.type,
//visible: true,
//threshold: null,
},
metric_name: '',
};
// 图表中每条线的名字,后半部分
let host = `${queryItem.metric.__name__}{`;//up,
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对
const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
// 判断是否有数据
if (dpsArr.length > 0 && tagsArr.length > 0) {
tagsArr.forEach((tag, i) => {
if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`;
}
});
if(host.endsWith(',')){host = host.substr(0,host.length-1);}
host +="}";
legend.push(host);
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host;
seriesItem.metric_name = seriesItem.theData.name;
// 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem))
seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
/*曲线汇总暂不需要
if (sumData.data[dpsIndex]) {
const sumNum = sumData.data[dpsIndex][1] || 0;
sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
} else {
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
}
*/
return [dpsItem[0] * 1000, dpsItem[1]];
});
series.push(seriesItem.theData);
} else if (this.data.elements && this.data.elements[innerPos]) {
// 无数据提示
/*
const currentInfo = chartItem.elements[innerPos];
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
this.$message.warning({
duration: 15,
content: errorMsg,
closable: true,
});
*/
}
});
}
}
});
/*
if (series.length && this.data.type === 4) {
series.push(sumData);
}
*/
this.initChart(this.data, series, this.$refs.screenShowArea, 'screen',legend);
}
}).catch((error) => {
if (error) {
this.$message.warning({
content: this.$t("tip.refreshLater"),//'Please refesh later',//请稍后刷新
duration: 3,
});
}
});
});
},
showLoad() {
if (this.echartStore) {
this.echartStore.showLoading();
}
},
/*
handleClose(done) {
@@ -589,11 +816,6 @@ export default {
});
},
showLoad() {
if (this.highchartStore) {
this.highchartStore.showLoading();
}
},
// 获取格式
getNumStr(num) {
if (num >= 1000) {

11
nezha-fronted/src/components/common/header.vue
View File

@@ -57,9 +57,11 @@
<el-menu-item :index="'3-' + index">
<div @click="jumpToAsset('asset',item.id)">
<span>{{item.name}}</span>
<idc-config-box :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'menu-edit'">
<idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :button-class="'menu-edit'">
<template v-slot:optionZone>
<i class="el-icon-edit-outline" @click="getIDCOptionData(item.id)" style="color: inherit"></i>
<div @click="closeAllPop">
<i class="el-icon-edit-outline" @click="getIDCOptionData(item.id)" style="color: inherit"></i>
</div>
</template>
</idc-config-box>
<!--<el-popover
@@ -425,6 +427,11 @@
window.location.reload();
}
},
closeAllPop:function(){
this.$refs.idcConfigBox.forEach((item)=>{
item.show(false)
})
},
getProjectList() {
this.$get('project', {}).then(response => {
if (response.code == 200) {

5
nezha-fronted/src/components/common/language/cn.js
View File

@@ -77,7 +77,10 @@ const cn = {
threeMinutes:'3分钟',
fiveMinutes:'5分钟',
tenMinutes:'10分钟',
}
},
view:'查看',
confirm:'确 定',
cancel:'取 消'
},
metric:{
name:"指标名称",

7
nezha-fronted/src/components/common/language/en.js
View File

@@ -30,7 +30,7 @@ const en = {
panel:{
title:'Panel',
searchItem:{
name:'Title'
name:'name'
},
//面板-侧滑框
createPanelTitle: "Create Panel",
@@ -86,7 +86,10 @@ const en = {
threeMinutes:'3 mins',
fiveMinutes:'5 mins',
tenMinutes:'10 mins',
}
},
view:'View',
confirm:'Ok',
cancel:'Cancel'
},
metric:{
name:"Metric",

202
nezha-fronted/src/components/common/popBox/cabinetConfig.vue Normal file
View File

@@ -0,0 +1,202 @@
<template>
<el-popover :placement="placement" width="400" @hide="hidePop" ref="popBox" v-model="popBox.show">
<div class="">
<div class="pop-window-assetType-content">
<div class="pop-top-btns">
<button type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<span class="top-tool-btn-txt" v-if="popBox.isEdit">{{$t('overall.save')}}</span>
<span class="top-tool-btn-txt" v-else>{{$t('overall.edit')}}</span>
</button>
<button type="button" @click="esc" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</div>
<!--标题-->
<div class="pop-title">{{title}}</div>
<!--表单内容-->
<el-form class="pop-item-wider" :model="cabinet" ref="cabinetForm" :rules="rules">
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.name')" prop="name">
<el-input size='mini' v-model="cabinet.name" v-if="popBox.isEdit"/>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{cabinet.name}}</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')" prop="uSize">
<div :class="{'right-box-form-content-txt':!popBox.isEdit}" >{{cabinet.uSize}}</div>
<el-slider v-model.number="cabinet.uSize" :max="47" v-if="popBox.isEdit"></el-slider>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.remark')">
<el-input size='mini' v-model="cabinet.remark" type="textarea" :rows="2" v-if="popBox.isEdit"/>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{cabinet.remark}}</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.DC')" prop="idcId">
<el-select size='mini' v-model="cabinet.idcId" clearable style="width: 100%;" placeholder="" v-if="popBox.isEdit">
<el-option v-for="item in idcDatas" :key="item.key" :label="item.name" :value="item.id">
<span>{{ item.name }}</span>
</el-option>
</el-select>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc?idc.name:''}}</div>
</el-form-item>
</el-form>
</div>
</div>
<span :class="buttonClass" @click.prevent.stop="" slot="reference">
<slot name="optionZone">
<i class="el-icon-plus"></i>
</slot>
</span>
</el-popover>
</template>
<script>
export default {
name: "cabinetConfig",
props:{
postCabinet:{type:Object},
placement:{type:String},
buttonClass:{type:String},
isEdit:{type:Boolean,default:true}
},
created() {
this.init();
},
data(){
return {
title:"",
rules:{
name: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
uSize: [
{required: true, type: 'number', min: 1, max: 47, message: this.$t('validate.required'), trigger: 'blur'}
],
idcId: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
]
},
cabinet:{},
popBox:{isEdit:false,show:false},
idcDatas:[],
idc:null
}
},
methods:{
init:function(){
this.getIdcDatas();
},
resetData:function(){
let temp=this;
temp.cabinet={
name:'',
uSize:0,
idcId:null,
remark:''
}
},
saveOrToEdit(){
if (!this.popBox.isEdit) {
this.toEdit(this.cabinet);
} else {
this.save();
}
},
save:function(){
let temp=this;
temp.$refs.cabinetForm.validate((valid => {
if(valid){
if (temp.cabinet.id) {
this.$put('cabinet', temp.cabinet).then(res => {
const h = temp.$createElement;
if (res.code === 200) {
temp.$message({duration: 2000, type: 'success', message: temp.$t("tip.saveSuccess")});
temp.$emit("after",temp.cabinet.idcId);
temp.esc();
} else {
temp.$message.error(res.msg);
}
})
} else {
temp.$post('cabinet', temp.cabinet).then(res => {
const h = temp.$createElement;
if (res.code === 200) {
temp.$message({duration: 2000, type: 'success', message: temp.$t("tip.saveSuccess")});
temp.$emit("after",temp.cabinet.idcId);
temp.esc();
} else {
temp.$message.error(res.msg);
}
})
}
}else{
return false;
}
}))
},
show:function(isShow,isEdit){
this.popBox.show=isShow;
this.popBox.isEdit=isEdit;
},
toEdit:function(u){
this.cabinet = Object.assign({}, u);
this.popBox.isEdit = true;
this.title = this.$t('asset.createAssetTab.editCabinetTab.title') + " ID：" + this.cabinet.id;
this.popBox.show = true;
},
getIdcDatas:function(){
let temp=this;
temp.$get('idc').then(response => {
if (response.code === 200) {
temp.idcDatas = response.data.list;
for (let i in temp.idcDatas){
let item=temp.idcDatas[i];
if(item.id==temp.cabinet.idcId){
temp.idc=item;
break;
}
}
}
})
},
openBox:function(){
this.popBox.show=true;
},
esc:function(){
this.popBox.show=false;
},
hidePop:function(){//隐藏事件触发方法
if(this.postCabinet&&this.postCabinet.id){
this.cabinet=this.postCabinet;
}else{
this.resetData();
}
this.clearValidate();
},
clearValidate:function(){
this.$refs.cabinetForm.clearValidate();
}
},
watch:{
postCabinet: {
immediate: true,
deep: true,
handler(n, o) {
if (n && n.id) {
this.title =this.popBox.isEdit? this.$t('asset.createAssetTab.editCabinetTab.title') + " ID：" + n.id : this.$t('asset.createAssetTab.cabinet') + " ID：" + n.id;
this.cabinet=n;
} else {
this.title = this.$t('asset.createAssetTab.AddCabinetTab.title');
this.resetData();
}
}
},
isEdit:{
immediate: true,
handler(n, o) {
this.popBox.isEdit=n;
}
}
}
}
</script>
<style scoped>
</style>

59
nezha-fronted/src/components/common/dcConfig.vue → nezha-fronted/src/components/common/popBox/dcConfig.vue
View File

@@ -1,13 +1,14 @@
<template>
<el-popover :placement="placement" width="400" @hide="hidePop" ref="popBox" v-model="popBox.show">
<el-popover :placement="placement" width="400" @hide="hidePop" ref="popBox" v-model="popBox.show">
<div class="">
<!-- begin--顶部按钮-->
<div class="pop-top-btns">
<button type="button" v-if="popBox.isEdit && idc.id != ''" @click="del" class="nz-btn nz-btn-size-small nz-btn-style-light">
<button type="button" v-if="idc.id != ''" @click="del" class="nz-btn nz-btn-size-small nz-btn-style-light">
<span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button type="button" @click="save" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
<button type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<span class="top-tool-btn-txt" v-if="popBox.isEdit">{{$t('overall.save')}}</span>
<span class="top-tool-btn-txt" v-else>{{$t('overall.edit')}}</span>
</button>
<button type="button" @click="esc" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
@@ -20,18 +21,22 @@
<div class="pop-item-wider">
<el-form class="right-box-form" :model="idc" label-position="left" label-width="150px" :rules="rules" ref="idcForm">
<el-form-item :label="$t('asset.createAssetTab.dcName')" prop="name">
<el-input type="text" placeholder="" v-model="idc.name" size="mini" maxlength="64"></el-input>
<el-input type="text" placeholder="" v-model="idc.name" size="mini" maxlength="64" v-if="popBox.isEdit"></el-input>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.name}}</div>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.location')" prop="location">
<el-input type="text" placeholder="" v-model="idc.location" size="mini"></el-input>
<el-input type="text" placeholder="" v-model="idc.location" size="mini" v-if="popBox.isEdit"></el-input>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.location}}</div>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.principal')" prop="principal">
<el-select v-model="idc.principal" clearable size="mini" placeholder="">
<el-select v-model="idc.principal" clearable size="mini" placeholder="" v-if="popBox.isEdit">
<el-option v-for="item in principals" :key="item.id" :label="item.username" :value="item.userId"></el-option>
</el-select>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.principal}}</div>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.tel')" prop="tel">
<el-input type="text" placeholder="" v-model="idc.tel" size="mini"></el-input>
<el-form-item :label="$t('asset.createAssetTab.tel')" prop="tel" >
<el-input type="text" placeholder="" v-model="idc.tel" size="mini" v-if="popBox.isEdit"></el-input>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.tel}}</div>
</el-form-item>
</el-form>
</div>
@@ -50,7 +55,8 @@
props:{
postIdc:{type:Object},
placement:{type:String},
buttonClass:{type:String}
buttonClass:{type:String},
isEdit:{type:Boolean,default:true}
},
created() {
this.init();
@@ -90,7 +96,7 @@
},
idc:{},
principals:[],
popBox:{isEdit:false,show:false}
popBox:{isEdit:true,show:false}
}
},
methods:{
@@ -118,6 +124,13 @@
}
})
},
saveOrToEdit:function(){
if (!this.popBox.isEdit) {
this.toEdit(this.idc);
} else {
this.save();
}
},
save:function(){
let temp=this;
temp.$refs.idcForm.validate((valide)=>{
@@ -126,8 +139,9 @@
if(!temp.idc.id){
temp.$post('idc', temp.idc).then(response => {
if (response.code === 200) {
temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.deleteSuccess")});
temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.saveSuccess")});
temp.$emit("after");
temp.$store.commit('assetDcListChange');
temp.esc();
} else {
this.$message.error(response.msg);
@@ -136,8 +150,9 @@
}else{
this.$put('idc', temp.idc).then(response => {
if (response.code === 200) {
temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.deleteSuccess")});
temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.saveSuccess")});
temp.$emit("after");
temp.$store.commit('assetDcListChange');
temp.esc();
} else {
this.$message.error(response.msg);
@@ -150,6 +165,16 @@
}
});
},
toEdit:function(u){
this.idc = Object.assign({}, u);
this.popBox.isEdit = true;
this.title = this.$t('asset.createAssetTab.editIdcTab.title') + " ID：" + this.idc.id
this.popBox.show = true;
},
show:function(isShow,isEdit){
this.popBox.show=isShow;
this.popBox.isEdit=isEdit;
},
esc:function(){
this.popBox.show=false;
},
@@ -191,16 +216,20 @@
handler(n, o) {
if (n && n.id) {
this.title = this.$t('asset.createAssetTab.editIdcTab.title') + " ID：" + n.id;
this.popBox.isEdit=true;
this.idc=n;
} else {
this.title = this.$t('asset.createAssetTab.AddIdcTab.title');
this.popBox.isEdit=false;
this.resetData();
}
}
},
isEdit:{
immediate: true,
handler(n, o) {
this.popBox.isEdit=n;
}
}
}
}
</script>

18
nezha-fronted/src/components/page/asset/accountConfig.vue
View File

@@ -2,7 +2,7 @@
<div>
<el-form class="pop-item-wider" :model="account" :rules="rules" ref="accountForm">
<el-form-item :label="$t('asset.createAssetTab.loginType')" size="mini">
<div class="nz-btn-group float-left" style="padding-top: 4px;">
<div class="nz-btn-group float-left" style="padding-top: 4px;" v-if="isEdit">
<button type="button" @click="changeLoginType(1)"
class="nz-btn nz-btn-size-small float-left"
:class="{'nz-btn-disabled nz-btn-style-normal' : account.authType == 1, 'nz-btn-style-light' : account.authType == 2}">
@@ -14,17 +14,20 @@
<span>{{$t('asset.createAssetTab.ssh')}}</span>
</button>
</div>
<div class="right-box-form-content-txt" v-if="!isEdit">{{account.authType}}</div>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
<el-input size="mini" v-model="account.user"/>
<el-input size="mini" v-model="account.user" v-if="isEdit"/>
<div class="right-box-form-content-txt" v-if="!isEdit">{{account.user}}</div>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')" v-show="account.authType==1" >
<el-form-item :label="$t('asset.createAssetTab.password')" v-show="account.authType==1" v-if="isEdit">
<el-input size="mini" type="password" v-model="account.pwd"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port">
<el-input size="mini" v-model="account.port"/>
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port" >
<el-input size="mini" v-model="account.port" v-if="isEdit"/>
<div class="right-box-form-content-txt" v-if="!isEdit">{{account.port}}</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="account.authType==2" prop="file">
<el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="account.authType==2" prop="file" v-if="isEdit">
<el-upload class="upload-demo" ref="upload" action="" :file-list="uploadFileList" :on-change="handleChange" :auto-upload="false">
<div slot="tip" class="el-upload__tip" v-if="account.privateKey" >{{$t('asset.createAssetTab.sshKeyWasConfig')}}</div>
<button type="button" class="nz-btn nz-btn-size-small nz-btn-style-normal">
@@ -42,7 +45,8 @@ export default {
name: "accountConfig",
props:{
account:{type:Object},
asComponent:{type:Boolean,default:false}
asComponent:{type:Boolean,default:false},
isEdit:{type:Boolean,default:true}
},
created() {
},

25
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -11,9 +11,12 @@
<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>
<span>{{item.name}}</span>
<idc-config-box :post-idc="addIdcData" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'">
<idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'">
<template v-slot:optionZone>
<i class="el-icon-edit-outline" @click="getSingleIDCData(item.id,'edit')"></i>
<span @click="closeAllPop">
<i class="el-icon-edit-outline" @click="getSingleIDCData(item.id,'edit')"></i>
</span>
</template>
</idc-config-box>
</el-checkbox>
@@ -85,15 +88,19 @@
<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'">
<idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left" @after="getAssetData(null, true)" :button-class="'checkbox-edit'">
<template v-slot:optionZone>
<span class="link">{{scope.row.idc.name}}</span>
<span class="link" @click="closeAllPop">{{scope.row.idc.name}}</span>
</template>
</idc-config-box>
<!--<span class="link">{{scope.row.idc.name}}</span>-->
</div>
<div v-if="item.prop=='cabinet'">
<span class="link">{{returnData(scope.row.cabinet)}}</span>
<cabinet-config-box v-if="scope.row.cabinet&&scope.row.cabinet!='--'" ref="cabinetConfigBox" placement="left" :is-edit="false" :post-cabinet="JSON.parse(JSON.stringify(scope.row.cabinet))" @after="getAssetData(null, true)">
<span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span>
</cabinet-config-box>
<span v-else>{{returnData(scope.row.cabinet)}}</span>
</div>
<div v-if="item.prop=='model'">
<span>{{scope.row.model.name}}</span>
@@ -591,6 +598,14 @@
this.getAssetData();
this.getIDCOptionData();
},
closeAllPop:function(){
this.$refs.idcConfigBox.forEach((item)=>{
item.show(false)
})
this.$refs.cabinetConfigBox.forEach((item)=>{
item.show(false)
})
},
search(searchObj) {
this.searchLabel = {};
this.pageObj.pageNo = 1;

217
nezha-fronted/src/components/page/asset/assetAddUnit.vue
View File

@@ -94,7 +94,7 @@
<el-input class="input-x-mini" v-model="item.value"/>
</span>
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'type',index)">
<i class="el-icon-edit-outline"v-if="!item.isEdit"></i>
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@@ -387,113 +387,9 @@
:value="item.id"
>
<span>{{ item.name }}</span>
<el-popover
placement="left"
trigger="manual"
v-model="item[item.name]"
width="400"
>
<div class="pop-window-assetType-content">
<div class="pop-top-btns">
<button type="button" @click="editData('cabinet',item)" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" @click="item[item.name] = false" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</div>
<!--标题-->
<div class="pop-title">{{$t('asset.createAssetTab.editCabinetTab.title')}}</div>
<!--表单内容-->
<el-form class="pop-item-wider" :model="popCabinetData" ref="cabEditForm" :rules="cabRules">
<el-form-item :label="$t('asset.createAssetTab.editCabinetTab.name')" prop="name">
<el-input size="mini" v-model="popCabinetData.name"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.editCabinetTab.uSize')" prop="uSize">
<div>{{popCabinetData.uSize}}</div>
<el-slider v-model.number="popCabinetData.uSize" :max="47"></el-slider>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.editCabinetTab.remark')">
<el-input v-model="popCabinetData.remark"
type="textarea"
size="mini"
:rows="2"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.editCabinetTab.DC')">
<el-select v-model="popCabinetData.idcId" clearable placeholder="" size="mini" style="width: 100%;" prop="idcId">
<el-option
v-for="item in IDCOptionData"
:key="item.key"
:label="item.name"
:value="item.id"
>
<span>{{ item.name }}</span>
<!-- <el-popover-->
<!-- placement="top"-->
<!-- v-model="item[item.name+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.name+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>-->
<!-- <el-form-item label="DC Name">-->
<!-- <el-input v-model="addCabIDCData.name"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="Location">-->
<!-- <el-input v-model="addCabIDCData.location"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="负责人">-->
<!-- <el-select v-model="addCabIDCData.principal"-->
<!-- clearable>-->
<!-- <el-option-->
<!-- v-for="item in idcUserData"-->
<!-- :key="item.key"-->
<!-- :label="item.username"-->
<!-- :value="item.userId"-->
<!-- >-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="Tel">-->
<!-- <el-input v-model="addCabIDCData.tel"/>-->
<!-- </el-form-item>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="right-box-bottom-btns">-->
<!-- <div class="right-box-bottom-btn right-box-bottom-btn-cancel"-->
<!-- @click.stop="item[item.name+item.id]= false">-->
<!-- {{$t('overall.cancel')}}-->
<!-- </div>-->
<!-- <div class="right-box-bottom-btn right-box-bottom-btn-50"-->
<!-- @click="editData('idc',item,'CabIDC')">-->
<!-- {{$t('overall.save')}}-->
<!-- </div>-->
<!-- </div>-->
<!-- <span class="config-dropdown-btn" slot="reference"-->
<!-- @click="getSingleIDCData(item.id,'edit')"><i-->
<!-- class="el-icon-edit-outline"></i></span>-->
<!-- </el-popover>-->
<!-- <span class="config-dropdown-btn config-dropdown-btn-delete"-->
<!-- @click.stop="deleteData('idc',item.id)"><i-->
<!-- class="el-icon-delete"></i></span>-->
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<span class="config-dropdown-btn" slot="reference"
@click.stop="getSingleCabinetData(item.id,'edit',item)">
<i class="el-icon-edit-outline"></i>
</span>
</el-popover>
<cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
<i slot="optionZone" class="el-icon-edit-outline"></i>
</cabinet-config-box>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('cabinet',item.id)">
@@ -503,107 +399,7 @@
</el-select>
<div class="right-box-row-btn right-box-row-btn-small">
<el-popover
placement="left"
trigger="click"
v-model="popCabinetVisible"
width="400"
>
<div class="pop-window-assetType-content">
<div class="pop-top-btns">
<button type="button" @click="addNewData('cabinet')" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" @click="popoverClose('cabinet')" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</div>
<!--标题-->
<div class="pop-title">{{$t('asset.createAssetTab.AddCabinetTab.title')}}</div>
<!--表单内容-->
<el-form class="pop-item-wider" :model="addCabinetData" ref="cabAddForm" :rules="cabRules">
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.name')" prop="name">
<el-input size='mini' v-model="addCabinetData.name"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')" prop="uSize">
<div>{{addCabinetData.uSize}}</div>
<el-slider v-model.number="addCabinetData.uSize" :max="47"></el-slider>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.remark')">
<el-input size='mini' v-model="addCabinetData.remark" type="textarea" :rows="2"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.DC')" prop="idcId">
<el-select size='mini' v-model="addCabinetData.idcId" clearable style="width: 100%;" placeholder="">
<el-option
v-for="item in IDCOptionData"
:key="item.key"
:label="item.name"
:value="item.id"
>
<span>{{ item.name }}</span>
<!--<el-popover
placement="left"
v-model="item[item.id+item.name]"
>
<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+item.name] = 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">{{$t('asset.createAssetTab.editIdcTab.title')}}</span>
<el-form-item :label="$t('asset.createAssetTab.editIdcTab.dcName')">
<el-input v-model="addCabIDCData.name"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.editIdcTab.location')">
<el-input v-model="addCabIDCData.location"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.editIdcTab.principal')">
<el-select v-model="addCabIDCData.principal"
clearable>
<el-option
v-for="item in idcUserData"
:key="item.key"
:label="item.username"
:value="item.userId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.editIdcTab.tel')">
<el-input v-model="addCabIDCData.tel"/>
</el-form-item>
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click.stop="item[item.id+item.name]= false">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="editData('idc',item,'CabIDC')">
{{$t('overall.save')}}
</div>
</div>
<span class="config-dropdown-btn" slot="reference"
@click="getSingleIDCData(item.id,'edit',item)"><i
class="el-icon-edit-outline"></i></span>
</el-popover>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('idc',item.id)"><i
class="el-icon-delete"></i></span>-->
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div slot="reference"><i class="el-icon-plus"></i></div>
</el-popover>
<cabinet-config-box placement="left" :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>
</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.uSize')">
@@ -1032,8 +828,6 @@
form.append("idcId", this.assetData.idcId);
form.append("cabinetId", this.assetData.cabinetId);
form.append("modelId", modelId);
debugger
console.log(this.assetData.accounts)
for(let i in this.assetData.accounts){
let account=this.assetData.accounts[i];
if(account.user){
@@ -1105,7 +899,6 @@
}
},
uploadFile:function(file){
console.log(file)
this.assetData.accounts[0].file=file.file;
},
clearFile:function(){

214
nezha-fronted/src/components/page/asset/assetEditUnit.vue
View File

@@ -416,112 +416,9 @@
:value="item.id"
>
<span>{{ item.name }}</span>
<el-popover
placement="left"
trigger="manual"
v-model="item[item.name]"
width="400"
>
<div class="pop-window-assetType-content">
<div class="pop-top-btns">
<button type="button" @click="editData('cabinet',item)" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" @click="item[item.name] = false" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</div>
<!--标题-->
<div class="pop-title">{{$t('asset.createAssetTab.editCabinetTab.title')}}</div>
<!--表单内容-->
<el-form class="pop-item-wider" :model="popCabinetData" ref="cabEditForm" :rules="cabRules">
<el-form-item :label="$t('asset.editAssetTab.editCabinetTab.name')" prop="name">
<el-input size="mini" v-model="popCabinetData.name"/>
</el-form-item>
<el-form-item :label="$t('asset.editAssetTab.editCabinetTab.uSize')" prop="uSize">
<div>{{popCabinetData.uSize}}</div>
<el-slider v-model.number="popCabinetData.uSize" :max="47"></el-slider>
</el-form-item>
<el-form-item :label="$t('asset.editAssetTab.editCabinetTab.remark')">
<el-input v-model="popCabinetData.remark"
type="textarea"
:rows="2"/>
</el-form-item>
<el-form-item :label="$t('asset.editAssetTab.editCabinetTab.DC')" prop="idcId">
<el-select v-model="popCabinetData.idcId" clearable placeholder="" size="mini" style="width: 100%;">
<el-option
v-for="ite in item.children"
:key="ite.id"
:label="ite.name"
:value="ite.id"
>
<span>{{ ite.name }}</span>
<!--<el-popover
placement="left"
v-model="ite[ite.name+ite.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="ite[ite.name+ite.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>
<el-form-item label="DC Name">
<el-input v-model="addCabIDCData.name"/>
</el-form-item>
<el-form-item label="Location">
<el-input v-model="addCabIDCData.location"/>
</el-form-item>
<el-form-item label="负责人">
<el-select v-model="addCabIDCData.principal"
clearable>
<el-option
v-for="item in idcUserData"
:key="item.key"
:label="item.username"
:value="item.userId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Tel">
<el-input v-model="addCabIDCData.tel"/>
</el-form-item>
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click="ite[ite.name+ite.id]= false">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="editData('idc',ite,'CabIDC')">
{{$t('overall.save')}}
</div>
</div>
<span class="config-dropdown-btn" slot="reference"
@click="getSingleIDCData(ite.id,'edit',ite)">11<i
class="el-icon-edit-outline"></i></span>
</el-popover>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('idc',ite.id)"><i
class="el-icon-delete"></i></span>-->
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<span class="config-dropdown-btn" slot="reference"
@click.stop="getSingleCabinetData(item.id,'edit',item)">
<i class="el-icon-edit-outline"></i>
</span>
</el-popover>
<cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
<i slot="optionZone" class="el-icon-edit-outline"></i>
</cabinet-config-box>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('cabinet',item.id)">
@@ -531,99 +428,7 @@
</el-select>
<div class="right-box-row-btn right-box-row-btn-small">
<el-popover
placement="left"
trigger="click"
v-model="editPopCabinetVisible"
width="400"
>
<div class="pop-window-assetType-content">
<div class="pop-top-btns">
<button type="button" @click="addNewData('cabinet')" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" @click="editPopoverClose('cabinet')" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</div>
<!--标题-->
<div class="pop-title">{{$t('asset.createAssetTab.AddCabinetTab.title')}}</div>
<!--表单内容-->
<el-form class="pop-item-wider" :model="addCabinetData" ref="cabAddForm" :rules="cabRules">
<el-form-item :label="this.$t('asset.editAssetTab.AddCabinetTab.name')" prop="name">
<el-input size="mini" v-model="addCabinetData.name"/>
</el-form-item>
<el-form-item :label="this.$t('asset.editAssetTab.AddCabinetTab.uSize')" prop="uSize">
<div>{{addCabinetData.uSize}}</div>
<el-slider v-model.number="addCabinetData.uSize"></el-slider>
</el-form-item>
<el-form-item :label="this.$t('asset.editAssetTab.AddCabinetTab.remark')">
<el-input v-model="addCabinetData.remark"
type="textarea" size='mini'
:rows="1"/>
</el-form-item>
<el-form-item :label="this.$t('asset.editAssetTab.AddCabinetTab.DC')" prop="idcId">
<el-select size='mini' v-model="addCabinetData.idcId" clearable style="width: 100%;" placeholder="">
<el-option
v-for="item in IDCOptionData"
:key="item.key"
:label="item.name"
:value="item.id"
>
<span>{{ item.name }}</span>
<!--<el-popover
placement="left"
v-model="item[item.id+item.name]"
>
<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+item.name] = 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">{{$t('asset.editAssetTab.editIdcTab.title')}}</span>
<el-form-item :label="$t('asset.editAssetTab.editIdcTab.dcName')">
<el-input v-model="addCabIDCData.name"/>
</el-form-item>
<el-form-item :label="$t('asset.editAssetTab.editIdcTab.location')">
<el-input v-model="addCabIDCData.location"/>
</el-form-item>
<el-form-item :label="$t('asset.editAssetTab.editIdcTab.principal')">
<el-select v-model="addCabIDCData.principal"
clearable>
<el-option
v-for="item in idcUserData"
:key="item.key"
:label="item.username"
:value="item.userId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('asset.editAssetTab.editIdcTab.tel')">
<el-input v-model="addCabIDCData.tel"/>
</el-form-item>
</div>
</div>
<span class="config-dropdown-btn" slot="reference"
@click="getSingleIDCData(item.id,'edit',item)"><i
class="el-icon-edit-outline"></i></span>
</el-popover>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('idc',item.id)"><i
class="el-icon-delete"></i></span>-->
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div slot="reference"><i class="el-icon-plus"></i></div>
</el-popover>
<cabinet-config-box placement="left" :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>
</div>
</template>
<span v-if="tabView">{{assetViewData.cabinetName}}</span>
@@ -637,7 +442,7 @@
<!--cli-->
<div class="asset-sub-title">{{$t('asset.createAssetTab.cli')}}</div>
<div class="line-100 asset-line"></div>
<account-config-box v-for="(item,index) in assetData.accounts" :account="item" :key="index" ref="accountConfigBox"></account-config-box>
<account-config-box v-for="(item,index) in assetData.accounts" :is-edit="!tabView" :account="item" :key="index" ref="accountConfigBox"></account-config-box>
</el-form>
</el-scrollbar>
</div>
@@ -1118,16 +923,7 @@
})
}
},
uploadFile:function(file){
},
clearFile:function(){
if(this.$refs.upload){
this.$refs.upload.clearFiles();
}
this.uploadFileList=[];
this.assetData.accounts[0].privateKey='';
},
addNewData(type) {
if (type === 'IDC') {
const h = this.$createElement;

15
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -33,7 +33,13 @@
</div>
</template>
<template slot-scope="scope" :column="item">
<span v-if="item.prop == 'idc'" class="link">{{scope.row[item.prop].name}}</span>
<idc-config-box v-if="item.prop == 'idc'" ref="idcConfigBox" :post-idc="JSON.parse(JSON.stringify(scope.row[item.prop]))" :is-edit="false" placement="left" @after="getIdcData" :button-class="'checkbox-edit'">
<template v-slot:optionZone>
<span class="link" @click="closeAllPop">{{scope.row[item.prop].name}}</span>
</template>
</idc-config-box>
<span v-else-if="item.prop == 'type'">
{{scope.row[item.prop] == '1' ? 'Global' : ''}}
{{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
@@ -466,6 +472,7 @@ export default {
});
},
getTableData: function() {
this.tableData=[];
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('promServer', this.searchLabel).then(response => {
@@ -541,7 +548,6 @@ export default {
} else {
this.idcData.forEach(item => {
if (item.id === data) {
console.log(item)
this.popIdcData.name = item.name
this.popIdcData.location = item.location
this.popIdcData.principal = item.principal
@@ -576,6 +582,11 @@ export default {
}
})
},
closeAllPop:function(){
this.$refs.idcConfigBox.forEach((item)=>{
item.show(false)
})
},
},
mounted: function() {
this.getIdcData();

40
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -253,6 +253,7 @@
}]
},
searchTime: [new Date().setHours(new Date().getHours()-1),new Date()],
intervalTimer: null,
intervalList: [{
value: 0,
name: this.$t("dashboard.panel.refreshInterval.never"),
@@ -299,16 +300,15 @@
panelData: [],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [
/*
searchLabelList: [/*
{
id: 1,
name: this.$t("dashboard.panel.searchItem.name"),
type: 'input',
label: 'name',
disabled: false
}
*/],
}*/
],
},
searchLabel: {}, //搜索参数
//---图表相关参数--start
@@ -334,8 +334,7 @@
methods: {
//面板相关操作
panelChange(){
//alert(JSON.stringify(this.$refs.searchInput.select_list));
this.$refs.searchInput.select();
//this.$refs.searchInput.select();
this.filter.panelId = this.showPanel.id;
this.getData(this.filter);
},
@@ -443,7 +442,7 @@
/*时间条件查询--start*/
// 选择日期变化
dateChange() {
this.$refs.searchInput.select();
//this.$refs.searchInput.select();
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
this.filter.panelId = this.showPanel.id;
@@ -482,7 +481,32 @@
}
}
})
},
//定期刷新
selectInterval(val) {
clearInterval(this.intervalTimer);
if (val) {
const start = new Date(this.searchTime[1]);
const now = new Date();
const interval = Math.floor((now.getTime() - start.getTime()) / 1000);//计算当前结束时间到现在的间隔（秒）
if (interval >= 60) {//如果结束时间到现在超过1分钟，则
this.getIntervalData(interval);
}
this.intervalTimer = setInterval(() => {
this.getIntervalData(this.interval);
}, val * 1000);
}
},
getIntervalData(interval) {//interval:结束时间到现在的秒数
const start = new Date(this.searchTime[0]);
const end = new Date(this.searchTime[1]);
start.setSeconds(start.getSeconds() + interval);
end.setSeconds(end.getSeconds() + interval);
const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm');
const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm');
this.searchTime = [startTime, endTime];
//刷新数据
this.dateChange();
},
pageNo(val) {
this.pageObj.pageNo = val;

21
nezha-fronted/src/libs/bus.js
View File

@@ -1,6 +1,4 @@
import Vue from 'vue';
//import Cookies from 'js-cookie';
//import md5 from 'md5';
Date.prototype.setStart = function() {
this.setHours(0);
@@ -120,6 +118,25 @@ export default new Vue({
});
return fm;
},
getStep(startTime,endTime){
const start = new Date(startTime);
const end = new Date(endTime);
let step='15s';
const numInterval = end.getTime()-start.getTime();
let oneDay = 86400000;
let sevenDay = 604800000;
let thirtyDay = 2592000000;
if (numInterval < oneDay) {//小于1天，step为15s
step='15s';
}else if(numInterval<sevenDay){
step='5m';
}else if(numInterval<thirtyDay){
step='10m';
}else {
step='30m';
}
return step;
},
isEmptyObject(obj) {
if (obj) {
let name = '';

4
nezha-fronted/src/main.js
View File

@@ -26,9 +26,10 @@ import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endp
import assetAddUnit from "./components/page/asset/assetAddUnit"; //资产添加组件
import assetEditUnit from "./components/page/asset/assetEditUnit"; //资产添加组件
import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件
import dcConfigBox from "./components/common/dcConfig"; //idc配置弹框组件
import dcConfigBox from "./components/common/popBox/dcConfig"; //idc配置弹框组件
import panelBox from "./components/common/rightBox/panelBox"; //面板弹框组件
import moduleListPop from "./components/page/asset/moduleListPop"; //面板弹框组件
import cabinetConfigBox from "./components/common/popBox/cabinetConfig"; //面板弹框组件
Vue.component("Pagination", Pagination);
Vue.component("searchInput", searchInput);
@@ -43,6 +44,7 @@ Vue.component("alert-config-box", alertConfigBox);
Vue.component("idc-config-box", dcConfigBox);
Vue.component("panel-box", panelBox);
Vue.component("module-list-pop", moduleListPop);
Vue.component("cabinet-config-box", cabinetConfigBox);
Vue.prototype.$axios = axios;
Vue.prototype.$post = post;