修改问题
This commit is contained in:
zhujiyan
@@ -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,93 +170,17 @@ 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
|
||||
},
|
||||
xAxis: {
|
||||
name: '次数',
|
||||
data: trendData.map((item: any) => {
|
||||
return item.count + '次'
|
||||
}),
|
||||
axisLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true //隐藏X轴刻度
|
||||
},
|
||||
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: []
|
||||
}
|
||||
color: ['#2E8B57', '#DAA520'],
|
||||
xAxis: {
|
||||
name: '次数',
|
||||
data: trendData.map((item: any) => {
|
||||
return item.count + '次'
|
||||
})
|
||||
},
|
||||
yAxis: {
|
||||
name: tabsList.value[activeName.value].unit
|
||||
},
|
||||
series: []
|
||||
}
|
||||
let list: any = [
|
||||
gbData.map((item: any) => {
|
||||
@@ -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,15 +214,17 @@ 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]
|
||||
delete tableData.value.data1
|
||||
if(tabsList.value[activeName.value].groupName.includes("间")==false){
|
||||
delete tableData.value.data1
|
||||
}
|
||||
}
|
||||
}
|
||||
if (tableData.value) {
|
||||
@@ -315,6 +232,7 @@ const setRealTrendData = (val: any) => {
|
||||
} else {
|
||||
emit('changeTrendType', activeName.value)
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
//获取国标限值
|
||||
const limitData: any = ref()
|
||||
|
||||
Reference in New Issue
Block a user