轮询日志和朔黄按机车hao号搜索

heyujie

2021-07-01 5044b402981f42542eece201e1308b5c2816737a

 src/pages/logCenter/views/operationLog.vue

@@ -6,21 +6,25 @@
          <div class="title">周期：</div>



          <div class="opts">

            <div class="opt" tabindex="1">今日</div>

            <div class="opt" tabindex="2">近三天</div>

            <div class="opt" tabindex="3">近七天</div>

            <div class="opt" tabindex="4">近一个月</div>

            <div class="opt" tabindex="5">近六个月</div>

            <div

              :class="activeDateChoise == i ? 'opt-active' : ''"

              class="opt"

              v-for="(item, i) in dateArr"

              :key="i"

              @click="choseRange(item, i)"

            >

              {{ item }}

            </div>

          </div>

        </div>

        <div class="search">

          <el-input

            placeholder="搜索"

            v-model="input3"

            v-model="fuzzySearch"

            size="small"

            class="input-with-select"

          >

            <el-button slot="append" icon="el-icon-search"></el-button>

          <el-button slot="append" icon="el-icon-search" @click="getOperationLog"></el-button>

          </el-input>

        </div>

      </div>

@@ -28,42 +32,55 @@
        <div class="bar">

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



          <el-select v-model="value" placeholder="请选择"

          
          <el-select

            v-model="curModule"

            placeholder="请选择"

            size="small"

            @change="moduleChange"

          >

            <el-option

              v-for="item in options"

              :key="item.value"

              :label="item.label"

              :value="item.value"

              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-select>

        </div>

         <div class="bar">

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



          <el-select v-model="value" placeholder="请选择"

          <div class="name">操作功能：</div>

          <el-select

            v-model="gongneng"

            placeholder="请选择"

            size="small"

            @change="getOperationLog"

          >

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

            <el-option

              v-for="item in options"

              :key="item.value"

              :label="item.label"

              :value="item.value"

              v-for="item in gongnengOptions"

              :key="item.name"

              :label="item.name"

              :value="item.name"

            >

            </el-option>

          </el-select>

        </div>

         <div class="bar">

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

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



          <el-select v-model="value" placeholder="请选择"

          <el-select

            v-model="result"

            placeholder="请选择"

            size="small"

            @change="getOperationLog"

          >

            <el-option

              v-for="item in options"

              v-for="item in resultOptions"

              :key="item.value"

              :label="item.label"

              :value="item.value"

@@ -73,51 +90,186 @@
        </div>

      </div>

    </div>

    <div class="table">faefws</div>

    <div class="table">

      <el-table

        class="tableBox"

        ref="multipleTable"

        highlight-current-row

        :data="tableData"

        style="width: 100%"

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

        @selection-change="handleSelectionChange"

      >

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

        </el-table-column>

        <el-table-column

          :align="'center'"

          sortable

          min-width="98px"

          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="procName"

          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>

  </div>

</template>



<script>

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

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



function pad0(i) {

  if (i >= 0 && i <= 9) {

    return "0" + i;

  } else {

    return i;

  }

}

export default {

  data() {

    return {

      loading: false,

      loadingText: "",

      input3: "",

      options: [

      tableData: [],

      dateArr: ["今日", "近三天", "近七天", "近一个月", "近六个月"],

      moduleOptions: [],

      gongnengOptions: [],

      resultOptions: [

        {

          value: "选项1",

          label: "黄金糕",

          value: "",

          label: "全部",

        },

        {

          value: "选项2",

          label: "双皮奶",

          value: "成功",

          label: "成功",

        },

        {

          value: "选项3",

          label: "蚵仔煎",

        },

        {

          value: "选项4",

          label: "龙须面",

        },

        {

          value: "选项5",

          label: "北京烤鸭",

          value: "失败",

          label: "失败",

        },

      ],

      value: "",

      page: 1,

      pageSize: 15,

      activeDateChoise: 0,

      gongneng: "",

      result: "",

      curModule: "",

      timeStart: "",

      timeEnd: "",

      fuzzySearch: "",

      total:0,

    };

  },

  mounted() {},



  mounted() {

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

    this.getOperationLog();

    this.getOptions();

  },

  methods: {

    format(array) {

      return [

        this.$moment(array[0]).format("YYYY-MM-DD"),

        this.$moment(array[1]).format("YYYY-MM-DD"),

      ];

    gongnengChange(val) {},

    moduleChange(val) {

      this.getOperationLog()

      this.gongneng=""

      getOperations({

        module: this.curModule,

      }).then((res) => {

        this.gongnengOptions = res.data;

      });

    },

    getOptions() {

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

        this.moduleOptions = res.data;

      });

    },

    choseRange(item, i) {

      switch (item) {

        case "今日":

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

          break;

        case "近三天":

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

          break;

        case "近七天":

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

          break;

        case "近一个月":

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

          break;

        case "近六个月":

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

          break;

        default:

          break;

      }

      this.getOperationLog();

      this.activeDateChoise = i;

    },

    getOperationLog(timeStart, timeEnd) {

      const data= {

        timeStart: this.timeStart,

        timeEnd: this.timeEnd,

        page: this.page,

        pageSize: this.pageSize,

        module: this.curModule,

        function: this.gongneng,

        result: this.result,

        fuzzySearch: this.fuzzySearch,

      }

      queryOperationLog(data).then((res) => {

        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}`;

    },

    getTimeRange(gap) {

      var date = new Date(); //当前时间

      var preDay = new Date(new Date().getTime() - gap);

      this.timeStart = this.getTimeStr(preDay)

      this.timeEnd = this.getTimeStr(date)

    },

  },

};

@@ -166,7 +318,7 @@
            background-color: rgba(61, 104, 225, 1);

            color: #fff;

          }

          .opt:focus {

          .opt-active {

            color: #fff;

            background-color: rgba(61, 104, 225, 1);

          }

@@ -179,11 +331,10 @@
    }

    .second {

          display: flex;



      margin: 10px 0;

      .bar {

        display: flex;

        align-items: baseline;

        background: aliceblue;

        width: fit-content;

        padding-left: 20px;

        .name{

@@ -193,10 +344,22 @@
    }

  }

  .table {

    margin-top: 10px;

    background: #fff;

    height: 100%;

    margin-top: 16px;

    border-radius: 5px;

    padding: 12px;

    background-color: white;

    .tableBox {

      th {

        padding: 0 !important;

        height: 40px;

        line-height: 40px;

      }

      td {

        padding: 0 !important;

        height: 34px;

        line-height: 34px;

      }

    }

  }

}

</style>