jonhon-mes-web/src/views/energyManagement/electricityManagement.vue

<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model="form"
      v-model:page="page"
      ref="crud"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <!-- 自定义开关列 -->
      <template #isJumbotron="scope">
        <el-switch v-model="scope.row.isJumbotron" :active-value="1"
          :inactive-value="0" @change="(val) => changeJumbtron(scope.row,val)"></el-switch>
      </template>
      <!-- 自定义操作列 -->
      <template #menu="scope">
        <el-button type="text" size="small" @click="handleElectricDetail(scope.row)"
          >用电明细</el-button
        >
      </template>
    </avue-crud>

    <!-- 用电明细弹窗 -->
    <el-dialog
      title="用电明细"
      v-model="detailDialogVisible"
      width="60%"
      :before-close="closeDetailDialog"
    >
      <div>
        <!-- <div>
          <h3>{{ currentWorkCenter }} - 用电明细</h3>
          <div>
            <el-form :inline="true">
              <el-form-item label="产线选择：">
                <el-select
                  v-model="selectedProductionLine"
                  placeholder="请选择产线"
                  @change="handleProductionLineChange"
                  style="width: 200px"
                >
                  <el-option
                    v-for="item in productionLines"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="时间范围：">
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="handleDateRangeChange"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </div> -->
        <!-- 设备用电明细表格 -->
        <div>
          <h4>设备用电明细</h4>
          <avue-crud :option="detailOption" :data="detailData" ref="detailCrud"> </avue-crud>
        </div>
      </div>
      <template #footer>
        <span>
          <el-button @click="closeDetailDialog">关闭</el-button>
          <!-- <el-button type="primary" @click="saveDetailData">保存</el-button> -->
        </span>
      </template>
    </el-dialog>
  </basic-container>
</template>

