fix(APP功能调整): 文档中的第7、8、10没有做；第4点需要再核查下ITIC、F47曲线中的可容忍事件、不可容忍事件的显示是否正确。
This commit is contained in:
@@ -1,249 +1,249 @@
|
||||
<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],
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
type: 'log',
|
||||
min: '0.001',
|
||||
max: '1000',
|
||||
name: 's',
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
rotate: -90,
|
||||
},
|
||||
splitLine: { show: false },
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
splitNumber: 10,
|
||||
minInterval: 20,
|
||||
position: 'top',
|
||||
rotate: 90,
|
||||
max: 140,
|
||||
axisLabel: {
|
||||
rotate: -90,
|
||||
},
|
||||
name: '%',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '分割线',
|
||||
type: 'line',
|
||||
data: [
|
||||
[0, 0.05],
|
||||
[50, 0.05],
|
||||
[50, 0.2],
|
||||
[70, 0.2],
|
||||
[70, 0.5],
|
||||
[80, 0.5],
|
||||
[80, 10],
|
||||
[80, 1000],
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
color: '#DAA520',
|
||||
},
|
||||
{
|
||||
name: '可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
// data: this.pointF,
|
||||
data: [],
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
name: '不可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
// data: this.pointFun,
|
||||
data: [],
|
||||
color: 'red',
|
||||
},
|
||||
],
|
||||
},
|
||||
status: 'loading',
|
||||
echartRef: null,
|
||||
pointF: [],
|
||||
pointFun: [],
|
||||
data: [],
|
||||
maxXAxis: 140,
|
||||
}
|
||||
},
|
||||
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() {
|
||||
var standF = 0
|
||||
var unstandF = 0
|
||||
this.pointF = []
|
||||
this.pointFun = []
|
||||
var total = 0
|
||||
let dataList = [0]
|
||||
total = this.data.length
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < this.data.length; i++) {
|
||||
var point = []
|
||||
var xx = this.data[i].evtParamTm.replace(/s/g, '')
|
||||
var yy = this.data[i].evtParamVVaDepth.replace(/%/g, '')
|
||||
var time = this.data[i].startTime.replace('T', ' ')
|
||||
dataList.push(yy)
|
||||
point = [yy, xx, time, this.data[i]]
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } },
|
||||
})
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } },
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } },
|
||||
})
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } },
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } },
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } },
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } },
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.option.xAxis.max = Math.max(
|
||||
140,
|
||||
Math.ceil(
|
||||
Math.max(
|
||||
...dataList
|
||||
.filter((item) => {
|
||||
return item !== '-' && !isNaN(Number(item))
|
||||
})
|
||||
.map((item) => Number(item)),
|
||||
) / 10,
|
||||
) * 10,
|
||||
) //this.maxXAxis
|
||||
|
||||
this.option.series[1].data = this.pointF
|
||||
this.option.series[2].data = this.pointFun
|
||||
|
||||
if (this.echartRef) {
|
||||
this.echartRef.setOption(this.option, true)
|
||||
} else {
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
|
||||
bindChartClickEvent() {
|
||||
if (!this.echartRef) return
|
||||
this.echartRef.on('click', (params) => {
|
||||
// 点击查看详情
|
||||
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>
|
||||
<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],
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
type: 'log',
|
||||
min: '0.001',
|
||||
max: '1000',
|
||||
name: 's',
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
rotate: -90,
|
||||
},
|
||||
splitLine: { show: false },
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
splitNumber: 10,
|
||||
minInterval: 20,
|
||||
position: 'top',
|
||||
rotate: 90,
|
||||
max: 140,
|
||||
axisLabel: {
|
||||
rotate: -90,
|
||||
},
|
||||
name: '%',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '分割线',
|
||||
type: 'line',
|
||||
data: [
|
||||
[0, 0.05],
|
||||
[50, 0.05],
|
||||
[50, 0.2],
|
||||
[70, 0.2],
|
||||
[70, 0.5],
|
||||
[80, 0.5],
|
||||
[80, 10],
|
||||
[80, 1000],
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
color: '#DAA520',
|
||||
},
|
||||
{
|
||||
name: '可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
// data: this.pointF,
|
||||
data: [],
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
name: '不可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
// data: this.pointFun,
|
||||
data: [],
|
||||
color: 'red',
|
||||
},
|
||||
],
|
||||
},
|
||||
status: 'loading',
|
||||
echartRef: null,
|
||||
pointF: [],
|
||||
pointFun: [],
|
||||
data: [],
|
||||
maxXAxis: 140,
|
||||
}
|
||||
},
|
||||
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() {
|
||||
var standF = 0
|
||||
var unstandF = 0
|
||||
this.pointF = []
|
||||
this.pointFun = []
|
||||
var total = 0
|
||||
let dataList = [0]
|
||||
total = this.data.length
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < this.data.length; i++) {
|
||||
var point = []
|
||||
var xx = this.data[i].evtParamTm.replace(/s/g, '')
|
||||
var yy = this.data[i].evtParamVVaDepth.replace(/%/g, '')
|
||||
var time = this.data[i].startTime.replace('T', ' ')
|
||||
dataList.push(yy)
|
||||
point = [yy, xx, time, this.data[i]]
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } },
|
||||
})
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } },
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } },
|
||||
})
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } },
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } },
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } },
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } },
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.option.xAxis.max = Math.max(
|
||||
140,
|
||||
Math.ceil(
|
||||
Math.max(
|
||||
...dataList
|
||||
.filter((item) => {
|
||||
return item !== '-' && !isNaN(Number(item))
|
||||
})
|
||||
.map((item) => Number(item)),
|
||||
) / 10,
|
||||
) * 10,
|
||||
) //this.maxXAxis
|
||||
|
||||
this.option.series[1].data = this.pointF
|
||||
this.option.series[2].data = this.pointFun
|
||||
|
||||
if (this.echartRef) {
|
||||
this.echartRef.setOption(this.option, true)
|
||||
} else {
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
|
||||
bindChartClickEvent() {
|
||||
if (!this.echartRef) return
|
||||
this.echartRef.on('click', (params) => {
|
||||
// 点击查看详情
|
||||
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>
|
||||
|
||||
@@ -1,241 +1,241 @@
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@@ -1,99 +1,146 @@
|
||||
<template>
|
||||
<Cn-page :loading="loading">
|
||||
<view class="detail" slot="body">
|
||||
<view class="detail-content" style="font-size: 32rpx">
|
||||
<!-- <view class="detail-content-title mb20">发生时间</view> -->
|
||||
<view>{{ detail.startTime }}</view>
|
||||
</view>
|
||||
<view class="detail-content">
|
||||
<view class="detail-content-title mb20">基础信息</view>
|
||||
<view class="mb5"> 工程名称：{{ detail.engineeringName }} </view>
|
||||
<view class="mb5"> 项目名称：{{ detail.projectName }} </view>
|
||||
<view class="mb5"> 设备名称：{{ detail.equipmentName }}</view>
|
||||
<view class="mb5"> 监测点名称：{{ detail.lineName }}</view>
|
||||
<view class="mb5"> 暂态类型：{{ detail.showName }}</view>
|
||||
<view class="mb5" v-if="detail.evtParamTm"> 持续时间：{{ detail.evtParamTm }}s</view>
|
||||
<view class="mb5" v-if="detail.evtParamVVaDepth"> 幅值：{{ detail.evtParamVVaDepth }}%</view>
|
||||
<view class="mb5" v-if="detail.evtParamPhase"> 相别：{{ detail.evtParamPhase }}</view>
|
||||
<!-- <view class="mb5" v-for="(item, textIndex) in detail.dataSet" :key="textIndex">
|
||||
{{ item.showName + '：' + (item.value == 3.1415926 ? '-' : item.value) + (item.unit || '') }}
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="detail-content">
|
||||
<view class="detail-content-title mb20">瞬时波形图</view>
|
||||
<image
|
||||
style="width: 100%"
|
||||
:src="detail.instantPics"
|
||||
mode="widthFix"
|
||||
v-if="detail.instantPics"
|
||||
@click="previewImage(detail.instantPics)"
|
||||
/>
|
||||
<text v-else>暂无</text>
|
||||
</view>
|
||||
<view class="detail-content">
|
||||
<view class="detail-content-title mb20">RMS波形图</view>
|
||||
<image
|
||||
style="width: 100%"
|
||||
:src="detail.rmsPics"
|
||||
mode="widthFix"
|
||||
v-if="detail.rmsPics"
|
||||
@click="previewImage(detail.rmsPics)"
|
||||
/>
|
||||
<text v-else>暂无</text>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
import { updateStatus } from '@/common/api/message'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
detail: {},
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// console.log(options.detail)
|
||||
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
|
||||
this.detail.rmsPics && (this.detail.rmsPics = this.$config.static + this.detail.rmsPics)
|
||||
this.detail.instantPics && (this.detail.instantPics = this.$config.static + this.detail.instantPics)
|
||||
|
||||
this.loading = false
|
||||
if (this.detail.status != 1) {
|
||||
updateStatus({
|
||||
eventIds: [this.detail.id],
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previewImage(url) {
|
||||
// uni.previewImage({
|
||||
// urls: [url],
|
||||
// })
|
||||
uni.navigateTo({
|
||||
url: `/pages/message1/comp/preview?url=${encodeURIComponent(url)}`,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.detail {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.detail-content {
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.detail-content-title {
|
||||
font-size: 30rpx;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<Cn-page :loading="loading">
|
||||
<view class="detail" slot="body">
|
||||
<view class="detail-content" style="font-size: 32rpx">
|
||||
<view>{{ detail.startTime }}</view>
|
||||
</view>
|
||||
<view class="detail-content">
|
||||
<view class="detail-content-title mb20">基础信息</view>
|
||||
<view class="mb5"> 工程名称：{{ detail.engineeringName }} </view>
|
||||
<view class="mb5"> 项目名称：{{ detail.projectName }} </view>
|
||||
<view class="mb5"> 设备名称：{{ detail.equipmentName }}</view>
|
||||
<view class="mb5"> 监测点名称：{{ detail.lineName }}</view>
|
||||
<view class="mb5"> 暂态类型：{{ detail.showName }}</view>
|
||||
<view class="mb5" v-if="detail.evtParamTm"> 持续时间：{{ detail.evtParamTm }}s</view>
|
||||
<view class="mb5" v-if="detail.evtParamVVaDepth"> 幅值：{{ detail.evtParamVVaDepth }}%</view>
|
||||
<view class="mb5" v-if="detail.evtParamPhase"> 相别：{{ detail.evtParamPhase }}</view>
|
||||
</view>
|
||||
<view class="detail-tabs">
|
||||
<uni-segmented-control
|
||||
:current="detailTab"
|
||||
active-color="#376cf3"
|
||||
:values="['波形图', 'ITIC', 'F47']"
|
||||
@clickItem="onDetailTabChange"
|
||||
/>
|
||||
</view>
|
||||
<view v-if="detailTab == 0">
|
||||
<view class="detail-content">
|
||||
<view class="detail-content-title mb20">瞬时波形图</view>
|
||||
<image
|
||||
style="width: 100%"
|
||||
:src="detail.instantPics"
|
||||
mode="widthFix"
|
||||
v-if="detail.instantPics"
|
||||
@click="previewImage(detail.instantPics)"
|
||||
/>
|
||||
<text v-else>暂无</text>
|
||||
</view>
|
||||
<view class="detail-content">
|
||||
<view class="detail-content-title mb20">RMS波形图</view>
|
||||
<image
|
||||
style="width: 100%"
|
||||
:src="detail.rmsPics"
|
||||
mode="widthFix"
|
||||
v-if="detail.rmsPics"
|
||||
@click="previewImage(detail.rmsPics)"
|
||||
/>
|
||||
<text v-else>暂无</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="detailTab == 1" class="chart-wrapper">
|
||||
<ITIC :store="eventStore" style="min-height: 600rpx;" />
|
||||
</view>
|
||||
<view v-if="detailTab == 2" class="chart-wrapper">
|
||||
<F47 :store="eventStore" style="min-height: 600rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
import { updateStatus } from '@/common/api/message'
|
||||
import ITIC from './ITIC.vue'
|
||||
import F47 from './F47.vue'
|
||||
|
||||
export default {
|
||||
components: { ITIC, F47 },
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
detail: {},
|
||||
detailTab: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
eventStore() {
|
||||
const hasData = this.detail && (this.detail.id || this.detail.equipmentId)
|
||||
if (!hasData) {
|
||||
return { data: [], status: 'noMore' }
|
||||
}
|
||||
const item = {
|
||||
...this.detail,
|
||||
evtParamTm: this.detail.evtParamTm || '0s',
|
||||
evtParamVVaDepth: this.detail.evtParamVVaDepth || '0%',
|
||||
}
|
||||
return {
|
||||
data: [item],
|
||||
status: 'noMore',
|
||||
}
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
|
||||
this.detail.rmsPics && (this.detail.rmsPics = this.$config.static + this.detail.rmsPics)
|
||||
this.detail.instantPics && (this.detail.instantPics = this.$config.static + this.detail.instantPics)
|
||||
|
||||
this.loading = false
|
||||
if (this.detail.status != 1) {
|
||||
updateStatus({
|
||||
eventIds: [this.detail.id],
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDetailTabChange(e) {
|
||||
this.detailTab = e.currentIndex
|
||||
},
|
||||
previewImage(url) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/message1/comp/preview?url=${encodeURIComponent(url)}`,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.detail {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.detail-content {
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.detail-content-title {
|
||||
font-size: 30rpx;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-tabs {
|
||||
padding: 0 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
min-height: 600rpx;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user