日志视图列表页及数据调用 #1

+<title>日志视图</title>
+<iframe src="/vue3/index.html#/esData" frameborder="0" class="layadmin-iframe"   style="height: 99.5%!important;"/>

@@ -5,6 +5,8 @@
 @import "../css/cacheData.css";
 @import "../css/cacheData.css";
 /*告警消除处理*/
 /*告警消除处理*/
 @import "../css/alarmsClear.css";
 @import "../css/alarmsClear.css";
+/*日志详情*/
+@import "../css/esData.css";
 
 
 .d-flex {
 .d-flex {
     display: flex;
     display: flex;

+.esData-detail-container{
+    padding:0 15px;
+    min-height: 500px;
+    max-height:800px;
+    overflow: auto;
+}
+.esData-detail-container .info-title{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    padding-top:10px;
+    font-size: 16px;
+    margin-top:10px;
+}
+.esData-detail-container .info-content{
+    margin-bottom: 5px;
+}
+.esData-detail-container .info-content-body{
+    background: #ffffff;
+    padding:10px 30px;
+}
+.esData-detail-container .content-body-info{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+}
+.esData-detail-container .info-item{
+    width:33%;
+    margin:8px 0;
+    text-align: left;
+}
+.esData-detail-info-content{
+    text-align: left;
+}

@@ -103,6 +103,12 @@ const routes = [{
 		name: 'busDoc',
 		name: 'busDoc',
 		component: () => myImport('views/busDoc/index')
 		component: () => myImport('views/busDoc/index')
 	},
 	},
+	//日志
+	{
+		path: '/esData',
+		name: 'esDataIndex',
+		component: () => myImport('views/esData/index'),
+	},
 ];
 ];
 
 
 // hash模式： createWebHashHistory
 // hash模式： createWebHashHistory

@@ -271,22 +271,28 @@ global.openDetail = (resId, resType, proxy) => {
 
 
     // 获取资源详情
     // 获取资源详情
     proxy.$http.get(`/api-web/v32/res/detail/${resId}`, {}, function (res) {
     proxy.$http.get(`/api-web/v32/res/detail/${resId}`, {}, function (res) {
-        if (res && res.map) {
-            let data = res.map;
-
-            provider = data.provider;
-            ip = data.ip;
-            resTypeName = data.resTypeName;
-            adminName = data.adminName;
-            manageIp = data.manageIp;
-            collProtocol = data.collProtocol;
-            name = data.resName;
-            if(resType == ''){
-                resType = data.resType;
+        if(res && res.success){
+            if (res && res.map) {
+                let data = res.map;
+
+                provider = data.provider;
+                ip = data.ip;
+                resTypeName = data.resTypeName;
+                adminName = data.adminName;
+                manageIp = data.manageIp;
+                collProtocol = data.collProtocol;
+                name = data.resName;
+                if(resType == ''){
+                    resType = data.resType;
+                }
+
+                lyaui.commonCols.detailPage(resId, resType, editFlag, provider, name, ip, resTypeName, adminName, manageIp, collProtocol);
             }
             }
+        }else{
+            proxy.$global.showMsg('该资源暂未监控', "error");
 
 
-            lyaui.commonCols.detailPage(resId, resType, editFlag, provider, name, ip, resTypeName, adminName, manageIp, collProtocol);
         }
         }
+
     });
     });
 }
 }
 
 

