修改优化

hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue

@@ -2,25 +2,37 @@
   <div class="totalContant">
     <div class="ns-form-title">
       <div class="title">
-        <span>查询</span>
-        <a-date-picker
-          v-if="selectedTime"
-          style="margin-left: 5%"
-          valueFormat="YYYY"
-          v-model:value="selectYear"
-          @change="changeYear"
-          picker="year" />
-        <a-date-picker
-          v-else
-          style="margin-left: 5%"
-          valueFormat="YYYY-MM"
-          v-model:value="selectMonth"
-          @change="changeMonth"
-          picker="month" />
+        <span>统计数据</span>
       </div>
+    </div>
+    <div
+      style="
+        display: flex;
+        width: 100%;
+        height: 5%;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 1%;
+      ">
+      <a-date-picker
+        v-if="selectedTime"
+        valueFormat="YYYY"
+        v-model:value="selectYear"
+        @change="changeYear"
+        picker="year" />
+      <a-date-picker
+        v-else
+        valueFormat="YYYY-MM"
+        v-model:value="selectMonth"
+        @change="changeMonth"
+        picker="month" />
       <div class="operation">
-        <div class="month" :style="monthStyles" @click="changeToMonth"><span>月</span></div>
-        <div class="year" :style="yearStyles" @click="changeToYear"><span>年</span></div>
+        <div class="month" :style="monthStyles" @click="changeToMonth">
+          <span :style="monthText">本月</span>
+        </div>
+        <div class="year" :style="yearStyles" @click="changeToYear">
+          <span :style="yearText">本年</span>
+        </div>
       </div>
     </div>
     <div class="contant">
@@ -62,8 +74,10 @@
   const selectYear = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
   const selectMonth = ref<Dayjs>(dayjs().startOf('year').month(0));
   // 年/月切换
-  const monthStyles = ref('background: #f2f2f2');
+  const monthStyles = ref('background: transparent');
   const yearStyles = ref('background: #2778ff');
+  const monthText = ref('color: #2778ff');
+  const yearText = ref('color: #ffffff');
   const selectedTime = ref(true);
   const changeMonth = () => {
     queryParams.value.yearMonth = selectMonth.value;
@@ -71,7 +85,9 @@
   };
   const changeToMonth = () => {
     monthStyles.value = 'background: #2778ff';
-    yearStyles.value = 'background: #f2f2f2';
+    yearStyles.value = 'background: transparent';
+    monthText.value = 'color: #ffffff';
+    yearText.value = 'color: #2778ff';
     queryParams.value.yearAndMonth = 'month';
     queryParams.value.yearMonth = selectMonth.value.format('YYYY-DD');
     columns.value[2].title = '月份';
@@ -84,8 +100,10 @@
     getTableData();
   };
   const changeToYear = () => {
-    monthStyles.value = 'background: #f2f2f2';
+    monthStyles.value = 'background:transparent';
     yearStyles.value = 'background: #2778ff';
+    monthText.value = 'color: #2778ff';
+    yearText.value = 'color: #ffffff';
     queryParams.value.yearAndMonth = 'year';
     delete queryParams.value.yearMonth;
     // queryParams.value.year = selectYear.value;
@@ -218,6 +236,7 @@
   const columns = ref([
     {
       title: '序号',
+      width: 100,
       customRender: (text: any) => {
         return text.index + 1;
       },
@@ -301,32 +320,32 @@
       border-radius: 1px;
       background-color: #2778ff;
     }
-    .operation {
-      display: flex;
-      margin-right: 10px;
-      font-weight: 400;
-      height: 70%;
-      cursor: pointer;
-      width: 10%;
-    }
-    .month {
-      width: 70px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      // background: #f2f2f2;
-    }
-    .year {
-      width: 70px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      // background: #2778ff;
-    }
+  }
+  .operation {
+    display: flex;
+    margin-right: 10px;
+    font-weight: 400;
+    height: 90%;
+    cursor: pointer;
+    width: 10%;
+    border-radius: 4px;
+    border: 1px solid rgba(39, 120, 255, 1);
+  }
+  .month {
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .year {
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
   .contant {
     width: 100%;
-    height: calc(100% - 5vh);
+    height: calc(94% - 5vh);
     .chartsPart {
       width: 100%;
       height: 35%;
@@ -336,6 +355,7 @@
         width: 19%;
         height: 100%;
         background: rgba(39, 120, 255, 0.05);
+        border-radius: 8px;
       }
     }
     .tablePart {