242 lines
7.6 KiB
Vue
242 lines
7.6 KiB
Vue
<template>
|
||
<!-- ITIC -->
|
||
<view>
|
||
<l-echart v-if="status != 'loading'" ref="echartRef" @finished="initChart"></l-echart>
|
||
<uni-load-more v-else :status="status"></uni-load-more>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
|
||
export default {
|
||
components: {},
|
||
props: {
|
||
store: {
|
||
type: [Object],
|
||
},
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
option: {
|
||
backgroundColor: '#fff',
|
||
grid: {
|
||
left: '10px',
|
||
right: '40rpx',
|
||
bottom: '40rpx',
|
||
top: '10px',
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
|
||
right: '10px',
|
||
bottom: '10px',
|
||
textStyle: {
|
||
fontSize: 10,
|
||
},
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
itemGap: 8,
|
||
padding: [5, 5, 5, 10],
|
||
},
|
||
|
||
color: ['#FF8C00', '#00BFFF', 'green', 'red'],
|
||
yAxis: {
|
||
type: 'log',
|
||
min: '0.001',
|
||
max: '1000',
|
||
name: 's',
|
||
inverse: true,
|
||
axisLabel: {
|
||
rotate: -90,
|
||
},
|
||
splitLine: { show: false },
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
splitNumber: 10,
|
||
minInterval: 3,
|
||
position: 'top',
|
||
rotate: 90,
|
||
axisLabel: {
|
||
rotate: 90,
|
||
},
|
||
name: '%',
|
||
},
|
||
series: [
|
||
{
|
||
name: '上限',
|
||
type: 'line',
|
||
data: [
|
||
[200, 0.001],
|
||
[140, 0.003],
|
||
[120, 0.003],
|
||
[120, 0.5],
|
||
[110, 0.5],
|
||
[110, 10],
|
||
[110, 1000],
|
||
],
|
||
showSymbol: false,
|
||
tooltips: {
|
||
show: false,
|
||
},
|
||
color: '#FF8C00',
|
||
},
|
||
{
|
||
name: '下限',
|
||
type: 'line',
|
||
data: [
|
||
[0, 0.02],
|
||
[70, 0.02],
|
||
[70, 0.5],
|
||
[80, 0.5],
|
||
[80, 10],
|
||
[90, 10],
|
||
[90, 1000],
|
||
],
|
||
showSymbol: false,
|
||
tooltips: {
|
||
show: false,
|
||
},
|
||
color: '#00BFFF',
|
||
},
|
||
{
|
||
name: '可容忍事件',
|
||
type: 'scatter',
|
||
symbol: 'circle',
|
||
// data: this.pointI,
|
||
data: [],
|
||
color: 'green',
|
||
},
|
||
{
|
||
name: '不可容忍事件',
|
||
type: 'scatter',
|
||
symbol: 'circle',
|
||
// data: this.pointIun,
|
||
data: [],
|
||
color: 'red',
|
||
},
|
||
],
|
||
},
|
||
status: 'loading',
|
||
echartRef: null,
|
||
pointI: [],
|
||
pointIun: [],
|
||
data: [],
|
||
}
|
||
},
|
||
mounted() {
|
||
// this.initChart()
|
||
// console.log('🚀 ~ props.data:', this.props.data)
|
||
},
|
||
|
||
methods: {
|
||
init() {},
|
||
async initChart() {
|
||
if (!this.$refs.echartRef) return
|
||
try {
|
||
this.echartRef = await this.$refs.echartRef.init(echarts)
|
||
this.bindChartClickEvent()
|
||
this.echartRef.setOption(this.option, true)
|
||
} catch (error) {
|
||
console.error('图表初始化失败:', error)
|
||
}
|
||
},
|
||
|
||
gongfunction() {
|
||
// 初始化计数与数据数组
|
||
let normalCount = 0
|
||
let abnormalCount = 0
|
||
this.normalPoints = []
|
||
this.abnormalPoints = []
|
||
|
||
if (!this.data || this.data.length === 0) {
|
||
this.updateChartOption()
|
||
return
|
||
}
|
||
|
||
// 缓存长度，遍历数据
|
||
const len = this.data.length
|
||
for (let i = 0; i < len; i++) {
|
||
const item = this.data[i]
|
||
// 建议确认正则意图，/s/g 仅移除字母 s，若去空格应为 /\s/g
|
||
const xx = parseFloat(item.evtParamTm.replace(/s/g, ''))
|
||
const yy = parseFloat(item.evtParamVVaDepth.replace(/%/g, ''))
|
||
const time = item.startTime.replace('T', ' ')
|
||
|
||
const pointData = [yy, xx, time, item]
|
||
const isNormal = this.checkPointStatus(xx, yy)
|
||
const pointObj = {
|
||
value: pointData,
|
||
itemStyle: { normal: { color: isNormal ? 'green' : 'red' } },
|
||
}
|
||
|
||
if (isNormal) {
|
||
normalCount++
|
||
this.normalPoints.push(pointObj)
|
||
} else {
|
||
abnormalCount++
|
||
this.abnormalPoints.push(pointObj)
|
||
}
|
||
}
|
||
|
||
this.updateChartOption()
|
||
},
|
||
|
||
// 提取判断逻辑为独立方法
|
||
checkPointStatus(xx, yy) {
|
||
if (xx <= 0.003) {
|
||
const line = 230 - 30000 * xx
|
||
return yy <= line
|
||
} else if (xx <= 0.02) {
|
||
return yy <= 120
|
||
} else if (xx <= 0.5) {
|
||
return yy > 70 && yy < 120
|
||
} else if (xx <= 10) {
|
||
return yy > 80 && yy < 110
|
||
} else {
|
||
return yy > 90 && yy < 110
|
||
}
|
||
},
|
||
|
||
updateChartOption() {
|
||
// 建议避免硬编码 series 索引，可通过 seriesName 查找
|
||
this.option.series[2].data = this.normalPoints
|
||
this.option.series[3].data = this.abnormalPoints
|
||
|
||
if (this.echartRef) {
|
||
this.echartRef.setOption(this.option, true)
|
||
} else {
|
||
this.initChart()
|
||
}
|
||
},
|
||
|
||
bindChartClickEvent() {
|
||
if (!this.echartRef) return
|
||
this.echartRef.on('click', (params) => {
|
||
console.log('🚀 ~ params:', params.value[3])
|
||
// 点击查看详情
|
||
let item = params.value[3]
|
||
let str = JSON.stringify(item).replace(/%/g, '百分比')
|
||
// uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
|
||
})
|
||
},
|
||
},
|
||
|
||
computed: {},
|
||
|
||
watch: {
|
||
store: {
|
||
handler(val, oldVal) {
|
||
this.status = val.status
|
||
this.data = (val.data || [])
|
||
this.gongfunction()
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped></style>
|