🌷 UI(内容): 给企业端子断路器设备信息添加告警配置

This commit is contained in:
fhysy 2025-05-09 16:56:55 +08:00
parent 209163eb36
commit 89c3b3047b
2 changed files with 156 additions and 141 deletions

View File

@ -8,19 +8,20 @@
@changeEvent="viewDeviceChange($event)"
@wsRealTImeMsg="wsRealTImeMsg($event)"
></device-select>
<div :class="infoData.deviceType === 'GATEWAY_CONTROLLER' ? 'link-to-list is-widening': 'link-to-list'" class="main-device-card">
<el-button circle icon="el-icon-d-arrow-left" style="margin-left: 10px;" title="返回列表" @click="toTableClick"
<div class="main-device-card">
<div :class="infoData.deviceType === 'GATEWAY_CONTROLLER' ? 'link-to-list is-widening': 'link-to-list'">
<el-button circle icon="el-icon-d-arrow-left" style="margin-left: 10px;" title="返回列表" @click="toTableClick"
>返回列表</el-button
>
<el-button v-if="infoData.deviceType === 'GATEWAY_CONTROLLER'" circle title="批量升级" @click="batchUpgradeOpen">批量升级</el-button>
</div>
<div class="info-tabs-circuit main-device-card">
<div v-show="breadcrumbList.length > 1" class="breadcrumb-wrap">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item
v-for="(item, index) in breadcrumbList"
:key="index"
>
>
<el-button v-if="infoData.deviceType === 'GATEWAY_CONTROLLER'" circle title="批量升级" @click="batchUpgradeOpen">批量升级</el-button>
</div>
<div class="info-tabs-circuit">
<div v-show="breadcrumbList.length > 1" class="breadcrumb-wrap">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item
v-for="(item, index) in breadcrumbList"
:key="index"
>
<span
:class="
item.deviceId === deviceId
@ -28,123 +29,124 @@
: 'breadcrumb-span'
"
@click="deviceClick(item, index)"
>{{ item.deviceName }}</span
>{{ item.deviceName }}</span
>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-tabs
v-model="activeName"
:class="breadcrumbList.length > 1 ? 'children-wrap' : ''"
>
<el-tab-pane label="运行状态" name="runingState">
<div class="tabs-body protocol-wrap">
<state-management
v-if="devudeRunState"
:deviceInfo="infoData"
:realTimeData="realTimeData"
></state-management>
</div>
</el-tab-pane>
<el-tab-pane label="设备信息" name="info">
<div class="tabs-body">
<info-wrap
v-if="activeName === 'info'"
:infoData="infoData"
:isTenant="isTenant"
@updateInfo="updateInfo($event)"
/>
</div>
</el-tab-pane>
<el-tab-pane
v-if="infoData.deviceType === 'GATEWAY_CONTROLLER' && !isTenant"
label="子设备"
name="child"
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-tabs
v-model="activeName"
:class="breadcrumbList.length > 1 ? 'children-wrap' : ''"
>
<div class="tabs-body">
<child-device
v-if="activeName === 'child'"
:pDevcieInfo="infoData"
:sourceId="infoData.deviceId"
@EventUpload="handleUpload"
@toChildEvent="toNewDevice"
></child-device>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="触发器" name="trigger">-->
<!-- <div class="tabs-body protocol-wrap">-->
<!-- <trigger-wrap-->
<!-- v-if="activeName === 'trigger'"-->
<!-- :deviceInfo="infoData"-->
<!-- :sourceId="infoData.deviceId"-->
<!-- ></trigger-wrap>-->
<!-- </div>-->
<!-- </el-tab-pane>-->
<el-tab-pane label="固件" name="oat">
<div class="tabs-body protocol-wrap">
<model-oat
v-if="activeName === 'oat'"
:deviceInfo="infoData"
:isTenant="isTenant"
@updateInfo="updateInfo($event)"
></model-oat>
</div>
</el-tab-pane>
<el-tab-pane label="日志" name="devLog">
<div class="tabs-body">
<device-log
v-if="activeName === 'devLog'"
:pDevcieInfo="infoData"
:sourceId="infoData.deviceId"
></device-log>
</div>
</el-tab-pane>
<el-tab-pane label="场景" name="scene">
<div class="tabs-body">
<e-device-scene
v-if="activeName === 'scene'"
:sourceId="infoData.deviceId"
/>
</div>
</el-tab-pane>
<el-tab-pane label="运行状态" name="runingState">
<div class="tabs-body protocol-wrap">
<state-management
v-if="devudeRunState"
:deviceInfo="infoData"
:realTimeData="realTimeData"
></state-management>
</div>
</el-tab-pane>
<el-tab-pane v-if="infoData.deviceId === pInfo.deviceId" label="升级进度" name="batchUpgradeRate">
<div class="tabs-body">
<batch-upgrade-rate v-if="activeName === 'batchUpgradeRate'" ref="batchUpgradeRate" :sourceKey="pInfo.deviceKey"></batch-upgrade-rate>
</div>
</el-tab-pane>
<el-tab-pane label="功能" name="function">
<div class="tabs-body">
<function-wrap :deviceInfo="infoData" :sourceId="deviceId"></function-wrap>
</div>
</el-tab-pane>
</el-tabs>
<el-tab-pane label="设备信息" name="info">
<div class="tabs-body">
<info-wrap
v-if="activeName === 'info'"
:infoData="infoData"
:isTenant="isTenant"
@updateInfo="updateInfo($event)"
/>
</div>
</el-tab-pane>
<el-tab-pane
v-if="infoData.deviceType === 'GATEWAY_CONTROLLER' && !isTenant"
label="子设备"
name="child"
>
<div class="tabs-body">
<child-device
v-if="activeName === 'child'"
:pDevcieInfo="infoData"
:sourceId="infoData.deviceId"
@EventUpload="handleUpload"
@toChildEvent="toNewDevice"
></child-device>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="触发器" name="trigger">-->
<!-- <div class="tabs-body protocol-wrap">-->
<!-- <trigger-wrap-->
<!-- v-if="activeName === 'trigger'"-->
<!-- :deviceInfo="infoData"-->
<!-- :sourceId="infoData.deviceId"-->
<!-- ></trigger-wrap>-->
<!-- </div>-->
<!-- </el-tab-pane>-->
<el-tab-pane label="固件" name="oat">
<div class="tabs-body protocol-wrap">
<model-oat
v-if="activeName === 'oat'"
:deviceInfo="infoData"
:isTenant="isTenant"
@updateInfo="updateInfo($event)"
></model-oat>
</div>
</el-tab-pane>
<el-tab-pane label="日志" name="devLog">
<div class="tabs-body">
<device-log
v-if="activeName === 'devLog'"
:pDevcieInfo="infoData"
:sourceId="infoData.deviceId"
></device-log>
</div>
</el-tab-pane>
<el-tab-pane label="场景" name="scene">
<div class="tabs-body">
<e-device-scene
v-if="activeName === 'scene'"
:sourceId="infoData.deviceId"
/>
</div>
</el-tab-pane>
<el-tab-pane v-if="infoData.deviceId === pInfo.deviceId" label="升级进度" name="batchUpgradeRate">
<div class="tabs-body">
<batch-upgrade-rate v-if="activeName === 'batchUpgradeRate'" ref="batchUpgradeRate" :sourceKey="pInfo.deviceKey"></batch-upgrade-rate>
</div>
</el-tab-pane>
<el-tab-pane label="功能" name="function">
<div class="tabs-body">
<function-wrap :deviceInfo="infoData" :sourceId="deviceId"></function-wrap>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div style="height: 0;">
<!-- 添加或修改建筑类型对话框 -->
<dialog-template
:title="dialogTitle"
:visible="dialogOpen"
style=""
width="880px"
@close="dialogOpen = false"
>
<e-batch-firmware-upgrade
slot="dialog-center"
:sourceData="this.form.data"
:sourceId="this.pInfo.deviceId"
@handleChange="handleFirmwareChange"
></e-batch-firmware-upgrade>
<div slot="dialog-footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="submitForm"
> </el-button
>
<el-button size="mini" @click="() => {dialogOpen = false}"> </el-button>
</div>
<!-- 添加或修改建筑类型对话框 -->
<dialog-template
:title="dialogTitle"
:visible="dialogOpen"
style=""
width="880px"
@close="dialogOpen = false"
>
<e-batch-firmware-upgrade
slot="dialog-center"
:sourceData="this.form.data"
:sourceId="this.pInfo.deviceId"
@handleChange="handleFirmwareChange"
></e-batch-firmware-upgrade>
<div slot="dialog-footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="submitForm"
> </el-button
>
<el-button size="mini" @click="() => {dialogOpen = false}"> </el-button>
</div>
</dialog-template>
</div>
</dialog-template>
</div>
</div>
</template>
<script>
@ -434,29 +436,29 @@ export default {
.link-to-list {
display: flex;
color: #656363;
justify-content: flex-end;
font-size: 20px;
//height: 0;
//background: #e4eaf3;
height: 0;
background: #e4eaf3;
display: flex;
position: relative;
top: 10px;
z-index: 100;
//width: 120px;
//left: calc(100% - 120px);
width: 120px;
left: calc(100% - 120px);
cursor: default;
justify-content: flex-start;
flex-wrap: nowrap;
flex-direction: row-reverse;
.el-button--medium.is-circle {
//width: 25px;
//height: 20px;
padding: 10px;
width: 25px;
height: 20px;
padding: 0;
background: #0d8afd;
color: #fff;
font-size: 16px;
border-radius: 5px;
//height: 30px;
//width: 100%;
height: 30px;
width: 100%;
font-size: 14px;
}
}
@ -466,8 +468,8 @@ export default {
}
.is-widening {
//width: 220px;
//left: calc(100% - 220px);
width: 220px;
left: calc(100% - 220px);
}
.info-tabs-circuit {
@ -1075,23 +1077,23 @@ export default {
}
}
.iot-circuit-breaker-details-warp
.info-tabs-circuit
.el-tabs__content::-webkit-scrollbar {
.info-tabs-circuit
.el-tabs__content::-webkit-scrollbar {
/*滚动条整体样式*/
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 3px;
}
.iot-circuit-breaker-details-warp
.info-tabs-circuit
.el-tabs__content::-webkit-scrollbar-thumb {
.info-tabs-circuit
.el-tabs__content::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
box-shadow: inset 0 0 5px #9e9d9d;
background: #ffffff;
}
.iot-circuit-breaker-details-warp
.info-tabs-circuit
.el-tabs__content::-webkit-scrollbar-track {
.info-tabs-circuit
.el-tabs__content::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px #f6f6f6;
border-radius: 10px;

View File

@ -135,13 +135,26 @@
</div>
</div>
</div>
<div v-if="infoData.deviceType === 'MINIATURE_BREAKER' || infoData.deviceType === 'MOLDED_BREAKER'" class="group-list-info" style="margin-top: 15px;">
<div class="top">
<div class="top-label">
<svg-icon icon-class="A_product1" style="margin-right: 2px; height: 20px; width: 20px;" />告警配置
</div>
</div>
</div>
<div v-if="infoData.deviceType === 'MINIATURE_BREAKER' || infoData.deviceType === 'MOLDED_BREAKER'" class="group-list-table" style="border: 0;">
<device-alarm-config v-if="infoData.deviceType === 'MINIATURE_BREAKER' || infoData.deviceType === 'MOLDED_BREAKER'" :deviceId="infoData.deviceId" :deviceKey="infoData.deviceKey" />
</div>
</div>
</template>
<script>
import { updateDevice } from "@/api/iot/device";
import DeviceAlarmConfig from '@/views/profile/DeviceAlarmConfig/DeviceAlarmConfig'
export default {
name: "DeviceInfo",
props: ["infoData"],
components: {DeviceAlarmConfig},
data() {
return {
updateState: false,