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

<template>
  <el-row justify="space-between">
    <el-col :span="14">
      <el-form :model="queryParams" class="queryForm" inline>
        <el-form-item label="按区域" prop="region">
          <el-select v-model="queryParams.region" placeholder="请选择区域" size="large">
            <el-option
              v-for="option in area"
              :key="option.value"
              :value="option.value"
              :label="option.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="按周期" prop="selectWeek">
          <el-select
            v-model="queryParams.selectWeek"
            placeholder="请选择周期"
            clearable
            size="large"
          >
            <el-option
              v-for="option in getIntDictOptions(DICT_TYPE.SELECT_WEEK)"
              :key="option.value"
              :value="option.value"
              :label="option.label"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-col>
    <section class="flex gap-20px">
      <el-button type="primary" plain>
        <Icon icon="ep:search" />
        查询
      </el-button>
      <el-button>
        <Icon icon="ep:refresh" />
        重置
      </el-button>
    </section>
  </el-row>
  <el-row :gutter="20" justify="space-between">
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" :height="280">
      <el-card shadow="hover" class="mb-20px">
        <template #header> 任务进度 </template>
        <el-skeleton :loading="loading" animated>
          <Echart :options="pieOptionsData" :height="338" />
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
      <el-card shadow="hover">
        <template #header> 执法整改 </template>
        <el-skeleton :loading="loading" animated>
          <Echart :options="barOptionsData" :height="338" />
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
      <el-card shadow="hover">
        <template #header>
          <section class="flex justify-between">
            <span>任务执法</span>
            <span class="color-#A8ABB2 font-normal"> 近6个月走势 </span>
          </section>
        </template>
        <el-skeleton :loading="loading" animated>
          <Echart :options="lineOptionsData" :height="338" />
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20" justify="space-between">
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-20px">
      <el-card ref="taskNewCard" shadow="never">
        <template #header> 最新任务 </template>
        <el-skeleton :loading="loading" animated>
          <section class="p-24px flex flex-col gap-24px block">
            <div
              v-for="(item, index) in tasks"
              :key="`dynamics-${index}`"
              class="text-15px flex justify-between"
            >
              <span class="color-#303133">{{ item.title }}</span>
              <span class="color-#606266">{{ item.user }}</span>
              <span class="color-#909399">{{ item.date }}</span>
            </div>
          </section>
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
      <el-card shadow="never">
        <template #header> 整改排名 </template>
        <el-skeleton :loading="loading" animated>
          <section class="p-24px flex flex-col gap-24px block">
            <div
              v-for="(item, index) in notice1"
              :key="`dynamics-${index}`"
              class="text-15px flex justify-between"
            >
              <span class="color-#303133">{{ item.name }}</span>
              <span class="color-#909399">{{ item.count }}次</span>
            </div>
          </section>
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
      <el-card shadow="never">
        <template #header> 资质临期 </template>
        <el-skeleton :loading="loading" animated>
          <section class="p-24px flex flex-col gap-24px block">
            <div
              v-for="(item, index) in notice2"
              :key="`dynamics-${index}`"
              class="text-15px flex justify-between"
            >
              <span class="color-#303133">{{ item.name }}</span>
              <span class="color-#909399">{{ item.count }}天</span>
            </div>
          </section>
        </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'
import { HomeApi } from '@/api/home'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'

defineOptions({ name: 'Home' })

const loading = ref(true)
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption

const queryParams = reactive({
  selectWeek: '',
  region: ''
})

const area = ref<any[]>([])

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

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 notice1 = ref<any[]>([])

const notice2 = ref<any[]>([])

// 完成率
const getPieData = async () => {
  const res = await HomeApi.getPieData(queryParams)
  const data = res.completionRate
    .sort((a, b) => b.value - a.value)
    .map((item: any, index: number) => {
      return {
        value: item.pieValue,
        name: item.name,
        itemStyle: {
          color: getGradientColor(index, res.completionRate.length)
        }
      }
    })

  if (res.taskCompletionRate != 100) {
    data.push({
      name: '',
      value: 100 - Number(res.taskCompletionRate),
      itemStyle: {
        color: '#fff'
      },
      label: {
        show: false
      },
      labelLine: {
        show: false
      }
    })
  }
  set(pieOptions, 'title.text', `${res.taskCompletionRate}%`)
  set(pieOptions, 'series.data', data)
}

// 近6个月执法走势
const getS3Data = async () => {
  const res = await HomeApi.getTaskNumDoing()
  let data1 = [] as any
  let data2 = [] as any
  res.forEach((item: any) => {
    data1.push({ name: item.month, value: item.taskCount })
    data2.push({ name: item.month, value: item.inspectionCount })
  })
  set(lineOptions, 'series[0].data', data1)
  set(lineOptions, 'series[1].data', data2)
	set(lineOptions, 'xAxis.data', res.map(i=>i.month))
}

// 整改排名、资质临期
const getS5S6 = async () => {
  notice2.value = await HomeApi.getListData({ ...queryParams, type: 1, size: 8 })
  notice1.value = await HomeApi.getListData({ ...queryParams, type: 2, size: 8 })
}

const getArea = async () => {
  area.value = await HomeApi.getArea()
  queryParams.region = area.value[0].value
}

const init = async () => {
  await getArea()
  await getData()
}

const getData = async () => {
  await Promise.all([getPieData(), getS3Data(), getS5S6()])
  loading.value = false
}

// 饼图颜色
const getGradientColor = (index, total) => {
  let opacity = 1 - index / total + 0.1
  if (index == 0) opacity = 1
  return `rgba(64, 158, 255, ${opacity > 1 ? 1 : opacity})`
}

init()
</script>

<style scoped lang="scss">
::v-deep(.el-card__header) {
  padding: 16px;
  color: #303133;
  font-size: 14px;
  line-height: 24px;
  font-weight: bold;
}
::v-deep(.el-card__body) {
  padding: 0;
}

.block {
  height: 376px;
}
.queryForm {
  display: flex;
  flex-flow: row nowrap;
  .el-form-item--default {
    margin-bottom: 20px;
  }
  .el-form-item {
    width: 400px;
    margin-right: 20px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
}
::v-deep(.el-button + .el-button) {
  margin-left: 0 !important;
}
</style>