yudao-web/src/views/Home/Index.vue

<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-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>
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card ref="taskNewCard" shadow="never" >
        <template #header>
            最新任务
        </template>
        <el-skeleton :loading="loading" animated>
          <div v-for="(item, index) in tasks" :key="`dynamics-${index}`">
            <div>
              <div class="text-12px flex justify-between">
                <span>{{ item.title }}</span>
                <span class="mr-10">{{ item.user }}</span>
                <span class="mr-10">{{ item.date }}</span>
              </div>

            </div>
            <el-divider height="10px" class="m-4 p-0" style="margin:8px 0" />
          </div>
        </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-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>
        </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>
              <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" />

          </div>
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
</template>
<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()
  })
})


const tasks = reactive<any>([
  {
    title: '义县一公司环保信息',
    date: '2023-01-01',
    user: '张三',
    status: 1
  },
  {
    title: '锦州二公司安全检查',
    date: '2023-01-02',
    user: '李四',
    status: 2
  },
  {
    title: '北镇三公司环评整改',
    date: '2023-01-03',
    user: '王五',
    status: 1
  },
  {
    title: '凌海四公司排污监测',
    date: '2023-01-04',
    user: '赵六',
    status: 3
  },
  {
    title: '黑山五公司设备巡检',
    date: '2023-01-05',
    user: '孙七',
    status: 2
  },
  {
    title: '义县六公司安全培训',
    date: '2023-01-06',
    user: '周八',
    status: 1
  },
  {
    title: '大石桥七公司隐患排查',
    date: '2023-01-07',
    user: '吴九',
    status: 3
  },
  {
    title: '盘锦八公司应急演练',
    date: '2023-01-08',
    user: '郑十',
    status: 2
  },
  {
    title: '营口九公司废水处理',
    date: '2023-01-09',
    user: '钱十一',
    status: 1
  },
  {
    title: '阜新十公司空气监测',
    date: '2023-01-10',
    user: '刘十二',
    status: 2
  }

])

const notice2 = reactive<any>([
  {
    type: '资质逾期',
    title: '义县一公司环保信息',
    date: '2023-01-01 12:00:00',
    days: '逾期1天'
  },
  {
    type: '整改次数',
    title: '义县一公司环保信息',
    date: '2023-01-01 12:00:00',
    days: '整改1次'
  },
  {
    type: '资质逾期',
    title: '义县一公司环保信息',
    date: '2023-01-01 12:00:00',
    days: '逾期1天'
  },
  {
    type: '整改次数',
    title: '义县一公司环保信息',
    date: '2023-01-01 12:00:00',
    days: '整改1次'
  },
  {
    type: '资质逾期',
    title: '义县一公司环保信息',
    date: '2023-01-01 12:00:00',
    days: '逾期1天'
  },
  {
    type: '整改次数',
    title: '义县一公司环保信息',
    date: '2023-01-01 12:00:00',
    days: '整改1次'
  },
  {
    type: '资质逾期',
    title: '锦州二公司安全检查',
    date: '2023-01-02 12:00:00',
    days: '逾期2天'
  },
  {
    type: '整改次数',
    title: '锦州二公司安全检查',
    date: '2023-01-02 12:00:00',
    days: '整改2次'
  },
  {
    type: '资质逾期',
    title: '北镇三公司环评整改',
    date: '2023-01-03 12:00:00',
    days: '逾期3天'
  },
  {
    type: '整改次数',
    title: '北镇三公司环评整改',
    date: '2023-01-03 12:00:00',
    days: '整改3次'
  },
  {
    type: '资质逾期',
    title: '凌海四公司排污监测',
    date: '2023-01-04 12:00:00',
    days: '逾期4天'
  },
  {
    type: '整改次数',
    title: '凌海四公司排污监测',
    date: '2023-01-04 12:00:00',
    days: '整改4次'
  },
  {
    type: '资质逾期',
    title: '黑山五公司设备巡检',
    date: '2023-01-05 12:00:00',
    days: '逾期5天'
  },
  {
    type: '整改次数',
    title: '黑山五公司设备巡检',
    date: '2023-01-05 12:00:00',
    days: '整改5次'
  },
  {
    type: '资质逾期',
    title: '义县六公司安全培训',
    date: '2023-01-06 12:00:00',
    days: '逾期6天'
  },
  {
    type: '整改次数',
    title: '义县六公司安全培训',
    date: '2023-01-06 12:00:00',
    days: '整改6次'
  },
  {
    type: '资质逾期',
    title: '大石桥七公司隐患排查',
    date: '2023-01-07 12:00:00',
    days: '逾期7天'
  },
  {
    type: '整改次数',
    title: '大石桥七公司隐患排查',
    date: '2023-01-07 12:00:00',
    days: '整改7次'
  },
  {
    type: '资质逾期',
    title: '盘锦八公司应急演练',
    date: '2023-01-08 12:00:00',
    days: '逾期8天'
  },
  {
    type: '整改次数',
    title: '盘锦八公司应急演练',
    date: '2023-01-08 12:00:00',
    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 () => {
  const data = [
    { value: 335, name: '执法一队' },
    { value: 310, name: '执法二队' },
    { value: 234, name: '执法三队' },
    { value: 135, name: '执法四队' },
    { value: 1548, name: '执法五队' }
  ]
  set(
    pieOptionsData,
    'legend.data',
    data.map((v) => t(v.name))
  )
  pieOptionsData!.series![0].data = data.map((v) => {
    return {
      name: t(v.name),
      value: v.value
    }
  })
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption

// 周活跃量
const getWeeklyUserActivity = async () => {
  const data = [
    { value: 325, name: '一月' },
    { value: 423, name: '二月' },
    { value: 632, name: '三月' },
    { value: 234, name: '四月' },
    { value: 464, name: '五月' },
    { value: 322, name: '六月' },
    { value: 324, name: '七月' }
  ]
  set(
    barOptionsData,
    'xAxis.data',
    data.map((v) => t(v.name))
  )
  set(barOptionsData, 'series', [
    {
      name: '任务数',
      data: data.map((v) => v.value),
      type: 'bar'
    }
  ])
}

const getAllApi = async () => {
  await Promise.all([
    getUserAccessSource(),
    getWeeklyUserActivity()
  ])
  loading.value = false
}

getAllApi()
</script>