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-07-31 15:23:48 +08:00
parent 44684c99ed
commit f2a96f17f5
1 changed files with 65 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
<template> <template>
<div class="realtrend"> <div class="realtrend">
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick"> <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="item.id" :key="index"> <el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
<div v-loading="loading"> <div v-loading="loading">
<div class="realtrend_top"> <div class="realtrend_top">
<div class="thead"> <div class="thead">
@@ -75,14 +75,14 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue' import { ref, onMounted, reactive, nextTick } from 'vue'
import { VxeGridProps, VxeGridPropTypes } from 'vxe-table' import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
import { defaultAttribute } from '@/components/table/defaultAttribute' import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue' import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue'
import { getDeviceTrendDataGroup, getDeviceTrendData } from '@/api/cs-device-boot/EquipmentDelivery.ts' import { getDeviceTrendDataGroup, getDeviceTrendData } from '@/api/cs-device-boot/EquipmentDelivery.ts'
import Index from '@/components/wangEditor/index.vue' import Index from '@/components/wangEditor/index.vue'
const activeName = ref('') const activeName = ref(0)
const tableList: any = [] const tableList: any = []
interface RowVO { interface RowVO {
@@ -130,9 +130,10 @@ const open = (val: any) => {
getDeviceTrendDataGroup().then(res => { getDeviceTrendDataGroup().then(res => {
tabsList.value = res.data tabsList.value = res.data
if (tabsList.value.length != 0) { if (tabsList.value.length != 0) {
activeName.value = tabsList.value[0]?.id // activeName.value = tabsList.value[0]?.id
activeName.value = 0
} }
params.value = { groupId: activeName.value, ...val } params.value = { groupId: tabsList.value[activeName.value]?.id, ...val }
findRealTrendDataByGroupId(params.value) findRealTrendDataByGroupId(params.value)
}) })
return return
@@ -147,13 +148,9 @@ const findRealTrendDataByGroupId = (obj: any) => {
loading.value = true loading.value = true
chartsData.value = [] chartsData.value = []
chartsYxiasData.value = [] chartsYxiasData.value = []
let list = []
let countList = []
for (let i = 2; i <= 50; i++) {
countList.push({ value: i + '次', count: i })
}
list[0] = countList
getDeviceTrendData(obj).then(res => { getDeviceTrendData(obj).then(res => {
let list: any = []
let countList: any = []
myColumns.value = [{ field: 'name', title: '次数' }] myColumns.value = [{ field: 'name', title: '次数' }]
chartsData.value = res.data[0].thdDataTdVODatas chartsData.value = res.data[0].thdDataTdVODatas
//处理实时趋势表格 //处理实时趋势表格
@@ -167,9 +164,20 @@ const findRealTrendDataByGroupId = (obj: any) => {
if (!(vv.statisticalData + '')) { if (!(vv.statisticalData + '')) {
vv.statisticalData = '/' vv.statisticalData = '/'
} }
item.list.push({ value: vv.statisticalData, count: vv.frequency }) item.list.push({ value: vv.statisticalData, count: vv.frequency - 0 })
}) })
list[index + 1] = item.list list[index + 1] = item.list
const minCount = Math.min(...item.list.map((item: any) => item.count))
const maxCount = Math.max(...item.list.map((item: any) => item.count))
for (let i = 0; i < 50; i++) {
countList[i] = { value: i + minCount + '次', count: i + minCount }
}
countList.map((item: any, index: any) => {
if (item.value.replace('次', '') - 0 > 50) {
countList.splice(index, 1)
}
})
list[0] = countList
if (item.list.length == 0) { if (item.list.length == 0) {
for (let i = 0; i < countList.length; i++) { for (let i = 0; i < countList.length; i++) {
item.list.push({ item.list.push({
@@ -178,14 +186,19 @@ const findRealTrendDataByGroupId = (obj: any) => {
}) })
} }
} }
if (item.list.length != 0 && item.list.length < countList.length) { if (item.list.length != 0) {
for (let i = 0; i < countList.length - item.list.length; i++) { const maxCount1 = Math.max(...countList.map((item: any) => item.count))
const maxCount2 = Math.max(...item.list.map((item: any) => item.count))
console.log(maxCount2, maxCount1)
if (maxCount2 < maxCount1) {
for (let i = 0; i < maxCount1 - maxCount2; i++) {
item.list.push({ item.list.push({
value: '/', value: '/',
count: index count: index
}) })
} }
} }
}
}) })
// 转换为对象数组 // 转换为对象数组
list.map((item: any, index: any) => { list.map((item: any, index: any) => {
@@ -240,11 +253,13 @@ const init = () => {
let timeList: any = [] let timeList: any = []
let xAxisList: any = [] let xAxisList: any = []
chartsData.value.map((item: any, index: any) => { chartsData.value.map((item: any, index: any) => {
chartsYxiasData.value.map((vv: any) => { chartsYxiasData.value.map((vv: any, vvs: any) => {
if (item.phase == vv.phase) { if (item.phase == vv.phase) {
vv.phaseList.push(item.statisticalData) if (vvs == 0) {
vv.gbList.push(item.internationalValue) vv.gbList.push(item.internationalValue)
} }
vv.phaseList.push(item.statisticalData)
}
}) })
xAxisList.push(item.frequency + '次') xAxisList.push(item.frequency + '次')
}) })
@@ -252,9 +267,21 @@ const init = () => {
echartsData.value = { echartsData.value = {
options: { options: {
// backgroundColor: '#0f375f', // backgroundColor: '#0f375f',
dataZoom: [
{
show: true,
start: 0,
end: 20
},
{
type: 'inside',
start: 0,
end: 20
}
],
grid: { grid: {
top: '22%', top: '14%',
bottom: '18%', //也可设置left和right设置距离来控制图表的大小 bottom: '22%', //也可设置left和right设置距离来控制图表的大小
left: '3%', left: '3%',
right: '5%' right: '5%'
}, },
@@ -277,19 +304,6 @@ const init = () => {
bottom: 20, bottom: 20,
width: 400, width: 400,
height: 50 height: 50
// icon: 'icon'
// icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
// itemWidth: 14,
// itemHeight: 14,
// textStyle: {
// inside: true,
// color: '#000',
// padding: [11, 0, 10, 0],
// align: 'left',
// verticalAlign: 'center',
// fontSize: 14,
// rich: {}
// }
}, },
xAxis: { xAxis: {
name: '次数', name: '次数',
@@ -316,7 +330,7 @@ const init = () => {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: '单位(' + chartsData?.value[0]?.unit?chartsData?.value[0]?.unit:'' + ')', name: chartsData?.value[0]?.unit ? '单位(' + chartsData?.value[0]?.unit+ ')' : '' ,
splitLine: { splitLine: {
show: false show: false
}, },
@@ -337,14 +351,15 @@ const init = () => {
let list: any = [] let list: any = []
list = [] list = []
chartsYxiasData.value.map((item: any) => { chartsYxiasData.value.map((item: any) => {
console.log(item.gbList, 'guobialist340')
if (item.gbList.length != 0) {
list.push({ phase: item.phase, title: '国标限值', list: item.gbList })
}
if (item.phaseList.length != 0) { if (item.phaseList.length != 0) {
list.push({ phase: item.phase, title: item.title, list: item.phaseList }) list.push({ phase: item.phase, title: item.title, list: item.phaseList })
} }
if (item.gbList.length != 0) {
list.push({ phase: item.phase, title: item.title + '国标限值', list: item.gbList })
}
}) })
const colorList = ['#DAA521', 'aqua', '#d81e06', 'coral', '#1DD0CE', 'cadetblue'] const colorList = ['#00CC99', '#FF9900', '#1DD0CE', 'cadetblue']
list.map((item: any, index: any) => { list.map((item: any, index: any) => {
echartsData.value.options.legend.data.push(item.title) echartsData.value.options.legend.data.push(item.title)
echartsData.value.options.series.push({ echartsData.value.options.series.push({
@@ -361,350 +376,22 @@ const init = () => {
data: item.list data: item.list
}) })
}) })
nextTick(() => {
barCharts.value && barCharts.value.initChart() barCharts.value && barCharts.value.initChart()
return
const xDataList: any = [],
yDataList1: any = [],
yDataList2: any = []
tableList.map((item: any) => {
xDataList.push(item.name)
yDataList1.push(item.value)
yDataList2.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
yDataList2.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
}) })
if (activeName.value == '0') { return
echartsData1.value = {
options: {
// backgroundColor: '#0f375f',
grid: {
top: '22%',
bottom: '15%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: ['国标限值', yAxisUnit.value],
top: '2%',
right: '2%'
// icon: 'icon'
// icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
// itemWidth: 14,
// itemHeight: 14,
// textStyle: {
// inside: true,
// color: '#000',
// padding: [11, 0, 10, 0],
// align: 'left',
// verticalAlign: 'center',
// fontSize: 14,
// rich: {}
// }
},
xAxis: {
name: '次数',
data: xDataList,
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: [
{
name: '国标限值',
type: 'bar',
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#00CC99'
// }e
},
data: yDataList1
},
{
name: yAxisUnit.value,
type: 'bar',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#FF9900'
// }
},
data: yDataList2
}
]
}
}
barCharts1.value.initChart()
} else if (activeName.value == '1') {
echartsData2.value = {
options: {
// backgroundColor: '#0f375f',
grid: {
top: '22%',
bottom: '15%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: ['国标限值', yAxisUnit.value],
top: '2%',
right: '2%'
// icon: 'icon'
// icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
// itemWidth: 14,
// itemHeight: 14,
// textStyle: {
// inside: true,
// color: '#000',
// padding: [11, 0, 10, 0],
// align: 'left',
// verticalAlign: 'center',
// fontSize: 14,
// rich: {}
// }
},
xAxis: {
name: '次数',
data: xDataList,
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: [
{
name: '国标限值',
type: 'bar',
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#00CC99'
// }e
},
data: yDataList1
},
{
name: yAxisUnit.value,
type: 'bar',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#FF9900'
// }
},
data: yDataList2
}
]
}
}
barCharts2.value.initChart()
} else if (activeName.value == '2') {
echartsData3.value = {
options: {
// backgroundColor: '#0f375f',
grid: {
top: '22%',
bottom: '15%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: ['国标限值', yAxisUnit.value],
top: '2%',
right: '2%'
// icon: 'icon'
// icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
// itemWidth: 14,
// itemHeight: 14,
// textStyle: {
// inside: true,
// color: '#000',
// padding: [11, 0, 10, 0],
// align: 'left',
// verticalAlign: 'center',
// fontSize: 14,
// rich: {}
// }
},
xAxis: {
name: '次数',
data: xDataList,
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: [
{
name: '国标限值',
type: 'bar',
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#00CC99'
// }e
},
data: yDataList1
},
{
name: yAxisUnit.value,
type: 'bar',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#FF9900'
// }
},
data: yDataList2
}
]
}
}
barCharts3.value.initChart()
}
} }
const handleClick = (tab: any, event: any) => { const handleClick = (tab: any, event: any) => {
activeName.value = tabsList.value[tab.index].id // activeName.value = tabsList.value[tab.index].id
params.value.groupId = activeName.value // activeName.value = tab.index
params.value.groupId = tabsList.value[tab.index].id
findRealTrendDataByGroupId(params.value) findRealTrendDataByGroupId(params.value)
reverseTable() // reverseTable()
init() init()
} }
onMounted(() => { onMounted(() => {
init() // init()
}) })
defineExpose({ open }) defineExpose({ open })
</script> </script>