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-10-16 16:57:04 +08:00
parent 1f41ad6c2d
commit 10b8710832
6 changed files with 522 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
src/views/govern/device/control/index.vue
View File

@@ -12,9 +12,20 @@
<!-- <el-button v-if="deviceType == '1'" type="primary" @click="handleDownLoadTemplate">
模版下载
</el-button> -->
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Connection" @click="handleImport">离线补召</el-button>
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Monitor" @click="handleaddDevice">在线补召</el-button>
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Tickets" @click="handleAnalysisList">补招日志</el-button>
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Connection" @click="handleImport">
离线补召
</el-button>
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Monitor" @click="handleaddDevice">
在线补召
</el-button>
<el-button
v-if="deviceType == '1'"
type="primary"
icon="el-icon-Tickets"
@click="handleAnalysisList"
>
补招日志
</el-button>
</template>
<el-descriptions-item label="名称">
{{ deviceData.name ? deviceData.name : '/' }}
@@ -373,8 +384,6 @@ const handleRecordWaves = () => {
}
//实时趋势
const realTrendRef = ref()
//谐波频谱
const harmonicSpectrumRef = ref()
const changeTrendType = (val: any) => {
activeTrendName.value = val * 1
handleTrend()
@@ -409,12 +418,17 @@ const handleTrend = async () => {
realTrendRef.value.open({ devId: deviceId.value, lineId: lineId.value, activeTrendName: activeTrendName.value })
}
//谐波频谱
const harmonicSpectrumRef = ref()
//谐波频谱
const handleHarmonicSpectrum = () => {
realTimeFlag.value = false
sonTab.value = 2
harmonicSpectrumRef.value &&
harmonicSpectrumRef.value.getHarmonicSpectrumParams({ devId: deviceId.value, lineId: lineId.value })
// harmonicSpectrumRef.value &&
// harmonicSpectrumRef.value.getHarmonicSpectrumParams({ devId: deviceId.value, lineId: lineId.value })
window.clearInterval(timer.value)
clearInterval(realDataTimer.value)
realTimeFlag.value = false
sonTab.value = 2
getRealDataMqttMsg()
}
//返回
const handleReturn = () => {
@@ -542,9 +556,172 @@ const connectMqtt = () => {
}
mqttRef.value = mqtt.connect(url, options)
}
const getRealDataMqttMsg = async () => {
//新的实时数据
//1.调用接口 mqtt推送数据
await getBasicRealData(lineId.value).then((res: any) => {
if (res.code == 'A0000') {
ElMessage.success('装置应答成功')
} else {
ElMessage.success('装置应答失败')
}
})
//2.建立mqtt通讯
//每隔30s调用一下接口，通知后台推送mqtt消息
realDataTimer.value = await setInterval(() => {
getBasicRealData(lineId.value).then((res: any) => {
console.log(res, '获取基础实时数据')
})
}, 30000)
connectMqtt()
mqttRef.value.on('connect', (e: any) => {
// ElMessage.success('连接mqtt服务器成功!')
console.log('mqtt客户端已连接....')
// mqttRef.value.subscribe('/Web/Progress')
mqttRef.value.subscribe('/Web/RealData/+')
//假数据
})
mqttRef.value.on('message', (topic: any, message: any) => {
mqttMessage.value = {}
// console.log('mqtt接收到消息', message,topic)
console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
//处理mqtt数据 1转2除 2转1乘
//如果消息返回值是二次值，下拉框是二次值只需要单位换算 除以1000
//如果消息返回值是一次值，下拉框是一次值只需要单位换算 除以1000
if (obj.dataLevel == formInline.dataLevel) {
obj = {
...obj,
// 电压有效值
vRmsA: obj.vRmsA / 1000,
vRmsB: obj.vRmsB / 1000,
vRmsC: obj.vRmsC / 1000,
//基波电压幅值
v1A: obj.v1A / 1000,
v1B: obj.v1B / 1000,
v1C: obj.v1C / 1000,
//有功功率
pA: obj.pA / 1000,
pB: obj.pB / 1000,
pC: obj.pC / 1000,
pTot: obj.pTot / 1000,
//无功功率
qA: obj.qA / 1000,
qB: obj.qB / 1000,
qC: obj.qC / 1000,
qTot: obj.qTot / 1000,
//视在功率
sA: obj.sA / 1000,
sB: obj.sB / 1000,
sC: obj.sC / 1000,
sTot: obj.sTot / 1000
}
}
//如果消息返回值是二次值，下拉框是一次值需要单位换算 除以1000 并且乘以pt ct
if (obj.dataLevel == 'Secondary' && formInline.dataLevel == 'Primary') {
obj = {
...obj,
// 电压有效值
vRmsA: (obj.vRmsA * obj.pt) / 1000,
vRmsB: (obj.vRmsA * obj.pt) / 1000,
vRmsC: (obj.vRmsA * obj.pt) / 1000,
// 电流有效值
iRmsA: obj.iRmsA * obj.ct,
iRmsB: obj.iRmsA * obj.ct,
iRmsC: obj.iRmsA * obj.ct,
//基波电压幅值
v1A: (obj.v1A * obj.pt) / 1000,
v1B: (obj.v1B * obj.pt) / 1000,
v1C: (obj.v1C * obj.pt) / 1000,
//基波电流幅值
i1A: obj.i1A * obj.ct,
i1B: obj.i1B * obj.ct,
i1C: obj.i1C * obj.ct,
//有功功率
pA: (obj.pA * obj.pt * obj.ct) / 1000,
pB: (obj.pB * obj.pt * obj.ct) / 1000,
pC: (obj.pC * obj.pt * obj.ct) / 1000,
pTot: (obj.pTot * obj.pt * obj.ct) / 1000,
//无功功率
qA: (obj.qA * obj.pt * obj.ct) / 1000,
qB: (obj.qB * obj.pt * obj.ct) / 1000,
qC: (obj.qC * obj.pt * obj.ct) / 1000,
qTot: (obj.qTot * obj.pt * obj.ct) / 1000,
//视在功率
sA: (obj.sA * obj.pt * obj.ct) / 1000,
sB: (obj.sB * obj.pt * obj.ct) / 1000,
sC: (obj.sC * obj.pt * obj.ct) / 1000,
sTot: (obj.sTot * obj.pt * obj.ct) / 1000
}
}
//如果消息返回值是一次值，下拉框是二次值需要单位换算 乘以1000 并且除以pt ct
if (obj.dataLevel == 'Primary' && formInline.dataLevel == 'Secondary') {
console.log(6666)
obj = {
...obj,
// 电压有效值
vRmsA: (obj.vRmsA / obj.pt) * 1000,
vRmsB: (obj.vRmsA / obj.pt) * 1000,
vRmsC: (obj.vRmsA / obj.pt) * 1000,
// 电流有效值
iRmsA: obj.iRmsA / obj.ct,
iRmsB: obj.iRmsA / obj.ct,
iRmsC: obj.iRmsA / obj.ct,
//基波电压幅值
v1A: (obj.v1A / obj.pt) * 1000,
v1B: (obj.v1B / obj.pt) * 1000,
v1C: (obj.v1C / obj.pt) * 1000,
//基波电流幅值
i1A: obj.i1A / obj.ct,
i1B: obj.i1B / obj.ct,
i1C: obj.i1C / obj.ct,
//有功功率
pA: (obj.pA / obj.pt / obj.ct) * 1000,
pB: (obj.pB / obj.pt / obj.ct) * 1000,
pC: (obj.pC / obj.pt / obj.ct) * 1000,
pTot: (obj.pTot / obj.pt / obj.ct) * 1000,
//无功功率
qA: (obj.qA / obj.pt / obj.ct) * 1000,
qB: (obj.qB / obj.pt / obj.ct) * 1000,
qC: (obj.qC / obj.pt / obj.ct) * 1000,
qTot: (obj.qTot / obj.pt / obj.ct) * 1000,
//视在功率
sA: (obj.sA / obj.pt / obj.ct) * 1000,
sB: (obj.sB / obj.pt / obj.ct) * 1000,
sC: (obj.sC / obj.pt / obj.ct) * 1000,
sTot: (obj.sTot / obj.pt / obj.ct) * 1000
}
}
//保留两位小数
for (var i in obj) {
if (typeof obj[i] == 'number' && obj[i] != 0 && Math.abs(obj[i]) % 1 != 0) {
obj[i] = obj[i].toFixed(2)
}
}
mqttMessage.value = obj
//更新实时数据值
realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
//更新谐波频谱数据
!realTimeFlag.value &&
sonTab.value == 2 &&
harmonicSpectrumRef.value &&
harmonicSpectrumRef.value.setHarmonicSpectrumData(mqttMessage.value)
})
mqttRef.value.on('error', (error: any) => {
console.log('mqtt连接失败...', error)
mqttRef.value.end()
})
mqttRef.value.on('close', function () {
console.log('mqtt客户端已断开连接.....')
})
}
//tab点击事件
const realDataTimer: any = ref()
const mqttMessage = ref<any>({})
const handleClick = async (tab?: any) => {
if (realDataTimer.value) {
window.clearInterval(realDataTimer.value)
@@ -614,163 +791,7 @@ const handleClick = async (tab?: any) => {
tableLoading.value = false
}, 1500)
//新的实时数据
//1.调用接口 mqtt推送数据
await getBasicRealData(lineId.value).then((res: any) => {
if (res.code == 'A0000') {
ElMessage.success('装置应答成功')
} else {
ElMessage.success('装置应答失败')
}
})
//2.建立mqtt通讯
const mqttMessage = ref<any>({})
//每隔30s调用一下接口，通知后台推送mqtt消息
realDataTimer.value = setInterval(() => {
getBasicRealData(lineId.value).then((res: any) => {
console.log(res, '获取基础实时数据')
})
}, 30000)
connectMqtt()
mqttRef.value.on('connect', (e: any) => {
// ElMessage.success('连接mqtt服务器成功!')
console.log('mqtt客户端已连接....')
// mqttRef.value.subscribe('/Web/Progress')
mqttRef.value.subscribe('/Web/RealData/+')
//假数据
})
mqttRef.value.on('message', (topic: any, message: any) => {
mqttMessage.value = {}
// console.log('mqtt接收到消息', message,topic)
console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
//处理mqtt数据 1转2除 2转1乘
//如果消息返回值是二次值，下拉框是二次值只需要单位换算 除以1000
//如果消息返回值是一次值，下拉框是一次值只需要单位换算 除以1000
if (obj.dataLevel == formInline.dataLevel) {
obj = {
...obj,
// 电压有效值
vRmsA: obj.vRmsA / 1000,
vRmsB: obj.vRmsB / 1000,
vRmsC: obj.vRmsC / 1000,
//基波电压幅值
v1A: obj.v1A / 1000,
v1B: obj.v1B / 1000,
v1C: obj.v1C / 1000,
//有功功率
pA: obj.pA / 1000,
pB: obj.pB / 1000,
pC: obj.pC / 1000,
pTot: obj.pTot / 1000,
//无功功率
qA: obj.qA / 1000,
qB: obj.qB / 1000,
qC: obj.qC / 1000,
qTot: obj.qTot / 1000,
//视在功率
sA: obj.sA / 1000,
sB: obj.sB / 1000,
sC: obj.sC / 1000,
sTot: obj.sTot / 1000
}
}
//如果消息返回值是二次值，下拉框是一次值需要单位换算 除以1000 并且乘以pt ct
if (obj.dataLevel == 'Secondary' && formInline.dataLevel == 'Primary') {
obj = {
...obj,
// 电压有效值
vRmsA: (obj.vRmsA * obj.pt) / 1000,
vRmsB: (obj.vRmsA * obj.pt) / 1000,
vRmsC: (obj.vRmsA * obj.pt) / 1000,
// 电流有效值
iRmsA: obj.iRmsA * obj.ct,
iRmsB: obj.iRmsA * obj.ct,
iRmsC: obj.iRmsA * obj.ct,
//基波电压幅值
v1A: (obj.v1A * obj.pt) / 1000,
v1B: (obj.v1B * obj.pt) / 1000,
v1C: (obj.v1C * obj.pt) / 1000,
//基波电流幅值
i1A: obj.i1A * obj.ct,
i1B: obj.i1B * obj.ct,
i1C: obj.i1C * obj.ct,
//有功功率
pA: (obj.pA * obj.pt * obj.ct) / 1000,
pB: (obj.pB * obj.pt * obj.ct) / 1000,
pC: (obj.pC * obj.pt * obj.ct) / 1000,
pTot: (obj.pTot * obj.pt * obj.ct) / 1000,
//无功功率
qA: (obj.qA * obj.pt * obj.ct) / 1000,
qB: (obj.qB * obj.pt * obj.ct) / 1000,
qC: (obj.qC * obj.pt * obj.ct) / 1000,
qTot: (obj.qTot * obj.pt * obj.ct) / 1000,
//视在功率
sA: (obj.sA * obj.pt * obj.ct) / 1000,
sB: (obj.sB * obj.pt * obj.ct) / 1000,
sC: (obj.sC * obj.pt * obj.ct) / 1000,
sTot: (obj.sTot * obj.pt * obj.ct) / 1000
}
}
//如果消息返回值是一次值，下拉框是二次值需要单位换算 乘以1000 并且除以pt ct
if (obj.dataLevel == 'Primary' && formInline.dataLevel == 'Secondary') {
console.log(6666)
obj = {
...obj,
// 电压有效值
vRmsA: (obj.vRmsA / obj.pt) * 1000,
vRmsB: (obj.vRmsA / obj.pt) * 1000,
vRmsC: (obj.vRmsA / obj.pt) * 1000,
// 电流有效值
iRmsA: obj.iRmsA / obj.ct,
iRmsB: obj.iRmsA / obj.ct,
iRmsC: obj.iRmsA / obj.ct,
//基波电压幅值
v1A: (obj.v1A / obj.pt) * 1000,
v1B: (obj.v1B / obj.pt) * 1000,
v1C: (obj.v1C / obj.pt) * 1000,
//基波电流幅值
i1A: obj.i1A / obj.ct,
i1B: obj.i1B / obj.ct,
i1C: obj.i1C / obj.ct,
//有功功率
pA: (obj.pA / obj.pt / obj.ct) * 1000,
pB: (obj.pB / obj.pt / obj.ct) * 1000,
pC: (obj.pC / obj.pt / obj.ct) * 1000,
pTot: (obj.pTot / obj.pt / obj.ct) * 1000,
//无功功率
qA: (obj.qA / obj.pt / obj.ct) * 1000,
qB: (obj.qB / obj.pt / obj.ct) * 1000,
qC: (obj.qC / obj.pt / obj.ct) * 1000,
qTot: (obj.qTot / obj.pt / obj.ct) * 1000,
//视在功率
sA: (obj.sA / obj.pt / obj.ct) * 1000,
sB: (obj.sB / obj.pt / obj.ct) * 1000,
sC: (obj.sC / obj.pt / obj.ct) * 1000,
sTot: (obj.sTot / obj.pt / obj.ct) * 1000
}
}
//保留两位小数
for (var i in obj) {
if (typeof obj[i] == 'number' && obj[i] != 0) {
obj[i].toFixed(2)
}
}
mqttMessage.value = obj
realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
})
mqttRef.value.on('error', (error: any) => {
console.log('mqtt连接失败...', error)
mqttRef.value.end()
})
mqttRef.value.on('close', function () {
console.log('mqtt客户端已断开连接.....')
})
getRealDataMqttMsg()
}
//查询暂态事件
if (dataSet.value.includes('_event')) {

35
src/views/govern/device/control/supplementaryRecruitment.vue
View File

@@ -1,47 +1,36 @@
<template>
<div class="default-main device">
<currentDevice ref="currentDeviceRef"/>
<!-- <el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="当前设备补召" name="0">
<currentDevice v-if="activeName == '0'" ref="currentDeviceRef"/>
</el-tab-pane>
<el-tab-pane label="历史设备补召" name="1">
<history v-if="activeName == '1'" />
</el-tab-pane>
</el-tabs> -->
<currentDevice ref="currentDeviceRef" />
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted,watch ,nextTick} from 'vue'
// import current from './supplementaryRecruitment/current.vue'
import { ref, onMounted, watch, nextTick } from 'vue'
import currentDevice from './supplementaryRecruitment/currentDevice.vue'
import history from './supplementaryRecruitment/history.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const activeName = ref('0')
const currentDeviceRef=ref()
const currentDeviceRef = ref()
watch(
()=>activeName.value,
(val,oldVal)=>{
if(val=='0'){
nextTick(()=>{
currentDeviceRef.value&&currentDeviceRef.value.getMakeUpDataList(route.query)
() => activeName.value,
(val, oldVal) => {
if (val == '0') {
nextTick(() => {
currentDeviceRef.value && currentDeviceRef.value.getMakeUpDataList(route.query)
})
}
},
{
immediate:true,
deep:true
immediate: true,
deep: true
}
)
onMounted(() => {
console.log()
currentDeviceRef.value&&currentDeviceRef.value.getMakeUpDataList(route.query)
currentDeviceRef.value && currentDeviceRef.value.getMakeUpDataList(route.query)
})
</script>
<style lang="scss" scoped>
.device{
.device {
width: 100%;
height: 100%;
}

287
src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
View File

@@ -10,12 +10,14 @@
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
:multiple-limit="3"
value-key="id"
>
<el-option
v-for="item in indexOptions"
:key="item.id"
v-for="(item, index) in indexOptions"
:label="item.name"
:value="item.id"
:key="index"
:value="item"
></el-option>
</el-select>
</el-form-item>
@@ -26,16 +28,16 @@
<div
class="harmonic_body_charts"
:style="{ height: height }"
v-for="(item, index) in chartsList"
v-for="(item, index) in searchForm.index"
:key="index"
>
<p class="charts_title">
<!-- <p class="charts_title">
{{
indexOptions.find((item: any) => {
return item.id == searchForm.index[index]
})?.name
}}
</p>
</p> -->
<MyEchart :ref="setChildRef(index)" :options="item.echartsData"></MyEchart>
</div>
</div>
@@ -43,8 +45,6 @@
</template>
<script lang="ts" setup>
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'
import { mainHeight } from '@/utils/layout'
@@ -55,55 +55,103 @@ searchForm.value = {
}
//统计指标
const indexOptions: any = ref([])
// const legendDictList: any = ref([])
// queryByCode('portable-harmonic').then(res => {
// queryCsDictTree(res.data.id).then(item => {
// indexOptions.value = item.data
// searchForm.value.index[0] = indexOptions.value[0].id
// })
// queryStatistical(res.data.id).then(vv => {
// legendDictList.value = vv.data
// })
// })
indexOptions.value = [
{
id: 0,
name: '电压总有效值(kV)'
name: '电压总有效值(kV)',
children: [
{ name: 'vRmsA', phase: 'A相', data: [] },
{ name: 'vRmsB', phase: 'B相', data: [] },
{ name: 'vRmsC', phase: 'C相', data: [] }
],
unit:'kV',
data: []
},
{
id: 1,
name: '电流总有效值(A)'
name: '电流总有效值(A)',
children: [
{ name: 'iRmsA', phase: 'A相', data: [] },
{ name: 'iRmsB', phase: 'B相', data: [] },
{ name: 'iRmsC', phase: 'C相', data: [] }
],
unit:"A",
data: []
},
{
id: 2,
name: '有功功率(kW)'
name: '有功功率(kW)',
children: [
{ name: 'pA', phase: 'A相', data: [] },
{ name: 'pB', phase: 'B相', data: [] },
{ name: 'pC', phase: 'C相', data: [] },
{ name: 'pTot', phase: '总', data: [] }
],
unit:"kW",
data: []
},
{
id: 3,
name: '无功功率(kW)'
name: '无功功率(kW)',
children: [
{ name: 'qA', phase: 'A相', data: [] },
{ name: 'qB', phase: 'B相', data: [] },
{ name: 'qC', phase: 'C相', data: [] },
{ name: 'qTot', phase: '总', data: [] }
],
unit:"kW",
data: []
},
{
id: 4,
name: '基波电压总有效值(kV)'
name: '基波电压总有效值(kV)',
children: [
{ name: 'v1A', phase: 'A相', data: [] },
{ name: 'v1B', phase: 'B相', data: [] },
{ name: 'v1C', phase: 'C相', data: [] }
],
unit:"kV",
data: []
},
{
id: 5,
name: '基波电流总有效值(A)'
name: '基波电流总有效值(A)',
children: [
{ name: 'i1A', phase: 'A相', data: [] },
{ name: 'i1B', phase: 'B相', data: [] },
{ name: 'i1C', phase: 'C相', data: [] }
],
unit:"A",
data: []
},
{
id: 6,
name: '频率(Hz)'
name: '频率(Hz)',
children: [
{ name: 'freq',phase: '频率', data: [] },
{ name: 'freqDev',phase: '频率偏差', data: [] }
],
unit:"Hz",
data: []
},
{
id: 7,
name: '电压不平衡度(%)'
name: '电压不平衡度(%)',
children: [{ name: 'vUnbalance',phase: '电压不平衡度', data: [] }],
unit:"%",
data: []
},
{
id: 8,
name: '电流不平衡度(%)'
name: '电流不平衡度(%)',
children: [{ name: 'iUnbalance',phase: '电流不平衡度', data: [] }],
unit:"%",
data: []
}
]
searchForm.value.index[0] = indexOptions.value[0].id
searchForm.value.index[0] = indexOptions.value[0]
const heightTop = mainHeight(275)
let height: any = mainHeight(275).height
//谐波频谱参数
@@ -112,20 +160,194 @@ const getHarmonicSpectrumParams = (val: any) => {
params.value = val
init()
}
const mqttMessage: any = ref()
const setHarmonicSpectrumData = (val: any) => {
mqttMessage.value = val
init()
}
const chartsList: any = ref([])
const loading = ref(false)
// 为每个子组件实例设置ref
const setChildRef = (index: any) => {
return `child-${index}`
}
const childRefs = {}
const childRefs: any = {}
const harmonicData: any = ref([])
const init = () => {
loading.value = true
mqttMessage.value
searchForm.value.index.map((item: any, index: any) => {
item?.children.map((vv: any, vvs: any) => {
if (mqttMessage.value[vv.name]) {
console.log(
mqttMessage.value[vv.name],
'这是一个哥哥哥哥哥哥哥哥还是哈哈',
mqttMessage.value.dataTime,
vvs,
index,
vv.name
)
item.linesList = []
item?.data.push({
time: mqttMessage.value.dataTime,
value: mqttMessage.value[vv.name],
key: vv.name
})
vv.data.push(mqttMessage.value[vv.name])
}
})
})
loading.value = false
//循环渲染图表
let timeList: any = []
searchForm.value.index.map((item: any, index: any) => {
timeList = Array.from(
new Set(
item.data.map((vv: any) => {
return vv.time
})
)
)
//循环渲染图表
const refName = setChildRef(index)
childRefs[refName] = ref(null) // 初始化ref
item.echartsData = {
options: {
title: [
{
left: '10%',
top: 0,
text: item.name
}
],
// grid: {
// top: '16%',
// bottom: '15%', //也可设置left和right设置距离来控制图表的大小
// left: '3%',
// right: '4%'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: [],
top: '2%',
right: '2%'
},
xAxis: {
name: '时间',
data: timeList,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#000' //X轴文字颜色
}
},
boundaryGap: false
},
yAxis: {
type: 'value',
name: item.unit,
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
},
splitNumber: 5,
minInterval: 1
},
series: []
}
}
//根据指标判断渲染几条线
searchForm.value.index.length == 3
? (height = mainHeight(275, 3).height)
: (height = mainHeight(275, searchForm.value.index.length).height)
item.children.map((zz: any) => {
item.echartsData.options.legend.data.push(zz.phase)
item.echartsData.options.series.push({
name: zz.phase,
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#00CC99'
// }e
},
data: zz.data,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
})
})
console.log(searchForm.value.index, '最新的结果')
return
//横轴数据
item.echartsData.options.xAxis.data =
item.thdDataVOS.length != 0 &&
item.thdDataVOS[0].list &&
item.thdDataVOS[0].list.map((ss: any) => {
return ss.frequency + '次'
})
let aar: any = []
//y轴数据
item.thdDataVOS.map((vv: any) => {
item.echartsData.options.series.push({
name: vv.phase + '相',
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#00CC99'
// }e
},
data: vv.list.map((vvs: any) => {
aar.push(vvs.statisticalData)
return vvs.statisticalData
}),
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
})
//legend数据
item.echartsData.options.legend.data.push(vv.phase + '相')
})
let [min, max] = yMethod(aar)
item.echartsData.options.yAxis.max = max
item.echartsData.options.yAxis.min = min
})
return
params.value.list = []
searchForm.value.index.map((item: any) => {
params.value.list.push({ statisticalId: item })
})
//查询谐波频谱
// 查询谐波频谱
getDeviceHarmonicSpectrumData(params.value).then(res => {
res.data.length > 3 ? (height = mainHeight(275, 3).height) : (height = mainHeight(275, res.data.length).height)
chartsList.value = res.data
@@ -182,7 +404,7 @@ const init = () => {
right: '2%'
},
xAxis: {
name: '次数',
name: '时间',
data: [],
axisLine: {
show: true, //隐藏X轴轴线
@@ -264,7 +486,6 @@ const init = () => {
})
loading.value = false
})
return
}
watch(
() => searchForm.value.index,
@@ -279,7 +500,7 @@ watch(
}
)
onMounted(() => {})
defineExpose({ getHarmonicSpectrumParams })
defineExpose({ getHarmonicSpectrumParams, setHarmonicSpectrumData })
</script>
<style lang="scss" scoped>
.harmonic {

10
src/views/govern/device/control/tabs/components/recordwoves.vue
View File

@@ -1,8 +1,6 @@
<!-- 实时录波 -->
<template>
<div class="record">
实时录波
</div>
<div class="record">实时录波</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
@@ -11,9 +9,9 @@ onMounted(() => {
})
</script>
<style lang="scss" scoped>
.record{
width:100%;
height:100%;
.record {
width: 100%;
height: 100%;
border: 2px solid red;
}
</style>

2
src/views/govern/device/control/tabs/realtime.vue
View File

@@ -643,7 +643,7 @@ onMounted(() => {
}
.view_bot {
min-height: 300px;
margin: 10px 0 20px 0;
margin: 10px 0 0 0;
overflow: auto !important;
flex: 1 !important;
padding-bottom: 200px !important;

124
src/views/govern/device/control/tabs/trend.vue
View File

@@ -9,20 +9,43 @@
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="统计指标" label-width="80px">
<el-select multiple :multiple-limit="3" collapse-tags collapse-tags-tooltip
v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)">
<el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
<el-select
multiple
:multiple-limit="3"
collapse-tags
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
@change="onIndexChange($event)"
>
<el-option
v-for="item in indexOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<div v-for="(item, index) in countData" :key="index">
<el-form-item :label="item.name + '谐波次数'" v-if="item.countOptions.length != 0"
label-width="180px">
<el-select v-model="item.count" multiple collapse-tags collapse-tags-tooltip
@change="onCountChange($event, index)" placeholder="请选择谐波次数">
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
:value="vv"></el-option>
<el-form-item
:label="item.name + '谐波次数'"
v-if="item.countOptions.length != 0"
label-width="180px"
>
<el-select
v-model="item.count"
multiple
collapse-tags
collapse-tags-tooltip
@change="onCountChange($event, index)"
placeholder="请选择谐波次数"
>
<el-option
v-for="vv in item.countOptions"
:key="vv"
:label="vv"
:value="vv"
></el-option>
</el-select>
</el-form-item>
</div>
@@ -32,7 +55,6 @@
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
</template>
</TableHeader>
</div>
<div class="history_chart" :style="pageHeight" v-loading="loading">
<MyEchart ref="historyChart" :options="echartsData" />
@@ -192,14 +214,14 @@ const init = async () => {
let unitList: any = []
let groupedData = chartsList.reduce((acc, item) => {
let key = item.anotherName;
let key = item.anotherName
if (!acc[key]) {
acc[key] = [];
acc[key] = []
}
acc[key].push(item);
return acc;
acc[key].push(item)
return acc
}, {})
let result = Object.values(groupedData);
let result = Object.values(groupedData)
if (chartsList.length > 0) {
unitList = result.map((item: any) => {
return item[0].unit
@@ -208,7 +230,6 @@ const init = async () => {
echartsData.value = {
legend: {
itemWidth: 20,
itemHeight: 10,
itemGap: 15,
@@ -236,18 +257,15 @@ const init = async () => {
backgroundColor: 'rgba(0,0,0,0.35)',
borderWidth: 0,
formatter(params) {
const xname = params[0].value[0];
let str = `${xname}<br>`;
const xname = params[0].value[0]
let str = `${xname}<br>`
params.forEach((el, index) => {
str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value[1]}${el.value[2]}<br>`;
});
return str;
},
str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value[1]}${
el.value[2]
}<br>`
})
return str
}
},
color: ['#FFCC00', '#009900', '#CC0000', ...color],
xAxis: {
@@ -260,14 +278,10 @@ const init = async () => {
}
}
},
yAxis: [{
}],
yAxis: [{}],
options: {
series: [
]
series: []
}
}
if (chartsList.length > 0) {
@@ -275,7 +289,7 @@ const init = async () => {
unitList.forEach((item: any, index: any) => {
let right = {
position: 'right',
offset: (index - 1) * 80,
offset: (index - 1) * 80
}
echartsData.value.yAxis.push({
name: item,
@@ -283,8 +297,7 @@ const init = async () => {
splitNumber: 5,
minInterval: 1,
splitLine: {
show: false,
show: false
},
...(index > 0 ? right : null)
})
@@ -293,26 +306,26 @@ const init = async () => {
result.forEach((item: any, index: any) => {
let yMethodList: any = []
let ABCList = Object.values(item.reduce((acc, item) => {
let key = item.phase;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(item);
return acc;
}, {}));
ABCList.forEach((kk: any,) => {
let ABCList = Object.values(
item.reduce((acc, item) => {
let key = item.phase
if (!acc[key]) {
acc[key] = []
}
acc[key].push(item)
return acc
}, {})
)
ABCList.forEach((kk: any) => {
let seriesList: any = []
kk.forEach((cc: any) => {
if (cc.statisticalData) {
yMethodList.push(cc.statisticalData?.toFixed(2) - 0)
}
seriesList.push([cc.time, cc.statisticalData?.toFixed(2),cc.unit])
seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit])
})
echartsData.value.options.series.push({
name: kk[0].phase + '相' + item[0].anotherName,
type: 'line',
@@ -320,17 +333,11 @@ const init = async () => {
symbol: 'none',
data: seriesList,
yAxisIndex: index
})
})
let [min, max] = yMethod(yMethodList)
echartsData.value.yAxis[index].min = min
echartsData.value.yAxis[index].max = max
})
}
loading.value = false
@@ -350,7 +357,6 @@ const selectChange = (flag: boolean) => {
} else {
pageHeight.value = mainHeight(290)
}
}
//导出
const historyChart = ref()
@@ -521,7 +527,7 @@ const onCountChange = (val: any, index: any) => {
countData.value[index].count = [countData.value[index].countOptions[0]]
}
}
const onIndexChange = (val: any,) => {
const onIndexChange = (val: any) => {
if (val.length == 0) {
searchForm.value.index = [indexOptions.value[0].id]
}
@@ -551,7 +557,7 @@ watch(
}
)
// watch(
// () => trendRequestData.value,
// () => trendRequestData.value,
// (val: any, oldval: any) => {
// if (val) {
// init()