cmc-oa/oa-ui-app/pages/oa/device/deviceLog.vue

<!--
 * @Author: ysh
 * @Date: 2025-06-10 09:34:55
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-06-11 16:29:46
-->
<template>
  <view>
    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
      @scroll="scroll" :refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh"
      :lower-threshold="50" :upper-threshold="50">
      <view class="content-wrapper">
        <!-- 搜索栏 -->
        <view class="search-bar">
          <view class="search-input-wrapper">
            <uni-icons type="search" size="16" color="#999"></uni-icons>
            <input class="search-input" v-model="queryParams.projectNumber" placeholder="请输入项目编号搜索"
              @confirm="handleSearch" />
            <uni-icons v-if="queryParams.projectNumber" type="clear" size="16" color="#999"
              @click="clearSearch"></uni-icons>
          </view>
        </view>
        <template v-if="logList.length > 0">
          <view class="project-card" v-for="(item, index) in logList" :key="index">
            <view class="project-card-item">
              <view class="project-card-item-header">
                <view class="project-info">
                  <text class="project-number">{{ item.project ? item.project.projectNumber : '无项目' }}</text>
                  <text class="project-name">{{ item.project ? item.project.projectName : '无项目' }}</text>
                </view>
                <view class="action-buttons">
                  <button class="action-btn edit" v-if="isOwnRecord(item)" @click="handleEdit(item)">
                    <uni-icons type="compose" size="16" color="#007AFF"></uni-icons>
                  </button>
                  <button class="action-btn delete" v-if="isOwnRecord(item)" @click="handleDelete(item)">
                    <uni-icons type="trash" size="16" color="#FF3B30"></uni-icons>
                  </button>
                </view>
              </view>
              <view class="project-card-item-content">
                <view class="info-row">
                  <text class="info-label">设备名称：</text>
                  <text class="info-value" v-if="item.deviceId">{{ item.device ? item.device.name : '' }}-{{ item.device
                    ? item.device.brand : '' }}({{
                      item.device ? item.device.code : '' }})</text>
                  <text class="info-value" v-else>暂无设备</text>
                </view>
                <view class="info-row">
                  <text class="info-label">设备类型：</text>
                  <text class="info-value">{{ item.usageType }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">使用日期：</text>
                  <text class="info-value">{{ item.useDate }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">记录员：</text>
                  <text class="info-value">{{ item.user.nickName }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">点号：</text>
                  <text class="info-value">{{ item.position }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">高值类型：</text>
                  <text class="info-value">{{ item.heightType }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">高值：</text>
                  <text class="info-value">{{ item.height }}m</text>
                </view>
                <view class="info-row">
                  <text class="info-label">天气：</text>
                  <text class="info-value">{{ item.weather }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">干温：</text>
                  <text class="info-value">{{ item.dryTemperature }}°C</text>
                </view>
                <view class="info-row">
                  <text class="info-label">湿温：</text>
                  <text class="info-value">{{ item.wetTemperature }}°C</text>
                </view>
                <view class="info-row">
                  <text class="info-label">气压：</text>
                  <text class="info-value">{{ item.airPressure }}hPa</text>
                </view>
                <view class="info-row">
                  <text class="info-label">开机时间：</text>
                  <text class="info-value">{{ formatDateTime(item.powerOn) }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">关机时间：</text>
                  <text class="info-value">{{ formatDateTime(item.powerOff) }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="loading-more" v-if="hasMore">
            <text class="loading-text">加载中...</text>
          </view>
          <view class="no-more" v-else>
            <text class="no-more-text">没有更多数据了</text>
          </view>
        </template>
        <view v-else class="empty-state">
          <image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
          <text class="empty-text">暂无数据</text>
        </view>
      </view>
    </scroll-view>

    <!-- 悬浮按钮 -->
    <view class="fab-button" @click="handleAdd">
      <uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
    </view>

    <!-- 新增记录弹窗 -->
    <uni-popup ref="addPopup" type="center">
      <view class="popup-content">
        <view class="popup-header">
          <text class="title">{{ isEdit ? '修改记录' : '新增记录' }}</text>
          <uni-icons type="close" size="20" @click="closePopup"></uni-icons>
        </view>
        <view class="popup-body">
          <view class="form-item">
            <text class="label">项目选择</text>
            <view class="project-picker" @click="showProjectPicker">
              <text v-if="selectedProject">{{ selectedProject.projectName }}</text>
              <text v-else class="placeholder">请选择项目</text>
            </view>
          </view>
          <view class="form-item">
            <text class="label">设备选择</text>
            <view class="project-picker" @click="showDevicePicker">
              <text v-if="selectDevice && selectDevice.code">{{ selectDevice.name }}-{{ selectDevice.brand }}({{
                selectDevice.code
              }})</text>
              <text v-else class="placeholder">请选择设备</text>
            </view>
          </view>
          <view class="form-item">
            <text class="label">设备类型</text>
            <uni-data-select v-model="formData.usageType" :localdata="useTypeOptions" placeholder="请选择设备类型"
              class="weather-select" @change="handleUseTypeChange" />
          </view>
          <view class="form-item">
            <text class="label">使用日期</text>
            <!-- <uni-datetime-picker v-model="formData.useDate" type="date" /> -->
            <uv-calendar ref="calendar" mode="single" @confirm="confirmUseDate"></uv-calendar>
            <view class="project-picker" @click="$refs.calendar.open()">
              <text v-if="formData.useDate">{{ formData.useDate }}</text>
              <text v-else class="placeholder">请选择日期</text>
            </view>
          </view>
          <view class="form-item">
            <text class="label">点号</text>
            <input v-model="formData.position" placeholder="请输入点号" />
          </view>
          <view class="form-item">
            <text class="label">高值类型</text>
            <uni-data-select v-model="formData.heightType" :localdata="highTypeOptions" placeholder="请选择高值类型"
              class="weather-select" @change="handleHighTypeChange" />
          </view>
          <view class="form-item">
            <text class="label">高值（m）</text>
            <input v-model="formData.height" type="number" placeholder="请输入高值" />
          </view>
          <view class="form-item">
            <text class="label">天气</text>
            <uni-data-select v-model="formData.weather" :localdata="weatherOptions" placeholder="请选择天气"
              class="weather-select" />
          </view>
          <view class="form-item">
            <text class="label">干温 (°C)</text>
            <input v-model="formData.dryTemperature" type="number" placeholder="请输入干温" />
          </view>
          <view class="form-item">
            <text class="label">湿温 (°C)</text>
            <input v-model="formData.wetTemperature" type="number" placeholder="请输入湿温" />
          </view>
          <view class="form-item">
            <text class="label">气压 (hPa)</text>
            <input v-model="formData.airPressure" type="number" placeholder="请输入气压" />
          </view>
          <view class="form-item" v-if="formData.usageType !== '全站仪'">
            <text class="label">开机时间</text>
            <view class="datetime-picker" @click="openPowerOnPicker">
              <text v-if="formData.powerOn">{{ formatDateTime(formData.powerOn) }}</text>
              <text v-else class="placeholder">请选择开机时间</text>
            </view>
          </view>
          <view class="form-item" v-if="formData.usageType !== '全站仪'">
            <text class="label">关机时间</text>
            <view class="datetime-picker" @click="openPowerOffPicker">
              <text v-if="formData.powerOff">{{ formatDateTime(formData.powerOff) }}</text>
              <text v-else class="placeholder">请选择关机时间</text>
            </view>
          </view>
        </view>
        <view class="popup-footer">
          <button class="btn cancel" @click="closePopup">取消</button>
          <button class="btn confirm" @click="submitForm">确定</button>
        </view>
      </view>
    </uni-popup>

    <!-- 项目选择器 -->
    <project-picker :visible.sync="showPicker" :selected.sync="selectedProject" @confirm="handleProjectSelect" />
    <!-- 设备选择器 -->
    <device-picker :visible.sync="openDevice" :selected.sync="selectDevice" :multiple="false"
      @confirm="handleDeviceSelect"></device-picker>
    <!-- 时间选择器 -->
    <uv-datetime-picker ref="powerOnPicker" v-model="formData.powerOn" mode="datetime"
      @confirm="handlePowerOnConfirm"></uv-datetime-picker>
    <uv-datetime-picker ref="powerOffPicker" v-model="formData.powerOff" mode="datetime"
      @confirm="handlePowerOffConfirm"></uv-datetime-picker>
  </view>
</template>

<script>
import { listDeviceLog, getDeviceLog, addDeviceLog, updateDeviceLog, delDeviceLog } from '@/api/oa/device/deviceLog';
import { listProject } from '@/api/oa/project/project';
import ProjectPicker from '@/pages/components/ProjectPicker.vue';
import DevicePicker from '@/pages/components/DevicePicker.vue';
import { parseTime } from '@/utils/common';

export default {
  components: {
    ProjectPicker,
    DevicePicker
  },
  data() {
    return {
      logList: [],
      scrollTop: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        projectNumber: ''
      },
      showPicker: false,
      selectedProject: null,
      openDevice: false,
      selectDevice: {},
      weatherOptions: [
        { text: '晴', value: '晴' },
        { text: '阴', value: '阴' },
        { text: '多云', value: '多云' },
        { text: '雨', value: '雨' },
        { text: '雪', value: '雪' }
      ],
      highTypeOptions: [],
      useTypeOptions: [
        { text: '全站仪', value: '全站仪' },
        { text: 'GNSS基站', value: 'GNSS基站' },
        { text: 'GNSS静态', value: 'GNSS静态' }
      ],
      formData: {
        useDate: '',
        weather: '',
        position: '',
        dryTemperature: '',
        wetTemperature: '',
        airPressure: '',
        heightType: '',
        height: '',
        powerOn: '',
        powerOff: '',
        usageType: ''
      },
      isEdit: false,
      currentLogId: null,
      hasMore: true,
      loading: false,
      isRefreshing: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      if (this.loading) return
      this.loading = true

      try {
        if (this.$store.getters.roles.includes('leader') || this.$store.getters.roles.includes('dept')) {
          this.queryParams.userId = null
        } else {
          this.queryParams.userId = this.$store.getters.userId
        }

        const res = await listDeviceLog(this.queryParams)
        if (this.queryParams.pageNum === 1) {
          this.logList = res.rows
        } else {
          this.logList = [...this.logList, ...res.rows]
        }

        this.hasMore = res.rows.length === this.queryParams.pageSize
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'error'
        })
      } finally {
        this.loading = false
      }
    },
    async onRefresh() {
      this.isRefreshing = true
      this.queryParams.pageNum = 1
      this.hasMore = true
      await this.getList()
      this.isRefreshing = false
    },
    upper() {
      // 下拉刷新
      this.onRefresh()
    },
    lower() {
      // 上拉加载更多
      if (this.hasMore && !this.loading) {
        this.queryParams.pageNum++
        this.getList()
      }
    },
    scroll(e) {
      // 可以在这里添加滚动相关的逻辑
    },
    handleAdd() {
      this.formData.useDate = parseTime(new Date(), '{y}-{m}-{d}');
      this.$refs.addPopup.open()
    },
    closePopup() {
      this.$refs.addPopup.close()
      this.resetForm()
    },
    showProjectPicker() {
      this.showPicker = true
    },
    showDevicePicker() {
      this.openDevice = true
    },
    handleProjectSelect(project) {
      this.selectedProject = project
    },
    handleDeviceSelect(device) {
      this.selectDevice = device
    },
    openPowerOnPicker() {
      this.$refs.powerOnPicker.open()
    },
    openPowerOffPicker() {
      this.$refs.powerOffPicker.open()
    },
    handlePowerOnConfirm(e) {
      this.formData.powerOn = e.value
    },
    handlePowerOffConfirm(e) {
      this.formData.powerOff = e.value
    },
    confirmUseDate(e) {
      this.formData.useDate = parseTime(e[0], '{y}-{m}-{d}')
    },
    formatDateTime(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    resetForm() {
      this.isEdit = false
      this.currentLogId = null
      this.selectedProject = null
      this.formData = {
        useDate: '',
        weather: '',
        position: '',
        dryTemperature: '',
        wetTemperature: '',
        airPressure: '',
        heightType: '',
        height: '',
        powerOn: '',
        powerOff: '',
        usageType: ''
      }
    },
    async submitForm() {
      if (!this.selectDevice) {
        uni.showToast({
          title: '请选择设备',
          icon: 'none'
        })
        return
      }
      const params = {
        ...this.formData,
        projectId: this.selectedProject ? this.selectedProject.projectId : null,
        deviceId: this.selectDevice.deviceId,
        userId: this.$store.getters.userId,
        powerOn: Number(this.formData.powerOn),
        powerOff: Number(this.formData.powerOff)
      }

      try {
        if (this.isEdit) {
          await updateDeviceLog({
            ...params,
            logId: this.currentLogId
          })
          uni.showToast({
            title: '修改成功',
            icon: 'success'
          })
        } else {
          await addDeviceLog(params)
          uni.showToast({
            title: '添加成功',
            icon: 'success'
          })
        }
        this.closePopup()
        this.getList()
      } catch (error) {
        uni.showToast({
          title: this.isEdit ? '修改失败' : '添加失败',
          icon: 'error'
        })
      }
    },
    handleEdit(item) {
      this.isEdit = true
      this.currentLogId = item.logId
      this.selectedProject = item.project
      this.selectDevice = item.device
      this.formData = {
        useDate: item.useDate,
        weather: item.weather,
        position: item.position,
        dryTemperature: item.dryTemperature,
        wetTemperature: item.wetTemperature,
        airPressure: item.airPressure,
        heightType: item.heightType,
        height: item.height,
        powerOn: item.powerOn,
        powerOff: item.powerOff,
        usageType: item.usageType
      }
      if (item.usageType === '全站仪') {
        this.highTypeOptions = [
          { text: '仪器高', value: '仪器高' },
          { text: '棱镜高', value: '棱镜高' }
        ]
      } else if (item.usageType === 'GNSS基站' || item.usageType === 'GNSS静态') {
        this.highTypeOptions = [
          { text: '斜高', value: '斜高' },
          { text: '直高', value: '直高' },
          { text: '杆高', value: '杆高' },
          { text: '天线高', value: '天线高' }
        ]
      }
      this.$refs.addPopup.open()
    },
    async handleDelete(item) {
      try {
        const [err, res] = await uni.showModal({
          title: '确认删除',
          content: '确定要删除这条记录吗？',
          confirmColor: '#FF3B30'
        })

        if (err || !res.confirm) {
          return
        }

        await delDeviceLog(item.logId)
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
        this.getList()
      } catch (error) {
        uni.showToast({
          title: '删除失败',
          icon: 'error'
        })
      }
    },
    handleHighTypeChange(value) {
      this.formData.heightType = value
    },
    handleUseTypeChange(value) {
      this.formData.usageType = value
      if (value === '全站仪') {
        this.highTypeOptions = [
          { text: '仪器高', value: '仪器高' },
          { text: '棱镜高', value: '棱镜高' }
        ]
      } else if (value === 'GNSS基站' || value === 'GNSS静态') {
        this.highTypeOptions = [
          { text: '斜高', value: '斜高' },
          { text: '直高', value: '直高' },
          { text: '杆高', value: '杆高' },
          { text: '天线高', value: '天线高' }
        ]
      }
      this.formData.heightType = ''
    },
    async handleSearch() {
      this.queryParams.pageNum = 1
      const res = await listProject({
        pageNum: 1,
        pageSize: 10,
        projectNumber: this.queryParams.projectNumber
      })
      let projectList = res.rows;
      if (projectList.length == 1) {
        this.queryParams.projectId = projectList[0].projectId
      } else {
        this.queryParams.projectId = null
      }
      this.getList()
    },
    clearSearch() {
      this.queryParams.projectNumber = ''
      this.queryParams.projectId = null
      this.getList()
    },
    isOwnRecord(item) {
      return item.user.userId === this.$store.getters.userId
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll-Y {
  height: 100vh;
  background: #f8f8f8;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 120rpx;
}

.content-wrapper {
  padding: 20rpx;
  min-height: 100%;
}

.fab-button {
  position: fixed;
  right: 30rpx;
  bottom: 50rpx;
  width: 100rpx;
  height: 100rpx;
  background: #007AFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.3);
  z-index: 99;
  transition: all 0.3s;

  &:active {
    transform: scale(0.95);
    background: #0062cc;
  }
}

.project-card {
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

  &:last-child {
    margin-bottom: 0;
  }

  &-item {
    padding: 20rpx;

    &-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #f5f5f5;

      .project-info {
        display: flex;
        align-items: center;
        gap: 20rpx;

        .project-number {
          font-size: 28rpx;
          color: #666;
          background: #f5f5f5;
          padding: 4rpx 16rpx;
          border-radius: 8rpx;
        }

        .project-name {
          font-size: 32rpx;
          color: #333;
          font-weight: bold;
        }
      }

      .action-buttons {
        display: flex;
        gap: 16rpx;

        .action-btn {
          width: 64rpx;
          height: 64rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f8f8f8;
          border: none;
          border-radius: 8rpx;
          padding: 0;
          transition: all 0.3s;

          &:active {
            transform: scale(0.95);
          }

          &.edit {
            &:active {
              background: #e6f2ff;
            }
          }

          &.delete {
            &:active {
              background: #ffe6e6;
            }
          }
        }
      }
    }

    &-content {
      display: flex;
      flex-direction: column;
      gap: 12rpx;

      .info-row {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        line-height: 1.5;

        .info-label {
          color: #666;
          width: 140rpx;
          flex-shrink: 0;
        }

        .info-value {
          color: #333;
          flex: 1;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;

  .empty-image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 20rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

.popup-content {
  background: #fff;
  border-radius: 24rpx;
  width: 680rpx;
  max-height: 75vh;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    background: #f8f8f8;

    .title {
      font-size: 34rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .popup-body {
    padding: 30rpx;
    max-height: 60vh;
    overflow-y: auto;

    .form-item {
      margin-bottom: 30rpx;

      .label {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;
        font-weight: 500;
      }

      input {
        width: 100%;
        height: 88rpx;
        background: #f8f8f8;
        border: 2rpx solid #eee;
        border-radius: 12rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
        color: #333;
        transition: all 0.3s;

        &:focus {
          border-color: #007AFF;
          background: #fff;
        }

        &::placeholder {
          color: #999;
        }
      }

      .project-picker {
        width: 100%;
        height: 88rpx;
        background: #f8f8f8;
        border: 2rpx solid #eee;
        border-radius: 12rpx;
        padding: 0 24rpx;
        display: flex;
        align-items: center;
        transition: all 0.3s;

        &:active {
          background: #f0f0f0;
        }

        .placeholder {
          color: #999;
          font-size: 28rpx;
        }
      }

      .datetime-picker {
        width: 100%;
        height: 88rpx;
        background: #f8f8f8;
        border: 2rpx solid #eee;
        border-radius: 12rpx;
        padding: 0 24rpx;
        display: flex;
        align-items: center;
        transition: all 0.3s;

        &:active {
          background: #f0f0f0;
        }

        .placeholder {
          color: #999;
          font-size: 28rpx;
        }
      }
    }
  }

  .popup-footer {
    display: flex;
    gap: 24rpx;
    padding: 30rpx;
    background: #f8f8f8;
    border-top: 2rpx solid #eee;

    .btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      border-radius: 12rpx;
      font-size: 30rpx;
      font-weight: 500;
      transition: all 0.3s;

      &.cancel {
        background: #f0f0f0;
        color: #666;

        &:active {
          background: #e0e0e0;
        }
      }

      &.confirm {
        background: #007AFF;
        color: #fff;

        &:active {
          background: #0062cc;
        }
      }
    }
  }
}

.weather-select {
  :deep(.uni-data-select) {
    .uni-select {
      height: 88rpx;
      background: #f8f8f8;
      border: 2rpx solid #eee;
      border-radius: 12rpx;

      .uni-select__input-box {
        height: 88rpx;
        line-height: 88rpx;
        padding: 0 24rpx;
      }

      .uni-select__input-text {
        font-size: 28rpx;
        color: #333;
      }

      .uni-select__input-placeholder {
        color: #999;
      }
    }
  }
}

:deep(.uni-date) {
  .uni-date__icon-clear {
    display: none;
  }

  .uni-date-editor {
    height: 88rpx;
    background: #f8f8f8;
    border: 2rpx solid #eee;
    border-radius: 12rpx;

    .uni-date__input {
      height: 88rpx;
      line-height: 88rpx;
      font-size: 28rpx;
      color: #333;
    }
  }
}

.loading-more,
.no-more {
  text-align: center;
  padding: 20rpx 0;
  margin-bottom: 120rpx;

  .loading-text,
  .no-more-text {
    font-size: 24rpx;
    color: #999;
  }
}

.search-bar {
  padding: 20rpx;
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

  .search-input-wrapper {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    border-radius: 8rpx;
    padding: 0 20rpx;
    height: 72rpx;

    .search-input {
      flex: 1;
      height: 72rpx;
      margin: 0 20rpx;
      font-size: 28rpx;
      color: #333;

      &::placeholder {
        color: #999;
      }
    }
  }
}
</style>