CN-268 feat: panel重构
This commit is contained in:
chenjinsong
343
src/views/charts/PanelChartList.vue
Normal file
343
src/views/charts/PanelChartList.vue
Normal file
@@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" ref="layoutBox">
|
||||
<grid-layout
|
||||
ref="layout"
|
||||
v-if="gridLayoutShow"
|
||||
v-model:layout="copyDataList"
|
||||
:col-num="30"
|
||||
:is-draggable="!panelLock"
|
||||
:is-resizable="!panelLock"
|
||||
:margin="[10, 10]"
|
||||
:row-height="40"
|
||||
:vertical-compact="true"
|
||||
:use-css-transforms="false"
|
||||
>
|
||||
<grid-item
|
||||
v-for="item in copyDataList"
|
||||
:key="item.id"
|
||||
:h="item.h"
|
||||
:i="item.i"
|
||||
:w="item.w"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
:static="item.static"
|
||||
:ref="'grid-item' + item.id"
|
||||
:isResizable = "item.type === 'group' ? false: null"
|
||||
dragAllowFrom=".chart-header"
|
||||
dragIgnoreFrom=".chart-header__tools"
|
||||
>
|
||||
<panel-chart
|
||||
:ref="'chart' + item.id"
|
||||
:chart-info="item"
|
||||
:show-header="true"
|
||||
:time-filter="timeFilter"
|
||||
@showFullscreen="showFullscreen"
|
||||
></panel-chart>
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
<!-- noData -->
|
||||
<div v-if="noData" class="no-data">
|
||||
<div class="no-data-div">No data</div>
|
||||
</div>
|
||||
<!-- 全屏查看 -->
|
||||
<el-dialog
|
||||
v-model="fullscreen.visible"
|
||||
:show-close="false"
|
||||
class="chart-fullscreen"
|
||||
destroy-on-close
|
||||
fullscreen
|
||||
:modal-append-to-body="false"
|
||||
>
|
||||
<panel-chart
|
||||
:ref="'chart-fullscreen' + fullscreen.chartInfo.id"
|
||||
:chart-info="fullscreen.chartInfo"
|
||||
:is-fullscreen="true"
|
||||
:panelLock="panelLock"
|
||||
:time-filter="timeFilter"
|
||||
@showFullscreen="showFullscreen"
|
||||
></panel-chart>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PanelChart from '@/views/charts/PanelChart'
|
||||
import VueGridLayout from 'vue-grid-layout'
|
||||
import { getTypeCategory } from './charts/tools'
|
||||
|
||||
export default {
|
||||
name: 'PanelChartList',
|
||||
components: {
|
||||
PanelChart,
|
||||
GridLayout: VueGridLayout.GridLayout,
|
||||
GridItem: VueGridLayout.GridItem
|
||||
},
|
||||
props: {
|
||||
timeFilter: Object, // 时间范围
|
||||
panelLock: { type: Boolean, default: true },
|
||||
isGroup: Boolean,
|
||||
dataList: Array // 看板中所有图表信息
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
gridLayoutLoading: false,
|
||||
gridLayoutShow: false,
|
||||
copyDataList: [],
|
||||
noData: false, // no data
|
||||
tempDom: { height: '', width: '' },
|
||||
stepWidth: null,
|
||||
timer: null,
|
||||
timestamp: new Date().getTime(),
|
||||
fullscreen: {
|
||||
visible: false,
|
||||
chartData: [],
|
||||
chartInfo: {}
|
||||
},
|
||||
scrollTop: 0,
|
||||
scrollTopTimer: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const dom = document.getElementById(this.isGroup ? `chartListGroup${this.timestamp}` : `chartList${this.timestamp}`)
|
||||
if (dom) {
|
||||
this.stepWidth = Math.floor(dom.offsetWidth / 12)
|
||||
}
|
||||
},
|
||||
showFullscreen (show, chartInfo) {
|
||||
this.fullscreen.chartInfo = chartInfo
|
||||
this.fullscreen.visible = show
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataList: {
|
||||
deep: true,
|
||||
handler (n, o) {
|
||||
this.gridLayoutShow = false
|
||||
this.gridLayoutLoading = true
|
||||
this.noData = !n || n.length < 1
|
||||
/*const nn = JSON.parse(`
|
||||
[
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Sessions",
|
||||
"i18n": "overall.sessions",
|
||||
"panelId": 1,
|
||||
"pid": 0,
|
||||
"type": 11,
|
||||
"x": 20,
|
||||
"y": 1,
|
||||
"w": 10,
|
||||
"h": 5,
|
||||
"params": "{\\"url\\":\\"/interface/traffic/sessions?startTime={{startTime}}&endTime={{endTime}}\\",\\"unitType\\":\\"number\\"}",
|
||||
"remark": "",
|
||||
"state": 1,
|
||||
"buildIn": 0,
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"panel": {
|
||||
"id": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Traffic summary",
|
||||
"i18n": "trafficSummary.trafficSummary",
|
||||
"panelId": 1,
|
||||
"pid": 0,
|
||||
"type": 93,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"w": 30,
|
||||
"h": 1,
|
||||
"params": "",
|
||||
"remark": "",
|
||||
"state": 1,
|
||||
"buildIn": 0,
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"panel": {
|
||||
"id": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Active list",
|
||||
"i18n": "trafficSummary.activeList",
|
||||
"panelId": 1,
|
||||
"pid": 0,
|
||||
"type": 93,
|
||||
"x": 0,
|
||||
"y": 16,
|
||||
"w": 30,
|
||||
"h": 1,
|
||||
"params": "",
|
||||
"remark": "",
|
||||
"state": 1,
|
||||
"buildIn": 0,
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"panel": {
|
||||
"id": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Domain analysis statistics",
|
||||
"i18n": "trafficSummary.domainStatistics",
|
||||
"panelId": 1,
|
||||
"pid": 0,
|
||||
"type": 93,
|
||||
"x": 0,
|
||||
"y": 35,
|
||||
"w": 30,
|
||||
"h": 1,
|
||||
"params": "",
|
||||
"remark": "",
|
||||
"state": 1,
|
||||
"buildIn": 0,
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"panel": {
|
||||
"id": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "Packets",
|
||||
"i18n": "overall.packets",
|
||||
"panelId": 1,
|
||||
"pid": 0,
|
||||
"type": 11,
|
||||
"x": 20,
|
||||
"y": 6,
|
||||
"w": 10,
|
||||
"h": 5,
|
||||
"params": "{\\"url\\":\\"/interface/traffic/packets?startTime={{startTime}}&endTime={{endTime}}\\",\\"unitType\\":\\"number\\"}",
|
||||
"remark": "",
|
||||
"state": 1,
|
||||
"buildIn": 0,
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"panel": {
|
||||
"id": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"name": "Throughput",
|
||||
"i18n": "trafficSummary.throughput",
|
||||
"panelId": 1,
|
||||
"pid": 0,
|
||||
"type": 11,
|
||||
"x": 20,
|
||||
"y": 11,
|
||||
"w": 10,
|
||||
"h": 5,
|
||||
"params": "{\\"url\\":\\"/interface/traffic/throughput?startTime={{startTime}}&endTime={{endTime}}\\",\\"unitType\\":\\"byte\\"}",
|
||||
"remark": "packets",
|
||||
"state": 1,
|
||||
"buildIn": 0,
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"panel": {
|
||||
"id": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"name": "Active client",
|
||||
"i18n": "trafficSummary.activeClient",
|
||||
"panelId": 1,
|
||||
"pid": 0,
|
||||
"type": 61,
|
||||
"x": 0,
|
||||
"y": 17,
|
||||
"w": 10,
|
||||
"h": 9,
|
||||
"params": "{\\"url\\":\\"/interface/traffic/activeClientIP?startTime={{startTime}}&endTime={{endTime}}&order={{order}}&limit={{limit}}\\"}",
|
||||
"remark": "",
|
||||
"state": 1,
|
||||
"buildIn": 0,
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"panel": {
|
||||
"id": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"name": "Domain category",
|
||||
"i18n": "trafficSummary.domainCategory",
|
||||
"panelId": 1,
|
||||
"pid": 0,
|
||||
"type": 31,
|
||||
"x": 0,
|
||||
"y": 36,
|
||||
"w": 15,
|
||||
"h": 13,
|
||||
"params": "{\\"url\\":\\"/interface/traffic/topDomainCategories?startTime={{startTime}}&endTime={{endTime}}&limit={{limit}}\\",\\"nameColumn\\":\\"fqdnCategoryName\\",\\"valueColumn\\":\\"uniqDomains\\",\\"tableNameColumn\\":\\"domain\\",\\"urlTable\\":\\"/interface/traffic/activeDomainCategories?startTime={{startTime}}&endTime={{endTime}}&fqdnCategoryName={{fqdnCategoryName}}&limit={{limit}}&order={{order}}\\",\\"urlChildrenTable\\":\\"/interface/traffic/domainCategoryServerIpList?startTime={{startTime}}&endTime={{endTime}}&order={{order}}&limit={{limit}}&domain={{domain}}\\"}",
|
||||
"remark": "",
|
||||
"state": 1,
|
||||
"buildIn": 0,
|
||||
"panel": {
|
||||
"id": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"name": "Traffic map",
|
||||
"i18n": "trafficSummary.trafficMap",
|
||||
"panelId": 1,
|
||||
"pid": 0,
|
||||
"type": 2,
|
||||
"x": 0,
|
||||
"y": 1,
|
||||
"w": 20,
|
||||
"h": 15,
|
||||
"params": "{\\"url\\":\\"/interface/traffic/map?startTime={{startTime}}&endTime={{endTime}}&country={{country}}&province={{province}}&city={{city}}\\",\\"unitType\\":\\"byte\\",\\"valueColumn\\":\\"bytes\\"}",
|
||||
"remark": "traffic summaryyy",
|
||||
"state": 1,
|
||||
"buildIn": 0,
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"panel": {
|
||||
"id": 1
|
||||
}
|
||||
}
|
||||
]
|
||||
`)*/
|
||||
const tempList = n.map(item => {
|
||||
let params = {}
|
||||
const height = item.h
|
||||
if (item.params) {
|
||||
try {
|
||||
params = JSON.parse(item.params)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
params.showHeader = true
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
i: item.id,
|
||||
w: item.w,
|
||||
h: height,
|
||||
x: item.x || 0,
|
||||
y: item.y || 0,
|
||||
params,
|
||||
category: getTypeCategory(item.type) // 类别，是echarts还是map等等
|
||||
}
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.copyDataList = JSON.parse(JSON.stringify(tempList))
|
||||
setTimeout(() => {
|
||||
this.gridLayoutShow = true
|
||||
})
|
||||
this.gridLayoutLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user