+<div class="esData-detail-container">
+  <el-descriptions
+          class=""
+          title="日志信息"
+          :column="2"
+          :size="size"
+          border
+  >
+    <el-descriptions-item>
+      <template #label>
+        <div class="cell-item">
+          资源名称
+        </div>
+      </template>
+      {{detail.resName}}
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <div class="cell-item">
+          IP地址
+        </div>
+      </template>
+      {{detail.host}}
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <div class="cell-item">
+          资源类型
+        </div>
+      </template>
+      {{detail.resTypeName}}
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <div class="cell-item">
+          日志来源
+        </div>
+      </template>
+      {{detail.type}}
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <div class="cell-item">
+          日志类型
+        </div>
+      </template>
+      {{detail.program}}
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <div class="cell-item">
+          采集时间
+        </div>
+      </template>
+      {{detail.dbTimeStr}}
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <div class="cell-item">
+          日志时间
+        </div>
+      </template>
+      {{detail.timestamp}}
+    </el-descriptions-item>
+  </el-descriptions>
+  <div class="info-title">
+    <span style="font-weight:bold">日志内容</span>
+  </div>
+  <div class="esData-detail-info-content" v-html="detail.message">
+  </div>
+</div>

+export default {
+    name: 'esDataDetail',
+    template: '',
+    components: {
+
+    },
+    props: {
+        detail:{
+            type:Object,
+            default: {}
+        }
+    },
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+
+        // 挂载完
+        Vue.onMounted(() => {
+        })
+
+
+        return {
+
+        }
+    }
+
+}

+<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
+  <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}">
+    <div class="search">
+      <div class="condition">
+        <el-form-item >
+          <el-input  v-model="search.keyword" placeholder="=资源名称、日志内容="></el-input>
+        </el-form-item>
+          <el-form-item >
+              <el-dropdown>
+                  <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
+              </el-dropdown>
+          </el-form-item>
+        <el-form-item >
+          <el-select v-model="search.program" class="m-2" placeholder="日志类型" clearable>
+            <el-option
+                    v-for="item in logTypeData"
+                    :key="item.ddicCode"
+                    :label="item.ddicName"
+                    :value="item.ddicCode"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-date-picker
+                  v-model="search.dateTime"
+                  type="datetimerange"
+                  range-separator="-"
+                  start-placeholder="开始时间"
+                  end-placeholder="结束时间"
+                  format="YYYY-MM-DD HH:mm:ss"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+          />
+        </el-form-item>
+        <el-form-item >
+          <el-button @click="getDataList">查询</el-button>
+        </el-form-item>
+      </div>
+    </div>
+
+    <div class="search-table">
+      <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
+                     :showIndex="true"
+                     :total="tableData.count"
+                     @loaddata = "loaddata"
+                     :showSelection="true"
+                     :showBorder="true"
+                     :loading="false"
+                     :pageSize="pageSize"
+                     :showPage="true"
+                     :showTools="true"
+                     :height="height - 110">
+        <template #default="{row,prop,column}">
+          <div v-if="prop == 'resName'">
+              <span class="resName-span" style="cursor: pointer;color:#1e9fff" @click="goResDetail(row.resId,row.resName,row.resType)">{{row.resName}}</span>
+          </div>
+          <div v-if="prop == 'message'" >
+            <div v-html="row.message" style="overflow: hidden;	text-overflow: ellipsis;display: -webkit-box;	-webkit-line-clamp: 1;	-webkit-box-orient: vertical;"></div>
+          </div>
+        </template>
+        <template #tools="{scope}">
+          <div class="list-handle">
+                        <span class="icon-bg">
+                            <i class="el-icon-view" title="查看" @click="handleView(scope.row)"></i>
+                        </span>
+          </div>
+        </template>
+      </cm-table-page>
+    </div>
+  </div>
+</div>
+
+<!--弹框-->
+<cm-dialog :title="dialog.title" width="60%" :showDialogVisible="dialog.show" @hidedialog="hideDialog" :showFooter="false">
+  <template v-slot>
+    <esDataDetail  :detail="dialog.detail" />
+  </template>
+</cm-dialog>
+

