Pārlūkot izejas kodu

设备列表-tab分页

Signed-off-by: hsshuxian <3049816743@qq.com>
hsshuxian 4 mēneši atpakaļ
vecāks
revīzija
1f5417610a
1 mainītis faili ar 204 papildinājumiem un 203 dzēšanām
  1. 204 203
      ems-ui-cloud/src/views/devmgr/attr/index.vue

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

@@ -85,16 +85,18 @@
                   操作<i class="el-icon-arrow-down el-icon--right"></i>
                 </el-button>
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item
-                    v-for="ability in abilityDevice"
-                    :key="ability.abilityKey"
-                    @click.native="handleDeviceOperate(ability,scope.row)"
-                  >
-                    {{ ability.abilityName }}
+                  <template v-if="abilityDevice && abilityDevice.length > 0">
+                    <el-dropdown-item
+                      v-for="ability in abilityDevice"
+                      :key="ability.abilityKey"
+                      @click.native="handleDeviceOperate(ability, scope.row)"
+                    >
+                      {{ ability.abilityName }}
+                    </el-dropdown-item>
+                  </template>
+                  <el-dropdown-item v-else>
+                    无
                   </el-dropdown-item>
-                  <el-dropdown-item @click.native="showCallLog(scope.row)">调用日志</el-dropdown-item>
-                  <el-dropdown-item @click.native="showReportLog(scope.row)">设备日志</el-dropdown-item>
-                  <el-dropdown-item @click.native="showEventLog(scope.row)">事件日志</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
             </template>
@@ -104,72 +106,6 @@
                     :limit.sync="queryParams.pageSize" @pagination="getList"
         />
 
