能源消耗接口样式完善

src/views/AlarmPage/AlarmStatusPage.vue

@@ -15,7 +15,7 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="getdata" style="min-width: 70px;">查询</el-button>
-        <el-button type="primary" @click="paramsSetting" style="min-width: 70px;">报警参数设置</el-button>
+        <el-button type="primary" @click="open" style="min-width: 70px;">报警参数设置</el-button>
       </el-form-item>
     </div>
   </el-card>
@@ -64,6 +64,25 @@
 
 
   <el-dialog v-model="show" class="dialog" :show-scrollbar="true">
+    <div class="div-header">
+      <el-form :inline="true">
+        <el-form-item label="查询类型：">
+          <el-select v-model="type" placeholder="请选择" style="width: 150px" @change="getoptions">
+            <el-option label="换热机组" value="GetTransAlarmStatusData" />
+            <el-option label="锅炉" value="GetBoilerAlarmStatusData" />
+            <el-option label="总管" value="GetPipeAlarmStatusData" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备：">
+          <el-cascader :options="options" v-model="dept" :props="prop" collapse-tags clearable :show-all-levels="false"
+            placeholder="请选择" style="min-width: 210px;" @change="getopt" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="paramsSetting" style="min-width: 70px;">确定</el-button>
+        </el-form-item>
+      </el-form>
+
+    </div>
     <el-row>
       <el-col :span="6">
         <div class="left">
@@ -87,7 +106,7 @@
                 <table cellpadding="0" cellspacing="0">
                   <tr>
                     <td style="text-align: left">
-                      <el-input style="width: 80%" v-model="cnNames_before.cnName"></el-input>
+                      <el-input style="width: 80%" v-model="param.cnName"></el-input>
                     </td>
                   </tr>
                 </table>
@@ -99,7 +118,7 @@
                 <table cellpadding="0" cellspacing="0">
                   <tr>
                     <td style="text-align: left">
-                      <el-checkbox>是</el-checkbox>
+                      <el-checkbox v-model="addParams.isVoice">是</el-checkbox>
                     </td>
                   </tr>
                 </table>
@@ -111,7 +130,7 @@
                 <table cellpadding="0" cellspacing="0">
                   <tr>
                     <td style="text-align: left">
-                      <el-input style="width: 80%"></el-input>
+                      <el-input style="width: 80%" v-model="addParams.topMost"></el-input>
                     </td>
                   </tr>
                 </table>
@@ -123,7 +142,7 @@
                 <table cellpadding="0" cellspacing="0">
                   <tr>
                     <td style="text-align: left">
-                      <el-input style="width: 80%"></el-input>
+                      <el-input style="width: 80%" v-model="addParams.upper"></el-input>
                     </td>
                   </tr>
                 </table>
@@ -136,7 +155,7 @@
                 <table cellpadding="0" cellspacing="0">
                   <tr>
                     <td style="text-align: left">
-                      <el-input style="width: 80%"></el-input>
+                      <el-input style="width: 80%" v-model="addParams.downMost"></el-input>
                     </td>
                   </tr>
                 </table>
@@ -150,7 +169,7 @@
                 <table cellpadding="0" cellspacing="0">
                   <tr>
                     <td style="text-align: left">
-                      <el-input style="width: 80%" type="textarea" rows="6"></el-input>
+                      <el-input style="width: 80%" type="textarea" rows="6" v-model="addParams.alarmPlan"></el-input>
                     </td>
                   </tr>
                 </table>
@@ -162,7 +181,7 @@
                 <table cellpadding="0" cellspacing="0">
                   <tr>
                     <td style="text-align: left">
-                      <el-checkbox>是</el-checkbox>
+                      <el-checkbox v-model="addParams.isAlarm">是</el-checkbox>
                     </td>
                   </tr>
                 </table>
@@ -174,7 +193,7 @@
                 <table cellpadding="0" cellspacing="0">
                   <tr>
                     <td style="text-align: left">
-                      <el-checkbox>是</el-checkbox>
+                      <el-checkbox v-model="addParams.isShortMessage">是</el-checkbox>
                     </td>
                   </tr>
                 </table>
@@ -183,9 +202,15 @@
 
           </table>
           <div class="btngrounp">
