From 98eeeb4b376dc40e4c85da912581b9ca89f5fe37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E9=B9=8F?= <zp4185024@163.com>
Date: Fri, 21 Feb 2025 09:39:57 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Home/Index.vue | 137 +++++++++++++++------------------------
 1 file changed, 54 insertions(+), 83 deletions(-)

diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index 1268fb2..458b62a 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -1,32 +1,43 @@
 <template>
   <el-row :gutter="8" justify="space-between">
-    <el-col  :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
-      <el-card ref="taskInfoCard" shadow="never">
-        <template #header>任务信息</template>
+    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" :height="280">
+      <el-card shadow="hover" class="mb-8px">
+        <template #header>
+          任务分布
+        </template>
+        <el-skeleton :loading="loading" animated>
+          <Echart :options="pieOptionsData" :height="280" />
+        </el-skeleton>
+      </el-card>
+    </el-col>
+
+    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
+      <el-card shadow="hover" class="mb-8px">
+        <template #header>
+          周期任务
+        </template>
         <el-skeleton :loading="loading" animated>
-          <el-row :gutter="20" justify="space-between">
-            <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
-              <el-card shadow="hover" class="mb-8px">
-                <el-skeleton :loading="loading" animated>
-                  <Echart :options="pieOptionsData" :height="280" />
-                </el-skeleton>
-              </el-card>
-            </el-col>
-            <el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
-              <el-card shadow="hover" class="mb-8px">
-                <el-skeleton :loading="loading" animated>
-                  <Echart :options="barOptionsData" :height="280" />
-                </el-skeleton>
-              </el-card>
-            </el-col>
-          </el-row>
+          <Echart :options="barOptionsData" :height="280" />
         </el-skeleton>
       </el-card>
     </el-col>
+    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
+   
+      <el-card shadow="hover" class="mb-8px">
+        <template #header>
+          月任务概况
+        </template>
+        <el-skeleton :loading="loading" animated>
+          <Echart :options="barOptionsData" :height="280" />
+        </el-skeleton>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row :gutter="8" justify="space-between">
     <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
-      <el-card ref="taskNewCard" shadow="never" >
+      <el-card ref="taskNewCard" shadow="never">
         <template #header>
-            最新任务
+          最新任务
         </template>
         <el-skeleton :loading="loading" animated>
           <div v-for="(item, index) in tasks" :key="`dynamics-${index}`">
@@ -43,45 +54,36 @@
         </el-skeleton>
       </el-card>
     </el-col>
-  </el-row>
-  <el-row :gutter="8">
-    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
-      <el-card  shadow="never">
-        <template #header>企业信息</template>
-
+    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
+      <el-card shadow="never">
+        <template #header>
+          逾期情况
+        </template>
         <el-skeleton :loading="loading" animated>
-          <el-row :gutter="20" justify="space-between">
-            <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
-              <el-card shadow="hover" class="mb-8px">
-                <el-skeleton :loading="loading" animated>
-                  <Echart :options="pieOptionsData" :height="280" />
-                </el-skeleton>
-              </el-card>
-            </el-col>
-            <el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
-              <el-card shadow="hover" class="mb-8px">
-                <el-skeleton :loading="loading" animated>
-                  <Echart :options="barOptionsData" :height="280" />
-                </el-skeleton>
-              </el-card>
-            </el-col>
-          </el-row>
+          <div v-for="(item, index) in notice2" :key="`dynamics-${index}`">
+            <template v-if="item.type === '资质逾期'">
+              <div>
+                <div class="text-12px flex justify-between">
+                  <span>{{ item.title }}</span>
+                  <span class="mr-10">{{ item.days }}</span>
+                </div>
+
+              </div>
+              <el-divider height="10px" class="m-4 p-0" style="margin:8px 0" />
+          </template>
+          </div>
         </el-skeleton>
       </el-card>
     </el-col>
     <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
-
       <el-card shadow="never">
         <template #header>
-          <div class="h-3 flex justify-between">
-            <el-radio-group v-model="radio2" @change="rdiType">
-              <el-radio-button label="资质逾期" value="资质逾期" />
-              <el-radio-button label="整改次数" value="整改次数" />
-            </el-radio-group>
-          </div>
+          整改次数
         </template>
         <el-skeleton :loading="loading" animated>
-          <div v-for="(item, index) in notice" :key="`dynamics-${index}`">
+          <div v-for="(item, index) in notice2" :key="`dynamics-${index}`">
+            <template v-if="item.type === '整改次数'">
+
             <div>
               <div class="text-12px flex justify-between">
                 <span>{{ item.title }}</span>
@@ -90,7 +92,7 @@
 
             </div>
             <el-divider height="10px" class="m-4 p-0" style="margin:8px 0" />
-
+            </template>
           </div>
         </el-skeleton>
       </el-card>
@@ -100,42 +102,20 @@
 <script lang="ts" setup>
 import { set } from 'lodash-es'
 import { EChartsOption } from 'echarts'
-import { useUserStore } from '@/store/modules/user'
 import { pieOptions, barOptions } from './echarts-data'
 
 defineOptions({ name: 'Home' })
 
 const { t } = useI18n()
-const userStore = useUserStore()
 const loading = ref(true)
 const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
 
-const radio2 = ref('资质逾期')
 
 // 监听两个卡片高度变化并保持同步
-const taskInfoCard = ref()
 const taskNewCard = ref()
 
 // 使用ResizeObserver监听高度变化
 onMounted(() => {
-  const resizeObserver = new ResizeObserver((entries) => {
-    for (const entry of entries) {
-      const height = entry.contentRect.height
-      // 如果是taskInfoCard变化，则更新taskNewCard高度
-      if (entry.target === taskInfoCard.value.$el) {
-        taskNewCard.value.$el.style.height = height + 'px'
-      }   
-    }
-  })
-
-  // 观察两个卡片元素
-  resizeObserver.observe(taskInfoCard.value.$el)
-  resizeObserver.observe(taskNewCard.value.$el)
-  rdiType(radio2.value)
-  // 组件卸载时停止观察
-  onUnmounted(() => {
-    resizeObserver.disconnect()
-  })
 })
 
 
@@ -325,16 +305,7 @@ const notice2 = reactive<any>([
     days: '整改8次'
   }
 ])
-const notice = ref([])
 
-const rdiType = (val: any) => {
-  //根据notice2的type和radio2的值进行过滤
-  if (val === '资质逾期') {
-    notice.value = notice2.filter((v: any) => v.type === '资质逾期')
-  } else {
-    notice.value = notice2.filter((v: any) => v.type === '整改次数')
-  }
-}
 
 // 用户来源
 const getUserAccessSource = async () => {