🌷 UI(内容): 给企业端子断路器设备信息添加告警配置
This commit is contained in:
fhysy
parent
209163eb36
commit
89c3b3047b
|
|
@ -8,19 +8,20 @@
|
||||||
@changeEvent="viewDeviceChange($event)"
|
@changeEvent="viewDeviceChange($event)"
|
||||||
@wsRealTImeMsg="wsRealTImeMsg($event)"
|
@wsRealTImeMsg="wsRealTImeMsg($event)"
|
||||||
></device-select>
|
></device-select>
|
||||||
<div :class="infoData.deviceType === 'GATEWAY_CONTROLLER' ? 'link-to-list is-widening': 'link-to-list'" class="main-device-card">
|
<div class="main-device-card">
|
||||||
<el-button circle icon="el-icon-d-arrow-left" style="margin-left: 10px;" title="返回列表" @click="toTableClick"
|
<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
|
||||||
>
|
>
|
||||||
<el-button v-if="infoData.deviceType === 'GATEWAY_CONTROLLER'" circle title="批量升级" @click="batchUpgradeOpen">批量升级</el-button>
|
<el-button v-if="infoData.deviceType === 'GATEWAY_CONTROLLER'" circle title="批量升级" @click="batchUpgradeOpen">批量升级</el-button>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-tabs-circuit main-device-card">
|
<div class="info-tabs-circuit">
|
||||||
<div v-show="breadcrumbList.length > 1" class="breadcrumb-wrap">
|
<div v-show="breadcrumbList.length > 1" class="breadcrumb-wrap">
|
||||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||||
<el-breadcrumb-item
|
<el-breadcrumb-item
|
||||||
v-for="(item, index) in breadcrumbList"
|
v-for="(item, index) in breadcrumbList"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
:class="
|
:class="
|
||||||
item.deviceId === deviceId
|
item.deviceId === deviceId
|
||||||
|
|
@ -28,123 +29,124 @@
|
||||||
: 'breadcrumb-span'
|
: 'breadcrumb-span'
|
||||||
"
|
"
|
||||||
@click="deviceClick(item, index)"
|
@click="deviceClick(item, index)"
|
||||||
>{{ item.deviceName }}</span
|
>{{ item.deviceName }}</span
|
||||||
>
|
>
|
||||||
</el-breadcrumb-item>
|
</el-breadcrumb-item>
|
||||||
</el-breadcrumb>
|
</el-breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
<el-tabs
|
<el-tabs
|
||||||
v-model="activeName"
|
v-model="activeName"
|
||||||
:class="breadcrumbList.length > 1 ? 'children-wrap' : ''"
|
: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"
|
|
||||||
>
|
>
|
||||||
<div class="tabs-body">
|
<el-tab-pane label="运行状态" name="runingState">
|
||||||
<child-device
|
<div class="tabs-body protocol-wrap">
|
||||||
v-if="activeName === 'child'"
|
<state-management
|
||||||
:pDevcieInfo="infoData"
|
v-if="devudeRunState"
|
||||||
:sourceId="infoData.deviceId"
|
:deviceInfo="infoData"
|
||||||
@EventUpload="handleUpload"
|
:realTimeData="realTimeData"
|
||||||
@toChildEvent="toNewDevice"
|
></state-management>
|
||||||
></child-device>
|
</div>
|
||||||
</div>
|
</el-tab-pane>
|
||||||
</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">
|
<el-tab-pane label="设备信息" name="info">
|
||||||
<div class="tabs-body">
|
<div class="tabs-body">
|
||||||
<batch-upgrade-rate v-if="activeName === 'batchUpgradeRate'" ref="batchUpgradeRate" :sourceKey="pInfo.deviceKey"></batch-upgrade-rate>
|
<info-wrap
|
||||||
</div>
|
v-if="activeName === 'info'"
|
||||||
</el-tab-pane>
|
:infoData="infoData"
|
||||||
<el-tab-pane label="功能" name="function">
|
:isTenant="isTenant"
|
||||||
<div class="tabs-body">
|
@updateInfo="updateInfo($event)"
|
||||||
<function-wrap :deviceInfo="infoData" :sourceId="deviceId"></function-wrap>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
<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>
|
||||||
<div style="height: 0;">
|
<div style="height: 0;">
|
||||||
<!-- 添加或修改建筑类型对话框 -->
|
<!-- 添加或修改建筑类型对话框 -->
|
||||||
<dialog-template
|
<dialog-template
|
||||||
:title="dialogTitle"
|
:title="dialogTitle"
|
||||||
:visible="dialogOpen"
|
:visible="dialogOpen"
|
||||||
style=""
|
style=""
|
||||||
width="880px"
|
width="880px"
|
||||||
@close="dialogOpen = false"
|
@close="dialogOpen = false"
|
||||||
>
|
>
|
||||||
<e-batch-firmware-upgrade
|
<e-batch-firmware-upgrade
|
||||||
slot="dialog-center"
|
slot="dialog-center"
|
||||||
:sourceData="this.form.data"
|
:sourceData="this.form.data"
|
||||||
:sourceId="this.pInfo.deviceId"
|
:sourceId="this.pInfo.deviceId"
|
||||||
@handleChange="handleFirmwareChange"
|
@handleChange="handleFirmwareChange"
|
||||||
></e-batch-firmware-upgrade>
|
></e-batch-firmware-upgrade>
|
||||||
<div slot="dialog-footer" class="dialog-footer">
|
<div slot="dialog-footer" class="dialog-footer">
|
||||||
<el-button size="mini" type="primary" @click="submitForm"
|
<el-button size="mini" type="primary" @click="submitForm"
|
||||||
>确 定</el-button
|
>确 定</el-button
|
||||||
>
|
>
|
||||||
<el-button size="mini" @click="() => {dialogOpen = false}">取 消</el-button>
|
<el-button size="mini" @click="() => {dialogOpen = false}">取 消</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</dialog-template>
|
</dialog-template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -434,29 +436,29 @@ export default {
|
||||||
.link-to-list {
|
.link-to-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
color: #656363;
|
color: #656363;
|
||||||
justify-content: flex-end;
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
//height: 0;
|
height: 0;
|
||||||
//background: #e4eaf3;
|
background: #e4eaf3;
|
||||||
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
//width: 120px;
|
width: 120px;
|
||||||
//left: calc(100% - 120px);
|
left: calc(100% - 120px);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
.el-button--medium.is-circle {
|
.el-button--medium.is-circle {
|
||||||
//width: 25px;
|
width: 25px;
|
||||||
//height: 20px;
|
height: 20px;
|
||||||
padding: 10px;
|
padding: 0;
|
||||||
background: #0d8afd;
|
background: #0d8afd;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
//height: 30px;
|
height: 30px;
|
||||||
//width: 100%;
|
width: 100%;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -466,8 +468,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-widening {
|
.is-widening {
|
||||||
//width: 220px;
|
width: 220px;
|
||||||
//left: calc(100% - 220px);
|
left: calc(100% - 220px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-tabs-circuit {
|
.info-tabs-circuit {
|
||||||
|
|
@ -1075,23 +1077,23 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.iot-circuit-breaker-details-warp
|
.iot-circuit-breaker-details-warp
|
||||||
.info-tabs-circuit
|
.info-tabs-circuit
|
||||||
.el-tabs__content::-webkit-scrollbar {
|
.el-tabs__content::-webkit-scrollbar {
|
||||||
/*滚动条整体样式*/
|
/*滚动条整体样式*/
|
||||||
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
||||||
height: 3px;
|
height: 3px;
|
||||||
}
|
}
|
||||||
.iot-circuit-breaker-details-warp
|
.iot-circuit-breaker-details-warp
|
||||||
.info-tabs-circuit
|
.info-tabs-circuit
|
||||||
.el-tabs__content::-webkit-scrollbar-thumb {
|
.el-tabs__content::-webkit-scrollbar-thumb {
|
||||||
/*滚动条里面小方块*/
|
/*滚动条里面小方块*/
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: inset 0 0 5px #9e9d9d;
|
box-shadow: inset 0 0 5px #9e9d9d;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
.iot-circuit-breaker-details-warp
|
.iot-circuit-breaker-details-warp
|
||||||
.info-tabs-circuit
|
.info-tabs-circuit
|
||||||
.el-tabs__content::-webkit-scrollbar-track {
|
.el-tabs__content::-webkit-scrollbar-track {
|
||||||
/*滚动条里面轨道*/
|
/*滚动条里面轨道*/
|
||||||
box-shadow: inset 0 0 5px #f6f6f6;
|
box-shadow: inset 0 0 5px #f6f6f6;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
|
||||||
|
|
@ -135,13 +135,26 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { updateDevice } from "@/api/iot/device";
|
import { updateDevice } from "@/api/iot/device";
|
||||||
|
import DeviceAlarmConfig from '@/views/profile/DeviceAlarmConfig/DeviceAlarmConfig'
|
||||||
export default {
|
export default {
|
||||||
name: "DeviceInfo",
|
name: "DeviceInfo",
|
||||||
props: ["infoData"],
|
props: ["infoData"],
|
||||||
|
components: {DeviceAlarmConfig},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
updateState: false,
|
updateState: false,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue