Merge branch 'dev_7004' into dev_tide_mom

zouyu

2025-11-14 989d547833c94ffc4e7395b0023ec24ee09f5ab6

 src/views/energyManagement/energyPeriodTime/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,444 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">日期：</span>
      <!-- <el-time-picker
         style="width: 240px;margin-right: 10px"
         v-model="searchForm.startTime"
         value-format="HH:mm:ss"
         format="HH:mm:ss"
         type="time"
         placeholder="请选择开始时间"
         clearable
      /> -->
      <el-date-picker
         v-model="searchForm.date"
         type="date"
         placeholder="请选择日期"
         :size="size"
      />
        <!-- <el-time-picker
            v-model="searchForm.timeRange"
            is-range
            arrow-control
            range-separator="To"
            start-placeholder="选择结束时间"
            end-placeholder="选择结束时间"
        /> -->
        <span class="search_title">电价（元/度）：</span>
        <el-input
            v-model="searchForm.price"
            style="width: 240px"
            placeholder="请输入电价"
            @change="handleQuery"
            clearable
            :prefix-icon="Search"
        />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
        >搜索</el-button>
      <el-button @click="resetFilters">重置</el-button>
      </div>
      <div>
        <el-button type="primary" @click="openForm('add')">新增</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :page="page"
          :isSelection="true"
          @selection-change="handleSelectionChange"
          :tableLoading="tableLoading"
          @pagination="pagination"
      ></PIMTable>
    </div>
    <el-dialog
        v-model="dialogFormVisible"
        title="用电时段管理"
        width="70%"
        @close="closeDia"
    >
      <el-form
          :model="form"
          label-width="140px"
          label-position="top"
          :rules="rules"
          ref="formRef"
      >
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="日期：" prop="date">
              <el-date-picker
                  style="width: 100%"
                  v-model="form.date"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  type="date"
                  placeholder="请选择日期"
                  clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电价（元/度）：" prop="price">
              <el-input
                  v-model="form.price"
                  placeholder="请输入电价"
                  clearable
                  type="number"
                  step="0.01"
                  min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item label="峰段：" prop="peak">
             <el-input
                 v-model="form.peak"
                 placeholder="请输入峰段"
                 clearable
                 type="number"
                 step="0.01"
                 min="0"
             />
           </el-form-item>
         </el-col>
          <el-col :span="12">
            <el-form-item label="谷段：" prop="valley">
              <el-input
                  v-model="form.valley"
                  placeholder="请输入谷段"
                  clearable
                  type="number"
                  step="0.01"
                  min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item label="平段：" prop="flat">
             <el-input
                 v-model="form.flat"
                 placeholder="请输入平段"
                 clearable
                 type="number"
                 step="0.01"
                 min="0"
             />
           </el-form-item>
         </el-col>
          <el-col :span="12">
            <el-form-item label="尖段：" prop="sharp">
              <el-input
                  v-model="form.sharp"
                  placeholder="请输入尖段"
                  clearable
                  type="number"
                  step="0.01"
                  min="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {ElMessageBox} from "element-plus";
import {getToken} from "@/utils/auth.js";
import {periodListPage,periodDelete,periodAdd,periodUpdate} from "@/api/energyManagement/index.js";
const { proxy } = getCurrentInstance();

const data = reactive({
   searchForm: {
      date: "",
      price: ""
   },
   form: {
      date: "",
       price: "",
      peak: "",
      valley: "",
      flat: "",
      sharp: ""
   }
});
const { searchForm,form } = toRefs(data);
const page = ref({
  current: 1,
  size: 10,
  total: 0
});
const dialogFormVisible = ref(false);
const selectedRows = ref([]);
const operationType = ref('');
const tableData = ref([]);
const emit = defineEmits(['close'])
const tableLoading = ref(false);
const tableColumn = ref([
   // {
   //    label: "时段名称",
   //    prop: "timeName",
   //    width: 200,
   // },
   {
      label: "日期",
      prop: "date",
      width: 200,
   },
   {
      label: "电价（元/度）",
      prop: "price",
      width: 200,
   },
      {
      label: "峰段",
      prop: "peak",
   },
   {
      label: "谷段",
      prop: "valley",
   },
   {
      label: "平段",
      prop: "flat",
   },
   {
      label: "尖段",
      prop: "sharp",
   },
   {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: 'right',
      operation: [
         {
            name: "编辑",
            type: "text",
            clickFun: (row) => {
               openForm("edit", row);
            },
         },
      ],
   },
]);


