Merge remote-tracking branch 'refs/remotes/origin/dev_New' into dev_tide_mi...

zouyu

9 天以前 1c0863efe062af3ebcdecb8c10568d779f5c8295

 src/views/equipmentManagement/operationManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,370 @@
<template>
  <div class="app-container">

    <!-- ç­›é€‰æ¡ä»¶ -->
    <div class="filter-section">
      <el-select v-model="deviceFilter" placeholder="设备状态筛选" clearable style="width: 200px; margin-right: 10px;">
        <el-option label="全部" value="all" />
        <el-option label="运行中" value="start" />
        <el-option label="停止运行" value="stop" />
      </el-select>
    </div>

    <!-- è®¾å¤‡å¯åœè®°å½•è¡¨æ ¼ -->
    <el-card class="table-card">
      <template #header>
        <span>设备运行记录</span>
      </template>
      <el-table
        :data="filteredDeviceRecords"
        style="width: 100%"
        :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
        :row-class-name="getRowClassName"
        v-loading="loading"
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="60"
        />
        <el-table-column
          label="设备名称"
          prop="deviceName"
          show-overflow-tooltip
        />
        <el-table-column
          label="规格型号"
          prop="deviceModel"
          show-overflow-tooltip
        />
        <el-table-column
          label="设备状态"
          prop="status"
          width="150"
          align="center"
        >
          <template #default="scope">
            <!-- è¶…时未启动时显示警告 -->
            <el-tag
              v-if="isOverdue(scope.row)"
              type="warning"
              size="small"
              effect="dark"
            >
              <el-icon><Warning /></el-icon>
              è¶…时未启动
            </el-tag>
            <!-- æ­£å¸¸çŠ¶æ€æ—¶æ˜¾ç¤ºè®¾å¤‡çŠ¶æ€ -->
            <el-tag
              v-else
              :type="getDeviceStatusType(scope.row.status)"
              size="small"
            >
              <el-icon v-if="scope.row.status === '运行中'"><VideoPlay /></el-icon>
              <el-icon v-else><VideoPause /></el-icon>
              {{ scope.row.status || '未知' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="计划运行时间"
          prop="planRuntimeTime"
          width="150"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.planRuntimeTime || '-' }}
          </template>
        </el-table-column>
        <el-table-column
          label="开始运行时间"
          prop="startRuntimeTime"
          width="180"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.startRuntimeTime || '-' }}
          </template>
        </el-table-column>
        <el-table-column
          label="结束运行时间"
          prop="endRuntimeTime"
          width="180"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.endRuntimeTime || '-' }}
          </template>
        </el-table-column>
        <el-table-column
          label="运行时长"
          prop="runtimeDuration"
          width="120"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.runtimeDuration || '-' }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
          align="center"
        >
          <template #default="scope">
            <!-- è¶…时未启动时显示启动按钮 -->
            <el-button
              v-if="isOverdue(scope.row)"
              type="warning"
              size="small"
              @click="changeDeviceStatus(scope.row, '启动运行')"
            >
              <el-icon><VideoPlay /></el-icon>
              ç«‹å³å¯åŠ¨
            </el-button>
            <!-- æ­£å¸¸çŠ¶æ€æ—¶æ˜¾ç¤ºå¯¹åº”的操作按钮 -->
            <template v-else>
              <el-button
                v-if="scope.row.status === '运行中'"
                type="danger"
                size="small"
                @click="changeDeviceStatus(scope.row, '停止运行')"
              >
                <el-icon><VideoPause /></el-icon>
                åœæ­¢è¿è¡Œ
              </el-button>
              <el-button
                v-else
                type="success"
                size="small"
                @click="changeDeviceStatus(scope.row, '启动运行')"
              >
                <el-icon><VideoPlay /></el-icon>
                å¯åŠ¨è¿è¡Œ
              </el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-card>


  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import {
  VideoPlay,
  VideoPause,
  Warning
} from '@element-plus/icons-vue'
import {editLedger, getLedgerPage} from "@/api/equipmentManagement/ledger.js";

// å“åº”式数据
const deviceFilter = ref('all')
const loading = ref(false)
const total = ref(0)
const queryParams = ref({
  current: -1,
  size: -1
})

// ç§»é™¤æ¦‚览数据，因为现在使用表格展示

