electripper-v2-ui/src/views/bst/device/view/components/DeviceOperLogList.vue

<template>
  <div v-loading="loading">
    <el-row type="flex">
      <el-date-picker
        v-if="queryParams.operTimeRange != null && queryParams.operTimeRange[0] != null && queryParams.operTimeRange[1] != null"
        v-model="queryParams.operTimeRange"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="mini"
        :clearable="false"
        @change="getOperLogList"
        :default-time="['00:00:00', '23:59:59']"
        style="flex: 1;"
        :picker-options="DateTimePickerOptions.DEFAULT"
      />
      <el-button icon="el-icon-refresh" size="mini" @click="getOperLogList">刷新</el-button>
    </el-row>
    <div class="oper-log-list">
      <div v-for="(log, index) in operLogList" :key="index" class="log-item" >
        <div class="log-header">
          <div class="left">
            <span class="log-time">{{ log.operTime }}</span>
            <dict-tag :options="dict.type.sys_common_status" :value="log.status" size="mini" style="margin-left: 4px;"/>
            <dict-tag :options="dict.type.oper_log_iot_status" :value="log.iotStatus" size="mini" style="margin-left: 4px;"/>
          </div>
          <div class="right">
            <el-link 
              v-if="getLocationType(log)"
              type="success" 
              style="font-size: 12px;margin-right: 4px;" 
              :underline="false" 
              icon="el-icon-location" 
              @click="handleLogLocation(log)"
            >{{ getLocationType(log) }}</el-link>
            <user-link :id="log.operUserId" :text="log.operName" size="mini"/>
          </div>
        </div>
        <div class="log-content">
          <div class="module" :class="{ 'is-link': isOrderLog(log) }" @click="handleLogModuleClick(log)">{{ log.title }}</div>
          <div v-if="log.errorMsg" class="error">{{ log.errorMsg }}</div>
        </div>
      </div>
      <el-empty v-if="!operLogList || operLogList.length === 0" description="暂无数据" />
    </div>
    
    <location-map-dialog
      :visible.sync="mapVisible"
      :area="area"
      :area-sub-list="areaSubList"  
      :device-location="currentLocation.device"
      :phone-location="currentLocation.phone"
    />
  </div>
</template>

<script>
import { listAllOperlog } from '@/api/monitor/operlog';
import UserLink from '@/components/Business/User/UserLink.vue';
import { isEmpty } from '@/utils';
import { DateTimePickerOptions } from '@/utils/constants';
import { LogBizType } from '@/utils/enums';
import { parseTime } from '@/utils/ruoyi.js';
import LocationMapDialog from './LocationMapDialog.vue';

export default {
  name: 'DeviceOperLogList',
  dicts: ['sys_common_status', 'oper_log_iot_status'],
  components: {
    UserLink,
    LocationMapDialog
  },
  props: {
    query: {
      type: Object,
      default: () => ({})
    },
    area: {
      type: Object,
      default: () => ({})
    },
    areaSubList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      DateTimePickerOptions,
      operLogList: [],
      queryParams: {
        orderByColumn: "operTime",
        isAsc: "desc",
        operTimeRange: [parseTime(new Date(), '{y}-{m}-{d} 00:00:00'), parseTime(new Date(), '{y}-{m}-{d} 23:59:59')]
      },
      loading: false,
      mapVisible: false,
      currentLocation: {
        device: {},
        phone: {}
      }
    }
  },
  created() {
    this.getOperLogList();
  },
  computed: {
    isOrderLog() {
      return (log) => {
        return log.bizType == LogBizType.ORDER && !isEmpty(log.bizIds)
      }
    },
    getLocationType() {
      return (log) => {
        const hasDeviceLocation = !isEmpty(log.deviceLon) && !isEmpty(log.deviceLat);
        const hasPhoneLocation = !isEmpty(log.paramLon) && !isEmpty(log.paramLat);
        
        if (hasDeviceLocation && hasPhoneLocation) {
          return '设备+手机定位';
        } else if (hasDeviceLocation) {
          return '设备定位';
        } else if (hasPhoneLocation) {
          return '手机定位';
        }
        return null;
      }
    }
  },
  methods: {
    // 获取操作日志列表
    getOperLogList() {
      Object.assign(this.queryParams, this.query);
      this.loading = true;
      listAllOperlog(this.queryParams).then(res => {
        this.operLogList = res.data;
      }).finally(() => {
        this.loading = false;
      });
    },
    // 点击模块
    handleLogModuleClick(log) {
      if (this.isOrderLog(log)) {
        this.$router.push("/view/order/" + log.bizIds[0]);
      }
    },
    // 查看定位
    handleLogLocation(log) {
      
      this.currentLocation = {
        device: {
          lon: log.deviceLon,
          lat: log.deviceLat
        },
        phone: {
          lon: log.paramLon,
          lat: log.paramLat
        }
      };
      
      this.mapVisible = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.oper-log-list {
  margin-top: 10px;
  height: calc(700px - 90px);
  overflow-y: auto;

  .log-item {
    padding: 4px 8px;
    border-bottom: 1px solid #EBEEF5;
    
    &:hover {
      background-color: #F5F7FA;
    }

    .log-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .left {
        display: flex;
        align-items: center;

        .log-time {
          font-size: 12px;
          color: #909399;
        }
      }

      .right {
      }
    }

    .log-content {
      padding-left: 2px;

      .module {
        font-size: 13px;
        color: #303133;
        margin-bottom: 4px;
        line-height: 1.4;
      }
      .is-link {
        color: #409EFF;
        cursor: pointer;
      }

      .error {
        font-size: 12px;
        color: #F56C6C;
        line-height: 1.4;
        border-radius: 2px;
        margin-top: 4px;
      }
    }
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #C0C4CC;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background: #F5F7FA;
  }
}
</style>