修改点

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

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

@@ -129,6 +129,7 @@
         <!-- 添加或修改能源设备对话框 -->
         <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
           <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+            <div>
             <el-form-item label="归属设施" prop="refFacs">
               <el-select v-model="form.refFacs">
                 <el-option v-for="item in facsOptions" :label="item.facsName" :value="item.facsCode"
@@ -136,15 +137,12 @@
                 />
               </el-select>
             </el-form-item>
-
             <el-form-item label="设备代码" prop="deviceCode">
               <el-input v-model="form.deviceCode" placeholder="请输入设备代码"/>
             </el-form-item>
             <el-form-item label="设备名称" prop="deviceName">
               <el-input v-model="form.deviceName" placeholder="请输入设备名称"/>
             </el-form-item>
-
-
             <el-form-item label="设备工艺" prop="psCode" v-if="queryParams.deviceCategory === 'W'">
               <el-select v-model="form.psCode">
                 <el-option v-for="item in devOptions" :label="item.psName" :value="item.psCode"
@@ -152,16 +150,8 @@
                 />
               </el-select>
             </el-form-item>
-
-            <el-form-item label="设备类型" prop="deviceType">
-              <el-select v-model="form.deviceCategory">
-                <el-option v-for="item in subCategoryOptions" :label="item.name" :value="item.code"
-                           :key="item.code"
-                />
-              </el-select>
-            </el-form-item>
             <el-form-item label="设备模型" prop="deviceModel">
-              <el-select v-model="form.deviceModel" style="width:100%" @change="handleModelChange">
+              <el-select v-model="form.deviceModel" style="width:100%" @change="handleModelChange"   clearable>
                 <el-option
                   v-for="item in modelList"
                   :label="item.modelName"
@@ -170,56 +160,6 @@
                 />
               </el-select>
             </el-form-item>
-            <!-- 这里可以展示属性名称和属性值 -->
-            <div v-if="attrList.length > 0" class="attr-list-container">
-              <h3>模型属性:</h3>
-              <ul>
-                <li v-for="attr in attrList" :key="attr.attrKey" class="attr-item">
-                  <span class="attr-name">{{ attr.attrName }} ({{ attr.attrUnit }}):</span>
-                  <!-- 使用 el-input 组件允许用户编辑属性值 -->
-                  <el-input
-                    v-model="attrValuesMap[attr.attrKey]"
-                    placeholder="点击编辑"
-                    size="small"
-                    @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])"
-                  >
-                  </el-input>
-                </li>
-              </ul>
-            </div>
-            <h3 class="attr-list-container" v-if="attrList.length > 0">自定义属性
-              <el-form-item label="" prop="attrList">
-                <el-table class="attr-table" v-loading="loading" :data="form.customAttrs" max-height="280px"
-                          key="'customAttrs'"
-                >
-                  <el-table-column label="标识" align="center" prop="attrKey">
-                    <template slot-scope="scope">
-                      <el-input size="mini" v-model="scope.row.attrKey" placeholder="请输入标识"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="属性名" align="center" prop="attrName">
-                    <template slot-scope="scope">
-                      <el-input size="mini" v-model="scope.row.attrName" placeholder="请输入属性名"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="属性值" align="center" prop="attrValue">
-                    <template slot-scope="scope">
-                      <el-input size="mini" v-model="scope.row.attrValue" placeholder="请输入属性值"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column align="center" label="操作">
-                    <template slot="header">
-                      <div class="operateBtns" @click="addCustomAttr">
-                        <span>添加</span><i class="el-icon-circle-plus-outline"></i>
-                      </div>
-                    </template>
-                    <template slot-scope="scope">
-                      <i class="el-icon-delete" @click="deleteCustomAttr(scope.$index)"></i>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-form-item>
-            </h3>
             <el-form-item label="子系统" prop="subsystemCode">
               <el-select v-model="form.subsystemCode">
                 <el-option v-for="item in subsystemOptions" :label="item.systemName" :value="item.systemCode"
@@ -227,6 +167,58 @@
                 />
               </el-select>
             </el-form-item>
