✨ perf<报表管理>: 界面优化

src/views/reportManage/dataCenter/combinedDisplay/components/DatePicker/index.vue

@@ -158,7 +158,7 @@ watch(dateType, () => {
 </script>
 
 <template>
-  <div>
+  <div >
     <div class="demo-date-picker">
       <div class="block" style="display: flex; align-items: center;">
         <span class="demonstration" style="margin-right: 8px;">日数据:</span>

src/views/reportManage/dataCenter/combinedDisplay/index.vue

@@ -74,12 +74,12 @@ function handleButtonClick(tableName) {
   <div>
     <el-card body-style="padding: 10px" class="mb-3.5 mt-3.5">
       <div class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2"
-           style="display: flex; align-items: center;">
+           style="display: flex; align-items: center;" >
         <Selector ref="selectorRef" @update:updateData="updateDataChange" />
         <MonthlyDatePicker v-if="showTable === 'monthlyComparativeData'" @monthDateChange="handelDateChange"></MonthlyDatePicker>
       </div>
       <div v-if="showTable === 'mainData'">
-        <DataPicker style="display: flex; align-items: center;" @changeDate="processingDateChange" />
+        <DataPicker style="display: flex; align-items: center; gap: 16px" @changeDate="processingDateChange" />
       </div>
     </el-card>
 
@@ -140,13 +140,9 @@ function handleButtonClick(tableName) {
 
 .el-card {
   border: none;
+  border-radius: 12px;
   background-color: #fff;
   box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
 }
 
-.el-card:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-  0 4px 6px -2px rgba(234, 122, 167, 0.05);
-  transition: all 0.2s ease-in-out;
-}
 </style>

src/views/reportManage/dataCenter/index.vue

@@ -31,7 +31,7 @@ function handleTabClick(tab: TabsPaneContext, event: Event) {
 </script>
 
 <template>
-  <div class="pr-2 mt-2">
+  <div>
     <el-card body-style="padding-top: 10px;">
       <!--<el-tabs v-model="activeName" class="demo-tabs"  @tab-click="handleTabClick">-->
       <!--  <el-tab-pane v-for="pane in panes" :key="pane.name" :label="pane.label" :name="pane.name"></el-tab-pane>-->
@@ -69,7 +69,7 @@ function handleTabClick(tab: TabsPaneContext, event: Event) {
   display: flex;
   height: 40px;
   gap: 24px;
-  border-radius: 8px;
+  border-radius: 12px;
   overflow: hidden;
 }
 </style>

src/views/reportManage/dataCenter/normalDisplay/components/CompareData.vue

@@ -1,59 +0,0 @@
-<template>
-  <div>
-    <el-form :model="form" :rules="rules" ref="formRef">
-      <el-form-item prop="bid">
-        <el-input
-            v-model.number="form.bid"
-            @input="handleInputChange"
-            placeholder="请输入数字"
-            style="width: 150px"
-            clearable
-        ></el-input>
-      </el-form-item>
-      <el-button type="primary" @click="submitForm">提交</el-button>
-    </el-form>
-    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue';
-import { ElMessage } from 'element-plus'; // 确保已安装并导入Element Plus的消息组件
-
-const formRef = ref(null);
-const errorMessage = ref('');
-const rules = {
-  bid: [
-    { required: true, message: '此项为必填项', trigger: 'blur' },
-    { type: 'number', message: '必须输入数字', trigger: 'blur' }
-  ]
-};
-
-const form = reactive({
-  bid: 1.00
-});
-
-const handleInputChange = (event) => {
-  const value = event.target.value;
-  event.target.value = value === '' ? '' : (value === '0' ? '0.00' : value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, ''));
-  form.bid = parseFloat(value); // 直接赋值，无需检查空字符串，因为验证规则会处理
-};
-
-const submitForm = () => {
-  formRef.value.validate(async (valid) => {
-    if (valid) {
-      // 提交逻辑
-      console.log("Form submitted!");
-    } else {
-      // 显示错误提示
-      ElMessage.error('请确保所有必填项已正确填写');
-    }
-  });
-};
-</script>
-
-<style scoped>
-.error-message {
-  color: red;
-}
-</style>

src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue

@@ -118,7 +118,7 @@ defineExpose({fetchFilteredData, filteredData, updateData});
 .flex-container {
   display: flex;
   flex-wrap: nowrap;
-  gap: 10px; /* 控制间距 */
+  gap: 14.5px; /* 控制间距 */
 }
 
 .flex-item {

src/views/reportManage/dataCenter/normalDisplay/components/TableDataEntry.vue

@@ -17,7 +17,6 @@ import Selector from '/@/views/reportManage/dataCenter/normalDisplay/components/
 
 dayjs.extend(isoWeek);
 
-// const router = useRouter();
 const route = useRoute();
 const dateType = <string>route.query.dateType;
 
@@ -26,7 +25,6 @@ const selectorRef = ref(null);
 const taskIds = ref({});
 
 //日期选择
-// const dailyEntryTime = ref(dayjs().format('YYYY-MM-DD'));
 const dailySalesTime = ref(dayjs().subtract(1, 'day').format('YYYY-MM-DD'));
 
 const weeklyEntryTime = ref(null);
@@ -35,8 +33,6 @@ const weeklyAdTime = ref(null);
 
 const entryStartDate = ref(dayjs().locale('en').startOf('week').format('YYYY-MM-DD'));
 const entryEndDate = ref(dayjs().locale('en').endOf('week').format('YYYY-MM-DD'));
-// const salesStartDate = ref('');
-// const salesEndDate = ref('');
 const adStartDate = ref('');
 const adEndDate = ref('');
 

src/views/reportManage/dataCenter/normalDisplay/index.vue

@@ -100,13 +100,10 @@ onBeforeUnmount(() => {
 
 .el-card {
   border: none;
+  border-radius: 12px;
   background-color: #fff;
   box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
 }
 
-.el-card:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-  0 4px 6px -2px rgba(234, 122, 167, 0.05);
-  transition: all 0.2s ease-in-out;
-}
+
 </style>