feat:Add chart by Temp 实现 50%

fix:修改endpointList 出现下弹窗时样式错乱的问题
This commit is contained in:
zhangyu
2021-04-25 18:35:35 +08:00
parent de5fe9f1c6
commit 43436e5cbe
19 changed files with 1997 additions and 1637 deletions

View File

@@ -24,7 +24,7 @@
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" v-if="from === 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span v-if="chartData.remark">
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>

View File

@@ -24,7 +24,7 @@
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" v-if="from === 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span v-if="chartData.remark">
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>

View File

@@ -18,7 +18,7 @@
{{chartData.name}}
<span v-show="!showList" class="collapse-content">({{chartData.children.length}} charts)</span>
</span>
<span class="chart-title-icon" v-if="from === 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span v-if="chartData.remark">
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>

View File

@@ -24,7 +24,7 @@
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" v-if="from === 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span v-if="chartData.remark">
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>

View File

@@ -24,7 +24,7 @@
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" v-if="from === 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span v-if="chartData.remark">
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>

View File

@@ -25,7 +25,7 @@
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" v-if="from === 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span v-if="chartData.remark">
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>

View File

@@ -12,7 +12,7 @@
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" v-if="from === 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span v-if="chartData.remark">
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>

View File

@@ -38,7 +38,7 @@
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" v-if="from === 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span v-if="chartData.remark">
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>

View File

@@ -12,7 +12,7 @@
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title">
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" v-if="from === 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
<span v-if="chartData.remark">
<el-tooltip :content="chartData.remark" placement="top" effect="light">
<i class="nz-icon nz-icon-info-normal"></i>

View File

@@ -336,7 +336,8 @@ const cn = {
moreTitle: '仅显示 20 个时间序列。',
moreTitleOther: '仅显示 10 条数据。',
showAll: '全部显示 ',
showAllOther: '全部数据 '
showAllOther: '全部数据 ',
addChartTemp: 'addChartTemp'
},
metric: {
name: '指标名称',
@@ -563,7 +564,23 @@ const cn = {
usernamePrompt: '用户名提示',
passwordPrompt: '密码提示',
snmpCredential: 'SNMP凭证',
authProtocol: '认证协议'
authProtocol: '认证协议',
id: 'ID',
device: 'SN',
assetState: '状态',
modules: 'Endpoint',
alerts: '告警信息',
dataCenter: '数据中心',
manufacturer: '厂商',
procurementDate: '购买日期',
principalTel: '电话',
option: '操作',
assetPing: 'Ping',
lastReply: 'Ping最后应答',
vendor: '厂商',
name: 'Name',
dc: '数据中心',
type: '主机地址'
},
config: {
config: '设置',

View File

@@ -345,7 +345,8 @@ const en = {
moreTitle: 'Showing only 20 time series. ',
moreTitleOther: 'Showing only 10 the data. ',
showAll: 'Show all ',
showAllOther: 'All Data'
showAllOther: 'All Data',
addChartTemp: 'addChartTemp'
},
metric: {
name: 'Metric name', // "指标名称"
@@ -571,7 +572,22 @@ const en = {
usernamePrompt: 'Username prompt',
passwordPrompt: 'Password prompt',
snmpCredential: 'SNMP credential',
authProtocol: 'Auth protocol'
authProtocol: 'Auth protocol',
id: 'ID', // ID
device: 'SN', // SN
assetState: 'State', // '状态'
assetPing: 'Ping',
lastReply: 'Ping last reply',
modules: 'Endpoint', // '组件'
alerts: 'Alerts', // '告警信息'
dataCenter: 'Data center', // DC
vendor: 'Vendor', // '厂商'
procurementDate: 'Purchase date', // '购买日期'
principalTel: 'Telephone', // '电话'
option: 'Operation', // "操作"
name: 'Name',
dc: 'DataCenter',
type: 'Types',
},
config: {
config: 'Settings', // "设置"
@@ -684,7 +700,7 @@ const en = {
},
cabinet: {
editCabinet: 'Edit Cabinet',
createCabinet:'Create Cabinet',
createCabinet: 'Create Cabinet'
},
model: {
model: 'Asset model',
@@ -756,7 +772,7 @@ const en = {
loginUser: 'Login user',
sourceIp: 'Source IP',
sourceUser: 'Source user',
SessionId:'Session ID',
SessionId: 'Session ID'
},
operationlog: {
operationlog: 'Operation log',
@@ -1016,7 +1032,7 @@ const en = {
expressionError: 'Please fill in the "expression" value'
},
chartTemp: {
chartTemp: 'Chart template',
chartTemp: 'Chart template'
}
},
alert: {

View File

@@ -20,6 +20,7 @@ export default {
customTableTitle: [] // 自定义列工具的数据
},
mainTableHeight: this.$tableHeight.normal, // 主列表table高度
searchTableHeight: this.$tableHeight.search, // 主列表table高度
batchDeleteObjs: [],
object: {},

View File

@@ -529,7 +529,7 @@ export default {
deep: true,
immediate: true,
handler (n) {
if (n.id) {
if (n && n.id) {
if (getTopology(this.topologyIndex)) {
getTopology(this.topologyIndex).destroy()
setTopology(this.topologyIndex, null)

View File

@@ -3,13 +3,13 @@
@import "./L5/css/props.css";
</style>
<template>
<div class="project-box list-page" v-loading="topologyLoading">
<div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'">
<!--project主要信息-->
<div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
<div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px">
<!--工具栏-->
<span class="project-topology-tool">
<el-dropdown trigger="click" size="small" placement="bottom-start">
<el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
<span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
class="nz-icon nz-icon-arrow-down"></i></span>
<el-dropdown-menu slot="dropdown" @click="dropdownClick">
@@ -37,7 +37,7 @@
</el-collapse-item>
</el-collapse>
</el-card>
<div class="upload-pic-box" @click="uploadPicChange">
<div class="upload-pic-box" @click="uploadPicChange" v-has="'topo_icon_save'">
<i class="el-icon-plus"></i>
<span>
Upload custom picture
@@ -119,7 +119,7 @@
<i class="nz-icon" :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'"></i>
</button>
<button @click="editTopology" class="top-tool-btn float-right"
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button"
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button" v-has="'project_topo_update'"
>
<i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
</button>
@@ -529,7 +529,7 @@ export default {
deep: true,
immediate: true,
handler (n) {
if (n.id) {
if (n && n.id) {
if (getTopology(this.topologyIndex)) {
getTopology(this.topologyIndex).destroy()
setTopology(this.topologyIndex, null)

View File

@@ -0,0 +1,262 @@
<template>
<div v-clickoutside="{obj: editChartTemp, func: esc}" class="right-box right-box-asset">
<div class="right-box__header">
<div class="header__title">{{editChartTemp.id ? $t('config.user.editChartTemp') : $t('config.user.createUser')}}</div>
<div class="header__operation">
<span v-cancel="{obj: editChartTemp, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
</div>
</div>
<div class="right-box__container">
<div class="container__form">
<el-form ref="userForm" :model="editChartTemp" :rules="editChartTemp.id ? rules2 : rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
<!--type-->
<el-form-item :label="$t('dashboard.panel.chartForm.varType')">
<el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.varType" value-key="chartType" id="chart-box-group">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
<!--chartTemp list-->
<el-form-item :label="$t('dashboard.panel.chartForm.varType')">
<el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.pid" value-key="chartType" id="chart-box-group">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTempArr">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
<!-- 选择资产穿梭框 -->
<div class="form__sub-title">{{$t('overall.select')}}</div>
<nz-transfer ref="transfer"
:page-obj="transfer.pageObj"
:search-msg="transfer.searchMsg"
:table-data="transfer.tableData"
style="margin-bottom: 20px;"
@leftToRight="addAsset"
@search="search"
@rightToLeft="removeAsset">
<template v-slot:title>Selected</template>
</nz-transfer>
</el-form>
</div>
</div>
<div class="right-box__footer">
<button id="asset-edit-cancel" v-cancel="{obj: editChartTemp, func: esc}" class="footer__btn footer__btn--light">
<span>{{$t('overall.cancel')}}</span>
</button>
<button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
import nzTransfer from '@/components/common/nzTransfer'
export default {
name: 'chartTemp',
components: {
nzTransfer
},
props: {
obj: {
type: Object
}
},
computed: {
isCurrentUser () {
return function (username) {
return localStorage.getItem('nz-username') == username
}
}
},
data () {
return {
editChartTemp: {},
url: 'visual/panel/chart/fromTmpl',
rightBox: { model: { show: false } },
rules: { // 表单校验规则
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
},
varTypeArr: [
{ name: 'Asset', id: 1 },
{ name: 'Endpoint', id: 2 }
],
chartTempArr: [],
tableData: [],
transfer: {
tableData: [],
selectedData: [],
searchLabel: {},
searchMsg: { // 给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [
{
id: 1,
name: 'ID',
type: 'input',
label: 'id',
disabled: false
}, {
id: 20,
name: 'SN',
type: 'input',
label: 'sn',
disabled: false
}, {
id: 21,
name: 'Host',
type: 'input',
label: 'host',
disabled: false
}, {
id: 22,
name: this.$t('asset.state'),
type: 'select',
label: 'assetState',
disabled: false
}, {
id: 23,
name: 'pingStatus',
type: 'select',
label: 'pingStatus',
disabled: false
}, {
id: 23,
name: this.$t('asset.cabinet'),
type: 'input',
label: 'cabinetName',
disabled: false
}
]
},
pageObj: {
pageNo: 1,
pageSize: 10,
pages: 1,
total: 0
}
}
}
},
watch: {
obj: {
deep: true,
immediate: true,
handler (n) {
this.editChartTemp = JSON.parse(JSON.stringify(n))
}
}
},
mounted () {
this.getChartTempData()
this.getAssetData()
},
methods: {
clickOutside () {
this.esc(false)
},
/* 关闭弹框 */
esc (refresh) {
this.prevent_opt.save = false
this.$emit('close', refresh)
},
save () {
if (this.prevent_opt.save) { return } ;
this.prevent_opt.save = true
if (!this.transfer.selectedData.length) {
this.prevent_opt.save = false
if (this.editChartTemp.varType === 1) {
this.$message.error('请选择Asset')
} else {
this.$message.error('请选择Endpoint')
}
return
}
this.editChartTemp.varIds = this.transfer.selectedData.map(item => item.id)
this.$refs.userForm.validate((valid) => {
if (valid) {
if (this.editChartTemp.id) {
this.$put(this.url, this.editChartTemp).then(res => {
this.prevent_opt.save = false
if (res.code === 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.$message.error(res.msg)
}
})
} else {
this.$post(this.url, this.editChartTemp).then(res => {
this.prevent_opt.save = false
if (res.code === 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.$message.error(res.msg)
}
})
}
} else {
this.prevent_opt.save = false
return false
}
})
},
search (searchLabel, page) {
this.transfer.searchLabel = JSON.parse(JSON.stringify(searchLabel))
this.transfer.pageObj = JSON.parse(JSON.stringify(page))
this.getAssetData()
},
addAsset (toAdd) {
this.transfer.selectedData = toAdd
this.transfer.tableData.forEach(d => {
this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
})
},
removeAsset (toRemove) {
this.transfer.selectedData = this.transfer.selectedData.filter(d => !toRemove.find(s => d.id === s.id))
this.transfer.tableData.forEach(d => {
this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
})
// dc, brand, model, type
},
getChartTempData () {
this.$get('visual/panel/chart', { pageSize: -1, panelId: 0, returnChildren: 0, varType: this.editChartTemp.varType }).then(response => {
if (response.code === 200) {
this.chartTempArr = response.data.list
}
})
},
getAssetData () {
this.$refs.transfer.startLoading()
this.$get('asset/asset', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
this.$refs.transfer.endLoading()
if (response.code === 200) {
this.transfer.tableData = response.data.list
this.transfer.pageObj.total = response.data.total
}
})
},
getEndpointData () {
this.$refs.transfer.startLoading()
this.$get('monitor/endpoint', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
this.$refs.transfer.endLoading()
if (response.code === 200) {
this.transfer.tableData = response.data.list
this.transfer.pageObj.total = response.data.total
}
})
},
varTypeChange () {
}
}
}
</script>
<style lang="scss">
@import '@/assets/css/common/rightBoxCommon.scss';
</style>

View File

@@ -91,6 +91,7 @@
</button>
</template>
</export-excel>
<button id="chart-temp-add" class="top-tool-btn margin-l-10" type="button" @click="addChartByTemp"><i class='nz-icon nz-icon-lock'></i></button>
<button id="panel-lock" class="top-tool-btn margin-l-10" type="button" @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i></button>
</div>
</template>
@@ -107,6 +108,9 @@
<transition name="right-box">
<chart-box :chart="chart" :from="$CONSTANTS.fromRoute.panel" :panel-data="panelData" :show-panel="showPanel" @close="closeChartBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reload="panelReload" @reloadOnlyPanel="panelReloadOnlyPanel" ref="addChartModal" v-if="rightBox.chart.show"></chart-box>
</transition>
<transition name="right-box">
<chart-temp-box :obj="chart" :from="$CONSTANTS.fromRoute.panel" :panel-data="panelData" :show-panel="showPanel" @close="closeChartTempBox" @on-create-success="createSuccess" v-if="rightBox.chartTemp.show"></chart-temp-box>
</transition>
<transition name="right-box">
<panel-box v-if="closePanelBox" :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
</transition>
@@ -121,6 +125,7 @@ import pickTime from '../../common/pickTime'
import exportXLSX from '../../common/exportXLSX'
import selectPanel from '../../common/popBox/selectPanel'
import panelBox from '@/components/common/rightBox/panelBox'
import chartTempBox from '@/components/common/rightBox/chartTempBox'
export default {
name: 'panel',
@@ -131,6 +136,7 @@ export default {
visible: false,
rightBox: { // 面板弹出框相关
chart: { show: false },
chartTemp: { show: false },
panel: { show: false }
},
tableHover: false,
@@ -166,6 +172,12 @@ export default {
pageSize: -1, // 此处获取所有数据,所以设置一个较大的值
total: 0
},
blankChartTemp: {
varType: 1,
pid: '',
panelId: '',
varIds: []
},
chartsData: [], // 中间部分图表相关数据
panelData: [],
panelDataDragTmp: [],
@@ -204,7 +216,8 @@ export default {
'pick-time': pickTime,
'export-excel': exportXLSX,
selectPanel,
'panel-box': panelBox
'panel-box': panelBox,
chartTempBox
},
methods: {
// 刷新
@@ -290,6 +303,11 @@ export default {
this.chart.panelName = this.showPanel.name
this.rightBox.chart.show = true
},
addChartByTemp () {
this.chart = Object.assign({},this.blankChartTemp)
this.chart.panelId = this.showPanel.id
this.rightBox.chartTemp.show = true
},
addGroupItem (groupId) {
this.chart = this.newChart()
this.chart.groupId = groupId
@@ -317,6 +335,12 @@ export default {
} */
},
closeChartTempBox () {
this.rightBox.chartTemp.show = false
/* if (refresh) {
} */
},
closePanelBox (refresh) {
this.rightBox.panel.show = false
/* if (refresh) {

View File

@@ -44,7 +44,7 @@
v-loading="slotProps.loading"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:height="searchTableHeight"
:table-data="tableData"
:tableId="tableId"
@del="del"

View File

@@ -89,10 +89,49 @@ export default {
}
},
methods: {
getTableData (params) {
if (params && Object.keys(params).length > 0) {
for (const key in params) {
this.$set(this.searchLabel, key, params[key])
}
}
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
this.tools.loading = true
this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(response => {
this.tools.loading = false
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + ''
}
if (!this.$store.state.currentProject.id) {
this.$store.commit('currentProjectChange', response.data.list[0])
}
this.tableData = response.data.list
this.pageObj.total = response.data.total
if (!this.scrollbarWrap) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap)
})
}
}
})
}
},
computed: {
},
created () {
console.log(this.$store.state.currentProject)
},
mounted () {
},
destroyed () {
this.$store.commit('currentProjectChange', {
id: '',
name: '',
remark: ''
})
}
}
</script>

View File

@@ -52,6 +52,7 @@ Vue.prototype.$chartResizeTool = chartResizeTool
Vue.prototype.$tableSet = tableSet
Vue.prototype.$tableHeight = { // 列表页表格的高度
normal: 'calc(100% - 48px)', // 常规高度,特例在下方定义
search: 'calc(100% - 240px)', // 常规高度,特例在下方定义
openSubList: { // 打开二级列表后的高度
mainList: 'calc(100% - 60px)',
subList: 'calc(100% - 38px)',