终端移植SmartAI的界面
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
zhangzengfei
2023-11-29 0d3db253cad1fb49c4fae9b9a537c8c318c7172f 
 src/pages/syslog/views/operationLog.vue


@@ -23,14 +23,15 @@


            v-model="fuzzySearch"



            size="small"



            class="input-with-select"



            @keyup.enter.native="getOperationLog(1)"



          >



            <span



              class="icon iconfont"



              @click="getOperationLog(1)"



              slot="append"



            >



            <span class="icon iconfont icon_clear" @click="clearSearch" slot="append" v-if="fuzzySearch">



              &#xe785;



            </span>



            <span class="icon iconfont icon_search" @click="getOperationLog(1)" slot="append">



              &#xe714;



            </span>







            <!-- <el-button



              slot="append"



              icon="el-icon-search"



@@ -43,20 +44,9 @@


        <div class="bar">



          <div class="name">操作模块：</div>







          <el-select



            v-model="curModule"



            placeholder="请选择"



            size="small"



            @change="moduleChange"



          >



          <el-select v-model="curModule" placeholder="请选择" size="small" @change="moduleChange" value-key="proc_name">



            <el-option label="全部" :value="''"> </el-option>



            <el-option



              v-for="item in moduleOptions"



              :key="item.proc_name"



              :label="item.proc_name"



              :value="item.proc_name"



            >



            </el-option>



            <el-option v-for="(item, i) in moduleOptions" :key="i" :label="item.name_zh" :value="item"> </el-option>



          </el-select>



        </div>



        <div class="bar">



@@ -69,30 +59,13 @@


            @change="getOperationLog(1)"



          >



            <!-- :disabled="gongnengOptions.length==0" -->



            <el-option



              v-for="item in gongnengOptions"



              :key="item.name"



              :label="item.name"



              :value="item.name"



            >



            </el-option>



            <el-option v-for="(item, i) in gongnengOptions" :key="i" :label="item.name" :value="item.name"> </el-option>



          </el-select>



        </div>



        <div class="bar">



          <div class="name">操作结果：</div>



          <el-select



            v-model="result"



            placeholder="请选择"



            size="small"



            @change="getOperationLog(1)"



          >



            <el-option



              v-for="item in resultOptions"



              :key="item.value"



              :label="item.label"



              :value="item.value"



            >



            </el-option>



          <el-select v-model="result" placeholder="请选择" size="small" @change="getOperationLog(1)">



            <el-option v-for="(item, i) in resultOptions" :key="i" :label="item.label" :value="item.value"> </el-option>



          </el-select>



        </div>



      </div>



@@ -105,9 +78,12 @@


        :data="tableData"



        :header-cell-style="{ background: '#f8f8f8', color: '#222222' }"



        style="width: 100%"



        border



      >



        <el-table-column :align="'center'" label="序号" type="index" width="50">



        </el-table-column>



        <template slot="empty">



          <img :src="png" class="empty_img" alt="" />



        </template>



        <el-table-column :align="'center'" label="序号" type="index" width="50"> </el-table-column>



        <el-table-column



          :align="'center'"



          sortable



@@ -115,41 +91,12 @@


          prop="add_time"



          label="操作时间"



        ></el-table-column>



        <el-table-column



          sortable



          :align="'center'"



          prop="userName"



          label="用户名"



        ></el-table-column>



        <el-table-column



          :align="'center'"



          sortable



          prop="module"



          label="操作模块"



        ></el-table-column>



        <el-table-column



          :align="'center'"



          prop="function"



          label="操作功能"



        ></el-table-column>



        <el-table-column



          :align="'center'"



          sortable



          prop="result"



          label="操作结果"



        ></el-table-column>



        <el-table-column



          :align="'center'"



          prop="msg"



          min-width="100px"



          label="详细信息"



        ></el-table-column>



        <el-table-column



          :align="'center'"



          sortable



          prop="ip"



          label="IP"



        ></el-table-column>



        <el-table-column sortable :align="'center'" prop="userName" label="用户名"></el-table-column>



        <el-table-column :align="'center'" sortable prop="module" label="操作模块"></el-table-column>



        <el-table-column :align="'center'" prop="function" label="操作功能"></el-table-column>



        <el-table-column :align="'center'" sortable prop="result" label="操作结果"></el-table-column>



        <el-table-column :align="'center'" prop="msg" min-width="100px" label="详细信息"></el-table-column>



        <el-table-column :align="'center'" sortable prop="ip" label="IP"></el-table-column>



      </el-table>



    </div>







