Merge branch 'feature-Station-dev-renpy' of http://git.hivekion.com:3000/xiaoguangbin/AnalysisSystemForRadionuclide_vue into master-dev
This commit is contained in:
orgin
commit
4121038a6a
|
|
@ -5,22 +5,22 @@
|
|||
import * as echarts from 'echarts'
|
||||
import 'echarts-gl'
|
||||
|
||||
const events = ['click', 'brushEnd']
|
||||
const events = ['click', 'brushEnd', 'dataZoom']
|
||||
const zrEvents = ['mousemove', 'mousedown', 'mouseup', 'click', 'dblclick', 'contextmenu']
|
||||
export default {
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
default: () => ({}),
|
||||
},
|
||||
opts: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
default: () => {},
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
|
|
@ -31,21 +31,21 @@ export default {
|
|||
this.initEventListener()
|
||||
},
|
||||
destroyed() {
|
||||
if(this._chart) {
|
||||
if (this._chart) {
|
||||
this._chart.dispose()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initEventListener() {
|
||||
events.forEach(eventName => {
|
||||
events.forEach((eventName) => {
|
||||
this._chart.on(eventName, (params) => {
|
||||
this.$emit(eventName, params)
|
||||
})
|
||||
})
|
||||
|
||||
const zr = this.getZRender()
|
||||
zrEvents.forEach(eventName => {
|
||||
zr.on(eventName, params => {
|
||||
zrEvents.forEach((eventName) => {
|
||||
zr.on(eventName, (params) => {
|
||||
this.$emit(`zr:${eventName}`, params)
|
||||
})
|
||||
})
|
||||
|
|
@ -62,7 +62,7 @@ export default {
|
|||
|
||||
getZRender() {
|
||||
return this._chart.getZr()
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
option: {
|
||||
|
|
@ -71,14 +71,14 @@ export default {
|
|||
this._chart.setOption(this.option, this.opts)
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
deep: true,
|
||||
},
|
||||
height() {
|
||||
this.$nextTick(() => {
|
||||
this._chart && this._chart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div style="width: 100%;height: 100%;overflow: auto;padding-top: 76px;">
|
||||
<div style="width: 100%; height: 100%; overflow: auto; padding-top: 76px">
|
||||
<!-- 图例 -->
|
||||
<div class="legend">
|
||||
<div
|
||||
|
|
@ -14,8 +14,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- 图例结束 -->
|
||||
<custom-chart ref="customChartRef" :option="option" :height="list.length * 295"></custom-chart>
|
||||
<a-spin style="z-index: 11;position: absolute;top: 45%;left: 48%;" :spinning="spinning" />
|
||||
<custom-chart
|
||||
ref="customChartRef"
|
||||
:option="option"
|
||||
:opts="{ notMerge: true }"
|
||||
:height="list.length * 295"
|
||||
@dataZoom="handleZoomChange"
|
||||
></custom-chart>
|
||||
<a-spin style="z-index: 11; position: absolute; top: 45%; left: 48%" :spinning="spinning" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -32,76 +38,90 @@ const legendList = [
|
|||
{
|
||||
title: 'SPHDPREL',
|
||||
color: '#17a840',
|
||||
isShow: true
|
||||
isShow: true,
|
||||
},
|
||||
{
|
||||
title: 'SPHDF',
|
||||
color: '#0cbfb0',
|
||||
isShow: true
|
||||
isShow: true,
|
||||
},
|
||||
{
|
||||
title: 'QC',
|
||||
color: '#1c82eb',
|
||||
isShow: true
|
||||
isShow: true,
|
||||
},
|
||||
{
|
||||
title: 'GASBKPHDPREL',
|
||||
color: '#d3ad16',
|
||||
isShow: true
|
||||
isShow: true,
|
||||
},
|
||||
{
|
||||
title: 'GASBKPHDF',
|
||||
color: '#db6423',
|
||||
isShow: true
|
||||
isShow: true,
|
||||
},
|
||||
{
|
||||
title: 'SOH/MET',
|
||||
color: '#8852da',
|
||||
isShow: true
|
||||
}
|
||||
isShow: true,
|
||||
},
|
||||
]
|
||||
|
||||
// 图表配置
|
||||
const initialOption = {
|
||||
tooltip: {
|
||||
formatter: params => {
|
||||
formatter: (params) => {
|
||||
return `${params.marker}${params.name}: ${(params.value[3] / 1000 / 60).toFixed()}min`
|
||||
}
|
||||
},
|
||||
},
|
||||
grid: [],
|
||||
xAxis: [],
|
||||
yAxis: [],
|
||||
series: [],
|
||||
dataZoom: []
|
||||
dataZoom: [],
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String
|
||||
type: String,
|
||||
},
|
||||
spinning: {
|
||||
type: Boolean
|
||||
type: Boolean,
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
scaleSettings: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
CustomChart
|
||||
CustomChart,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
legendList: cloneDeep(legendList),
|
||||
option: {}
|
||||
option: {},
|
||||
zoomDataAll: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleZoomChange(params) {
|
||||
this.zoomDataAll = this.option.dataZoom.map((item) => {
|
||||
if (item.id == params.batch[0].dataZoomId) {
|
||||
return {
|
||||
id: params.batch[0].dataZoomId,
|
||||
start: params.batch[0].start,
|
||||
end: params.batch[0].end,
|
||||
}
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
})
|
||||
},
|
||||
renderItem(params, api) {
|
||||
let categoryIndex = api.value(0)
|
||||
let start = api.coord([api.value(1), categoryIndex])
|
||||
|
|
@ -113,20 +133,20 @@ export default {
|
|||
x: start[0],
|
||||
y: start[1] - height / 2,
|
||||
width: end[0] - start[0],
|
||||
height: height
|
||||
height: height,
|
||||
},
|
||||
{
|
||||
x: params.coordSys.x,
|
||||
y: params.coordSys.y,
|
||||
width: params.coordSys.width,
|
||||
height: params.coordSys.height
|
||||
height: params.coordSys.height,
|
||||
}
|
||||
)
|
||||
return (
|
||||
rectShape && {
|
||||
type: 'rect',
|
||||
shape: rectShape,
|
||||
style: api.style()
|
||||
style: api.style(),
|
||||
}
|
||||
)
|
||||
},
|
||||
|
|
@ -155,13 +175,9 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
initChartOption() {
|
||||
initChartOption(val) {
|
||||
let now = dayjs(new Date())
|
||||
now = now
|
||||
.add(1, 'hour')
|
||||
.set('minute', 0)
|
||||
.set('second', 0)
|
||||
.set('millisecond', 0)
|
||||
now = now.add(1, 'hour').set('minute', 0).set('second', 0).set('millisecond', 0)
|
||||
|
||||
const max = now.valueOf()
|
||||
const min = max - this.scaleSettings.cacheTime * 24 * 60 * 60 * 1000
|
||||
|
|
@ -172,7 +188,7 @@ export default {
|
|||
left: 70,
|
||||
right: 20,
|
||||
top: 70 * index + 225 * index,
|
||||
height: 225
|
||||
height: 225,
|
||||
})
|
||||
|
||||
xAxis.push({
|
||||
|
|
@ -182,17 +198,17 @@ export default {
|
|||
interval: this.scaleSettings.scaleInterval * 60 * 1000,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
formatter: val => {
|
||||
formatter: (val) => {
|
||||
let dateTime = new Date(val)
|
||||
return dayjs(dateTime).format('HH:mm\nMM/DD')
|
||||
},
|
||||
color: '#ade6ee'
|
||||
color: '#ade6ee',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#214751'
|
||||
}
|
||||
}
|
||||
color: '#214751',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
yAxis.push({
|
||||
|
|
@ -202,31 +218,31 @@ export default {
|
|||
nameTextStyle: {
|
||||
// 设置标题样式
|
||||
fontSize: 14,
|
||||
color: '#5b9cba'
|
||||
color: '#5b9cba',
|
||||
},
|
||||
nameGap: 46,
|
||||
data: typeList,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#214751'
|
||||
}
|
||||
color: '#214751',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#214751'
|
||||
}
|
||||
color: '#214751',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ade6ee'
|
||||
}
|
||||
color: '#ade6ee',
|
||||
},
|
||||
})
|
||||
|
||||
const data = []
|
||||
item.dataList.forEach(item => {
|
||||
item.dataList.forEach((item) => {
|
||||
this.convertStatus(item)
|
||||
|
||||
let startTime = new Date(item.beginTime * 1000).getTime()
|
||||
|
|
@ -236,17 +252,17 @@ export default {
|
|||
|
||||
const endTime = new Date(item.endTime * 1000).getTime()
|
||||
const duration = endTime - startTime
|
||||
const index = typeList.findIndex(type => item.type == type)
|
||||
const find = this.legendList.find(legendItem => legendItem.title == item.status)
|
||||
const index = typeList.findIndex((type) => item.type == type)
|
||||
const find = this.legendList.find((legendItem) => legendItem.title == item.status)
|
||||
if (find.isShow) {
|
||||
data.push({
|
||||
name: item.status,
|
||||
value: [index, startTime, endTime, duration],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: find.color
|
||||
}
|
||||
}
|
||||
color: find.color,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -256,20 +272,22 @@ export default {
|
|||
renderItem: this.renderItem,
|
||||
encode: {
|
||||
x: [1, 2],
|
||||
y: 0
|
||||
y: 0,
|
||||
},
|
||||
data: data,
|
||||
xAxisIndex: index,
|
||||
yAxisIndex: index
|
||||
})
|
||||
|
||||
dataZoom.push({
|
||||
type: 'inside',
|
||||
xAxisIndex: index,
|
||||
start: 100 - (this.scaleSettings.timelineLength / (this.scaleSettings.cacheTime * 24 * 60)) * 100,
|
||||
end: 100,
|
||||
zoomLock: true
|
||||
yAxisIndex: index,
|
||||
})
|
||||
if (!val) {
|
||||
dataZoom.push({
|
||||
type: 'inside',
|
||||
id: index,
|
||||
xAxisIndex: index,
|
||||
start: 100 - (this.scaleSettings.timelineLength / (this.scaleSettings.cacheTime * 24 * 60)) * 100,
|
||||
end: 100,
|
||||
zoomLock: true,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this.option = option
|
||||
|
|
@ -279,20 +297,30 @@ export default {
|
|||
handleLegendChange(legend) {
|
||||
legend.isShow = !legend.isShow
|
||||
this.initChartOption()
|
||||
this.option.dataZoom = this.zoomDataAll.map((item, index) => {
|
||||
return {
|
||||
type: 'inside',
|
||||
id: item.id,
|
||||
xAxisIndex: index,
|
||||
start: item.start,
|
||||
end: item.end,
|
||||
zoomLock: true,
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
resize() {
|
||||
this.$refs.customChartRef.resize()
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
list: {
|
||||
handler() {
|
||||
this.initChartOption()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user