Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改问题

Browse Source
This commit is contained in:
zhujiyan
2024-10-22 14:00:39 +08:00
parent 1e1993d125
commit 28c0e2d23c
6 changed files with 204 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/echarts/MyEchart.vue
View File

@@ -124,7 +124,7 @@ const initChart = () => {
}
handlerBar(options)
// 处理柱状图
chart.setOption(options)
chart.setOption(options,true)
setTimeout(() => {
chart.resize()

71
src/views/govern/device/control/index.vue
View File

@@ -90,7 +90,6 @@
</el-tab-pane>
<TableHeader
:showSearch="false"
:key="mqttMessage"
v-if="
(dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
@@ -111,12 +110,9 @@
placeholder="请输入关键词"
></el-input>
</el-form-item>
<el-form-item v-if="mqttMessage.dataTime" label="数据时间">
{{ mqttMessage.dataTime }}
</el-form-item>
<el-form-item label="值类型">
<el-select
style="width: 160px !important"
style="min-width: 120px !important"
v-model="formInline.dataLevel"
:disabled="dataLevel == 'Primary' && deviceType == '0'"
>
@@ -124,6 +120,9 @@
<el-option value="Secondary" label="二次值"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="mqttMessage.dataTime" label="数据时间">
{{ mqttMessage.dataTime }}
</el-form-item>
</template>
<template #operation>
<el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
@@ -276,7 +275,8 @@
实时录波
</el-button>
</div> -->
<div class="view_top_btn" v-if="!realTimeFlag">
<div class="view_top_btn" v-if="!realTimeFlag && mqttMessage.dataTime">
<p v-if="mqttMessage.dataTime" style="margin: 0 auto">数据时间： {{ mqttMessage.dataTime }}</p>
<el-button :icon="Back" @click="handleReturn">返回</el-button>
</div>
<!-- 实时数据主界面组件 -->
@@ -285,7 +285,7 @@
<recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
<!-- 实时数据-实时趋势组件 -->
<realTrend
v-show="!realTimeFlag && sonTab == 1"
v-if="!realTimeFlag && sonTab == 1"
ref="realTrendRef"
@changeTrendType="changeTrendType"
></realTrend>
@@ -387,11 +387,11 @@ const realTimeFlag = ref(true)
//实时数据子菜单
const sonTab = ref()
//实时录波
const handleRecordWaves = () => {
realTimeFlag.value = false
sonTab.value = 0
window.clearInterval(timer.value)
}
// const handleRecordWaves = () => {
// realTimeFlag.value = false
// sonTab.value = 0
// window.clearInterval(timer.value)
// }
//谐波频谱
const realTrendRef = ref()
const changeTrendType = (val: any) => {
@@ -400,24 +400,49 @@ const changeTrendType = (val: any) => {
}
//谐波频谱
const activeTrendName: any = ref(0)
const trendTimer: any = ref()
const handleTrend = async () => {
realTimeFlag.value = false
sonTab.value = 1
clearInterval(timer.value)
clearInterval(realDataTimer.value)
clearInterval(trendTimer.value)
await getHarmRealData(lineId.value, activeTrendName.value).then((res: any) => {
if (res.code == 'A0000') {
ElMessage.success('装置应答成功')
mqttRef.value.on('message', (topic: any, message: any) => {
// console.log('mqtt接收到消息', message,topic)
console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
console.log('谐波频谱---mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) || {}
if (obj.data1) {
realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
}
})
} else {
ElMessage.success('装置应答失败')
}
})
//每隔30s调用一下接口，通知后台推送mqtt消息
trendTimer.value = setInterval(() => {
getHarmRealData(lineId.value, activeTrendName.value).then((res: any) => {
console.log(res, '获取谐波频谱数据')
connectMqtt()
mqttRef.value.on('connect', (e: any) => {
// ElMessage.success('连接mqtt服务器成功!')
console.log('mqtt客户端已连接....')
// mqttRef.value.subscribe('/Web/Progress')
mqttRef.value.subscribe('/Web/RealData/+')
//假数据
})
mqttRef.value.on('message', (topic: any, message: any) => {
console.log('谐波频谱----mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) || {}
if (obj.data1) {
realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
}
})
})
}, 30000)
await getOverLimitData(lineId.value).then((res: any) => {
console.log(res, '获取国标限制')
if (res.code == 'A0000') {
@@ -432,11 +457,8 @@ const harmonicSpectrumRef = ref()
//实时趋势
const handleHarmonicSpectrum = () => {
realTimeFlag.value = false
// harmonicSpectrumRef.value &&
// harmonicSpectrumRef.value.getHarmonicSpectrumParams({ devId: deviceId.value, lineId: lineId.value })
window.clearInterval(timer.value)
clearInterval(realDataTimer.value)
realTimeFlag.value = false
sonTab.value = 2
harmonicSpectrumRef.value && harmonicSpectrumRef.value.resetData()
getRealDataMqttMsg()
@@ -570,6 +592,7 @@ const connectMqtt = () => {
const getRealDataMqttMsg = async () => {
clearInterval(timer.value)
clearInterval(realDataTimer.value)
clearInterval(trendTimer.value)
//新的实时数据
//1.调用接口 mqtt推送数据
await getBasicRealData(lineId.value).then((res: any) => {
@@ -593,8 +616,8 @@ const getRealDataMqttMsg = async () => {
mqttRef.value.on('message', (topic: any, message: any) => {
mqttMessage.value = {}
// console.log('mqtt接收到消息', message,topic)
console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
console.log('实时数据&实时趋势---mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
//处理mqtt数据 1转2除 2转1乘
//如果消息返回值是二次值，下拉框是二次值只需要单位换算 除以1000
@@ -710,11 +733,16 @@ const getRealDataMqttMsg = async () => {
mqttMessage.value = obj
//更新实时数据值
realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
//更新谐波频谱数据
//更新实时趋势数据
!realTimeFlag.value &&
sonTab.value == 2 &&
harmonicSpectrumRef.value &&
harmonicSpectrumRef.value.setHarmonicSpectrumData(mqttMessage.value)
//更新谐波频谱数据
!realTimeFlag.value &&
sonTab.value == 1 &&
realTrendRef.value &&
realTrendRef.value.setRealTrendData(obj)
})
mqttRef.value.on('error', (error: any) => {
@@ -965,7 +993,8 @@ onUnmounted(() => {
height: 40px;
display: flex;
align-items: center;
justify-content: flex-end;
justify-content: space-between;
padding-left: 20%;
}
.custom-tabs-label {

356
src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
View File

@@ -1,6 +1,6 @@
<!-- 实时数据页面 -->
<!-- 实时趋势 -->
<template>
<div class="harmonic" :style="heightTop">
<div class="harmonic" :style="heightTop" v-loading="loading">
<div class="harmonic_select">
<el-form :model="searchForm" id="history_select">
<el-form-item label="稳态指标">
@@ -21,23 +21,16 @@
></el-option>
</el-select>
</el-form-item>
<el-button type="primary" :loading="loading" @click="init">查询</el-button>
<!-- <el-button type="primary" :loading="loading" @click="init">查询</el-button> -->
</el-form>
</div>
<div class="harmonic_body" v-loading="loading">
<div class="harmonic_body">
<div
class="harmonic_body_charts"
:style="{ height: height }"
v-for="(item, index) in searchForm.index"
:key="index"
>
<!-- <p class="charts_title">
{{
indexOptions.find((item: any) => {
return item.id == searchForm.index[index]
})?.name
}}
</p> -->
<MyEchart :ref="setChildRef(index)" :options="item.echartsData" :isInterVal="true"></MyEchart>
</div>
</div>
@@ -46,7 +39,7 @@
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getDeviceHarmonicSpectrumData, getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery.ts'
import { getDeviceHarmonicSpectrumData } from '@/api/cs-device-boot/EquipmentDelivery.ts'
import { mainHeight } from '@/utils/layout'
import { yMethod } from '@/utils/echartMethod'
const searchForm: any = ref({})
@@ -66,7 +59,8 @@ indexOptions.value = [
{ name: 'vRmsC', phase: 'C相', data: [] }
],
unit: 'kV',
data: []
data: [],
yMethodList: []
},
{
id: 1,
@@ -77,7 +71,8 @@ indexOptions.value = [
{ name: 'iRmsC', phase: 'C相', data: [] }
],
unit: 'A',
data: []
data: [],
yMethodList: []
},
{
id: 2,
@@ -89,7 +84,8 @@ indexOptions.value = [
{ name: 'pTot', phase: '总', data: [] }
],
unit: 'kW',
data: []
data: [],
yMethodList: []
},
{
id: 3,
@@ -101,7 +97,8 @@ indexOptions.value = [
{ name: 'qTot', phase: '总', data: [] }
],
unit: 'kW',
data: []
data: [],
yMethodList: []
},
{
@@ -113,7 +110,8 @@ indexOptions.value = [
{ name: 'v1C', phase: 'C相', data: [] }
],
unit: 'kV',
data: []
data: [],
yMethodList: []
},
{
id: 5,
@@ -124,7 +122,8 @@ indexOptions.value = [
{ name: 'i1C', phase: 'C相', data: [] }
],
unit: 'A',
data: []
data: [],
yMethodList: []
},
{
id: 6,
@@ -134,21 +133,24 @@ indexOptions.value = [
{ name: 'freqDev', phase: '频率偏差', data: [] }
],
unit: 'Hz',
data: []
data: [],
yMethodList: []
},
{
id: 7,
name: '电压不平衡度(%)',
children: [{ name: 'vUnbalance', phase: '电压不平衡度', data: [] }],
unit: '%',
data: []
data: [],
yMethodList: []
},
{
id: 8,
name: '电流不平衡度(%)',
children: [{ name: 'iUnbalance', phase: '电流不平衡度', data: [] }],
unit: '%',
data: []
data: [],
yMethodList: []
}
]
// searchForm.value.index[0] = indexOptions.value[0]
@@ -156,7 +158,9 @@ const heightTop = mainHeight(275)
let height: any = mainHeight(275).height
const params: any = ref({})
const loading = ref(false)
const resetData = () => {
loading.value = true
indexOptions.value = [
{
id: 0,
@@ -261,39 +265,27 @@ const setHarmonicSpectrumData = (val: any) => {
mqttMessage.value = val
init()
}
const chartsList: any = ref([])
const loading = ref(false)
// 为每个子组件实例设置ref
const setChildRef = (index: any) => {
return `child-${index}`
}
const childRefs: any = {}
const harmonicData: any = ref([])
const init = () => {
loading.value = true
mqttMessage.value
searchForm.value.index.map((item: any, index: any) => {
item?.children.map((vv: any, vvs: any) => {
if (mqttMessage.value[vv.name]) {
// console.log(
// mqttMessage.value[vv.name],
// '这是一个哥哥哥哥哥哥哥哥还是哈哈',
// mqttMessage.value.dataTime,
// vvs,
// index,
// vv.name
// )
item.linesList = []
item?.data.push({
time: mqttMessage.value.dataTime,
value: mqttMessage.value[vv.name],
key: vv.name
})
item?.yMethodList.push([mqttMessage.value.dataTime, mqttMessage.value[vv.name], vv.name])
vv.data.push(mqttMessage.value[vv.name])
}
})
})
loading.value = false
//循环渲染图表
let timeList: any = []
searchForm.value.index.map((item: any, index: any) => {
@@ -308,7 +300,6 @@ const init = () => {
const refName = setChildRef(index)
childRefs[refName] = ref(null) // 初始化ref
item.echartsData = {
options: {
title: [
{
left: '10%',
@@ -331,276 +322,80 @@ const init = () => {
}
}
},
legend: {
data: [],
top: '2%',
right: '2%'
},
xAxis: {
name: '时间',
data: timeList,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisPointer: {
type: 'shadow'
},
type: 'time',
axisLabel: {
show: true,
textStyle: {
color: '#000' //X轴文字颜色
formatter: {
day: '{MM}-{dd}',
month: '{MM}',
year: '{yyyy}'
}
},
boundaryGap: false
},
yAxis: {
type: 'value',
name: item.unit,
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
// data: timeList
},
splitNumber: 5,
minInterval: 1
},
// yAxis: {
// type: 'value',
// name: item.unit,
// splitLine: {
// show: false
// },
// axisTick: {
// show: true
// },
// axisLine: {
// show: true,
// lineStyle: {
// color: '#000'
// }
// },
// splitNumber: 5,
// minInterval: 1
// },
yAxis: [{}],
series: []
}
}
//根据指标判断渲染几条线
searchForm.value.index.length == 3
? (height = mainHeight(275, 3).height)
: (height = mainHeight(275, searchForm.value.index.length).height)
console.log(item.children, '<<<<<<<<<<<<<<<<<<<<<<344')
item.children.map((zz: any, zzIndex: any) => {
item.echartsData.options.legend.data.push(zz.phase)
item.echartsData.options.series.push({
let seriesList: any = []
// zz.yMethodList = []
// console.log(zz.yMethodList, '不能给嘎嘎嘎哈哈')
// zz.yMethodList=new Set(...zz.yMethodList)
// return;
item.echartsData.series.push({
name: zz.phase,
type: 'line',
increment: true,
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color:['#DAA520', '#2E8B57', '#A52a2a', '#000'][zzIndex],
// color: '#00CC99'
// }e
// 修改线条颜色
// lineStyle: {
// color: ['#DAA520', '#2E8B57', '#A52a2a', '#000'][index]
// }
color: ['#DAA520', '#2E8B57', '#A52a2a', '#000'][zzIndex]
},
data: zz.data,
data: zz.yMethodList,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
})
})
console.log(searchForm.value.index, item.echartsData, '最新的结果')
})
console.log(searchForm.value.index, '最新的结果')
return
//横轴数据
item.echartsData.options.xAxis.data =
item.thdDataVOS.length != 0 &&
item.thdDataVOS[0].list &&
item.thdDataVOS[0].list.map((ss: any) => {
return ss.frequency + '次'
})
let aar: any = []
//y轴数据
item.thdDataVOS.map((vv: any) => {
item.echartsData.options.series.push({
name: vv.phase + '相',
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#00CC99'
// }e
},
data: vv.list.map((vvs: any) => {
aar.push(vvs.statisticalData)
return vvs.statisticalData
}),
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
})
//legend数据
item.echartsData.options.legend.data.push(vv.phase + '相')
})
let [min, max] = yMethod(aar)
item.echartsData.options.yAxis.max = max
item.echartsData.options.yAxis.min = min
})
return
params.value.list = []
searchForm.value.index.map((item: any) => {
params.value.list.push({ statisticalId: item })
})
// 查询谐波频谱
getDeviceHarmonicSpectrumData(params.value).then(res => {
res.data.length > 3 ? (height = mainHeight(275, 3).height) : (height = mainHeight(275, res.data.length).height)
chartsList.value = res.data
//数据根据相别组装成新数组
chartsList.value.map((item: any) => {
item.countList = []
item.thdDataVOS = item.thdDataVOS.reduce((acc: any, current: any) => {
const existing = acc.find((redu: any) => redu.phase == current.phase)
if (existing) {
existing.list.push(current)
} else {
acc.push({
phase: current.phase,
list: [current]
})
}
return acc
}, [])
return
})
//循环渲染图表
chartsList.value &&
chartsList.value.map((item: any, index: any) => {
const refName = setChildRef(index)
childRefs[refName] = ref(null) // 初始化ref
item.echartsData = {
options: {
title: [
{
left: '10%',
top: 0
// text: item.showName
}
],
// grid: {
// top: '16%',
// bottom: '15%', //也可设置left和right设置距离来控制图表的大小
// left: '3%',
// right: '4%'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: [],
top: '2%',
right: '2%'
},
xAxis: {
name: '时间',
data: [],
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#000' //X轴文字颜色
}
},
boundaryGap: false
},
yAxis: {
type: 'value',
name:
item.thdDataVOS.length != 0 &&
item.thdDataVOS[0].list &&
item.thdDataVOS[0].list[0].unit,
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
},
splitNumber: 5,
minInterval: 1
},
series: []
}
}
//横轴数据
item.echartsData.options.xAxis.data =
item.thdDataVOS.length != 0 &&
item.thdDataVOS[0].list &&
item.thdDataVOS[0].list.map((ss: any) => {
return ss.frequency + '次'
})
let aar: any = []
//y轴数据
item.thdDataVOS.map((vv: any) => {
item.echartsData.options.series.push({
name: vv.phase + '相',
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#00CC99'
// }e
},
data: vv.list.map((vvs: any) => {
aar.push(vvs.statisticalData)
return vvs.statisticalData
}),
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
})
//legend数据
item.echartsData.options.legend.data.push(vv.phase + '相')
})
let [min, max] = yMethod(aar)
item.echartsData.options.yAxis.max = max
item.echartsData.options.yAxis.min = min
})
loading.value = false
})
}
watch(
() => searchForm.value.index,
(val: any, oldval: any) => {
if (val && val.length != 0) {
// watch(
// () => searchForm.value.index,
// (val: any, oldval: any) => {
// if (val && val.length != 0) {
// init()
}
},
{
deep: true,
immediate: true
}
)
// }
// },
// {
// deep: true,
// immediate: true
// }
// )
onMounted(() => {})
defineExpose({ resetData, setHarmonicSpectrumData })
</script>
@@ -629,12 +424,11 @@ defineExpose({ resetData, setHarmonicSpectrumData })
.harmonic_body {
flex: 1;
overflow-y: auto;
// padding-bottom: 200px;
.harmonic_body_charts {
// margin: 15px 0;
border: 1px solid #eee;
position: relative;
padding-top: 10px;
box-sizing: border-box;
.charts_title {
position: absolute;

128
src/views/govern/device/control/tabs/components/realtrend.vue
View File

@@ -24,11 +24,15 @@
<div class="realtrend_table" v-if="Object.keys(tableData).length != 0">
<div class="thead_left">
<p>次数</p>
<p>{{ item.groupName }}</p>
<p>
{{ item.groupName }}{{ item.unit?'('+item.unit+')':'' }}
</p>
</div>
<div class="thead_right">
<div class="right_cell" v-for="(value, key, index) in tableData" :key="index">
<p v-if="item.groupName.includes('间谐波') && index != 50">{{ index + 0.5 }}次</p>
<p v-if="item.groupName.includes('间谐波')">
{{ Number(String(key).replace('data', ' ')) - 0.5 }}次
</p>
<p v-else>
<span>{{ String(key).replace('data', ' ') }}次</span>
</p>
@@ -92,32 +96,27 @@ const params = ref({})
const open = async (val: any) => {
loading.value = true
//获取指标tab
// await getDeviceTrendDataGroup().then(res => {
// tabsList.value = res.data.reverse()
// if (tabsList.value.length != 0) {
// // activeName.value = tabsList.value[0]?.id
// activeName.value = val.activeTrendName || 0
// }
// params.value = { groupId: tabsList.value[activeName.value]?.id, ...val }
// })
tabsList.value = [
{
id: '6d5470f509ca271d7108a86e83bb283f',
groupName: '谐波电压含有率',
thdDataVOS: null,
thdDataTdVODatas: null
thdDataTdVODatas: null,
unit: '%'
},
{
id: '8dc260f16280184e2b57d26668dc00b1',
groupName: '谐波电流幅值',
thdDataVOS: null,
thdDataTdVODatas: null
thdDataTdVODatas: null,
unit: 'A'
},
{
id: 'ae31115b83f02f03a0d3bd65cb017121',
groupName: '间谐波电压含有率',
thdDataVOS: null,
thdDataTdVODatas: null
thdDataTdVODatas: null,
unit: '%'
}
]
if (tabsList.value.length != 0) {
@@ -137,7 +136,7 @@ const open = async (val: any) => {
const chartsData: any = ref([])
const chartsYxiasData: any = ref([])
const echartsData: any = ref([])
const echartsData: any = ref()
const barCharts = ref()
//加载echarts
@@ -171,94 +170,18 @@ const init = () => {
})
xAxisList = [...new Set(xAxisList)]
echartsData.value = {
options: {
// backgroundColor: '#0f375f',
// dataZoom: [
// {
// type: 'inside',
// height: 13,
// start: 0,
// bottom: '20px',
// end: 20
// },
// {
// start: 0,
// height: 13,
// bottom: '20px',
// end: 20
// }
// ],
grid: {
top: '14%',
bottom: '70px', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'cross',
// label: {
// show: false
// }
// }
// },
legend: {
data: [],
itemGap: 15,
type: 'scroll', // 开启滚动分页
// orient: 'vertical', // 垂直排列
right: '3%', // 位置调整
top: 0,
bottom: 20,
width: 400,
height: 50
},
color: ['#2E8B57', '#DAA520'],
xAxis: {
name: '次数',
data: trendData.map((item: any) => {
return item.count + '次'
}),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000'
}
})
},
axisTick: {
show: true //隐藏X轴刻度
yAxis: {
name: tabsList.value[activeName.value].unit
},
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#000' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: '',
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
}
}
],
series: []
}
}
let list: any = [
gbData.map((item: any) => {
return item.value
@@ -268,19 +191,11 @@ const init = () => {
})
]
let legendList = ['国标限值', tabsList.value[activeName.value]?.groupName]
echartsData.value.options.legend.data = legendList
// echartsData.value.legend.data = legendList
list.map((item: any, index: any) => {
echartsData.value.options.series.push({
echartsData.value.series.push({
name: legendList[index],
type: 'bar',
barMaxWidth: 16, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
// color: '#00CC99'
// }e
color: colorList[index]
},
data: item
})
})
@@ -299,22 +214,25 @@ const handleClick = (tab: any, event: any) => {
//获取mqtt传送的实时数据
const mqttMessage: any = ref()
const tableData: any = ref({})
const colorList = ['#DAA520', '#2E8B57', '#A52a2a', '#000']
const setRealTrendData = (val: any) => {
loading.value = true
console.log(val, '谐波频谱')
tableData.value = {}
mqttMessage.value = val
for (let key in val) {
if (String(key).includes('data') && String(key) != 'dataLevel' && String(key) != 'dataTime') {
tableData.value[key] = val[key]
if(tabsList.value[activeName.value].groupName.includes("间")==false){
delete tableData.value.data1
}
}
}
if (tableData.value) {
init()
} else {
emit('changeTrendType', activeName.value)
}
loading.value = false
}
//获取国标限值
const limitData: any = ref()

21
src/views/govern/device/control/tabs/realtime.vue
View File

@@ -190,6 +190,9 @@ const initRadioCharts = () => {
tooltip: {
formatter: '{a} <br/>{c} {b}'
},
toolbox:{
show:false
},
legend: {
show: false
},
@@ -203,7 +206,7 @@ const initRadioCharts = () => {
// 表盘最大值
max: -180,
// 表盘分割数
splitNumber: 12,
splitNumber: 6,
// 圆心位置
center: ['50%', '50%'],
// 半径
@@ -301,7 +304,7 @@ const initRadioCharts = () => {
// 表盘最大值
max: -180,
// 表盘分割数
splitNumber: 12,
splitNumber: 6,
// 圆心位置
center: ['50%', '50%'],
// 半径
@@ -433,6 +436,9 @@ const init = () => {
echartsData.value = {
options: {
tooltip: {},
toolbox:{
show:false
},
series: [
{
type: 'gauge',
@@ -442,7 +448,7 @@ const init = () => {
max: 450,
radius: '150%',
center: ['55%', '76%'],
splitNumber: 3, //刻度数量
splitNumber: 2, //刻度数量
axisLine: {
show: true,
lineStyle: {
@@ -607,6 +613,7 @@ onMounted(() => {
justify-content: space-between;
//border: 1px solid #eee;
// padding: 10px;
margin-top: 10px;
.view_top_left,
.view_top_right {
// width: 300px;
@@ -636,10 +643,10 @@ onMounted(() => {
position: relative;
.mid_charts {
width: 100%;
height: 80%;
position: absolute;
top: 20%;
bottom: 10px;
height: 280px;
// position: absolute;
// top: 20%;
// bottom: 10px;
}
}

2
src/views/govern/device/planData/index.vue
View File

@@ -568,7 +568,7 @@ const init = (flag: boolean) => {
seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit])
})
console.log(seriesList,"9999999999");
echartsData.value.options.series.push({
name: kk[0].phase + '相' + item[0].anotherName,
type: 'line',