机房详情页告警及资源名称下探

@@ -55,6 +55,15 @@
     margin-top: 20px;
     border-collapse:collapse;
 }
+.machine-room-parent .search-table table{
+    margin-top:0;
+}
+.dataCenter-container  .alarm-dialog .el-dialog{
+    background: #ffffff;
+}
+.dataCenter-container .alarm-dialog .el-dialog__title{
+    color:#1e9fff;
+}
 .machine-room-parent table tr{
     height: 50px;
 }

@@ -57,16 +57,51 @@
             <div class='info-contain'>
                 <div class='info-text'>设备信息</div>
                 <div class='info-text-bot'>
-                    <p>资源名称：{{deviceDataInfo.resName}}</p>
+                    <p v-if="!isRes">资源名称：<span>{{deviceDataInfo.resName}}</span></p>
+                    <p v-if="isRes">资源名称：<span style="cursor: pointer;color: #1e9fff;" @click="goResDetail(deviceDataInfo.resId,deviceDataInfo.resType)">{{deviceDataInfo.resName}}</span></p>
                     <p>品 牌：{{deviceDataInfo.brand}}</p>
                     <p>型 号：{{deviceDataInfo.model}}</p>
                     <p>序 列 号：{{deviceDataInfo.serialnumber}}</p>
                     <p>业 务 IP：{{deviceDataInfo.ip}}</p>
                     <p>用 途：{{deviceDataInfo.purpose}}</p>
-                    <p >告警量111：{{deviceDataInfo.alarmNum == 1 }}</p>
+                    <p >告警量：<span style="cursor: pointer;color: #1e9fff;" @click="alarmList(deviceDataInfo.resId)">{{deviceDataInfo.alarmNum  }}</span></p>
                 </div>
             </div>
         </div>
     </div>
+    <div class="alarm-dialog">
+        <cm-dialog title="告警列表" width="60%" :showDialogVisible="dialogVisible" @hidedialog="hidedialog" :showFooter="false" :top="'15vh'" >
+            <template v-slot>
+                <div class="search-table">
+                    <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
+                                   :showIndex="true" :total="count" :showSelection="false"
+                                   :showBorder="true" :loading="false" :pageSize="pageSize"
+                                   :showPage="true" :showTools="false" :height="(height - 400)" >
+                        <template #default="{row,prop,column}">
+                            <div v-if="prop == 'alarmLevel'" style="color:#fff;">
+                            <span style="background: #1e9fff;padding:20px;" v-if="row.alarmLevel == 1">
+                                一般
+                            </span>
+                                <span style="background: #FF7E00;padding:20px;" v-if="row.alarmLevel == 2">
+                                重要
+                            </span>
+                                <span style="background: #d81e06;padding:20px;" v-if="row.alarmLevel == 3">
+                                严重
+                            </span>
+                            </div>
+                        </template>
+                        <!-- <template #tools="{scope}">
+                             <div class="list-handle">
+                                 <span  class="icon-bg" style="color: #1e9fff;cursor: pointer;text-decoration: underline;">
+                                     告警消除
+                                 </span>
+                             </div>
+                         </template>-->
+                    </cm-table-page>
+                </div>
+            </template>
+        </cm-dialog>
+    </div>
+
 </div>
 

@@ -6,7 +6,21 @@ export default {
             () => myImport('views/commonComponents/machineRoomDetail/index')
         ),
     },
-    props:['detailData','machineData'],
+    props:{
+        detailData: {
+            type: Object,
+            default: {}
+        },
+        machineData: {
+            type: Object,
+            default: {}
+        },
+        //是否需要资源名称下探
+        isRes: {
+            type: Boolean,
+            default: false
+        },
+    },
     data(){
         return {
             domainName:sessionStorage.getItem('domainName'),
@@ -237,8 +251,85 @@ export default {
             proxy.isShowDevice=true;
             proxy.deviceDataInfo=item;
         }
+        let height = window.innerHeight;
+        let pageSize=Vue.ref(10);
+        let count=Vue.ref(0);
+        let columns=Vue.ref([
+            {
+                prop: 'alarmLevel',
+                label: '告警级别',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'alarmContent',
+                label: '告警内容',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'kpiName',
+                label: '指标名称',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'updateTime',
+                label: '告警时间',
+                sortable: true,
+                align: 'center',
+            },
+        ])
+        let tableDataList=Vue.ref([]);
+        let currentPage=Vue.ref(1);
+        //重新加载表格数据
+        let loadTableDataList = ({page, limit}) => {
+            currentPage.value = page;
+            pageSize.value = limit;
+            alarmList()
+        }
+        //展示告警列表
+        let alarmList=(resId)=>{
+            hidedialog(true);
+            let params={
+                page:currentPage.value,
+                limit:pageSize.value,
+                resId:resId
+            }
+            proxy.$http.get(`/api-web/home/alarm/alarmListPage`, params, function (res) {
+                if (res && res.success == true && res.data) {
+                    tableDataList.value = res.data;
+                    count.value=res.count;
+                }else{
+                    tableDataList.value = [];
+                    count.value=0;
+
+                }
+            })
+        }
+        //告警列表弹框操作
+        let dialogVisible=Vue.ref(false);
+        let hidedialog = (flg) => {
+            dialogVisible.value = flg;
+        }
+        //资源名称下探
+        let goResDetail=(resId,resType)=>{
+            if(props.isRes){
+                proxy.$global.openDetail(resId, resType, proxy);
+            }
 
+        }
         return{
+            height,
+            pageSize,
+            count,
+            columns,
+            tableDataList,
+            loadTableDataList,
+            alarmList,
+            dialogVisible,
+            goResDetail,
+            hidedialog,
             showDevice,
             isShowDevice,
             getDeviceInfo,