|
|
@@ -0,0 +1,405 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="filter-container">
|
|
|
+ <el-date-picker
|
|
|
+ :range-separator="null"
|
|
|
+ :start-placeholder="$t('_bug.when')"
|
|
|
+ class="filter-item search-item date-range-item"
|
|
|
+ format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ type="datetimerange"
|
|
|
+ v-model="queryParams.timeRange"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ />
|
|
|
+ <el-input
|
|
|
+ :placeholder="$t('_bug.companiesname')"
|
|
|
+ class="filter-item search-item"
|
|
|
+ v-model="queryParams.model.company"
|
|
|
+ />
|
|
|
+ <el-button @click="search" class="filter-item" plain type="primary">{{
|
|
|
+ $t("table.search")
|
|
|
+ }}</el-button>
|
|
|
+ <el-button @click="reset" class="filter-item" plain type="warning">{{
|
|
|
+ $t("table.reset")
|
|
|
+ }}</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData.records"
|
|
|
+ :key="tableKey"
|
|
|
+ @filter-change="filterChange"
|
|
|
+ @selection-change="onSelectChange"
|
|
|
+ @sort-change="sortChange"
|
|
|
+ @cell-click="cellClick"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ row-key="id"
|
|
|
+ ref="table"
|
|
|
+ style="width: 100%"
|
|
|
+ v-loading="loading"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ type="index"
|
|
|
+ width="40px"
|
|
|
+ :reserve-selection="true"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('_bug.table.0')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ prop="message"
|
|
|
+ min-width="120px"
|
|
|
+ >
|
|
|
+ <!-- 异常内容 -->
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column
|
|
|
+ :label="$t('_bug.table.1')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="left"
|
|
|
+ width="100px"
|
|
|
+ prop="plcName"
|
|
|
+ >
|
|
|
+ PLC地址
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :filter-multiple="false"
|
|
|
+ :label="$t('_bug.table.2')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ column-key="httpMethod"
|
|
|
+ prop="id"
|
|
|
+ width="100px"
|
|
|
+ >
|
|
|
+ Modbus地址
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('_bug.table.3')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ prop="createTime"
|
|
|
+ width="150px"
|
|
|
+ >
|
|
|
+ <!-- 报警时间 -->
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('_bug.table.4')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ min-width="100px"
|
|
|
+ prop="name"
|
|
|
+ >
|
|
|
+ <!-- 设备名称 -->
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('_bug.table.5')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ column-key="type"
|
|
|
+ prop="code"
|
|
|
+ width="80px"
|
|
|
+ >
|
|
|
+ <!-- 编号 -->
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('_bug.table.6')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ min-width="120px"
|
|
|
+ prop="area"
|
|
|
+ >
|
|
|
+ <!-- 区域 -->
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('_bug.table.7')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ prop="plcName"
|
|
|
+ width="170px"
|
|
|
+ >
|
|
|
+ <!-- 所在场地 -->
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('_bug.table.8')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ prop="company"
|
|
|
+ width="110px"
|
|
|
+ >
|
|
|
+ <!-- 所属企业 -->
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('_bug.table.9')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ prop="status"
|
|
|
+ width="110px"
|
|
|
+ >
|
|
|
+ <!-- 状态 -->
|
|
|
+ <template>
|
|
|
+ {{ tableData.records.status}}
|
|
|
+ <!-- {{ ['离线','在线', '异常', '缺料'][tableData?.records?.status] }} -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('_bug.table.10')"
|
|
|
+ column-key="operation"
|
|
|
+ align="center"
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
+ width="110px"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <i
|
|
|
+ @click="singleDelete(row)"
|
|
|
+ class="el-icon-delete table-operation"
|
|
|
+ style="color: #f50"
|
|
|
+ v-has-permission="['optLog:delete']"
|
|
|
+ />
|
|
|
+ <el-link
|
|
|
+ class="no-perm"
|
|
|
+ v-has-no-permission="['optLog:delete', 'optLog:view']"
|
|
|
+ >{{ $t("tips.noPermission") }}
|
|
|
+ </el-link>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ :limit.sync="queryParams.size"
|
|
|
+ :page.sync="queryParams.current"
|
|
|
+ :total="Number(tableData.total)"
|
|
|
+ @pagination="fetch"
|
|
|
+ v-show="tableData.total > 0"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import Pagination from "@/components/Pagination";
|
|
|
+import optLogApi from "@/api/OptLog.js";
|
|
|
+import { bug } from "@/api/adSomeelse";
|
|
|
+import { convertEnum } from "@/utils/utils";
|
|
|
+import elDragDialog from "@/directive/el-drag-dialog";
|
|
|
+import { initEnums, initQueryParams } from "@/utils/commons";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "OptLog",
|
|
|
+ directives: { elDragDialog },
|
|
|
+ components: { Pagination },
|
|
|
+ filters: {
|
|
|
+ timeFilter(time) {
|
|
|
+ if (time < 500) {
|
|
|
+ return "success";
|
|
|
+ } else if (time < 1000) {
|
|
|
+ return "";
|
|
|
+ } else if (time < 1500) {
|
|
|
+ return "warning";
|
|
|
+ } else {
|
|
|
+ return "danger";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableKey: 0,
|
|
|
+ loading: false,
|
|
|
+ preview: {
|
|
|
+ isVisible: false,
|
|
|
+ context: "",
|
|
|
+ },
|
|
|
+ queryParams: initQueryParams({
|
|
|
+ model: {},
|
|
|
+ }),
|
|
|
+ selection: [],
|
|
|
+ tableData: {},
|
|
|
+ enums: {
|
|
|
+ LogType: {},
|
|
|
+ HttpMethod: {},
|
|
|
+ },
|
|
|
+ drawer: false,
|
|
|
+ currentRow: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ typeFilters() {
|
|
|
+ return convertEnum(this.enums.LogType);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ initEnums(["LogType", "HttpMethod"], this.enums);
|
|
|
+ this.fetch();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSelectChange(selection) {
|
|
|
+ this.selection = selection;
|
|
|
+ },
|
|
|
+ fetch(params = {}) {
|
|
|
+ this.loading = true;
|
|
|
+ if (this.queryParams.timeRange) {
|
|
|
+ this.queryParams.model.beginTime = this.queryParams.timeRange[0];
|
|
|
+ this.queryParams.model.endTime =
|
|
|
+ this.queryParams.timeRange[1].slice(0, 11) + "23:59:59";
|
|
|
+ }
|
|
|
+
|
|
|
+ this.queryParams.current = params.current
|
|
|
+ ? params.current
|
|
|
+ : this.queryParams.current;
|
|
|
+ this.queryParams.size = params.size ? params.size : this.queryParams.size;
|
|
|
+
|
|
|
+ bug
|
|
|
+ .page(this.queryParams)
|
|
|
+ .then((response) => {
|
|
|
+ const res = response.data;
|
|
|
+ if (res.code === 0 && res.isSuccess) {
|
|
|
+ this.tableData = res.data;
|
|
|
+ }
|
|
|
+ console.log(res);
|
|
|
+ debugger;
|
|
|
+ })
|
|
|
+ .finally(() => (this.loading = false));
|
|
|
+ },
|
|
|
+ clear(type) {
|
|
|
+ this.$confirm("确认要清除日志吗？", this.$t("common.tips"), {
|
|
|
+ confirmButtonText: this.$t("common.confirm"),
|
|
|
+ cancelButtonText: this.$t("common.cancel"),
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ optLogApi.clear({ type: type }).then((response) => {
|
|
|
+ const res = response.data;
|
|
|
+ if (res.isSuccess) {
|
|
|
+ this.$message({
|
|
|
+ message: this.$t("tips.deleteSuccess"),
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ this.search();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ singleDelete(row) {
|
|
|
+ this.$refs.table.clearSelection();
|
|
|
+ this.$refs.table.toggleRowSelection(row, true);
|
|
|
+ this.batchDelete();
|
|
|
+ },
|
|
|
+ batchDelete() {
|
|
|
+ if (!this.selection.length) {
|
|
|
+ this.$message({
|
|
|
+ message: this.$t("tips.noDataSelected"),
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$confirm(this.$t("tips.confirmDelete"), this.$t("common.tips"), {
|
|
|
+ confirmButtonText: this.$t("common.confirm"),
|
|
|
+ cancelButtonText: this.$t("common.cancel"),
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ const logIds = this.selection.map((item) => item.id);
|
|
|
+ this.delete(logIds);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.clearSelections();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clearSelections() {
|
|
|
+ this.$refs.table.clearSelection();
|
|
|
+ },
|
|
|
+ delete(logIds) {
|
|
|
+ optLogApi.delete({ ids: logIds }).then((response) => {
|
|
|
+ const res = response.data;
|
|
|
+ if (res.isSuccess) {
|
|
|
+ this.$message({
|
|
|
+ message: this.$t("tips.deleteSuccess"),
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.search();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ this.fetch({
|
|
|
+ ...this.queryParams,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.queryParams = initQueryParams({
|
|
|
+ model: {
|
|
|
+ type: {
|
|
|
+ key: null,
|
|
|
+ },
|
|
|
+ httpMethod: {
|
|
|
+ key: null,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.$refs.table.clearSort();
|
|
|
+ this.$refs.table.clearFilter();
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ transTime(time) {
|
|
|
+ return `${time} ms`;
|
|
|
+ },
|
|
|
+ sortChange(val) {
|
|
|
+ this.queryParams.sort = val.prop;
|
|
|
+ this.queryParams.order = val.order;
|
|
|
+ if (this.queryParams.sort) {
|
|
|
+ this.search();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filterChange(filters) {
|
|
|
+ for (const key in filters) {
|
|
|
+ if (key.includes(".")) {
|
|
|
+ const val = {};
|
|
|
+ val[key.split(".")[1]] = filters[key][0];
|
|
|
+ this.queryParams.model[key.split(".")[0]] = val;
|
|
|
+ } else {
|
|
|
+ this.queryParams.model[key] = filters[key][0];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ cellClick(row, column) {
|
|
|
+ if (column["columnKey"] === "operation") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let flag = false;
|
|
|
+ this.selection.forEach((item) => {
|
|
|
+ if (item.id === row.id) {
|
|
|
+ flag = true;
|
|
|
+ this.$refs.table.toggleRowSelection(row);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!flag) {
|
|
|
+ this.$refs.table.toggleRowSelection(row, true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.item {
|
|
|
+ margin-top: 7px;
|
|
|
+}
|
|
|
+
|
|
|
+.drawer-item {
|
|
|
+ margin-top: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.box-item {
|
|
|
+ margin-top: 15px;
|
|
|
+
|
|
|
+ aside {
|
|
|
+ word-wrap: break-word;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ pre {
|
|
|
+ white-space: pre-wrap;
|
|
|
+ font-size: 0.8em;
|
|
|
+ line-height: 1.5em;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
devilhell