暂态事件-波形解析修改

This commit is contained in:
zhujiyan
2024-09-27 10:27:33 +08:00
parent a6ee1bd322
commit 1e08891b10
2 changed files with 39 additions and 449 deletions

View File

@@ -1,7 +1,7 @@
<!-- 暂态事件-波形解析组件 --> <!-- 暂态事件-波形解析组件 -->
<template> <template>
<div class="waveFormAnalysis"> <div class="home">
<div class="waveFormAnalysis_header"> <div class="home_header">
<el-form-item label="值类型选择"> <el-form-item label="值类型选择">
<el-select @change="changeView" v-model="value" placeholder="请选择值类型"> <el-select @change="changeView" v-model="value" placeholder="请选择值类型">
<el-option <el-option
@@ -12,8 +12,11 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="">
<el-button type="primary" @click="handleBack" :icon="ArrowLeft">返回</el-button>
</el-form-item>
</div> </div>
<el-tabs class="waveFormAnalysis_body" type="border-card" v-model="activeName" @tab-click="handleClick"> <el-tabs class="home_body" type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane <el-tab-pane
label="瞬时波形" label="瞬时波形"
name="ssbx" name="ssbx"
@@ -38,48 +41,23 @@
:wp="wp" :wp="wp"
></rmsboxi> ></rmsboxi>
</el-tab-pane> </el-tab-pane>
<!-- <el-tab-pane label="瞬时波形" name="0">
<template #label>
<span class="custom-tabs-label">
<el-icon><TrendCharts /></el-icon>
瞬时波形
</span>
</template>
<div class="tab_info">
<div class="charts">
<MyEchart ref="barCharts1" :options="echartsData1"></MyEchart>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="RMS波形" name="1">
<template #label>
<span class="custom-tabs-label">
<el-icon><TrendCharts /></el-icon>
RMS波形
</span>
</template>
<div class="tab_info">
<div class="charts">
<MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
</div>
</div>
</el-tab-pane> -->
</el-tabs> </el-tabs>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, reactive, defineExpose, watch } from 'vue' import { ref, onMounted, reactive, defineExpose, watch, defineEmits } 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 shushiboxi from '@/components/echarts/shushiboxi.vue' import shushiboxi from '@/components/echarts/shushiboxi.vue'
import rmsboxi from '@/components/echarts/rmsboxi.vue' import rmsboxi from '@/components/echarts/rmsboxi.vue'
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, ArrowLeft } from '@element-plus/icons-vue'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
const props = defineProps(['wp']) const props = defineProps(['wp'])
const searchForm = ref({ const searchForm = ref({
type: 0 type: 0
}) })
const emit = defineEmits(['handleHideCharts'])
const tableList: any = ref([]) const tableList: any = ref([])
for (let i = 0; i < 300; i++) { for (let i = 0; i < 300; i++) {
tableList.value.push({ tableList.value.push({
@@ -118,7 +96,7 @@ const view2 = ref(false)
const showBoxi = ref(true) const showBoxi = ref(true)
const activeName = ref('ssbx') const activeName = ref('ssbx')
const wp = ref({}) const wp = ref({})
const value = ref(2) const value = ref(1)
const options = ref([ const options = ref([
{ {
value: 1, value: 1,
@@ -129,19 +107,7 @@ const options = ref([
label: '二次值' label: '二次值'
} }
]) ])
// watch(
// () => props.wp,
// (val, oldVal) => {
// if (val) {
// console.log(val,"+++++++++++++++wp");
// wp.value == val
// }
// },
// {
// immediate: true,
// deep: true
// }
// )
const isWp = ref(false) const isWp = ref(false)
const boxoList: any = ref([]) const boxoList: any = ref([])
const getWpData = (val: any, list: any) => { const getWpData = (val: any, list: any) => {
@@ -157,383 +123,6 @@ const changeView = () => {
}, 0) }, 0)
} }
const bxecharts = mainHeight(195).height as any const bxecharts = mainHeight(195).height as any
//加载echarts
const init = () => {
return
const xDataList: any = [],
yDataList1: any = [],
yDataList2: any = [],
yDataList3: any = []
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))
})
if (activeName.value == '0') {
echartsData1.value = {
options: {
// backgroundColor: '#0f375f',
grid: {
top: '8%',
bottom: '15%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: ['A相', 'B相', 'C相'],
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: '时间(ms)',
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: 'kv',
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
}
}
],
series: [
{
name: 'A相',
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#FFCC00'
// }e
},
data: yDataList1,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
name: 'B相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#009900'
// }
},
data: yDataList2,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
name: 'C相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#CC0000'
// }
},
data: yDataList3,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
}
]
}
}
barCharts1.value.initChart()
} else if (activeName.value == '1') {
echartsData2.value = {
options: {
// backgroundColor: '#0f375f',
grid: {
top: '8%',
bottom: '15%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: ['A相', 'B相', 'C相'],
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: '时间(ms)',
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: 'kv',
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
}
}
],
series: [
{
name: 'A相',
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#FFCC00'
// }e
},
data: yDataList1
},
{
name: 'B相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#009900'
// }
},
data: yDataList2
},
{
name: 'C相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#CC0000'
// }
},
data: yDataList3
}
]
}
}
barCharts2.value.initChart()
} else if (activeName.value == '2') {
echartsData3.value = {
options: {
// backgroundColor: '#0f375f',
grid: {
top: '8%',
bottom: '15%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: ['A相', 'B相', 'C相'],
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: '时间(ms)',
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: 'kv',
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
}
}
],
series: [
{
name: 'A相',
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#FFCC00'
// }e
},
data: yDataList1
},
{
name: 'B相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#009900'
// }
},
data: yDataList2
},
{
name: 'C相',
type: 'line',
barMaxWidth: 24,
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#CC0000'
// }
},
data: yDataList3
}
]
}
}
barCharts3.value.initChart()
}
}
const handleClick = (tab: any, event: any) => { const handleClick = (tab: any, event: any) => {
// activeName.value = tab.index // activeName.value = tab.index
@@ -542,11 +131,11 @@ const handleClick = (tab: any, event: any) => {
} else if (tab.name == 'rmsbx') { } else if (tab.name == 'rmsbx') {
activeName.value = 'rmsbx' activeName.value = 'rmsbx'
} }
init()
} }
onMounted(() => { const handleBack = () => {
init() emit('handleHideCharts')
}) }
onMounted(() => {})
defineExpose({ getWpData }) defineExpose({ getWpData })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -562,24 +151,27 @@ defineExpose({ getWpData })
} }
} }
.waveFormAnalysis { .home {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
.waveFormAnalysis_header { .home_header {
position: absolute; // position: absolute;
top: -25px; // top: -25px;
left: 0; // left: 0;
width: 80%; // width: 80%;
height: 40px; // height: 40px;
height: 50px;
display: flex;
align-items: center;
.el-select { .el-select {
width: 200px !important; width: 200px !important;
} }
} }
.waveFormAnalysis_body { .home_body {
margin-top: 20px; // margin-top: 20px;
flex: 1; flex: 1;
} }
} }