+export default {
+    name: 'esDataIndex',
+    template: '',
+    components: {
+        'esDataDetail': Vue.defineAsyncComponent(
+            () => myImport('views/esData/esDataDetail/index')
+        )
+    },
+    props: [],
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+        let height = Vue.ref(window.innerHeight);
+        let dateTime=Vue.ref([])
+        let search = Vue.ref({
+            program:'',
+            sortBy:'dbTime',
+            scopeBy:'dbTime',
+            keyword: '',
+            type:'syslog',
+            pageNum: 1,
+            pageSize: 20,
+            dateTime:[],
+            resType:'',
+        });
+        let dialog = Vue.ref({
+            title : "日志详情",
+            show:false,
+            esId : ''
+        });
+        //表格字段
+        let tableData = Vue.ref({
+            count:0,
+            dataList: [],
+            columns: [
+                {
+                    prop: 'timestamp',
+                    label: '日志时间',
+                    sortable: true,
+                    align: 'center',
+                    width: '250',
+                },
+                {
+                    prop: 'resName',
+                    label: '资源名称',
+                    sortable: true,
+                    align: 'center',
+                    width: '250'
+                },
+               {
+                    prop: 'resTypeName',
+                    label: '资源类型',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                }, {
+                    prop: 'host',
+                    label: 'IP地址',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                }, {
+                    prop: 'type',
+                    label: '日志来源',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                },
+                {
+                    prop: 'program',
+                    label: '日志类型',
+                    sortable: true,
+                    align: 'center',
+                    width: '200'
+                },
+                {
+                    prop: 'message',
+                    label: '日志内容',
+                    sortable: true,
+                    align: 'center',
+                },
+            ]
+        })
+        let resTypeArr = Vue.ref([]);
+        let getResType = (arr) => {
+            var types = arr.map(function (v) {
+                return v.id;
+            });
+            resTypeArr.value = types;
+            search.value.resType=resTypeArr.value.join(',');
+            // getDataList();
+        }
+        //获取时间点 转年月日的方法
+        const getDateTime=(newDate)=>{
+            let dateTime='';
+            let year=newDate.getFullYear();//获取当前年
+            let month1=(newDate.getMonth()+1)+'';
+            let month=timeFormat(month1);//获取当前月
+            let day=timeFormat(newDate.getDate());//获取当前日
+            let hours=timeFormat(newDate.getHours()+'');//获取当前时
+            let minutes=timeFormat(newDate.getMinutes()+'');//获取当前分
+            let seconds=timeFormat(newDate.getSeconds()+'');//获取当前秒
+            dateTime= year+'-'+month+'-'+day;//' '+hours+':'+minutes+':'+seconds;
+            return dateTime;
+        }
+        //转换个位数为 00
+        let timeFormat =(number)=> {
+            return number.length == 1 ? ('0' + number) : number
+        }
+        // 获取列表
+        let getDataList = () => {
+            let nowDate=getDateTime(new Date());
+            let startTime=search.value.dateTime[0]?search.value.dateTime[0]:'';
+            let endTime=search.value.dateTime[1]?search.value.dateTime[1]:'';
+            let startDateStr=startTime?startTime.split(' ')[0]:'';
+            let endDateStr=endTime?endTime.split(' ')[0]:'';
+            let dateStr='';
+            if(search.value.dateTime.length>0){
+                if(startDateStr!=endDateStr){
+                    dateStr='log-syslog-search';
+                }else{
+                    dateStr='log-syslog_'+startDateStr;
+
+                }
+            }else {
+                dateStr='log-syslog_'+nowDate;
+            }
+
+            let params={
+                indexName:dateStr,
+                pageNum: search.value.pageNum,
+                pageSize: search.value.pageSize,
+                type:search.value.type,
+                sortBy:search.value.sortBy,
+                scopeBy:search.value.scopeBy,
+                startTime:startTime,
+                endTime: endTime,
+                resType:search.value.resType,
+                program:search.value.program,
+                param:{
+                    'resName.keyword': search.value.keyword,
+                    'host.keyword':search.value.keyword,
+                    'message.keyword':search.value.keyword,
+                }
+            }
+             proxy.$http.post(`/api-web/esData/list`, params, function (res) {
+                 if (res && res.object) {
+                     let dataList=res.object.content;
+                     let arr=[];
+                     dataList.map(item=>{
+                       /*  for(let key in item[0]){
+                             if(key=='timestamp'){
+                                 console.log("item[0]['timestamp']",item[0]['timestamp'])
+                                 item[0]['timestampStr']=getDateTime(item[0]['timestamp'])
+                             }
+                         }*/
+                         arr.push(item[0])
+                     })
+                     tableData.value.dataList = arr;
+                     tableData.value.count = parseInt(res.object.total);
+                 } else {
+                     tableData.value.dataList = [];
+                     tableData.value.count = 0;
+                 }
+             });
+        }
+
+        let loaddata = ({page, limit}) => {
+            search.value.pageNum = page;
+            search.value.pageSize = limit;
+        }
+
+        let hideDialog = (flg) => {
+            dialog.value.show = flg;
+        }
+
+        // 处理弹框
+        let handle = (row) =>{
+            hideDialog(true);
+            dialog.value.detail = row;
+        }
+
+        //查看详情
+        let handleView = (row) =>{
+            handle(row);
+        }
+        //查看资源详情
+        let goResDetail=(resId,resName,resType)=>{
+            proxy.$global.openDetail(resId, resType, proxy);
+
+        }
+        //日志类型数据
+        let logTypeData=Vue.ref([]);
+        let getLogType=()=>{
+            proxy.$http.post(`/api-web/manage/ddic/findSucDdics/LOG_SOURCE_TYPE`, {}, function (res) {
+                if (res && res.data) {
+                    logTypeData.value = res.data;
+                }
+            });
+        }
+        // 挂载完
+        Vue.onMounted(() => {
+            getDataList();
+            getLogType();
+        })
+
+
+        return {
+            logTypeData,
+            getLogType,
+            dateTime,
+            height,
+            search,
+            dialog,
+            hideDialog,
+            handle,
+            loaddata,
+            tableData,
+            getDataList,
+            resTypeArr,
+            getResType,
+            handleView,
+            goResDetail,
+            getDateTime
+        }
+    }
+
+}

