优化报表数据、计划报表页面

src/components/echarts/BarLabelRotation.vue

@@ -108,7 +108,7 @@ const setOptions = (lables = [], series = [],legend={}) => {
             }
         },
         grid: {
-            top: '20px',
+            top: '50px',
             left: '0',
             right: '4px',
             bottom: '0',

src/views/static/plan.vue

@@ -1,74 +1,62 @@
 <template>
-      <el-scrollbar class="hc-main-scrollbar">
-        <div class="head_box">
+    <HcCard scrollbar>
+        <template #header>
             <div class="w-36">
-                    <el-select v-model="searchForm.department" block clearable placeholder="选择部门" size="large">
-                        <el-option v-for="item in departmentType" :label="item.name" :value="item.key"/>
-                    </el-select>
-                </div>
-                <div class="w-40 ml-2" style="display: flex;justify-content: center;align-items: center;">
-                    <span style="width: 120px;color: gray;">任务人员:</span>
-                 <el-select v-model="searchForm.person" block clearable placeholder="任务人员" size="large">
-                        <el-option v-for="item in personType" :label="item.name" :value="item.key"/>
-                    </el-select>
-                </div>
-                <div class="w-36 ml-4">
-                    <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
-                </div>
-                <div class="mx-2">~</div>
-                <div class="w-36">
-                    <el-date-picker class="block" v-model="searchForm.endTime" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
-                </div>
-            
-                <div class="ml-4">
-                    <el-button type="primary" @click="searchClick" size="large">
-                        <HcIcon name="search-2"/>
-                        <span>搜索</span>
-                    </el-button>
-                </div>
-                <div class="ml-2">
-                    <el-button size="large" @click="resetClick">
-                        <HcIcon name="close-circle"/>
-                        <span>重置</span>
-                    </el-button>
-                </div>
-        </div>
-        <HcCardItem ui="hac-card-item mt-4" style="height:360px">
-        
-            <div class="hac-card-item-body">
-                <div class="hc-row-echarts-box"  style="margin-top: 30px;">
-                    <BarLabelRotation isMonth :datas="planDatas" :legend="legend"/>
-                </div>
+                <el-select v-model="searchForm.department" block clearable placeholder="选择部门" size="large">
+                    <el-option v-for="item in departmentType" :label="item.name" :value="item.key"/>
+                </el-select>
+            </div>
+            <div class="w-40 ml-2">
+                <el-select v-model="searchForm.person" block clearable placeholder="任务人员" size="large">
+                    <el-option v-for="item in personType" :label="item.name" :value="item.key"/>
+                </el-select>
+            </div>
+            <div class="w-36 ml-4">
+                <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
+            </div>
+            <div class="mx-2">~</div>
+            <div class="w-36">
+                <el-date-picker class="block" v-model="searchForm.endTime" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
+            </div>
+            <div class="ml-4">
+                <el-button type="primary" @click="searchClick" size="large">
+                    <HcIcon name="search-2"/>
+                    <span>搜索</span>
+                </el-button>
+            </div>
+            <div class="ml-2">
+                <el-button size="large" @click="resetClick">
+                    <HcIcon name="close-circle"/>
+                    <span>重置</span>
+                </el-button>
+            </div>
+        </template>
+
+        <HcCardItem ui="hac-bg-grey">
+            <div class="h-72">
+                <BarLabelRotation isMonth :datas="planDatas" :legend="legend"/>
             </div>
         </HcCardItem>
+
         <div class="hc-main-row">
-            <el-row :gutter="14" class="mt-8" >
+            <el-row :gutter="14" class="mt-4" >
                 <el-col :span="12">
-                    <HcCardItem ui="hac-card-item">
-                        <HcCardItem ui="hac-card-item">
-                            <div class="hc-row-echarts-box" style="height: 360px;">
-                                <WordPopulation isMonth name="任务完成率" :ydata="ydata"  :xdata="xdata" unit="%" />
-                            </div>
-                        </HcCardItem>
+                    <HcCardItem ui="hac-bg-grey">
+                        <div class="h-96">
+                            <WordPopulation isMonth name="任务完成率" :ydata="ydata"  :xdata="xdata" unit="%" />
+                        </div>
                     </HcCardItem>
                 </el-col>
                 <el-col :span="12">
-                    <HcCardItem ui="hac-card-item">
-                        <div class="hc-row-echarts-box" style="height: 360px;">
+                    <HcCardItem ui="hac-bg-grey">
+                        <div class="h-96">
                             <StackedLine isMonth  :ydata="sydata"  :xdata="sxdata"  :legend="slegend"/>
                         </div>
                     </HcCardItem>
                 </el-col>
             </el-row>
         </div>
-        
-      </el-scrollbar>
-      
-            
-        
-  
- 
-
+    </HcCard>
 </template>
 
  <script setup>
@@ -76,6 +64,7 @@
  import BarLabelRotation from "~com/echarts/BarLabelRotation.vue";
  import StackedLine from "~com/echarts/StackedLine.vue";
  import WordPopulation from "~com/echarts/WordPopulation.vue";
+
  const searchForm=ref({
     department:'',person:''
  })
@@ -150,10 +139,7 @@ const slegend=ref( ['风险暂停计划', '正常计划',])
 </script>
 <style lang="scss" scoped>
 @import "~src/styles/home/index.scss";
-.el-card .el-card__body .hc-card-main-box .hc-card-item-box {
-    background: white;
-}
 .head_box{
     display: flex;
 }
-</style>
+</style>