View File

@@ -1,22 +1,18 @@
<template> <template>
<div class="header_btn" style="display: none"> <div class="view">
<!-- <el-button type="primary" size="small" @click="handleWaveFormAnalysis(0)" v-if="!isWaveCharts"> <TableHeader datePicker ref="headerRef" v-if="!isWaveCharts"></TableHeader>
波形解析
</el-button> -->
</div>
<div class="view" >
<TableHeader datePicker ref="headerRef">
<template #operation>
<el-button v-if="isWaveCharts" type="primary" @click="handleBack" :icon="ArrowLeft">返回</el-button>
</template>
</TableHeader>
<Table ref="tableRef" v-if="!isWaveCharts" /> <Table ref="tableRef" v-if="!isWaveCharts" />
<waveFormAnalysis v-if="isWaveCharts" ref="waveFormAnalysisRef" :wp="wp" /> <waveFormAnalysis
v-if="isWaveCharts"
ref="waveFormAnalysisRef"
@handleHideCharts="isWaveCharts = false"
:wp="wp"
/>
<el-button v-if="isWaveCharts" type="primary" @click="handleBack" :icon="ArrowLeft">返回</el-button>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, provide, nextTick } from 'vue' import { ref, onMounted, provide, nextTick, defineEmits } from 'vue'
import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery' import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue' import Table from '@/components/table/index.vue'
@@ -88,6 +84,7 @@ const tableStore: any = new TableStore({
// }, // },
click: async row => { click: async row => {
row.loading = true row.loading = true
await analyseWave(row.id) await analyseWave(row.id)
.then(res => { .then(res => {
row.loading = false row.loading = false
@@ -132,6 +129,7 @@ const getTableParams = (val: any) => {
const handleBack = async () => { const handleBack = async () => {
isWaveCharts.value = false isWaveCharts.value = false
console.log(6666666, isWaveCharts.value) console.log(6666666, isWaveCharts.value)
emit('activeTabsType', '')
await tableStore.index() await tableStore.index()
} }
defineExpose({ getTableParams }) defineExpose({ getTableParams })