-            <el-button v-if="button" type="primary" @click="onDel">添加</el-button>
-            <el-button v-else-if="button" type="primary" @click="onDel">删除</el-button>
-            <el-button v-else="button" type="primary" @click="onDel">修改</el-button>
+            <div v-if="button">
+              <el-button :disabled="param.cnName === '' ? true : false" type="primary" @click="onAdd">添加</el-button>
+              <el-button disabled type="primary" @click="onDel">删除</el-button>
+            </div>
+            <div v-else="button">
+              <el-button type="primary" @click="onEdit">修改</el-button>
+              <el-button type="primary" @click="onDel">删除</el-button>
+            </div>
+
           </div>
           <!-- </el-card> -->
         </div>
@@ -216,6 +241,9 @@
 import { ref, reactive, onMounted, onUnmounted } from 'vue';
 import http from '../../api/http';
 import store from "../../store/index";
+import { ElMessage } from 'element-plus';
+import { watch } from 'fs';
+import { watchEffect } from 'vue';
 
 //分页设置
 const currentPage = ref(1)
@@ -232,22 +260,14 @@ const type = ref('GetTransAlarmStatusData');
 const show = ref(false)
 const refreshItem = ref(0)
 const AlarmInfo = ref([])
+const dept = ref('')
 
 
 
-// getCnNames()
-// console.log("type.value:",type.value);
-// console.log("AlarmInfo.value:",AlarmInfo.value);
-
-// console.log(type.value);
-
-
 
 
-
-function paramsSetting() {
+function open() {
   show.value = true
-  getCnNames()
 }
 
 function onsubmit() {
@@ -267,6 +287,7 @@ function getEnterprise() {
   }
 }
 const props = { multiple: true, emitPath: false }
+const prop = { multiple: true, emitPath: false, checkStrictly: true, multiple: false }
 
 function setContentHeight() {
   tableHeight.value = window.innerHeight - 195;
@@ -330,7 +351,6 @@ function getoptions() {
     getSupplys();
   }
   gettransfer();
-  getCnNames()
 }
 
 //获取锅炉列表
@@ -390,10 +410,10 @@ function getPipes() {
       }
     });
   }
-  options.forEach(element => {
-    AlarmInfo.push(element.value);
-  })
-  console.log(AlarmInfo.value);
+  // options.forEach(element => {
+  //   AlarmInfo.push(element.value);
+  // })
+  // console.log(AlarmInfo.value);
 }
 
 //获取换热机组列表
@@ -479,31 +499,41 @@ function getImgUrl(scope, item) {
   return url;
 }
 
+console.log("AlarmInfo.value:::", AlarmInfo.value);
 
 // 报警参数设置
