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

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

@@ -2,7 +2,7 @@
<template>
<div class="realtrend">
<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 class="realtrend_top">
<div class="thead">
@@ -75,14 +75,14 @@
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { ref, onMounted, reactive, nextTick } from 'vue'
import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue'
import { getDeviceTrendDataGroup, getDeviceTrendData } from '@/api/cs-device-boot/EquipmentDelivery.ts'
import Index from '@/components/wangEditor/index.vue'
const activeName = ref('')
const activeName = ref(0)
const tableList: any = []
interface RowVO {
@@ -130,9 +130,10 @@ const open = (val: any) => {
getDeviceTrendDataGroup().then(res => {
tabsList.value = res.data
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)
})
return
@@ -145,15 +146,11 @@ const chartsData: any = ref([])
const chartsYxiasData: any = ref([])
const findRealTrendDataByGroupId = (obj: any) => {
loading.value = true
chartsData.value=[]
chartsYxiasData.value=[]
let list = []
let countList = []
for (let i = 2; i <= 50; i++) {
countList.push({ value: i + '次', count: i })
}
list[0] = countList
chartsData.value = []
chartsYxiasData.value = []
getDeviceTrendData(obj).then(res => {
let list: any = []
let countList: any = []
myColumns.value = [{ field: 'name', title: '次数' }]
chartsData.value = res.data[0].thdDataTdVODatas
//处理实时趋势表格
@@ -167,9 +164,20 @@ const findRealTrendDataByGroupId = (obj: any) => {
if (!(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
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) {
for (let i = 0; i < countList.length; i++) {
item.list.push({
@@ -178,14 +186,19 @@ const findRealTrendDataByGroupId = (obj: any) => {
})
}
}
if (item.list.length != 0 && item.list.length < countList.length) {
for (let i = 0; i < countList.length - item.list.length; i++) {
if (item.list.length != 0) {
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({
value: '/',
count: index
})
}
}
}
})
// 转换为对象数组
list.map((item: any, index: any) => {
@@ -240,11 +253,13 @@ const init = () => {
let timeList: any = []
let xAxisList: 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) {
vv.phaseList.push(item.statisticalData)
if (vvs == 0) {
vv.gbList.push(item.internationalValue)
}
vv.phaseList.push(item.statisticalData)
}
})
xAxisList.push(item.frequency + '次')
})
@@ -252,9 +267,21 @@ const init = () => {
echartsData.value = {
options: {
// backgroundColor: '#0f375f',
dataZoom: [
{
show: true,
start: 0,
end: 20
},
{
type: 'inside',
start: 0,
end: 20
}
],
grid: {
top: '22%',
bottom: '18%', //也可设置left和right设置距离来控制图表的大小
top: '14%',
bottom: '22%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
@@ -277,19 +304,6 @@ const init = () => {
bottom: 20,
width: 400,
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: {
name: '次数',
@@ -316,7 +330,7 @@ const init = () => {
yAxis: [
{
type: 'value',
name: '单位(' + chartsData?.value[0]?.unit?chartsData?.value[0]?.unit:'' + ')',
name: chartsData?.value[0]?.unit ? '单位(' + chartsData?.value[0]?.unit+ ')' : '' ,
splitLine: {
show: false
},
@@ -337,14 +351,15 @@ const init = () => {
let list: any = []
list = []
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) {
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) => {
echartsData.value.options.legend.data.push(item.title)
echartsData.value.options.series.push({
@@ -361,350 +376,22 @@ const init = () => {
data: item.list
})
})
nextTick(() => {
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') {
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()
}
return
}
const handleClick = (tab: any, event: any) => {
activeName.value = tabsList.value[tab.index].id
params.value.groupId = activeName.value
// activeName.value = tabsList.value[tab.index].id
// activeName.value = tab.index
params.value.groupId = tabsList.value[tab.index].id
findRealTrendDataByGroupId(params.value)
reverseTable()
// reverseTable()
init()
}
onMounted(() => {
init()
// init()
})
defineExpose({ open })
</script>