// è®¾å¤‡å¯åœè®°å½•æ•°æ®
const deviceRecords = ref([])
const allDeviceRecords = ref([]) // å­˜å‚¨æ‰€æœ‰åŽŸå§‹æ•°æ®

// æ ¹æ®ç­›é€‰æ¡ä»¶è¿‡æ»¤æ•°æ®
const filteredDeviceRecords = computed(() => {
  let filtered = allDeviceRecords.value

  // æ ¹æ®è®¾å¤‡çŠ¶æ€ç­›é€‰
  if (deviceFilter.value !== 'all') {
    if (deviceFilter.value === 'start') {
      filtered = filtered.filter(device => device.status === '运行中')
    } else if (deviceFilter.value === 'stop') {
      filtered = filtered.filter(device => device.status === '停止运行')
    }
  }

  return filtered
})

// æ£€æŸ¥è®¾å¤‡æ˜¯å¦è¶…时未启动
const isOverdue = (device) => {
  if (!device.planRuntimeTime || device.status === '运行中' || device.startRuntimeTime) {
    return false
  }
  
  const planTime = new Date(device.planRuntimeTime)
  const currentTime = new Date()
  
  return currentTime > planTime
}

// æ–¹æ³•
const getList = async () => {
  loading.value = true
  try {
    const response = await getLedgerPage(queryParams.value)
    if (response.code === 200) {
      allDeviceRecords.value = response.data.records || []
      total.value = response.data.total || 0
    }
  } catch (error) {
    console.error('获取设备列表失败:', error)
    ElMessage.error('获取设备列表失败')
  } finally {
    loading.value = false
  }
}

const changeDeviceStatus = async (device, status) => {
  try {
    const currentTime = new Date().toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false
    }).replace(/\//g, '-')
    
    // æ›´æ–°è®¾å¤‡çŠ¶æ€å’Œç›¸å…³æ—¶é—´å­—段
    if (status === '启动运行') {
      device.status = '运行中'
      device.startRuntimeTime = currentTime
      device.endRuntimeTime = null // æ¸…空结束时间
      device.runtimeDuration = null // æ¸…空运行时长
    } else {
      device.status = '停止运行'
      device.endRuntimeTime = currentTime
      // è®¡ç®—运行时长
      if (device.startRuntimeTime) {
        const startTime = new Date(device.startRuntimeTime)
        const endTime = new Date(currentTime)
        const duration = endTime - startTime
        const hours = Math.floor(duration / (1000 * 60 * 60))
        const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60))
        device.runtimeDuration = `${hours}小时${minutes}分钟`
      }
    }
    const params = {
         id: device.id,
         status: device.status,
         planRuntimeTime: device.planRuntimeTime,
         startRuntimeTime: device.startRuntimeTime,
         endRuntimeTime: device.endRuntimeTime,
         runtimeDuration: device.runtimeDuration,
      }
    // è°ƒç”¨API更新设备状态
    const response = await editLedger(params)
    if (response.code === 200) {
      ElMessage.success(`${device.deviceName} ${status}成功`)
      // åˆ·æ–°åˆ—表
      await getList()
    } else {
      ElMessage.error(response.msg || '操作失败')
    }
  } catch (error) {
    console.error('更新设备状态失败:', error)
    ElMessage.error('操作失败')
  }
}

const getDeviceStatusType = (status) => {
  if (status === '运行中') {
    return 'success'
  } else if (status === '停止运行') {
    return 'danger'
  } else {
    return 'info'
  }
}

// èŽ·å–表格行的类名
const getRowClassName = ({ row }) => {
  if (isOverdue(row)) {
    return 'overdue-row'
  }
  return ''
}



// ç»„件挂载时初始化数据
onMounted(() => {
  getList()
})
</script>

<style scoped>
.app-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}


.filter-section {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: flex-start;
}

.table-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.el-card__header) {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  font-weight: 500;
  font-size: 16px;
}

:deep(.el-table .el-table__header-wrapper th) {
  background-color: #F0F1F5 !important;
  color: #333333;
  font-weight: 600;
}

:deep(.el-table .el-table__body-wrapper td) {
  padding: 12px 0;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-tag) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* è¶…时未启动行的样式 */
:deep(.overdue-row) {
  background-color: #fef0f0 !important;
  border-left: 4px solid #f56c6c;
}

:deep(.overdue-row:hover) {
  background-color: #fde2e2 !important;
}

:deep(.overdue-row td) {
  background-color: transparent !important;
}
</style>