sasp-admin 0.2.57

package/src/views/log/error/logError.vue

@@ -0,0 +1,553 @@
+<!--异常监控日志-->
+<template>
+    <el-container  class="top_contain" >
+        <!--查询条件 -->
+        <el-header  style="height: auto">
+            <div class="search-form-parent el-card">
+                <el-form :inline="true" :model="crud.searchForm" size="small"
+                         class="demo-form-inline"  @keyup.enter.native="doSearch()" onSubmit="return false;" >
+
+                    <el-form-item label="错误类型"   style="margin-left: 20px">
+                        <el-select v-model="crud.searchForm.type" placeholder="请选择">
+                            <el-option label="前端JS报错" value="JS"></el-option>
+                            <el-option label="前端请求报错" value="HTTPERROR"></el-option>
+                            <el-option label="后台JAVA报错" value="JAVA"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item  label="报错时间"   >
+                        <el-date-picker   type="date" v-model="crud.searchForm.errorTimeQ"    style="width: 140px" >
+                        </el-date-picker> -
+                        <el-date-picker  type="date"  v-model="crud.searchForm.errorTimeZ"    style="width: 140px"  ></el-date-picker>
+                    </el-form-item>
+
+                    <el-form-item label="关键字" >
+                        <el-input   v-model="crud.searchForm.errorInfo"></el-input>
+                    </el-form-item>
+
+                    <el-form-item>
+                        <el-button   type="primary" icon="el-icon-search" @click="doSearch()" size="small">查询</el-button>
+                        <el-button  icon="el-icon-close" @click="resetSearch()" size="small">清空</el-button>
+                    </el-form-item>
+
+                </el-form>
+            </div>
+        </el-header>
+
+        <!--查询体 列表展示-->
+        <el-main  id="tableMain" style="height: 100%"  >
+            <el-container style="height:100%" class="table-list-container" >
+                <el-header style="height: auto;">
+                    <!--switch 开关-->
+<!--                    <el-switch-->
+<!--                      size="mini"-->
+<!--                      v-model="switchValue"-->
+<!--                      class="demo"-->
+<!--                      active-color="#00A854"-->
+<!--                      active-text="明细"-->
+<!--                      active-value="00000000"-->
+<!--                      inactive-color="#1E90FF"-->
+<!--                      inactive-text="简略"-->
+<!--                      inactive-value="10000000"-->
+<!--                      @change="switchChange"-->
+<!--                    />-->
+                    <!--删除-->
+                    <el-button  style="margin-left: 1%" type="danger" size="mini" round icon="el-icon-delete"  @click="remove()" >删除 </el-button>
+                </el-header>
+
+
+                <!--简略列表-->
+                <el-main style="height: 100%;" ref="tableMain"  >
+                    <el-table :data="crud.dataStore.records" :ref="crud.tableRef" stripe border height="100%"  style="width: 100%;">
+                        <el-table-column type="selection" width="40" align="center"></el-table-column>
+                        <el-table-column type="index" label=" " align="center" width="60"></el-table-column>
+                        <el-table-column label="错误类型"  prop="type"    align="center" width="150" ></el-table-column>
+                        <el-table-column  label="报错时间" prop="createTime"   align="center" width="200" ></el-table-column>
+                        <el-table-column  label="报错明细" prop="errorInfo" align="center">
+<!--                            <template slot-scope="scope">-->
+<!--                                <div align="left">-->
+<!--                                    <a href='javascript:void(0);' v-html="scope.row.errorInfo"  class="sqlStyle"  @click='showErrorDetail(scope.row)'>-->
+<!--                                    </a>-->
+<!--                                </div>-->
+<!--                            </template>-->
+                        </el-table-column>
+                    </el-table>
+                </el-main>
+
+            </el-container>
+        </el-main>
+
+        <!--底部分页-->
+        <el-footer>
+            <el-pagination
+                    :ref="crud.pageRef"
+                    :page-sizes="crud.pageSizes"
+                    :page-size="crud.pageSize"
+                    :current-page.sync="crud.page"
+                    :total="crud.dataStore.total"
+                    @current-change="handleCurrentChange"
+                    @size-change="handleSizeChange"
+                    layout="total, sizes, prev, pager, next, jumper">
+            </el-pagination>
+        </el-footer>
+
+        <!--查看错误日志详情-->
+        <el-dialog :close-on-click-modal=false title="查看错误日志信息"      class="errorDetailClass" height="80%" width="60%" top="10vh"    :visible.sync="operterSmsDetail" lock-scroll>
+            <el-form :data="erorRowsData">
+                <el-row :gutter="0"  style="border: 1px solid #c2c2c2;border-bottom: 0">
+                        <el-col  :span="8" >
+                            <el-form-item label-width="150px" label="错误类型：">
+                                {{erorRowsData.type}}
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8" :offset="6">
+                            <el-form-item  label="报错时间：">
+                                {{erorRowsData.errorTime}}
+                            </el-form-item>
+                        </el-col>
+                </el-row>
+
+                <el-row   style="border: 1px solid #c2c2c2;border-bottom: 0">
+                    <el-col :span="24">
+                        <div style="text-align: center;font-size: 16px">错误信息</div>
+                    </el-col>
+                </el-row>
+                <el-row style="border: 1px solid #c2c2c2;border-bottom: 0">
+                    <el-col :span="24" >
+                        <el-form-item label-width="150px"  label="服务端IP：">
+                            {{erorRowsData.serviceIp}}
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row style="border: 1px solid #c2c2c2;border-bottom: 0">
+                    <el-col :span="24" >
+                        <el-form-item label-width="150px"  label="报错文件：">
+                            <span style="word-break: break-word">{{erorRowsData.fileName}}</span>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row style="border: 1px solid #c2c2c2;border-bottom: 0">
+                    <el-col :span="24">
+                        <el-form-item  label-width="150px" label="错误明细：">
+                            <span style="word-break: break-word" v-html="erorRowsData.stacktrace" ></span>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row style="border: 1px solid #c2c2c2;border-bottom: 0">
+                    <el-col :span="24" >
+                        <el-form-item  label-width="150px" label="客户端IP：">
+                            {{erorRowsData.clientIp}}
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row style="border: 1px solid #c2c2c2;border-bottom: 0">
+                    <el-col :span="24">
+                        <el-form-item label-width="150px" label="错误行号：">
+                            {{erorRowsData.lineNumber}}
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row style="border: 1px solid #c2c2c2">
+                    <el-col :span="24">
+                        <el-form-item label-width="150px" label="错误信息：">
+                            <span style="word-break: break-word">{{erorRowsData.errorMsg}}</span>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+
+
+
+        </el-dialog>
+
+
+
+
+    </el-container>
+</template>
+
+<script>
+
+
+    export default {
+        //接收传过来的数据
+        name:"log-error",
+        show:true,
+        data() {
+            return {
+                releaseStatus:'1', //发布状态
+                releaseStatusDefault:'0',
+                conditionMap:{},
+                crud : new this.CrudUtil({
+                    vue: this,
+                    entityName:"logError",
+                    url:this.api.logError.url,
+                    initNoSearch:true
+
+                }),
+                formData:{
+                    id:"", 'phone':"",'content':"",'retCodeDesc':"",'type':"",'createTime':""
+                },
+                errorTypeObj:{
+                    "JS":"前端JS报错",
+                    "HTTPERROR":"前端请求报错",
+                    "JAVA":"后台JAVA报错"
+                },
+                operterSmsDetail:false,
+                erorRowsData:{},//详情页数据初始化
+
+                switchValue: 10000000, //默认显示简略
+                errorInfoArray:[],
+                isShowSimpleErrorLog:true, //默认显示简略
+                isShowDetailErrorLog:false, //默认不显示明细
+
+                selectedId:[], //已经选中id
+                selectedMap: new  Map(),
+                currentPage:"0", //当前页
+                pageSize:"10" //每页显示条数
+            }
+        },
+
+        created(){
+           this.initData();
+        },
+        watch: {
+            //如果返回的数据发生变化，则使用格式转化将   返回值中的 erroInfo 转化为数组方式
+
+        },
+        methods: {
+            initData(){
+                let vm = this;
+                vm.crud.search(); //选择过滤
+            },
+            resRepaledData(callbackVm,data){ // table渲染完成后选中已选择的数据
+                let vm = this;
+                console.log(vm.crud.dataStore.records);
+                vm.errorInfoArray = []; //每次初始化数组
+
+                vm.axios.post(this.api.logError.url+"/findPage",
+                    {"page":vm.crud.page,
+                      "rows":vm.crud.pageSize,
+                    "type":vm.crud.searchForm.type,
+                    "errorInfo":vm.crud.searchForm.errorInfo,
+                    "errorTimeQ":vm.crud.searchForm.errorTimeQ,
+                    "errorTimeZ":vm.crud.searchForm.errorTimeZ
+                }).then(function (res) {
+
+                    let data =   res.data.records;
+                    vm.crud.dataStore.total = res.data.total; //赋值总页数
+
+                    //遍历返回值，对返回值进行预处理
+                    for(let item of data){
+                        let obj = {};
+                        obj["id"] =  item.id;
+                        obj["created"] = item.created; //创建人
+                        obj["createTime"] = item.createTime; //创建时间
+                        obj["updated"] = item.updated; //更新人
+                        obj["updateTime"] = item.updateTime; //更新时间
+                        obj["createOrg"] = item.createOrg; //更新时间
+                        obj["createPos"] = item.createPos; //更新时间
+                        obj["notCurUserDoJudge"] = item.notCurUserDoJudge;
+                        obj["status"] = item.status;
+                        obj["type"] = item.type;
+                        obj["errorInfo"] = item.errorInfo;   //错误信息转化为json数组
+
+                        obj["serviceIp"] = obj["errorInfo"].serviceIp; //服务端IP
+                        obj["stacktrace"] = obj["errorInfo"].stacktrace; //保存错误信息
+                        obj["stacktrace"] =  obj["stacktrace"]?obj["stacktrace"].replace(/\r\n/g, '</br>').replace(/\n/g, '</br>'):"";
+                        obj["fileName"] = obj["errorInfo"].fileName; //保存错误信息
+                        obj["errorMsg"] = obj["errorInfo"].errorMsg; //
+                        obj["clientIp"] = obj["errorInfo"].clientIp; //客户端IP
+                        obj["lineNumber"] = obj["errorInfo"].lineNumber; //行号
+
+
+                        obj["errorTime"] = item.errorTime; //报错时间
+                        obj["typeName"]  = item.typeName; //类型名称
+                        vm.errorInfoArray.push(obj); //将数据集放入数组中
+                    }
+
+                });
+
+                let arr = [];
+                data.rows = vm.errorInfoArray; //将数组中的数据重新赋值给列表
+
+                callbackVm.$nextTick(function () {
+                    arr.forEach(function(elem){
+                            callbackVm.$refs[callbackVm.this.tableRef].toggleRowSelection(elem); //获取详情页已经选中的
+                            callbackVm.$refs[callbackVm.this.tableRef2].toggleRowSelection(elem); //获取详情页已经选中的
+                        }
+                    );
+                    callbackVm.$message({
+                        duration: 1000,
+                        type: "success",
+                        message: "查询成功"
+                    })
+                });
+            },
+
+            //查询方法
+            doSearch(){
+                let vm = this;
+                vm.crud.search();
+            },
+            //切换页面触发的方法
+          /*  sizeChange(val){
+                let vm = this;
+                vm.searchForm.rows = vm.$refs["page_common"]["internalPageSize"];
+                vm.search();
+            },*/
+
+            //当前页变化时候
+            handleCurrentChange(val){
+                let vm = this;
+                vm.currentPage = val;
+
+                //resRepaledDataAndPage(vm.resRepaledDataAndPage);
+                vm.crud.search(); //当页面时候触发
+            },
+            //当页的尺寸变化时候
+            handleSizeChange(val){
+                let vm = this;
+                vm.pageSize = val;
+                vm.crud.search(); //当页面时候触发
+
+            },
+
+            //删除
+            remove() {
+                let vm = this;
+                let crud = vm.crud;
+                let selection = crud.vue.$refs[crud.setting.tableRef].selection;
+
+                if ((selection || []).length === 0) {
+                    vm.$message({
+                        duration: 1500,
+                        type: 'info',
+                        message: '请至少选择一条需要删除的数据！'
+                    });
+                    return;
+                }
+
+                vm.$confirm('是否确定删除选择的“' + selection.length + '”条数据?', '警告', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                }).then(function () {
+                    let arrIds = [];
+                    selection.forEach(function (data) {
+                        arrIds.push(data.id);
+                    });
+                    crud.axios.post(crud.setting.deleteUrl, {"ids": arrIds.join(",")}).then(function (response) {
+                        vm.$message({
+                            type: 'success',
+                            message: response.data.operateMessage
+                        });
+                        crud.search(vm.resRepaledDataAndPage);
+
+                    });
+                });
+            },
+
+
+            // 带页码的变化
+            resRepaledDataAndPage(callbackVm,data){
+                let vm = this;
+                vm.errorInfoArray = []; //每次初始化数组
+                vm.axios.post("/logErrorController/findPage",
+                     {"page":vm.currentPage,
+                        "rows":vm.pageSize,
+                        "type":vm.crud.searchForm.type,
+                        "errorInfo":vm.crud.searchForm.errorInfo,
+                        "errorTimeQ":vm.crud.searchForm.errorTimeQ,
+                        "errorTimeZ":vm.crud.searchForm.errorTimeZ
+                    }).then(function (res) {
+
+                    let data =   res.data.rows;
+                    vm.crud.dataStore.total = res.data.total; //赋值总页数
+
+                    //遍历返回值，对返回值进行预处理
+                    for(let item of data){
+                        let obj = {};
+                        obj["id"] =  item.id;
+                        obj["created"] = item.created; //创建人
+                        obj["createTime"] = item.createTime; //创建时间
+                        obj["updated"] = item.updated; //更新人
+                        obj["updateTime"] = item.updateTime; //更新时间
+                        obj["createOrg"] = item.createOrg; //更新时间
+                        obj["createPos"] = item.createPos; //更新时间
+                        obj["notCurUserDoJudge"] = item.notCurUserDoJudge;
+                        obj["status"] = item.status;
+                        obj["type"] = item.type;
+                        obj["errorInfo"] = JSON.parse(item.errorInfo);   //错误信息转化为json数组
+
+                        obj["serviceIp"] = obj["errorInfo"].serviceIp; //服务端IP
+                        obj["stacktrace"] = obj["errorInfo"].stacktrace; //保存错误信息
+                        obj["stacktrace"] =  obj["stacktrace"].replace(/\r\n/g, '</br>').replace(/\n/g, '</br>');
+                        obj["fileName"] = obj["errorInfo"].fileName; //保存错误信息
+                        obj["errorMsg"] = obj["errorInfo"].errorMsg; //
+                        obj["clientIp"] = obj["errorInfo"].clientIp; //客户端IP
+                        obj["lineNumber"] = obj["errorInfo"].lineNumber; //行号
+
+
+                        obj["errorTime"] = item.errorTime; //报错时间
+                        obj["typeName"]  = item.typeName; //类型名称
+                        vm.errorInfoArray.push(obj); //将数据集放入数组中
+                    }
+
+                });
+
+                let arr = [];
+                data.rows = vm.errorInfoArray; //将数组中的数据重新赋值给列表
+
+                callbackVm.$nextTick(function () {
+                    arr.forEach(function(elem){
+                            callbackVm.$refs[callbackVm.this.tableRef].toggleRowSelection(elem);
+                        }
+                    );
+                    callbackVm.$message({
+                        duration: 1000,
+                        type: "success",
+                        message: "查询成功"
+                    })
+                });
+            },
+
+
+            //重置查询条件
+            resetSearch() {
+                let vm = this;
+                let crud = vm.crud;
+                let objData = {};
+                let searchForm = crud.searchForm;
+                crud.noClearSearchColumns && crud.noClearSearchColumns.forEach(function (key) {
+                    objData[key] = searchForm[key];
+                });
+                objData["page"] = "1";
+                crud.searchForm = Object.assign({}, objData);
+                crud.search(vm);
+            },
+
+            //打开短信日志详情
+            showSmsDetail(row){
+                let vm = this;
+                if(!row.id){ // 行数据id不存在
+                    vm.$message("数据异常，请重新加载页面！");
+                    return;
+                }
+                vm.smsRowsData = row;
+                vm.operterSmsDetail = true;
+
+            },
+            //改变按钮状态时
+            switchChange(){
+                let  vm = this;
+                if(vm.switchValue== '10000000'){
+                    vm.isShowSimpleErrorLog = true;
+                    //将详情页选择栏目赋值 给 简略栏目
+                    // let tableComp = vm.$refs[vm.crud.tableRef2]; //获取详情页已经选中的
+
+                    vm.isShowDetailErrorLog = false;
+                }else{
+                    vm.isShowSimpleErrorLog = false; //不显示列表，显示详情列表
+                    vm.isShowDetailErrorLog = true;
+                }
+
+               // vm.crud.search(vm.resRepaledDataAndPage);
+
+                this.$forceUpdate();
+            },
+
+            //格式化错误日志详情
+            formatterErrorLog(row){
+                let vm = this;
+                let rest = row.errorInfo;
+                let stacktrace = JSON.parse(rest)["stacktrace"];
+                stacktrace=  stacktrace.replace(/\r\n/g, '</br>').replace(/\n/g, '</br>');
+                vm.errorInfo = stacktrace;
+                return stacktrace;
+            },
+
+            //显示错误详情
+            showErrorDetail(row){
+                let vm = this;
+
+                if(vm.isShowSimpleErrorLog){
+                    vm.erorRowsData = row; //赋值
+                    vm.operterSmsDetail = true; //显示弹窗窗
+                }
+
+            },
+
+            //当简略列表发生变化时
+            selectChange(selection){
+
+            },
+            //当详情列表选中变化时候
+            selectChange2(selection){ // 当行的选中状态发生变化时
+
+            },
+
+        }
+
+
+
+    }
+
+</script>
+
+<style scoped>
+    legend{
+        font-size: 14px;
+    }
+    .top_contain{
+        height: 100%;
+        /*border-radius:8px;*/
+        overflow-y: hidden;
+
+
+    }
+    .top_contain::-webkit-scrollbar{
+        width: 0;
+    }
+
+</style>
+<style>
+
+    .dialogStyle{
+        font-size: 11px;
+    }
+
+    .demo .el-switch__label {
+           position: absolute;
+          display: none;
+          color: #fff;
+         }
+    /*打开时文字位置设置*/
+     .demo .el-switch__label--right {
+             z-index: 2;
+             right: -18px;
+           }
+     /*关闭时文字位置设置*/
+     .demo .el-switch__label--left {
+             z-index: 2;
+             left: 26px;
+     }
+     /*显示文字*/
+     .demo .el-switch__label.is-active {
+             display: block;
+     }
+     .demo.el-switch .el-switch__core,.el-switch .el-switch__label {
+         width: 70px !important;
+         height: 26px !important;
+         line-height: 26px;
+     }
+    .demo.el-switch__core:after{
+        margin-top: 3px;
+    }
+
+    .sqlStyle{
+        color: red;
+    }
+
+    .errorDetailClass .el-form-item{
+        margin-bottom: 0;
+    }
+</style>