890 lines
30 KiB
Vue
890 lines
30 KiB
Vue
<template>
|
||
<div id="chart-list" :style="{
|
||
width: isGroup ? '100%': 'calc(100% - 10px)',
|
||
}">
|
||
<div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" v-my-loading="gridLayoutLoading" ref="layoutBox">
|
||
<grid-layout
|
||
ref="layout"
|
||
v-if="gridLayoutShow"
|
||
class="pdfDom"
|
||
:class="firstInit ? 'no-animation' : ''"
|
||
:col-num="12"
|
||
:is-draggable="!panelLock"
|
||
:is-resizable="!panelLock"
|
||
:layout.sync="copyDataList"
|
||
:margin="isGroup ? [10, 10] : [10, 10]"
|
||
:row-height="stepWidth"
|
||
:vertical-compact="true"
|
||
:use-css-transforms="false"
|
||
:style="{
|
||
'margin-top': layoutMargintop
|
||
}"
|
||
>
|
||
<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"
|
||
:min-h="headerH"
|
||
:max-h="12"
|
||
:static="item.static"
|
||
:isGroup="isGroup"
|
||
:class="{
|
||
'group-hide-header':item.type === 'group' && item.param.collapse,
|
||
'opacityItem': item.static,
|
||
}"
|
||
:ref="'grid-item' + item.id"
|
||
:isResizable = "item.type === 'group' ? false: null"
|
||
dragAllowFrom=".chart-header"
|
||
dragIgnoreFrom=".chart-header__tools"
|
||
@resize="resizeEvent"
|
||
@resized="resizedEvent"
|
||
@moveEvent="moveEvent"
|
||
@moved="movedEvent"
|
||
@container-resized="containerResizedEvent"
|
||
>
|
||
<panel-chart
|
||
:variablesInit="variablesInit"
|
||
:ref="'chart' + item.id"
|
||
@edit-chart="$emit('edit-chart', item)"
|
||
:chart-info="item"
|
||
:from="from"
|
||
:time-range="timeRange"
|
||
@groupShow="groupShow"
|
||
:isExportHtml="isExportHtml"
|
||
:dataJson="dataJson"
|
||
:showTool="showTool"
|
||
:chart-detail-info="chartDetailInfo"
|
||
:hiddenText="showHidden[item.id]&&showHidden[item.id].hiddenText"
|
||
@refreshPanel="refreshPanel"
|
||
@showFullscreen="showFullscreen"
|
||
></panel-chart>
|
||
</grid-item>
|
||
</grid-layout>
|
||
<!-- noData -->
|
||
<div v-if="noData" class="no-data">
|
||
<svg aria-hidden="true" class="icon">
|
||
<use xlink:href="#nz-icon-no-data-panel"></use>
|
||
</svg>
|
||
<div class="no-data-div">No data</div>
|
||
</div>
|
||
<!-- 全屏查看 -->
|
||
<el-dialog
|
||
class="nz-dialog chart-fullscreen no-transform-dialog"
|
||
v-if="fullscreen.visible"
|
||
:visible.sync="fullscreen.visible"
|
||
:show-close="false"
|
||
destroy-on-close
|
||
fullscreen
|
||
:append-to-body="true"
|
||
>
|
||
<panel-chart
|
||
:ref="'chart-fullscreen' + fullscreen.chartInfo.id"
|
||
:chart-info="fullscreen.chartInfo"
|
||
:from="from"
|
||
:filter="filter"
|
||
:is-fullscreen="true"
|
||
@groupShow="groupShow"
|
||
:dataJson="dataJson"
|
||
:panelLock="panelLock"
|
||
:time-range="timeRange"
|
||
@showFullscreen="showFullscreen"
|
||
></panel-chart>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import GridLayout from './chart/grid/GridLayout'
|
||
import GridItem from './chart/grid/GridItem'
|
||
import { fromRoute } from '@/components/common/js/constants'
|
||
import { getGroupHeight, getLayoutPosition, isGroup } from './chart/tools'
|
||
import panelChart from '@/components/chart/panelChart'
|
||
import bus from '@/libs/bus'
|
||
import groupData from '@/components/chart/tempGroup'
|
||
import { lineChartMove } from '@/components/common/js/common'
|
||
|
||
export default {
|
||
name: 'chartList',
|
||
props: {
|
||
// TODO isModel
|
||
dashboardId: {},
|
||
chartDetailInfo: Object,
|
||
timeRange: Array, // 时间范围
|
||
isGroup: Boolean,
|
||
groupInfo: {},
|
||
from: String,
|
||
dataList: Array, // 看板中所有图表信息
|
||
isExportHtml: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
dataJson: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
variablesInit: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
showTool: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
components: {
|
||
GridLayout: GridLayout,
|
||
GridItem: GridItem,
|
||
panelChart
|
||
},
|
||
computed: {
|
||
headerH () {
|
||
return this.$store.getters.getHeaderH
|
||
},
|
||
headerHPadding () {
|
||
return this.$store.getters.getHeaderHPadding
|
||
},
|
||
rowHeight () {
|
||
return this.$store.getters.getRowHeight
|
||
},
|
||
layoutMargintop () {
|
||
return this.isGroup ? '0' : (this.dataList.length ? (-1 * (this.stepWidth + 14) + 'px') : '0')
|
||
},
|
||
panelLock () {
|
||
return this.$store.getters.getPanelLock
|
||
},
|
||
variablesArr () {
|
||
return this.$store.state.panel.variablesArr
|
||
},
|
||
isShrink () {
|
||
return this.$store.getters.getIsShrink
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
fromRoute,
|
||
gridLayoutLoading: false,
|
||
gridLayoutShow: false,
|
||
firstInit: true,
|
||
filter: {}, // chart列表查询条件
|
||
copyDataList: [],
|
||
noData: false, // no data
|
||
// processedDataList: [], // 将dataList处理后的数据，组件中使用它不使用dataList
|
||
tempDom: { height: '', width: '' },
|
||
eventLog: [],
|
||
stepWidth: null,
|
||
timestamp: new Date().getTime(),
|
||
fullscreen: {
|
||
visible: false,
|
||
chartData: [],
|
||
chartInfo: {}
|
||
},
|
||
scrollTop: 0,
|
||
scrollTopTimer: null,
|
||
// 变量比较结果 图表是否显示/隐藏
|
||
showHidden: {},
|
||
tempList: [],
|
||
isPhone: false
|
||
}
|
||
},
|
||
methods: {
|
||
init () {
|
||
let dom = document.getElementById(`chartList${this.timestamp}`)
|
||
if (this.isGroup) {
|
||
dom = document.getElementById(`chartListGroup${this.timestamp}`)
|
||
}
|
||
if (dom) {
|
||
this.stepWidth = Math.floor(dom.offsetWidth / 12)
|
||
if (!this.isGroup) {
|
||
const headerH = 50 / this.stepWidth
|
||
const headerHPadding = 50 / this.stepWidth
|
||
this.$store.commit('setHeaderH', { headerH, headerHPadding, rowHeight: this.stepWidth })
|
||
} else {
|
||
this.stepWidth = this.rowHeight - (10 / 12)
|
||
}
|
||
const span = document.querySelector('.temp-dom')
|
||
this.tempDom.width = span.offsetWidth
|
||
}
|
||
if (this.isPhone) {
|
||
this.stepWidth = 150
|
||
const headerH = 50 / this.stepWidth
|
||
const headerHPadding = 50 / this.stepWidth
|
||
this.$store.commit('setHeaderH', { headerH, headerHPadding, rowHeight: this.stepWidth })
|
||
}
|
||
},
|
||
resizeEvent (i, newH, newW, newHPx, newWPx) {
|
||
// TODO 分段重新渲染图表，或者暂时隐藏图表
|
||
setTimeout(() => {
|
||
this.$refs['chart' + i][0].resize()
|
||
if (this.isGroup) {
|
||
const findItem = this.copyDataList.find(item => item.i == i)
|
||
findItem.height = newH
|
||
findItem.h = newH
|
||
// bus.$emit('groupMove', this.copyDataList, this.groupInfo)
|
||
}
|
||
}, 50)
|
||
},
|
||
resizedEvent (i, newH, newW, newHPx, newWPx) {
|
||
// TODO 重新渲染图表，向后端发送put请求
|
||
setTimeout(() => {
|
||
this.$refs['chart' + i][0].resize()
|
||
if (this.isGroup) {
|
||
const findItem = this.copyDataList.find(item => item.i == i)
|
||
findItem.height = newH
|
||
findItem.h = newH
|
||
// bus.$emit('groupMove', this.copyDataList, this.groupInfo)
|
||
}
|
||
this.$put('/visual/dashboard/chart/modify', {
|
||
id: i,
|
||
span: newW,
|
||
height: newH
|
||
})
|
||
this.onScroll(this.scrollTop)
|
||
}, 100)
|
||
},
|
||
moveEvent (i, newX, newY) {
|
||
if (this.isGroup) {
|
||
|
||
}
|
||
},
|
||
movedEvent (i, newX, newY) {
|
||
if (!this.isGroup) {
|
||
this.moveChart(i, newX, newY)
|
||
this.onScroll(this.scrollTop)
|
||
} else {
|
||
bus.$emit('groupChildMove')
|
||
}
|
||
},
|
||
containerResizedEvent (i, newH, newW, newHPx, newWPx) {
|
||
// TODO 重新渲染图表
|
||
// this.$refs['chart' + i].resize()
|
||
// this.$refs['chart' + i][0].resize()
|
||
},
|
||
showFullscreen (show, chartInfo) {
|
||
this.fullscreen.chartInfo = JSON.parse(JSON.stringify(chartInfo))
|
||
this.fullscreen.visible = show
|
||
},
|
||
changeGroupHeight (copyList, group, flag) {
|
||
const height = getGroupHeight(copyList)
|
||
const groupFind = this.copyDataList.find(item => item.id == group.id)
|
||
if (group && groupFind) {
|
||
groupFind.height = groupFind.h = height + this.headerHPadding
|
||
groupFind.children = copyList
|
||
this.copyDataList = [...this.copyDataList]
|
||
}
|
||
if (flag) {
|
||
this.copyDataList = [...this.copyDataList]
|
||
// this.$refs.layout.layoutUpdate()
|
||
}
|
||
this.onScroll(this.scrollTop)
|
||
},
|
||
cleanData () {
|
||
|
||
},
|
||
groupShow (chart) {
|
||
const index = this.copyDataList.findIndex(item => item.id === chart.id)
|
||
this.$set(this.copyDataList, index, chart)
|
||
this.onScroll(this.scrollTop)
|
||
},
|
||
moveChart (id, newX, newY) {
|
||
if (!this.groupInfo) {
|
||
const moveItem = this.copyDataList.find(item => item.id == id)
|
||
const moveIndex = this.copyDataList.findIndex(item => item.id == id)
|
||
const repeatArr = []
|
||
this.copyDataList.forEach((item, index) => {
|
||
const moveId = String(id).split('-repeat-')[0]
|
||
const repeatId = String(item.id).split('-repeat-')[0]
|
||
if (moveId == repeatId && moveIndex != index) {
|
||
repeatArr.push({
|
||
id: item.id,
|
||
y: item.y
|
||
})
|
||
}
|
||
})
|
||
repeatArr.sort((a, b) => a.y - b.y)
|
||
this.copyDataList.forEach(item => {
|
||
repeatArr.forEach((subItem, subIndex) => {
|
||
if (item.id == subItem.id) {
|
||
item.y = moveItem.y + ((subIndex + 1) * 0.03)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
this.onScroll(this.scrollTop)
|
||
const arr = this.copyDataList.filter(item => !item.staic && !item.repeatIndex)
|
||
const charts = []
|
||
let weight = 0
|
||
arr.forEach(item => {
|
||
charts.push({
|
||
id: item.id,
|
||
x: item.x,
|
||
y: item.y,
|
||
span: item.span,
|
||
height: item.height,
|
||
groupId: item.groupId,
|
||
weight: weight
|
||
})
|
||
weight++
|
||
if (item.type === 'group') {
|
||
item.children && item.children.forEach(children => {
|
||
charts.push({
|
||
id: children.id,
|
||
x: children.x,
|
||
y: children.y,
|
||
span: children.span,
|
||
height: children.height,
|
||
groupId: children.groupId,
|
||
weight: weight
|
||
})
|
||
weight++
|
||
})
|
||
}
|
||
})
|
||
const params = {
|
||
dashboardId: this.dashboardId,
|
||
charts: charts
|
||
}
|
||
if (charts && charts.length) {
|
||
this.$put('/visual/dashboard/chart/weights', params).then(() => {
|
||
const position = getLayoutPosition(this.copyDataList)
|
||
this.$store.commit('setChartLastPosition', position)
|
||
})
|
||
}
|
||
this.copyDataList.forEach(item => {
|
||
this.tempList.forEach(subItem => {
|
||
if (item.id == subItem.id) {
|
||
subItem.y = item.y
|
||
}
|
||
})
|
||
})
|
||
},
|
||
onScroll (scrollTop = 0, groupTop = 0) {
|
||
if (!this.variablesInit) { // 变量未加载完成 不请求数据
|
||
return
|
||
}
|
||
const self = this
|
||
if (this.scrollTopTimer) {
|
||
clearTimeout(this.scrollTopTimer)
|
||
this.scrollTopTimer = null
|
||
}
|
||
let i = 0
|
||
this.scrollTopTimer = setTimeout(() => {
|
||
this.copyDataList.forEach(item => {
|
||
// if (this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id]) {
|
||
// if (this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip.show) {
|
||
// this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip.show = false
|
||
// }
|
||
// }
|
||
if (!this.$refs['grid-item' + item.id] || !this.$refs['grid-item' + item.id][0]) {
|
||
return
|
||
}
|
||
const dom = this.$refs['grid-item' + item.id][0].$el
|
||
if (dom) {
|
||
let top = dom.style.top
|
||
top = Number(top.substring(0, top.length - 2)) + groupTop
|
||
if (item.type === 'group' && item.loaded) {
|
||
this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].$refs.chartList.onScroll(scrollTop, top)
|
||
return
|
||
}
|
||
if (item.type === 'group' && !item.loaded) {
|
||
item.loaded = true
|
||
this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].getChartData()
|
||
}
|
||
if (item.loaded) {
|
||
return
|
||
}
|
||
const itemHeight = dom.offsetHeight
|
||
// 1.元素距离页面顶部的距离
|
||
// console.log(dom.style.transform)
|
||
|
||
// let top = dom.style.transform.split(',')[1]
|
||
// top = top.substring(0, top.length - 2)
|
||
const mainOffsetTop = top - this.stepWidth + 14// transform: grid组件 通过 tranfrom 控制位置 中间的为y的值 通过截取获得 - 父元素 marginTop的 值。
|
||
// 2.元素的高度
|
||
const mainHeight = itemHeight // ele.offsetHeight;//itemHeight;
|
||
// 3.页面滚动的距离
|
||
const windowScrollTop = scrollTop// document.documentElement.scrollTop || document.body.scrollTop;
|
||
self.scrollTop = scrollTop
|
||
// 4.浏览器可见区域的高度
|
||
const windowHeight = (window.innerHeight || document.documentElement.clientHeight) - 50 - 70
|
||
// console.log(this.$refs['chart' + item.id][0].$el.offsetHeight, scrollTop,'scrollTop',windowHeight,mainOffsetTop + mainHeight / 4,(windowScrollTop + windowHeight))
|
||
if ((mainOffsetTop + mainHeight / 4) < (windowScrollTop + windowHeight)) {
|
||
item.loaded = true
|
||
setTimeout(() => {
|
||
this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].getChartData()
|
||
}, i * 100)
|
||
i++
|
||
}
|
||
}
|
||
})
|
||
}, 200)
|
||
},
|
||
resize () {
|
||
this.init()
|
||
this.copyDataList.forEach(item => {
|
||
if (item.type === 'group') {
|
||
this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].groupShow(item.param.collapse)
|
||
this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].$refs.chartList.resize()
|
||
}
|
||
try {
|
||
this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].resize()
|
||
} catch (error) {
|
||
}
|
||
})
|
||
},
|
||
refreshPanel () {
|
||
bus.$emit('refreshPanel')
|
||
},
|
||
createChartSuccess (params) {
|
||
const arr = this.copyDataList.filter(item => !item.staic && !item.repeatIndex)
|
||
const charts = []
|
||
let weight = 0
|
||
arr.forEach(item => {
|
||
const chart = {
|
||
id: item.id,
|
||
x: item.x,
|
||
y: item.y,
|
||
span: item.span,
|
||
height: item.height,
|
||
groupId: item.groupId,
|
||
weight: weight
|
||
}
|
||
if (!params.groupId && chart.y >= params.y) {
|
||
chart.y = chart.y + 1
|
||
}
|
||
if (params.id == item.id) {
|
||
chart.y = params.y
|
||
chart.x = params.x
|
||
}
|
||
charts.push(chart)
|
||
|
||
weight++
|
||
if (item.type === 'group') {
|
||
item.children && item.children.forEach(children => {
|
||
const childrenChart = {
|
||
id: children.id,
|
||
x: children.x,
|
||
y: children.y,
|
||
span: children.span,
|
||
height: children.height,
|
||
groupId: children.groupId,
|
||
weight: weight
|
||
}
|
||
if (item.id === params.groupId && children.y >= params.y) {
|
||
childrenChart.y = childrenChart.y + 1
|
||
}
|
||
if (params.id == childrenChart.id) {
|
||
childrenChart.y = params.y
|
||
childrenChart.x = params.x
|
||
}
|
||
charts.push(childrenChart)
|
||
weight++
|
||
})
|
||
}
|
||
})
|
||
const chartParams = {
|
||
dashboardId: this.dashboardId,
|
||
charts: charts
|
||
}
|
||
if (charts && charts.length) {
|
||
this.$put('/visual/dashboard/chart/weights', chartParams).then(() => {
|
||
if (params.cb) {
|
||
params.cb()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 比较变量 图表是否显示/隐藏
|
||
compareVariables () {
|
||
// 防止group中的chartList执行
|
||
if (this.isGroup) {
|
||
return
|
||
}
|
||
const isRegExp = (v) => {
|
||
let isReg
|
||
try {
|
||
isReg = eval(v) instanceof RegExp
|
||
} catch (e) {
|
||
isReg = false
|
||
}
|
||
return isReg
|
||
}
|
||
this.showHidden = {}
|
||
this.dataList.forEach(item => {
|
||
const visibility = this.$lodash.get(item, 'param.enable.visibility', false)
|
||
const varName = this.$lodash.get(item, 'param.visibility.varName')
|
||
const operator = this.$lodash.get(item, 'param.visibility.operator')
|
||
const varValue = this.$lodash.get(item, 'param.visibility.varValue')
|
||
const result = this.$lodash.get(item, 'param.visibility.result')
|
||
// 相反结果 若result为show则contraryResult为hidden
|
||
const contraryResult = result === 'show' ? 'hidden' : 'show'
|
||
// 是否启用显示隐藏功能
|
||
if (visibility) {
|
||
this.variablesArr.forEach(subItem => {
|
||
// 判断当前图表的变量
|
||
if (subItem.name === varName) {
|
||
let flag = false
|
||
switch (operator) {
|
||
case 'equal': {
|
||
flag = subItem.checked.some(value => {
|
||
return value == varValue
|
||
})
|
||
break
|
||
}
|
||
case 'notEqual': {
|
||
flag = subItem.checked.some(value => {
|
||
return value != varValue
|
||
})
|
||
// 判断选中的值是否为空
|
||
if (!subItem.checked.length) {
|
||
flag = true
|
||
}
|
||
break
|
||
}
|
||
case 'match': {
|
||
flag = subItem.checked.some(value => {
|
||
const reg = isRegExp(varValue) ? eval(varValue) : new RegExp(varValue)
|
||
return value.match(eval(reg))
|
||
})
|
||
break
|
||
}
|
||
case 'contains': {
|
||
flag = subItem.checked.some(value => {
|
||
return value.includes(varValue)
|
||
})
|
||
break
|
||
}
|
||
}
|
||
if (flag === true) {
|
||
this.$lodash.set(this.showHidden, item.id + '.visibility', result)
|
||
} else {
|
||
this.$lodash.set(this.showHidden, item.id + '.visibility', contraryResult)
|
||
}
|
||
|
||
// 隐藏图表的悬浮文字赋值
|
||
if (this.$lodash.get(this.showHidden[item.id], 'visibility') === 'hidden') {
|
||
const hiddenText = `“${varName}=${varValue}”Hidden`
|
||
this.$lodash.set(this.showHidden, item.id + '.hiddenText', hiddenText)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
if (!this.panelLock) {
|
||
return false
|
||
}
|
||
for (let i = 0; i < this.copyDataList.length; i++) {
|
||
const item = this.copyDataList[i]
|
||
if ((this.$lodash.get(this.showHidden[item.id], 'visibility') && this.$lodash.get(this.showHidden[item.id], 'visibility') === 'hidden') && item.id !== -2) {
|
||
this.copyDataList.splice(i, 1)
|
||
i--
|
||
}
|
||
}
|
||
this.tempList.forEach(item => {
|
||
if ((!this.$lodash.get(this.showHidden[item.id], 'visibility') || this.$lodash.get(this.showHidden[item.id], 'visibility') === 'show') && item.id !== -2 && !this.copyDataList.find(chart => chart.id === item.id)) {
|
||
this.copyDataList.push(item)
|
||
}
|
||
})
|
||
this.onScroll(this.scrollTop)
|
||
},
|
||
|
||
// group设置repeat 便利变量重复渲染图表
|
||
repeatVariableFn () {
|
||
// 防止group中的chartList执行
|
||
if (this.isGroup) {
|
||
return
|
||
}
|
||
// 先删除掉复制的数据
|
||
for (let index = 0; index < this.copyDataList.length; index++) {
|
||
const item = this.copyDataList[index]
|
||
if (item.repeatIndex > 0) {
|
||
this.copyDataList.splice(index, 1)
|
||
index--
|
||
} else if (item.repeatIndex == 0) {
|
||
// 置为原来的数据
|
||
delete item.repeatIndex
|
||
delete item.repeatVariable
|
||
delete item.repeatValue
|
||
item.children && item.children.forEach(children => {
|
||
delete children.repeatIndex
|
||
delete children.repeatVariable
|
||
delete children.repeatValue
|
||
})
|
||
}
|
||
}
|
||
this.$nextTick(() => {
|
||
// 先让数组根据 y 排序 之后直接判断顺序 即可判断 Group 是否相邻
|
||
let arr = this.$lodash.cloneDeep(this.copyDataList)
|
||
arr = this.$lodash.orderBy(arr, function (item) {
|
||
return item.y
|
||
})
|
||
const variablesRepeat = {}
|
||
for (let index = 0; index < arr.length; index++) { // 遍历找出所有需要 repeat的group 按照 name进行多次的分组
|
||
const item = arr[index]
|
||
const repeatVariable = this.$lodash.get(item.param.repeat, 'variable')
|
||
const repeatEnable = this.$lodash.get(item.param.enable, 'repeat')
|
||
const visibility = this.$lodash.get(this.showHidden[item.id], 'visibility') !== 'hidden'
|
||
if (item.type === 'group' && repeatVariable && repeatEnable && visibility) {
|
||
const itemPrev = arr[index - 1]
|
||
const repeatPrevVariable = this.$lodash.get(itemPrev.param.repeat, 'variable')
|
||
const repeatPrevEnable = this.$lodash.get(itemPrev.param.enable, 'repeat')
|
||
const itemVisibility = this.$lodash.get(this.showHidden[itemPrev.id], 'visibility') !== 'hidden'
|
||
if (itemPrev && itemPrev.type === 'group' && repeatPrevVariable === repeatVariable && repeatPrevEnable && itemVisibility) {
|
||
const arr = variablesRepeat[repeatVariable]
|
||
arr[arr.length - 1].repeatArr.push(item)
|
||
arr[arr.length - 1].lastGroup = item
|
||
} else {
|
||
if (variablesRepeat[repeatVariable]) {
|
||
variablesRepeat[repeatVariable].push({
|
||
repeatArr: [item],
|
||
lastGroup: item
|
||
})
|
||
} else {
|
||
variablesRepeat[repeatVariable] = [{
|
||
repeatArr: [item],
|
||
lastGroup: item
|
||
}]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
Object.keys(variablesRepeat).forEach(key => { // 遍历 variablesRepeat 确定需要插入的数组
|
||
const findVariables = this.variablesArr.find(item => item.name == key)
|
||
findVariables && findVariables.checked.forEach((subItem, subIndex) => {
|
||
variablesRepeat[key].forEach(group => {
|
||
group.repeatArr.forEach(item => {
|
||
if (subIndex > 0) {
|
||
// 复制数据 重新设置id
|
||
const repeatItem = this.$lodash.cloneDeep(item)
|
||
repeatItem.id = item.id + '-' + 'repeat-' + subIndex
|
||
repeatItem.i = repeatItem.id
|
||
repeatItem.repeatIndex = subIndex
|
||
repeatItem.repeatVariable = key
|
||
repeatItem.repeatValue = subItem
|
||
repeatItem.y = group.lastGroup.y
|
||
repeatItem.children && repeatItem.children.forEach(children => {
|
||
children.id = children.id + '-' + 'repeat-' + subIndex
|
||
children.repeatIndex = subIndex
|
||
children.repeatVariable = key
|
||
children.repeatValue = subItem
|
||
})
|
||
// 复制数据
|
||
this.copyDataList.push(repeatItem)
|
||
} else {
|
||
const findItem = this.copyDataList.find(chart => chart.id === item.id)
|
||
this.$set(findItem, 'repeatIndex', 0)
|
||
this.$set(findItem, 'repeatVariable', key)
|
||
this.$set(findItem, 'repeatValue', subItem)
|
||
findItem.children && findItem.children.forEach(children => {
|
||
this.$set(children, 'repeatIndex', 0)
|
||
this.$set(children, 'repeatVariable', key)
|
||
this.$set(children, 'repeatValue', subItem)
|
||
})
|
||
this.$refs['chart' + findItem.id] && this.$refs['chart' + findItem.id][0] && this.$refs['chart' + findItem.id][0].getChartData()
|
||
}
|
||
})
|
||
})
|
||
})
|
||
})
|
||
})
|
||
}
|
||
|
||
},
|
||
created () {
|
||
this.firstInit = true
|
||
},
|
||
mounted () {
|
||
this.init()
|
||
if (!this.isGroup) {
|
||
bus.$on('groupMove', this.changeGroupHeight)
|
||
bus.$on('creat-chart-success', this.createChartSuccess)
|
||
bus.$on('groupChildMove', this.moveChart)
|
||
this.$store.commit('setChartListId', `chartList${this.timestamp}`)
|
||
window.addEventListener('resize', this.resize)
|
||
}
|
||
if (!document.onmousemove) { // 添加鼠标移动事件监听
|
||
document.onmousemove = lineChartMove
|
||
}
|
||
},
|
||
beforeDestroy () {
|
||
bus.$off('groupMove', this.changeGroupHeight)
|
||
bus.$off('creat-chart-success', this.createChartSuccess)
|
||
bus.$off('groupChildMove', this.moveChart)
|
||
window.removeEventListener('resize', this.resize)
|
||
document.onmousemove = null
|
||
},
|
||
watch: {
|
||
isShrink: {
|
||
handler () {
|
||
setTimeout(() => {
|
||
this.resize()
|
||
}, 200)
|
||
}
|
||
},
|
||
// 监听查看模式变化
|
||
'$store.state.panel.mode': {
|
||
immediate: true,
|
||
handler () {
|
||
setTimeout(() => {
|
||
this.resize()
|
||
})
|
||
}
|
||
},
|
||
// 监听变量数组
|
||
variablesArr: {
|
||
handler (newVal, oldVal) {
|
||
// 比较变量 图表是否显示/隐藏
|
||
this.compareVariables()
|
||
|
||
this.repeatVariableFn()
|
||
}
|
||
},
|
||
panelLock: {
|
||
handler (flag) {
|
||
if (!flag) {
|
||
this.tempList.forEach(item => {
|
||
if (!this.copyDataList.find(chart => chart.id === item.id)) {
|
||
delete item.repeatIndex
|
||
delete item.repeatVariable
|
||
delete item.repeatValue
|
||
item.y -= 0.03
|
||
this.copyDataList.push(item)
|
||
}
|
||
})
|
||
this.onScroll(this.scrollTop)
|
||
} else {
|
||
// 比较变量 图表是否显示/隐藏
|
||
this.compareVariables()
|
||
}
|
||
}
|
||
},
|
||
dataList: {
|
||
immediate: true,
|
||
deep: true,
|
||
handler (n) {
|
||
if (window.dataJson && (
|
||
navigator.userAgent.match(/Mobi/i) ||
|
||
navigator.userAgent.match(/Android/i) ||
|
||
navigator.userAgent.match(/iPhone/i)
|
||
)) { // 判断当前设备是否是 移动端设备
|
||
// 当前设备是移动设备
|
||
this.isPhone = true
|
||
}
|
||
this.noData = !n || n.length < 1
|
||
this.gridLayoutShow = false
|
||
this.firstInit = true
|
||
this.gridLayoutLoading = true
|
||
if (!this.isGroup) {
|
||
const position = getLayoutPosition(n)
|
||
this.$store.commit('setChartLastPosition', position)
|
||
}
|
||
const tempList = n.map(item => {
|
||
let param = ''
|
||
let height = ''
|
||
if (this.isPhone && item.type !== 'group') {
|
||
item.x = 0
|
||
item.y = 0
|
||
item.span = 12
|
||
item.height = 2
|
||
}
|
||
if (item.param) {
|
||
param = JSON.parse(JSON.stringify(item.param))
|
||
// try {
|
||
// param = JSON.parse(item.param)
|
||
// } catch (e) {
|
||
// console.info(e)
|
||
// }
|
||
if (item.y < 0) {
|
||
item.y = 0
|
||
}
|
||
height = (item.type === 'group' && item.param.collapse) ? this.headerH : item.height
|
||
// param.showHeader = true
|
||
if (param.valueMapping) {
|
||
param.valueMapping.forEach(valueMapping => {
|
||
if (!valueMapping.show) {
|
||
valueMapping.show = false
|
||
}
|
||
if (valueMapping.text && !valueMapping.display) {
|
||
valueMapping.display = valueMapping.text
|
||
}
|
||
if (valueMapping.columns && !valueMapping.column) {
|
||
valueMapping.column = valueMapping.columns
|
||
}
|
||
})
|
||
}
|
||
}
|
||
return {
|
||
...item,
|
||
i: item.id,
|
||
w: item.span,
|
||
h: height || 4,
|
||
x: item.x || 0,
|
||
y: item.y || 0,
|
||
param
|
||
}
|
||
})
|
||
if (tempList.length && !this.isGroup) { // 添加一个高1 宽12的元素占位 防止group消失
|
||
tempList.push({
|
||
...groupData,
|
||
i: -2,
|
||
w: 12,
|
||
h: 1,
|
||
x: 0,
|
||
y: 0,
|
||
static: true
|
||
})
|
||
}
|
||
this.$nextTick(() => {
|
||
this.copyDataList = JSON.parse(JSON.stringify(tempList))
|
||
this.tempList = JSON.parse(JSON.stringify(this.copyDataList))
|
||
// 比较变量 图表是否显示/隐藏
|
||
this.compareVariables()
|
||
|
||
this.repeatVariableFn()
|
||
setTimeout(() => {
|
||
this.gridLayoutShow = true
|
||
if (!this.isGroup) {
|
||
if (!this.isExportHtml) {
|
||
this.onScroll()
|
||
} else {
|
||
this.onScroll(999999)
|
||
}
|
||
}
|
||
})
|
||
setTimeout(() => {
|
||
this.firstInit = false
|
||
}, 2000)
|
||
this.gridLayoutLoading = false
|
||
})
|
||
}
|
||
},
|
||
copyDataList: {
|
||
deep: true,
|
||
handler (n) {
|
||
if (this.isGroup) {
|
||
bus.$emit('groupMove', n, this.groupInfo)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
#chart-list .chart-list {
|
||
flex: 1;
|
||
height: auto !important;
|
||
width: 100%;
|
||
border-top: 1px solid transparent;
|
||
box-sizing: border-box;
|
||
}
|
||
#chart-list .group-hide-header {
|
||
height: 40px !important;
|
||
}
|
||
</style>
|