// è¡¨æ ¼é€‰æ‹©æ•°æ®
const handleSelectionChange = (selection) => {
   selectedRows.value = selection;
};
const formDia = ref()
const upload = reactive({
   // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚（客户导入）
   open: false,
   // å¼¹å‡ºå±‚标题（客户导入）
   title: "",
   // æ˜¯å¦ç¦ç”¨ä¸Šä¼ 
   isUploading: false,
   // è®¾ç½®ä¸Šä¼ çš„请求头部
   headers: { Authorization: "Bearer " + getToken() },
   // ä¸Šä¼ çš„地址
   url: import.meta.env.VITE_APP_BASE_API + "/equipmentEnergyConsumption/importData",
   // æ–‡ä»¶ä¸Šä¼ å‰çš„回调
   beforeUpload: (file) => {
      console.log('文件即将上传', file);
      // å¯ä»¥åœ¨æ­¤å¤„做文件类型或大小校验
      const isValid = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
      if (!isValid) {
         proxy.$modal.msgError("只能上传 Excel æ–‡ä»¶");
      }
      return isValid;
   },
   // æ–‡ä»¶çŠ¶æ€æ”¹å˜æ—¶çš„回调
   onChange: (file, fileList) => {
      console.log('文件状态改变', file, fileList);
   },
   // æ–‡ä»¶ä¸Šä¼ æˆåŠŸæ—¶çš„回调
   onSuccess: (response, file, fileList) => {
      console.log('上传成功', response, file, fileList);
      if(response.code === 200){
         proxy.$modal.msgSuccess("文件上传成功");
      }else if(response.code === 500){
         ElMessageBox.error(response.msg);
      }else{
         ElMessageBox.warning(response.msg);
      }
   },
   // æ–‡ä»¶ä¸Šä¼ å¤±è´¥æ—¶çš„回调
   onError: (error, file, fileList) => {
      console.error('上传失败', error, file, fileList);
      ElMessageBox.error("文件上传失败");
   },
   // æ–‡ä»¶ä¸Šä¼ è¿›åº¦å›žè°ƒ
   onProgress: (event, file, fileList) => {
      console.log('上传中...', event.percent);
   }
});

// æŸ¥è¯¢åˆ—表
/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
   page.current = 1;
   getList();
};
//重置
const resetFilters = () => {
   searchForm.value = {
      date: "",
      price: ""
   };
  getList();

};
const pagination = (obj) => {
   page.current = obj.page;
   page.size = obj.limit;
   getList();
};
const getList = () => {
   tableLoading.value = true;
   periodListPage({ ...searchForm, ...page.value }).then((res) => {
         tableLoading.value = false;
         if (res && res.data) {
            tableData.value = res.data.records || [];
            page.total = res.data.total || 0;
         } else {
            tableData.value = [];
            page.total = 0;
            ElMessageBox.warning('未获取到数据');
         }
      })
      .catch((err) => {
         tableLoading.value = false;
         console.error('数据加载失败:', err);
         ElMessageBox.error('数据加载失败，请重试');
      });
};
// æ‰“开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  dialogFormVisible.value = true;
   // form.value.maintainer = userStore.nickName;
   // form.value.maintenanceTime = getCurrentDate();
   form.value = {}
   proxy.resetForm("formRef");
   periodListPage().then((res) => {
      codeList.value = res.data;
   });
   if (type === "edit") {
      form.value = {...row}
   }
}
// æ‰“开弹框
const openForm = (type, row) => {
   openDialog(type, row)
};
// æäº¤è¡¨å•
const submitForm = () => {
   proxy.$refs["formRef"].validate(valid => {
      if (valid) {
         if (operationType.value === "add") {
            periodAdd(form.value).then(response => {
               proxy.$modal.msgSuccess("新增成功")
               closeDia()
               getList()
            })
         } else {
            periodUpdate(form.value).then(response => {
               proxy.$modal.msgSuccess("修改成功")
               closeDia()
               getList()
            })
         }
      }
   })
}
// å…³é—­å¼¹æ¡†
const closeDia = () => {
   proxy.resetForm("formRef");
   dialogFormVisible.value = false;
   emit('close')
};
/** å¯¼å…¥æŒ‰é’®æ“ä½œ */
function handleImport() {
   upload.title = "设备能耗";
   upload.open = true;
   // æ¸…空上次上传的文件列表
   nextTick(() => {
      proxy.$refs["uploadRef"]?.clearFiles();
   });
}
function importTemplate() {
   proxy.download(
      "/equipmentEnergyConsumption/export",
      {},
      '设备能耗导入模版.xlsx'
   );
}
/** æäº¤ä¸Šä¼ æ–‡ä»¶ */
function submitFileForm() {
   proxy.$refs["uploadRef"].submit();
}

/** å¼¹æ¡†å…³é—­æ—¶æ¸…空文件列表 */
function handleDialogClose() {
   nextTick(() => {
      proxy.$refs["uploadRef"]?.clearFiles();
   });
}

const handleDelete = () => {
   let ids = [];
   if (selectedRows.value.length > 0) {
      ids = selectedRows.value.map((item) => item.id);
   } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
   }
   ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
   })
   .then(() => {
      tableLoading.value = true;
      periodDelete(ids)
         .then((res) => {
            proxy.$modal.msgSuccess("删除成功");
            getList();
         })
         .finally(() => {
            tableLoading.value = false;
         });
   })
   .catch(() => {
      proxy.$modal.msg("已取消");
   });
};
onMounted(() => {
   getList();
});
</script>

<style scoped>

</style>