-let cnNames_before = reactive([{
-  cnName: ""
-}])
-let cnNames_after = reactive([{
-  cnName: ""
-}])
-const getCnNames = () => {
-  let newType =
-    type.value == "GetPipeAlarmStatusData" ? 1 : type.value == "GetBoilerAlarmStatusData" ? 2 : 3
-  let newAlarmInfo = AlarmInfo.value[0];
-  let data = http.post("api/alarm/para/GetAlarmPara", { type: newType, id: newAlarmInfo }, false)
-  // console.log("data:", data);
+let cnNames_before = ref([])
+let cnNames_after = ref([])
+console.log("---------------------AlarmInfo.value:", AlarmInfo.value);
+let newType = ref(0)
+watchEffect(() => {
+  console.log("监听：：：：", type.value);
+  if (type.value === "GetPipeAlarmStatusData") {
+    newType.value = 1
+  } else if (type.value === "GetBoilerAlarmStatusData") {
+    newType.value = 2
+  } else {
+    newType.value = 3
+  }
+})
 
+// 接口2:换热站基础参数编号（transParaBaseId） -> 接口1：baseId
+const getCnNames = () => {
+  // console.log('dept-------------------', dept.value);
+  // console.log("++++++++++++++++++++++++", newType.value);
+  let data = http.post("api/alarm/para/GetAlarmPara", { type: newType.value, id: dept.value }, false);
   data.then(function (val) {
-    cnNames_before = val.data.before
-    cnNames_after = val.data.after
-    // console.log("@@@@", cnNames_before);
-    // console.log("@@@@",cnNames_after);
+    cnNames_before.value = val.data.before
+    cnNames_after.value = val.data.after
+    // console.log("cnNames_before@@@@", cnNames_before);
+    // console.log("cnNames_after@@@@", cnNames_after);
     // console.log("cnNames_before.transParaBaseId:", cnNames_before.transParaBaseId)
   });
 }
 
-let params = reactive([{
+
+
+let params = ref({
   "pipeAlarmParaId": "",
   "pipeParaBaseId": "",
   "pipeId": "",
@@ -518,30 +548,78 @@ let params = reactive([{
   "isShortMessage": "",
   "isAlarm": "",
   "isActive": "",
-  "updateNullFields": ""
-}])
+  "updateNullFields": "",
+})
+let addParams = ref({
+  "updateNullFields": "",
+  "pipeParaBaseId": "",
+  "pipeId": dept.value,
+  "gatherType": "",
+  "voicePath": "",
+  "isVoice": "",
+  "topMost": "",
+  "upper": "",
+  "lower": "",
+  "downMost": "",
+  "alarmPlan": "",
+  "isShortMessage": "",
+  "isAlarm": "",
+  "isActive": ""
+})
+let param = ref({
+  "cnName": "",
+  "transParaBaseId": ""
+})
 
 
+// 点击确定查询数据
+const paramsSetting = () => {
+  getCnNames()
+}
 
+const selectParams = (row) => {
+  param.value.transParaBaseId = row.transParaBaseId
+  console.log("param.value.transParaBaseId========", param.value.transParaBaseId);
+
+  if (param.value.transParaBaseId) {
+    const data = http.post("/api/alarm/para/GetAlarmParaInfo", { type: newType.value, id: dept.value, baseid: param.value.transParaBaseId }, false)
+    console.log("dataaaaa:", data);
+    data.then(function (val) {
+      console.log("valllll:", val);
+      params.value = val.data
+      console.log("!!!!!Params.value:", params.value);
+      param.value.cnName = row.cnName
+    });
+  } else {
+    ElMessage.info("该参数暂不需要修改...")
+  }
+}
 
-getCnNames()
+watchEffect(() => {
+  addParams.value.pipeId = dept.value
+  console.log(addParams.value.pipeId);
 
-const selectParams = (row) => {
-  getCnNames()
-  let newType =
-    type.value == "GetPipeAlarmStatusData" ? 1 : type.value == "GetBoilerAlarmStatusData" ? 2 : 3
-  let newAlarmInfo = AlarmInfo.value[0];
-  const data = http.post("/api/alarm/para/GetAlarmParaInfo", { type: newType, id: newAlarmInfo, baseid: row.transParaBaseId }, false)
-  // console.log(data);
-  data.then(function (val) {
-    params = val.data
-    console.log("Params:", params);
-  });
+})
 
+const onAdd = () => {
+  // const data = http.post("api/alarm/para/pipesave", { ...addParams.value }, false)
+  // console.log("新增data:::", data);
+  // if (data.success) {
+  //   ElMessage.success("修改成功！！")
+  // } else {
+  //   ElMessage.error("修改失败！！")
+  // }
+  http.post("api/alarm/para/pipesave", { ...addParams.value }, false).then((res) => {
+    if (res.success) {
+      ElMessage.success("修改成功！！")
+      getCnNames()
+    } else {
+      ElMessage.error("修改失败！！")
+    }
+  })
 }
-
 // 按钮
-const button = ref(false)
+const button = ref(true)
 
 
 onMounted(() => {

src/views/SchedulingPage/EnergyManagePage.vue

 <script setup>
-import { ref, onMounted, getCurrentInstance, reactive, nextTick } from 'vue'
-import { ElMessageBox, ElMessage } from 'element-plus'
-import axios from 'axios'
-import { Search, Document } from "@element-plus/icons-vue"
-import { postEnergyManage, postEnergyDel, postEnergyUpdate } from "@/api/scheduling"
-import http from '../../api/http'
-import loading from 'element-plus'
-import store from '../../store'
+import { ref, onMounted, getCurrentInstance, reactive, nextTick } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import axios from "axios";
+import { Search, Document } from "@element-plus/icons-vue";
+import {
+  postEnergyManage,
+  postEnergyDel,
+  postEnergyUpdate,
+} from "@/api/scheduling";
+import http from "../../api/http";
+import loading from "element-plus";
+import store from "../../store";
 import { vFloatNumber } from "@/utils/directives.js";
-const { proxy } = getCurrentInstance()
-const tableData = ref([{}])
+const { proxy } = getCurrentInstance();
+const tableData = ref([{}]);
 const formEnergy = ref({
   "updateNullFields": "",
   "supplyId": "",
@@ -20,138 +24,107 @@ const formEnergy = ref({
 })
 const energyForm = ref()
 const dialogVisible = ref(false)
-
 const getEnergyData = async () => {
-  await http.post("/api/energy/getData", config.supplyType).then(res => {
-    // console.log("res:", res);
-    tableData.value = res.data
-  }).catch(err => {
-    console.log(error)
-  })
-  ElMessage.success('获取数据成功')
-}
-
-//获取换热机组列表
-// const  getSupplys =() => {
-//   const res = http.get("api/home/GetOrg",false)
-//   console.log(res.data);
-// }
+  await http
+    .post("/api/energy/getData", config.supplyType)
+    .then((res) => {
+      // console.log("res:", res);
+      tableData.value = res.data;
+    })
+    .catch((err) => {
+      console.log(error);
+    });
+  ElMessage.success("获取数据成功");
+};
 
 
 const tableLabel = reactive([
   {
-    prop: 'allowPagingId',
+    prop: "allowPagingId",
     label: "序号",
-    width: 100
+    width: 100,
   },
   {
-    prop: 'supplyName',
-    label: '名称',
-    width: 200
+    prop: "supplyName",
+    label: "名称",
+    width: 200,
   },
   {
-    prop: 'energyType',
-    label: "能源类型"
+    prop: "energyType",
+    label: "能源类型",
   },
   {
-    prop: 'record',
+    prop: "record",
     label: "用度",
-    width: 200
+    width: 200,
   },
   {
-    prop: 'recordDate',
+    prop: "recordDate",
     label: "日期",
-    width: 300
-  }
-])
+    width: 300,
+  },
+]);
 
 const formInline = reactive({
-  keyWord: ''
-})
+  keyWord: "",
+});
 
 const config = reactive({
   supplyType: ["0", "1", "2", "3", "4"],
-})
+});
+
 
 const handleSearch = () => {
-  config.supplyType = formInline.keyWord
-  config.supplyType = [`${config.supplyType}`]
+  config.supplyType = formInline.keyWord;
+  config.supplyType = [`${config.supplyType}`];
   getEnergyData(),
-    formEnergy.value.energyType = '',
-    ElMessage.success('获取数据成功')
-}
+    (formEnergy.value.energyType = ""),
+    ElMessage.success("获取数据成功");
+};
 
 const timeFormat = (time) => {
-  var time = new Date(time)
-  var year = time.getFullYear()
-  var month = time.getMonth()
-  var date = time.getDate()
+  var time = new Date(time);
+  var year = time.getFullYear();
+  var month = time.getMonth();
+  var date = time.getDate();
   function add(m) {
-    return m < 10 ? '0' + m : m
+    return m < 10 ? "0" + m : m;
   }
   return year + '/' + add(month) + '/' + add(date) + ' 0:00:00'
 }
 
