HB
/
yudao-web
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页修改

master
赵鹏 8 months ago
parent
16d41a45c3
commit
98eeeb4b37
1 changed files with 54 additions and 83 deletions
Split View
  1. 137
      src/views/Home/Index.vue

137
src/views/Home/Index.vue
Unescape View File

@ -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 () => {

Write Preview
Loading…
Cancel
Save