<script>
import { pageList, editItem,pageListDetail } from '@/api/energyManagement/waterManagement';
export default {
  data() {
    return {
      data: [],
      loading: false,
      form: {},
      data: [],
      query:{},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      // 用电明细相关数据
      detailDialogVisible: false,
      currentWorkCenter: '',
      selectedProductionLine: '',
      dateRange: [],
      productionLines: [],
      detailData: [],
      totalPowerConsumption: 0,
      avgPowerConsumption: 0,
      peakPowerConsumption: 0,
      deviceCount: 0,
      statisticsData: [],
      detailOption: {
        border: true,
        index: true,
        align: 'center',
        viewBtn: false,
        editBtn: false,
        gridBtn: false,
        addBtn: false,
        delBtn: false,
        menu: false,
        column: [
          {
            label: '设备编号',
            prop: 'deviceCode',
            // width: 120,
          },
          {
            label: '设备名称',
            prop: 'deviceName',
            // width: 180,
          },
          {
            label: '设备型号',
            prop: 'macSpec',
            // width: 150,
          },
          {
            label: '用电量(kWh)',
            prop: 'readElectric',
            // width: 120,
            type: 'number',
            editDisplay: false,
            calculate: true,
          },
          {
            label: '服役状态',
            prop: 'used',
            type: 'select',
            dicData:[
              // 1、正常服役，2、服役中，3、暂停服役
              {label:"正常服役",value:'1'},
              {label:"暂停服役",value:'3'},
              {label:"服役中",value:'2'}
            ],
            editDisplay: true,
          },
        ],
      },
      option: {
        columnSort: true,
        tip: false,
        height: 'auto',
        align: 'center',
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 12,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: false,
        selection: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        delBtnIcon: ' ',
        addBtn: false,
        labelWidth: 120,
        searchLabelWidth: "auto",
        menu: true,
        menuWidth: 100,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        searchLabelPosition: 'left',
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: 'center',
        gridBtn: false,
        searchMenuPosition: 'right',
        addBtnIcon: ' ',
        viewBtnIcon: ' ',
        delBtnIcon: ' ',
        editBtnIcon: ' ',
        column: [
          {
            label: "作业中心",
            prop: "workCenterId",
            type:"select",
            multiple: true,
            span: 24,
            width: 200,
            overflow: true,
            search: true,
            dicUrl:"/api/blade-desk/BA/WorkCenter/listForSelect",
            props:{
              label: 'wcName',
              value: 'id',
            },
            rules: [
              {
                required: true,
                message: "请输入作业中心",
                trigger: "blur",
              },
            ],
          },
          {
            label: '日期',
            prop: 'date',
            span: 24,
            overflow: true,
            search: true,
            type: 'date',
            searchRange: true,
            format:"YYYY-MM-DD",
            valueFormat:"YYYY-MM-DD",
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间',
            rules: [
              {
                required: true,
                message: '请输入日期',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '加工面积(dm²)',
            prop: 'workArea',
            span: 24,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入加工面积(dm²)',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '定额单位面积用电量(kWh/dm²)',
            prop: 'quoElectricNum',
            span: 24,
            width: 200,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入定额单位面积用电量(kWh/dm²)',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '实际单位面积用电量(kWh/dm²)',
            prop: 'realElectricNum',
            span: 24,
            overflow: true,
            width: 200,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入实际单位面积用电量(kWh/dm²)',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '实际总用电量(kWh)',
            prop: 'totalElectricNum',
            span: 24,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: '请输入实际总用电量(kWh)',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '是否大屏显示',
            prop: 'isJumbotron',
            type: 'switch',
            width:120,
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    searchChange(params, done){
      this.query = params
      this.page.currentPage = 1;
      this.onLoad()
      done()
    },
    searchReset(){
      this.query = {}
      this.onLoad()
    },
    selectionChange(list){
      this.selectionList = list
    },
    currentChange(currentPage){
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize){
      this.page.pageSize = pageSize;
    },
    refreshChange(){
      this.onLoad()
    },
    changeJumbtron(row,val){
      if(row && row.id){
        row.isJumbotron = val == 1 ? 0 : 1
        console.log('row-----------',row)
        console.log('val-----------',val)
        editItem(({
          id:row.id,
          isJumbotron:val
        })).then(res => { 
          if(res.data.code == 200){
            this.$message.success('修改成功')
            this.onLoad()
          }else{
            this.$message.error('修改失败')
          }
        })
      }
      
    },
    // 打开用电明细弹窗
    handleElectricDetail(row) {
      pageListDetail({
        id:row.id
      }).then(res =>{
        this.detailData = res.data.data
        this.detailDialogVisible = true
      })
    },
    initProductionLines() {
      this.productionLines = [
        { label: '全部产线', value: 'all' },
        { label: '产线A', value: 'lineA' },
        { label: '产线B', value: 'lineB' },
        { label: '产线C', value: 'lineC' },
      ];
      this.selectedProductionLine = 'all';
    },
    setDefaultDateRange() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.dateRange = [start, end];
    },
    // 产线变化处理
    handleProductionLineChange(value) {
      console.log('产线变化:', value);
      // 根据选择的产线刷新数据
      this.refreshDetailData();
    },
    // 加载设备用电明细数据
    loadDetailData() {
      this.detailData = [
        {
          id: 1,
          deviceCode: 'EQ001',
          deviceName: '冲压机A',
          deviceModel: 'CP-2000',
          ratedPower: 15.5,
          runningTime: 8,
          powerConsumption: 124,
          remark: '运行正常',
        },
        {
          id: 2,
          deviceCode: 'EQ002',
          deviceName: '冲压机B',
          deviceModel: 'CP-2000',
          ratedPower: 15.5,
          runningTime: 7.5,
          powerConsumption: 116.25,
          remark: '运行正常',
        },
        {
          id: 3,
          deviceCode: 'EQ003',
          deviceName: '传送带',
          deviceModel: 'CV-500',
          ratedPower: 3.2,
          runningTime: 8,
          powerConsumption: 25.6,
          remark: '偶尔异响',
        },
        {
          id: 4,
          deviceCode: 'EQ004',
          deviceName: '焊接机器人',
          deviceModel: 'WR-1000',
          ratedPower: 8.7,
          runningTime: 6,
          powerConsumption: 52.2,
          remark: '运行正常',
        },
      ];
    },

    // 关闭用电明细弹窗
    closeDetailDialog() {
      this.detailDialogVisible = false;
    },
    onLoad() {
      this.loading = true;
      let params = {
        ...this.query,
        startDate:this.query.date && this.query.date.length != 0 && this.query.date[0],
        endDate:this.query.date && this.query.date.length != 0 && this.query.date[1],
      }
      if(params.date) delete params.date;
      pageList({
        current:this.page.currentPage,
        size:this.page.pageSize,
        type:2,
        ...params
      }).then(res =>{
        this.data = res.data.data.records;
        this.page.total = res.data.data.total;
        this.loading = false
      })
      // this.data = [
      //   {
      //     createTime: '2025-12-01',
      //     workArea: 2568.5,
      //     quoTapUee: 0.85,
      //     reaTapUse: 0.82,
      //     reaTotalUse: 2106.17,
      //     switch: true,
      //   },
      //   {
      //     createTime: '2025-12-02',
      //     workArea: 3210.75,
      //     quoTapUee: 1.2,
      //     reaTapUse: 1.18,
      //     reaTotalUse: 3788.69,
      //     switch: false,
      //   },
      // ];
      // this.page.total = this.data.length;
      // this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>