实时数据-实时趋势页面调试
This commit is contained in:
zhujiyan
@@ -42,6 +42,7 @@ import { ref, onMounted, watch } from 'vue'
|
||||
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
|
||||
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { getDeviceHarmonicSpectrumData, getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery.ts'
|
||||
const searchForm = ref({})
|
||||
searchForm.value = {
|
||||
index: []
|
||||
@@ -59,10 +60,11 @@ queryByCode('portable-harmonic').then(res => {
|
||||
})
|
||||
})
|
||||
const tableList: any = ref([])
|
||||
for (let i = 0; i < 100; i++) {
|
||||
for (let i = 0; i < 10000; i++) {
|
||||
tableList.value.push({
|
||||
name: i + 1,
|
||||
value: Math.floor(Math.random() * 101)
|
||||
// value: Math.floor(Math.random() * 101)
|
||||
value: i + 2
|
||||
})
|
||||
}
|
||||
const echartsData1: any = ref([]),
|
||||
@@ -75,6 +77,21 @@ const echartsData1: any = ref([]),
|
||||
const chartsTitle1 = ref('')
|
||||
const chartsTitle2 = ref('')
|
||||
const chartsTitle3 = ref('')
|
||||
//谐波频谱参数
|
||||
const params = ref({})
|
||||
const getHarmonicSpectrumParams = (val: any) => {
|
||||
params.value = val
|
||||
params.value.list = []
|
||||
console.log(params.value, '+++++++++++++')
|
||||
//查询稳态指标
|
||||
getRealTimeTableList().then(res => {
|
||||
console.log('稳态指标', res)
|
||||
})
|
||||
//查询谐波频谱
|
||||
getDeviceHarmonicSpectrumData(params.value).then(res => {
|
||||
console.log('谐波频谱')
|
||||
})
|
||||
}
|
||||
const init = () => {
|
||||
const xDataList: any = [],
|
||||
yDataList1: any = [],
|
||||
@@ -83,22 +100,22 @@ const init = () => {
|
||||
tableList.value.map((item: any) => {
|
||||
xDataList.push(item.name)
|
||||
yDataList1.push(item.value)
|
||||
yDataList2.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
|
||||
yDataList3.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
|
||||
yDataList2.push(item.value + 1000)
|
||||
yDataList3.push(item.value + 2000)
|
||||
})
|
||||
|
||||
indexOptions.value.map((item:any)=>{
|
||||
if(item.id==searchForm.value.index[0]){
|
||||
chartsTitle1.value=item.name
|
||||
}
|
||||
if(item.id==searchForm.value.index[1]){
|
||||
chartsTitle2.value=item.name
|
||||
}
|
||||
if(item.id==searchForm.value.index[2]){
|
||||
chartsTitle3.value=item.name
|
||||
}
|
||||
})
|
||||
console.log( chartsTitle1.value, chartsTitle2.value, chartsTitle3.value,"666677777");
|
||||
indexOptions.value.map((item: any) => {
|
||||
if (item.id == searchForm.value.index[0]) {
|
||||
chartsTitle1.value = item.name
|
||||
}
|
||||
if (item.id == searchForm.value.index[1]) {
|
||||
chartsTitle2.value = item.name
|
||||
}
|
||||
if (item.id == searchForm.value.index[2]) {
|
||||
chartsTitle3.value = item.name
|
||||
}
|
||||
})
|
||||
console.log(chartsTitle1.value, chartsTitle2.value, chartsTitle3.value, '666677777')
|
||||
if (searchForm.value.index[0]) {
|
||||
echartsData1.value = {
|
||||
options: {
|
||||
@@ -107,7 +124,7 @@ const init = () => {
|
||||
{
|
||||
left: '10%',
|
||||
top: 0,
|
||||
text:chartsTitle1.value
|
||||
text: chartsTitle1.value
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
@@ -163,7 +180,8 @@ const init = () => {
|
||||
textStyle: {
|
||||
color: '#000' //X轴文字颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
@@ -180,8 +198,7 @@ const init = () => {
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
smooth: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
@@ -196,6 +213,7 @@ const init = () => {
|
||||
// }e
|
||||
},
|
||||
data: yDataList1,
|
||||
smooth: true, // 这里设置平滑曲线
|
||||
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
||||
},
|
||||
{
|
||||
@@ -210,6 +228,7 @@ const init = () => {
|
||||
// }
|
||||
},
|
||||
data: yDataList2,
|
||||
smooth: true, // 这里设置平滑曲线
|
||||
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
||||
},
|
||||
{
|
||||
@@ -223,6 +242,7 @@ const init = () => {
|
||||
// }
|
||||
},
|
||||
data: yDataList3,
|
||||
smooth: true, // 这里设置平滑曲线
|
||||
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
||||
}
|
||||
]
|
||||
@@ -238,7 +258,7 @@ const init = () => {
|
||||
{
|
||||
left: '10%',
|
||||
top: 0,
|
||||
text:chartsTitle2.value
|
||||
text: chartsTitle2.value
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
@@ -294,7 +314,8 @@ const init = () => {
|
||||
textStyle: {
|
||||
color: '#000' //X轴文字颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
@@ -326,6 +347,7 @@ const init = () => {
|
||||
// }e
|
||||
},
|
||||
data: yDataList1,
|
||||
smooth: true, // 这里设置平滑曲线
|
||||
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
||||
},
|
||||
{
|
||||
@@ -340,6 +362,7 @@ const init = () => {
|
||||
// }
|
||||
},
|
||||
data: yDataList2,
|
||||
smooth: true, // 这里设置平滑曲线
|
||||
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
||||
},
|
||||
{
|
||||
@@ -353,6 +376,7 @@ const init = () => {
|
||||
// }
|
||||
},
|
||||
data: yDataList3,
|
||||
smooth: true, // 这里设置平滑曲线
|
||||
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
||||
}
|
||||
]
|
||||
@@ -424,7 +448,8 @@ const init = () => {
|
||||
textStyle: {
|
||||
color: '#000' //X轴文字颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
@@ -456,6 +481,7 @@ const init = () => {
|
||||
// }e
|
||||
},
|
||||
data: yDataList1,
|
||||
smooth: true, // 这里设置平滑曲线
|
||||
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
||||
},
|
||||
{
|
||||
@@ -470,6 +496,7 @@ const init = () => {
|
||||
// }
|
||||
},
|
||||
data: yDataList2,
|
||||
smooth: true, // 这里设置平滑曲线
|
||||
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
||||
},
|
||||
{
|
||||
@@ -483,6 +510,7 @@ const init = () => {
|
||||
// }
|
||||
},
|
||||
data: yDataList3,
|
||||
smooth: true, // 这里设置平滑曲线
|
||||
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
||||
}
|
||||
]
|
||||
@@ -507,7 +535,7 @@ onMounted(() => {
|
||||
console.log()
|
||||
// init()
|
||||
})
|
||||
defineExpose({ init })
|
||||
defineExpose({ getHarmonicSpectrumParams })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.harmonic {
|
||||
@@ -535,6 +563,7 @@ defineExpose({ init })
|
||||
.harmonic_body_charts {
|
||||
height: 200px;
|
||||
margin: 15px 0;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,35 @@
|
||||
<!-- 实时趋势 -->
|
||||
<!-- 实时数据 - 实时趋势 -->
|
||||
<template>
|
||||
<div class="realtrend">
|
||||
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="谐波电压含有率" name="0">
|
||||
<el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="item.id" :key="index">
|
||||
<div v-loading="loading">
|
||||
<div class="realtrend_top">
|
||||
<div class="thead">
|
||||
<ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
|
||||
<li>
|
||||
{{ table[0].value }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
|
||||
<span v-for="(key, keys) in table">
|
||||
<li v-if="keys != 0">
|
||||
{{ key?.value }}
|
||||
</li>
|
||||
</span>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab_info">
|
||||
<div class="charts">
|
||||
<MyEchart ref="barCharts" :options="echartsData"></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="谐波电压含有率" name="0">
|
||||
<template #label>
|
||||
<span class="custom-tabs-label">
|
||||
<el-icon><TrendCharts /></el-icon>
|
||||
@@ -43,7 +70,7 @@
|
||||
<MyEchart ref="barCharts3" :options="echartsData3"></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
@@ -53,69 +80,11 @@ 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'
|
||||
const activeName = ref('0')
|
||||
const tableList = [
|
||||
{
|
||||
name: '2次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '3次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '4次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '5次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '6次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '7次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '8次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '9次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '10次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '11次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '12次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '13次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '14次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '15次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
},
|
||||
{
|
||||
name: '16次',
|
||||
value: Math.floor(Math.random() * 101)
|
||||
}
|
||||
]
|
||||
import { getDeviceTrendDataGroup, getDeviceTrendData } from '@/api/cs-device-boot/EquipmentDelivery.ts'
|
||||
import Index from '@/components/wangEditor/index.vue'
|
||||
const activeName = ref('')
|
||||
|
||||
const tableList: any = []
|
||||
interface RowVO {
|
||||
[key: string]: any
|
||||
}
|
||||
@@ -132,26 +101,101 @@ const gridOptions = ref<VxeGridProps<RowVO>>({
|
||||
align: 'center'
|
||||
})
|
||||
gridOptions.value = { ...defaultAttribute, ...gridOptions.value }
|
||||
const myColumns = ref([
|
||||
{ field: 'name', title: '次数' },
|
||||
{ field: 'value', title: '谐波电压含有率(%)' }
|
||||
const myColumns: any = ref([
|
||||
// { field: 'name', title: '次数' }
|
||||
// { field: 'value', title: '谐波电压含有率(%)' }
|
||||
])
|
||||
|
||||
const yAxisUnit: any = ref('')
|
||||
myColumns.value.map(item => {
|
||||
if (item.field == 'value') {
|
||||
item.title =
|
||||
activeName.value == '0'
|
||||
? '谐波电压含有率(%)'
|
||||
: activeName.value == '1'
|
||||
? '间谐波电压含有率(%)'
|
||||
: activeName.value == '2'
|
||||
? '谐波电流幅值(A)'
|
||||
: ''
|
||||
yAxisUnit.value = item.title.split('(')[0]
|
||||
}
|
||||
})
|
||||
// myColumns.value.map(item => {
|
||||
// if (item.field == 'value') {
|
||||
// item.title =
|
||||
// activeName.value == '0'
|
||||
// ? '谐波电压含有率(%)'
|
||||
// : activeName.value == '1'
|
||||
// ? '间谐波电压含有率(%)'
|
||||
// : activeName.value == '2'
|
||||
// ? '谐波电流幅值(A)'
|
||||
// : ''
|
||||
// yAxisUnit.value = item.title.split('(')[0]
|
||||
// }
|
||||
// })
|
||||
|
||||
const myData = tableList
|
||||
const tabsList = ref([])
|
||||
//接收参数
|
||||
const params = ref({})
|
||||
const open = (val: any) => {
|
||||
//获取指标tab
|
||||
getDeviceTrendDataGroup().then(res => {
|
||||
tabsList.value = res.data
|
||||
if (tabsList.value.length != 0) {
|
||||
activeName.value = tabsList.value[0]?.id
|
||||
}
|
||||
params.value = { groupId: activeName.value, ...val }
|
||||
findRealTrendDataByGroupId(params.value)
|
||||
})
|
||||
return
|
||||
}
|
||||
const newTableList: any = ref([])
|
||||
//根据指标tab查询实时趋势
|
||||
const loading: any = ref(false)
|
||||
//echarts数据
|
||||
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
|
||||
getDeviceTrendData(obj).then(res => {
|
||||
myColumns.value = [{ field: 'name', title: '次数' }]
|
||||
chartsData.value = res.data[0].thdDataTdVODatas
|
||||
//处理实时趋势表格
|
||||
let arr = res.data[0].thdDataVOS
|
||||
arr.map((item: any, index: any) => {
|
||||
myColumns.value.push({ field: item.phase, title: item.name })
|
||||
chartsYxiasData.value.push({ phase: item.phase, title: item.name, phaseList: [], gbList: [] })
|
||||
//循环第二层数据
|
||||
item.list = []
|
||||
item.data.map((vv: any, vvs: any) => {
|
||||
if (!(vv.statisticalData + '')) {
|
||||
vv.statisticalData = '/'
|
||||
}
|
||||
item.list.push({ value: vv.statisticalData, count: vv.frequency })
|
||||
})
|
||||
list[index + 1] = item.list
|
||||
if (item.list.length == 0) {
|
||||
for (let i = 0; i < countList.length; i++) {
|
||||
item.list.push({
|
||||
value: '/',
|
||||
count: index
|
||||
})
|
||||
}
|
||||
}
|
||||
if (item.list.length != 0 && item.list.length < countList.length) {
|
||||
for (let i = 0; i < countList.length - item.list.length; i++) {
|
||||
item.list.push({
|
||||
value: '/',
|
||||
count: index
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
// 转换为对象数组
|
||||
list.map((item: any, index: any) => {
|
||||
item.unshift({ value: myColumns.value[index].title, count: '' })
|
||||
})
|
||||
newTableList.value = list
|
||||
loading.value = false
|
||||
init()
|
||||
})
|
||||
}
|
||||
|
||||
//反转表格
|
||||
const reverseTable = () => {
|
||||
@@ -181,14 +225,145 @@ const reverseTable = () => {
|
||||
|
||||
reverseTable()
|
||||
|
||||
const echartsData1: any = ref([]),
|
||||
const echartsData: any = ref([]),
|
||||
echartsData1: any = ref([]),
|
||||
echartsData2: any = ref([]),
|
||||
echartsData3: any = ref([]),
|
||||
barCharts = ref(),
|
||||
barCharts1 = ref(),
|
||||
barCharts2 = ref(),
|
||||
barCharts3 = ref()
|
||||
|
||||
//加载echarts
|
||||
const init = () => {
|
||||
// let list: any = []
|
||||
let timeList: any = []
|
||||
let xAxisList: any = []
|
||||
chartsData.value.map((item: any, index: any) => {
|
||||
chartsYxiasData.value.map((vv: any) => {
|
||||
if (item.phase == vv.phase) {
|
||||
vv.phaseList.push(item.statisticalData)
|
||||
vv.gbList.push(item.internationalValue)
|
||||
}
|
||||
})
|
||||
xAxisList.push(item.frequency + '次')
|
||||
})
|
||||
xAxisList = [...new Set(xAxisList)]
|
||||
echartsData.value = {
|
||||
options: {
|
||||
// backgroundColor: '#0f375f',
|
||||
grid: {
|
||||
top: '22%',
|
||||
bottom: '18%', //也可设置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
|
||||
// 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: xAxisList,
|
||||
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: '单位(' + chartsData?.value[0]?.unit?chartsData?.value[0]?.unit:'' + ')',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: []
|
||||
}
|
||||
}
|
||||
let list: any = []
|
||||
list = []
|
||||
chartsYxiasData.value.map((item: any) => {
|
||||
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']
|
||||
list.map((item: any, index: any) => {
|
||||
echartsData.value.options.legend.data.push(item.title)
|
||||
echartsData.value.options.series.push({
|
||||
name: item.title,
|
||||
type: 'bar',
|
||||
barMaxWidth: 16, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
barBorderRadius: [3, 3, 0, 0],
|
||||
// color: '#00CC99'
|
||||
// }e
|
||||
color: colorList[index]
|
||||
},
|
||||
data: item.list
|
||||
})
|
||||
})
|
||||
|
||||
barCharts.value && barCharts.value.initChart()
|
||||
return
|
||||
const xDataList: any = [],
|
||||
yDataList1: any = [],
|
||||
yDataList2: any = []
|
||||
@@ -522,96 +697,91 @@ const init = () => {
|
||||
}
|
||||
|
||||
const handleClick = (tab: any, event: any) => {
|
||||
activeName.value = tab.index
|
||||
myColumns.value.map(item => {
|
||||
if (item.field == 'value') {
|
||||
item.title =
|
||||
activeName.value == '0'
|
||||
? '谐波电压含有率(%)'
|
||||
: activeName.value == '1'
|
||||
? '间谐波电压含有率(%)'
|
||||
: activeName.value == '2'
|
||||
? '谐波电流幅值(A)'
|
||||
: ''
|
||||
yAxisUnit.value = item.title.split('(')[0]
|
||||
}
|
||||
})
|
||||
activeName.value = tabsList.value[tab.index].id
|
||||
params.value.groupId = activeName.value
|
||||
findRealTrendDataByGroupId(params.value)
|
||||
reverseTable()
|
||||
init()
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.realtrend {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.table_info {
|
||||
.realtrend_top {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow-x: auto;
|
||||
.table {
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: 2px solid #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.thead {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.thead {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
border: 1px solid #eee;
|
||||
border-right: 0;
|
||||
ul {
|
||||
width: auto;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
border-bottom: 2px solid #eee;
|
||||
.thead_left {
|
||||
width: 200px !important;
|
||||
height: 100%;
|
||||
li {
|
||||
flex: none;
|
||||
width: 100px;
|
||||
line-height: 40px;
|
||||
border: 1px solid #eee;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
list-style: none;
|
||||
}
|
||||
.thead_right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
.thead_right_item {
|
||||
flex: none;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
li:nth-child(1) {
|
||||
flex: none;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
.tbody_left {
|
||||
width: 200px !important;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
ul:nth-child(1) {
|
||||
li {
|
||||
font-weight: 800;
|
||||
}
|
||||
.tbody_right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
.tbody_right_item {
|
||||
flex: none;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
background: #f4f6f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table {
|
||||
flex: 1;
|
||||
// min-height: 80px;
|
||||
cursor: pointer;
|
||||
min-height: 90px;
|
||||
max-height: 170px;
|
||||
border: 1px solid #eee;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
ul {
|
||||
width: auto;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
li {
|
||||
flex: none;
|
||||
width: 100px;
|
||||
line-height: 40px;
|
||||
border: 1px solid #eee;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
ul:nth-child(1) {
|
||||
li {
|
||||
font-weight: 800;
|
||||
background: #f4f6f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.reverse-table {
|
||||
// max-height:120px !important;
|
||||
}
|
||||
.reverse-table .vxe-body--row .vxe-body--column:first-child {
|
||||
background-color: #f8f8f9;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,36 @@
|
||||
<!-- 波形解析组件 -->
|
||||
<!-- 暂态事件-波形解析组件 -->
|
||||
<template>
|
||||
<div class="waveFormAnalysis">
|
||||
<div class="waveFormAnalysis_header">
|
||||
<el-form-item label="值类型选择">
|
||||
<el-select v-model="searchForm.type" style="width: 200px">
|
||||
<el-option label="一次值" :value="0"></el-option>
|
||||
<el-select @change="changeView" v-model="value" placeholder="请选择值类型">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-tabs class="waveFormAnalysis_body" type="border-card" v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="瞬时波形" name="0">
|
||||
<el-tab-pane
|
||||
label="瞬时波形"
|
||||
name="ssbx"
|
||||
class="boxbx pt10 pb10"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<shushiboxi v-if="wp" :value="value" :boxoList="boxoList" :wp="wp"></shushiboxi>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
label="RMS波形"
|
||||
class="boxbx pt10 pb10"
|
||||
name="rmsbx"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<rmsboxi v-if="wp" :value="value" :boxoList="boxoList" :wp="wp"></rmsboxi>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="瞬时波形" name="0">
|
||||
<template #label>
|
||||
<span class="custom-tabs-label">
|
||||
<el-icon><TrendCharts /></el-icon>
|
||||
@@ -34,22 +55,25 @@
|
||||
<MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, reactive } from 'vue'
|
||||
import { ref, onMounted, reactive, defineExpose, watch } from 'vue'
|
||||
import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import shushiboxi from '@/components/echarts/shushiboxi.vue'
|
||||
import rmsboxi from '@/components/echarts/rmsboxi.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
const props = defineProps(['wp'])
|
||||
const searchForm = ref({
|
||||
type: 0
|
||||
})
|
||||
const activeName = ref('0')
|
||||
const tableList: any = ref([])
|
||||
for (let i = 0; i < 500; i++) {
|
||||
for (let i = 0; i < 300; i++) {
|
||||
tableList.value.push({
|
||||
name: i + 1,
|
||||
value: Math.floor(Math.random() * 101)
|
||||
@@ -80,8 +104,50 @@ const echartsData1: any = ref([]),
|
||||
barCharts1 = ref(),
|
||||
barCharts2 = ref(),
|
||||
barCharts3 = ref()
|
||||
|
||||
const view = ref(true)
|
||||
const view2 = ref(false)
|
||||
const showBoxi = ref(true)
|
||||
const activeName = ref('ssbx')
|
||||
const boxoList = ref({})
|
||||
const wp = ref({})
|
||||
const value = ref(1)
|
||||
const options = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: '一次值'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '二次值'
|
||||
}
|
||||
])
|
||||
watch(
|
||||
() => props.wp,
|
||||
(val, oldVal) => {
|
||||
if (val) {
|
||||
console.log(val, '+++++++++++++++wp')
|
||||
wp.value == val
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
const getWpData = (val: any) => {
|
||||
wp.value = val
|
||||
}
|
||||
const changeView = () => {
|
||||
// showBoxi.value = false
|
||||
// setTimeout(() => {
|
||||
// showBoxi.value = true
|
||||
// }, 0)
|
||||
}
|
||||
const bxecharts = mainHeight(155).height as any
|
||||
//加载echarts
|
||||
const init = () => {
|
||||
return
|
||||
const xDataList: any = [],
|
||||
yDataList1: any = [],
|
||||
yDataList2: any = [],
|
||||
@@ -180,7 +246,9 @@ const init = () => {
|
||||
color: '#00CC99'
|
||||
// }e
|
||||
},
|
||||
data: yDataList1
|
||||
data: yDataList1,
|
||||
smooth: true, // 这里设置平滑曲线
|
||||
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
||||
},
|
||||
{
|
||||
name: 'B相',
|
||||
@@ -193,7 +261,9 @@ const init = () => {
|
||||
color: '#FF9900'
|
||||
// }
|
||||
},
|
||||
data: yDataList2
|
||||
data: yDataList2,
|
||||
smooth: true, // 这里设置平滑曲线
|
||||
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
||||
},
|
||||
{
|
||||
name: 'C相',
|
||||
@@ -205,7 +275,9 @@ const init = () => {
|
||||
// color: '#FF9900'
|
||||
// }
|
||||
},
|
||||
data: yDataList3
|
||||
data: yDataList3,
|
||||
smooth: true, // 这里设置平滑曲线
|
||||
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -308,7 +380,6 @@ const init = () => {
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
barBorderRadius: [3, 3, 0, 0],
|
||||
|
||||
color: '#FF9900'
|
||||
// }
|
||||
},
|
||||
@@ -454,95 +525,19 @@ const init = () => {
|
||||
|
||||
const handleClick = (tab: any, event: any) => {
|
||||
activeName.value = tab.index
|
||||
if (tab.name == 'ssbx') {
|
||||
activeName.value = 'ssbx'
|
||||
} else if (tab.name == 'rmsbx') {
|
||||
activeName.value = 'rmsbx'
|
||||
}
|
||||
init()
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
defineExpose({ getWpData })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.realtrend {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.table_info {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow-x: auto;
|
||||
.table {
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: 2px solid #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.thead {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
border-bottom: 2px solid #eee;
|
||||
.thead_left {
|
||||
width: 200px !important;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.thead_right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
.thead_right_item {
|
||||
flex: none;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
.tbody_left {
|
||||
width: 200px !important;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.tbody_right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
.tbody_right_item {
|
||||
flex: none;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.reverse-table {
|
||||
// max-height:120px !important;
|
||||
}
|
||||
.reverse-table .vxe-body--row .vxe-body--column:first-child {
|
||||
background-color: #f8f8f9;
|
||||
}
|
||||
::v-deep .vxe-table--render-wrapper {
|
||||
height: 90px !important;
|
||||
max-height: 90px !important;
|
||||
overflow-x: auto !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
::v-deep .body--wrapper {
|
||||
height: 90px !important;
|
||||
max-height: 90px !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
.tab_info {
|
||||
width: 100%;
|
||||
height: calc(100vh - 450px);
|
||||
@@ -567,9 +562,9 @@ onMounted(() => {
|
||||
.waveFormAnalysis_header {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left:0;
|
||||
left: 0;
|
||||
}
|
||||
.waveFormAnalysis_body{
|
||||
.waveFormAnalysis_body {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user