生产管控-生产报表与绩效分析、库存与物料看板、智能排产三个前端页面开发

gaoluyang

2025-10-11 dd9171eef52864b6d025ef9cc2b5770f5d40ce15

 src/views/warehouseManagement/KeyCoalLocks/index.vue

@@ -3,23 +3,23 @@
    <!-- 搜索表单 -->
    <div class="search_form">
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="储气罐名称：">
          <el-input v-model="searchForm.tankName" placeholder="请输入储气罐名称" clearable style="width: 200px" />
        <el-form-item label="煤仓名称：">
          <el-input v-model="searchForm.coalBinName" placeholder="请输入煤仓名称" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="储气罐类型：">
          <el-select v-model="searchForm.tankType" placeholder="请选择储气罐类型" clearable style="width: 200px">
            <el-option label="液化气储罐" value="液化气储罐" />
            <el-option label="压缩气储罐" value="压缩气储罐" />
            <el-option label="天然气储罐" value="天然气储罐" />
            <el-option label="氧气储罐" value="氧气储罐" />
        <el-form-item label="煤炭类型：">
          <el-select v-model="searchForm.coalType" placeholder="请选择煤炭类型" clearable style="width: 200px">
            <el-option label="无烟煤" value="无烟煤" />
            <el-option label="烟煤" value="烟煤" />
            <el-option label="褐煤" value="褐煤" />
            <el-option label="焦煤" value="焦煤" />
          </el-select>
        </el-form-item>
        <el-form-item label="预警类型：">
          <el-select v-model="searchForm.warningType" placeholder="请选择预警类型" clearable style="width: 200px">
            <el-option label="气体不足" value="气体不足" />
            <el-option label="压力异常" value="压力异常" />
            <el-option label="库存不足" value="库存不足" />
            <el-option label="质量异常" value="质量异常" />
            <el-option label="温度异常" value="温度异常" />
            <el-option label="泄漏预警" value="泄漏预警" />
            <el-option label="自燃预警" value="自燃预警" />
          </el-select>
        </el-form-item>
        <el-form-item label="预警级别：">
@@ -40,7 +40,7 @@
    <div class="table_list">
      <!-- 操作按钮 -->
      <div class="table-operations">
        <el-button type="primary" @click="handleAdd">新增预警规则</el-button>
        <el-button type="primary" @click="handleAdd">新增煤炭预警规则</el-button>
        <el-button type="success" @click="handleBatchProcess">批量处理</el-button>
        <el-button @click="handleExport">导出</el-button>
      </div>
@@ -56,22 +56,22 @@
        <el-table-column align="center" label="序号" type="index" width="60" />

        <!-- 基础信息字段 -->
        <el-table-column label="储气罐编码" prop="tankCode" width="120" show-overflow-tooltip />
        <el-table-column label="储气罐名称" prop="tankName" width="200" show-overflow-tooltip />
        <el-table-column label="储气罐类型" prop="tankType" width="120" show-overflow-tooltip />
        <el-table-column label="规格型号" prop="specificationModel" width="150" show-overflow-tooltip />
        <el-table-column label="容积(m³)" prop="volume" width="100" show-overflow-tooltip />
        <el-table-column label="煤仓编码" prop="coalBinCode" width="120" show-overflow-tooltip />
        <el-table-column label="煤仓名称" prop="coalBinName" width="200" show-overflow-tooltip />
        <el-table-column label="煤炭类型" prop="coalType" width="120" show-overflow-tooltip />
        <el-table-column label="煤质等级" prop="coalGrade" width="150" show-overflow-tooltip />
        <el-table-column label="容量(吨)" prop="capacity" width="100" show-overflow-tooltip />

        <!-- 库存相关字段 -->
        <el-table-column label="当前气体量" prop="currentGasLevel" width="120" show-overflow-tooltip>
        <el-table-column label="当前库存量" prop="currentStock" width="120" show-overflow-tooltip>
          <template #default="scope">
            <span :class="getGasLevelClass(scope.row)">{{ scope.row.currentGasLevel }}%</span>
            <span :class="getStockLevelClass(scope.row)">{{ scope.row.currentStock }}吨</span>
          </template>
        </el-table-column>
        <el-table-column label="安全气体量" prop="safetyGasLevel" width="120" show-overflow-tooltip />
        <el-table-column label="最低气体量" prop="minGasLevel" width="120" show-overflow-tooltip />
        <el-table-column label="最高气体量" prop="maxGasLevel" width="120" show-overflow-tooltip />
        <el-table-column label="当前压力(MPa)" prop="currentPressure" width="140" show-overflow-tooltip />
        <el-table-column label="安全库存量" prop="safetyStock" width="120" show-overflow-tooltip />
        <el-table-column label="最低库存量" prop="minStock" width="120" show-overflow-tooltip />
        <el-table-column label="最高库存量" prop="maxStock" width="120" show-overflow-tooltip />
        <el-table-column label="当前温度(°C)" prop="currentTemperature" width="140" show-overflow-tooltip />

        <!-- 预警规则字段 -->
        <el-table-column label="预警类型" prop="warningType" width="100" show-overflow-tooltip>