-
 //表单校验规则
 const rules = reactive({
   supplyId: [{ required: true, message: "名称是必填项", trigger: "blur" }],
   energyType: [
     { required: true, message: "能源类型是必填项", trigger: "blur" },
-
   ],
   record: [{ required: true, message: "能源用度是必选项", trigger: "change" }],
-  recordDate: [{ required: true, message: "日期是必选项" }]
-})
-
-// const handleChange = (page) => {
-//   config.page = page,
-//     getEnergyData()
-// }
-
-// 删除
-// const handleDelete = async (row) => {
-//   // console.log(row.energyId);
-//   console.log('"' + row.energyId + '"');
-//   await ElMessageBox.confirm("你确定要删除吗？", {
-//     confirmButtonText: '确定',
-//     cancelButtonText: '取消',
-//     type: 'warning',
-//     confirmButtonClass: 'ExitConfirmButton'
-//   }).then(async () => {
-//     // await postEnergyDel('"'+row.energyId+'"')
-//     await postEnergyDel({ EnergyId: row.energyId })
-//     ElMessage({
-//       type: 'success', message: '删除成功'
-//     })
-//     getEnergyData()
-//   })
-// }
+  recordDate: [{ required: true, message: "日期是必选项" }],
+});
 
 // 删除
 const handleDelete = async (row) => {
   console.log(row.energyId);
   console.log('"' + row.energyId + '"');
-  let EnergyId = row.energyId
+  let EnergyId = row.energyId;
   await ElMessageBox.confirm("你确定要删除吗？", {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning',
     confirmButtonClass: 'ExitConfirmButton'
   })
-  const res = await http.get("api/energy/Delete", { params: { EnergyId: row.energyId } }, false)
+  const res = await http.post("api/energy/Delete", { id: row.energyId }, false)
   if (res.success) {
-    ElMessage.success("删除成功")
-    getEnergyData()
+    ElMessage.success("删除成功");
+    getEnergyData();
   } else {
-    ElMessage.error("删除失败")
+    ElMessage.error("删除失败");
   }
-}
-
+};
 
 // 新增
 const action = ref('add')
