Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

联调实时数据页面

Browse Source
This commit is contained in:
GGJ
2025-03-13 18:26:03 +08:00
parent 5f125afede
commit bcf9c78fac
23 changed files with 2513 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/echarts/MyEchart.vue
View File

@@ -15,8 +15,7 @@ import { color, gradeColor3 } from './color'
import { useConfig } from '@/stores/config'
const config = useConfig()
// import { nextTick } from 'process'
const emit = defineEmits(['triggerPoint'])
color[0] = config.layout.elementUiPrimary[0]
const chartRef = ref<HTMLDivElement>()
@@ -37,7 +36,7 @@ const initChart = () => {
chart?.dispose()
}
// chart?.dispose()
chart = echarts.init(chartRef.value as HTMLDivElement)
chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
const options = {
title: {
left: 'center',
@@ -69,10 +68,11 @@ const initChart = () => {
},
toolbox: {
right: 20,
top: 20,
top: 15,
feature: {
saveAsImage: {
title: '保存图片',
title: '', // 按钮标题
icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z' // 自定义图标路径
},
...(props.options?.toolbox?.featureProps || null)
@@ -87,8 +87,8 @@ const initChart = () => {
...(props.options?.toolbox || null)
},
legend: {
right: 20,
top: 0,
right: 50,
top: 25,
itemGap: 10,
itemStyle: {},
// textStyle: {
@@ -100,7 +100,7 @@ const initChart = () => {
...(props.options?.legend || null)
},
grid: {
top: '60px',
top: '70px',
left: '30px',
right: '70px',
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
@@ -132,7 +132,13 @@ const initChart = () => {
handlerBar(options)
// 处理柱状图
chart.setOption(options, true)
chart.group = 'group'
// 添加点击事件
chart.on('click', function (params) {
if (params.seriesName == '暂态触发点') {
emit('triggerPoint', params.data)
}
})
setTimeout(() => {
chart.resize()
}, 0)
@@ -223,9 +229,9 @@ const handlerXAxis = () => {
// textStyle: {
fontFamily: 'dinproRegular',
color: '#000',
fontSize: '12',
fontSize: '12'
// }
},
}
// boundaryGap: false,
}
// props.options?.xAxis 是数组还是对象
@@ -256,11 +262,17 @@ const resizeObserver = new ResizeObserver(entries => {
}, 100)
}
})
const setOptions = (options: any) => {
chart.setOption(options)
}
const getChart = () => {
return chart
}
onMounted(() => {
initChart()
resizeObserver.observe(chartRef.value!)
})
defineExpose({ initChart })
defineExpose({ initChart, setOptions, getChart })
onBeforeUnmount(() => {
resizeObserver.unobserve(chartRef.value!)
chart?.dispose()

64
src/components/echarts/rmsboxi.vue
View File

@@ -1,11 +1,12 @@
<template>
<div v-loading="loading" style="position: relative">
<div id="boxr">
<div id="rmsp" :style="`height:${vh};overflow: hidden;`">
<div class="bx" id="rms"></div>
</div>
</div>
<!-- <el-button
<div v-loading="loading" style="position: relative">
<div id="boxr">
<div id="rmsp" :style="`height:${vh};overflow: hidden;`">
<div class="bx" id="rms"></div>
</div>
</div>
<!-- <el-button
style="position: absolute; right: 10px; top: 0px; z-index: 20000"
type="primary"
link
@@ -15,7 +16,7 @@
>
下载
</el-button> -->
</div>
</div>
</template>
<script lang="js">
import html2canvas from "html2canvas";
@@ -36,6 +37,10 @@ export default {
type: [String, Number, Boolean],
default: 3,
},
parentHeight: {
type: [String, Number, Boolean],
default: 0
},
DColor: {
type: Boolean,
default: false,
@@ -103,6 +108,10 @@ export default {
} else {
this.vh = mainHeight(165, 2).height
}
if (this.parentHeight != 0) {
this.vh = mainHeight(this.parentHeight, 2).height
}
this.vw = '100%'
},
mounted() {
@@ -936,8 +945,8 @@ export default {
},
},
legend: {
left: "70px",
top: "20",
right: 50,
top: 25,
verticalAlign: "top",
enabled: true,
itemDistance: 5,
@@ -953,17 +962,22 @@ export default {
padding: [0, 0, 0, 0], //[上、右、下、左]
},
},
// toolbox: {
// show: step != 1 ? true : false,
// feature: {
// //restore: {},
// saveAsImage: {
// iconStyle: {
// borderColor: _this.DColor ? "#fff" : echartsColor.WordColor,
// },
// },
// },
// },
toolbox: {
right: 20,
top: 15,
feature: {
// 移除默认的 saveAsImage
// saveAsImage: { title: '保存图片' }
myCustomDownload: {
title: '', // 按钮标题
icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z', // 自定义图标路径
onclick: function () {
_this.download()
}
}
}
},
xAxis: {
type: "value",
name: "时间\n(ms)",
@@ -1063,7 +1077,7 @@ export default {
left: "1%",
right: "45px",
bottom: "40px",
top: "15%",
top: '70px',
containLabel: true,
},
dataZoom: [
@@ -1353,8 +1367,8 @@ export default {
},
},
legend: {
left: "70px",
top: "20",
right: 50,
top: 25,
verticalAlign: "top",
enabled: true,
itemDistance: 5,
@@ -1483,7 +1497,7 @@ export default {
left: "1%",
right: "45px",
bottom: "40px",
top: "15%",
top: '70px',
containLabel: true,
},
dataZoom: [

65
src/components/echarts/shushiboxi.vue
View File

@@ -5,10 +5,10 @@
<div class="bx" id="wave"></div>
</div>
</div>
<el-button style="position: absolute; right: 10px; top: 0px; z-index: 20000" type="primary" link
<!-- <el-button style="position: absolute; right: 10px; top: 0px; z-index: 20000" type="primary" link
icon="el-icon-Download" title="生成图片" @click="download">
下载
</el-button>
</el-button> -->
</div>
</template>
<script lang="js">
@@ -28,6 +28,10 @@ export default {
type: [String, Number, Boolean],
default: 3
},
parentHeight: {
type: [String, Number, Boolean],
default: 0
},
DColor: {
type: Boolean,
default: false
@@ -78,6 +82,10 @@ export default {
} else {
this.vh = mainHeight(165, 2).height
}
if (this.parentHeight != 0) {
this.vh = mainHeight(this.parentHeight, 2).height
}
this.vw = '100%'
},
watch: {
@@ -506,7 +514,7 @@ export default {
colors.push('#CC0000')
break
}
if (waveDatas[0].unit === '电压') {
if (this.value === 1) {
@@ -604,8 +612,8 @@ export default {
}
},
legend: {
left: '70px',
top: '20',
right: 50,
top: 25,
verticalAlign: 'top',
enabled: true,
itemDistance: 5,
@@ -621,17 +629,22 @@ export default {
padding: [0, 0, 0, 0] //[上、右、下、左]
}
},
// toolbox: {
// show: step != 1 ? true : false,
// feature: {
// //restore: {},
// saveAsImage: {
// iconStyle: {
// borderColor: _this.DColor ? "#fff" : echartsColor.WordColor,
// },
// },
// },
// },
toolbox: {
right: 20,
top: 15,
feature: {
// 移除默认的 saveAsImage
// saveAsImage: { title: '保存图片' }
myCustomDownload: {
title: '', // 按钮标题
icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z', // 自定义图标路径
onclick: function () {
_this.download()
}
}
}
},
xAxis: {
type: 'value',
name: '时间\n(ms)',
@@ -724,7 +737,7 @@ export default {
left: '1%',
right: '2.8%',
bottom: '40px',
top: '15%',
top: '70px',
containLabel: true
},
dataZoom: [
@@ -747,7 +760,7 @@ export default {
name: a,
type: 'line',
large: true,
smooth: true,
symbol: 'none',
sampling: 'average',
@@ -760,7 +773,7 @@ export default {
name: b,
type: 'line',
large: true,
smooth: true,
symbol: 'none',
sampling: 'average',
@@ -773,7 +786,7 @@ export default {
name: c,
type: 'line',
large: true,
smooth: true,
symbol: 'none',
sampling: 'average',
@@ -964,8 +977,8 @@ export default {
}
},
legend: {
left: '70px',
top: '20',
right: 50,
top: 25,
verticalAlign: 'top',
enabled: true,
itemDistance: 5,
@@ -1086,7 +1099,7 @@ export default {
left: '1%',
right: '2.8%',
bottom: '40px',
top: '15%',
top: '70px',
containLabel: true
},
dataZoom: [
@@ -1109,7 +1122,7 @@ export default {
name: a,
type: 'line',
large: true,
smooth: true,
symbol: 'none',
sampling: 'average',
@@ -1122,7 +1135,7 @@ export default {
name: b,
type: 'line',
large: true,
smooth: true,
symbol: 'none',
sampling: 'average',
@@ -1135,7 +1148,7 @@ export default {
name: c,
type: 'line',
large: true,
smooth: true,
symbol: 'none',
sampling: 'average',

85
src/components/echarts/waveForm.vue
View File

@@ -2,35 +2,65 @@
<div v-if="view2">
<el-row>
<el-col :span="12">
<span style="font-size: 14px; line-height: 30px">值类型选择:</span>
<el-select style="min-width: 200px; width: 200px" @change="changeView" v-model="value"
placeholder="请选择值类型">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<span style="font-size: 14px; line-height: 30px">值类型选择:</span>
<el-select
style="min-width: 200px; width: 200px"
@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-button v-if="view2 && senior" class="ml10" type="primary"
@click="AdvancedAnalytics">高级分析</el-button> -->
</el-col>
<el-col :span="12">
<el-button @click="backbxlb" class="el-icon-refresh-right" icon="el-icon-CloseBold"
style="float: right">
<el-button
@click="backbxlb"
class="el-icon-refresh-right"
icon="el-icon-CloseBold"
style="float: right"
>
返回
</el-button>
</el-col>
</el-row>
<div v-loading="loading" style="height: calc(100vh - 190px)">
<el-tabs v-if="view4" class="default-main" v-model="bxactiveName" @tab-click="bxhandleClick">
<el-tab-pane label="瞬时波形" name="ssbx" class="boxbx pt10 pb10"
:style="'height:' + bxecharts + ';overflow-y: scroll;'">
<shushiboxi ref="shushiboxiRef" v-if="bxactiveName == 'ssbx' && showBoxi" :value="value"
:boxoList="boxoList" :wp="wp">
</shushiboxi>
<el-tab-pane
label="瞬时波形"
name="ssbx"
class="boxbx pt10 pb10"
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
>
<shushiboxi
ref="shushiboxiRef"
v-if="bxactiveName == 'ssbx' && showBoxi"
:value="value"
:parentHeight="parentHeight"
: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 ref="rmsboxiRef" v-if="bxactiveName == 'rmsbx' && showBoxi" :value="value"
:boxoList="boxoList" :wp="wp">
</rmsboxi>
<el-tab-pane
label="RMS波形"
class="boxbx pt10 pb10"
name="rmsbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
>
<rmsboxi
ref="rmsboxiRef"
v-if="bxactiveName == 'rmsbx' && showBoxi"
:value="value"
:parentHeight="parentHeight"
:boxoList="boxoList"
:wp="wp"
></rmsboxi>
</el-tab-pane>
</el-tabs>
<el-empty v-else description="暂无数据" style="height: calc(100vh - 190px)" />
@@ -60,6 +90,7 @@ interface Props {
const props = withDefaults(defineProps<Props>(), {
senior: false
})
const parentHeight = ref(0)
const loading = ref(true)
const bxactiveName = ref('ssbx')
const rmsboxiRef = ref()
@@ -75,7 +106,7 @@ const options = ref([
}
])
const shushiboxiRef = ref()
const bxecharts = mainHeight(95).height as any
const bxecharts = ref(mainHeight(95).height as any)
const view2 = ref(true)
const boxoList = ref(null)
const wp = ref(null)
@@ -88,7 +119,6 @@ const open = async (row: any) => {
loading.value = true
await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
.then(res => {
row.loading = false
if (res != undefined) {
boxoList.value = row
@@ -106,15 +136,13 @@ const bxhandleClick = (tab: any) => {
if (tab.name == 'ssbx') {
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
bxactiveName.value = 'ssbx'
} else if (tab.name == 'rmsbx') {
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
bxactiveName.value = 'rmsbx'
}
setTimeout(() => {
loading.value = false
},0)
loading.value = false
}, 0)
// console.log(tab, event);
}
const backbxlb = () => {
@@ -125,6 +153,15 @@ const backbxlb = () => {
emit('backbxlb')
}
const setHeight = (h: any, vh: any) => {
if (h != false) {
parentHeight.value = h
}
setTimeout(() => {
bxecharts.value = mainHeight(vh).height
}, 100)
}
// 高级分析
const AdvancedAnalytics = () => {
analysis({
@@ -145,6 +182,6 @@ const gaoBack = () => {
view2.value = true
view3.value = false
}
defineExpose({ open })
defineExpose({ open, setHeight })
</script>
<style lang="scss" scoped></style>