@@ -167,13 +114,15 @@


</template>







<script>



import { deleteDate } from "@/api/system";



import { pad0 } from "@/api/utils";



import { queryOperationLog, getOperations, getModules } from "@/api/log";



import { deleteDate } from "@/api/system"



import { pad0 } from "@/api/utils"



import { queryOperationLog, getOperations, getModules } from "@/api/log"







export default {



  name: "operationLog",



  data() {



    return {



      png: require("../../../../public/images/syslog/没数据.png"),



      loading: false,



      loadingText: "",



      input3: "",



@@ -184,16 +133,16 @@


      resultOptions: [



        {



          value: "",



          label: "全部",



          label: "全部"



        },



        {



          value: "成功",



          label: "成功",



          label: "成功"



        },



        {



          value: "失败",



          label: "失败",



        },



          label: "失败"



        }



      ],



      value: "",



      page: 1,



@@ -205,95 +154,106 @@


      timeStart: "",



      timeEnd: "",



      fuzzySearch: "",



      total: 0,



    };



      total: 0



    }



  },



  mounted() {



    this.getTimeRange();



    this.getOperationLog();



    this.getOptions();



    this.getTimeRange()



    this.getOperationLog()



    this.getOptions()



  },



  methods: {



    handleSizeChange(val) {



      this.pageSize = val;



      this.getOperationLog();



      this.pageSize = val



      this.getOperationLog()



    },



    handleCurrentChange(val) {



      this.page = val;



      this.getOperationLog();



      this.page = val



      this.getOperationLog()



    },



    moduleChange(val) {



      this.getOperationLog(1);



      this.gongneng = "";



      this.getOperationLog(1)



      this.gongneng = ""



      getOperations({



        module: this.curModule,



        module: val.proc_name



      }).then((res) => {



        this.gongnengOptions = res.data;



      });



        this.gongnengOptions = res.data



      })



    },



    getOptions() {



      getModules().then((res) => {



        this.moduleOptions = res.data;



      });



        const indexArr = []



        res.data.forEach((item, index) => {



          if (item.proc_name == "") {



            indexArr.push(index)



          }



        })



        if (indexArr.length != 0) {



          indexArr.forEach((i) => {



            res.data.splice(i)



          })



        }



        this.moduleOptions = res.data



      })



    },



    choseRange(item, i) {



      switch (item) {



        case "今日":



          this.getTimeRange();



          break;



          this.getTimeRange(24 * 60 * 60 * 1000)



          break



        case "近三天":



          this.getTimeRange(24 * 60 * 60 * 1000 * 3);



          break;



          this.getTimeRange(24 * 60 * 60 * 1000 * 3)



          break



        case "近七天":



          this.getTimeRange(24 * 60 * 60 * 1000 * 7);



          break;



          this.getTimeRange(24 * 60 * 60 * 1000 * 7)



          break



        case "近一个月":



          this.getTimeRange(24 * 60 * 60 * 1000 * 30);



          break;



          this.getTimeRange(24 * 60 * 60 * 1000 * 30)



          break



        case "近六个月":



          this.getTimeRange(24 * 60 * 60 * 1000 * 30 * 6);



          break;



          this.getTimeRange(24 * 60 * 60 * 1000 * 30 * 6)



          break



        default:



          break;



          break



      }



      this.getOperationLog(1);



      this.activeDateChoise = i;



      this.getOperationLog(1)



      this.activeDateChoise = i



    },



    getOperationLog(typ) {



      if (typ == 1) {



        this.page = 1;



        this.page = 1



      }



      queryOperationLog({



        timeStart: this.timeStart,



        timeEnd: this.timeEnd,



        page: this.page,



        pageSize: this.pageSize,



        module: this.curModule,



        module: this.curModule.name_zh,



        function: this.gongneng,



        result: this.result,



        fuzzySearch: this.fuzzySearch,



        fuzzySearch: this.fuzzySearch



      }).then((res) => {



        this.tableData = res.data.logs;



        this.total = res.data.total;



      });



        this.tableData = res.data.logs



        this.total = res.data.total



      })



    },



    getTimeStr(date) {



      var month = pad0(date.getMonth() + 1); //月



      var day = pad0(date.getDate()); //日



      var hour = pad0(date.getHours()); //时



      var minute = pad0(date.getMinutes()); //分



      var second = pad0(date.getSeconds()); //秒



      return `${date.getFullYear()}-${month}-${day} ${hour}:${minute}:${second}`;



      var month = pad0(date.getMonth() + 1) //月



      var day = pad0(date.getDate()) //日



      return `${date.getFullYear()}-${month}-${day}`



    },



    getTimeRange(gap) {



      var preDay;



      preDay = gap



        ? new Date(new Date().getTime() - gap)



        : new Date(new Date().setHours(0, 0, 0, 0));



      this.timeStart = this.getTimeStr(preDay);



      var date = new Date()



      var preDay = new Date(new Date().getTime() - gap + 24 * 60 * 60 * 1000)



      this.timeStart = this.getTimeStr(preDay) + " 00:00:00"



      this.timeEnd = this.getTimeStr(date) + " 23:59:59"



    },



  },



};



    clearSearch() {



      this.fuzzySearch = ""



      this.getOperationLog(1)



    }



  }



}