-
 const handleClose = () => {
   dialogVisible.value = false
   proxy.$ref['energyForm'].resetFields()
@@ -159,7 +132,6 @@ const handleClose = () => {
 const handleCancel = () => {
   dialogVisible.value = false
   proxy.$ref['energyForm'].resetFields()
-
 }
 const handleAdd = () => {
   action.value = "add",
@@ -167,63 +139,62 @@ const handleAdd = () => {
   proxy.$refs['energyForm'].resetFields()
   formEnergy.supplyType = '',
     formEnergy.energyType = ''
-
 }
 
 const handleEdit = (val) => {
-  action.value = "edit"
-  dialogVisible.value = true
+  action.value = "edit";
+  dialogVisible.value = true;
   nextTick(() => {
-    Object.assign(formEnergy.value, { ...val })
+    Object.assign(formEnergy.value, { ...val });
     console.log("val:", val);
-    // var newArr = []
-    // formEnergy.supplyId.map((item)=> {
-    //   newArr.push(item[item.length-1])
-    // })
-    // console.log(newArr);
-  })
+  });
+};
 
-}
-
-
-
-const onSubmit = () => {
+const onSubmit = (formEl) => {
   energyForm.value.validate(async (valid) => {
     if (valid) {
       let res = null;
-      formEnergy.recordDate = /^\d{4}-\d{2}-\d{2}$/.test(formEnergy.recordDate) ? formEnergy.recordDate : timeFormat(formEnergy.recordDate)
-      if (action.value === 'add') {
-        await http.post("api/energy/Save", { ...formEnergy.value }, false).then(res => {
-        }).then(res => {
-          ElMessage({
-            type: 'success', message: '新增成功'
-          })
-          getEnergyData()
-        })
+      formEnergy.recordDate = /^\d{4}-\d{2}-\d{2}$/.test(formEnergy.recordDate)
+        ? formEnergy.recordDate
+        : timeFormat(formEnergy.recordDate);
+      if (action.value === "add") {
+        await http
+          .post("api/energy/Save", { ...formEnergy.value }, false)
+          .then((res) => { })
+          .then((res) => {
+            ElMessage({
+              type: "success",
+              message: "新增成功",
+            });
+            getEnergyData();
+          });
         if (res) {
-          dialogVisible.value = false
-          getEnergyData()
+          dialogVisible.value = false;
+          getEnergyData();
+          if (!formEl) return;
+          formEl.resetFields();
         }
       } else {
-        res = postEnergyUpdate(formEnergy.value)
-        proxy.$refs['energyForm'].resetFields()
-        dialogVisible.value = false
-        formEnergy.value.supplyId = ''
-        formEnergy.energyType = ''
-        getEnergyData()
+        res = postEnergyUpdate(formEnergy.value);
+        if (!formEl) return;
+        formEl.resetFields();
+        dialogVisible.value = false;
+        formEnergy.value.supplyId = "";
+        formEnergy.energyType = "";
+        getEnergyData();
       }
     } else {
       ElMessage({
         showClose: true,
-        message: '请输入正确的内容',
-        type: 'error'
-      })
+        message: "请输入正确的内容",
+        type: "error",
+      });
     }
-  })
-}
-const props = { multiple: false, emitPath: false, checkStrictly: true }
+  });
+};
+const props = { multiple: false, emitPath: false, checkStrictly: true };
 const enterpriseId = ref();
