样式调整

frontend/src/components/echarts/pie/default.vue

@@ -41,7 +41,7 @@ const init = () => {
     isRing: false, //是否环形图
     isRadius: false, //是否圆角
     isSpace: true, //是否显示间隔
-    isLabelLine: true, //是否显示引导线
+    isLabelLine: false, //是否显示引导线
     ...props.customData,
   };
   legendData.value = {
@@ -51,7 +51,7 @@ const init = () => {
     itemGap: 0, // 设置图例项之间的间隔为20
     ...props.legendData,
   };
-  chart.value =  chartsRef.value && echarts.init(chartsRef.value)
+  chart.value = chartsRef.value && echarts.init(chartsRef.value);
   var option = {
     title: {
       text: customData.value.title,
@@ -67,7 +67,7 @@ const init = () => {
     series: [
       {
         type: "pie",
-        radius: customData.value.isRing ? ["45", "65"] : "65%",
+        radius: customData.value.isRing ? ["55", "75"] : "75%",
         data: props.chartsData,
         center: ["55%", "50%"], // 设置饼图的中心位置
         // padAngle: 2,
@@ -80,6 +80,16 @@ const init = () => {
             shadowColor: "rgba(0, 0, 0, 0.5)",
           },
         },
+        label: {
+          normal: {
+            show: true,
+            position: "inside",
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
         itemStyle: {
           borderRadius: customData.value.isRadius ? 10 : 0,
           borderColor: customData.value.isSpace ? "#fff" : "",
@@ -91,7 +101,7 @@ const init = () => {
       },
     ],
   };
-  option &&chart.value&& chart.value.setOption(option);
+  option && chart.value && chart.value.setOption(option);
   setTimeout(() => {
     chart.value.resize();
   }, 0);

frontend/src/layouts/components/Footer/index.vue

@@ -30,7 +30,7 @@
         </el-dropdown-menu>
       </template>
     </el-dropdown>
-    <p>
+    <p style="margin: 0;">
       <a href="http://www.shining-electric.com/" target="_blank">
         2024 © 南京灿能电力自动化股份有限公司
       </a>

frontend/src/styles/element.scss

@@ -334,3 +334,8 @@
   margin-right: 10px !important;
   margin-bottom: 20px !important;
 }
+
+.el-tree-node__content:hover {
+  background-color: var(--el-color-primary) !important;
+  color: #fff;
+}

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(
+const checkStatusList = [
-    `/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`
+  {
-  );
+    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 {
+/* 当屏幕宽度小于或等于1300像素时 */
-  width: 100%;
+@media screen and (max-width: 1300px) {
-  height: 100%;
+  .el-select {
+    width: 130px !important;
+  }
 }
-::v-deep .el-select {
+@media screen and (min-width: 1300px) {
-  width: 150px !important;
+  .el-select {
+    width: 150px !important;
+  }
 }
+// ::v-deep .el-select {
+//   width: 150px !important;
+// }
 
 .el-form {
   width: 100%;

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

@@ -77,12 +77,12 @@ defineExpose({ getTreeData });
 </script>
 <style lang="scss" scoped>
 .plan_tree {
-  width: 200px;
+  // width: 200px;
-  height: 100%;
+  // height: 100%;
   display: flex;
   flex-direction: column;
   padding: 5px;
-  height: calc(100% - 70px);
+  // height: calc(100% - 70px);
   background-color: #fff;
   .search_view {
     width: 100%;

frontend/src/views/home/tabs/dashboard.vue

@@ -8,23 +8,20 @@
     <div class="right_container">
       <!-- 功能选择 -->
       <div class="container_function">
-        <!-- <div class="function_title"><p>功能选择</p></div> -->
+        <div
-        <div class="function_main">
+          class="function_item"
-          <div
+          :class="
-            class="function_item"
+            item.checked ? 'function_item checked_function' : 'function_item'
-            :class="
+          "
-              item.checked ? 'function_item checked_function' : 'function_item'
+          v-for="(item, index) in tabsList"
-            "
+          :key="index"
-            v-for="(item, index) in tabsList"
+          @click="handleCheckFunction(index)"
-            :key="index"
+        >
-            @click="handleCheckFunction(index)"
+          <div class="item_img">
-          >
+            <img :src="item.img" alt="" />
-            <div class="item_img">
+          </div>
-              <img :src="item.img" alt="" />
+          <div class="item_text">
-            </div>
+            <p>{{ item.label }}</p>
-            <div class="item_text">
-              <p>{{ item.label }}</p>
-            </div>
           </div>
         </div>
       </div>
@@ -63,6 +60,11 @@
             :customData="{
               title: '报告状态',
               textAlign: 'right',
+              label: {
+                normal: {
+                  position: 'inner',
+                },
+              },
             }"
             :legendData="{
               icon: 'circle',
@@ -73,115 +75,16 @@
           ></pie>
         </div>
       </div>
-      <!-- 筛选条件 -->
-      <div class="container_title">
-        <el-form :model="form" label-width="80px" :inline="true">
-          <!-- <el-form-item label="功能选择">
-            <el-select v-model="form.activeTabs" @change="changeSelect">
-              <el-option
-                v-for="(item, index) in tabsList"
-                :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.checkStatus" @change="changeSelect">
-              <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" @change="changeSelect">
-              <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" @change="changeSelect">
-              <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" @change="changeSelect">
-              <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" @change="changeSelect">
-              <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" @change="changeSelect">
-              <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-button type="primary" @click="planDetail">计划详情</el-button> -->
-          </el-form-item>
-        </el-form>
-      </div>
       <!-- 列表数据 -->
       <div class="container_table">
-        <Table></Table>
+        <Table ref="tableRef"></Table>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
-import { getStaticTreeData } from "@/api/plan/static.ts";
+import { getStaticTreeData } from "@/api/plan/static";
 import pie from "@/components/echarts/pie/default.vue";
 import { useRouter } from "vue-router";
 import tree from "../components/tree.vue";
@@ -239,105 +142,22 @@ const tabsList = ref([
     checked: false,
   },
 ]);
-//检测状态数据
+
-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,
-  },
-];
 form.value.activeTabs = tabsList.value[0].value;
+const tableRef = ref();
+watch(
+  () => form.value,
+  (val, oldVal) => {
+    if (val) {
+      tableRef.value && tableRef.value.changeActiveTabs(form.value.activeTabs);
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
 const pieRef1 = ref(),
   pieRef2 = ref(),
   pieRef3 = ref();
@@ -417,151 +237,133 @@ onMounted(() => {
   height: calc(100vh - 165px);
   display: flex;
   justify-content: space-between;
-  background-color: #eee;
+  // background-color: #eee;
+
   .left_tree {
-    width: auto;
+    width: 14% !important;
     height: 100%;
     background-color: #fff;
   }
+
   .right_container {
-    flex: 1;
+    flex: none;
-    // width: 100%;
+    width: 85.8%;
-    padding: 0 10px 0 10px;
+    // padding: 0 10px 0 10px;
+    margin-left: 10px;
+    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
-    .container_title {
+
-      width: 100%;
-      // min-height: 60px;
-      height: auto !important;
-      background: #fff;
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      margin-bottom: 10px;
-      border-radius: 4px;
-      padding: 10px;
-      box-sizing: border-box;
-      .el-form {
-        width: 100%;
-        .el-form-item {
-          .el-button {
-            margin: 0 10px;
-          }
-        }
-      }
-      ::v-deep .el-form-item {
-        margin-bottom: 8px !important;
-      }
-    }
     .container_function {
       width: 100%;
-      height: 70px;
+      height: auto;
       background: #fff;
       border-radius: 4px;
       display: flex;
       justify-content: space-between;
+      align-items: center;
       margin-bottom: 10px;
-      padding: 10px 50px 10px 30px;
+      padding: 10px 20px 10px 20px;
       box-sizing: border-box;
-      .function_title {
+
-        height: 100%;
+      .function_item {
-        height: 20px;
+        flex: none;
-        width: 100px;
+        width: 6%;
-        // line-height: 70px;
+        height: 70px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        p {
-          font-size: 14px;
-          font-weight: 800;
-          text-align: center;
-          margin: 0;
-        }
-      }
-      .function_main {
-        flex: 1;
         display: flex;
         justify-content: space-between;
-        .function_item {
+        align-items: center;
-          width: 120px;
+        flex-direction: column;
-          height: 50px;
+        cursor: pointer;
+        background-color: #607eab;
+        border-radius: 8px;
+        padding: 0px 30px;
+
+        .item_img {
+          width: 60px;
+          height: 60px;
+          border-radius: 50%;
+          // background-color: #607eab;
           display: flex;
-          justify-content: space-between;
           align-items: center;
-          cursor: pointer;
+          justify-content: center;
-          // border: 1px solid var(--el-color-primary);
+
-          .item_img {
+          img {
-            width: 50px;
+            width: 40px;
-            height: 50px;
+            height: auto;
-            border-radius: 50%;
-            background-color: #607eab;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            img {
-              width: 30px;
-              height: auto;
-            }
-          }
-          .item_img:nth-child(3),
-          .item_img:nth-child(6) {
-            padding: 10px !important;
-            img {
-              width: 20px !important;
-              height: auto;
-            }
-          }
-          .item_text {
-            p {
-              margin: 0;
-              color: var(--el-color-primary);
-              font-weight: 800;
-              color: #000;
-            }
           }
         }
-        .function_item:hover,
+
-        .checked_function {
+        .item_img:nth-child(3),
-          .item_img {
+        .item_img:nth-child(6) {
-            background-color: var(--el-color-primary);
+          padding: 10px !important;
+
+          img {
+            width: 20px !important;
+            height: auto;
           }
-          .item_text {
+        }
-            p {
+
-              color: var(--el-color-primary);
+        .item_text {
-            }
+          p {
+            margin: 0;
+            font-weight: 800;
+            color: var(--el-color-primary);
+            font-size: 14px;
+            font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
+          }
+        }
+      }
+
+      .function_item:hover,
+      .checked_function {
+        background-color: var(--el-color-primary);
+
+        .item_img {
+          // background-color: var(--el-color-primary);
+        }
+
+        .item_text {
+          p {
+            // color: var(--el-color-primary);
+            color: #fff;
           }
         }
       }
     }
+
     .container_charts {
       width: 100%;
       min-height: 200px !important;
-      // border: 2px solid green;
       background-color: #eee;
       display: flex;
       justify-content: space-between;
       margin-bottom: 10px;
+
       .charts_info {
         flex: none;
         width: 32.9%;
         height: 100% !important;
-        // border: 2px solid pink;
         background-color: #fff;
         border-radius: 4px;
       }
     }
+
     .container_table {
-      width: 100%;
+      // width: 100%;
-      flex: 1;
+      flex: 1 !important;
-      // height: 400px;
+      height: calc(100vh - 360px);
       border-radius: 4px;
+      width: 100% !important;
+      // display: none;
+      .table_info {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
 }
-.el-select {
-  min-width: 180px;
-}
 </style>

frontend/src/views/plan/planList/components/details.vue

@@ -211,9 +211,9 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 }
 
 const resetForm = (formEl: FormInstance | undefined) => {
+  close()
   if (!formEl) return
   formEl.resetFields()
-  close
 }
 
 const options = Array.from({ length: 10000 }).map((_, idx) => ({