@@ -99,12 +99,12 @@
        <el-table-column label="预警时间" prop="warningTime" width="150" show-overflow-tooltip />
        <el-table-column label="预警持续天数" prop="warningDuration" width="120" show-overflow-tooltip />
        <el-table-column label="最后更新时间" prop="lastUpdateTime" width="150" show-overflow-tooltip />
        <el-table-column label="预计充装时间" prop="expectedRefillTime" width="150" show-overflow-tooltip />
        <el-table-column label="预计缺气时间" prop="expectedShortageTime" width="150" show-overflow-tooltip>
        <el-table-column label="预计补煤时间" prop="expectedRefillTime" width="150" show-overflow-tooltip />
        <el-table-column label="预计缺煤时间" prop="expectedShortageTime" width="150" show-overflow-tooltip>
          <template #default="scope">
            <div v-if="scope.row.expectedShortageTime">
              <div v-if="getCountdown(scope.row.expectedShortageTime).isExpired" class="countdown-expired">
                <el-tag type="danger">已缺气</el-tag>
                <el-tag type="danger">已缺煤</el-tag>
              </div>
              <div v-else class="countdown-timer">
                <span :class="getCountdownClass(scope.row.expectedShortageTime)">
@@ -140,7 +140,7 @@
    <!-- 新增/编辑预警规则弹窗 -->
    <el-dialog
        v-model="dialogFormVisible"
        :title="operationType === 'add' ? '新增预警规则' : '编辑预警规则'"
        :title="operationType === 'add' ? '新增煤炭预警规则' : '编辑煤炭预警规则'"
        width="50%"
        @close="closeDialog"
    >
@@ -148,44 +148,44 @@
        <el-row :gutter="20">
          <!-- 基础信息 -->
          <el-col :span="12">
            <el-form-item label="储气罐编码：" prop="tankCode">
              <el-input v-model="form.tankCode" placeholder="请输入储气罐编码" />
            <el-form-item label="煤仓编码：" prop="coalBinCode">
              <el-input v-model="form.coalBinCode" placeholder="请输入煤仓编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="储气罐名称：" prop="tankName">
              <el-input v-model="form.tankName" placeholder="请输入储气罐名称" />
            <el-form-item label="煤仓名称：" prop="coalBinName">
              <el-input v-model="form.coalBinName" placeholder="请输入煤仓名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="储气罐类型：" prop="tankType">
              <el-select v-model="form.tankType" placeholder="请选择储气罐类型" style="width: 100%">
                <el-option label="液化气储罐" value="液化气储罐" />
                <el-option label="压缩气储罐" value="压缩气储罐" />
                <el-option label="天然气储罐" value="天然气储罐" />
                <el-option label="氧气储罐" value="氧气储罐" />
            <el-form-item label="煤炭类型：" prop="coalType">
              <el-select v-model="form.coalType" placeholder="请选择煤炭类型" style="width: 100%">
                <el-option label="无烟煤" value="无烟煤" />
                <el-option label="烟煤" value="烟煤" />
                <el-option label="褐煤" value="褐煤" />
                <el-option label="焦煤" value="焦煤" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格型号：" prop="specificationModel">
              <el-input v-model="form.specificationModel" placeholder="请输入规格型号" />
            <el-form-item label="煤质等级：" prop="coalGrade">
              <el-input v-model="form.coalGrade" placeholder="请输入煤质等级" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="容积(m³)：" prop="volume">
              <el-input-number v-model="form.volume" :min="0" :precision="2" style="width: 100%" />
            <el-form-item label="容量(吨)：" prop="capacity">
              <el-input-number v-model="form.capacity" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前气体量(%)：" prop="currentGasLevel">
              <el-input-number v-model="form.currentGasLevel" :min="0" :max="100" :precision="1" style="width: 100%" />
            <el-form-item label="当前库存量(吨)：" prop="currentStock">
              <el-input-number v-model="form.currentStock" :min="0" :precision="1" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
