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

首页修改

master
赵鹏 2 months ago
parent
16d41a45c3
commit
98eeeb4b37
1 changed files with 54 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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