</script>



<style lang="scss">



.op-log {



@@ -358,6 +318,10 @@


        display: flex;



        align-items: center;







        .icon_clear:hover {



          color: #4e94ff;



        }







        .input-with-select {



          width: 100%;



          height: 100%;



@@ -368,13 +332,14 @@


            border: 2px solid #f2f2f7;



            border-right: none;







            // &:focus + .el-input-group__append {



            //   border-color: #409eff;



            // }



            &:focus,



            &:focus + .el-input-group__append {



              border-color: #409eff;



            }



          }







          .el-input-group__append {



            //    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);



            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);



            background-color: #fff;



            border: 2px solid #f2f2f7;



            border-radius: 0 18px 18px 0;



@@ -392,13 +357,13 @@


    }



    .second {



      display: flex;



      margin: 20px 0;



      margin: 15px 0 20px 0;



      padding: 0 20px;



      .bar {



        display: flex;



        align-items: baseline;



        width: fit-content;



        margin-right: 20px;



        margin-right: 30px;



        min-width: 120px;







        .el-select {



@@ -431,16 +396,47 @@


    border-radius: 5px;



    padding: 12px;



    background-color: white;



    .empty_img {



      margin: 80px auto;



      width: 164px;



    }



    .tableBox {



      border: none;



      &::before,



      &::after {



        display: none;



      }



      tr {



        td:first-child {



          border-radius: 4px 0 0 4px;



        }



        td:last-child {



          border-radius: 0 4px 4px 0;



        }



        &.current-row td {



          background-color: #4e94ff !important;



          color: #fff;



        }



        &:hover td {



          background-color: rgb(242, 242, 247);



        }



      }



      th {



        padding: 0 !important;



        height: 40px;



        line-height: 40px;



        border-color: #fff !important;



        border-right: 2px solid #fff;



        border-radius: 4px;



        font-size: 12px;



        background: #f2f2f7;



      }



      td {



        padding: 0 !important;



        height: 34px;



        line-height: 34px;



        border: none;



        font-size: 12px;



      }



    }



  }