You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
331 lines
8.8 KiB
331 lines
8.8 KiB
<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>
|
|
|