设备详情

Signed-off-by: hsshuxian <3049816743@qq.com>

ems-ui-cloud/src/views/basecfg/device/index.vue

@@ -332,64 +332,79 @@
         </el-drawer>
 
         <!-- 详情弹框 -->
-        <el-dialog :visible.sync="showDrawer" title="设备详情">
+        <el-dialog :visible.sync="showDrawer" title="设备状态详情" custom-class="detail-dialog">
           <div v-if="curRow">
+            <!-- 分页导航 -->
+            <el-tabs v-model="activeTab">
+              <el-tab-pane label="设备基本信息" name="basic"></el-tab-pane>
+              <el-tab-pane label="属性定义" name="attr"></el-tab-pane>
+              <el-tab-pane label="能力定义" name="ability"></el-tab-pane>
+              <el-tab-pane label="事件定义" name="event"></el-tab-pane>
+            </el-tabs>
+
             <!-- 设备基本信息 -->
-            <el-card class="box-card">
-              <div slot="header" class="clearfix">
-                <span class="section-title">设备基本信息</span>
-              </div>
-              <div>
-                <p>设备代码：{{ curRow.deviceCode }}</p>
-                <p>设备名称：{{ curRow.deviceName }}</p>
-                <p>设备类型：{{ curRow.deviceCategoryName }}</p>
-                <p>子系统：{{ curRow.subsystemName }}</p>
-                <p>归属区域：{{ curRow.areaPath }}</p>
-                <p>归属设施：{{ curRow.refFacsName }}</p>
-              </div>
-            </el-card>
+            <div v-if="activeTab === 'basic'">
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span class="section-title">设备状态基本信息</span>
+                </div>
+                <div>
+                  <p><span class="bold">设备名称：</span>{{ curRow.deviceName }}</p>
+                  <p><span class="bold">设备代码：</span>{{ curRow.deviceCode }}</p>
+                  <p><span class="bold">子系统：</span>{{ curRow.subsystemName }}</p>
+                  <p><span class="bold">设备类型：</span>{{ curRow.deviceCategoryName }}</p>
+                  <p><span class="bold">归属设施：</span>{{ curRow.refFacsName }}</p>
+                  <p><span class="bold">归属区域：</span>{{ curRow.areaPath }}</p>
+                </div>
+              </el-card>
+            </div>
 
             <!-- 属性信息 -->
-            <el-card class="box-card" v-if="attrData.length > 0">
-              <div slot="header" class="clearfix">
-                <span class="section-title">属性定义</span>
-              </div>
-              <div v-for="(item, index) in attrData" :key="index">
-                <p>属性名称：{{ item.attrName }}</p>
-                <p>属性值：{{ item.attrValue }}</p>
-                <p>属性单位：{{ item.attrUnit }}</p>
-                <!-- 在每个条目之后添加横线，除了最后一个条目 -->
-                <div v-if="index < attrData.length - 1" class="divider"></div>
-              </div>
-            </el-card>
-            <!-- 能力信息 -->
-            <el-card class="box-card" v-if="abilityData.length > 0">
-              <div slot="header" class="clearfix">
-                <span class="section-title">能力定义</span>
-              </div>
-              <div v-for="(item, index) in abilityData" :key="index">
-                <p>能力名称：{{ item.abilityName }}</p>
-                <p>能力键：{{ item.abilityKey }}</p>
-                <p>能力参数：{{ item.abilityParam }}</p>
-                <p>能力描述：{{ item.abilityDesc }}</p>
-                <!-- 在每个条目之后添加横线，除了最后一个条目 -->
-                <div v-if="index < abilityData.length - 1" class="divider"></div>
-              </div>
-            </el-card>
-            <!-- 事件信息 -->
-            <el-card class="box-card" v-if="eventData.length > 0">
-              <div slot="header" class="clearfix">
-                <span class="section-title">事件定义</span>
-              </div>
-              <div v-for="(item, index) in eventData" :key="index">
-                <p>事件名称：{{ item.eventKey }}</p>
-                <p>事件类型：{{ item.eventType === 1 ? '消息上报' : '异常告警' }}</p>
-                <p>事件代码：{{ item.eventCode }}</p>
-                <p>外部事件代码：{{ item.extEventCode }}</p>
-                <!-- 在每个条目之后添加横线，除了最后一个条目 -->
-                <div v-if="index < eventData.length - 1" class="divider"></div>
-              </div>
-            </el-card>
+            <div v-if="activeTab === 'attr'">
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span class="section-title">属性定义</span>
+                </div>
+                <el-table :data="attrData" style="width: 100%" :show-header="true" :empty-text="'暂无数据'">
+                  <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
+                  <el-table-column label="属性名称" prop="attrName"></el-table-column>
+                  <el-table-column label="属性值" prop="attrValue"></el-table-column>
+                  <el-table-column label="属性单位" prop="attrUnit"></el-table-column>
+                </el-table>
+              </el-card>
+            </div>
+
+            <!-- 能力定义 -->
+            <div v-if="activeTab === 'ability'">
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span class="section-title">能力定义</span>
+                </div>
+                <el-table :data="abilityData" style="width: 100%" :show-header="true" :empty-text="'暂无数据'">
+                  <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
+                  <el-table-column label="能力名称" prop="abilityName"></el-table-column>
+                  <el-table-column label="能力键" prop="abilityKey"></el-table-column>
+                  <el-table-column label="能力参数" prop="abilityParam"></el-table-column>
+                  <el-table-column label="能力描述" prop="abilityDesc"></el-table-column>
+                </el-table>
+              </el-card>
+            </div>
+
+            <!-- 事件定义 -->
+            <div v-if="activeTab === 'event'">
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span class="section-title">事件定义</span>
+                </div>
+                <el-table :data="eventData" style="width: 100%" :show-header="true" :empty-text="'暂无数据'">
+                  <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
+                  <el-table-column label="事件名称" prop="eventKey"></el-table-column>
+                  <el-table-column label="事件类型" prop="eventType" :formatter="formatEventType"></el-table-column>
+                  <el-table-column label="事件代码" prop="eventCode"></el-table-column>
+                  <el-table-column label="外部事件代码" prop="extEventCode"></el-table-column>
+                </el-table>
+              </el-card>
+            </div>
           </div>
         </el-dialog>
       </el-col>
@@ -415,6 +430,7 @@ export default {
   components: { Treeselect },
   data() {
     return {
+      activeTab: 'basic',
       ComponentRow: [],
       componentForm: {},
       subcategoryCode: '',
@@ -540,6 +556,9 @@ export default {
     this.getAllDevProcess(this.subcategoryCode)
   },
   methods: {
+    formatEventType(row, column, cellValue) {
+      return cellValue === 1 ? '消息上报' : '异常告警';
+    },
     /** 查询能源设备列表 */
     getList() {
       this.loading = true
@@ -1032,4 +1051,21 @@ export default {
   min-width: 100px;
   flex: 1;
 }
+
+.status-online {
+  color: #00FF00; /* 在线状态颜色 */
+  background-color: #DDFFDD;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.status-offline {
+  color: #FF0000; /* 离线状态颜色 */
+  background-color: #FFDDDD;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.detail-dialog .el-dialog {
+  width: 80%;
+}
 </style>

ems-ui-cloud/src/views/devmgr/attr/index.vue

@@ -177,7 +177,7 @@ export default {
   components: {Treeselect},
   data () {
     return {
-      activeTab: 'basic', // 默认显示设备基本信息
+      activeTab: 'basic',
       // 遮罩层
       loading: true,
       // 选中数组