feat:Add chart by Temp 实现 50%
fix:修改endpointList 出现下弹窗时样式错乱的问题
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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: '设置',
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -20,6 +20,7 @@ export default {
|
||||
customTableTitle: [] // 自定义列工具的数据
|
||||
},
|
||||
mainTableHeight: this.$tableHeight.normal, // 主列表table高度
|
||||
searchTableHeight: this.$tableHeight.search, // 主列表table高度
|
||||
batchDeleteObjs: [],
|
||||
object: {},
|
||||
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
262
nezha-fronted/src/components/common/rightBox/chartTempBox.vue
Normal file
262
nezha-fronted/src/components/common/rightBox/chartTempBox.vue
Normal 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>
|
||||
@@ -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) {
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)',
|
||||
|
||||
Reference in New Issue
Block a user