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="请选择区域"
            @change="getData"
          >
            <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
            @select="getData"
            @change="getData"
          >
            <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 items-center mb-20px">
      <el-button type="primary" plain @click="getData">
        <Icon icon="ep:search" />
        查询
      </el-button>
      <el-button @click="reset">
        <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 gap-40px flex-nowrap"
            >
              <div class="color-#303133 flex-1 whitespace-nowrap text-ellipsis overflow-hidden">
                {{ item.title }}
              </div>
              <div class="color-#606266 w80px text-right">{{ item.deptName }}</div>
              <div class="color-#909399 w140px text-right">
                {{ formatDate(item.startDate, 'YYYY年M月D日') }}
              </div>
            </div>
            <el-empty v-if="tasks.length == 0" />
          </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 gap-40px flex-nowrap"
            >
              <div class="color-#303133 flex-1 whitespace-nowrap text-ellipsis overflow-hidden">
                {{ item.name }}
              </div>
              <div class="color-#606266 w80px text-right">{{ item.deptName }}</div>
              <div class="color-#909399 w140px text-right">{{ item.count }}次</div>
            </div>
            <el-empty v-if="notice1.length == 0" />
          </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 gap-40px flex-nowrap"
            >
              <div class="color-#303133 flex-1 whitespace-nowrap text-ellipsis overflow-hidden">
                {{ item.name }}
              </div>
              <div class="color-#606266 w80px text-right">{{ item.realName }}</div>
              <div class="color-#909399 w140px text-right">{{ item.count }}次</div>
            </div>
            <el-empty v-if="notice2.length == 0" />
          </section>
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { HomeApi } from '@/api/home'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
defineOptions({ name: 'Home' })

const loading = ref(true)
const pieOptionsData = ref({
  title: {
    text: '90%',
    subtext: '完成率',
    left: 'center',
    top: 'center',
    itemGap: 0,
    textStyle: {
      fontSize: 40,
      lineHeight: 40,
      padding: [0, 0, 0, 0],
      fontWeight: 'bold'
    },
    subtextStyle: {
      color: '#909399',
      fontSize: 18,
      lineHeight: 18,
      padding: [0, 0, 0, 0]
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  series: {
    name: '任务进度',
    type: 'pie',
    radius: ['55%', '80%'],
    center: ['50%', '50%'],
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 2
    },
    label: {
      formatter: (v) => {
        if (v.name) {
          return `{row|${v.name}} {v|${v.percent}%}  \n{hr|}`
        }
        return ''
      },
      fontSize: 13,
      padding: [0, 0, 15, 0],
      distanceToLabelLine: 0,
      rich: {
        row: {
          padding: [0, 0, 4, 5]
        },
        v: {
          color: '#409EFF',
          padding: [0, 0, 4, 0]
        },
        hr: {
          backgroundColor: '#409EFF',
          width: '100%',
          height: 1
        }
      }
    },
    labelLine: {
      length2: 0,
      lineStyle: {
        color: '#409EFF'
      }
    },
    roseType: 'radius',
    data: [
      { value: 335, name: '执法一队' },
      { value: 310, name: '执法二队' },
      { value: 234, name: '执法三队' },
      { value: 135, name: '执法四队' },
      { value: 1548, name: '执法五队' }
    ]
  }
})
const barOptionsData = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: 42,
    left: 16,
    right: 16,
    bottom: 16,
    containLabel: true
  },
  legend: {
    show: true,
    top: 16,
    left: 'center',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      color: '#333'
    }
  },
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#E5E7EB'
      }
    },
    data: [],
    axisLabel: {
      show: true,
      color: '#333'
    }
  },
  yAxis: {
    type: 'value',
    max: (v) => {
      return Math.floor(v.max * 1.2 + 1)
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#E5E7EB'
      }
    }
  },
  series: [
    {
      name: '执法记录',
      type: 'bar',
      barWidth: 20,
      stack: '执法记录',
      barGap: '30%',
      itemStyle: {
        color: 'rgba(64, 158, 255, .6)'
      },
      data: [70, 35, 70, 60, 20]
    },
    {
      name: '整改次数',
      type: 'bar',
      stack: '整改次数',
      barWidth: 20,
      itemStyle: {
        color: 'rgba(103, 194, 58, .6)'
      },
      data: [90, 45, 80, 50, 70]
    },
    {
      name: '执法记录',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolPosition: 'end',
      symbolSize: [20, 5],
      symbolOffset: [-13, -1],
      barWidth: 20,
      barGap: '-100% ',
      itemStyle: {
        color: 'rgba(64, 158, 255, 1)'
      },
      tooltip: {
        show: false
      },
      data: []
    },
    {
      name: '整改次数',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolPosition: 'end',
      symbolSize: [20, 5],
      symbolOffset: [13, -1],
      barWidth: 20,
      itemStyle: {
        color: 'rgba(103, 194, 58, 1)'
      },
      tooltip: {
        show: false
      },
      data: []
    }
  ]
})
const lineOptionsData = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: 42,
    left: 16,
    right: 16,
    bottom: 16,
    containLabel: true
  },
  legend: {
    show: true,
    top: 16,
    left: 'center',
    textStyle: {
      color: '#333'
    }
  },
  xAxis: {
    type: 'category',
    data: [],
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#E5E7EB'
      }
    },
    axisLabel: {
      show: false,
      color: '#333'
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    max: (v) => {
      return Math.floor(v.max * 1.2 + 1)
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#E5E7EB'
      }
    }
  },
  series: [
    {
      name: '任务数量',
      data: [13253, 34235, 26321, 12340, 24643],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: 'rgba(64, 158, 255, 1)'
      },
      lineStyle: {
        color: 'rgba(64, 158, 255, 1)'
      },
      areaStyle: {
        color: 'rgba(64, 158, 255, .3)'
      }
    },
    {
      name: '执法数量',
      data: [15678, 28943, 31452, 19876, 22345],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: 'rgba(103, 194, 58, 1)'
      },
      lineStyle: {
        color: 'rgba(103, 194, 58, 1)'
      },
      areaStyle: {
        color: 'rgba(103, 194, 58, .3)'
      }
    }
  ]
})

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

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

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

