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 #switch="scope">
        <el-switch
          v-model="scope.row.switch"
          active-text="显示"
          inactive-text="不显示"
          @change="handleSwitchChange(scope.row)"
        >
        </el-switch>
      </template>
      <!-- 自定义操作列 -->
      <template #menu="scope">
        <el-button type="text" size="small" icon="el-icon-view" @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-item>
                <el-button type="primary" @click="refreshDetailData">查询</el-button>
              </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>
export default {
  data() {
    return {
         data:[],
      loading: false,
      form: {},
      data: [],
      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,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        menu: false,
        column: [
          {
            label: "设备编号",
            prop: "deviceCode",
            width: 120,
          },
          {
            label: "设备名称",
            prop: "deviceName",
            width: 180,
          },
          {
            label: "设备型号",
            prop: "deviceModel",
            width: 150,
          },
          // {
          //   label: "额定功率(kW)",
          //   prop: "ratedPower",
          //   width: 120,
          //   type: "number",
          // },
          // {
          //   label: "运行时长(h)",
          //   prop: "runningTime",
          //   width: 120,
          //   type: "number",
          // },
          {
            label: "用电量(kWh)",
            prop: "powerConsumption",
            width: 120,
            type: "number",
            editDisplay: false,
            calculate: true,
          },
          {
            label: "备注",
            prop: "remark",
            editDisplay: true,
          },
        ],
      },
      option: {
        columnSort: true,
        tip: false,
        height: "auto",
        align: "center",
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: false,
        selection: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        delBtnIcon: " ",
        addBtn: false,
        labelWidth: 120,
        searchLabelWidth: 120,
        menu: true,
        menuWidth: 120,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        searchLabelPosition: "left",
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: "left",
        gridBtn: false,
        searchMenuPosition: "right",
        addBtnIcon: " ",
        viewBtnIcon: " ",
        delBtnIcon: " ",
        editBtnIcon: " ",
        column: [
          {
            label: "作业中心",
            prop: "workCenterName",
            span: 24,
            overflow: true,
            search: true,
            hide: true,
            rules: [
              {
                required: true,
                message: "请输入作业中心",
                trigger: "blur",
              },
            ],
          },
          {
            label: "日期",
            prop: "createTime",
            span: 24,
            overflow: true,
            search: true,
            type: "date",
            searchRange: true,
            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: "quoTapUee",
            span: 24,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: "请输入定额单位面积用电量(kWh/dm²)",
                trigger: "blur",
              },
            ],
          },
          {
            label: "实际单位面积用电量(kWh/dm²)",
            prop: "reaTapUse",
            span: 24,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: "请输入实际单位面积用电量(kWh/dm²)",
                trigger: "blur",
              },
            ],
          },
          {
            label: "实际总用电量(kWh)",
            prop: "reaTapUse",
            span: 24,
            overflow: true,
            search: false,
            rules: [
              {
                required: true,
                message: "请输入实际总用电量(kWh)",
                trigger: "blur",
              },
            ],
          },
          {
            label: '是否大屏显示',
            prop: 'switch',
            type: 'switch',
            cell: true,
            activeValue: true,
            inactiveValue: false,
            activeText: '显示',
            inactiveText: '不显示',
            change: ({ value, row }) => {
              // 开关状态变化时的回调函数
              console.log(`大屏显示状态变更为: ${value ? '开启' : '关闭'}, 数据:`, row);
            }
          },
        ],
      },
    };
  },
  mounted() { },
  methods: {
    // 打开用电明细弹窗
    handleElectricDetail(row) {
      this.currentWorkCenter = "作业中心";
      this.detailDialogVisible = true;
      this.$nextTick(() => {
      this.initProductionLines();
      this.setDefaultDateRange();
      this.loadDetailData();
      this.loadStatisticsData();
      this.drawPowerChart();
      });
    },
    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;
      this.data = [
        {

          createTime: "2025-12-01",
          workArea: 2568.50,
          quoTapUee: 0.85,
          reaTapUse: 0.82,
          reaTotalUse: 2106.17,
          switch: true
        },
        {

          createTime: "2025-12-02",
          workArea: 3210.75,
          quoTapUee: 1.20,
          reaTapUse: 1.18,
          reaTotalUse: 3788.69,
          switch: false
        },
        
      ];
      this.page.total = this.data.length;
      this.loading = false;
    },
  }
}
</script>

<style lang="scss" scoped>

</style>