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 10:42:04 +08:00
parent a545692e33
commit 44684c99ed
9 changed files with 658 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/views/govern/device/control/tabs/components/waveFormAnalysis.vue
View File

@@ -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;
}
}