const tasks = ref<any>([])

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

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

//查询
const reset = () => {
  queryParams.selectWeek = ''
  queryParams.region = area.value[0].value
  getData()
}
// 完成率
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)
        },
        label: {
          show: item.pieValue > 0
        },
        labelLine: {
          show: item.pieValue > 0
        }
      }
    })

  if (res.taskCompletionRate != 100) {
    data.push({
      name: '',
      value: 100 - Number(res.taskCompletionRate),
      itemStyle: {
        color: '#fff'
      },
      label: {
        show: false
      },
      labelLine: {
        show: false
      }
    })
  }

  pieOptionsData.value.title.text = `${res.taskCompletionRate}%`
  pieOptionsData.value.series.data = data
}

// 近6个月执法走势
const getS3Data = async () => {
  const res = await HomeApi.getTaskNumDoing(queryParams)
  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 })
  })
  lineOptionsData.value.series[0].data = data1
  lineOptionsData.value.series[1].data = data2
  lineOptionsData.value.xAxis.data = res.map((i) => i.month)
}

// 执法整改
const getS2Data = async () => {
  const res = await HomeApi.getExecCorrection(queryParams)
  const data1 = res.map((i) => {
    return {
      name: i.realName,
      value: i.inspectionCount
    }
  })
  const data2 = res.map((i) => {
    return {
      name: i.realName,
      value: i.correctionCount
    }
  })
  const axis = res.map((i) => i.realName)
  barOptionsData.value.series[0].data = data1
  barOptionsData.value.series[1].data = data2
  barOptionsData.value.xAxis.data = axis
  barOptionsData.value.series[2].data = data1
  barOptionsData.value.series[3].data = data2
}

// 获取最新任务
const getS4Data = async () => {
  const res = await HomeApi.getNewTask({ ...queryParams, pageSize: 8, pageNo: 1 })
  tasks.value = res.list
}

// 整改排名、资质临期
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(), getS2Data(), getS3Data(), getS4Data(), 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>