@@ -193,26 +193,26 @@
        <!-- 库存相关 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="安全气体量(%)：" prop="safetyGasLevel">
              <el-input-number v-model="form.safetyGasLevel" :min="0" :max="100" :precision="1" style="width: 100%" />
            <el-form-item label="安全库存量(吨)：" prop="safetyStock">
              <el-input-number v-model="form.safetyStock" :min="0" :precision="1" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最低气体量(%)：" prop="minGasLevel">
              <el-input-number v-model="form.minGasLevel" :min="0" :max="100" :precision="1" style="width: 100%" />
            <el-form-item label="最低库存量(吨)：" prop="minStock">
              <el-input-number v-model="form.minStock" :min="0" :precision="1" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="最高气体量(%)：" prop="maxGasLevel">
              <el-input-number v-model="form.maxGasLevel" :min="0" :max="100" :precision="1" style="width: 100%" />
            <el-form-item label="最高库存量(吨)：" prop="maxStock">
              <el-input-number v-model="form.maxStock" :min="0" :precision="1" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前压力(MPa)：" prop="currentPressure">
              <el-input-number v-model="form.currentPressure" :min="0" :precision="2" style="width: 100%" />
            <el-form-item label="当前温度(°C)：" prop="currentTemperature">
              <el-input-number v-model="form.currentTemperature" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
@@ -222,10 +222,10 @@
          <el-col :span="12">
            <el-form-item label="预警类型：" prop="warningType">
              <el-select v-model="form.warningType" placeholder="请选择预警类型" style="width: 100%">
                <el-option label="气体不足" value="气体不足" />
                <el-option label="压力异常" value="压力异常" />
                <el-option label="库存不足" value="库存不足" />
                <el-option label="质量异常" value="质量异常" />
                <el-option label="温度异常" value="温度异常" />
                <el-option label="泄漏预警" value="泄漏预警" />
                <el-option label="自燃预警" value="自燃预警" />
              </el-select>
            </el-form-item>
          </el-col>
@@ -267,11 +267,11 @@
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计充装时间：" prop="expectedRefillTime">
            <el-form-item label="预计补煤时间：" prop="expectedRefillTime">
              <el-date-picker
                  v-model="form.expectedRefillTime"
                  type="datetime"
                  placeholder="请选择预计充装时间"
                  placeholder="请选择预计补煤时间"
                  style="width: 100%"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
@@ -281,11 +281,11 @@

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预计缺气时间：" prop="expectedShortageTime">
            <el-form-item label="预计缺煤时间：" prop="expectedShortageTime">
              <el-date-picker
                  v-model="form.expectedShortageTime"
                  type="datetime"
                  placeholder="请选择预计缺气时间"
                  placeholder="请选择预计缺煤时间"
                  style="width: 100%"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
@@ -312,10 +312,10 @@
      </template>
    </el-dialog>

    <!-- 缺气预警弹框 -->
    <!-- 缺煤预警弹框 -->
    <el-dialog
        v-model="shortageWarningVisible"
        title="⚠️ 缺气预警"
        title="⚠️ 缺煤预警"
        width="400px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
