feat： chart添加group 并修改样式
This commit is contained in:
zhangyu
@@ -20,21 +20,25 @@
|
||||
<span class="panel-info-corner-inner"></span>
|
||||
</span>
|
||||
</el-popover>
|
||||
<el-dropdown trigger="click" v-show="!isPreview" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="chart-title-text">{{chartInfo.name}}</span>
|
||||
<span class="chart-title-icon" v-if="data.editable"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" v-if="data.editable" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
|
||||
<li @click="refreshChart" class="el-dropdown-menu__item">
|
||||
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
|
||||
<li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li @click="showAllScreen" class="el-dropdown-menu__item">
|
||||
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
|
||||
<li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
</ul>
|
||||
@@ -839,31 +843,7 @@ export default {
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$confirm(this.$t('tip.confirmDuplicate'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
const param = { id: this.data.id }
|
||||
this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t('tip.duplicateSuccess')
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id, response.data)
|
||||
} else {
|
||||
if (response.msg) {
|
||||
this.$message.error(response.msg)
|
||||
} else if (response.error) {
|
||||
this.$message.error(response.error)
|
||||
} else {
|
||||
this.$message.error(response)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
|
||||
@@ -10,28 +10,41 @@
|
||||
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">
|
||||
<span @click="showList=!showList">
|
||||
<i class="nz-icon nz-icon-arrow-down" :class="showList?'':'is-active'"/>
|
||||
</span>
|
||||
{{chartData.name}}
|
||||
<span v-show="!showList">{{dataList.length}} panel collapse</span>
|
||||
</span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<!-- <span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">-->
|
||||
<!-- <i class="nz-icon nz-icon-replay"></i>-->
|
||||
<!-- </span>-->
|
||||
<!-- <span @click="showAllScreen" class="" :title="$t('dashboard.screen')">-->
|
||||
<!-- <i class="nz-icon nz-icon-maxview"></i>-->
|
||||
<!-- </span>-->
|
||||
<!-- <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>-->
|
||||
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
|
||||
<li @click="refreshChart" class="el-dropdown-menu__item">
|
||||
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
|
||||
<li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li @click="showAllScreen" class="el-dropdown-menu__item">
|
||||
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
|
||||
<li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
<!-- <li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">-->
|
||||
<!-- <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>-->
|
||||
</ul>
|
||||
</el-dropdown>
|
||||
|
||||
</div>
|
||||
<div :id="'chartUrl'+chartIndex" class="mt-10 url-container">
|
||||
<chart-list-group :groupList.sync="chartData.children" :panel-lock="panelLock" :filterParent="filter" :class="{'show-top':false}" :hasGroup="false" :from="from" ref="listGroup" :panelId="panelId" @on-edit-group-chart="editGroupItem" @on-remove-chart="removeChartGroup" @moveGroupItem="moveGroupItem"></chart-list-group>
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<div :id="'chartUrl'+chartIndex" class="mt-10 url-container" v-show="showList">
|
||||
<chart-list-group :groupList.sync="chartData.children" :panel-lock="panelLock" :filterParent="filter" :class="{'show-top':false}" :hasGroup="false" :from="from" ref="listGroup" :panelId="panelId" @on-edit-group-chart="editGroupItem" @on-duplicate-group-chart="duplicateGroupItem" @on-remove-chart="removeChartGroup" @moveGroupItem="moveGroupItem"></chart-list-group>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
<div style="position: absolute;width: 100%; top:calc(50% - 50px);text-align: center;" v-if="showStatic">
|
||||
<div :id="'staticContainer'+chartIndex" class="center-content"></div>
|
||||
</div>
|
||||
@@ -92,7 +105,8 @@ export default {
|
||||
titleHeight: 38, // title-height:28,magrin-bottom:10
|
||||
paddingBottom: 6,
|
||||
divFirstShow: false,
|
||||
showStatic: false
|
||||
showStatic: false,
|
||||
showList: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -202,6 +216,9 @@ export default {
|
||||
editGroupItem (chart) {
|
||||
this.$emit('on-edit-group-chart', chart)
|
||||
},
|
||||
duplicateGroupItem (chart) {
|
||||
this.$emit('on-duplicate-group-chart', chart)
|
||||
},
|
||||
// 删除该图表
|
||||
removeChart () {
|
||||
this.dropdownMenuShow = false
|
||||
@@ -221,31 +238,7 @@ export default {
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$confirm(this.$t('tip.confirmDuplicate'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
const param = { id: this.data.id }
|
||||
this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t('tip.duplicateSuccess')
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id, response.data)
|
||||
} else {
|
||||
if (response.msg) {
|
||||
this.$message.error(response.msg)
|
||||
} else if (response.error) {
|
||||
this.$message.error(response.error)
|
||||
} else {
|
||||
this.$message.error(response)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
moveGroupItem (groupList) {
|
||||
this.$emit('moveGroupItem', { groupId: this.data.id, children: groupList })
|
||||
@@ -311,3 +304,14 @@ export default {
|
||||
position: unset !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.chart-title .nz-icon-arrow-down{
|
||||
display: inline-block;
|
||||
transition: transform .3s;
|
||||
}
|
||||
.chart-title .nz-icon-arrow-down.is-active{
|
||||
transform: rotate(
|
||||
-90deg
|
||||
);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<style scoped>
|
||||
.chartBox {
|
||||
float:left;
|
||||
padding: 0px 2px 2px 0;
|
||||
padding: 0px 10px 10px 0;
|
||||
position:relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -10,7 +10,7 @@
|
||||
}
|
||||
.list-width{
|
||||
width: calc(100% - 2px);
|
||||
padding: 5px 5px 5px 0px;
|
||||
padding: 5px 10px 5px 0px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
|
||||
}
|
||||
@@ -1552,90 +1552,16 @@ export default {
|
||||
}
|
||||
},
|
||||
// 复制图表
|
||||
duplicateChart (chartId, duplicateChartBack) {
|
||||
const duplicateChartId = duplicateChartBack.id
|
||||
let chart
|
||||
let chartIndex = -1
|
||||
this.dataList.forEach((item, index) => {
|
||||
if (item.id === chartId) {
|
||||
chartIndex = index
|
||||
chart = item
|
||||
}
|
||||
})
|
||||
let chartNext
|
||||
const chartNextIndex = chartIndex + 1
|
||||
if (chartNextIndex <= (this.dataList.length - 1)) {
|
||||
chartNext = this.dataList[chartNextIndex]
|
||||
}
|
||||
|
||||
duplicateChart (chartId) {
|
||||
const chart = this.dataList.find(item => item.id === chartId)
|
||||
if (chart) {
|
||||
chart.next = duplicateChartId
|
||||
const duplicateChart = JSON.parse(JSON.stringify(chart))
|
||||
duplicateChart.id = duplicateChartId
|
||||
duplicateChart.prev = duplicateChartBack.prev
|
||||
duplicateChart.next = duplicateChartBack.next
|
||||
duplicateChart.title = duplicateChartBack.title
|
||||
duplicateChart.elements = duplicateChartBack.elements
|
||||
if (chartNext) {
|
||||
chartNext.prev = duplicateChartId
|
||||
}
|
||||
|
||||
this.dataList.splice(chartNextIndex, 0, duplicateChart)
|
||||
|
||||
const indexInTotal = this.dataTotalList.indexOf(chart)
|
||||
this.dataTotalList.splice(indexInTotal + 1, 0, duplicateChart)
|
||||
const chartInTotal = this.dataTotalList.find(item => item.id === chartId)
|
||||
chartInTotal.next = duplicateChartId
|
||||
if (chartNext) {
|
||||
const chartNextInTotal = this.dataTotalList.find(item => item.id === chartNext.id)
|
||||
chartNextInTotal.prev = chartNext.prev
|
||||
}
|
||||
|
||||
const indexInTotalBak = this.dataTotalListBak.indexOf(chart)
|
||||
this.dataTotalListBak.splice(indexInTotalBak + 1, 0, duplicateChart)
|
||||
const chartInTotalBak = this.dataTotalListBak.find(item => item.id === chartId)
|
||||
chartInTotalBak.next = duplicateChartId
|
||||
if (chartNext) {
|
||||
const chartNextInTotalBak = this.dataTotalListBak.find(item => item.id === chartNext.id)
|
||||
chartNextInTotalBak.prev = chartNext.prev
|
||||
}
|
||||
|
||||
this.currentRecordNum = this.currentRecordNum + 1
|
||||
const chartData = this.chartDataCacheGroup.get(chart.id)
|
||||
// console.log("__chartItem00__", chartData)
|
||||
if (duplicateChartBack.type === 'alertList') {
|
||||
this.$nextTick(() => {
|
||||
this.getAlertListChartData(duplicateChartBack)
|
||||
this.setChartSize(duplicateChart, chartNextIndex) // 设置该图表宽度
|
||||
})
|
||||
} else {
|
||||
let duplicateChartData = {}
|
||||
try {
|
||||
duplicateChartData = JSON.parse(JSON.stringify(chartData))
|
||||
} catch (e) {
|
||||
console.warn(e)
|
||||
}
|
||||
duplicateChartData.chartItem = duplicateChart
|
||||
this.chartDataCacheGroup.set(duplicateChartId, duplicateChartData)
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs['editChart' + duplicateChartId][0]) {
|
||||
this.$refs['editChart' + duplicateChartId][0].showLoad(duplicateChart)// 之后要实现
|
||||
}
|
||||
|
||||
const chartType = duplicateChart.type
|
||||
if (chartType !== 'url') {
|
||||
this.getChartDataForSearch(duplicateChart, chartNextIndex)
|
||||
}
|
||||
this.setChartSize(duplicateChart, chartNextIndex) // 设置该图表宽度
|
||||
})
|
||||
}
|
||||
this.$emit('on-duplicate-group-chart', chart)
|
||||
}
|
||||
},
|
||||
// 编辑图表
|
||||
editData (chartId) {
|
||||
// 获取该id下chart的相关信息
|
||||
const chart = this.dataList.find(item => item.id === chartId)
|
||||
console.log(chart)
|
||||
if (chart) {
|
||||
this.$emit('on-edit-group-chart', chart)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<style scoped>
|
||||
.chartBox {
|
||||
float:left;
|
||||
padding: 0px 2px 2px 0;
|
||||
padding: 0px 10px 10px 0;
|
||||
position:relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -182,6 +182,7 @@
|
||||
@on-edit-chart-block="editData"
|
||||
@on-edit-group-chart="editDataGroup"
|
||||
@on-remove-group-chart="removeChartGroup"
|
||||
@on-duplicate-group-chart="duplicateChartGroup"
|
||||
@moveGroupItem="moveGroupItem"
|
||||
:panel-id="filter.panelId"
|
||||
:chart-data="item"
|
||||
@@ -317,12 +318,12 @@ export default {
|
||||
this.dataList.forEach((item, index) => {
|
||||
item.weight = index
|
||||
newWeights.push({ id: item.id, weight: index })
|
||||
if (item.type === 'group' && group.groupId!==item.id) {
|
||||
if (item.type === 'group' && group.groupId !== item.id) {
|
||||
item.children.forEach(chart => {
|
||||
i++
|
||||
newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
|
||||
})
|
||||
} else if (item.type === 'group' && group.groupId == item.id){
|
||||
} else if (item.type === 'group' && group.groupId == item.id) {
|
||||
group.children.forEach(chart => {
|
||||
i++
|
||||
newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
|
||||
@@ -1607,82 +1608,22 @@ export default {
|
||||
},
|
||||
// 复制图表
|
||||
duplicateChart (chartId, duplicateChartBack) {
|
||||
const duplicateChartId = duplicateChartBack.id
|
||||
let chart
|
||||
let chartIndex = -1
|
||||
this.dataList.forEach((item, index) => {
|
||||
if (item.id === chartId) {
|
||||
chartIndex = index
|
||||
chart = item
|
||||
}
|
||||
const chart = this.dataList.find(item => {
|
||||
return item.id === chartId
|
||||
})
|
||||
let chartNext
|
||||
const chartNextIndex = chartIndex + 1
|
||||
if (chartNextIndex <= (this.dataList.length - 1)) {
|
||||
chartNext = this.dataList[chartNextIndex]
|
||||
}
|
||||
|
||||
if (chart) {
|
||||
chart.next = duplicateChartId
|
||||
const duplicateChart = JSON.parse(JSON.stringify(chart))
|
||||
duplicateChart.id = duplicateChartId
|
||||
duplicateChart.prev = duplicateChartBack.prev
|
||||
duplicateChart.next = duplicateChartBack.next
|
||||
duplicateChart.title = duplicateChartBack.title
|
||||
duplicateChart.elements = duplicateChartBack.elements
|
||||
if (chartNext) {
|
||||
chartNext.prev = duplicateChartId
|
||||
}
|
||||
|
||||
this.dataList.splice(chartNextIndex, 0, duplicateChart)
|
||||
|
||||
const indexInTotal = this.dataTotalList.indexOf(chart)
|
||||
this.dataTotalList.splice(indexInTotal + 1, 0, duplicateChart)
|
||||
const chartInTotal = this.dataTotalList.find(item => item.id === chartId)
|
||||
chartInTotal.next = duplicateChartId
|
||||
if (chartNext) {
|
||||
const chartNextInTotal = this.dataTotalList.find(item => item.id === chartNext.id)
|
||||
chartNextInTotal.prev = chartNext.prev
|
||||
}
|
||||
|
||||
const indexInTotalBak = this.dataTotalListBak.indexOf(chart)
|
||||
this.dataTotalListBak.splice(indexInTotalBak + 1, 0, duplicateChart)
|
||||
const chartInTotalBak = this.dataTotalListBak.find(item => item.id === chartId)
|
||||
chartInTotalBak.next = duplicateChartId
|
||||
if (chartNext) {
|
||||
const chartNextInTotalBak = this.dataTotalListBak.find(item => item.id === chartNext.id)
|
||||
chartNextInTotalBak.prev = chartNext.prev
|
||||
}
|
||||
|
||||
this.currentRecordNum = this.currentRecordNum + 1
|
||||
const chartData = this.chartDataCacheGroup.get(chart.id)
|
||||
// console.log("__chartItem00__", chartData)
|
||||
if (duplicateChartBack.type === 'alertList') {
|
||||
this.$nextTick(() => {
|
||||
this.getAlertListChartData(duplicateChartBack)
|
||||
this.setChartSize(duplicateChart, chartNextIndex) // 设置该图表宽度
|
||||
})
|
||||
} else {
|
||||
let duplicateChartData = {}
|
||||
try {
|
||||
duplicateChartData = JSON.parse(JSON.stringify(chartData))
|
||||
} catch (e) {
|
||||
console.warn(e)
|
||||
}
|
||||
duplicateChartData.chartItem = duplicateChart
|
||||
this.chartDataCacheGroup.set(duplicateChartId, duplicateChartData)
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs['editChart' + duplicateChartId][0]) {
|
||||
this.$refs['editChart' + duplicateChartId][0].showLoad(duplicateChart)// 之后要实现
|
||||
}
|
||||
|
||||
const chartType = duplicateChart.type
|
||||
if (chartType !== 'url') {
|
||||
this.getChartDataForSearch(duplicateChart, chartNextIndex)
|
||||
}
|
||||
this.setChartSize(duplicateChart, chartNextIndex) // 设置该图表宽度
|
||||
})
|
||||
}
|
||||
const copyChart = { ...chart }
|
||||
delete copyChart.id
|
||||
copyChart.name = 'Copy_' + copyChart.name
|
||||
this.$emit('on-edit-chart', copyChart)
|
||||
}
|
||||
},
|
||||
duplicateChartGroup (chart) {
|
||||
if (chart) {
|
||||
const copyChart = { ...chart }
|
||||
delete copyChart.id
|
||||
copyChart.name = 'Copy_' + copyChart.name
|
||||
this.$emit('on-edit-chart', copyChart)
|
||||
}
|
||||
},
|
||||
// 编辑图表
|
||||
|
||||
@@ -22,19 +22,23 @@
|
||||
</el-popover>
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
|
||||
<li @click="refreshChart" class="el-dropdown-menu__item">
|
||||
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
|
||||
<li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li @click="showAllScreen" class="el-dropdown-menu__item">
|
||||
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
|
||||
<li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
</ul>
|
||||
@@ -265,31 +269,7 @@ export default {
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$confirm(this.$t('tip.confirmDuplicate'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
const param = { id: this.data.id }
|
||||
this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t('tip.duplicateSuccess')
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id, response.data)
|
||||
} else {
|
||||
if (response.msg) {
|
||||
this.$message.error(response.msg)
|
||||
} else if (response.error) {
|
||||
this.$message.error(response.error)
|
||||
} else {
|
||||
this.$message.error(response)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
|
||||
@@ -22,19 +22,23 @@
|
||||
</el-popover>
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
|
||||
<li @click="refreshChart" class="el-dropdown-menu__item">
|
||||
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
|
||||
<li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li @click="showAllScreen" class="el-dropdown-menu__item">
|
||||
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
|
||||
<li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
</ul>
|
||||
@@ -356,31 +360,7 @@ export default {
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$confirm(this.$t('tip.confirmDuplicate'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
const param = { id: this.data.id }
|
||||
this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t('tip.duplicateSuccess')
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id, response.data)
|
||||
} else {
|
||||
if (response.msg) {
|
||||
this.$message.error(response.msg)
|
||||
} else if (response.error) {
|
||||
this.$message.error(response.error)
|
||||
} else {
|
||||
this.$message.error(response)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
|
||||
@@ -21,31 +21,27 @@
|
||||
<span class="panel-info-corner-inner"></span>
|
||||
</span>
|
||||
</el-popover>
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze "
|
||||
:class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex"
|
||||
class="el-dropdown-menu nz-chart-dropdown"
|
||||
style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;">
|
||||
<li @click="refreshChart" class="el-dropdown-menu__item">
|
||||
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span>
|
||||
</li>
|
||||
<li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}
|
||||
</li>
|
||||
<li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}
|
||||
</li>
|
||||
<li @click="showAllScreen" class="el-dropdown-menu__item">
|
||||
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}
|
||||
</li>
|
||||
<li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}
|
||||
</li>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
</ul>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
@@ -336,31 +332,7 @@ export default {
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$confirm(this.$t('tip.confirmDuplicate'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
const param = { id: this.data.id }
|
||||
this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t('tip.duplicateSuccess')
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id, response.data)
|
||||
} else {
|
||||
if (response.msg) {
|
||||
this.$message.error(response.msg)
|
||||
} else if (response.error) {
|
||||
this.$message.error(response.error)
|
||||
} else {
|
||||
this.$message.error(response)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
|
||||
@@ -10,19 +10,23 @@
|
||||
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
|
||||
<li @click="refreshChart" class="el-dropdown-menu__item">
|
||||
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
|
||||
<li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li @click="showAllScreen" class="el-dropdown-menu__item">
|
||||
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
|
||||
<li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
</ul>
|
||||
@@ -224,31 +228,7 @@ export default {
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$confirm(this.$t('tip.confirmDuplicate'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
const param = { id: this.data.id }
|
||||
this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t('tip.duplicateSuccess')
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id, response.data)
|
||||
} else {
|
||||
if (response.msg) {
|
||||
this.$message.error(response.msg)
|
||||
} else if (response.error) {
|
||||
this.$message.error(response.error)
|
||||
} else {
|
||||
this.$message.error(response)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
setLoadFrameFull () {
|
||||
const that = this
|
||||
|
||||
@@ -68,10 +68,16 @@
|
||||
line-height: 20px;
|
||||
}
|
||||
.nz-chart-dropdown {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: calc(100% - 110px);
|
||||
transform-origin: center top;
|
||||
z-index: 1000;
|
||||
width: 110px;
|
||||
li {
|
||||
padding-left:15px !important;
|
||||
padding-right:0px !important;
|
||||
width:140px;
|
||||
width:94px;
|
||||
text-align: left;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
@@ -83,7 +89,7 @@
|
||||
li {
|
||||
padding-left:15px !important;
|
||||
padding-right:0px !important;
|
||||
width:140px;
|
||||
width:94px;
|
||||
text-align: left;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
@@ -310,8 +316,13 @@
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
.chart-title-icon{
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
span{
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -499,9 +510,9 @@
|
||||
.chartTitle {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 20px;
|
||||
height: 28px;
|
||||
padding: 1px 3px 0 3px;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
padding: 1px 10px 0 10px;
|
||||
box-sizing: border-box;
|
||||
.nz-chart-top{
|
||||
width:100%;
|
||||
@@ -514,11 +525,13 @@
|
||||
}
|
||||
.chart-title {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
color: #52545c;
|
||||
line-height: 40px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
height: 39px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
.chart-title-text{
|
||||
max-width:calc(100% - 20px);
|
||||
text-overflow: ellipsis;
|
||||
@@ -527,9 +540,14 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
.chart-title-icon{
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
.nz-icon-xialaxuanze{
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
span{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.nz-icon-more1{
|
||||
margin-left: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@@ -36,20 +36,24 @@
|
||||
</span>
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow"><i :class="{'visible':caretShow,'hidden':!caretShow}" class="nz-icon nz-icon-xialaxuanze "></i></span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" :id="'dropdownUl'+chartIndex" slot="dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow" v-show="dropdownMenuShow" >
|
||||
<li v-show="!isExplore" @click="refreshChart" class="el-dropdown-menu__item">
|
||||
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
|
||||
<li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`" v-show="!isExplore">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
|
||||
<li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`" v-show="!isExplore">
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li @click="showAllScreen" class="el-dropdown-menu__item">
|
||||
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
|
||||
<li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`" v-show="!isExplore">
|
||||
<li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
</ul>
|
||||
</el-dropdown>
|
||||
@@ -1470,31 +1474,7 @@ export default {
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$confirm(this.$t('tip.confirmDuplicate'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
const param = { id: this.data.id }
|
||||
this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t('tip.duplicateSuccess')
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id, response.data)
|
||||
} else {
|
||||
if (response.msg) {
|
||||
this.$message.error(response.msg)
|
||||
} else if (response.error) {
|
||||
this.$message.error(response.error)
|
||||
} else {
|
||||
this.$message.error(response)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
dateChange (time) {
|
||||
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
|
||||
|
||||
@@ -10,19 +10,23 @@
|
||||
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span @click="refreshChart" class="" v-has="`${from}_chart_toEdit`" :title="$t('dashboard.refresh')">
|
||||
<i class="nz-icon nz-icon-replay"></i>
|
||||
</span>
|
||||
<span @click="showAllScreen" class="" :title="$t('dashboard.screen')">
|
||||
<i class="nz-icon nz-icon-maxview"></i>
|
||||
</span>
|
||||
<span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
|
||||
<li @click="refreshChart" class="el-dropdown-menu__item">
|
||||
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
|
||||
<li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="" >
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
|
||||
<li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
|
||||
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li @click="showAllScreen" class="el-dropdown-menu__item">
|
||||
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
|
||||
<li @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
</ul>
|
||||
@@ -172,31 +176,7 @@ export default {
|
||||
},
|
||||
duplicate () {
|
||||
this.dropdownMenuShow = false
|
||||
this.$confirm(this.$t('tip.confirmDuplicate'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
const param = { id: this.data.id }
|
||||
this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t('tip.duplicateSuccess')
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id, response.data)
|
||||
} else {
|
||||
if (response.msg) {
|
||||
this.$message.error(response.msg)
|
||||
} else if (response.error) {
|
||||
this.$message.error(response.error)
|
||||
} else {
|
||||
this.$message.error(response)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$emit('on-duplicate-chart-block', this.data.id)
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
|
||||
@@ -220,7 +220,7 @@
|
||||
<!--type unit end-->
|
||||
|
||||
<el-form-item :label="$t('dashboard.panel.chartForm.width')" class="half-form-item" prop="span">
|
||||
<el-select class="right-box-row-with-btn" :disabled="isGroup" placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.span" value-key="chartSpan" id="chart-box-span">
|
||||
<el-select class="right-box-row-with-btn" :disabled="editChart.type === 'group'" placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.span" value-key="chartSpan" id="chart-box-span">
|
||||
<el-option :key="item" :label="'span-' + item" :value="item" v-for="item in spanList">
|
||||
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
|
||||
</el-option>
|
||||
@@ -232,7 +232,7 @@
|
||||
id="chart-box-height"
|
||||
:fetch-suggestions="querySearch"
|
||||
@select="handleSelect"
|
||||
:disabled="isGroup"
|
||||
:disabled="editChart.type === 'group'"
|
||||
placeholder=""
|
||||
popper-class="popper-z-index no-style-class"
|
||||
size="mini"
|
||||
@@ -507,7 +507,6 @@ export default {
|
||||
isUrl: false,
|
||||
isSingleStat: false,
|
||||
isAlert: false,
|
||||
isGroup: false,
|
||||
rules: {
|
||||
panelName: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
||||
@@ -875,14 +874,6 @@ export default {
|
||||
chartParams.groupId = -1
|
||||
}
|
||||
delete chartParams.panel
|
||||
if (chartParams.type === 'group') {
|
||||
chartParams.elements = [{
|
||||
expression: 'Hadoop_DataNode_BlockChecksumOpNumOps',
|
||||
id: '',
|
||||
legend: '',
|
||||
type: 'expert'
|
||||
}]
|
||||
}
|
||||
this.$post('visual/panel/chart', chartParams).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
@@ -1208,31 +1199,26 @@ export default {
|
||||
this.isUrl = true
|
||||
this.isSingleStat = false
|
||||
this.isAlert = false
|
||||
this.isGroup = false
|
||||
},
|
||||
setIsSingleStat () {
|
||||
this.isUrl = false
|
||||
this.isSingleStat = true
|
||||
this.isAlert = false
|
||||
this.isGroup = false
|
||||
},
|
||||
setIsAlertList () {
|
||||
this.isAlert = true
|
||||
this.isUrl = false
|
||||
this.isSingleStat = false
|
||||
this.isGroup = false
|
||||
},
|
||||
setIsOtherChart () {
|
||||
this.isSingleStat = false
|
||||
this.isUrl = false
|
||||
this.isAlert = false
|
||||
this.isGroup = false
|
||||
},
|
||||
setIsGroup () {
|
||||
this.isSingleStat = false
|
||||
this.isUrl = false
|
||||
this.isAlert = false
|
||||
this.isGroup = true
|
||||
},
|
||||
// 编辑chart时使用, set_tdata
|
||||
editData (data, panelId) {
|
||||
@@ -1268,6 +1254,8 @@ export default {
|
||||
// this.elements=[1];
|
||||
} else if (this.editChart.type === 'singleStat') {
|
||||
this.setIsSingleStat()
|
||||
} else if (this.editChart.type === 'group') {
|
||||
this.setIsGroup()
|
||||
} else {
|
||||
if ((this.editChart.type === 'line' || this.editChart.type === 'bar' || this.editChart.type === 'stackArea' || this.editChart.type === 'singleStat') && data.param) {
|
||||
this.editChart.param.threshold = data.param.threshold
|
||||
@@ -1722,6 +1710,8 @@ export default {
|
||||
this.$set(this.editChart.param, 'valueMapping', { type: 'value', mapping: [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }] })
|
||||
this.showPicker.push({ bac: false, text: false })
|
||||
}
|
||||
} else if (n.type === 'group') {
|
||||
this.setIsGroup()
|
||||
} else {
|
||||
this.setIsOtherChart()
|
||||
n.param && !n.param.legendValue && this.$set(this.editChart.param, 'legendValue', { min: 'off', max: 'off', avg: 'off', last: 'off', total: 'off' })
|
||||
@@ -1740,7 +1730,7 @@ export default {
|
||||
})
|
||||
}
|
||||
})
|
||||
if (n.id) {
|
||||
if (n.id || n.name) {
|
||||
this.editData(this.editChart, this.showPanel.id)
|
||||
} else {
|
||||
this.createData(this.showPanel.id, '', n.unit)
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
<template slot-scope="{ node, data }">
|
||||
<div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">
|
||||
<i class="nz-icon nz-icon-moban"></i>
|
||||
<i class="nz-icon nz-icon-template2"></i>
|
||||
{{data.label}}
|
||||
</div>
|
||||
</template>
|
||||
@@ -50,7 +50,7 @@
|
||||
|
||||
<template slot-scope="{ node, data }">
|
||||
<div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}">
|
||||
<i class="nz-icon nz-icon-moban"></i>
|
||||
<i class="nz-icon nz-icon-template2"></i>
|
||||
{{data.label}}
|
||||
</div>
|
||||
</template>
|
||||
@@ -651,11 +651,11 @@ export default {
|
||||
padding: 0 10px 0 25px;
|
||||
position: relative;
|
||||
}
|
||||
.nz-cascade .nz-icon-moban {
|
||||
.nz-cascade .nz-icon-template2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nz-cascade-temp .nz-icon-moban{
|
||||
.nz-cascade-temp .nz-icon-template2{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
|
||||
Reference in New Issue
Block a user