831 lines
26 KiB
Vue
831 lines
26 KiB
Vue
<template>
|
||
<div class="full-width-height chart-list asset-detail">
|
||
<nz-bottom-data-list
|
||
:layout="[]"
|
||
:tabs="tabs"
|
||
:targetTab="targetTab"
|
||
@changeTab="changeTab"
|
||
class="full-width-height"
|
||
:showPagination="false"
|
||
>
|
||
<template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
|
||
<template v-slot:top-tool-right>
|
||
<div v-if="from === fromRoute.asset" style="display: flex">
|
||
<div class="top-tool-search margin-r-20">
|
||
<el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive" clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">
|
||
<i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>
|
||
</el-input>
|
||
</div>
|
||
<pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
|
||
<button id="asset-create-asset" v-has="'panel_chart_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" @click.stop="addChart">
|
||
<i class="nz-icon nz-icon-create-square"></i>
|
||
</button>
|
||
<top-tool-more-options
|
||
id="asset-list"
|
||
:params="filter"
|
||
:params-type="paramsType"
|
||
:permissions="{import: 'panel_chart_add', export: 'panel_view'}"
|
||
class="top-tool-export margin-r-10"
|
||
export-file-name="asset-charts"
|
||
export-url="visual/panel/export"
|
||
import-url="visual/panel/import"
|
||
@afterImport="getTableData"
|
||
:showCur="false"
|
||
:link="obj"
|
||
:showLock="from === fromRoute.asset"
|
||
@panelLockChange="panelLockChange"
|
||
>
|
||
<template v-slot:after>
|
||
<el-dropdown-item v-has="'panel_chart_add'">
|
||
<div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>{{ $t('overall.AddByTemplate') }}</div>
|
||
</el-dropdown-item>
|
||
</template>
|
||
</top-tool-more-options>
|
||
</div>
|
||
<div v-else-if="from === fromRoute.endpoint" style="display: flex">
|
||
<div class="top-tool-search margin-r-20">
|
||
<el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive" clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">
|
||
<i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>
|
||
</el-input>
|
||
</div>
|
||
<pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
|
||
<button id="endpoint-create-chart" v-has="'panel_chart_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" @click.stop="addChart">
|
||
<i class="nz-icon nz-icon-create-square"></i>
|
||
</button>
|
||
<top-tool-more-options
|
||
id="asset-list"
|
||
:link="obj"
|
||
:params="filter"
|
||
:permissions="{import: 'panel_chart_add', export: 'panel_view'}"
|
||
:showCur="false"
|
||
:params-type="paramsType"
|
||
:showLock="from === fromRoute.endpoint"
|
||
class="top-tool-export margin-r-10"
|
||
export-file-name="endpoint-charts"
|
||
export-url="visual/panel/export"
|
||
import-url="visual/panel/import"
|
||
@afterImport="getTableData"
|
||
@panelLockChange="panelLockChange"
|
||
>
|
||
<template v-slot:after>
|
||
<el-dropdown-item v-has="'panel_chart_add'">
|
||
<div id="chart-temp-add" @click="addChartByTemp"><i class="nz-icon nz-icon-add"></i>{{ $t('overall.AddByTemplate') }}</div>
|
||
</el-dropdown-item>
|
||
</template>
|
||
</top-tool-more-options>
|
||
</div>
|
||
<div v-else-if="from === fromRoute.chartTemp">
|
||
<button id="panel-lock" :title='panelLock ? $t("overall.locked") : $t("overall.unlocked")' class="top-tool-btn margin-r-10" @click="panelLock=!panelLock" type="button">
|
||
<i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i>
|
||
</button>
|
||
<button @click="chartBySync" id="chart-sync" :title="$t('overall.syncChart')" class="top-tool-btn margin-r-10"
|
||
type="button">
|
||
<i class="nz-icon nz-icon-sync"></i>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
<template v-slot>
|
||
<div class="panel">
|
||
<!--图表-->
|
||
<div class="table-list" id="tableList">
|
||
<div ref="dashboardScrollbar" id="dashboardScrollbar" style="height: 100%; overflow: auto;">
|
||
<div class="box-content">
|
||
<chart-list :draggable="draggable" :from="from" :is-model="from === fromRoute.model" :obj="obj" @on-edit-chart="editChart"
|
||
@on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :panel-data-list="panelDataList"
|
||
@on-add-group-item-chart="addGroupItem"></chart-list>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
|
||
</div>
|
||
</template>
|
||
</nz-bottom-data-list>
|
||
<transition name="right-box">
|
||
<chart-box v-if="rightBox.chart.show" ref="addChartModal" :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
|
||
</transition>
|
||
<transition name="right-box">
|
||
<chart-temp-box v-if="rightBox.chartTemp.show" :from="from" :obj="chart" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @on-create-success="createSuccess"></chart-temp-box>
|
||
</transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import chartBox from '../../../page/dashboard/chartBox'
|
||
import chartList from '../../../charts/chart-list'
|
||
import bus from '../../../../libs/bus'
|
||
import subDataListMixin from '@/components/common/mixin/subDataList'
|
||
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
|
||
import { fromRoute } from '@/components/common/js/constants'
|
||
import chartTempBox from '@/components/common/rightBox/chartTempBox'
|
||
import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
|
||
export default {
|
||
name: 'panelTabNew',
|
||
mixins: [subDataListMixin],
|
||
props: {
|
||
from: String,
|
||
obj: Object,
|
||
draggable: { type: Boolean, default: true },
|
||
paramsType: {
|
||
type: String,
|
||
default: 'dashboard'
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
fromRoute,
|
||
panelLock: true,
|
||
showTopBtn: false, // top按钮
|
||
visible: false,
|
||
rightBox: { // 面板弹出框相关
|
||
chart: {
|
||
show: false
|
||
},
|
||
chartTemp: {
|
||
show: false
|
||
}
|
||
},
|
||
tableHover: false,
|
||
searchTime: bus.getTimezontDateRange(),
|
||
intervalTimer: null,
|
||
interval: 0,
|
||
panel: { // 新增panel
|
||
id: '',
|
||
name: ''
|
||
},
|
||
chart: {},
|
||
blankChart: {
|
||
id: '',
|
||
title: '',
|
||
type: 'line',
|
||
span: 12,
|
||
height: '400',
|
||
unit: 2,
|
||
param: {
|
||
url: '',
|
||
threshold: ''
|
||
},
|
||
elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
|
||
panel: '',
|
||
sync: 0,
|
||
name: '',
|
||
remark: ''
|
||
},
|
||
pageObj: {
|
||
pageNo: 1,
|
||
pageSize: -1, // 此处获取所有数据，所以设置一个较大的值
|
||
total: 0
|
||
},
|
||
chartsData: [], // 中间部分图表相关数据
|
||
panelData: [],
|
||
searchMsg: { // 给搜索框子组件传递的信息
|
||
zheze_none: true,
|
||
searchLabelList: [
|
||
]
|
||
},
|
||
searchLabel: {}, // 搜索参数
|
||
// ---图表相关参数--start
|
||
dataList: [], // 数据列表
|
||
// searchName: '', // 搜索名称
|
||
filter: { // 过滤条件
|
||
// productId: 0,
|
||
panelId: 0,
|
||
start_time: '',
|
||
end_time: '',
|
||
searchName: ''
|
||
},
|
||
showPanel: {
|
||
name: '',
|
||
type: this.from,
|
||
id: null
|
||
},
|
||
blankChartTemp: {
|
||
varType: 1,
|
||
pid: '',
|
||
panelId: null,
|
||
varIds: []
|
||
},
|
||
// removeModal: false, // 删除弹出
|
||
// deleteObj: {}, // 删除对象
|
||
// ---图表相关参数--end
|
||
scrollbarWrap: null,
|
||
panelDataList: []
|
||
}
|
||
},
|
||
components: {
|
||
chartBox,
|
||
chartList,
|
||
nzBottomDataList,
|
||
topToolMoreOptions,
|
||
chartTempBox
|
||
},
|
||
methods: {
|
||
// 刷新
|
||
refresh () {
|
||
this.getTableData(this.obj.id)
|
||
},
|
||
refreshTime (st, et) {
|
||
const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm')
|
||
const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm')
|
||
this.searchTime = [startTime, endTime]
|
||
},
|
||
panelReloadForDel () {
|
||
this.getTableData(this.obj.id)
|
||
},
|
||
/* 图表相关操作--start */
|
||
addChart () {
|
||
this.chart = this.newChart()
|
||
this.rightBox.chart.show = true
|
||
},
|
||
addChartByTemp () {
|
||
this.chart = Object.assign({}, this.blankChartTemp)
|
||
this.chart.panelId = this.showPanel.id
|
||
if (this.from === fromRoute.endpoint) {
|
||
this.chart.varType = 2
|
||
}
|
||
if (this.from === fromRoute.asset || this.from === fromRoute.endpoint) {
|
||
this.chart.varIds.push(this.obj.id)
|
||
}
|
||
this.rightBox.chartTemp.show = true
|
||
},
|
||
newChart () {
|
||
return JSON.parse(JSON.stringify(this.blankChart))
|
||
},
|
||
// 切换tab
|
||
changeTab (tab) {
|
||
this.$emit('changeTab', tab)
|
||
},
|
||
closeRightBox (refresh) {
|
||
this.rightBox.chart.show = false
|
||
this.rightBox.chartTemp.show = false
|
||
if (refresh) {
|
||
this.refresh()
|
||
if (this.from === fromRoute.chartTemp) {
|
||
this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => {
|
||
res.data.list.forEach(item => {
|
||
if (!item.children) {
|
||
item.children = []
|
||
}
|
||
})
|
||
this.panelDataList = res.data.list
|
||
if (this.panelDataList.length > 0) {
|
||
this.showPanel.id = this.filter.panelId = 0
|
||
this.getData(this.filter)
|
||
}
|
||
})
|
||
this.$emit('getTableData')
|
||
}
|
||
}
|
||
},
|
||
// 编辑图表信息,打开编辑弹窗
|
||
editChart (data) {
|
||
if (!data.param) {
|
||
data.param = { url: '', threshold: '' }
|
||
}
|
||
this.chart = JSON.parse(JSON.stringify(data))
|
||
this.rightBox.chart.show = true
|
||
},
|
||
// 移除图表:弹出确认框询问
|
||
delChart (data, from) {
|
||
this.$confirm(this.$t('tip.confirmDelete'), {
|
||
confirmButtonText: this.$t('tip.yes'),
|
||
cancelButtonText: this.$t('tip.no'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$delete('visual/panel/chart?ids=' + data.id).then(response => {
|
||
if (response.code === 200) {
|
||
this.$message({
|
||
duration: 2000,
|
||
type: 'success',
|
||
message: this.$t('tip.deleteSuccess')
|
||
})
|
||
this.closeRightBox(true)
|
||
} else {
|
||
this.$message.error(response.msg)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
addGroupItem (groupId) {
|
||
this.chart = this.newChart()
|
||
this.chart.groupId = groupId
|
||
this.chart.panelId = this.showPanel.id
|
||
this.chart.panelName = this.showPanel.name
|
||
this.chart.isGroup = true
|
||
this.rightBox.chart.show = true
|
||
},
|
||
delChartOk () {
|
||
this.getData(this.filter)
|
||
},
|
||
// 图表创建成功，回调panel页面，进行图表的刷新
|
||
createSuccess (msg, data, params) {
|
||
this.getData(this.filter)
|
||
},
|
||
// 获取数据,用在子页面
|
||
getData (params) {
|
||
if (params.start_time === '' || params.end_time === '') {
|
||
const now = bus.getTimezontDateRange()
|
||
const endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss')
|
||
const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss')
|
||
params.start_time = startTimeTmp
|
||
params.end_time = endTimeTmp
|
||
params.from = this.from
|
||
}
|
||
if (this.$refs.chartList) {
|
||
this.$refs.chartList.initData(params)
|
||
}
|
||
},
|
||
|
||
/* 图表相关操作--end */
|
||
/* 时间条件查询--start */
|
||
// 选择日期变化
|
||
dateChange (val) {
|
||
// this.searchTime = [...val];
|
||
if (this.$refs.pickTime) {
|
||
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||
this.setSearchTime(nowTimeType.type, nowTimeType.value)
|
||
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
|
||
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
|
||
this.filter.panelId = this.showPanel.id
|
||
this.getData(this.filter)
|
||
}
|
||
},
|
||
/* 时间条件查询--end */
|
||
setSearchTime (type, val) { // 设置searchTime
|
||
if (type === 'minute') {
|
||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
|
||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
|
||
this.$set(this.searchTime, 0, startTime)
|
||
this.$set(this.searchTime, 1, endTime)
|
||
this.$set(this.searchTime, 2, val + 'm')
|
||
} else if (type === 'hour') {
|
||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
|
||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
|
||
this.$set(this.searchTime, 0, startTime)
|
||
this.$set(this.searchTime, 1, endTime)
|
||
this.$set(this.searchTime, 2, val + 'h')
|
||
} else if (type === 'date') {
|
||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
|
||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
|
||
this.$set(this.searchTime, 0, startTime)
|
||
this.$set(this.searchTime, 1, endTime)
|
||
this.$set(this.searchTime, 2, val + 'd')
|
||
}
|
||
this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
|
||
},
|
||
getVarType (from) {
|
||
if (from === this.fromRoute.asset) {
|
||
return 1
|
||
}
|
||
},
|
||
// 公用操作
|
||
getTableData (linkId) {
|
||
if (this.from === this.fromRoute.alertRule) {
|
||
this.getData(this.filter)
|
||
} else {
|
||
if (this.from === this.fromRoute.chartTemp) {
|
||
if (this.obj.type === 'group') {
|
||
this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => {
|
||
res.data.list.forEach(item => {
|
||
if (!item.children) {
|
||
item.children = []
|
||
}
|
||
})
|
||
this.panelDataList = res.data.list
|
||
if (this.panelDataList.length > 0) {
|
||
this.showPanel.id = this.filter.panelId = 0
|
||
this.getData(this.filter)
|
||
}
|
||
})
|
||
return
|
||
}
|
||
this.panelDataList = [this.obj]
|
||
if (this.panelDataList.length > 0) {
|
||
this.showPanel.id = this.filter.panelId = 0
|
||
this.getData(this.filter)
|
||
}
|
||
} else {
|
||
this.$get('visual/panel', { type: this.from, link: linkId }).then(response => {
|
||
if (response.code === 200) {
|
||
this.panelData = response.data.list
|
||
if (this.panelData.length > 0) {
|
||
this.showPanel.id = this.filter.panelId = this.panelData[0].id
|
||
this.getData(this.filter)
|
||
}
|
||
} else {
|
||
if (response.msg) {
|
||
console.error(response.msg)
|
||
this.$message.error(response.msg)
|
||
} else if (response.error) {
|
||
console.error(response.error)
|
||
this.$message.error(response.error)
|
||
} else {
|
||
console.error(response)
|
||
this.$message.error(response)
|
||
}
|
||
}
|
||
}).catch((error) => {
|
||
if (error) {
|
||
console.error(error)
|
||
this.$message.error(error.toString())
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},
|
||
// 定期刷新
|
||
selectInterval (val) {
|
||
this.visible = false
|
||
clearInterval(this.intervalTimer)
|
||
if (val) {
|
||
this.interval = val
|
||
const start = new Date(this.searchTime[1])
|
||
const now = new Date()
|
||
const interval = Math.floor((now.getTime() - start.getTime()) / 1000) // 计算当前结束时间到现在的间隔（秒）
|
||
if (interval >= 60) { // 如果结束时间到现在超过1分钟，则
|
||
this.getIntervalData(interval)
|
||
}
|
||
this.intervalTimer = setInterval(() => {
|
||
this.getIntervalData(this.interval)
|
||
}, val * 1000)
|
||
}
|
||
},
|
||
getIntervalData (interval) { // interval:结束时间到现在的秒数
|
||
const start = new Date(this.searchTime[0])
|
||
const end = new Date(this.searchTime[1])
|
||
start.setSeconds(start.getSeconds() + interval)
|
||
end.setSeconds(end.getSeconds() + interval)
|
||
const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm')
|
||
const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm')
|
||
this.searchTime = [startTime, endTime]
|
||
// 刷新数据
|
||
this.dateChange()
|
||
},
|
||
pageNo (val) {
|
||
this.pageObj.pageNo = val
|
||
this.getTableData(this.obj.id)
|
||
},
|
||
pageSize (val) {
|
||
this.pageObj.pageSize = val
|
||
this.getTableData(this.obj.id)
|
||
},
|
||
search () {
|
||
if (this.$refs.chartList) {
|
||
this.$refs.chartList.searchCharts(this.filter.searchName)
|
||
}
|
||
},
|
||
// 滚动事件触发下拉加载
|
||
onScroll () {
|
||
const _self = this
|
||
this.scrollbarWrap.addEventListener('scroll', bus.debounce(function () {
|
||
_self.showTopBtn = _self.scrollbarWrap.scrollTop > 50
|
||
_self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
|
||
}, 300))
|
||
},
|
||
focusInput () {
|
||
let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
|
||
classVal = classVal.replace('query-input-inactive', 'query-input-active')
|
||
document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
|
||
this.$refs.queryPanel.focus()
|
||
},
|
||
blurInput () {
|
||
if (!this.filter.searchName || this.filter.searchName == '') {
|
||
setTimeout(function () {
|
||
let classVal = document.getElementById('queryPanel').parentElement.getAttribute('class')
|
||
classVal = classVal.replace('query-input-active', 'query-input-inactive')
|
||
document.getElementById('queryPanel').parentElement.setAttribute('class', classVal)
|
||
}, 100)
|
||
}
|
||
},
|
||
clearInput () {
|
||
this.$refs.queryPanel.focus()
|
||
},
|
||
syncChart () {
|
||
if (this.from == this.fromRoute.asset || this.from == this.fromRoute.model) {
|
||
this.$confirm(this.$t('tip.syncTip'), {
|
||
confirmButtonText: this.$t('tip.yes'),
|
||
cancelButtonText: this.$t('tip.no'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
const param = {
|
||
modelId: this.from == this.fromRoute.model ? this.obj.id : null,
|
||
assetId: this.from == this.fromRoute.asset ? this.obj.id : null
|
||
}
|
||
this.$put('/model/syncChart', param).then(response => {
|
||
if (response.code == 200) {
|
||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.syncSuccess') })
|
||
if (this.from == this.fromRoute.asset) {
|
||
this.refresh()
|
||
}
|
||
} else {
|
||
console.error(response.msg)
|
||
this.$message.error(response.msg)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
},
|
||
toTop (wrap) {
|
||
let currentTop = wrap.scrollTop
|
||
const interval = currentTop / 10
|
||
const intervalFunc = setInterval(function () { // 花200ms分10次回到顶部，模拟动画效果
|
||
if (currentTop === 0) {
|
||
clearInterval(intervalFunc)
|
||
} else {
|
||
currentTop = (currentTop - interval) < interval * 0.5 ? 0 : currentTop - interval
|
||
wrap.scrollTop = currentTop
|
||
}
|
||
}, 20)
|
||
},
|
||
tableListEnter () {
|
||
this.tableHover = true
|
||
},
|
||
tableListLeave () {
|
||
this.tableHover = false
|
||
},
|
||
panelLockChange (boolean) {
|
||
this.panelLock = boolean
|
||
},
|
||
chartBySync () {
|
||
this.$post('visual/panel/chart/syncTmpl', { pid: this.obj.id }).then(res => {
|
||
if (res.code === 200) {
|
||
this.getTableData()
|
||
this.$message.success(this.$t('tip.syncSuccess'))
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
mounted () {
|
||
this.scrollbarWrap = this.$refs.dashboardScrollbar
|
||
this.onScroll()
|
||
document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
|
||
document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
|
||
},
|
||
watch: {
|
||
'filter.searchName' (n, o) {
|
||
const temp = this
|
||
setTimeout(function () {
|
||
temp.search()
|
||
}, 1000)
|
||
},
|
||
obj: {
|
||
immediate: true,
|
||
handler (n, o) {
|
||
setTimeout(() => {
|
||
if (n && n.id) {
|
||
this.getTableData(n.id)
|
||
if (this.from === fromRoute.asset) {
|
||
this.searchLabel.assetIds = n.id
|
||
}
|
||
}
|
||
}, 500)
|
||
}
|
||
}
|
||
},
|
||
beforeDestroy () {
|
||
document.querySelector('#tableList') && document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
|
||
document.querySelector('#tableList') && document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)
|
||
this.scrollbarWrap && this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.panel {
|
||
height: 100%;
|
||
}
|
||
|
||
.panel .el-table {
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.panel-list-width {
|
||
width:240px;
|
||
}
|
||
|
||
.panel-dropdown-title {
|
||
line-height:24px;
|
||
padding-left:5px;
|
||
margin-left:10px;
|
||
margin-top: 3px;
|
||
text-align:left;
|
||
border-radius:4px;
|
||
width:120px;
|
||
height:24px;
|
||
border:solid 1px #d8dce1;
|
||
white-space: nowrap;
|
||
overflow-x: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.panel-list-title {
|
||
min-height:24px;
|
||
width:100px;
|
||
white-space: nowrap;
|
||
overflow-x: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.panel-list-item {
|
||
width:190px;
|
||
white-space: nowrap;
|
||
overflow-x: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.content-right-option {
|
||
cursor: pointer;
|
||
display: inline-block;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.content-right-option .nz-icon-delete {
|
||
color: #F98D9A;
|
||
}
|
||
|
||
.content-right-option .nz-icon-delete:hover {
|
||
color: #D96D7A;
|
||
}
|
||
|
||
.content-right-option .nz-icon-view {
|
||
color: #60BEFF;
|
||
}
|
||
|
||
.content-right-option .nz-icon-view:hover {
|
||
color: #409EFF;
|
||
}
|
||
|
||
/* begin-chart list*/
|
||
.table-list {
|
||
overflow-y: auto;
|
||
height: 100%;
|
||
padding: 20px 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.box-content {
|
||
position: relative;
|
||
}
|
||
|
||
/* end-chart list*/
|
||
/* begin--Panel-自定义可编辑的el-select下拉框样式*/
|
||
.panel-dropdown-btn {
|
||
display: inline-block;
|
||
margin-left: 7px;
|
||
float: right;
|
||
color: #60BEFF;
|
||
font-size: 13px
|
||
}
|
||
|
||
.panel-dropdown-btn:hover {
|
||
color: #409EFF;
|
||
}
|
||
|
||
.panel-dropdown-btn-create {
|
||
display: inline-block;
|
||
float: left;
|
||
font-size: 13px;
|
||
color: #F98D9A;
|
||
width: 100%;
|
||
}
|
||
|
||
.panel-dropdown-btn-create:hover {
|
||
color: #D96D7A;
|
||
}
|
||
|
||
.panel-dropdown-btn-delete {
|
||
color: #F98D9A;
|
||
font-size: 13px
|
||
}
|
||
|
||
.panel-dropdown-btn-delete:hover {
|
||
color: #D96D7A;
|
||
}
|
||
|
||
.panel-dropdown-error-message {
|
||
color: #F98D9A;
|
||
}
|
||
|
||
/* end--Panel-自定义可编辑的el-select下拉框样式*/
|
||
.panel-select-width {
|
||
width: 150px;
|
||
}
|
||
|
||
.panel-refresh-interval {
|
||
margin-right: 5px;
|
||
float: right;
|
||
}
|
||
|
||
.panel-refresh-interval-select {
|
||
width: 95px;
|
||
}
|
||
|
||
.panel-calendar {
|
||
float: right;
|
||
margin-right: 1px;
|
||
}
|
||
|
||
.top-tools {
|
||
button {
|
||
background: $btn-light-background-color;
|
||
outline: none;
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
button:hover {
|
||
background: $btn-light-background-color-hover;
|
||
}
|
||
}
|
||
|
||
.nz-dashboard-dropdown {
|
||
height: 300px;
|
||
overflow-y: auto;
|
||
li {
|
||
/*padding: 0 20px !important;*/
|
||
padding-left:20px !important;
|
||
padding-right:0px !important;
|
||
width:240px;
|
||
white-space:nowrap;
|
||
overflow-x:hidden;
|
||
text-overflow:ellipsis;
|
||
}
|
||
}
|
||
|
||
.nz-dashboard-dropdown-bg {
|
||
background: $global-text-color-active;
|
||
color: #fff;
|
||
}
|
||
|
||
.el-dropdown-link {
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.refresh {
|
||
display: flex;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 10px;
|
||
border: 1px solid #ccc;
|
||
background: $btn-light-background-color;
|
||
|
||
span {
|
||
display: inline-block;
|
||
padding: 1px 8px;
|
||
}
|
||
}
|
||
|
||
.popover_ul li {
|
||
padding: 10px 3px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.popover_ul li:hover {
|
||
background: $dropdown-hover-background-color !important;
|
||
color: $global-text-color-active !important;
|
||
}
|
||
|
||
.nz-dashboard-refresh {
|
||
border-right: 1px solid #ccc;
|
||
color: #F0BF84;
|
||
}
|
||
|
||
.nz-dashboard-picker {
|
||
}
|
||
.full-width-height{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.nz-dashboard-dropdown {
|
||
z-index: 3001 !important;
|
||
}
|
||
.panel-calendar .el-range-editor--mini.el-input__inner {
|
||
height: 25px !important;
|
||
border-color: #d8d8d8;
|
||
}
|
||
|
||
.panel-calendar .el-range-editor--mini .el-range__close-icon {
|
||
line-height: 18px;
|
||
}
|
||
|
||
.panel-calendar .el-range-editor--mini .el-range__icon {
|
||
display: none;
|
||
}
|
||
|
||
.panel-calendar .el-range-editor--mini .el-range-separator {
|
||
line-height: 17px;
|
||
}
|
||
|
||
.panel-calendar .el-date-editor--datetimerange.el-input, .panel-calendar .el-date-editor--datetimerange.el-input__inner {
|
||
padding-right: 0;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.nz-dashboard-dropdown .nz-icon-edit {
|
||
font-size: 12px;
|
||
}
|
||
</style>
|