+            </div>
+            <!-- 这里可以展示属性名称和属性值 -->
+              <div v-if="attrList.length > 0" class="attr-list-container">设备参数:
+                <ul>
+                  <li v-for="attr in attrList" :key="attr.attrKey" class="attr-item">
+                    <span class="attr-name">{{ attr.attrName }} ({{ attr.attrUnit }}): </span>
+                    <el-input
+                      v-model="attrValuesMap[attr.attrKey]"
+                      placeholder="点击编辑"
+                      size="small"
+                      @blur="updateAttrValue(attr.attrKey, attrValuesMap[attr.attrKey])"
+                      class="attr-input"
+                    />
+                  </li>
+                </ul>
+              </div>
+              <div  v-if="attrList.length > 0" class="attr-list-container">设备自定义参数：
+                <el-form-item label="" prop="attrList">
+                  <el-table class="attr-table" v-loading="loading" :data="form.customAttrs" max-height="280px"
+                            key="'customAttrs'"
+                  >
+                    <el-table-column label="标识" align="center" prop="attrKey">
+                      <template slot-scope="scope">
+                        <el-input size="mini" v-model="scope.row.attrKey" placeholder="请输入标识"/>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="属性名" align="center" prop="attrName">
+                      <template slot-scope="scope">
+                        <el-input size="mini" v-model="scope.row.attrName" placeholder="请输入属性名"/>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="属性值" align="center" prop="attrValue">
+                      <template slot-scope="scope">
+                        <el-input size="mini" v-model="scope.row.attrValue" placeholder="请输入属性值"/>
+                      </template>
+                    </el-table-column>
+                    <el-table-column align="center" label="操作">
+                      <template slot="header">
+                        <div class="operateBtns" @click="addCustomAttr">
+                          <span>添加</span><i class="el-icon-circle-plus-outline"></i>
+                        </div>
+                      </template>
+                      <template slot-scope="scope">
+                        <i class="el-icon-delete" @click="deleteCustomAttr(scope.$index)"></i>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </el-form-item>
+              </div>
+
+
+
           </el-form>
           <div slot="footer" class="dialog-footer">
             <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -283,7 +275,7 @@
             />
 
             <!-- 添加或修改设备器件对话框 -->
-            <el-dialog :title="title" :visible.sync="componentOpen" width="500px" append-to-body>
+            <el-dialog :title="title" :visible.sync="componentOpen" width="600px" append-to-body>
               <el-form ref="componentForm" :model="componentForm" :rules="componentRules" label-width="150px">
                 <!--                <el-form-item label="设备code" prop="deviceCode">-->
                 <!--                  <el-input v-model="componentForm.deviceCode" placeholder="请输入设备code" />-->
@@ -651,8 +643,11 @@ export default {
         subsystemCode: null,
         psCode: null,
         createTime: null,
-        updateTime: null
+        updateTime: null,
+        customAttrs: [] // 确保自定义属性列表也被初始化
       }