@@ -326,43 +326,12 @@
          <el-icon size="48" color="#f56c6c"><WarningFilled /></el-icon>
        </div>
        <div class="warning-message">
          <h3>{{ currentWarningTank.tankName }}</h3>
          <p>储气罐已缺气，请及时处理！</p>
          <h3>{{ currentWarningTank.coalBinName }}</h3>
          <p>煤仓已缺煤，请及时处理！</p>
          <p class="warning-details">
            储气罐编码：{{ currentWarningTank.tankCode }}<br>
            储气罐类型：{{ currentWarningTank.tankType }}<br>
            当前气体量：{{ currentWarningTank.currentGasLevel }}%
          </p>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleShortageWarning">立即处理</el-button>
          <el-button @click="closeShortageWarning">稍后处理</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 缺气预警弹框 -->
    <el-dialog
        v-model="shortageWarningVisible"
        title="⚠️ 缺气预警"
        width="400px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
    >
      <div class="shortage-warning-content">
        <div class="warning-icon">
          <el-icon size="48" color="#f56c6c"><WarningFilled /></el-icon>
        </div>
        <div class="warning-message">
          <h3>{{ currentWarningTank.tankName }}</h3>
          <p>储气罐已缺气，请及时处理！</p>
          <p class="warning-details">
            储气罐编码：{{ currentWarningTank.tankCode }}<br>
            储气罐类型：{{ currentWarningTank.tankType }}<br>
            当前气体量：{{ currentWarningTank.currentGasLevel }}%
            煤仓编码：{{ currentWarningTank.coalBinCode }}<br>
            煤炭类型：{{ currentWarningTank.coalType }}<br>
            当前库存量：{{ currentWarningTank.currentStock }}吨
          </p>
        </div>
      </div>
@@ -402,7 +371,7 @@
const operationType = ref('add')
const total = ref(0)

// 缺气预警相关
// 缺煤预警相关
const shortageWarningVisible = ref(false)
const currentWarningTank = ref({})
const countdownTimer = ref(null)
@@ -415,8 +384,8 @@