-let supplyIdOptions = reactive([])
+let supplyIdOptions = reactive([]);
 getEnterprise();
 function getEnterprise() {
   var result = store.getters.getEnterprise();
@@ -232,13 +203,13 @@ function getEnterprise() {
   }
 }
 const PatrolInfo = reactive({
-  "Id": [],
-  "startTime": "",
-  "endTime": "",
-  "start": 0,
-  "count": 30,
-  "sort": ""
-})
+  Id: [],
+  startTime: "",
+  endTime: "",
+  start: 0,
+  count: 30,
+  sort: "",
+});
 const options = reactive([]);
 const getSupplys = () => {
   loading.value = true;
@@ -246,83 +217,83 @@ const getSupplys = () => {
   PatrolInfo.Id.length = 0;
   var result = store.getters.getEnterprise();
   if (result) {
-    result.forEach(element => {
+    result.forEach((element) => {
       if (element.enterpriseId === enterpriseId.value) {
-        if (element.enterpriseId === "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()) {
-          element.serviceCenterList.forEach(center => {
+        if (
+          element.enterpriseId ===
+          "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()
+        ) {
+          element.serviceCenterList.forEach((center) => {
             let c = [];
-            center.supplyList.forEach(supply => {
+            center.supplyList.forEach((supply) => {
               let chi = [];
               supply.transferList.forEach(unit => {
-                // chi.push({ value: unit.unitId, label: unit.unitName });
               });
-              c.push({ children: chi, label: supply.supplyName, value: supply.supplyId });
+              c.push({
+                children: chi,
+                label: supply.supplyName,
+                value: supply.supplyId,
+              });
             });
             options.push({ children: c, label: center.serviceCenterName });
-          })
+          });
         } else {
-          element.supplyList.forEach(element => {
+          element.supplyList.forEach((element) => {
             let chi = [];
-            element.transferList.forEach(unit => {
+            element.transferList.forEach((unit) => {
               chi.push({ value: unit.unitId, label: unit.unitName });
-            })
+            });
             options.push({ children: chi, label: element.supplyName });
-          })
+          });
         }
       }
     });
   }
 }
-
 onMounted(() => {
   getEnergyData()
   getSupplys()
 })
-
-
 </script>
 
 <template>
 
-  <table class="table_search" cellpadding="0" cellspacing="1" style="background-color: #99bbe8;width: 100%;">
-    <tr style="height: 10px;">
-      <th width="30%">
-        <span>能源类型：</span>
-      </th>
-      <th style=" background-color: #ffffff;">
-        <div class="th_div">
-          <el-form ref="formRef" :model="formInline" :inline="true"
-            style="display: flex; justify-content: center; align-items: center; margin: 0;">
-            <el-form-item class="select-clean" prop="supplyType" label-width="280px" style="margin: 0;">
-              <el-select v-model="formInline.keyWord" placeholder="请选择" style="width:360px; margin-left: 20px;">
-                <el-option label="非节能" value="0" />
-                <el-option label="一步节能" value="1" />
-                <el-option label="二步节能" value="2" />
-                <el-option label="三步节能" value="3" />
-                <el-option label="四步节能" value="4" />
-              </el-select>
-            </el-form-item>
-          </el-form>
-        </div>
-
-      </th>
-      <th width="100%" style="background-color: #ffffff;text-align: left;">
-        <el-button type="primary" @click="handleSearch">
-          <Search style="width: 1em; height: 1em; margin-right: 8px" />
-          查询
-        </el-button>
-        <el-button type="primary" @click="handleAdd">
-          <Document style="width: 1em; height: 1em; margin-right: 8px" />
-          新增
-        </el-button>
-      </th>
-    </tr>
-  </table>
-
-
-  <div class="table">
+  <div class="contentBlock">
+    <table cellpadding="0" cellspacing="1" style="background-color: #99bbe8;width: 100%;">
+      <tr style="height: 10px;">
+        <th width="30%">
+          <span>能源类型：</span>
+        </th>
+        <th width="40%" style=" background-color: #ffffff;">
+          <div class="th_div">
+            <el-form ref="formRef" :model="formInline" :inline="true"
+              style="display: flex; justify-content: center; align-items: center; margin: 0;">
+              <el-form-item class="select-clean" prop="supplyType" label-width="280px" style="margin: 0;">
+                <el-select v-model="formInline.keyWord" placeholder="请选择" style="width:360px; margin-left: 20px;">
+                  <el-option label="非节能" value="0" />
+                  <el-option label="一步节能" value="1" />
+                  <el-option label="二步节能" value="2" />
+                  <el-option label="三步节能" value="3" />
+                  <el-option label="四步节能" value="4" />
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </div>
+        </th>
+        <th width="100%" style="background-color: #ffffff;text-align: center;">
+          <el-button type="primary" @click="handleSearch">
+            <Search style="width: 1em; height: 1em; margin-right: 8px" />
+            查询
+          </el-button>
+          <el-button type="primary" @click="handleAdd">
+            <Document style="width: 1em; height: 1em; margin-right: 8px" />
+            新增
+          </el-button>
+        </th>
+      </tr>
+    </table>
     <el-table :data="tableData" style="width: 100%;font-size: 12px;color: #181818;"
-      :header-cell-style="{ color: '#225475', backgroundColor: '#B8CFEE', 'text-align': 'center', height: '30px', padding: '0px', border: '1px solid #99bbe8' }"
+      :header-cell-style="{ color: '#225475', backgroundColor: '#B8CFEE', 'text-align': 'center', height: '40px', padding: '0px', border: '1px solid #99bbe8' }"
       :cell-style="{ 'text-align': 'center', padding: '0px' }" :row-style="{ height: '30px', padding: '0px' }" border
       stripe>
       <el-table-column v-for="item in tableLabel" :key="item.prop" :width="item.width ? item.width : 150"
@@ -339,22 +310,13 @@ onMounted(() => {
         <el-empty description="暂无数据，快去添加数据吧.."></el-empty>
       </template>
     </el-table>
-
-    <!-- <div class="bottom">
-      <div class="bottom-left" style="color: #4B4847; font-size: 12px;">
-        共{{ config.total }}条记录,当前为第{{ config.page }}页,共{{ parseInt(config.total / 10 + 0.9) }}页
-      </div>
-      <el-pagination background layout="prev, pager, next" next-text="下一页" class="pager" :total="total"
-        size="small" @current-change="handleChange" />
-    </div> -->
   </div>
-
   <el-dialog v-model="dialogVisible" :title="action == 'add' ? '数据新增' : '数据修改'" width="50%" :before-close="handleClose">
     <el-form :inline="true" :model="formEnergy" :rules="rules" ref="energyForm" :hide-required-asterisk="true">
       <table cellpadding="0" cellspacing="1" style="background-color: #99bbe8">
         <tr>
-          <th style="width: 25%">名称</th>
-          <td style="width: 60%; margin:0; padding: 0">
+          <th style="width: 25%">供热站</th>
+          <td style="width: 60%; margin: 0; padding: 0">
             <table cellpadding="0" cellspacing="0">
               <tr>
                 <td style="text-align: left">
@@ -362,7 +324,7 @@ onMounted(() => {
                     <el-option label="东部供热站" value="DFA20074-8731-457F-B63F-4E1858CFE266" />
                     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                   </el-select> -->
-                  <el-form-item prop="supplyName" style="margin: 0;padding: 0;width: 100%;">
+                  <el-form-item prop="supplyName" style="margin: 0; padding: 0; width: 100%">
                     <el-cascader :options="options" v-model="formEnergy.supplyId" :props="props" collapse-tags clearable
                       :show-all-levels="false" placeholder="请选择" class="el-cascader-menu" />
                   </el-form-item>
@@ -371,20 +333,19 @@ onMounted(() => {
             </table>
           </td>
         </tr>
-
         <tr>
           <th style="width: 25%">能源类型</th>
-          <td style="width: 60%; margin:0; padding: 0">
+          <td style="width: 60%; margin: 0; padding: 0">
             <table cellpadding="0" cellspacing="0">
               <tr>
                 <td style="text-align: left">
-                  <el-form-item prop="energyType" style="margin: 0;padding: 0;width: 100%;">
+                  <el-form-item prop="energyType" style="margin: 0; padding: 0; width: 100%">
                     <el-select v-model="formEnergy.energyType" placeholder="请选择">
-                      <el-option label="非节能" value="0" />
-                      <el-option label="一步节能" value="1" />
-                      <el-option label="二步节能" value="2" />
-                      <el-option label="三步节能" value="3" />
-                      <el-option label="四步节能" value="4" />
+                      <el-option label="非节能" :value="0" />
+                      <el-option label="一步节能" :value="1" />
+                      <el-option label="二步节能" :value="2" />
+                      <el-option label="三步节能" :value="3" />
+                      <el-option label="四步节能" :value="4" />
                     </el-select>
                   </el-form-item>
                 </td>
@@ -392,15 +353,13 @@ onMounted(() => {
             </table>
           </td>
         </tr>
-
-
         <tr>
           <th style="width: 25%">能源用度</th>
-          <td style="width: 60%; margin:0; padding: 0">
+          <td style="width: 60%; margin: 0; padding: 0">
             <table cellpadding="0" cellspacing="0">
               <tr>
-                <td style="text-align: left;">
-                  <el-form-item prop="record" style="margin: 0;padding: 0;width: 100%;">
+                <td style="text-align: left">
+                  <el-form-item prop="record" style="margin: 0; padding: 0; width: 100%">
                     <el-input v-float-number v-model="formEnergy.record" placeholder="请输入能源用度" />
                   </el-form-item>
                 </td>
@@ -408,15 +367,13 @@ onMounted(() => {
             </table>
           </td>
         </tr>
-
-
         <tr>
           <th style="width: 25%">日期</th>
-          <td style="width: 60%; margin:0; padding: 0">
+          <td style="width: 60%; margin: 0; padding: 0">
             <table cellpadding="0" cellspacing="0">
               <tr>
                 <td>
-                  <el-form-item prop="recordDate" style="margin: 0;padding: 0;width: 100%;">
+                  <el-form-item prop="recordDate" style="margin: 0; padding: 0; width: 100%">
                     <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="formEnergy.recordDate" type="datetime"
                       placeholder="请输入日期" style="width: 100%" />
                   </el-form-item>
@@ -425,40 +382,34 @@ onMounted(() => {
             </table>
           </td>
         </tr>
-
-
-
       </table>
-
       <div class="dialog-footer">
-        <el-button type="primary" @click="handleCancel">关闭</el-button>
-        <el-button type="primary" @click="onSubmit">保存</el-button>
+        <el-button type="primary" @click="handleCancel(energyForm)">关闭</el-button>
+        <el-button type="primary" @click="onSubmit(energyForm)">保存</el-button>
       </div>
     </el-form>
   </el-dialog>
-
 </template>
 
-
 <style scoped lang="less">
-.energy-header {
-  display: flex;
+.contentBlock {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ffffff;
+  overflow: auto;
+  overflow-x: hidden;
 }
 
-
 .select-clean {
   display: flex;
 }
 
-.table {
-  margin-top: 10px;
-  margin-left: 4px;
-}
-
 
-.table_search {
+table {
   width: 100%;
-  margin-left: 4px;
 }
 
 table,
@@ -486,15 +437,30 @@ table td {
   padding: 5px 10px;
 }
 
+
 .dialog-footer {
   text-align: center;
   margin-top: 10px;
   background-color: #ffffff;
 }
 
+.el-table__header th {
+  height: 50px;
+  /* 调整表头的高度 */
+  line-height: 50px;
+  /* 使文本垂直居中 */
+}
+
+.el-table__header th .cell {
+  font-size: 14px;
+  /* 调整字体大小 */
+}
+
 //鼠标所在行的颜色
 ::v-deep .el-table__body tr:hover>td {
-  background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
+  background: linear-gradient(to top,
+      rgb(0, 198, 255),
+      rgb(255, 255, 255)) !important;
 }
 
 ::v-deep .el-table__body tr.current-row>td {
@@ -504,22 +470,4 @@ table td {
 .el-cascader-menu {
   width: 100%;
 }
-
-// .bottom {
-//   // border: 1px solid red;
-//   margin-top: 10px;
-//   width: 100%;
-//   display: flex;
-//   right: 10px;
-//   bottom: 30px;
-//   justify-content: space-between;
-
-
-//   .bottom-left {
-//     display: flex;
-//   }
-
-//   .pager {
-//     display: flex;
-//   }
-// }</style>
+</style>