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-22 10:35:01 +08:00
parent 33a41b9d7a
commit bccf61c6d1
31 changed files with 180231 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,40 @@
<PointTree @node-click="nodeClick" @init="nodeClick"></PointTree>
<div class="device-control-right" v-if="deviceData">
<el-descriptions title="设备基本信息" class="mb10" :column="3" border>
<template #extra>
<el-button
v-if="dataSet.indexOf('_realtimedata') != -1"
size="small"
type="primary"
@click="handleDownLoad"
>
模版下载
</el-button>
<el-button
v-if="dataSet.indexOf('_realtimedata') != -1"
size="small"
type="primary"
@click="handleImport"
>
离线数据导入
</el-button>
<el-button
v-if="dataSet.indexOf('_realtimedata') != -1"
size="small"
type="primary"
@click="handleaddDevice"
>
设备补招
</el-button>
<el-button
v-if="dataSet.indexOf('_realtimedata') != -1"
size="small"
type="primary"
@click="handleImport"
>
解析列表
</el-button>
</template>
<el-descriptions-item label="名称">
{{ deviceData.name ? deviceData.name : '/' }}
</el-descriptions-item>
@@ -166,8 +200,28 @@
</div>
<!-- 实时数据 -->
<div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_realtimedata') != -1">
实时数据
<RealTime></RealTime>
<div class="view_top_btn" v-if="realTimeFlag">
<el-button type="primary" size="small" :icon="Platform" @click="handleRecordWaves">
实时录波
</el-button>
<el-button type="primary" size="small" :icon="TrendCharts" @click="handleTrend">
实时趋势
</el-button>
<el-button type="primary" size="small" :icon="DataLine" @click="handleHarmonicSpectrum">
谐波频谱
</el-button>
</div>
<div class="view_top_btn" v-if="!realTimeFlag">
<el-button type="primary" :icon="ArrowLeft" size="small" @click="handleReturn">返回</el-button>
</div>
<!-- 实时数据主界面组件 -->
<realTime v-if="realTimeFlag" ref="realTimeRef"></realTime>
<!-- 实时数据-实时录波组件 -->
<recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
<!-- 实时数据-实时趋势组件 -->
<realTrend v-if="!realTimeFlag && sonTab == 1"></realTrend>
<!-- 实时数据-谐波频谱组件 -->
<harmonicSpectrum v-if="!realTimeFlag && sonTab == 2"></harmonicSpectrum>
</div>
<!-- 暂态事件 -->
<div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_event') != -1">
@@ -175,19 +229,12 @@
<Event></Event>
</div>
<div v-if="!tableData" style="height: 42px"></div>
<!-- <el-tab-pane lazy label="趋势数据" name="0">
<div style="height:calc(100vh - 330px);overflow: auto;border:1px solid red;"></div>
</el-tab-pane>
<el-tab-pane lazy label="实时数据" name="1">
<div style="height:calc(100vh - 330px);overflow: auto;border:1px solid red;"></div>
</el-tab-pane>
<el-tab-pane lazy label="暂态事件" name="2">
<div style="height:calc(100vh - 330px);overflow: auto;border:1px solid red;"></div>
</el-tab-pane> -->
</el-tabs>
</div>
<el-empty v-else description="请选择设备" class="device-control-right" />
<Detail ref="detailRef" :detail="detail" @close="detail = null" v-if="detail"></Detail>
<!-- 离线数据导入组件 -->
<offLineDataImport ref="offLineDataImportRef"></offLineDataImport>
</div>
</template>
@@ -196,17 +243,22 @@ 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 } from '@/api/cs-device-boot/EquipmentDelivery'
import { deviceHisData, deviceRtData } from '@/api/cs-device-boot/csGroup'
import { getGroup } from '@/api/cs-device-boot/csGroup'
import { ref, reactive, nextTick, onMounted } from 'vue'
import { getDeviceData, getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
import { deviceHisData, deviceRtData, getGroup } from '@/api/cs-device-boot/csGroup'
import { ref, reactive, nextTick, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import DatePicker from '@/components/form/datePicker/index.vue'
import Trend from './tabs/trend.vue'
import RealTime from './tabs/realtime.vue'
import Trend from './tabs/trend.vue' //趋势数据
import realTime from './tabs/realtime.vue' //实时数据-主界面
import realTrend from './tabs/components/realtrend.vue' //实时数据-实时趋势
import harmonicSpectrum from './tabs/components/harmonicSpectrum.vue' //实时数据-谐波频谱子页面
import recordWoves from './tabs/components/recordwoves.vue' //实时数据-实时录波子页面
import offLineDataImport from './offLineDataImport/index.vue'
import Event from './tabs/event.vue'
import { useRouter } from 'vue-router'
import { defineConfig, loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import { Platform, TrendCharts, DataLine, ArrowLeft } from '@element-plus/icons-vue'
defineOptions({
name: 'govern/device/control'
})
@@ -238,6 +290,7 @@ const socket: any = ref(null)
const url = 'wss://your-websocket-url'
//连接websocket
const connectWebSocket = () => {
return
socket.value = new WebSocket(url)
socket.value.onopen = () => {
console.log('WebSocket connected')
@@ -269,7 +322,30 @@ const disconnectWebSocket = () => {
socket.value.close()
}
}
//是否显示实时数据默认内容
const realTimeFlag = ref(true)
//实时数据子菜单
const sonTab = ref()
//实时录波
const handleRecordWaves = () => {
realTimeFlag.value = false
sonTab.value = 0
}
//实时趋势
const handleTrend = () => {
realTimeFlag.value = false
sonTab.value = 1
}
//谐波频谱
const handleHarmonicSpectrum = () => {
realTimeFlag.value = false
sonTab.value = 2
}
//返回
const handleReturn = () => {
realTimeFlag.value = true
sonTab.value = null
}
const getDeviceDataTrend = (e: any) => {
detail.value = {
lineId: formInline.lineId,
@@ -285,18 +361,30 @@ const handleSizeChange = (val: number) => {
formInline.pageSize = val
handleClick()
}
const { push, options, currentRoute } = useRouter()
//设备补招
const handleaddDevice = () => {
push({
path: '/supplementaryRecruitment',
query: {
id: '1111'
}
})
}
//树节点点击事件
const deviceId: any = ref('')
const lineId: any = ref('')
const nodeClick = async (e: anyObj) => {
deviceId.value = e.pid
lineId.value = e.id
if (!e) {
loading.value = false
return
}
console.log(e, '监测点请求的判断')
if (e.level == 3) {
loading.value = true
formInline.lineId = e.id
await getDeviceData(e.pid, 'history', e.id).then((res: any) => {
console.log(res.data, '-------------')
deviceData.value = res.data
if (!res.data.dataSetList) {
dataSet.value = ''
@@ -330,40 +418,89 @@ const nodeClick = async (e: anyObj) => {
loading.value = false
}
}
const realTimeRef: any = ref()
const intRealTime = (val: any) => {
getTabsDataByType(val).then(res => {
realTimeRef.value && realTimeRef.value.getRealTimeData(res.data)
})
}
//tab点击事件
const handleClick = async (tab?: any) => {
tableLoading.value = true
//初始化点击tab隐藏实时录波、实时趋势、谐波频谱按钮
realTimeFlag.value = false
//初始化点击tab隐藏子页面
sonTab.value = null
if (tab) {
tableData.value = []
formInline.pageNum = 1
}
// setTimeout(() => {
//查询历史模块数据
// setTimeout(async () => {
//查询历史指标
if (dataSet.value.indexOf('_history') != -1) {
console.log('_history')
formInline.startTime = datePickerRef.value.timeValue[0]
formInline.endTime = datePickerRef.value.timeValue[1]
formInline.id = dataSet.value.replace('_history', '')
await deviceHisData(formInline).then((res: any) => {
console.log(res)
tableData.value = res.data.records
formInline.total = res.data.total
tableLoading.value = false
})
}
//查询数据趋势数据
console.log(dataSet.value.indexOf('_trenddata'), '-------')
//查询趋势数据
if (dataSet.value.indexOf('_trenddata') != -1) {
console.log(deviceData.value.dataSetList, '8888888888838838838')
console.log('_trenddata')
let obj = {
devId: deviceId.value, //e.id
lineId: lineId.value, //e.pid
type: 1,
list: [
{
lineId: lineId.value,
devId: dataSet.value.replace('_trenddata', '')
}
]
}
await getTabsDataByType(obj).then(res => {
console.log(res, '0000000')
})
}
//查询实时数据
if (dataSet.value.indexOf('_realtimedata') != -1) {
console.log('_realtimedata')
//查询实时数据显示实时录波、实时趋势、谐波频谱
realTimeFlag.value = true
let obj = {
type: 2,
devId: deviceId.value, //e.id
lineId: lineId.value //e.pid
}
intRealTime(obj)
await setTimeout(() => {
intRealTime(obj)
}, 20000)
}
//查询暂态事件
if (dataSet.value.indexOf('_event') != -1) {
console.log('_event')
} else {
let obj = {
devId: deviceId.value, //e.id
lineId: lineId.value, //e.pid
type: 3,
list: [
{
lineId: lineId.value,
devId: dataSet.value.replace('_event', '')
}
]
}
await getTabsDataByType(obj).then(res => {
console.log(res, '0000000')
})
}
//查询当前指标
console.log(dataSet.value.indexOf('_'), '查询当前指标')
if (dataSet.value.indexOf('_') == -1) {
formInline.id = dataSet.value
await deviceRtData(formInline).then((res: any) => {
tableData.value = res.data.records
@@ -373,6 +510,12 @@ const handleClick = async (tab?: any) => {
}
// }, 100)
}
//离线数据导入
const offLineDataImportRef = ref()
const handleImport = () => {
offLineDataImportRef.value && offLineDataImportRef.value.open()
}
queryByCode('Device_Type').then(res => {
queryCsDictTree(res.data.id).then(res => {
devTypeOptions.value = res.data.map((item: any) => {
@@ -421,6 +564,14 @@ const openGroup = () => {
})
})
}
watch(
() => dataSet.value,
(val: any, oldVal: any) => {
if (val) {
handleClick()
}
}
)
onMounted(() => {
connectWebSocket()
})
@@ -486,4 +637,12 @@ onMounted(() => {
}
}
}
.view_top_btn {
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: flex-end;
}
</style>