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-14 15:09:58 +08:00
parent 3e91dae797
commit 3fd897fca2
5 changed files with 223 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/cs-device-boot/EquipmentDelivery.ts
View File

@@ -34,13 +34,21 @@ export function getBasicRealData(id: any) {
}
/**** 获取谐波实时数据 ****/
export function getHarmRealData(target: any) {
export function getHarmRealData(id: any, target: any) {
return createAxios({
url: `/cs-harmonic-boot/realData/getHarmRealData?lineId=${id}&target=${target}`,
method: 'POST'
})
}
/**** 获取国标限值 ****/
export function getOverLimitData(id: any) {
return createAxios({
url: `/cs-device-boot/csline/getOverLimitData?id=${id}`,
method: 'POST'
})
}
//获取实时数据列表数据
export function getRealTimeTableList() {
return createAxios({

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

@@ -111,10 +111,10 @@
</el-form-item>
<el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
<el-button type="primary" v-if="realTimeFlag" :icon="DataLine" @click="handleHarmonicSpectrum">
实时趋势
谐波频谱
</el-button>
<el-button type="primary" v-if="realTimeFlag" :icon="TrendCharts" @click="handleTrend">
谐波频谱
实时趋势
</el-button>
</el-form>
<div
@@ -252,8 +252,8 @@
<el-button type="primary" :icon="Platform" @click="handleRecordWaves">
实时录波
</el-button>
<el-button type="primary" :icon="DataLine" @click="handleHarmonicSpectrum">实时趋势</el-button>
<el-button type="primary" :icon="TrendCharts" @click="handleTrend">谐波频谱</el-button>
<el-button type="primary" :icon="DataLine" @click="handleHarmonicSpectrum">谐波频谱</el-button>
<el-button type="primary" :icon="TrendCharts" @click="handleTrend">实时趋势</el-button>
</div> -->
<div class="view_top_btn" v-if="!realTimeFlag">
<el-button :icon="Back" @click="handleReturn">返回</el-button>
@@ -294,7 +294,13 @@ import Detail from './detail.vue'
import PointTree from '@/components/tree/govern/pointTree.vue'
import { mainHeight } from '@/utils/layout'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { getDeviceData, getTabsDataByType, getBasicRealData } from '@/api/cs-device-boot/EquipmentDelivery'
import {
getDeviceData,
getTabsDataByType,
getBasicRealData,
getHarmRealData,
getOverLimitData
} from '@/api/cs-device-boot/EquipmentDelivery'
import { deviceHisData, deviceRtData, getGroup } from '@/api/cs-device-boot/csGroup'
import { ref, reactive, nextTick, onMounted, watch, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
@@ -364,14 +370,30 @@ const handleRecordWaves = () => {
}
//实时趋势
const realTrendRef = ref()
//谐波频谱
const harmonicSpectrumRef = ref()
//实时趋势
const handleTrend = () => {
realTimeFlag.value = false
sonTab.value = 1
clearInterval(timer.value)
clearInterval(realDataTimer.value)
getHarmRealData(lineId.value, 0).then((res: any) => {
if (res.code == 'A0000') {
mqttRef.value.on('message', (topic: any, message: any) => {
// 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))))
realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
})
}
})
getOverLimitData(lineId.value).then((res: any) => {
console.log(res, '获取国标限制')
})
realTrendRef.value && realTrendRef.value.open({ devId: deviceId.value, lineId: lineId.value })
window.clearInterval(timer.value)
}
//谐波频谱
const harmonicSpectrumRef = ref()
const handleHarmonicSpectrum = () => {
realTimeFlag.value = false
sonTab.value = 2
@@ -576,22 +598,15 @@ const handleClick = async (tab?: any) => {
}
//查询实时数据
if (dataSet.value.includes('_realtimedata')) {
console.log(66666)
//查询实时数据显示实时录波、实时趋势、谐波频谱
realTimeFlag.value = true
let obj = {
type: 2,
dataLevel: formInline.dataLevel,
devId: deviceId.value, //e.id
lineId: lineId.value //e.pid
}
setTimeout(() => {
tableLoading.value = false
}, 1500)
//新的实时数据
//1.调用接口
getBasicRealData(lineId.value).then((res: any) => {
//1.调用接口 mqtt推送数据
await getBasicRealData(lineId.value).then((res: any) => {
console.log(res, '获取基础实时数据')
})
//2.建立mqtt通讯
@@ -617,7 +632,6 @@ const handleClick = async (tab?: any) => {
// 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))))
console.log(obj, '620=================>')
//处理mqtt数据 1转2除 2转1乘
//如果消息返回值是二次值，下拉框是二次值只需要单位换算 除以1000
//如果消息返回值是一次值，下拉框是一次值只需要单位换算 除以1000
@@ -825,31 +839,6 @@ queryByCode('Device_Type').then(res => {
const echoName = (value: any, arr: any[]) => {
return value ? arr.find(item => item.value == value).label : '/'
}
const openGroup = () => {
if (!dataSet.value) {
return ElMessage.warning('暂无数据')
}
getGroupLoading.value = true
getGroup(dataSet.value).then((res: any) => {
const call = (data: any[]) => {
data.forEach(item => {
item.label = item.name
item.isShow = item.isShow == 1
if (item.children && item.children.length > 0) {
call(item.children)
}
})
}
call(res.data)
getGroupLoading.value = false
mangePopup.value.open({
deviceData: deviceData.value,
dataSetName: deviceData.value.dataSetList.filter((item: any) => item.id == dataSet.value)[0]?.name,
dataSet: dataSet.value,
tree: res.data
})
})
}
onMounted(() => {})
onUnmounted(() => {

162
src/views/govern/device/control/tabs/components/realtrend.vue
View File

@@ -5,7 +5,7 @@
<el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
<div v-loading="loading">
<div class="realtrend_top">
<div class="thead">
<!-- <div class="thead">
<ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
<li>
{{ table[0].value }}
@@ -20,6 +20,33 @@
</li>
</span>
</ul>
</div> -->
<div class="realtrend_table">
<div class="thead_left">
<p>次数</p>
<p>{{ item.groupName }}</p>
</div>
<div class="thead_right">
<div class="right_cell" v-for="(value, key, index) in tableData" :key="index">
<p style="color: red; margin: 0 10px">
<span style="color: green">
{{ String(key).replace('data', ' ') }}
</span>
</p>
<p style="color: red; margin: 0 10px">
<span
v-if="
String(key).includes('data') &&
String(key) != 'dataLevel' &&
String(key) != 'dataTime'
"
style="color: green"
>
{{ value }}
</span>
</p>
</div>
</div>
</div>
</div>
<div class="tab_info">
@@ -150,7 +177,6 @@ const findRealTrendDataByGroupId = (obj: any) => {
item.unshift({ value: myColumns.value[index].title, count: '' })
})
newTableList.value = list
console.log("🚀 ~ getDeviceTrendData ~ newTableList.value:", newTableList.value)
loading.value = false
init()
})
@@ -184,13 +210,11 @@ const reverseTable = () => {
reverseTable()
const echartsData: any = ref([]),
barCharts = ref()
const echartsData: any = ref([])
const barCharts = 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, vvs: any) => {
@@ -294,7 +318,7 @@ const init = () => {
let list: any = []
list = []
chartsYxiasData.value.map((item: any) => {
console.log(item.gbList, 'guobialist340')
// console.log(item.gbList, 'guobialist340')
if (item.gbList.length != 0) {
list.push({ phase: item.phase, title: '国标限值', list: item.gbList })
}
@@ -319,9 +343,12 @@ const init = () => {
data: item.list
})
})
nextTick(() => {
barCharts.value && barCharts.value.initChart()
})
// nextTick(() => {
if (barCharts.value) {
console.log(barCharts.value, '+++++++++++++++++++#@!')
barCharts.value[activeName.value]?.initChart()
}
// })
return
}
@@ -330,8 +357,22 @@ const handleClick = (tab: any, event: any) => {
findRealTrendDataByGroupId(params.value)
init()
}
//获取mqtt传送的实时数据
const mqttMessage: any = ref()
const tableData: any = ref({})
const setRealTrendData = (val: any) => {
console.log(val, '7777777777773555')
mqttMessage.value = val
for (let key in val) {
if (String(key).includes('data') && String(key) != 'dataLevel' && String(key) != 'dataTime') {
console.log(val[key], '0000000')
tableData.value[key] = val[key]
}
}
console.log(tableData.value, 'kkkkjjjjjsssslllmmmmmssdddd')
}
onMounted(() => {})
defineExpose({ open })
defineExpose({ open, setRealTrendData })
</script>
<style lang="scss" scoped>
.realtrend {
@@ -345,42 +386,41 @@ defineExpose({ open })
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;
// .thead {
// height: 100%;
// // overflow-y: hidden;
// border: 1px solid #eee;
// border-right: 0;
// 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;
}
// li {
// flex: none;
// width: 100px;
// line-height: 40px;
// border: 1px solid #eee;
// text-align: center;
// list-style: none;
// }
li:nth-child(1) {
flex: none;
width: 200px;
}
// li:nth-child(1) {
// flex: none;
// width: 200px;
// }
// }
}
ul:nth-child(1) {
li {
font-weight: 800;
background: #f4f6f9;
}
}
ul:nth-child(4) {
height: 48px;
}
}
// ul:nth-child(1) {
// li {
// font-weight: 800;
// background: #f4f6f9;
// }
// }
// ul:nth-child(4) {
// height: 48px;
// }
// }
.table {
flex: 1;
@@ -419,6 +459,40 @@ defineExpose({ open })
// .table::-webkit-scrollbar {
// display: none;
// }
.realtrend_table {
width: 100%;
height: 100px;
display: flex;
border: 2px solid green;
.thead_left {
width: 120px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
line-height: 50px;
}
.thead_right {
flex: 1;
align-items: center;
overflow-x: auto;
border: 2px solid yellowgreen;
display: flex;
.right_cell {
width: 100%;
display: flex;
flex-direction: column;
p {
flex: none;
width: 40px;
height: 100%;
line-height: 50px;
}
}
}
}
}
}

1
src/views/govern/device/fileService/popup.vue
View File

@@ -60,6 +60,7 @@ const handleClose = () => {
//文件信息
const fileData: any = ref({})
const open = async (row: any, id: any) => {
status.value = 0
fileData.value = {}
dialogVisible.value = true
loading.value = true

122
src/views/govern/device/planData/index.vue
View File

@@ -421,7 +421,6 @@ const init = (flag: boolean) => {
dataLevel: searchForm.value.dataLevel,
valueType: searchForm.value.type
}
if (flag) {
loading.value = true
getHistoryTrend(obj)
@@ -429,27 +428,14 @@ const init = (flag: boolean) => {
if (res.code === 'A0000') {
historyDataList.value = res.data
let chartsList = JSON.parse(JSON.stringify(res.data))
echartsData.value = null
echartsData.value = {}
//icon图标替换legend图例
const iconThree =
'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z'
// let xAxis: any = [] //x轴数据数组
// let timeList: any = [] //x轴数据数组
// y轴单位数组
let unitList: any = []
let allUnitArray: any = []
chartsList.map((item: any) => {
// timeList.push(item.time)
// if (unitList.indexOf(item.unit) == -1) {
// unitList.push(item.unit)
// }
allUnitArray.push({ name: item.anotherName, unit: item.unit })
})
// xAxis = new Set(
// timeList.sort((a: any, b: any) => {
// return new Date(a).getTime() - new Date(b).getTime()
// })
// )
//去除重复的unit单位数据
unitList = allUnitArray.reduce((result: any, obj: any) => {
if (!result.some((item: any) => JSON.stringify(item) === JSON.stringify(obj))) {
@@ -594,7 +580,8 @@ const init = (flag: boolean) => {
}
},
splitNumber: 5,
minInterval: 1
minInterval: 1,
yAxisIndex: 0
}
],
series: []
@@ -602,55 +589,6 @@ const init = (flag: boolean) => {
}
echartsData.value.options.legend.data = []
list.map((item: any, index: any) => {
item.map((vv: any, indexs: any) => {
//处理legend
if (chartsList.length != 0) {
echartsData.value.options.legend.data.push({
name: vv.phase + '相' + vv.showName
// icon: iconThree
})
}
if (
unitList.findIndex((item: any) => {
return item.unit == vv.unit && item.name == vv.showName
}) != -1
) {
vv.yAxisIndex = unitList.findIndex((item: any) => {
return item.unit == vv.unit && item.name == vv.showName
})
} else {
vv.yAxisIndex = 0
}
echartsData.value.options.series.push({
name: vv.phase + '相' + vv.showName,
type: 'line',
smooth: true,
symbol: 'none',
emphasis: {
focus: 'series'
},
itemStyle: {},
//数据
data: filterArray(
chartsList
.map((kk: any, kks: any) => {
if (kk.statisticalName == vv.name) {
// xAxis[kks]
return [kk.time, kk.statisticalData]
} else {
return ''
}
})
.filter((kk: any) => kk !== '')
),
//数据对应的y轴
// yAxisIndex:0,
yAxisIndex: vv.yAxisIndex
})
})
})
//处理多y轴
// if (unitList.length != 0 && unitList.length > 1) {
// console.log(max, min)
@@ -694,6 +632,56 @@ const init = (flag: boolean) => {
}
})
// }
list.map((item: any, index: any) => {
console.log(item, '++++++++++++596')
item.map((vv: any, indexs: any) => {
//处理legend
if (chartsList.length != 0) {
echartsData.value.options.legend.data.push({
name: vv.phase + '相' + vv.showName
})
}
if (
unitList.findIndex((item: any) => {
return item.unit == vv.unit && item.name == vv.showName
}) != -1
) {
vv.yAxisIndex = unitList.findIndex((item: any) => {
return item.unit == vv.unit && item.name == vv.showName
})
} else {
vv.yAxisIndex = 0
}
console.log(vv, '<================>', vv.unit)
echartsData.value.options.series.push({
name: vv.phase + '相' + vv.showName,
type: 'line',
smooth: true,
symbol: 'none',
emphasis: {
focus: 'series'
},
itemStyle: {},
//数据
data: filterArray(
chartsList
.map((kk: any, kks: any) => {
if (kk.statisticalName == vv.name) {
// xAxis[kks]
return [kk.time, kk.statisticalData]
} else {
return ''
}
})
.filter((kk: any) => kk !== '')
),
//数据对应的y轴
yAxisIndex: vv.yAxisIndex
})
})
})
console.log(list, '6444和那个的哈哈哈哈呀哈哈哈哈哈哈哈哈哈哈哈')
//设置数据项颜色
echartsData.value.options.series.map((item: any, index: any) => {
item.itemStyle = {
@@ -706,6 +694,10 @@ const init = (flag: boolean) => {
}
// item.data = filterArray(item.data)
})
// echartsData.value.options.series = echartsData.value.options.series.sort((a: any, b: any) => {
// return a.yAxisIndex - b.yAxisIndex
// })
console.log(echartsData.value.options.series, '...............709')
loading.value = false
}
})