能力、属性、事件

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

@@ -80,6 +80,8 @@
           <el-table-column label="所属子系统" align="center" prop="subsystemName" />
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-info" @click="handleDetail(scope.row)" v-hasPermi="['basecfg:emsfacs:edit']">
+                详情</el-button>
               <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                 v-hasPermi="['basecfg:device:edit']">
                 修改</el-button>
@@ -131,6 +133,72 @@
             <el-button @click="cancel">取 消</el-button>
           </div>
         </el-dialog>
+
+        <!-- 详情弹框 -->
+        <el-dialog :visible.sync="showDrawer" title="设备详情">
+          <div v-if="curRow">
+            <!-- 设备基本信息 -->
+            <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>
+
+            <!-- 属性信息 -->
+            <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.attrKey }}</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>
+        </el-dialog>
       </el-col>
     </el-row>
   </div>
@@ -143,12 +211,14 @@ import {listAllFacs,getFacsCategorygetByCode} from "@/api/basecfg/emsfacs"
 import {listSubsystemAll} from '@/api/adapter/subsystem'
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {getModelByCode} from "@/api/basecfg/objModel";
 
 export default {
   name: 'Device',
   components: {Treeselect},
   data () {
     return {
+      showDrawer: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -191,6 +261,10 @@ export default {
         refArea: null,
         refFacs: null
       },
+      curRow: {},
+      attrData: [],
+      abilityData: [],
+      eventData: [],
       // 表单参数
       form: {},
       // 表单校验
@@ -295,6 +369,21 @@ export default {
       this.open = true
       this.title = '添加能源设备'
     },
+    /**设备详情按钮*/
+    handleDetail(row) {
+      this.showDrawer = true
+      this.curRow= row
+      console.log("data",this.curRow)
+      this.subKey = this.$options.data().subKey
+      getModelByCode(this.curRow.facsModel).then(response => {
+        const code=response.data
+        console.log("code",code)
+        this.attrData=response.data.attrList
+        this.eventData=response.data.eventList
+        this.abilityData=response.data.abilityList
+
+      })
+    },
     /** 修改按钮操作 */
     handleUpdate (row) {
       this.reset()
@@ -368,3 +457,17 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+
+.divider {
+  border-bottom: 2px solid #ebeef5; /* 这是Element UI的默认边框颜色，你可以根据需要调整 */
+  margin: 10px 0; /* 这是横线与内容的间距，你可以根据需要调整 */
+}
+.section-title {
+  font-size: 18px; /* 标题字体大小 */
+  font-weight: bold; /* 字体加粗 */
+  margin-top: 20px; /* 标题顶部间距 */
+  margin-bottom: 10px; /* 标题底部间距 */
+}
+
+</style>

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

@@ -361,9 +361,9 @@ export default {
       abilityForm: {},
       //  表单校验
       rules: {
-        // modelCode: [
-        //   { required: true, message: "模型code不能为空", trigger: "blur" }
-        // ],
+        modelCode: [
+          { required: true, message: "模型code不能为空", trigger: "blur" }
+        ],
         modelName: [
           { required: true, message: "模型名称不能为空", trigger: "blur" }
         ],
@@ -372,12 +372,12 @@ export default {
         ]
       },
       eventRules: {
-        // modelCode: [
-        //   {required: true, message: "模型code不能为空", trigger: "blur"}
-        // ],
-        // eventKey: [
-        //   {required: true, message: "事件名称不能为空", trigger: "blur"}
-        // ],
+        modelCode: [
+          {required: true, message: "模型code不能为空", trigger: "blur"}
+        ],
+        eventKey: [
+          {required: true, message: "事件名称不能为空", trigger: "blur"}
+        ],
         eventType: [
           {required: true, message: "事件类型不能为空", trigger: "change"}
         ],
@@ -386,9 +386,9 @@ export default {
         ],
       },
       attrRules: {
-        // modelCode: [
-        //   {required: true, message: "模型code不能为空", trigger: "blur"}
-        // ],
+        modelCode: [
+          {required: true, message: "模型code不能为空", trigger: "blur"}
+        ],
         attrKey: [
           {required: true, message: "属性标识不能为空", trigger: "blur"}
         ],

ems-ui/src/views/basecfg/emsfacs/index.vue

@@ -140,7 +140,6 @@
               <p>设施名称：{{ curRow.facsCategoryName }}</p>
               <p>设施子类：{{ curRow.facsSubCategoryName }}</p>
               <p>归属区域：{{ curRow.refAreaName}}</p>
-              <!-- 其他基本信息 -->
             </div>
           </el-card>
 
@@ -151,9 +150,11 @@
             </div>
             <div v-for="(item, index) in attrData" :key="index">
               <p>属性名称：{{ item.attrName }}</p>
-              <p>属性描述：{{ item.attrDesc }}</p>
+              <p>属性标识：{{ item.attrKey }}</p>
               <p>属性值：{{ item.attrValue }}</p>
               <p>属性单位：{{ item.attrUnit }}</p>
+              <!-- 在每个条目之后添加横线，除了最后一个条目 -->
+              <div v-if="index < attrData.length - 1" class="divider"></div>
             </div>
           </el-card>
 
@@ -164,8 +165,11 @@
             </div>
             <div v-for="(item, index) in abilityData" :key="index">
               <p>能力名称：{{ item.abilityName }}</p>
-              <p>下发参数：{{ item.abilityParam }}</p>
-              <p>描述：{{ item.abilityDesc }}</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>
 
@@ -175,11 +179,10 @@
               <span class="section-title">事件定义</span>
             </div>
             <div v-for="(item, index) in eventData" :key="index">
-              <p>事件名称：{{ item.eventName }}</p>
+              <p>事件名称：{{ item.eventKey }}</p>
               <p>事件类型：{{ item.eventType === 1 ? '消息上报' : '异常告警' }}</p>
               <p>事件代码：{{ item.eventCode }}</p>
               <p>外部事件代码：{{ item.extEventCode }}</p>
-              <p>描述：{{ item.eventDesc }}</p>
               <!-- 在每个条目之后添加横线，除了最后一个条目 -->
               <div v-if="index < eventData.length - 1" class="divider"></div>
             </div>

ems-ui/src/views/devmgr/state/index.vue

@@ -126,7 +126,7 @@
               </div>
               <div v-for="(item, index) in attrData" :key="index">
                 <p><span class="bold">属性名称：</span>{{ item.attrName }}</p>
-                <p><span class="bold">属性描述：</span>{{ item.attrDesc }}</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>
                 <!-- 在每个条目之后添加横线，除了最后一个条目 -->
@@ -139,7 +139,7 @@
               </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>
                 <p><span class="bold">属性单位：</span>暂无数据</p>
               </div>
@@ -152,8 +152,9 @@
               </div>
               <div v-for="(item, index) in abilityData" :key="index">
                 <p><span class="bold">能力名称：</span>{{ item.abilityName }}</p>
-                <p><span class="bold">下发参数：</span>{{ item.abilityParam }}</p>
-                <p><span class="bold">描述：</span>{{ item.abilityDesc }}</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>
@@ -164,8 +165,9 @@
               </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>
+                <p><span class="bold">能力参数：</span>暂无数据</p>
+                <p><span class="bold">能力描述：</span>暂无数据</p>
               </div>
             </el-card>
 
@@ -175,11 +177,10 @@
                 <span class="section-title">事件定义</span>
               </div>
               <div v-for="(item, index) in eventData" :key="index">
-                <p><span class="bold">事件名称：</span>{{ item.eventName }}</p>
+                <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>
-                <p><span class="bold">描述：</span>{{ item.eventDesc }}</p>
                 <!-- 在每个条目之后添加横线，除了最后一个条目 -->
                 <div v-if="index < eventData.length - 1" class="divider"></div>
               </div>
@@ -193,7 +194,6 @@
                 <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>