Web端添加治理模块状态展示界面、模块事件展示、主动询问模块状态功能
This commit is contained in:
guanj
@@ -121,8 +121,24 @@ export function getById(data?: any) {
|
||||
//测试项日志修改
|
||||
export function updateRecordData(data?: any) {
|
||||
return createAxios({
|
||||
url: 'cs-device-boot/wlRecord/updateRecordData',
|
||||
url: '/cs-device-boot/wlRecord/updateRecordData',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
//模块数据
|
||||
export function allModelData(data?: any) {
|
||||
return createAxios({
|
||||
url: '/cs-harmonic-boot/data/allModelData',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
//刷新状态
|
||||
export function getModuleState(data?: any) {
|
||||
return createAxios({
|
||||
url: '/cs-harmonic-boot/data/getModuleState',
|
||||
method: 'POST',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -51,13 +51,7 @@ const initChart = () => {
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
@@ -66,7 +60,7 @@ const initChart = () => {
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
confine: true,
|
||||
// confine: true,
|
||||
...(props.options?.tooltip || null)
|
||||
},
|
||||
toolbox: {
|
||||
@@ -109,6 +103,7 @@ const initChart = () => {
|
||||
type: 'inside',
|
||||
height: 13,
|
||||
start: 0,
|
||||
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
},
|
||||
@@ -117,7 +112,7 @@ const initChart = () => {
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
},
|
||||
}
|
||||
// {
|
||||
// show: true,
|
||||
// yAxisIndex: 0,
|
||||
|
||||
@@ -417,7 +417,7 @@ const setTime = (flag = 0, e = 0) => {
|
||||
|
||||
let data = ''
|
||||
|
||||
if ((dd < 4 || dd == 0) && interval.value != 4 && !props.theCurrentTime) {
|
||||
if ((dd < 2 || dd == 0) && interval.value != 4 && !props.theCurrentTime) {
|
||||
data = window.XEUtils.toDateString(new Date().getTime() - (e + dd) * 3600 * 1000 * 24, 'yyyy-MM-dd')
|
||||
} else {
|
||||
data = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'yyyy-MM-dd')
|
||||
|
||||
@@ -12,11 +12,9 @@ import { useDictData } from '@/stores/dictData'
|
||||
// const props = defineProps(['template'])
|
||||
interface Props {
|
||||
template?: boolean
|
||||
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
template: false,
|
||||
|
||||
template: false
|
||||
})
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
@@ -29,15 +27,11 @@ const dictData = useDictData()
|
||||
const treRef = ref()
|
||||
const width = ref('')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const info = () => {
|
||||
getLineTree().then(res => {
|
||||
tree.value = []
|
||||
let arr1: any[] = []
|
||||
let arr2: any[] = []
|
||||
getLineTree().then(res => {
|
||||
//治理设备
|
||||
res.data.map((item: any) => {
|
||||
if (item.name == '治理设备') {
|
||||
@@ -71,13 +65,15 @@ const info = () => {
|
||||
item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-Platform'
|
||||
item2.color = item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
item2.color =
|
||||
item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
arr2.push(item2)
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
tree.value = res.data
|
||||
|
||||
nextTick(() => {
|
||||
if (arr1.length) {
|
||||
//初始化选中
|
||||
@@ -98,7 +94,6 @@ const info = () => {
|
||||
// })
|
||||
// }
|
||||
else {
|
||||
|
||||
emit('init', arr2[0])
|
||||
}
|
||||
})
|
||||
@@ -108,17 +103,16 @@ const changePointType = (val: any, obj: any) => {
|
||||
emit('pointTypeChange', val, obj)
|
||||
}
|
||||
if (props.template) {
|
||||
getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
|
||||
getTemplateByDept({ id: dictData.state.area[0].id })
|
||||
.then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
info()
|
||||
|
||||
}).catch(err => {
|
||||
})
|
||||
.catch(err => {
|
||||
info()
|
||||
})
|
||||
} else {
|
||||
info()
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,16 @@
|
||||
<!-- 设备监控使用折叠面板渲染多个tree -->
|
||||
<template>
|
||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
|
||||
<Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse" style="cursor: pointer"
|
||||
v-if="route.path != '/admin/govern/reportCore/statistics/index'" />
|
||||
<Icon
|
||||
v-show="menuCollapse"
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
class="fold ml10 mt20 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
v-if="route.path != '/admin/govern/reportCore/statistics/index'"
|
||||
/>
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||
@@ -11,22 +18,43 @@
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
<Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
|
||||
<Icon
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
class="fold ml10 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'" />
|
||||
v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
|
||||
/>
|
||||
</div>
|
||||
<el-collapse :accordion="true" v-model.trim="activeName" style="flex: 1; height: 100%"
|
||||
@change="changeDevice">
|
||||
<el-collapse
|
||||
:accordion="true"
|
||||
v-model.trim="activeName"
|
||||
style="flex: 1; height: 100%"
|
||||
@change="changeDevice"
|
||||
>
|
||||
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
|
||||
<el-tree
|
||||
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
|
||||
ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
|
||||
node-key="id" default-expand-all v-bind="$attrs" :data="zlDeviceData" style="overflow: auto">
|
||||
ref="treeRef1"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
v-bind="$attrs"
|
||||
:data="zlDeviceData"
|
||||
style="overflow: auto"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
|
||||
v-if="data.icon" />
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
@@ -35,13 +63,24 @@
|
||||
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
|
||||
<el-tree
|
||||
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
|
||||
ref="treeRef2" :props="defaultProps" highlight-current default-expand-all
|
||||
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
|
||||
style="overflow: auto">
|
||||
ref="treeRef2"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
:data="bxsDeviceData"
|
||||
v-bind="$attrs"
|
||||
style="overflow: auto"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
|
||||
v-if="data.icon" />
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
/>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
@@ -97,12 +136,23 @@ watch(
|
||||
item.children.map((vv: any) => {
|
||||
zlDeviceData.value.push(vv)
|
||||
})
|
||||
// console.log('🚀 ~ item.children.map ~ zlDeviceData.value:', zlDeviceData.value)
|
||||
} else if (item.name == '便携式设备') {
|
||||
item.children.map((vv: any) => {
|
||||
bxsDeviceData.value.push(vv)
|
||||
})
|
||||
}
|
||||
})
|
||||
if (zlDeviceData.value.length != 0) {
|
||||
activeName.value = '0'
|
||||
}
|
||||
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
||||
activeName.value = '1'
|
||||
}
|
||||
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
||||
activeName.value = ''
|
||||
}
|
||||
changeDevice(activeName.value)
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -162,14 +212,12 @@ const filterNode = (value: string, data: any, node: any) => {
|
||||
if (!value) return true
|
||||
// return data.name.includes(value)
|
||||
if (data.name) {
|
||||
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
|
||||
const chooseNode = (value: string, data: any, node: any) => {
|
||||
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
@@ -200,18 +248,10 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
||||
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef1, treeRef2 })
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
if (zlDeviceData.value.length != 0) {
|
||||
activeName.value = '0'
|
||||
}
|
||||
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
||||
activeName.value = '1'
|
||||
}
|
||||
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
||||
activeName.value = ''
|
||||
}
|
||||
changeDevice(activeName.value)
|
||||
}, 500)
|
||||
// nextTick(() => {
|
||||
// // setTimeout(() => {
|
||||
// // }, 500)
|
||||
// })
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div class="default-main device-control" :style="{ height: pageHeight.height }" v-loading="loading"
|
||||
style="position: relative">
|
||||
<div
|
||||
class="default-main device-control"
|
||||
:style="{ height: pageHeight.height }"
|
||||
v-loading="loading"
|
||||
style="position: relative"
|
||||
>
|
||||
<!-- @init="nodeClick" -->
|
||||
<PointTree @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
|
||||
<div class="device-control-right" v-if="deviceData">
|
||||
@@ -15,23 +19,30 @@
|
||||
<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
|
||||
v-if="deviceType == '1'"
|
||||
type="primary"
|
||||
icon="el-icon-Tickets"
|
||||
@click="handleAnalysisList"
|
||||
>
|
||||
补召
|
||||
</el-button>
|
||||
</template>
|
||||
<el-descriptions-item label="名称">
|
||||
{{ devData.name || '/' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="测量间隔" width="160">
|
||||
{{ devData.lineInterval }}分钟
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级" width="160">
|
||||
{{ devData.volGrade }}kV
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="测量间隔" width="160">{{ devData.lineInterval }}分钟</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级" width="160">{{ devData.volGrade }}kV</el-descriptions-item>
|
||||
<el-descriptions-item label="接线方式" width="160">
|
||||
{{ devData.conType == 0 ? '星型接线' : devData.conType == 1 ? '角型接线' : devData.conType == 2 ? 'V型接线' :
|
||||
'/' }}
|
||||
{{
|
||||
devData.conType == 0
|
||||
? '星型接线'
|
||||
: devData.conType == 1
|
||||
? '角型接线'
|
||||
: devData.conType == 2
|
||||
? 'V型接线'
|
||||
: '/'
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
|
||||
<!-- <el-descriptions-item label="安装位置" width="160">
|
||||
@@ -45,7 +56,6 @@
|
||||
{{ devData.ctRatio || '/' }}
|
||||
</el-descriptions-item>
|
||||
|
||||
|
||||
<!-- <el-descriptions-item label="名称">
|
||||
{{ devData.name ? devData.name : '/' }}
|
||||
</el-descriptions-item>
|
||||
@@ -67,8 +77,13 @@
|
||||
</el-descriptions-item> -->
|
||||
</el-descriptions>
|
||||
<el-tabs v-model.trim="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
|
||||
<el-tab-pane lazy :label="item.name" :name="item.id" v-for="(item, index) in deviceData.dataSetList"
|
||||
:key="index">
|
||||
<el-tab-pane
|
||||
lazy
|
||||
:label="item.name"
|
||||
:name="item.id"
|
||||
v-for="(item, index) in deviceData.dataSetList"
|
||||
:key="index"
|
||||
>
|
||||
<template #label>
|
||||
<span class="custom-tabs-label">
|
||||
<el-icon>
|
||||
@@ -77,42 +92,59 @@
|
||||
<DataAnalysis v-if="item.name.includes('趋势数据')" />
|
||||
<Timer v-if="item.name.includes('实时数据')" />
|
||||
<Monitor v-if="item.name.includes('暂态事件')" />
|
||||
<Odometer v-if="
|
||||
<Odometer
|
||||
v-if="
|
||||
item.name != 'APF模块数据' &&
|
||||
item.name != '历史APF模块数据' &&
|
||||
!item.name.includes('历史监测') &&
|
||||
!item.name.includes('趋势数据') &&
|
||||
!item.name.includes('实时数据') &&
|
||||
!item.name.includes('暂态事件')
|
||||
" />
|
||||
<Histogram v-if="
|
||||
"
|
||||
/>
|
||||
<Histogram
|
||||
v-if="
|
||||
item.name != 'APF模块数据' &&
|
||||
item.name != '历史APF模块数据' &&
|
||||
item.name.includes('历史监测') &&
|
||||
!item.name.includes('趋势数据') &&
|
||||
!item.name.includes('实时数据') &&
|
||||
!item.name.includes('暂态事件')
|
||||
" />
|
||||
"
|
||||
/>
|
||||
</el-icon>
|
||||
<span>{{ item.name }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
<TableHeader :showSearch="false" v-if="
|
||||
<TableHeader
|
||||
:showSearch="false"
|
||||
v-if="
|
||||
(dataSet.indexOf('_trenddata') == -1 &&
|
||||
dataSet.indexOf('_realtimedata') == -1 &&
|
||||
dataSet.indexOf('_event') == -1) ||
|
||||
realTimeFlag
|
||||
">
|
||||
"
|
||||
>
|
||||
<template #select>
|
||||
<el-form-item label="日期"
|
||||
v-show="dataSet.includes('_items') || dataSet.indexOf('_history') != -1">
|
||||
<el-form-item
|
||||
label="日期"
|
||||
v-show="
|
||||
dataSet.includes('_items') ||
|
||||
dataSet.indexOf('_history') != -1 ||
|
||||
dataSet.indexOf('_moduleData') != -1
|
||||
"
|
||||
>
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据类型" v-if="!dataSet.includes('_')">
|
||||
<el-select v-model.trim="formInline.targetType" @change="handleTargetTypeChange">
|
||||
<el-option v-for="item in queryList" :key="item.id" :label="item.name"
|
||||
:value="item.id" />
|
||||
<el-option
|
||||
v-for="item in queryList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
@@ -122,58 +154,106 @@
|
||||
<el-option value="Primary" label="一次值"></el-option>
|
||||
<el-option value="Secondary" label="二次值"></el-option>
|
||||
</el-select> -->
|
||||
<el-radio-group v-model.trim="formInline.dataLevel" :disabled="TrendList?.lineType != 1"
|
||||
@change="handleClick">
|
||||
<el-radio-group
|
||||
v-model.trim="formInline.dataLevel"
|
||||
v-if="!dataSet.includes('_moduleData')"
|
||||
:disabled="TrendList?.lineType != 1"
|
||||
@change="handleClick"
|
||||
>
|
||||
<el-radio-button label="一次值" value="Primary" />
|
||||
<el-radio-button label="二次值" value="Secondary" />
|
||||
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="谐波次数" v-show="oddAndEvenFlag && !dataSet.includes('_')">
|
||||
<el-select v-model.trim="oddAndEven" style="min-width: 120px !important">
|
||||
<el-option v-for="item in oddAndEvenList" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
<el-option
|
||||
v-for="item in oddAndEvenList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据来源" v-if="dataSet.includes('_items')">
|
||||
<el-select v-model.trim="formInline.dataSource" placeholder="请选择数据来源" clearable>
|
||||
|
||||
<el-option v-for="item in dataSourceList" :key="item.id" :label="item.name"
|
||||
:value="item.id" />
|
||||
<el-option
|
||||
v-for="item in dataSourceList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键字筛选" v-if="!dataSet.includes('_')">
|
||||
<el-input maxlength="32" show-word-limit v-model.trim="searchValue" autocomplete="off"
|
||||
clearable @input="handleSearch" placeholder="请输入关键字筛选"
|
||||
style="width: 180px !important"></el-input>
|
||||
<el-input
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
v-model.trim="searchValue"
|
||||
autocomplete="off"
|
||||
clearable
|
||||
@input="handleSearch"
|
||||
placeholder="请输入关键字筛选"
|
||||
style="width: 180px !important"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button type="primary"
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="dataSet.indexOf('_realtimedata') != -1 ? 'el-icon-Refresh' : 'el-icon-Search'"
|
||||
@click="handleClick">{{ dataSet.indexOf('_realtimedata') != -1 ? '刷新' : '查询' }}</el-button>
|
||||
<el-button type="primary" :disabled="tableLoading" v-if="realTimeFlag" :icon="DataLine"
|
||||
@click="handleTrend">
|
||||
@click="handleClick"
|
||||
>
|
||||
{{ dataSet.indexOf('_realtimedata') != -1 ? '刷新' : '查询' }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
v-if="dataSet.indexOf('_moduleData') != -1"
|
||||
:icon="Refresh"
|
||||
@click="refreshTheState"
|
||||
>
|
||||
刷新状态
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="tableLoading"
|
||||
v-if="realTimeFlag"
|
||||
:icon="DataLine"
|
||||
@click="handleTrend"
|
||||
>
|
||||
谐波频谱
|
||||
</el-button>
|
||||
<el-button type="primary" v-if="realTimeFlag" :icon="TrendCharts"
|
||||
@click="handleHarmonicSpectrum" :disabled="tableLoading">
|
||||
<el-button
|
||||
type="primary"
|
||||
v-if="realTimeFlag"
|
||||
:icon="TrendCharts"
|
||||
@click="handleHarmonicSpectrum"
|
||||
:disabled="tableLoading"
|
||||
>
|
||||
实时趋势
|
||||
</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div class="data_time" :style="{
|
||||
<div
|
||||
class="data_time"
|
||||
:style="{
|
||||
height: realTimeFlag ? '30px' : '40px',
|
||||
alignItems: realTimeFlag ? 'flex-end' : 'center'
|
||||
}" v-if="dataSet.includes('_realtimedata') && mqttMessage && mqttMessage.dataTime && sonTab != 2">
|
||||
}"
|
||||
v-if="dataSet.includes('_realtimedata') && mqttMessage && mqttMessage.dataTime && sonTab != 2"
|
||||
>
|
||||
<p class="mb5">
|
||||
<span v-if="trendDataTime && !realTimeFlag">数据时间：{{ trendDataTime }}</span>
|
||||
<span v-if="realTimeFlag">数据时间：{{ mqttMessage.dataTime }}</span>
|
||||
</p>
|
||||
|
||||
<el-button v-if="!realTimeFlag && dataSet.includes('_realtimedata')" style="float: right !important"
|
||||
:icon="Back" @click="handleReturn" :loading="tableLoading">
|
||||
<el-button
|
||||
v-if="!realTimeFlag && dataSet.includes('_realtimedata')"
|
||||
style="float: right !important"
|
||||
:icon="Back"
|
||||
@click="handleReturn"
|
||||
:loading="tableLoading"
|
||||
>
|
||||
返回
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -189,33 +269,51 @@
|
||||
></div> -->
|
||||
<!-- v-loading="tableLoading" -->
|
||||
<div :style="{ height: tableHeight }" v-loading="tableLoading" v-if="!dataSet.includes('_')">
|
||||
<div style="overflow: auto" :style="{ height: tableHeight }" v-if="
|
||||
<div
|
||||
style="overflow: auto"
|
||||
:style="{ height: tableHeight }"
|
||||
v-if="
|
||||
dataSet.indexOf('_trenddata') == -1 &&
|
||||
dataSet.indexOf('_realtimedata') == -1 &&
|
||||
dataSet.indexOf('_event') == -1 &&
|
||||
tableData.length != 0
|
||||
">
|
||||
<div class="mb5 mt5" v-if="dataSet.indexOf('_history') == -1"
|
||||
style="font-weight: 800;font-size: 16px;text-align: center">
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="mb5 mt5"
|
||||
v-if="dataSet.indexOf('_history') == -1"
|
||||
style="font-weight: 800; font-size: 16px; text-align: center"
|
||||
>
|
||||
统计时间：{{ tableData[0]?.time || '' }}
|
||||
</div>
|
||||
|
||||
<nearRealTimeData ref="nearRealTimeDataRef" v-if="dataSet.indexOf('_history') == -1"
|
||||
:style="{ height: tableHeightBox, overflow: 'auto' }" />
|
||||
|
||||
<nearRealTimeData
|
||||
ref="nearRealTimeDataRef"
|
||||
v-if="dataSet.indexOf('_history') == -1"
|
||||
:style="{ height: tableHeightBox, overflow: 'auto' }"
|
||||
/>
|
||||
|
||||
<!-- 循环渲染的card 最新数据/历史数据显示 -->
|
||||
<div class="content"
|
||||
<div
|
||||
class="content"
|
||||
v-if="tableData.length != 0 && !tableLoading && dataSet.indexOf('_history') != -1"
|
||||
:style="{ height: tableHeightBox }">
|
||||
|
||||
<el-card class="box-card" :class="dataSet.indexOf('_history') == -1 ? 'box-card-new' : ''"
|
||||
v-for="(item, index) in tableData" :key="index">
|
||||
:style="{ height: tableHeightBox }"
|
||||
>
|
||||
<el-card
|
||||
class="box-card"
|
||||
:class="dataSet.indexOf('_history') == -1 ? 'box-card-new' : ''"
|
||||
v-for="(item, index) in tableData"
|
||||
:key="index"
|
||||
>
|
||||
<template #header>
|
||||
<div class="clearfix">
|
||||
<span style="flex: 1">{{ item.name }}</span>
|
||||
<Icon name="el-icon-TrendCharts" class="ml10" @click="getDeviceDataTrend(item)"
|
||||
style="font-size: 26px; cursor: pointer; color: #fff"></Icon>
|
||||
<Icon
|
||||
name="el-icon-TrendCharts"
|
||||
class="ml10"
|
||||
@click="getDeviceDataTrend(item)"
|
||||
style="font-size: 26px; cursor: pointer; color: #fff"
|
||||
></Icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -229,8 +327,12 @@
|
||||
</div>
|
||||
<div v-else-if="item.children.length" class="box-card-div">
|
||||
<div style="display: flex; align-items: center">
|
||||
<el-tag effect="dark" type="danger" style="width: 40px; text-align: center"
|
||||
class="mr10">
|
||||
<el-tag
|
||||
effect="dark"
|
||||
type="danger"
|
||||
style="width: 40px; text-align: center"
|
||||
class="mr10"
|
||||
>
|
||||
MAX
|
||||
</el-tag>
|
||||
{{
|
||||
@@ -241,8 +343,12 @@
|
||||
}}
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<el-tag effect="dark" type="success" style="width: 40px; text-align: center"
|
||||
class="mr10">
|
||||
<el-tag
|
||||
effect="dark"
|
||||
type="success"
|
||||
style="width: 40px; text-align: center"
|
||||
class="mr10"
|
||||
>
|
||||
AVG
|
||||
</el-tag>
|
||||
{{
|
||||
@@ -253,8 +359,12 @@
|
||||
}}
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<el-tag effect="dark" type="warning" style="width: 40px; text-align: center"
|
||||
class="mr10">
|
||||
<el-tag
|
||||
effect="dark"
|
||||
type="warning"
|
||||
style="width: 40px; text-align: center"
|
||||
class="mr10"
|
||||
>
|
||||
MIN
|
||||
</el-tag>
|
||||
{{
|
||||
@@ -350,15 +460,20 @@
|
||||
<Trend ref="trendRef" :TrendList="TrendList"></Trend>
|
||||
</div>
|
||||
<!-- 实时数据 -->
|
||||
<div :style="`height: calc(100vh - (${sonTab == 1 ? '378px' : sonTab == 2 ? '340px' : '425px'}))`"
|
||||
v-if="dataSet.indexOf('_realtimedata') != -1" v-loading="tableLoading">
|
||||
<div
|
||||
:style="`height: calc(100vh - (${sonTab == 1 ? '378px' : sonTab == 2 ? '340px' : '425px'}))`"
|
||||
v-if="dataSet.indexOf('_realtimedata') != -1"
|
||||
v-loading="tableLoading"
|
||||
>
|
||||
<!-- <div class="view_top_btn" v-if="realTimeFlag">
|
||||
<el-button type="primary" :icon="Platform" @click="handleRecordWaves">
|
||||
实时录波
|
||||
</el-button>
|
||||
</div> -->
|
||||
<div class="view_top_btn"
|
||||
v-if="dataSet.includes('_realtimedata') && !realTimeFlag && mqttMessage.dataTime && sonTab == 2">
|
||||
<div
|
||||
class="view_top_btn"
|
||||
v-if="dataSet.includes('_realtimedata') && !realTimeFlag && mqttMessage.dataTime && sonTab == 2"
|
||||
>
|
||||
<el-button :icon="Back" @click="handleReturn" :loading="tableLoading">返回</el-button>
|
||||
</div>
|
||||
<!-- 实时数据主界面组件 -->
|
||||
@@ -366,23 +481,41 @@
|
||||
<!-- 实时数据-实时录波组件 -->
|
||||
<recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
|
||||
<!-- 实时数据-实时趋势组件 -->
|
||||
<realTrend v-if="!realTimeFlag && sonTab == 1" ref="realTrendRef"
|
||||
@changeTrendType="changeTrendType">
|
||||
</realTrend>
|
||||
<realTrend
|
||||
v-if="!realTimeFlag && sonTab == 1"
|
||||
ref="realTrendRef"
|
||||
@changeTrendType="changeTrendType"
|
||||
></realTrend>
|
||||
<!-- 实时数据-谐波频谱组件 -->
|
||||
<harmonicSpectrum v-show="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef">
|
||||
</harmonicSpectrum>
|
||||
<harmonicSpectrum
|
||||
v-show="!realTimeFlag && sonTab == 2"
|
||||
ref="harmonicSpectrumRef"
|
||||
></harmonicSpectrum>
|
||||
</div>
|
||||
<!-- 暂态事件 -->
|
||||
<div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_event') != -1"
|
||||
v-loading="tableLoading">
|
||||
<div
|
||||
style="height: calc(100vh - 340px)"
|
||||
v-if="dataSet.indexOf('_event') != -1"
|
||||
v-loading="tableLoading"
|
||||
>
|
||||
<Event ref="eventRef"></Event>
|
||||
</div>
|
||||
<!-- 测试项记录 -->
|
||||
<div style="height: calc(100vh - 395px)" v-if="dataSet.indexOf('_items') != -1"
|
||||
v-loading="tableLoading">
|
||||
<div
|
||||
style="height: calc(100vh - 395px)"
|
||||
v-if="dataSet.indexOf('_items') != -1"
|
||||
v-loading="tableLoading"
|
||||
>
|
||||
<testItemRecords ref="testItemRecordsRef" @onSubmit="handleClick" />
|
||||
</div>
|
||||
<!-- 模块数据 -->
|
||||
<div
|
||||
style="height: calc(100vh - 395px)"
|
||||
v-if="dataSet.indexOf('_moduleData') != -1"
|
||||
v-loading="tableLoading"
|
||||
>
|
||||
<moduleData ref="moduleDataRef" @onSubmit="handleClick" />
|
||||
</div>
|
||||
<div v-if="!tableData" style="height: 42px"></div>
|
||||
</el-tabs>
|
||||
</div>
|
||||
@@ -405,8 +538,8 @@ import {
|
||||
getHarmRealData,
|
||||
getOverLimitData,
|
||||
queryDictType,
|
||||
getById
|
||||
|
||||
getById,
|
||||
allModelData
|
||||
} from '@/api/cs-device-boot/EquipmentDelivery'
|
||||
import { deviceHisData, deviceRtData, realTimeData, getTestData } from '@/api/cs-device-boot/csGroup'
|
||||
import { ref, reactive, onMounted, onUnmounted, inject, nextTick, onBeforeUnmount } from 'vue'
|
||||
@@ -421,11 +554,12 @@ import offLineDataImport from './offLineDataImport/index.vue'
|
||||
import Event from './tabs/event.vue'
|
||||
import nearRealTimeData from './nearRealTimeData.vue'
|
||||
import testItemRecords from './testItemRecords.vue'
|
||||
import moduleData from './moduleData.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { useRouter } from 'vue-router'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { Histogram, TrendCharts, DataLine, DataAnalysis, Odometer, Monitor, Timer, Back } from '@element-plus/icons-vue'
|
||||
import { Histogram, TrendCharts, DataLine, DataAnalysis, Odometer, Monitor, Timer, Back ,Refresh} from '@element-plus/icons-vue'
|
||||
import analysisList from './analysisList/index.vue'
|
||||
import mqtt from 'mqtt'
|
||||
defineOptions({
|
||||
@@ -439,6 +573,7 @@ const getGroupLoading = ref(false)
|
||||
const deviceData = ref<any>(null)
|
||||
const dataSet = ref('')
|
||||
const testItemRecordsRef = ref()
|
||||
const moduleDataRef = ref()
|
||||
const nearRealTimeDataRef = ref()
|
||||
const devTypeOptions = ref([])
|
||||
const devModelOptions = ref([])
|
||||
@@ -464,28 +599,29 @@ const formInline = reactive({
|
||||
dataLevel: 'Secondary'
|
||||
})
|
||||
|
||||
const dataSourceList = [{
|
||||
const dataSourceList = [
|
||||
{
|
||||
id: '0',
|
||||
name: '补召'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
name: '在线监测'
|
||||
}]
|
||||
}
|
||||
]
|
||||
const oddAndEvenList = [
|
||||
{
|
||||
value: '3',
|
||||
label: '全部',
|
||||
label: '全部'
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '奇次',
|
||||
label: '奇次'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '偶次',
|
||||
},
|
||||
|
||||
|
||||
label: '偶次'
|
||||
}
|
||||
]
|
||||
const detail = ref<any>(null)
|
||||
//是否显示实时数据默认内容
|
||||
@@ -634,15 +770,14 @@ const handleSearch = () => {
|
||||
})
|
||||
if (oddAndEvenFlag.value) {
|
||||
list = list.filter((item: any) => {
|
||||
let str = item.otherName.split("次")[0]
|
||||
queryListName[0].name == '间谐波电压含有率' ? str = str - 0.5 : ''
|
||||
let str = item.otherName.split('次')[0]
|
||||
queryListName[0].name == '间谐波电压含有率' ? (str = str - 0.5) : ''
|
||||
|
||||
if (oddAndEven.value == '1') {
|
||||
// 奇次
|
||||
if (str % 2 != 0) {
|
||||
return item
|
||||
}
|
||||
|
||||
} else if (oddAndEven.value == '2') {
|
||||
// 偶次
|
||||
if (str % 2 == 0) {
|
||||
@@ -651,14 +786,10 @@ const handleSearch = () => {
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
nearRealTimeDataRef.value?.setData(list, queryListName)
|
||||
|
||||
}
|
||||
|
||||
const getDeviceDataTrend = (e: any) => {
|
||||
@@ -696,15 +827,11 @@ const lineId: any = ref('')
|
||||
const dataLevel: any = ref('')
|
||||
const dataSource = ref([])
|
||||
const nodeClick = async (e: anyObj) => {
|
||||
// console.log("🚀 ~ nodeClick ~ e:", e)
|
||||
|
||||
|
||||
if (e == undefined || e.level == 2) {
|
||||
return loading.value = false
|
||||
return (loading.value = false)
|
||||
}
|
||||
searchValue.value = ''
|
||||
|
||||
|
||||
deviceId.value = e?.pid
|
||||
lineId.value = e?.id
|
||||
TrendList.value = e
|
||||
@@ -729,7 +856,6 @@ const nodeClick = async (e: anyObj) => {
|
||||
await getDeviceData(e.level == 3 ? e.pid : e.id, 'history', e.level == 3 ? e.id : e.children[0].id)
|
||||
.then((res: any) => {
|
||||
getById({ lineId: e.level == 3 ? e.id : e.children[0].id }).then((res: any) => {
|
||||
|
||||
devData.value = res.data
|
||||
})
|
||||
|
||||
@@ -744,7 +870,6 @@ const nodeClick = async (e: anyObj) => {
|
||||
tableData.value = []
|
||||
loading.value = false
|
||||
} else {
|
||||
|
||||
res.data.dataSetList.forEach((item: any) => {
|
||||
//历史
|
||||
if (item.type === 'history') {
|
||||
@@ -766,6 +891,10 @@ const nodeClick = async (e: anyObj) => {
|
||||
if (item.type === 'items') {
|
||||
item.id = item.id + '_items'
|
||||
}
|
||||
// 模块数据
|
||||
if (item.type === 'moduleData') {
|
||||
item.id = item.id + '_moduleData'
|
||||
}
|
||||
})
|
||||
res.data.dataSetList = res.data.dataSetList.filter((item: any) => item.name != '历史统计数据')
|
||||
//便携式设备默认二次值
|
||||
@@ -813,7 +942,6 @@ const connectMqtt = () => {
|
||||
password: 'njcnpqs'
|
||||
}
|
||||
|
||||
|
||||
mqttRef.value = mqtt.connect(url, options)
|
||||
}
|
||||
const getRealDataMqttMsg = async () => {
|
||||
@@ -826,7 +954,8 @@ const getRealDataMqttMsg = async () => {
|
||||
}
|
||||
//新的实时数据
|
||||
//1.调用接口 mqtt推送数据
|
||||
await getBasicRealData(lineId.value).then((res: any) => {
|
||||
await getBasicRealData(lineId.value)
|
||||
.then((res: any) => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('装置应答成功')
|
||||
mqttMessage.value = {}
|
||||
@@ -855,7 +984,7 @@ const getRealDataMqttMsg = async () => {
|
||||
obj = {
|
||||
...obj,
|
||||
// 电压有效值
|
||||
vRmsA: (obj.vRmsA) / 1000,
|
||||
vRmsA: obj.vRmsA / 1000,
|
||||
vRmsB: obj.vRmsB / 1000,
|
||||
vRmsC: obj.vRmsC / 1000,
|
||||
//基波电压幅值
|
||||
@@ -884,36 +1013,36 @@ const getRealDataMqttMsg = async () => {
|
||||
obj = {
|
||||
...obj,
|
||||
// 电压有效值
|
||||
vRmsA: ((obj.vRmsA * obj.pt)) / 1000,
|
||||
vRmsB: ((obj.vRmsB * obj.pt)) / 1000,
|
||||
vRmsC: ((obj.vRmsC * obj.pt)) / 1000,
|
||||
vRmsA: (obj.vRmsA * obj.pt) / 1000,
|
||||
vRmsB: (obj.vRmsB * obj.pt) / 1000,
|
||||
vRmsC: (obj.vRmsC * obj.pt) / 1000,
|
||||
// 电流有效值
|
||||
iRmsA: (obj.iRmsA * obj.ct),
|
||||
iRmsB: (obj.iRmsB * obj.ct),
|
||||
iRmsC: (obj.iRmsC * obj.ct),
|
||||
iRmsA: obj.iRmsA * obj.ct,
|
||||
iRmsB: obj.iRmsB * obj.ct,
|
||||
iRmsC: obj.iRmsC * obj.ct,
|
||||
//基波电压幅值
|
||||
v1A: ((obj.v1A * obj.pt)) / 1000,
|
||||
v1B: ((obj.v1B * obj.pt)) / 1000,
|
||||
v1C: ((obj.v1C * obj.pt)) / 1000,
|
||||
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),
|
||||
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,
|
||||
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,
|
||||
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
|
||||
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
|
||||
@@ -973,7 +1102,6 @@ const getRealDataMqttMsg = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//更新谐波频谱数据
|
||||
// !realTimeFlag.value &&
|
||||
// sonTab.value == 1 &&
|
||||
@@ -995,7 +1123,8 @@ const getRealDataMqttMsg = async () => {
|
||||
ElMessage.success('装置应答失败')
|
||||
tableLoading.value = false
|
||||
}
|
||||
}).catch(e => {
|
||||
})
|
||||
.catch(e => {
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 0)
|
||||
@@ -1111,11 +1240,11 @@ const handleClick = async (tab?: any) => {
|
||||
tableData.value = res.data
|
||||
formInline.total = res.data.total
|
||||
tableLoading.value = false
|
||||
setTimeout(() => { //targetType
|
||||
testItemRecordsRef.value?.setData(res.data,)
|
||||
setTimeout(() => {
|
||||
//targetType
|
||||
testItemRecordsRef.value?.setData(res.data)
|
||||
}, 500)
|
||||
setTimeout(() => {
|
||||
|
||||
loading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
@@ -1126,7 +1255,36 @@ const handleClick = async (tab?: any) => {
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
|
||||
//模块数据
|
||||
if (dataSet.value.includes('_moduleData')) {
|
||||
;(await datePickerRef.value) && datePickerRef.value?.setInterval(5)
|
||||
let obj = {
|
||||
// devId: deviceId.value, //e.id
|
||||
lineId: lineId.value, //e.pid
|
||||
startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
|
||||
endTime: datePickerRef.value && datePickerRef.value.timeValue[1]
|
||||
}
|
||||
await setTimeout(() => {
|
||||
allModelData(obj)
|
||||
.then((res: any) => {
|
||||
tableData.value = res.data
|
||||
formInline.total = res.data.total
|
||||
tableLoading.value = false
|
||||
setTimeout(() => {
|
||||
//targetType
|
||||
moduleDataRef.value?.setData(res.data)
|
||||
}, 500)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
.catch(e => {
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
|
||||
//查询当前指标
|
||||
if (!dataSet.value.includes('_')) {
|
||||
@@ -1144,15 +1302,14 @@ const handleClick = async (tab?: any) => {
|
||||
})
|
||||
if (oddAndEvenFlag.value) {
|
||||
list = list.filter((item: any) => {
|
||||
let str = item.otherName.split("次")[0]
|
||||
queryListName[0].name == '间谐波电压含有率' ? str = str - 0.5 : ''
|
||||
let str = item.otherName.split('次')[0]
|
||||
queryListName[0].name == '间谐波电压含有率' ? (str = str - 0.5) : ''
|
||||
|
||||
if (oddAndEven.value == '1') {
|
||||
// 奇次
|
||||
if (str % 2 != 0) {
|
||||
return item
|
||||
}
|
||||
|
||||
} else if (oddAndEven.value == '2') {
|
||||
// 偶次
|
||||
if (str % 2 == 0) {
|
||||
@@ -1161,12 +1318,11 @@ const handleClick = async (tab?: any) => {
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
setTimeout(() => { //targetType
|
||||
setTimeout(() => {
|
||||
//targetType
|
||||
nearRealTimeDataRef.value?.setData(list, queryListName)
|
||||
tableLoading.value = false
|
||||
}, 500)
|
||||
@@ -1193,16 +1349,22 @@ const handleClick = async (tab?: any) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
// 刷新状态
|
||||
const refreshTheState = () => {
|
||||
|
||||
moduleDataRef.value.getModule(deviceData.value.ndid)
|
||||
}
|
||||
//模版下载
|
||||
const handleDownLoadTemplate = () => {}
|
||||
//补召日志
|
||||
const analysisListRef = ref()
|
||||
//打开补召日志
|
||||
const handleAnalysisList = () => {
|
||||
analysisListRef.value && analysisListRef.value.open({
|
||||
analysisListRef.value &&
|
||||
analysisListRef.value.open({
|
||||
lineId: lineId.value,
|
||||
deviceData: deviceData.value,
|
||||
deviceId: deviceId.value,
|
||||
deviceId: deviceId.value
|
||||
})
|
||||
}
|
||||
//离线数据导入
|
||||
@@ -1232,7 +1394,6 @@ queryByCode('Device_Type').then(res => {
|
||||
})
|
||||
})
|
||||
const handleTargetTypeChange = () => {
|
||||
|
||||
if (queryList.value.filter((item: any) => item.id == formInline.targetType)[0].name != '基本数据') {
|
||||
oddAndEvenFlag.value = true
|
||||
} else {
|
||||
@@ -1314,8 +1475,6 @@ onBeforeUnmount(() => {
|
||||
background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));
|
||||
|
||||
.box-card-content {
|
||||
|
||||
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1323,12 +1482,9 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.box-card-div {
|
||||
display: grid;
|
||||
// grid-template-columns: repeat(3, 1fr);
|
||||
@@ -1337,12 +1493,10 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.box-card-new {
|
||||
|
||||
min-height: 110px !important;
|
||||
|
||||
.el-card__body {
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
216
src/views/govern/device/control/moduleData.vue
Normal file
216
src/views/govern/device/control/moduleData.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<!-- 运行 运行(中断) 运行(故障) 离线 -->
|
||||
<div :style="height" style="overflow-y: auto">
|
||||
<el-collapse v-model="activeNames" v-loading="loading">
|
||||
<el-collapse-item v-for="(item, index) in list" :key="index" :name="index">
|
||||
<template #title>
|
||||
<div class="header">
|
||||
{{ item.moduleName }}
|
||||
<el-tag
|
||||
class="ml10"
|
||||
:type="item.moduleState == '离线' ? 'danger' : 'success'"
|
||||
size="small"
|
||||
effect="dark"
|
||||
>
|
||||
{{ item.moduleState }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div :style="echartHeight" style="min-height: 150px">
|
||||
<MyEchart :options="item.options" v-if="item.dataList != null" />
|
||||
<el-empty description="暂无数据" style="height: 130px" v-else></el-empty>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { WarnTriangleFilled } from '@element-plus/icons-vue'
|
||||
import { getModuleState } from '@/api/cs-device-boot/EquipmentDelivery'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
const activeNames = ref([0, 1, 2, 3])
|
||||
const list: any = ref([])
|
||||
const loading = ref(false)
|
||||
const height = ref(mainHeight(290))
|
||||
const echartHeight = ref(mainHeight(292))
|
||||
const setData = (data: any) => {
|
||||
echartHeight.value = mainHeight(292 + data.length * 49, data.length)
|
||||
data.forEach((item: any) => {
|
||||
// console.log('🚀 ~ setData ~ data:', data)
|
||||
if (item.dataList == null) return
|
||||
item.options = {
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var tips = params[0].data[0] + '：' + params[0].data[2] + '<br/>'
|
||||
if (params[0].data[3] == 1) {
|
||||
tips += '事件：' + params[0].data[4]
|
||||
}
|
||||
|
||||
return tips
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
name: '时间',
|
||||
//
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 添加自定义图例
|
||||
legend: {
|
||||
show: true,
|
||||
type: 'plain',
|
||||
top: 0,
|
||||
itemWidth: 14, // 图例标记宽度
|
||||
itemHeight: 14, // 图例标记高度
|
||||
data: [
|
||||
{
|
||||
name: '事件',
|
||||
icon: 'path://M0,10 L10,10 L5,0 Z', // 自定义三角形路径
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
],
|
||||
itemStyle: {
|
||||
color: '#FFB74D' // 图例标记颜色与数据标记一致
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: '30px'
|
||||
},
|
||||
yAxis: {
|
||||
max: 1,
|
||||
data: ['运行', '中断'],
|
||||
interval: 1,
|
||||
|
||||
axisLabel: {
|
||||
formatter: value => {
|
||||
// if (value === 0) {
|
||||
// return ` `
|
||||
// }
|
||||
if (value === 0) {
|
||||
return `{lx|离线} `
|
||||
}
|
||||
if (value === 1) {
|
||||
return `{yx|运行} `
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
yx: {
|
||||
backgroundColor: '#67c23a',
|
||||
color: '#fff',
|
||||
borderRadius: 5,
|
||||
padding: [1, 3],
|
||||
fontWeight: 600,
|
||||
fontSize: 12,
|
||||
align: 'center',
|
||||
textAlign: 'center',
|
||||
width: 35,
|
||||
height: 20,
|
||||
borderColor: '#000'
|
||||
},
|
||||
lx: {
|
||||
backgroundColor: '#f56c6c',
|
||||
color: '#fff',
|
||||
borderRadius: 5,
|
||||
padding: [1, 3],
|
||||
fontWeight: 600,
|
||||
fontSize: 12,
|
||||
align: 'center',
|
||||
textAlign: 'center',
|
||||
width: 35,
|
||||
height: 20,
|
||||
borderColor: '#000'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '事件',
|
||||
type: 'line',
|
||||
data: item.dataList.map((k: any) => [
|
||||
k.time,
|
||||
k.stateDesc == '离线' ? 0 : 1,
|
||||
k.stateDesc,
|
||||
k.dataType,
|
||||
k.eventName
|
||||
]),
|
||||
step: 'end',
|
||||
symbol: 'none',
|
||||
|
||||
// 动态显示标记
|
||||
markPoint: {
|
||||
symbol: 'triangle', // 使用三角形标记
|
||||
symbolSize: 10, // 标记大小
|
||||
symbolOffset: [0, 6], // 向上偏移，放置在线条上方
|
||||
data: item.dataList
|
||||
.filter((k: any) => k.dataType === 1)
|
||||
.map((k: any) => ({
|
||||
name: k.stateDesc,
|
||||
coord: [k.time, k.stateDesc === '离线' ? 0 : 1],
|
||||
itemStyle: {
|
||||
color: '#FFB74D', // 亮黄色填充
|
||||
borderColor: '#FFB74D', // 边框颜色
|
||||
borderWidth: 1 // 边框宽度
|
||||
}
|
||||
}))
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
list.value = data
|
||||
}
|
||||
const getModule = async (id: string) => {
|
||||
loading.value = true
|
||||
await getModuleState({ id: id }).then(res => {
|
||||
res.data.forEach((item: any) => {
|
||||
list.value.forEach((k: any) => {
|
||||
if (k.moduleName === item.moduleName) {
|
||||
k.moduleState = item.moduleState
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
ElMessage.success('刷新成功')
|
||||
})
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
defineExpose({ setData, getModule })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.header) {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.header-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
:deep(.el-empty__image) {
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
@@ -3,11 +3,21 @@
|
||||
<TableHeader>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="关键字筛选">
|
||||
<el-input v-model.trim="tableStore.table.params.searchValue" style="width: 200px" clearable placeholder="请输入设备名称/网络设备ID" />
|
||||
|
||||
<el-input
|
||||
v-model.trim="tableStore.table.params.searchValue"
|
||||
style="width: 200px"
|
||||
clearable
|
||||
placeholder="请输入设备名称/网络设备ID"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型">
|
||||
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
|
||||
<el-form-item label="流程状态">
|
||||
<el-select v-model.trim="tableStore.table.params.process" clearable placeholder="请选择状态">
|
||||
<el-option label="功能调试" :value="2"></el-option>
|
||||
<el-option label="出厂调试" :value="3"></el-option>
|
||||
<el-option label="正式投运" :value="4"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="设备类型">
|
||||
<el-select
|
||||
v-model.trim="tableStore.table.params.devType"
|
||||
clearable
|
||||
@@ -46,7 +56,7 @@
|
||||
<el-option label="MQTT" value="MQTT"></el-option>
|
||||
<el-option label="CLD" value="CLD"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form-item>-->
|
||||
<!-- <el-form-item label="状态">
|
||||
<el-select v-model.trim="tableStore.table.params.status" clearable placeholder="请选择状态">
|
||||
<el-option label="未注册" :value="1"></el-option>
|
||||
@@ -372,6 +382,7 @@ const tableStore = new TableStore({
|
||||
已连接: '已连接'
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: '通讯状态',
|
||||
field: 'runStatus',
|
||||
@@ -386,7 +397,33 @@ const tableStore = new TableStore({
|
||||
2: '在线'
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: '流程状态',
|
||||
field: 'process',
|
||||
width: 100,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
2: 'warning',
|
||||
3: 'warning',
|
||||
4: 'success'
|
||||
},
|
||||
replaceValue: {
|
||||
2: '功能调试',
|
||||
3: '出厂调试',
|
||||
4: '正式投运'
|
||||
}
|
||||
// formatter: row => {
|
||||
// return row.cellValue == '1'
|
||||
// ? '设备登记'
|
||||
// : row.cellValue == '2'
|
||||
// ? '功能调试'
|
||||
// : row.cellValue == '3'
|
||||
// ? '出厂调试'
|
||||
// : row.cellValue == '4'
|
||||
// ? '设备投运'
|
||||
// : row.cellValue
|
||||
// }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
@@ -647,6 +684,7 @@ const tableStore = new TableStore({
|
||||
tableStore.table.params.orderBy = 'desc'
|
||||
tableStore.table.params.devType = ''
|
||||
tableStore.table.params.devModel = ''
|
||||
tableStore.table.params.process = ''
|
||||
tableStore.table.params.devAccessMethod = ''
|
||||
tableStore.table.params.status = ''
|
||||
tableStore.table.params.sortBy = ''
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<img v-if="item.fileContent" :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" />
|
||||
<el-empty v-else description="暂无设计" />
|
||||
<el-empty v-else description="暂无设计" style="height: 220px;"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
Reference in New Issue
Block a user