+      this.attrList = []; // 重置属性模板列表
+      this.attrValuesMap = {}; // 重置属性值映射
       this.resetForm('form')
     },
     componentReset() {
@@ -693,6 +688,9 @@ export default {
       this.reset()
       this.open = true
       this.title = '添加能源设备'
+      this.attrList = []; // 重置属性模板列表
+      this.form.customAttrs = []; // 重置自定义属性列表
+      this.attrValuesMap = {}; // 重置属性值映射
     },
     /**设备器件按钮*/
     handleDevProcess(row) {
@@ -744,6 +742,10 @@ export default {
         this.form = response.data
         this.open = true
         this.title = '修改能源设备'
+        this.attrList = []; // 重置属性模板列表
+        this.form.customAttrs = []; // 重置自定义属性列表
+        this.attrValuesMap = {}; // 重置属性值映射
+        this.getObjAttr(2, this.form.deviceCode); // 获取设备的属性定义和属性值
       })
       const recursion = true
       const areaCode = '0'
@@ -1014,17 +1016,19 @@ export default {
   font-weight: bold;
 }
 
-.attr-list-container h3 {
-  font-weight: bold;
+.attr-list-container  ul {
+  padding: 0;
+  list-style: none;
 }
 
 .attr-item {
-  list-style-type: none;
-  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
 }
 
-.attr-name {
-  font-weight: bold;
+.attr-input {
+  min-width: 100px;
+  flex: 1;
 }
-
 </style>

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

@@ -188,6 +188,16 @@
                 <el-form-item label="属性单位" prop="attrUnit">
                   <el-input v-model="attrForm.attrUnit" placeholder="请输入属性单位"/>
                 </el-form-item>
+                <el-form-item label="属性值类型" prop="attrValueType">
+                  <el-select v-model="attrForm.attrValueType" placeholder="请选择属性值类型">
+                    <el-option
+                      v-for="option in getAttrValueOptions()"
+                      :key="option.value"
+                      :label="option.label"
+                      :value="option.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
               </el-form>
               <div slot="footer" class="dialog-footer">
                 <el-button type="primary" @click="submitAttrForm">确 定</el-button>
@@ -370,8 +380,8 @@ export default {
         { code: 2, name: '异常警告' },
       ],
       attrTypeOptions: [
-        { "label": "静态属性", "value": 1 },
-        { "label": "动态属性", "value": 2 }
+        { "label": "静态属性", "value": 0},
+        { "label": "动态属性", "value": 1 }
       ],
       // 查询参数
       queryEventParams: {
@@ -459,22 +469,11 @@ export default {
       subKey: 'attr'
     }
   },
-  // computed: {
-  //   filteredModelList() {
-  //     // 根据当前激活的 objType 过滤模型列表
-  //     return this.modelList.filter(item => item.objType.toString() === this.activeObjType);
-  //   }
-  // },
-  // watch: {
-  //   activeObjType(newVal) {
-  //     // 当激活的 objType 变化时，重新获取列表数据
-  //     this.getList();
-  //   }
-  // },
   created() {
     this.getList()
   },
   methods: {
+
     handleTabClick(tab) {
       this.activeObjType = tab.name;
       this.form.objType = null; // 重置表单时清除预设的 objType
@@ -484,7 +483,7 @@ export default {
     handleDetail(row) {
       this.showDrawer = true
       this.curRow = row
-      console.log('模型代码', this.modelCode)
+     //console.log('模型代码', this.modelCode)
       getModel(this.curRow.id).then(response => {
         const data = response.data
         console.log('data', data)
@@ -512,6 +511,14 @@ export default {
       this.title = '添加能源对象事件'
       this.abilityForm.modelCode= this.curRow.modelCode
     },
+    /**属性值类型*/
+    getAttrValueOptions() {
+      return [
+        { label: "数值", value: "Value" },
+        { label: "字符串", value: "String" },
+        { label: "枚举", value: "Enum" }
+      ];
+    },
     /** 查询能源对象属性列表 */
     getList() {
       this.loading = true
@@ -572,7 +579,8 @@ export default {
         attrType: null,
         attrName: null,
         attrValue: null,
-        attrUnit: null
+        attrUnit: null,
+        attrValueType:null
       }
       this.resetForm('attrForm')
     },
@@ -607,6 +615,7 @@ export default {
       const id = row.id || this.ids
       getAttr(id).then(response => {
         this.attrForm = response.data
+        console.log("this.attrForm",this.attrForm)
         this.attrOpen = true
         this.title = '修改能源对象属性'
         this.attrForm.modelCode= this.curRow.modelCode

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

@@ -75,9 +75,9 @@
               <span>{{ getColModeName(scope.row.colMode) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="采集周期" align="center" prop="colCycle">
+          <el-table-column label="周期时长（秒）" align="center" prop="colCycle">
             <template slot-scope="scope">
-              <span>{{ getColCycleName(scope.row.colCycle) }}</span>
+              <span>{{ scope.row.colCycle}}</span>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -117,19 +117,37 @@
                 </el-radio>
               </el-radio-group>
             </el-form-item>
+<!--            <el-form-item label="采集方式" prop="colMode">-->
+<!--              <el-radio-group v-model="form.colMode" size="medium" @change="colModeChange">-->
+<!--                <el-radio v-for="(item, index) in colModeOptions" :key="index" :label="item.code" :disabled="item.disabled">{{item.name}}-->
+<!--                </el-radio>-->
+<!--              </el-radio-group>-->
+<!--            </el-form-item>-->
+<!--            <el-form-item label="周期时长（s）" prop="colCycle">-->
+<!--              <el-select v-model="form.colCycle" :disabled="form.colMode === 1">-->
+<!--                <el-option v-for="item in colCycleOptions" :label="item.name" :value="item.code" :key="item.code" />-->
+<!--              </el-select>-->
+<!--            </el-form-item>-->
+            <!-- 采集方式 -->
             <el-form-item label="采集方式" prop="colMode">
               <el-radio-group v-model="form.colMode" size="medium" @change="colModeChange">
                 <el-radio v-for="(item, index) in colModeOptions" :key="index" :label="item.code" :disabled="item.disabled">{{item.name}}
                 </el-radio>
               </el-radio-group>
             </el-form-item>
-            <el-form-item label="采集周期" prop="colCycle">
-              <el-select v-model="form.colCycle" :disabled="form.colMode === 1">
-                <el-option v-for="item in colCycleOptions" :label="item.name" :value="item.code" :key="item.code" />
-              </el-select>
+
+            <!-- 周期时长 -->
+            <el-form-item v-if="form.colMode !== 1" label="周期时长" prop="colCycle">
+              <template v-if="form.colMode === 0">
+                <!-- 自动抄表时，显示输入框 -->
+                <el-input v-model="form.colCycle" :min="1" :max="86400" placeholder="请输入周期时长（秒）" />
+              </template>
+              <template v-else>
+                <!-- 手动抄表时，不显示任何内容 -->
+              </template>
             </el-form-item>
             <el-form-item label="倍率" prop="magnification">
-              <el-input-number v-model="form.magnification" :min="0" :max="99" @change="handleChange"></el-input-number>
+              <el-input-number v-model="form.magnification" :min="0" :max="99" ></el-input-number>
             </el-form-item>
             <el-form-item label="规格描述" prop="specDesc">
               <el-input v-model="form.specDesc" placeholder="请输入规格描述" />
@@ -387,16 +405,6 @@ export default {
       return name
     },
 
-    getColCycleName(colCycle) {
-      const cycleMap = {
-        0: '实时',
-        1: '分钟',
-        2: '小时',
-        3: '天',
-        4: '月'
-      }
-      return cycleMap[colCycle] || ''
-    },
     getColModeName(colMode) {
       const modeMap = {
         0: '自动抄表',

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

@@ -51,11 +51,6 @@
           <el-table-column label="设备分类" align="center" prop="deviceCategoryName" />
           <el-table-column label="归属设施" align="center" prop="refFacsName" />
           <el-table-column label="子系统" align="center" prop="subsystemName" />
-          <!--          <el-table-column label="设备状态" align="center" prop="deviceStatus">-->
-          <!--            <template slot-scope="scope">-->
-          <!--              <dict-tag :options="dict.type.sys_device_stat" :value="scope.row.deviceStatus"/>-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
           <el-table-column label="设备状态" align="center" prop="deviceStatus">
             <template slot-scope="scope">
               <span :style="{
@@ -84,101 +79,82 @@
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize" @pagination="getList" />
 
-        <!-- 设备基本信息 -->
         <el-dialog :visible.sync="open" title="设备状态详情" custom-class="detail-dialog">
           <div v-if="curRow">
-            <!-- 设施基本信息 -->
-            <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.refFacs }}</p>
-                <p><span class="bold">归属区域：</span>{{ curRow.areaPath }}</p>
-                <p><span class="bold">子系统：</span>{{ curRow.subsystemName }}</p>
-                <p><span class="bold">设备状态：</span>{{ curRow.deviceStatus }}</p>
-              </div>
-            </el-card>
+            <!--分页导航 @tab-click="handleTabClick"-->
+            <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>
 
+            <!--  设备基本信息 -->
+            <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.refFacs }}</p>
+                  <p><span class="bold">归属区域：</span>{{ curRow.areaPath }}</p>
+                  <p><span class="bold">子系统：</span>{{ curRow.subsystemName }}</p>
+                  <p>
+                    <span class="bold">设备状态：</span>
+                    <span :class="getDeviceStatusClass(curRow.deviceStatus)">
+                      {{ getDeviceStatus(curRow.deviceStatus) }}
+                    </span>
+                  </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><span class="bold">属性名称：</span>{{ item.attrName }}</p>
-                <p><span class="bold">属性标识：</span>{{ item.attrKey }}</p>
-                <p><span class="bold">属性值：</span>{{ item.attrValue }}</p>
-                <p><span class="bold">属性单位：</span>{{ item.attrUnit }}</p>
-                <!-- 在每个条目之后添加横线，除了最后一个条目 -->
-                <div v-if="index < attrData.length - 1" class="divider"></div>
-              </div>
-            </el-card>
-            <el-card class="box-card" v-else>
-              <div slot="header" class="clearfix">
-                <span class="section-title">属性定义</span>
-              </div>
-              <div>
-                <p><span class="bold">属性名称：</span>暂无数据</p>
-                <p><span class="bold">属性标识：</span>暂无数据</p>
-                <p><span class="bold">属性值：</span>暂无数据</p>
-                <p><span class="bold">属性单位：</span>暂无数据</p>
-              </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><span class="bold">能力名称：</span>{{ item.abilityName }}</p>
-                <p><span class="bold">能力键：</span>{{ item.abilityKey }}</p>
-                <p><span class="bold">能力参数：</span>{{ item.abilityParam }}</p>
-                <p><span class="bold">能力描述：</span>{{ item.abilityDesc }}</p>
-                <!-- 在每个条目之后添加横线，除了最后一个条目 -->
-                <div v-if="index < abilityData.length - 1" class="divider"></div>
-              </div>
-            </el-card>
-            <el-card class="box-card" v-else>
-              <div slot="header" class="clearfix">
-                <span class="section-title">能力定义</span>
-              </div>
-              <div>
-                <p><span class="bold">能力名称：</span>暂无数据</p>
-                <p><span class="bold">能力键：</span>暂无数据</p>
-                <p><span class="bold">能力参数：</span>暂无数据</p>
-                <p><span class="bold">能力描述：</span>暂无数据</p>
-              </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><span class="bold">事件名称：</span>{{ item.eventKey }}</p>
-                <p><span class="bold">事件类型：</span>{{ item.eventType === 1 ? '消息上报' : '异常告警' }}</p>
-                <p><span class="bold">事件代码：</span>{{ item.eventCode }}</p>
-                <p><span class="bold">外部事件代码：</span>{{ item.extEventCode }}</p>
-                <!-- 在每个条目之后添加横线，除了最后一个条目 -->
-                <div v-if="index < eventData.length - 1" class="divider"></div>
-              </div>
-            </el-card>
-            <el-card class="box-card" v-else>
-              <div slot="header" class="clearfix">
-                <span class="section-title">事件定义</span>
-              </div>
-              <div>
-                <p><span class="bold">事件名称：</span>暂无数据</p>
-                <p><span class="bold">事件类型：</span>暂无数据</p>
-                <p><span class="bold">事件代码：</span>暂无数据</p>
-                <p><span class="bold">外部事件代码：</span>暂无数据</p>
-              </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="attrKey"></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>
@@ -201,6 +177,7 @@ export default {
   components: {Treeselect},
   data () {
     return {
+      activeTab: 'basic', // 默认显示设备基本信息
       // 遮罩层
       loading: true,
       // 选中数组
@@ -257,6 +234,16 @@ export default {
     this.getSubCategorygetByCode()
   },
   methods: {
+    getDeviceStatus(status) {
+      return status === 1 ? "在线" : "离线";
+    },
+    getDeviceStatusClass(status) {
+      return status === 1 ? "status-online" : "status-offline";
+    },
+
+    formatEventType(row, column, cellValue) {
+      return cellValue === 1 ? '消息上报' : '异常告警';
+    },
     getDeviceStatusText (status) {
       const statusMap = {
         0: '运行',
@@ -306,7 +293,6 @@ export default {
       this.queryParams.locationRef = data.id
       this.handleQuery()
     },
-    // 取消按钮
     cancel () {
       this.open = false
       this.reset()
@@ -335,6 +321,7 @@ export default {
         this.eventData = response.data.eventList
         this.abilityData = response.data.abilityList
       })
+      this.activeTab = 'basic';
     },
     getFacsOptions () {
       const getFacsParams = {
@@ -381,17 +368,35 @@ export default {
 <style lang="scss" scoped>
 .detail-dialog .el-dialog {
   width: 80%;
-  /* 调整弹框宽度 */
 }
 
 .section-title {
   font-size: 18px;
-  /* 标题字体大小 */
   font-weight: bold;
-  /* 字体加粗 */
   margin-top: 20px;
-  /* 标题顶部间距 */
   margin-bottom: 10px;
-  /* 标题底部间距 */
+
+}
+
+.status-highlight {
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.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;
 }
+
 </style>