-        <!-- 调用日志弹窗 -->
-        <el-dialog :visible.sync="callLog" title="调用日志" width="60%">
-          <el-form inline>
-            <el-form-item label="记录时间">
-              <el-date-picker
-                v-model="callDaterangeTime"
-                style="width: 240px"
-                value-format="yyyy-MM-dd HH:mm"
-                type="datetimerange"
-                range-separator="-"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-              ></el-date-picker>
-            </el-form-item>
-            <el-form-item label="能力标识">
-              <el-select v-model="callLogQueryParams.abilityKey" placeholder="请选择能力标识" clearable>
-                <el-option
-                  v-for="item in abilityDevice"
-                  :key="item.abilityKey"
-                  :label="item.abilityName"
-                  :value="item.abilityKey"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="调用状态">
-              <el-select v-model="callLogQueryParams.callStatus" placeholder="请选择调用状态" clearable>
-                <el-option
-                  v-for="(value, key) in callStatusOptions"
-                  :key="key"
-                  :label="value"
-                  :value="key"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleCallLogQuery">查询</el-button>
-              <el-button @click="resetCallLogQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-          <el-table :data="callLogData" 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="objCode"></el-table-column>
-            <el-table-column label="对象名称" prop="objName"></el-table-column>
-            <el-table-column label="对象能力" prop="abilityName"></el-table-column>
-            <el-table-column label="调用时间" prop="callTime"></el-table-column>
-            <el-table-column label="调用结果" align="center" width="100">
-              <template slot-scope="scope">
-                <span>{{ formatCallStatus(scope.row.callStatus) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" width="100">
-              <template slot-scope="scope">
-                <el-button type="text" size="mini" icon="el-icon-info" @click="handleCallLogDetail(scope.row)">详情
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <pagination
-            v-show="callLogQueryTotal > 0"
-            :total="callLogQueryTotal"
-            :page.sync="callLogQueryParams.pageNum"
-            :limit.sync="callLogQueryParams.pageSize"
-            @pagination="handleCallLogQuery"
-          />
-        </el-dialog>
-
         <!-- 调用日志详情弹窗 -->
         <el-dialog :visible.sync="callLogDetailDialog" title="调用日志详情" width="50%">
           <div v-if="callLogDetailData">
@@ -189,47 +125,6 @@
           </div>
         </el-dialog>
 
-        <!-- 设备日志弹窗 -->
-        <el-dialog :visible.sync="reportLog" title="设备日志" width="60%">
-          <el-form inline>
-            <el-form-item label="记录时间">
-              <el-date-picker
-                v-model="logDaterangeTime"
-                style="width: 240px"
-                value-format="yyyy-MM-dd HH:mm"
-                type="datetimerange"
-                range-separator="-"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-              ></el-date-picker>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleLogQuery">查询</el-button>
-              <el-button @click="resetLogQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-          <el-table :data="reportLogData" 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="objCode"></el-table-column>
-            <el-table-column label="对象名称" prop="objName"></el-table-column>
-            <el-table-column label="消息类型" prop="msgDesc"></el-table-column>
-            <el-table-column label="上报时间" prop="reportTime" width="180"></el-table-column>
-            <el-table-column label="操作" align="center" width="100">
-              <template slot-scope="scope">
-                <el-button type="text" size="mini" icon="el-icon-info" @click="handleReportLogDetail(scope.row)">详情
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <pagination
-            v-show="logQueryTotal > 0"
-            :total="logQueryTotal"
-            :page.sync="logQueryParams.pageNum"
-            :limit.sync="logQueryParams.pageSize"
-            @pagination="handleLogQuery"
-          />
-        </el-dialog>
-
         <!-- 设备日志详情弹窗 -->
         <el-dialog :visible.sync="reportDetailDialog" title="设备日志详情" width="50%">
           <div v-if="reportDetailData">
@@ -243,57 +138,6 @@
           </div>
         </el-dialog>
 
-        <!-- 事件日志弹框 -->
-        <el-dialog :visible.sync="eventLogDialog" title="事件日志" width="60%">
-          <el-form inline>
-            <el-form-item label="记录时间">
-              <el-date-picker
-                v-model="logDaterangeTime"
-                style="width: 240px"
-                value-format="yyyy-MM-dd HH:mm"
-                type="datetimerange"
-                range-separator="-"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-              ></el-date-picker>
-            </el-form-item>
-            <!-- 新增事件名称查询条件 -->
-            <el-form-item label="事件名称">
-              <el-select v-model="eventLogQueryParams.eventName" clearable>
-                <el-option
-                  v-for="item in eventData"
-                  :key="item.eventKey"
-                  :label="item.eventName"
-                  :value="item.eventKey"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleEventLogQuery">查询</el-button>
-              <el-button @click="resetEventLogQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-          <el-table :data="eventLogData" 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="objCode"></el-table-column>
-            <el-table-column label="对象名称" prop="objName"></el-table-column>
-            <el-table-column label="事件名称" prop="eventName"></el-table-column>
-            <el-table-column label="事件时间" prop="eventTime"></el-table-column>
-            <el-table-column label="操作" align="center" width="100">
-              <template slot-scope="scope">
-                <el-button type="text" size="mini" icon="el-icon-info" @click="handleEventLogDetail(scope.row)">详情
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <pagination
-            v-show="eventLogQueryTotal > 0"
-            :total="eventLogQueryTotal"
-            :page.sync="eventLogQueryParams.pageNum"
-            :limit.sync="eventLogQueryParams.pageSize"
-            @pagination="handleEventLogQuery"
-          />
-        </el-dialog>
         <!-- 事件日志详情弹框 -->
         <el-dialog :visible.sync="eventLogDetailDialog" title="事件日志详情" width="50%">
           <div v-if="eventLogDetailData">
@@ -304,39 +148,41 @@
             <p><strong>事件描述:</strong>{{ eventLogDetailData.eventDetail }}</p>
           </div>
         </el-dialog>
-       <!--详情        -->
+
+       <!--详情 -->
         <el-dialog :visible.sync="open" title="设备状态详情" custom-class="detail-dialog">
           <div v-if="curRow">
-            <!--分页导航 @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="event"></el-tab-pane>
               <el-tab-pane label="设备能力" name="ability"></el-tab-pane>
+              <el-tab-pane label="调用日志" name="callLog"></el-tab-pane>
+              <el-tab-pane label="设备日志" name="reportLog"></el-tab-pane>
+              <el-tab-pane label="事件日志" name="eventLog"></el-tab-pane>
             </el-tabs>
 
-
-            <!--  设备基本信息 -->
+            <!-- 设备基本信息 -->
             <div v-if="activeTab === 'basic'">
               <el-card class="box-card">
                 <div>
                   <p><span class="bold">设备名称:</span>{{ curRow.deviceName }}</p>
                   <p><span class="bold">设备代码:</span>{{ curRow.deviceCode }}</p>
-                  <p><span class="bold">设备分类:</span>{{ curRow.deviceCategoryName + getPsName(curRow.psName)}}</p>
+                  <p><span class="bold">设备分类:</span>{{ curRow.deviceCategoryName + getPsName(curRow.psName) }}</p>
                   <p><span class="bold">归属设施:</span>{{ curRow.refFacsName }}</p>
                   <p><span class="bold">归属区域:</span>{{ buildRefAreaName(curRow) }}</p>
                   <p><span class="bold">安装位置:</span>{{ curRow.location === null ? '无' : curRow.location }}</p>
-                  <p><span class="bold">归属系统:</span>{{ curRow.subsystemName === null ? '无' : curRow.subsystemName}}</p>
+                  <p><span class="bold">归属系统:</span>{{ curRow.subsystemName === null ? '无' : curRow.subsystemName }}</p>
                   <p>
                     <span class="bold">设备状态:</span>
                     <span :class="getDeviceStatusClass(curRow.deviceStatus)">
-                      {{ getDeviceStatus(curRow.deviceStatus) }}
+                       {{ getDeviceStatus(curRow.deviceStatus) }}
                     </span>
                   </p>
                 </div>
               </el-card>
             </div>
-            <!-- 属性信息 -->
+
+            <!-- 设备参数 -->
             <div v-if="activeTab === 'attr'">
               <el-card class="box-card">
                 <div v-for="(tableData, tableName) in attrTables" :key="tableName">
@@ -345,23 +191,23 @@
                     <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="属性值" align="center">
                       <template slot-scope="scope">
-                        <span v-if="tableData.title === '状态属性'">
-                       {{ scope.row.attrValueName || getAttrValueText(scope.row.attrValue) }}
-                        <span v-if="scope.row.attrUnit">{{ scope.row.attrUnit }}</span>
-                        </span>
+                <span v-if="tableData.title === '状态属性'">
+                  {{ scope.row.attrValueName || getAttrValueText(scope.row.attrValue) }}
+                  <span v-if="scope.row.attrUnit">{{ scope.row.attrUnit }}</span>
+                </span>
                         <span v-else>
-                         {{ scope.row.attrValue }}
-                        </span>
+                  {{ scope.row.attrValue }}
+                </span>
                       </template>
                     </el-table-column>
                   </el-table>
                 </div>
               </el-card>
             </div>
-            <!--设备能力-->
+
+            <!-- 设备能力 -->
             <div v-if="activeTab === 'ability'">
               <el-card class="box-card">
                 <el-table :data="abilityData" style="width: 100%" :show-header="true" :empty-text="'暂无数据'">
@@ -370,13 +216,167 @@
                   <el-table-column label="能力描述" prop="abilityDesc"></el-table-column>
                   <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="handleOperate(scope.row)">执行
-                      </el-button>
+                      <el-button size="mini" type="text" icon="el-icon-info" @click="handleOperate(scope.row)">执行</el-button>
                     </template>
                   </el-table-column>
                 </el-table>
               </el-card>
             </div>
+
+            <!-- 调用日志 -->
+            <div v-if="activeTab === 'callLog'">
+              <el-form inline>
+                <el-form-item label="记录时间">
+                  <el-date-picker
+                    v-model="callDaterangeTime"
+                    style="width: 240px"
+                    value-format="yyyy-MM-dd HH:mm"
+                    type="datetimerange"
+                    range-separator="-"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                  ></el-date-picker>
+                </el-form-item>
+                <el-form-item label="能力标识">
+                  <el-select v-model="callLogQueryParams.abilityKey" placeholder="请选择能力标识" clearable>
+                    <el-option
+                      v-for="item in abilityData"
+                      :key="item.abilityKey"
+                      :label="item.abilityName"
+                      :value="item.abilityKey"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="调用状态">
+                  <el-select v-model="callLogQueryParams.callStatus" placeholder="请选择调用状态" clearable>
+                    <el-option
+                      v-for="(value, key) in callStatusOptions"
+                      :key="key"
+                      :label="value"
+                      :value="key"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="handleCallLogQuery">查询</el-button>
+                  <el-button @click="resetCallLogQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+              <el-table :data="callLogData" 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="objCode"></el-table-column>
+                <el-table-column label="对象名称" prop="objName"></el-table-column>
+                <el-table-column label="对象能力" prop="abilityName"></el-table-column>
+                <el-table-column label="调用时间" prop="callTime"></el-table-column>
+                <el-table-column label="调用结果" align="center" width="100">
+                  <template slot-scope="scope">
+                    <span>{{ formatCallStatus(scope.row.callStatus) }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center" width="100">
+                  <template slot-scope="scope">
+                    <el-button type="text" size="mini" icon="el-icon-info" @click="handleCallLogDetail(scope.row)">详情</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="callLogQueryTotal > 0"
+                :total="callLogQueryTotal"
+                :page.sync="callLogQueryParams.pageNum"
+                :limit.sync="callLogQueryParams.pageSize"
+                @pagination="handleCallLogQuery"
+              />
+            </div>
+
+            <!-- 设备日志 -->
+            <div v-if="activeTab === 'reportLog'">
+              <el-form inline>
+                <el-form-item label="记录时间">
+                  <el-date-picker
+                    v-model="logDaterangeTime"
+                    style="width: 240px"
+                    value-format="yyyy-MM-dd HH:mm"
+                    type="datetimerange"
+                    range-separator="-"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                  ></el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="handleLogQuery">查询</el-button>
+                  <el-button @click="resetLogQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+              <el-table :data="reportLogData" 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="objCode"></el-table-column>
+                <el-table-column label="对象名称" prop="objName"></el-table-column>
+                <el-table-column label="消息类型" prop="msgDesc"></el-table-column>
+                <el-table-column label="上报时间" prop="reportTime" width="180"></el-table-column>
+                <el-table-column label="操作" align="center" width="100">
+                  <template slot-scope="scope">
+                    <el-button type="text" size="mini" icon="el-icon-info" @click="handleReportLogDetail(scope.row)">详情</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="logQueryTotal > 0"
+                :total="logQueryTotal"
+                :page.sync="logQueryParams.pageNum"
+                :limit.sync="logQueryParams.pageSize"
+                @pagination="handleLogQuery"
+              />
+            </div>
+
+            <!-- 事件日志 -->
+            <div v-if="activeTab === 'eventLog'">
+              <el-form inline>
+                <el-form-item label="记录时间">
+                  <el-date-picker
+                    v-model="logDaterangeTime"
+                    style="width: 240px"
+                    value-format="yyyy-MM-dd HH:mm"
+                    type="datetimerange"
+                    range-separator="-"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                  ></el-date-picker>
+                </el-form-item>
+                <el-form-item label="事件名称">
+                  <el-select v-model="eventLogQueryParams.eventName" clearable>
+                    <el-option
+                      v-for="item in eventData"
+                      :key="item.eventKey"
+                      :label="item.eventName"
+                      :value="item.eventKey"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="handleEventLogQuery">查询</el-button>
+                  <el-button @click="resetEventLogQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+              <el-table :data="eventLogData" 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="objCode"></el-table-column>
+                <el-table-column label="对象名称" prop="objName"></el-table-column>
+                <el-table-column label="事件名称" prop="eventName"></el-table-column>
+                <el-table-column label="事件时间" prop="eventTime"></el-table-column>
+                <el-table-column label="操作" align="center" width="100">
+                  <template slot-scope="scope">
+                    <el-button type="text" size="mini" icon="el-icon-info" @click="handleEventLogDetail(scope.row)">详情</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="eventLogQueryTotal > 0"
+                :total="eventLogQueryTotal"
+                :page.sync="eventLogQueryParams.pageNum"
+                :limit.sync="eventLogQueryParams.pageSize"
+                @pagination="handleEventLogQuery"
+              />
+            </div>
           </div>
         </el-dialog>
       </el-col>
@@ -552,21 +552,21 @@ export default {
     },
 
     /**日志*/
-    showCallLog(row) {
-      this.curRow = row
-      this.getCallLog(row.deviceCode, this.callLogQueryParams.startTime, this.callLogQueryParams.endTime)
-      this.callLog = true
-    },
-    showReportLog(row) {
-      this.curRow = row
-      this.getReportLog(row.deviceCode, this.logQueryParams.startTime, this.logQueryParams.endTime) // 加载设备日志数据
-      this.reportLog = true
-    },
-    showEventLog(row) {
-      this.curRow = row;
-      this.getEventLog(row.deviceCode, this.logDaterangeTime[0], this.logDaterangeTime[1]);
-      this.eventLogDialog = true;
-    },
+    // showCallLog(row) {
+    //   this.curRow = row
+    //   this.getCallLog(row.deviceCode, this.callLogQueryParams.startTime, this.callLogQueryParams.endTime)
+    //   this.callLog = true
+    // },
+    // showReportLog(row) {
+    //   this.curRow = row
+    //   this.getReportLog(row.deviceCode, this.logQueryParams.startTime, this.logQueryParams.endTime) // 加载设备日志数据
+    //   this.reportLog = true
+    // },
+    // showEventLog(row) {
+    //   this.curRow = row;
+    //   this.getEventLog(row.deviceCode, this.logDaterangeTime[0], this.logDaterangeTime[1]);
+    //   this.eventLogDialog = true;
+    // },
    /** 查询事件日志*/
     handleEventLogQuery() {
       if (this.curRow) {
@@ -696,7 +696,7 @@ export default {
       }
       getModelByCode(row.deviceModel).then(response => {
         this.abilityDevice = response.data?.abilityList.filter(item => item.hiddenFlag === 1) || []
-        this.eventData = response.data?.eventList || []
+
 
       })
     },
@@ -816,7 +816,7 @@ export default {
       this.resetForm('queryForm')
       this.handleQuery()
     },
-    // 设备状态详情
+    /**设备状态详情*/
     handleDetail(row) {
       this.reset()
       this.curRow = row
@@ -825,6 +825,7 @@ export default {
         this.open = true
         this.abilityData = response.data?.abilityList.filter(item => item.hiddenFlag === 1) || []
         this.attrData = response.data?.attrList || []
+        this.eventData = response.data?.eventList || []
       })
       getObjAttr(2, this.curRow.deviceCode).then(response => {
         this.attrTables.Base.data = response.data?.Base || []