电表采集页面添加

gaoluyang

9 天以前 cd6eb9089e893cf7fa998543af1125dbef81a355

电表采集页面添加

 src/views/energyManagement/meterCollection/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,556 @@
<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>电表采集管理</span>
        <el-button style="float: right; padding: 3px 0" link @click="refreshData">
          <i class="el-icon-refresh"></i> åˆ·æ–°
        </el-button>
      </div>
      
             <!-- æµ‹è¯•æŒ‰é’® -->
       <el-row :gutter="20" style="margin-bottom: 15px;">
         <el-col :span="24">
           <el-button @click="addTestData" type="primary" size="small">添加测试数据</el-button>
           <el-button @click="clearData" type="danger" size="small">清空数据</el-button>
           <el-button @click="testChart" type="success" size="small">测试图表</el-button>
         </el-col>
       </el-row>

       <!-- æœç´¢åŒºåŸŸ -->
       <el-row :gutter="20" class="search-row">
        <el-col :span="6">
          <el-input
            v-model="searchForm.meterNo"
            placeholder="请输入电表编号"
            clearable
            @keyup.enter.native="handleSearch"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.location" placeholder="请选择位置" clearable>
            <el-option label="生产车间A" value="车间A"></el-option>
            <el-option label="生产车间B" value="车间B"></el-option>
            <el-option label="办公区域" value="办公区"></el-option>
            <el-option label="配电室" value="配电室"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-col>
      </el-row>

      <!-- ç”µè¡¨åˆ—表 -->
      <el-table
        :data="meterList"
        style="width: 100%"
        v-loading="loading"
        border
        stripe
        height="calc(100vh - 22em)"
      >
        <el-table-column prop="meterNo" label="电表编号" width="120" />
        <el-table-column prop="location" label="安装位置" width="120" />
        <el-table-column prop="meterType" label="电表类型" width="120" />
        <el-table-column prop="voltage" label="电压等级" width="100" />
        <el-table-column prop="currentReading" label="当前读数(kWh)" width="140" />
        <el-table-column prop="lastReading" label="上次读数(kWh)" width="140" />
        <el-table-column prop="consumption" label="用电量(kWh)" width="120" />
        <el-table-column prop="power" label="功率(kW)" width="100" />
        <el-table-column prop="powerFactor" label="功率因数" width="100" />
                          <el-table-column prop="status" label="状态" width="80">
           <template #default="scope">
             <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
               {{ scope.row.status }}
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="lastUpdateTime" label="最后更新时间" width="160" />
         <el-table-column label="操作" width="180" fixed="right" align="center">
           <template #default="scope">
             <el-button link @click="viewDetails(scope.row)">
               æŸ¥çœ‹è¯¦æƒ…
             </el-button>
             <el-button link @click="manualCollection(scope.row)">
               æ‰‹åŠ¨é‡‡é›†
             </el-button>
           </template>
         </el-table-column>
      </el-table>
      <!-- åˆ†é¡µ -->
            <pagination
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                :page="pagination.currentPage"
                :limit="pagination.pageSize"
                @pagination="handleCurrentChange"
            />
    </el-card>

              <!-- è¯¦æƒ…对话框 -->
      <el-dialog 
        title="电表详情" 
        v-model="detailDialogVisible" 
        width="60%"
        @opened="onDialogOpened"
      >
       <el-row :gutter="20">
         <el-col :span="12">
           <div class="detail-item">
             <label>电表编号:</label>
             <span>{{ currentMeter.meterNo }}</span>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="detail-item">
             <label>安装位置:</label>
             <span>{{ currentMeter.location }}</span>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="detail-item">
             <label>电表类型:</label>
             <span>{{ currentMeter.meterType }}</span>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="detail-item">
             <label>电压等级:</label>
             <span>{{ currentMeter.voltage }}</span>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="detail-item">
             <label>当前读数:</label>
             <span>{{ currentMeter.currentReading }} kWh</span>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="detail-item">
             <label>上次读数:</label>
             <span>{{ currentMeter.lastReading }} kWh</span>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="detail-item">
             <label>用电量:</label>
             <span>{{ currentMeter.consumption }} kWh</span>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="detail-item">
             <label>功率:</label>
             <span>{{ currentMeter.power }} kW</span>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="detail-item">
             <label>功率因数:</label>
             <span>{{ currentMeter.powerFactor }}</span>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="detail-item">
             <label>状态:</label>
             <el-tag :type="currentMeter.status === '正常' ? 'success' : 'danger'">
               {{ currentMeter.status }}
             </el-tag>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="detail-item">
             <label>最后更新时间:</label>
             <span>{{ currentMeter.lastUpdateTime }}</span>
           </div>
         </el-col>
       </el-row>
      
      <!-- ç”¨ç”µè¶‹åŠ¿å›¾ -->
      <div style="margin-top: 20px;">
        <h4>24小时用电趋势</h4>
        <div ref="chartContainer" style="height: 300px;"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'MeterCollection',
  data() {
    return {
      loading: false,
      searchForm: {
        meterNo: '',
        location: '',
        dateRange: []
      },
      meterList: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      detailDialogVisible: false,
      currentMeter: {},
      chart: null
    }
  },
  created() {
    // ç«‹å³ç”Ÿæˆä¸€äº›æµ‹è¯•æ•°æ®
    this.meterList = [
      {
        id: 1,
        meterNo: 'M001',
        location: '车间A',
        meterType: '智能电表',
        voltage: '380V',
        currentReading: 8500,
        lastReading: 8400,
        consumption: 100,
        power: '75.5',
        powerFactor: '0.85',
        status: '正常',
        lastUpdateTime: '2024-01-15 10:30:00'
      },
      {
        id: 2,
        meterNo: 'M002',
        location: '车间B',
        meterType: '多功能电表',
        voltage: '220V',
        currentReading: 6200,
        lastReading: 6100,
        consumption: 100,
        power: '45.2',
        powerFactor: '0.92',
        status: '正常',
        lastUpdateTime: '2024-01-15 10:25:00'
      }
    ]
    this.pagination.total = this.meterList.length
  },
  mounted() {
    // å»¶è¿Ÿä¸€ç‚¹æ—¶é—´å†è°ƒç”¨ï¼Œç¡®ä¿DOM已经渲染
    this.$nextTick(() => {
      this.getMeterList()
    })
  },
  watch: {
    meterList: {
      handler(newVal) {
        console.log('meterList数据变化:', newVal)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // èŽ·å–电表列表
    getMeterList() {
      this.loading = true
      // æ¨¡æ‹ŸAPI调用
      setTimeout(() => {
        const mockData = this.generateMockData()
        this.meterList = mockData
        this.pagination.total = this.meterList.length
        this.loading = false
      }, 500)
    },

    // ç”Ÿæˆæ¨¡æ‹Ÿæ•°æ®
    generateMockData() {
      const locations = ['车间A', '车间B', '办公区', '配电室']
      const meterTypes = ['智能电表', '多功能电表', '普通电表']
      const voltages = ['220V', '380V', '10kV']
      const statuses = ['正常', '异常']
      
      const data = []
      for (let i = 1; i <= 25; i++) {
        const currentReading = Math.floor(Math.random() * 10000) + 5000
        const lastReading = currentReading - Math.floor(Math.random() * 100) - 10
        const consumption = currentReading - lastReading
        const power = Math.random() * 100 + 20
        const powerFactor = (Math.random() * 0.3 + 0.7).toFixed(2)
        
        data.push({
          id: i,
          meterNo: `M${String(i).padStart(3, '0')}`,
          location: locations[Math.floor(Math.random() * locations.length)],
          meterType: meterTypes[Math.floor(Math.random() * meterTypes.length)],
          voltage: voltages[Math.floor(Math.random() * voltages.length)],
          currentReading: currentReading,
          lastReading: lastReading,
          consumption: consumption,
          power: power.toFixed(2),
          powerFactor: powerFactor,
          status: statuses[Math.floor(Math.random() * statuses.length)],
          lastUpdateTime: this.formatDate(new Date(Date.now() - Math.random() * 86400000))
        })
      }
      return data
    },

    // æ ¼å¼åŒ–日期
    formatDate(date) {
      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}`
    },

    // æœç´¢
    handleSearch() {
      this.pagination.currentPage = 1
      this.getMeterList()
    },

    // é‡ç½®æœç´¢
    resetSearch() {
      this.searchForm = {
        meterNo: '',
        location: '',
        dateRange: []
      }
      this.handleSearch()
    },

    // æŸ¥çœ‹è¯¦æƒ…
    viewDetails(row) {
      this.currentMeter = row
      this.detailDialogVisible = true
    },

    // å¯¹è¯æ¡†æ‰“开后初始化图表
    onDialogOpened() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.initChart()
        }, 100)
      })
    },

    // æ‰‹åŠ¨é‡‡é›†
    manualCollection(row) {
      this.$message.success(`正在采集电表 ${row.meterNo} çš„数据...`)
      // æ¨¡æ‹Ÿé‡‡é›†è¿‡ç¨‹
      setTimeout(() => {
        row.currentReading = Math.floor(Math.random() * 100) + row.currentReading
        row.lastUpdateTime = this.formatDate(new Date())
        this.$message.success('数据采集完成')
      }, 1000)
    },

    // åˆ·æ–°æ•°æ®
    refreshData() {
      this.getMeterList()
      this.$message.success('数据已刷新')
    },

    // æ·»åŠ æµ‹è¯•æ•°æ®
    addTestData() {
      const testData = {
        id: Date.now(),
        meterNo: `M${String(this.meterList.length + 1).padStart(3, '0')}`,
        location: '测试位置',
        meterType: '测试电表',
        voltage: '220V',
        currentReading: Math.floor(Math.random() * 10000) + 1000,
        lastReading: Math.floor(Math.random() * 5000) + 500,
        consumption: Math.floor(Math.random() * 100) + 10,
        power: (Math.random() * 100 + 10).toFixed(2),
        powerFactor: (Math.random() * 0.3 + 0.7).toFixed(2),
        status: '正常',
        lastUpdateTime: this.formatDate(new Date())
      }
      this.meterList.push(testData)
      this.pagination.total = this.meterList.length
      this.$message.success('测试数据已添加')
    },

    // æ¸…空数据
    clearData() {
      this.meterList = []
      this.pagination.total = 0
      this.$message.success('数据已清空')
    },

    // æµ‹è¯•å›¾è¡¨
    testChart() {
      this.$message.info('图表测试功能')
      // åˆ›å»ºä¸€ä¸ªæµ‹è¯•å¯¹è¯æ¡†æ¥æµ‹è¯•å›¾è¡¨
      this.currentMeter = {
        meterNo: 'TEST001',
        location: '测试位置',
        meterType: '测试电表',
        voltage: '220V',
        currentReading: 1000,
        lastReading: 900,
        consumption: 100,
        power: '50.0',
        powerFactor: '0.85',
        status: '正常',
        lastUpdateTime: '2024-01-15 12:00:00'
      }
      this.detailDialogVisible = true
    },

    // åˆ†é¡µå¤§å°æ”¹å˜
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getMeterList()
    },

    // å½“前页改变
    handleCurrentChange(val) {
      this.pagination.pageSize = val.limit
      this.pagination.currentPage = val.page
      this.getMeterList()
    },

    // åˆå§‹åŒ–图表
    initChart() {
      try {
        if (this.chart) {
          this.chart.dispose()
          this.chart = null
        }
        
        // ç¡®ä¿DOM元素存在
        if (!this.$refs.chartContainer) {
          console.error('图表容器不存在，等待DOM更新...')
          // å¦‚果容器不存在，等待一下再试
          setTimeout(() => {
            this.initChart()
          }, 100)
          return
        }
        
        // æ£€æŸ¥å®¹å™¨å°ºå¯¸
        const container = this.$refs.chartContainer
        if (container.offsetWidth === 0 || container.offsetHeight === 0) {
          setTimeout(() => {
            this.initChart()
          }, 100)
          return
        }
        this.chart = echarts.init(container)
        
        // ç”Ÿæˆ24小时模拟数据
        const hours = []
        const consumption = []
        for (let i = 0; i < 24; i++) {
          hours.push(`${i}:00`)
          consumption.push(Math.floor(Math.random() * 50) + 20)
        }
        
        const option = {
          title: {
            text: '24小时用电量趋势',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            formatter: '{b}<br/>用电量: {c} kWh'
          },
          xAxis: {
            type: 'category',
            data: hours,
            axisLabel: {
              rotate: 45
            }
          },
          yAxis: {
            type: 'value',
            name: '用电量 (kWh)'
          },
          series: [{
            data: consumption,
            type: 'line',
            smooth: true,
            areaStyle: {
              opacity: 0.3
            },
            itemStyle: {
              color: '#409EFF'
            }
          }]
        }
        
        this.chart.setOption(option)
      } catch (error) {
        console.error('图表初始化失败:', error)
        this.$message.error('图表初始化失败: ' + error.message)
      }
    }
  },
  
  beforeUnmount() {
    if (this.chart) {
      try {
        this.chart.dispose()
        this.chart = null
      } catch (error) {
        console.error('清理图表失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.search-row {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.el-table {
  margin-top: 20px;
}

.detail-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fafafa;
}

.detail-item label {
  font-weight: bold;
  color: #606266;
  margin-right: 10px;
  min-width: 100px;
  display: inline-block;
}

.detail-item span {
  color: #303133;
}

.detail-item .el-tag {
  margin-left: 0;
}
</style>