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

<template>
  <el-row :gutter="8" justify="space-between">
    <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>
          <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="lineOptions" :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">
        <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-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>
          <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>
          整改次数
        </template>
        <el-skeleton :loading="loading" animated>
          <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-row>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { pieOptions, barOptions,lineOptions } from './echarts-data'

defineOptions({ name: 'Home' })

const { t } = useI18n()
const loading = ref(true)
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption


// 监听两个卡片高度变化并保持同步
const taskNewCard = ref()

// 使用ResizeObserver监听高度变化
onMounted(() => {
})


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 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>