@@ -359,6 +359,26 @@ layui.define(['view'], function(exports){
                 //纠正首尾
                 //纠正首尾
                 return href.replace(/^(\/+)/, '/')
                 return href.replace(/^(\/+)/, '/')
                     .replace(new RegExp('\/' + setter.entry + '$'), '/'); //过滤路由最后的默认视图文件名（如：index）
                     .replace(new RegExp('\/' + setter.entry + '$'), '/'); //过滤路由最后的默认视图文件名（如：index）
+            },
+            //封装获取cookie
+            getCookie:function(name) {
+                var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
+                if (arr = document.cookie.match(reg))
+                    return (arr[2]);
+                else
+                    return null;
+            },
+            setCookie:function (c_name, value, expiredays) {
+                var exdate = new Date();
+                exdate.setDate(exdate.getDate() + expiredays);
+                document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
+            },
+            delCookie:function (name) {
+                var exp = new Date();
+                exp.setTime(exp.getTime() - 1);
+                var cval = getCookie(name);
+                if (cval != null)
+                    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
             }
             }
 
 
             //……
             //……

@@ -169,7 +169,13 @@ const routes = [{
 		path: '/alarmsubscribe/excludeKpi',
 		path: '/alarmsubscribe/excludeKpi',
 		name: 'alarmSubscribeExcludeKpi',
 		name: 'alarmSubscribeExcludeKpi',
 		component: () => myImport('views/alarmsubscribe/index')
 		component: () => myImport('views/alarmsubscribe/index')
-	}
+	},
+	//日志
+	{
+		path: '/esData',
+		name: 'esDataIndex',
+		component: () => myImport('views/esData/index'),
+	},
 ];
 ];
 
 
 // hash模式： createWebHashHistory
 // hash模式： createWebHashHistory