样式调整

frontend/src/views/home/components/table.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="planList">
+  <div class="table_info">
     <ProTable
       ref="proTable"
       :columns="columns"
@@ -8,7 +8,96 @@
       :data-callback="dataCallback"
       @drag-sort="sortTable"
       :height="tableHeight"
+      :stripe="true"
     >
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader="scope">
+        <el-form :model="form" label-width="80px" :inline="true">
+          <el-form-item label="检测状态" v-if="form.activeTabs != 5">
+            <el-select v-model="form.checkStatus">
+              <el-option
+                v-for="(item, index) in checkStatusList"
+                :label="item.label"
+                :value="item.value"
+                :key="index"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="报告状态" v-if="form.activeTabs != 5">
+            <el-select v-model="form.checkReportStatus">
+              <el-option
+                v-for="(item, index) in checkReportStatusList"
+                :label="item.label"
+                :value="item.value"
+                :key="index"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="检测结果" v-if="form.activeTabs != 5">
+            <el-select v-model="form.checkResult">
+              <el-option
+                v-for="(item, index) in checkResultList"
+                :label="item.label"
+                :value="item.value"
+                :key="index"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="绑定状态" v-if="form.activeTabs == 5">
+            <el-select v-model="form.deviceBindStatus">
+              <el-option
+                v-for="(item, index) in deviceBindStatusList"
+                :label="item.label"
+                :value="item.value"
+                :key="index"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备类型" v-if="form.activeTabs == 5">
+            <el-select v-model="form.deviceType">
+              <el-option
+                v-for="(item, index) in deviceTypeList"
+                :label="item.label"
+                :value="item.value"
+                :key="index"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="制造厂商" v-if="form.activeTabs == 5">
+            <el-select v-model="form.manufacturer">
+              <el-option
+                v-for="(item, index) in manufacturerList"
+                :label="item.label"
+                :value="item.value"
+                :key="index"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" :icon="Search" @click="handleSearch"
+              >查询</el-button
+            >
+            <el-button
+              type="primary"
+              @click="handleDetection"
+              v-if="form.activeTabs === 0"
+              >启动自动检测</el-button
+            >
+            <el-button
+              type="primary"
+              @click="handleDetection"
+              v-if="form.activeTabs === 1"
+              >启动手动检测</el-button
+            >
+            <el-button type="primary" v-if="form.activeTabs === 2"
+              >报告生成</el-button
+            >
+            <el-button type="primary" v-if="form.activeTabs === 5"
+              >设备导入</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </template>
       <!-- 表格操作 -->
       <!-- <template #operation="scope">
         <el-button
@@ -62,14 +151,117 @@ const value1 = ref("");
 const value2 = ref("");
 const tableHeight = ref(0);
 console.log(window.innerHeight, "+++++++++");
-tableHeight.value = window.innerHeight - 730;
+tableHeight.value = window.innerHeight - 630;
 
-// 跳转详情页
-const toDetail = () => {
-  router.push(
-    `/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`
-  );
-};
+//下拉框数据
+//检测状态数据
+const checkStatusList = [
+  {
+    label: "未检测",
+    value: 0,
+  },
+  {
+    label: "检测中",
+    value: 1,
+  },
+  {
+    label: "检测完成",
+    value: 2,
+  },
+  {
+    label: "归档",
+    value: 3,
+  },
+];
+//检测报告状态数据
+const checkReportStatusList = [
+  {
+    label: "未生成报告",
+    value: 0,
+  },
+  {
+    label: "已生成报告",
+    value: 1,
+  },
+];
+//检测结果数组
+const checkResultList = [
+  {
+    label: "/",
+    value: null,
+  },
+  {
+    label: "不合格",
+    value: 0,
+  },
+  {
+    label: "合格",
+    value: 1,
+  },
+];
+//绑定状态数组
+const deviceBindStatusList = [
+  {
+    label: "未绑定",
+    value: 0,
+  },
+  {
+    label: "已绑定",
+    value: 1,
+  },
+];
+//设备类型数组
+const deviceTypeList = [
+  {
+    label: "PQS882A",
+    value: 0,
+  },
+  {
+    label: "PQS882B4",
+    value: 1,
+  },
+  {
+    label: "PQS882B5",
+    value: 2,
+  },
+  {
+    label: "PQS882B6",
+    value: 3,
+  },
+  {
+    label: "PQS882B7",
+    value: 4,
+  },
+  {
+    label: "PQS882B8",
+    value: 5,
+  },
+];
+//制造厂商数组
+const manufacturerList = [
+  {
+    label: "南京灿能电力",
+    value: 0,
+  },
+  {
+    label: "南瑞继保",
+    value: 1,
+  },
+  {
+    label: "中电",
+    value: 2,
+  },
+];
+//查询条件
+const form: any = ref({
+  activeTabs: 0, //功能选择
+  checkStatus: 0, //检测状态
+  checkReportStatus: 0, //检测报告状态
+  checkResult: 0, //检测结果
+  deviceBindStatus: 0, //绑定状态
+  deviceType: 0, //设备类型
+  manufacturer: 0, //制造厂商
+});
 const searchForm = ref({
   intervalType: 0,
   time: ["2024-08-20", "2024-08-27"],
@@ -109,6 +301,7 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
   {
     prop: "checkMode",
     label: "设备序列号",
+    width: 140,
     render: (scope) => {
       return scope.row.checkMode == 0
         ? "设备1"
@@ -122,6 +315,7 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
   {
     prop: "checkMode",
     label: "设备类型",
+    width: 140,
     render: (scope) => {
       return scope.row.checkMode == 0
         ? "PQS991"
@@ -135,6 +329,7 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
   {
     prop: "checkFrom",
     label: "制造厂商",
+    width: 140,
     render: (scope) => {
       return scope.row.checkFrom == 0
         ? "南京灿能"
@@ -244,6 +439,12 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
   // },
   // { prop: "operation", label: "操作", fixed: "right", width: 250 },
 ]);
+// 跳转详情页
+const toDetail = () => {
+  router.push(
+    `/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`
+  );
+};
 //重置查询条件
 const resetSearchForm = () => {
   searchForm.value = {
@@ -313,18 +514,39 @@ const changeStatus = async (row: User.ResUserList) => {
   );
   proTable.value?.getTableList();
 };
+//顶部功能切换时修改activeTabs
+const changeActiveTabs = (val: number) => {
+  form.value.activeTabs = val;
+};
+//启动自动检测/手动检测
+const handleDetection = () => {
+  //自动检测
+  if (form.value.activeTabs === 0) {
+    ElMessage.success("自动检测");
+  }else{
+    ElMessage.warning("手动检测");
+  }
+};
 onMounted(() => {
   console.log(proTable.value?.tableData);
 });
+defineExpose({ changeActiveTabs });
 </script>
 <style lang="scss" scoped>
-.planList {
-  width: 100%;
-  height: 100%;
+/* 当屏幕宽度小于或等于1300像素时 */
+@media screen and (max-width: 1300px) {
+  .el-select {
+    width: 130px !important;
+  }
 }
-::v-deep .el-select {
-  width: 150px !important;
+@media screen and (min-width: 1300px) {
+  .el-select {
+    width: 150px !important;
+  }
 }
+// ::v-deep .el-select {
+//   width: 150px !important;
+// }
 
 .el-form {
   width: 100%;