// 搜索表单
const searchForm = reactive({
  tankName: '',
  tankType: '',
  coalBinName: '',
  coalType: '',
  warningType: '',
  warningLevel: ''
})
@@ -424,16 +393,16 @@
// 表单数据
const form = reactive({
  id: null,
  tankCode: '',
  tankName: '',
  tankType: '',
  specificationModel: '',
  volume: 0,
  currentGasLevel: 0,
  safetyGasLevel: 0,
  minGasLevel: 0,
  maxGasLevel: 0,
  currentPressure: 0,
  coalBinCode: '',
  coalBinName: '',
  coalType: '',
  coalGrade: '',
  capacity: 0,
  currentStock: 0,
  safetyStock: 0,
  minStock: 0,
  maxStock: 0,
  currentTemperature: 0,
  warningType: '',
  warningLevel: '',
  warningThreshold: 0,
@@ -448,9 +417,9 @@

// 表单验证规则
const rules = {
  tankCode: [{ required: true, message: '请输入储气罐编码', trigger: 'blur' }],
  tankName: [{ required: true, message: '请输入储气罐名称', trigger: 'blur' }],
  tankType: [{ required: true, message: '请选择储气罐类型', trigger: 'change' }],
  coalBinCode: [{ required: true, message: '请输入煤仓编码', trigger: 'blur' }],
  coalBinName: [{ required: true, message: '请输入煤仓名称', trigger: 'blur' }],
  coalType: [{ required: true, message: '请选择煤炭类型', trigger: 'change' }],
  warningType: [{ required: true, message: '请选择预警类型', trigger: 'change' }],
  warningLevel: [{ required: true, message: '请选择预警级别', trigger: 'change' }],
  warningThreshold: [{ required: true, message: '请输入预警阈值', trigger: 'blur' }]
@@ -465,7 +434,7 @@
  const diff = expected - now

  if (diff <= 0) {
    return { text: '已缺气', isExpired: true }
    return { text: '已缺煤', isExpired: true }
  }

  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
@@ -500,23 +469,23 @@
  }
}

// 检查缺气预警
// 检查缺煤预警
const checkShortageWarnings = () => {
  tableData.value.forEach(tank => {
    if (tank.expectedShortageTime) {
      const countdown = getCountdown(tank.expectedShortageTime)
      if (countdown.isExpired && !tank.warningShown) {
  tableData.value.forEach(coalBin => {
    if (coalBin.expectedShortageTime) {
      const countdown = getCountdown(coalBin.expectedShortageTime)
      if (countdown.isExpired && !coalBin.warningShown) {
        // 标记已显示预警，避免重复弹框
        tank.warningShown = true
        showShortageWarning(tank)
        coalBin.warningShown = true
        showShortageWarning(coalBin)
      }
    }
  })
}

// 显示缺气预警弹框
const showShortageWarning = (tank) => {
  currentWarningTank.value = tank
// 显示缺煤预警弹框
const showShortageWarning = (coalBin) => {
  currentWarningTank.value = coalBin
  shortageWarningVisible.value = true

  // 播放提示音（可选）
@@ -524,15 +493,14 @@
  // audio.play()
}

// 处理缺气预警
// 处理缺煤预警
const handleShortageWarning = () => {
  ElMessage.success(`正在处理储气罐 ${currentWarningTank.value.tankName} 的缺气问题`)
  ElMessage.success(`正在处理煤仓 ${currentWarningTank.value.coalBinName} 的缺煤问题`)
  shortageWarningVisible.value = false
  // 这里可以调用处理API
}
// 处理缺气预警
// 关闭缺煤预警
const closeShortageWarning = () => {
  // ElMessage.success(`正在处理储气罐 ${currentWarningTank.value.tankName} 的缺气问题`)
  shortageWarningVisible.value = false
  // 这里可以调用处理API
}
@@ -544,194 +512,194 @@
  const mockData = [
    {
      id: 1,
      tankCode: 'TANK001',
      tankName: '液化气储罐A',
      tankType: '液化气储罐',
      specificationModel: 'LPG-5000L',
      volume: 5000,
      currentGasLevel: 15,
      safetyGasLevel: 30,
      minGasLevel: 10,
      maxGasLevel: 95,
      currentPressure: 2.5,
      warningType: '气体不足',
      coalBinCode: 'COAL001',
      coalBinName: '无烟煤仓A',
      coalType: '无烟煤',
      coalGrade: '优质煤',
      capacity: 5000,
      currentStock: 750,
      safetyStock: 1500,
      minStock: 500,
      maxStock: 4750,
      currentTemperature: 45,
      warningType: '库存不足',
      warningLevel: '紧急',
      warningThreshold: 20,
      warningThreshold: 1000,
      isEnabled: true,
      warningTime: '2024-01-15 08:30:00',
      warningDuration: 3,
      lastUpdateTime: '2024-01-15 10:00:00',
      expectedRefillTime: '2024-01-16 14:00:00',
      expectedShortageTime: '2024-01-15 18:30:00', // 今天下午6:30缺气
      warningRule: '当气体量低于20%时触发预警'
      expectedShortageTime: '2024-01-15 18:30:00', // 今天下午6:30缺煤
      warningRule: '当库存量低于1000吨时触发预警'
    },
    {
      id: 2,
      tankCode: 'TANK002',
      tankName: '压缩气储罐B',
      tankType: '压缩气储罐',
      specificationModel: 'COMP-3000L',
      volume: 3000,
      currentGasLevel: 45,
      safetyGasLevel: 25,
      minGasLevel: 15,
      maxGasLevel: 90,
      currentPressure: 8.2,
      warningType: '压力异常',
      coalBinCode: 'COAL002',
      coalBinName: '烟煤仓B',
      coalType: '烟煤',
      coalGrade: '中等煤',
      capacity: 3000,
      currentStock: 1350,
      safetyStock: 750,
      minStock: 450,
      maxStock: 2700,
      currentTemperature: 52,
      warningType: '质量异常',
      warningLevel: '重要',
      warningThreshold: 10,
      warningThreshold: 800,
      isEnabled: true,
      warningTime: '2024-01-14 16:20:00',
      warningDuration: 2,
      lastUpdateTime: '2024-01-15 09:15:00',
      expectedRefillTime: '2024-01-17 09:00:00',
      expectedShortageTime: '2024-01-18 12:00:00', // 3天后缺气
      warningRule: '当压力超过8MPa时触发预警'
      expectedShortageTime: '2024-01-18 12:00:00', // 3天后缺煤
      warningRule: '当煤质指标异常时触发预警'
    },
    {
      id: 3,
      tankCode: 'TANK003',
      tankName: '天然气储罐C',
      tankType: '天然气储罐',
      specificationModel: 'NG-8000L',
      volume: 8000,
      currentGasLevel: 75,
      safetyGasLevel: 20,
      minGasLevel: 10,
      maxGasLevel: 95,
      currentPressure: 4.8,
      coalBinCode: 'COAL003',
      coalBinName: '褐煤仓C',
      coalType: '褐煤',
      coalGrade: '普通煤',
      capacity: 8000,
      currentStock: 6000,
      safetyStock: 1600,
      minStock: 800,
      maxStock: 7600,
      currentTemperature: 38,
      warningType: '温度异常',
      warningLevel: '一般',
      warningThreshold: 5,
      warningThreshold: 1800,
      isEnabled: true,
      warningTime: '2024-01-13 11:45:00',
      warningDuration: 1,
      lastUpdateTime: '2024-01-15 08:45:00',
      expectedRefillTime: '2024-01-20 10:00:00',
      expectedShortageTime: '2024-01-22 15:30:00', // 7天后缺气
      expectedShortageTime: '2024-01-22 15:30:00', // 7天后缺煤
      warningRule: '当温度超过60°C时触发预警'
    },
    {
      id: 4,
      tankCode: 'TANK004',
      tankName: '氧气储罐D',
      tankType: '氧气储罐',
      specificationModel: 'O2-2000L',
      volume: 2000,
      currentGasLevel: 8,
      safetyGasLevel: 25,
      minGasLevel: 5,
      maxGasLevel: 90,
      currentPressure: 6.5,
      warningType: '泄漏预警',
      coalBinCode: 'COAL004',
      coalBinName: '焦煤仓D',
      coalType: '焦煤',
      coalGrade: '特级煤',
      capacity: 2000,
      currentStock: 160,
      safetyStock: 500,
      minStock: 100,
      maxStock: 1800,
      currentTemperature: 68,
      warningType: '自燃预警',
      warningLevel: '紧急',
      warningThreshold: 15,
      warningThreshold: 300,
      isEnabled: true,
      warningTime: '2024-01-15 07:15:00',
      warningDuration: 4,
      lastUpdateTime: '2024-01-15 11:30:00',
      expectedRefillTime: '2024-01-15 16:00:00',
      expectedShortageTime: '2024-01-15 14:00:00', // 今天下午2点缺气
      warningRule: '当检测到气体泄漏时触发预警'
      expectedShortageTime: '2024-01-15 14:00:00', // 今天下午2点缺煤
      warningRule: '当检测到自燃风险时触发预警'
    },
    {
      id: 5,
      tankCode: 'TANK005',
      tankName: '液化气储罐E',
      tankType: '液化气储罐',
      specificationModel: 'LPG-6000L',
      volume: 6000,
      currentGasLevel: 35,
      safetyGasLevel: 30,
      minGasLevel: 15,
      maxGasLevel: 95,
      currentPressure: 3.2,
      warningType: '气体不足',
      coalBinCode: 'COAL005',
      coalBinName: '无烟煤仓E',
      coalType: '无烟煤',
      coalGrade: '优质煤',
      capacity: 6000,
      currentStock: 2100,
      safetyStock: 1800,
      minStock: 900,
      maxStock: 5700,
      currentTemperature: 42,
      warningType: '库存不足',
      warningLevel: '重要',
      warningThreshold: 20,
      warningThreshold: 1200,
      isEnabled: false,
      warningTime: '2024-01-14 14:30:00',
      warningDuration: 2,
      lastUpdateTime: '2024-01-15 09:00:00',
      expectedRefillTime: '2024-01-19 08:00:00',
      expectedShortageTime: '2024-01-21 10:00:00', // 6天后缺气
      warningRule: '当气体量低于20%时触发预警'
      expectedShortageTime: '2024-01-21 10:00:00', // 6天后缺煤
      warningRule: '当库存量低于1200吨时触发预警'
    },
    {
      id: 6,
      tankCode: 'TANK006',
      tankName: '压缩气储罐F',
      tankType: '压缩气储罐',
      specificationModel: 'COMP-4000L',
      volume: 4000,
      currentGasLevel: 85,
      safetyGasLevel: 20,
      minGasLevel: 10,
      maxGasLevel: 90,
      currentPressure: 7.8,
      warningType: '压力异常',
      coalBinCode: 'COAL006',
      coalBinName: '烟煤仓F',
      coalType: '烟煤',
      coalGrade: '中等煤',
      capacity: 4000,
      currentStock: 3400,
      safetyStock: 800,
      minStock: 400,
      maxStock: 3600,
      currentTemperature: 48,
      warningType: '质量异常',
      warningLevel: '一般',
      warningThreshold: 8,
      warningThreshold: 900,
      isEnabled: true,
      warningTime: '2024-01-12 09:20:00',
      warningDuration: 1,
      lastUpdateTime: '2024-01-15 08:30:00',
      expectedRefillTime: '2024-01-25 14:00:00',
      expectedShortageTime: '2024-01-28 16:00:00', // 13天后缺气
      warningRule: '当压力超过8MPa时触发预警'
      expectedShortageTime: '2024-01-28 16:00:00', // 13天后缺煤
      warningRule: '当煤质指标异常时触发预警'
    },
    {
      id: 7,
      tankCode: 'TANK007',
      tankName: '天然气储罐G',
      tankType: '天然气储罐',
      specificationModel: 'NG-10000L',
      volume: 10000,
      currentGasLevel: 92,
      safetyGasLevel: 15,
      minGasLevel: 8,
      maxGasLevel: 95,
      currentPressure: 5.2,
      coalBinCode: 'COAL007',
      coalBinName: '褐煤仓G',
      coalType: '褐煤',
      coalGrade: '普通煤',
      capacity: 10000,
      currentStock: 9200,
      safetyStock: 1500,
      minStock: 800,
      maxStock: 9500,
      currentTemperature: 55,
      warningType: '温度异常',
      warningLevel: '重要',
      warningThreshold: 6,
      warningThreshold: 1600,
      isEnabled: true,
      warningTime: '2024-01-11 16:45:00',
      warningDuration: 1,
      lastUpdateTime: '2024-01-15 07:45:00',
      expectedRefillTime: '2024-01-30 09:00:00',
      expectedShortageTime: '2024-02-05 12:00:00', // 21天后缺气
      expectedShortageTime: '2024-02-05 12:00:00', // 21天后缺煤
      warningRule: '当温度超过60°C时触发预警'
    },
    {
      id: 8,
      tankCode: 'TANK008',
      tankName: '氧气储罐H',
      tankType: '氧气储罐',
      specificationModel: 'O2-1500L',
      volume: 1500,
      currentGasLevel: 12,
      safetyGasLevel: 30,
      minGasLevel: 8,
      maxGasLevel: 90,
      currentPressure: 4.5,
      warningType: '泄漏预警',
      coalBinCode: 'COAL008',
      coalBinName: '焦煤仓H',
      coalType: '焦煤',
      coalGrade: '特级煤',
      capacity: 1500,
      currentStock: 180,
      safetyStock: 450,
      minStock: 120,
      maxStock: 1350,
      currentTemperature: 72,
      warningType: '自燃预警',
      warningLevel: '紧急',
      warningThreshold: 12,
      warningThreshold: 250,
      isEnabled: true,
      warningTime: '2024-01-15 06:30:00',
      warningDuration: 5,
      lastUpdateTime: '2024-01-15 12:15:00',
      expectedRefillTime: '2024-01-15 20:00:00',
      expectedShortageTime: '2024-01-15 17:30:00', // 今天下午5:30缺气
      warningRule: '当检测到气体泄漏时触发预警'
      expectedShortageTime: '2024-01-15 17:30:00', // 今天下午5:30缺煤
      warningRule: '当检测到自燃风险时触发预警'
    }
  ]

  // 根据搜索条件过滤数据
  let filteredData = mockData.filter(item => {
    if (searchForm.tankName && !item.tankName.includes(searchForm.tankName)) return false
    if (searchForm.tankType && item.tankType !== searchForm.tankType) return false
    if (searchForm.coalBinName && !item.coalBinName.includes(searchForm.coalBinName)) return false
    if (searchForm.coalType && item.coalType !== searchForm.coalType) return false
    if (searchForm.warningType && item.warningType !== searchForm.warningType) return false
    if (searchForm.warningLevel && item.warningLevel !== searchForm.warningLevel) return false
    return true
@@ -814,7 +782,7 @@
  try {
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 300))
    ElMessage.success(`正在处理预警：${row.tankName}`)
    ElMessage.success(`正在处理预警：${row.coalBinName}`)
    getList()
  } catch (error) {
    ElMessage.error('处理预警失败')
@@ -824,7 +792,7 @@
// 删除
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(`确定要删除预警规则：${row.tankName}吗？`, '提示', {
    await ElMessageBox.confirm(`确定要删除预警规则：${row.coalBinName}吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
@@ -873,7 +841,7 @@
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `储气罐预警数据_${new Date().getTime()}.csv`
    link.download = `煤炭库存预警数据_${new Date().getTime()}.csv`
    link.click()
    window.URL.revokeObjectURL(url)

@@ -886,26 +854,26 @@
// 生成CSV内容
const generateCSV = (data) => {
  const headers = [
    '储气罐编码', '储气罐名称', '储气罐类型', '规格型号', '容积(m³)',
    '当前气体量(%)', '安全气体量(%)', '最低气体量(%)', '最高气体量(%)',
    '当前压力(MPa)', '预警类型', '预警级别', '预警阈值', '是否启用',
    '预警时间', '预警持续天数', '最后更新时间', '预计充装时间', '预计缺气时间', '预警规则描述'
    '煤仓编码', '煤仓名称', '煤炭类型', '煤质等级', '容量(吨)',
    '当前库存量(吨)', '安全库存量(吨)', '最低库存量(吨)', '最高库存量(吨)',
    '当前温度(°C)', '预警类型', '预警级别', '预警阈值', '是否启用',
    '预警时间', '预警持续天数', '最后更新时间', '预计补煤时间', '预计缺煤时间', '预警规则描述'
  ]

  const csvRows = [headers.join(',')]

  data.forEach(item => {
    const row = [
      item.tankCode,
      item.tankName,
      item.tankType,
      item.specificationModel,
      item.volume,
      item.currentGasLevel,
      item.safetyGasLevel,
      item.minGasLevel,
      item.maxGasLevel,
      item.currentPressure,
      item.coalBinCode,
      item.coalBinName,
      item.coalType,
      item.coalGrade,
      item.capacity,
      item.currentStock,
      item.safetyStock,
      item.minStock,
      item.maxStock,
      item.currentTemperature,
      item.warningType,
      item.warningLevel,
      item.warningThreshold,
@@ -928,7 +896,7 @@
  try {
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 200))
    ElMessage.success(`${row.tankName} 的启用状态已更新`)
    ElMessage.success(`${row.coalBinName} 的启用状态已更新`)
  } catch (error) {
    ElMessage.error('状态更新失败')
    // 恢复原状态
@@ -979,11 +947,11 @@
  proxy.$refs.formRef?.resetFields()
}

// 获取气体量样式类
const getGasLevelClass = (row) => {
  if (row.currentGasLevel < row.minGasLevel) {
// 获取库存量样式类
const getStockLevelClass = (row) => {
  if (row.currentStock < row.minStock) {
    return 'text-danger'
  } else if (row.currentGasLevel > row.maxGasLevel) {
  } else if (row.currentStock > row.maxStock) {
    return 'text-warning'
  }
  return 'text-success'
@@ -992,10 +960,10 @@
// 获取预警类型标签样式
const getWarningTypeTag = (type) => {
  const typeMap = {
    '气体不足': 'danger',
    '压力异常': 'warning',
    '库存不足': 'danger',
    '质量异常': 'warning',
    '温度异常': 'info',
    '泄漏预警': 'danger'
    '自燃预警': 'danger'
  }
  return typeMap[type] || 'info'
}