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

修改 测试bug

Browse Source
This commit is contained in:
GGJ
2024-11-12 11:41:46 +08:00
parent c56c301365
commit 299301d4f7
4 changed files with 182 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/table/header/index.vue
View File

@@ -74,7 +74,7 @@ const showUnfoldButton = ref(false)
const headerFormSecondStyleOpen = { const headerFormSecondStyleOpen = {
opacity: 1, opacity: 1,
height: 'auto', height: 'auto',
padding: '0 15px 13px 15px' padding: '0 15px 0px 15px'
} }
const headerFormSecondStyleClose = { const headerFormSecondStyleClose = {
opacity: 0, opacity: 0,
@@ -129,6 +129,7 @@ const computedSearchRow = () => {
headerFormSecond.value.$el.appendChild(elFormItem[i]) headerFormSecond.value.$el.appendChild(elFormItem[i])
} }
} }
console.log("🚀 ~ computedSearchRow ~ headerFormSecond.value.$el.scrollHeight :", headerFormSecond.value.$el.scrollHeight )
// 判断是否需要折叠 // 判断是否需要折叠
if (headerFormSecond.value.$el.scrollHeight > 0) { if (headerFormSecond.value.$el.scrollHeight > 0) {

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

@@ -1,10 +1,6 @@
<template> <template>
<div <div class="default-main device-control" :style="{ height: pageHeight.height }" v-loading="loading"
class="default-main device-control" style="position: relative">
:style="{ height: pageHeight.height }"
v-loading="loading"
style="position: relative"
>
<!-- @init="nodeClick" --> <!-- @init="nodeClick" -->
<PointTree @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree> <PointTree @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
<div class="device-control-right" v-if="deviceData"> <div class="device-control-right" v-if="deviceData">
@@ -19,12 +15,8 @@
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Monitor" @click="handleaddDevice"> <el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Monitor" @click="handleaddDevice">
在线补召 在线补召
</el-button> </el-button>
<el-button <el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Tickets"
v-if="deviceType == '1'" @click="handleAnalysisList">
type="primary"
icon="el-icon-Tickets"
@click="handleAnalysisList"
>
补召日志 补召日志
</el-button> </el-button>
</template> </template>
@@ -49,13 +41,8 @@
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<el-tabs v-model="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick"> <el-tabs v-model="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
<el-tab-pane <el-tab-pane lazy :label="item.name" :name="item.id" v-for="(item, index) in deviceData.dataSetList"
lazy :key="index">
:label="item.name"
:name="item.id"
v-for="(item, index) in deviceData.dataSetList"
:key="index"
>
<template #label> <template #label>
<span class="custom-tabs-label"> <span class="custom-tabs-label">
<el-icon> <el-icon>
@@ -64,59 +51,44 @@
<DataAnalysis v-if="item.name.includes('趋势数据')" /> <DataAnalysis v-if="item.name.includes('趋势数据')" />
<Timer v-if="item.name.includes('实时数据')" /> <Timer v-if="item.name.includes('实时数据')" />
<Monitor v-if="item.name.includes('暂态事件')" /> <Monitor v-if="item.name.includes('暂态事件')" />
<Odometer <Odometer v-if="
v-if=" item.name != 'APF模块数据' &&
item.name != 'APF模块数据' && item.name != '历史APF模块数据' &&
item.name != '历史APF模块数据' && !item.name.includes('历史监测') &&
!item.name.includes('历史监测') && !item.name.includes('趋势数据') &&
!item.name.includes('趋势数据') && !item.name.includes('实时数据') &&
!item.name.includes('实时数据') && !item.name.includes('暂态事件')
!item.name.includes('暂态事件') " />
" <Histogram v-if="
/> item.name != 'APF模块数据' &&
<Histogram item.name != '历史APF模块数据' &&
v-if=" item.name.includes('历史监测') &&
item.name != 'APF模块数据' && !item.name.includes('趋势数据') &&
item.name != '历史APF模块数据' && !item.name.includes('实时数据') &&
item.name.includes('历史监测') && !item.name.includes('暂态事件')
!item.name.includes('趋势数据') && " />
!item.name.includes('实时数据') &&
!item.name.includes('暂态事件')
"
/>
</el-icon> </el-icon>
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</span> </span>
</template> </template>
</el-tab-pane> </el-tab-pane>
<TableHeader <TableHeader :showSearch="false" v-if="
:showSearch="false" (dataSet.indexOf('_trenddata') == -1 &&
v-if=" dataSet.indexOf('_realtimedata') == -1 &&
(dataSet.indexOf('_trenddata') == -1 && dataSet.indexOf('_event') == -1) ||
dataSet.indexOf('_realtimedata') == -1 && realTimeFlag
dataSet.indexOf('_event') == -1) || ">
realTimeFlag
"
>
<template #select> <template #select>
<el-form-item label="日期" v-show="dataSet.indexOf('_history') != -1"> <el-form-item label="日期" v-show="dataSet.indexOf('_history') != -1">
<DatePicker ref="datePickerRef"></DatePicker> <DatePicker ref="datePickerRef"></DatePicker>
</el-form-item> </el-form-item>
<el-form-item label="指标" v-show="!realTimeFlag"> <el-form-item label="指标" v-show="!realTimeFlag">
<el-input <el-input style="width: 160px" v-model="formInline.searchValue" autocomplete="off" clearable
style="width: 160px" placeholder="请输入关键词"></el-input>
v-model="formInline.searchValue"
autocomplete="off"
clearable
placeholder="请输入关键词"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="值类型"> <el-form-item label="值类型">
<el-select <el-select style="min-width: 120px !important" v-model="formInline.dataLevel"
style="min-width: 120px !important" :disabled="dataLevel == 'Primary' && deviceType == '0'">
v-model="formInline.dataLevel"
:disabled="dataLevel == 'Primary' && deviceType == '0'"
>
<el-option value="Primary" label="一次值"></el-option> <el-option value="Primary" label="一次值"></el-option>
<el-option value="Secondary" label="二次值"></el-option> <el-option value="Secondary" label="二次值"></el-option>
</el-select> </el-select>
@@ -124,46 +96,27 @@
</template> </template>
<template #operation> <template #operation>
<el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button> <el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
<el-button <el-button type="primary" :disabled="tableLoading" v-if="realTimeFlag" :icon="DataLine"
type="primary" @click="handleTrend">
:disabled="tableLoading"
v-if="realTimeFlag"
:icon="DataLine"
@click="handleTrend"
>
谐波频谱 谐波频谱
</el-button> </el-button>
<el-button <el-button type="primary" v-if="realTimeFlag" :icon="TrendCharts"
type="primary" @click="handleHarmonicSpectrum" :disabled="tableLoading">
v-if="realTimeFlag"
:icon="TrendCharts"
@click="handleHarmonicSpectrum"
:disabled="tableLoading"
>
实时趋势 实时趋势
</el-button> </el-button>
</template> </template>
</TableHeader> </TableHeader>
<div <div class="data_time" :style="{
class="data_time" height: realTimeFlag ? '30px' : '40px',
:style="{ alignItems: realTimeFlag ? 'flex-end' : 'center'
height: realTimeFlag ? '30px' : '40px', }" v-if="dataSet.includes('_realtimedata') && mqttMessage && mqttMessage.dataTime && sonTab != 2">
alignItems: realTimeFlag ? 'flex-end' : 'center'
}"
v-if="dataSet.includes('_realtimedata') && mqttMessage && mqttMessage.dataTime && sonTab != 2"
>
<p> <p>
<span v-if="trendDataTime && !realTimeFlag">数据时间：{{ trendDataTime }}</span> <span v-if="trendDataTime && !realTimeFlag">数据时间：{{ trendDataTime }}</span>
<span v-if="realTimeFlag">数据时间：{{ mqttMessage.dataTime }}</span> <span v-if="realTimeFlag">数据时间：{{ mqttMessage.dataTime }}</span>
</p> </p>
<el-button <el-button v-if="!realTimeFlag && dataSet.includes('_realtimedata')" style="float: right !important"
v-if="!realTimeFlag && dataSet.includes('_realtimedata')" :icon="Back" @click="handleReturn" :loading="tableLoading">
style="float: right !important"
:icon="Back"
@click="handleReturn"
:loading="tableLoading"
>
返回 返回
</el-button> </el-button>
</div> </div>
@@ -178,29 +131,20 @@
" "
></div> --> ></div> -->
<!-- v-loading="tableLoading" --> <!-- v-loading="tableLoading" -->
<div <div style="overflow: auto" :style="{ height: tableHeight }" v-loading="tableLoading" v-if="
style="overflow: auto" dataSet.indexOf('_trenddata') == -1 &&
:style="{ height: tableHeight }" dataSet.indexOf('_realtimedata') == -1 &&
v-loading="tableLoading" dataSet.indexOf('_event') == -1 &&
v-if=" tableData.length != 0
dataSet.indexOf('_trenddata') == -1 && ">
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1 &&
tableData.length != 0
"
>
<!-- 循环渲染的card 最新数据/历史数据显示 --> <!-- 循环渲染的card 最新数据/历史数据显示 -->
<div class="content" v-if="tableData.length != 0 && !tableLoading"> <div class="content" v-if="tableData.length != 0 && !tableLoading">
<el-card class="box-card" v-for="(item, index) in tableData" :key="index"> <el-card class="box-card" v-for="(item, index) in tableData" :key="index">
<template #header> <template #header>
<div class="clearfix"> <div class="clearfix">
<span style="flex: 1">{{ item.name }}</span> <span style="flex: 1">{{ item.name }}</span>
<Icon <Icon name="el-icon-TrendCharts" class="ml10" @click="getDeviceDataTrend(item)"
name="el-icon-TrendCharts" style="font-size: 26px; cursor: pointer; color: #fff"></Icon>
class="ml10"
@click="getDeviceDataTrend(item)"
style="font-size: 26px; cursor: pointer; color: #fff"
></Icon>
</div> </div>
</template> </template>
<!-- 模块数据 --> <!-- 模块数据 -->
@@ -215,49 +159,37 @@
</div> </div>
<div v-else-if="item.children.length"> <div v-else-if="item.children.length">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<el-tag <el-tag effect="dark" type="danger" style="width: 40px; text-align: center"
effect="dark" class="mr10">
type="danger"
style="width: 40px; text-align: center"
class="mr10"
>
MAX MAX
</el-tag> </el-tag>
{{ {{
item.children[0].maxValue === 3.1415956 || item.children[0].maxValue === 3.1415956 ||
typeof item.children[0].maxValue != 'number' typeof item.children[0].maxValue != 'number'
? '暂无数据' ? '暂无数据'
: item.children[0].maxValue : item.children[0].maxValue
}} }}
</div> </div>
<div style="display: flex; align-items: center" class="mt10"> <div style="display: flex; align-items: center" class="mt10">
<el-tag <el-tag effect="dark" type="success" style="width: 40px; text-align: center"
effect="dark" class="mr10">
type="success"
style="width: 40px; text-align: center"
class="mr10"
>
AVG AVG
</el-tag> </el-tag>
{{ {{
item.children[0].avgValue === 3.1415956 || item.children[0].avgValue === 3.1415956 ||
typeof item.children[0].avgValue != 'number' typeof item.children[0].avgValue != 'number'
? '暂无数据' ? '暂无数据'
: item.children[0].avgValue : item.children[0].avgValue
}} }}
</div> </div>
<div style="display: flex; align-items: center" class="mt10"> <div style="display: flex; align-items: center" class="mt10">
<el-tag <el-tag effect="dark" type="warning" style="width: 40px; text-align: center"
effect="dark" class="mr10">
type="warning"
style="width: 40px; text-align: center"
class="mr10"
>
MIN MIN
</el-tag> </el-tag>
{{ {{
item.children[0].minValue === 3.1415956 || item.children[0].minValue === 3.1415956 ||
typeof item.children[0].minValue != 'number' typeof item.children[0].minValue != 'number'
? '暂无数据' ? '暂无数据'
: item.children[0].minValue : item.children[0].minValue
}} }}
@@ -267,44 +199,30 @@
<el-empty description="暂无数据" v-if="tableData.length === 0"></el-empty> <el-empty description="暂无数据" v-if="tableData.length === 0"></el-empty>
</div> </div>
</div> </div>
<el-pagination <el-pagination v-if="
v-if=" tableData.length &&
tableData.length && dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_trenddata') == -1 && dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 && dataSet.indexOf('_event') == -1
dataSet.indexOf('_event') == -1 " background class="mr2 mt10" style="float: right" @size-change="handleSizeChange"
" @current-change="pageChange" :current-page="formInline.pageNum" :page-sizes="[20, 30, 40, 50, 100]"
background :page-size="formInline.pageSize" layout="total, sizes, prev, pager, next, jumper"
class="mr2 mt10" :total="formInline.total"></el-pagination>
style="float: right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="formInline.total"
></el-pagination>
<!-- 趋势数据 --> <!-- 趋势数据 -->
<div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_trenddata') != -1"> <div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_trenddata') != -1">
<Trend ref="trendRef"></Trend> <Trend ref="trendRef"></Trend>
</div> </div>
<!-- 实时数据 --> <!-- 实时数据 -->
<div <div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_realtimedata') != -1"
style="height: calc(100vh - 340px)" v-loading="tableLoading">
v-if="dataSet.indexOf('_realtimedata') != -1"
v-loading="tableLoading"
>
<!-- <div class="view_top_btn" v-if="realTimeFlag"> <!-- <div class="view_top_btn" v-if="realTimeFlag">
<el-button type="primary" :icon="Platform" @click="handleRecordWaves"> <el-button type="primary" :icon="Platform" @click="handleRecordWaves">
实时录波 实时录波
</el-button> </el-button>
</div> --> </div> -->
<div <div class="view_top_btn"
class="view_top_btn" v-if="dataSet.includes('_realtimedata') && !realTimeFlag && mqttMessage.dataTime && sonTab == 2">
v-if="dataSet.includes('_realtimedata') && !realTimeFlag && mqttMessage.dataTime && sonTab == 2"
>
<el-button :icon="Back" @click="handleReturn" :loading="tableLoading">返回</el-button> <el-button :icon="Back" @click="handleReturn" :loading="tableLoading">返回</el-button>
</div> </div>
<!-- 实时数据主界面组件 --> <!-- 实时数据主界面组件 -->
@@ -312,23 +230,16 @@
<!-- 实时数据-实时录波组件 --> <!-- 实时数据-实时录波组件 -->
<recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves> <recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
<!-- 实时数据-实时趋势组件 --> <!-- 实时数据-实时趋势组件 -->
<realTrend <realTrend v-if="!realTimeFlag && sonTab == 1" ref="realTrendRef"
v-if="!realTimeFlag && sonTab == 1" @changeTrendType="changeTrendType">
ref="realTrendRef" </realTrend>
@changeTrendType="changeTrendType"
></realTrend>
<!-- 实时数据-谐波频谱组件 --> <!-- 实时数据-谐波频谱组件 -->
<harmonicSpectrum <harmonicSpectrum v-show="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef">
v-show="!realTimeFlag && sonTab == 2" </harmonicSpectrum>
ref="harmonicSpectrumRef"
></harmonicSpectrum>
</div> </div>
<!-- 暂态事件 --> <!-- 暂态事件 -->
<div <div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_event') != -1"
style="height: calc(100vh - 340px)" v-loading="tableLoading">
v-if="dataSet.indexOf('_event') != -1"
v-loading="tableLoading"
>
<Event ref="eventRef"></Event> <Event ref="eventRef"></Event>
</div> </div>
<div v-if="!tableData" style="height: 42px"></div> <div v-if="!tableData" style="height: 42px"></div>
@@ -366,12 +277,14 @@ import offLineDataImport from './offLineDataImport/index.vue'
import Event from './tabs/event.vue' import Event from './tabs/event.vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import TableHeader from '@/components/table/header/index.vue' 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 } from '@element-plus/icons-vue'
import analysisList from './analysisList/index.vue' import analysisList from './analysisList/index.vue'
import mqtt from 'mqtt' import mqtt from 'mqtt'
defineOptions({ defineOptions({
name: 'govern/device/control' name: 'govern/device/control'
}) })
const adminInfo = useAdminInfo()
const pageHeight = mainHeight(20) const pageHeight = mainHeight(20)
const loading = ref(true) const loading = ref(true)
const tableLoading = ref(false) const tableLoading = ref(false)
@@ -556,6 +469,8 @@ const deviceId: any = ref('')
const lineId: any = ref('') const lineId: any = ref('')
const dataLevel: any = ref('') const dataLevel: any = ref('')
const nodeClick = async (e: anyObj) => { const nodeClick = async (e: anyObj) => {
console.log("🚀 ~ nodeClick ~ e:", e)
if (e.level == 2) return
deviceId.value = e?.pid deviceId.value = e?.pid
lineId.value = e?.id lineId.value = e?.id
if (!e) { if (!e) {
@@ -644,7 +559,7 @@ const connectMqtt = () => {
mqttRef.value = mqtt.connect(url, options) mqttRef.value = mqtt.connect(url, options)
} }
const getRealDataMqttMsg = async () => { const getRealDataMqttMsg = async () => {
tableLoading.value=true tableLoading.value = true
if (realDataTimer.value) { if (realDataTimer.value) {
window.clearInterval(realDataTimer.value) window.clearInterval(realDataTimer.value)
} }
@@ -669,6 +584,10 @@ const getRealDataMqttMsg = async () => {
// JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) // JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
// ) // )
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
if (lineId.value != obj.lineId && adminInfo.userIndex != obj.userId) return
console.log("🚀 ~ mqttRef.value.on ~ obj:", obj)
console.log("🚀 ~ mqttRef.value.on ~ formInline.dataLevel:", obj.dataLevel, formInline.dataLevel)
//处理mqtt数据 1转2除 2转1乘 //处理mqtt数据 1转2除 2转1乘
//如果消息返回值是二次值，下拉框是二次值只需要单位换算 除以1000 //如果消息返回值是二次值，下拉框是二次值只需要单位换算 除以1000
//如果消息返回值是一次值，下拉框是一次值只需要单位换算 除以1000 //如果消息返回值是一次值，下拉框是一次值只需要单位换算 除以1000
@@ -676,7 +595,7 @@ const getRealDataMqttMsg = async () => {
obj = { obj = {
...obj, ...obj,
// 电压有效值 // 电压有效值
vRmsA: obj.vRmsA / 1000, vRmsA: (obj.vRmsA) / 1000,
vRmsB: obj.vRmsB / 1000, vRmsB: obj.vRmsB / 1000,
vRmsC: obj.vRmsC / 1000, vRmsC: obj.vRmsC / 1000,
//基波电压幅值 //基波电压幅值
@@ -705,36 +624,36 @@ const getRealDataMqttMsg = async () => {
obj = { obj = {
...obj, ...obj,
// 电压有效值 // 电压有效值
vRmsA: (obj.vRmsA * obj.pt) / 1000, vRmsA: ((obj.vRmsA * obj.pt) || 0) / 1000,
vRmsB: (obj.vRmsA * obj.pt) / 1000, vRmsB: ((obj.vRmsA * obj.pt) || 0) / 1000,
vRmsC: (obj.vRmsA * obj.pt) / 1000, vRmsC: ((obj.vRmsA * obj.pt) || 0) / 1000,
// 电流有效值 // 电流有效值
iRmsA: obj.iRmsA * obj.ct, iRmsA: (obj.iRmsA * obj.ct) || 0,
iRmsB: obj.iRmsA * obj.ct, iRmsB: (obj.iRmsA * obj.ct) || 0,
iRmsC: obj.iRmsA * obj.ct, iRmsC: (obj.iRmsA * obj.ct) || 0,
//基波电压幅值 //基波电压幅值
v1A: (obj.v1A * obj.pt) / 1000, v1A: ((obj.v1A * obj.pt) || 0) / 1000,
v1B: (obj.v1B * obj.pt) / 1000, v1B: ((obj.v1B * obj.pt) || 0) / 1000,
v1C: (obj.v1C * obj.pt) / 1000, v1C: ((obj.v1C * obj.pt) || 0) / 1000,
//基波电流幅值 //基波电流幅值
i1A: obj.i1A * obj.ct, i1A: (obj.i1A * obj.ct) || 0,
i1B: obj.i1B * obj.ct, i1B: (obj.i1B * obj.ct) || 0,
i1C: obj.i1C * obj.ct, i1C: (obj.i1C * obj.ct) || 0,
//有功功率 //有功功率
pA: (obj.pA * obj.pt * obj.ct) / 1000, pA: ((obj.pA * obj.pt * obj.ct) || 0) / 1000,
pB: (obj.pB * obj.pt * obj.ct) / 1000, pB: ((obj.pB * obj.pt * obj.ct) || 0) / 1000,
pC: (obj.pC * obj.pt * obj.ct) / 1000, pC: ((obj.pC * obj.pt * obj.ct) || 0) / 1000,
pTot: (obj.pTot * obj.pt * obj.ct) / 1000, pTot: ((obj.pTot * obj.pt * obj.ct) || 0) / 1000,
//无功功率 //无功功率
qA: (obj.qA * obj.pt * obj.ct) / 1000, qA: ((obj.qA * obj.pt * obj.ct) || 0) / 1000,
qB: (obj.qB * obj.pt * obj.ct) / 1000, qB: ((obj.qB * obj.pt * obj.ct) || 0) / 1000,
qC: (obj.qC * obj.pt * obj.ct) / 1000, qC: ((obj.qC * obj.pt * obj.ct) || 0) / 1000,
qTot: (obj.qTot * obj.pt * obj.ct) / 1000, qTot: ((obj.qTot * obj.pt * obj.ct) || 0) / 1000,
//视在功率 //视在功率
sA: (obj.sA * obj.pt * obj.ct) / 1000, sA: ((obj.sA * obj.pt * obj.ct) || 0) / 1000,
sB: (obj.sB * obj.pt * obj.ct) / 1000, sB: ((obj.sB * obj.pt * obj.ct) || 0) / 1000,
sC: (obj.sC * obj.pt * obj.ct) / 1000, sC: ((obj.sC * obj.pt * obj.ct) || 0) / 1000,
sTot: (obj.sTot * obj.pt * obj.ct) / 1000 sTot: ((obj.sTot * obj.pt * obj.ct) || 0) / 1000
} }
} }
//如果消息返回值是一次值，下拉框是二次值需要单位换算 乘以1000 并且除以pt ct //如果消息返回值是一次值，下拉框是二次值需要单位换算 乘以1000 并且除以pt ct
@@ -823,7 +742,7 @@ const getRealDataMqttMsg = async () => {
const realDataTimer: any = ref() const realDataTimer: any = ref()
const mqttMessage = ref<any>({}) const mqttMessage = ref<any>({})
const handleClick = async (tab?: any) => { const handleClick = async (tab?: any) => {
tableLoading.value=true tableLoading.value = true
if (realDataTimer.value) { if (realDataTimer.value) {
clearInterval(realDataTimer.value) clearInterval(realDataTimer.value)
} }
@@ -947,7 +866,7 @@ const handleClick = async (tab?: any) => {
} }
} }
//模版下载 //模版下载
const handleDownLoadTemplate = () => {} const handleDownLoadTemplate = () => { }
//补召日志 //补召日志
const analysisListRef = ref() const analysisListRef = ref()
//打开补召日志 //打开补召日志
@@ -984,10 +903,10 @@ const echoName = (value: any, arr: any[]) => {
return value ? arr.find(item => item.value == value)?.label : '/' return value ? arr.find(item => item.value == value)?.label : '/'
} }
onMounted(() => {}) onMounted(() => { })
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(realDataTimer.value) clearInterval(realDataTimer.value)
clearInterval(trendTimer.value) clearInterval(trendTimer.value)
realDataTimer.value = 0 realDataTimer.value = 0
trendTimer.value = 0 trendTimer.value = 0
if (mqttRef.value) { if (mqttRef.value) {
@@ -1093,6 +1012,7 @@ onBeforeUnmount(() => {
text-align: center; text-align: center;
display: flex; display: flex;
align-items: center; align-items: center;
p { p {
font-weight: 800; font-weight: 800;
font-size: 16px; font-size: 16px;

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

@@ -2,7 +2,7 @@
<div> <div>
<!-- 历史趋势数据 --> <!-- 历史趋势数据 -->
<div> <div>
<TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange"> <TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange" :key="numKey">
<template v-slot:select :key="num"> <template v-slot:select :key="num">
<el-form-item> <el-form-item>
<DatePicker ref="datePickerRef"></DatePicker> <DatePicker ref="datePickerRef"></DatePicker>
@@ -403,7 +403,7 @@ const init = async () => {
} }
const selectChange = (flag: boolean) => { const selectChange = (flag: boolean) => {
if (flag) { if (flag) {
pageHeight.value = mainHeight(345) pageHeight.value = mainHeight(332)
} else { } else {
pageHeight.value = mainHeight(290) pageHeight.value = mainHeight(290)
} }
@@ -598,8 +598,23 @@ const onCountChange = (val: any, index: any) => {
countData.value[index].count = countData.value[index].countOptions[0] countData.value[index].count = countData.value[index].countOptions[0]
} }
} }
const flag = ref(true)
const numKey = ref(0)
const onIndexChange = (val: any) => { const onIndexChange = (val: any) => {
num.value += 1 num.value += 1
flag.value = true
setTimeout(() => {
countData.value.forEach((item: any) => {
if (item.countOptions.length > 0) {
flag.value = false
return
}
})
if (flag.value) {
numKey.value += 1
}
}, 500)
// if (val.length == 0) { // if (val.length == 0) {
// searchForm.value.index = [indexOptions.value[0].id] // searchForm.value.index = [indexOptions.value[0].id]
// } // }

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

@@ -20,7 +20,7 @@
<!-- <div class="history_title"> <!-- <div class="history_title">
<p>测试项信息</p> <p>测试项信息</p>
</div> --> </div> -->
<el-tabs v-model="activeName" type="border-card" @click.self="handleClickTabs"> <el-tabs v-model="activeName" type="border-card" @click="handleClickTabs">
<el-tab-pane v-for="(item, index) in deviceData?.records" :label="item.itemName" <el-tab-pane v-for="(item, index) in deviceData?.records" :label="item.itemName"
:name="item.id" :key="index"> :name="item.id" :key="index">
<template #label> <template #label>
@@ -104,7 +104,7 @@
<div class="history_header" ref="headerRef"> <div class="history_header" ref="headerRef">
<!-- <el-form :model="searchForm" class="history_select" id="history_select"> --> <!-- <el-form :model="searchForm" class="history_select" id="history_select"> -->
<TableHeader :showSearch="false" ref="tableHeaderRef" @selectChange="selectChange"> <TableHeader :showSearch="false" ref="tableHeaderRef" @selectChange="selectChange">
<template v-slot:select :key="num"> <template v-slot:select >
<el-form-item for="-" label="统计指标"> <el-form-item for="-" label="统计指标">
<el-select style="min-width: 200px" collapse-tags collapse-tags-tooltip <el-select style="min-width: 200px" collapse-tags collapse-tags-tooltip
v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)" v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)"
@@ -135,7 +135,7 @@
:value="vv"></el-option> :value="vv"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
<template v-slot:operation> <template v-slot:operation>
<el-button type="primary" icon="el-icon-Download" @click="handleExport"> <el-button type="primary" icon="el-icon-Download" @click="handleExport">
@@ -145,10 +145,10 @@
</template> </template>
</TableHeader> </TableHeader>
</div> </div>
<div class="history_title"> <!-- <div class="history_title">
<p>{{ chartTitle }}</p> <p>{{ chartTitle }}</p>
</div> </div> -->
<div class="history_chart" v-loading="loading" :style="EcharHeight" :key="EcharHeight.height" <div class="history_chart mt5" v-loading="loading" :style="EcharHeight" :key="EcharHeight.height"
ref="chartRef"> ref="chartRef">
<MyEchart ref="historyChart" v-if="echartsData" :isExport="true" :options="echartsData" /> <MyEchart ref="historyChart" v-if="echartsData" :isExport="true" :options="echartsData" />
</div> </div>
@@ -176,6 +176,7 @@ import { yMethod } from '@/utils/echartMethod'
import { color, gradeColor3 } from '@/components/echarts/color' import { color, gradeColor3 } from '@/components/echarts/color'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
import { getDeviceList } from '@/api/cs-device-boot/planData'
const dictData = useDictData() const dictData = useDictData()
defineOptions({ defineOptions({
name: 'govern/device/planData/index' name: 'govern/device/planData/index'
@@ -189,7 +190,7 @@ const voltageLevelList = dictData.getBasicData('Dev_Voltage_Stand')
const volConTypeList = dictData.getBasicData('Dev_Connect') const volConTypeList = dictData.getBasicData('Dev_Connect')
//值类型 //值类型
const pageHeight = mainHeight(20) const pageHeight = mainHeight(20)
const EcharHeight = ref(mainHeight(510)) const EcharHeight = ref(mainHeight(458))
const loading = ref(false) const loading = ref(false)
const searchForm: any = ref({}) const searchForm: any = ref({})
const typeOptions = [ const typeOptions = [
@@ -343,9 +344,11 @@ const refreshTree = () => {
const range = (start: any, end: any, step: any) => { const range = (start: any, end: any, step: any) => {
return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step) return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
} }
const titleList: any = ref('')
const init = (flag: boolean) => { const init = (flag: boolean) => {
titleList.value = ''
let list: any = [] let list: any = []
//颜色数组 //颜色数组
if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) { if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
@@ -358,6 +361,7 @@ const init = (flag: boolean) => {
}) })
}) })
//选择的指标使用方法处理 //选择的指标使用方法处理
formatCountOptions(searchForm.value.index) formatCountOptions(searchForm.value.index)
//查询历史趋势 //查询历史趋势
@@ -377,7 +381,7 @@ const init = (flag: boolean) => {
middleTitle = '' middleTitle = ''
} }
let indexList = searchForm.value.index let indexList = searchForm.value.index
chartTitle.value = deviceData.value.itemName + '_' + middleTitle + '_' chartTitle.value = ''//deviceData.value.itemName + '_' + middleTitle + '_'
indexList.map((item: any, indexs: any) => { indexList.map((item: any, indexs: any) => {
indexOptions.value.map((vv: any) => { indexOptions.value.map((vv: any) => {
if (vv.id == item) { if (vv.id == item) {
@@ -385,6 +389,7 @@ const init = (flag: boolean) => {
} }
}) })
}) })
let lists: any = [] let lists: any = []
let frequencys: any = null let frequencys: any = null
countData.value.map((item: any, index: any) => { countData.value.map((item: any, index: any) => {
@@ -398,6 +403,10 @@ const init = (flag: boolean) => {
frequencys: frequencys && frequencys.length != 0 ? [frequencys] : [] frequencys: frequencys && frequencys.length != 0 ? [frequencys] : []
} }
}) })
let obj = { let obj = {
devId: historyDevId.value, devId: historyDevId.value,
list: lists, list: lists,
@@ -409,6 +418,17 @@ const init = (flag: boolean) => {
return return
} }
if (flag) { if (flag) {
getDeviceList({
id: historyDevId.value,
isTrueFlag: 1
}).then(res => {
if (res.data.length == 0) {
titleList.value = '(未绑定数据)'
}
chartTitle.value = chartTitle.value + titleList.value
})
loading.value = true loading.value = true
getHistoryTrend(obj) getHistoryTrend(obj)
.then((res: any) => { .then((res: any) => {
@@ -443,6 +463,10 @@ const init = (flag: boolean) => {
} }
echartsData.value = { echartsData.value = {
title:{
text:chartTitle.value,
left:'0',
},
legend: { legend: {
itemWidth: 20, itemWidth: 20,
itemHeight: 10, itemHeight: 10,
@@ -764,32 +788,35 @@ const formatCountOptions = (list: any) => {
const flag = ref(false) const flag = ref(false)
const selectChange = (e: boolean) => { const selectChange = (e: boolean) => {
flag.value = e flag.value = e
if (activeColName.value == '0') { if (activeColName.value == '0') {
if (flag.value) { if (flag.value) {
EcharHeight.value = mainHeight(565) EcharHeight.value = mainHeight(502)
} else { } else {
EcharHeight.value = mainHeight(510) EcharHeight.value = mainHeight(458)
} }
} else { } else {
if (flag.value) { if (flag.value) {
EcharHeight.value = mainHeight(365) EcharHeight.value = mainHeight(332)
} else { } else {
EcharHeight.value = mainHeight(310) EcharHeight.value = mainHeight(280)
} }
} }
} }
const handleChange = () => { const handleChange = () => {
console.log("🚀 ~ handleChange ~ activeColName.value:", activeColName.value,flag.value)
if (activeColName.value == '0') { if (activeColName.value == '0') {
if (flag.value) { if (flag.value) {
EcharHeight.value = mainHeight(565) EcharHeight.value = mainHeight(502)
} else { } else {
EcharHeight.value = mainHeight(510) EcharHeight.value = mainHeight(458)
} }
} else { } else {
if (flag.value) { if (flag.value) {
EcharHeight.value = mainHeight(365) EcharHeight.value = mainHeight(332)
} else { } else {
EcharHeight.value = mainHeight(310) EcharHeight.value = mainHeight(280)
} }
} }
} }