时间选择器背景颜色。

src/views/statistic/statistic/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container1">
+  <div class="container1" id="shijian">
     <div class="infobox">
       <el-scrollbar>
         <div class="header">
@@ -17,7 +17,7 @@
             />
           </div>
         </div>
-<!--        <div class="header">
+        <!--        <div class="header">
           <div class="text">选择统计维度：</div>
           <div>
             <el-radio-group v-model="radio" style="display: flex">
@@ -62,7 +62,10 @@
             >
             <el-button class="btn" @click="reset">重置</el-button>
           </div>
-          <el-button class="ml-3" @click="exportData('/api/v1/quality/stat/quality/export')">
+          <el-button
+            class="ml-3"
+            @click="exportData('/api/v1/quality/stat/quality/export')"
+          >
             <template #icon> <i-ep-download /> </template>导出
           </el-button>
         </div>
@@ -79,9 +82,9 @@
               label="产线名称"
             />
             <el-table-column
-                v-if="queryTypes.includes('workSection')"
-                prop="workSection"
-                label="工段名称"
+              v-if="queryTypes.includes('workSection')"
+              prop="workSection"
+              label="工段名称"
             />
             <el-table-column
               v-if="queryTypes.includes('operation')"
@@ -90,12 +93,23 @@
             />
             <el-table-column prop="materialName" label="产品名称" />
             <el-table-column prop="materialCode" label="产品编号" />
-              <el-table-column prop="materialModel" label="产品规格" />
-            <el-table-column  prop="produceNum" label="生产数量"  />
-            <el-table-column v-if="queryIndexs.includes('pass')" prop="qualified" label="合格率"  />
-            <el-table-column v-if="queryIndexs.includes('oneTimePassRate')" prop="oneTimePassRate" label="一次性合格率" />
-            <el-table-column v-if="queryIndexs.includes('PPM')" prop="ppm" label="PPM" />
-
+            <el-table-column prop="materialModel" label="产品规格" />
+            <el-table-column prop="produceNum" label="生产数量" />
+            <el-table-column
+              v-if="queryIndexs.includes('pass')"
+              prop="qualified"
+              label="合格率"
+            />
+            <el-table-column
+              v-if="queryIndexs.includes('oneTimePassRate')"
+              prop="oneTimePassRate"
+              label="一次性合格率"
+            />
+            <el-table-column
+              v-if="queryIndexs.includes('PPM')"
+              prop="ppm"
+              label="PPM"
+            />
           </el-table>
         </div>
         <div class="footer">
@@ -118,16 +132,19 @@
 import { getData, getStatLevel, getExport } from "@/api/statistic";
 import Pagination from "@/components/Pagination/index.vue";
 import { downFile } from "@/utils/common";
-import {getWorkInfoRate, getWorkOrderInfo} from "@/api/statistic/firstPassYieldData";
-import {useCrud} from "@/hooks/userCrud";
+import {
+  getWorkInfoRate,
+  getWorkOrderInfo,
+} from "@/api/statistic/firstPassYieldData";
+import { useCrud } from "@/hooks/userCrud";
 defineOptions({
   name: "Dashboard",
   inheritAttrs: false,
 });
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
-    useCrud({
-        src: "/api/v1/quality/stat",
-    });
+  useCrud({
+    src: "/api/v1/quality/stat",
+  });
 const { checkBtnPerm, downloadTemplate, exportData } = Utils;
 const exportFnc = async () => {
   await getExport({
@@ -151,7 +168,7 @@ const maxHeight = ref(null);
 const maxWidth = ref(null);
 
 const searTime = ref(null);
-const radio = ref('1');
+const radio = ref("1");
 const tableData = ref([]);
 
 const setHeight = () => {
@@ -187,10 +204,10 @@ const getValue = (array) => {
   return resarray;
 };
 const queryIndexs = ref([]);
-const queryTypes=ref([]);
+const queryTypes = ref([]);
 const getTableData = async () => {
   queryTypes.value = getValue(treeRef1.value.getCheckedNodes());
-  queryIndexs.value=getValue(treeRef2.value.getCheckedNodes());
+  queryIndexs.value = getValue(treeRef2.value.getCheckedNodes());
   const { data } = await getWorkInfoRate({
     endTime: searTime.value ? searTime.value[1] : "",
     startTime: searTime.value ? searTime.value[0] : "",
@@ -199,10 +216,10 @@ const getTableData = async () => {
     queryTypes: getValue(treeRef1.value.getCheckedNodes()),
     queryIndex: getValue(treeRef2.value.getCheckedNodes()),
   });
-    search.value.startTime=searTime.value[0];
-    search.value.endTime=searTime.value[1];
-    search.value.queryTypes=getValue(treeRef1.value.getCheckedNodes());
-    search.value.queryIndex=getValue(treeRef2.value.getCheckedNodes());
+  search.value.startTime = searTime.value[0];
+  search.value.endTime = searTime.value[1];
+  search.value.queryTypes = getValue(treeRef1.value.getCheckedNodes());
+  search.value.queryIndex = getValue(treeRef2.value.getCheckedNodes());
   tableData.value = data.records;
   currentOption.value.total = data.totalCount;
 };
@@ -212,7 +229,7 @@ const reset = () => {
   searTime.value = getCurrentMonthStartAndEndDates();
   treeRef1.value.setCheckedKeys(checkedKeys.value, true, true);
   treeRef2.value.setCheckedKeys([data1[0].key], true, true);
-  radio.value = '1';
+  radio.value = "1";
   currentOption.value.page = 1;
   getTableData();
 };
@@ -254,10 +271,10 @@ onMounted(async () => {
   searTime.value = getCurrentMonthStartAndEndDates();
   setHeight();
   await getStatLevelData();
-    search.value.startTime=searTime.value[0];
-    search.value.endTime=searTime.value[1];
-    search.value.queryTypes=getValue(treeRef1.value.getCheckedNodes());
-    search.value.queryIndex=getValue(treeRef2.value.getCheckedNodes());
+  search.value.startTime = searTime.value[0];
+  search.value.endTime = searTime.value[1];
+  search.value.queryTypes = getValue(treeRef1.value.getCheckedNodes());
+  search.value.queryIndex = getValue(treeRef2.value.getCheckedNodes());
   getTableData();
 });
 </script>
@@ -309,3 +326,11 @@ onMounted(async () => {
   margin-right: 8px;
 }
 </style>
+
+<style lang="scss">
+#shijian {
+  .is-active {
+    background-color: rgb(122, 145, 192);
+  }
+}
+</style>