15 changed files with 691 additions and 583 deletions
@ -0,0 +1,57 @@
|
||||
import request from '@/config/axios' |
||||
|
||||
export const HomeApi = { |
||||
/** |
||||
* 获取区域 |
||||
*/ |
||||
getArea: () => { |
||||
return request.get({ |
||||
url: `/system/home/getUserArea` |
||||
}) |
||||
}, |
||||
/** |
||||
* 获取列表数据 |
||||
*/ |
||||
getListData: params => { |
||||
return request.get({ |
||||
url: '/system/home/appCount2', |
||||
params |
||||
}) |
||||
}, |
||||
/** |
||||
* 获取饼图相关的数据 |
||||
*/ |
||||
getPieData: (params) => { |
||||
return request.get({ |
||||
url: '/system/home/appCount1', |
||||
params |
||||
}) |
||||
}, |
||||
/** |
||||
* 近6个月任务走势 |
||||
*/ |
||||
getTaskNumDoing:params=>{ |
||||
return request.get({ |
||||
url: '/system/home/taskNumDoing', |
||||
params |
||||
}) |
||||
}, |
||||
/** |
||||
* 执法整改 |
||||
*/ |
||||
getExecCorrection:params=>{ |
||||
return request.get({ |
||||
url: '/system/home/execCorrectionCount', |
||||
params |
||||
}) |
||||
}, |
||||
/** |
||||
* 最新任务 |
||||
*/ |
||||
getNewTask:params=> { |
||||
return request.get({ |
||||
url: 'system/task-info/appPage', |
||||
params |
||||
}) |
||||
} |
||||
} |
||||
@ -1,366 +1,600 @@
|
||||
<template> |
||||
<el-row :gutter="8" justify="space-between"> |
||||
<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" |
||||
@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 |
||||
size="large" |
||||
@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"> |
||||
<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-8px"> |
||||
<template #header> |
||||
执法完成率 |
||||
</template> |
||||
<el-card shadow="hover" class="mb-20px"> |
||||
<template #header> 任务进度 </template> |
||||
<el-skeleton :loading="loading" animated> |
||||
<Echart :options="pieOptionsData" :height="280" /> |
||||
<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" class="mb-8px"> |
||||
<template #header> |
||||
执法与整改 |
||||
</template> |
||||
<el-card shadow="hover"> |
||||
<template #header> 执法整改 </template> |
||||
<el-skeleton :loading="loading" animated> |
||||
<Echart :options="barOptionsData" :height="280" /> |
||||
<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" class="mb-8px"> |
||||
<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="lineOptions" :height="280" /> |
||||
<Echart :options="lineOptionsData" :height="338" /> |
||||
</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-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> |
||||
<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> |
||||
|
||||
<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.deptName }}</span> |
||||
<span class="color-#909399">{{ formatDate(item.startDate, 'YYYY年M月D日') }}</span> |
||||
</div> |
||||
<el-divider height="10px" class="m-4 p-0" style="margin:8px 0" /> |
||||
</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" class="mb-8px"> |
||||
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24"> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
逾期排行 |
||||
</template> |
||||
<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> |
||||
<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> |
||||
<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" class="mb-8px"> |
||||
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24"> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
整改排行 |
||||
</template> |
||||
<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> |
||||
|
||||
<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> |
||||
<el-divider height="10px" class="m-4 p-0" style="margin:8px 0" /> |
||||
</template> |
||||
</div> |
||||
<el-empty v-if="notice2.length == 0" /> |
||||
</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' |
||||
import { formatDate } from '@/utils/formatTime' |
||||
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 |
||||
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] |
||||
} |
||||
}, |
||||
{ |
||||
title: '凌海四公司排污监测', |
||||
date: '2023-01-04', |
||||
user: '赵六', |
||||
status: 3 |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
||||
}, |
||||
{ |
||||
title: '黑山五公司设备巡检', |
||||
date: '2023-01-05', |
||||
user: '孙七', |
||||
status: 2 |
||||
series: { |
||||
name: '任务进度', |
||||
type: 'pie', |
||||
radius: ['60%', '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 '' |
||||
}, |
||||
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' |
||||
} |
||||
}, |
||||
{ |
||||
title: '义县六公司安全培训', |
||||
date: '2023-01-06', |
||||
user: '周八', |
||||
status: 1 |
||||
grid: { |
||||
top: 42, |
||||
left: 16, |
||||
right: 16, |
||||
bottom: 16, |
||||
containLabel: true |
||||
}, |
||||
{ |
||||
title: '大石桥七公司隐患排查', |
||||
date: '2023-01-07', |
||||
user: '吴九', |
||||
status: 3 |
||||
legend: { |
||||
show: true, |
||||
top: 16, |
||||
left: 'center', |
||||
itemWidth: 10, |
||||
itemHeight: 10, |
||||
textStyle: { |
||||
color: '#333' |
||||
} |
||||
}, |
||||
{ |
||||
title: '盘锦八公司应急演练', |
||||
date: '2023-01-08', |
||||
user: '郑十', |
||||
status: 2 |
||||
xAxis: { |
||||
type: 'category', |
||||
axisTick: { |
||||
show: false |
||||
}, |
||||
axisLine: { |
||||
show: false |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
type: 'dashed', |
||||
color: '#E5E7EB' |
||||
} |
||||
}, |
||||
data: [], |
||||
axisLabel: { |
||||
show: true, |
||||
color: '#333' |
||||
} |
||||
}, |
||||
{ |
||||
title: '营口九公司废水处理', |
||||
date: '2023-01-09', |
||||
user: '钱十一', |
||||
status: 1 |
||||
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' |
||||
} |
||||
} |
||||
}, |
||||
{ |
||||
title: '阜新十公司空气监测', |
||||
date: '2023-01-10', |
||||
user: '刘十二', |
||||
status: 2 |
||||
} |
||||
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: 'bar', |
||||
barWidth: 20, |
||||
stack: '执法记录', |
||||
barGap: '30%', |
||||
itemStyle: { |
||||
color: 'rgba(64, 158, 255, 1)' |
||||
}, |
||||
tooltip: { |
||||
show: false |
||||
}, |
||||
data: [1, 1, 1, 1, 1] |
||||
}, |
||||
{ |
||||
name: '整改次数', |
||||
type: 'bar', |
||||
stack: '整改次数', |
||||
barWidth: 20, |
||||
itemStyle: { |
||||
color: 'rgba(103, 194, 58, 1)' |
||||
}, |
||||
tooltip: { |
||||
show: false |
||||
}, |
||||
data: [1, 1, 1, 1, 1] |
||||
} |
||||
] |
||||
}) |
||||
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 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 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 |
||||
} |
||||
|
||||
// 用户来源 |
||||
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) => { |
||||
// 近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: t(v.name), |
||||
value: v.value |
||||
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) |
||||
const top = (res[0].inspectionCount % 10) / 10 |
||||
barOptionsData.value.series[0].data = data1 |
||||
barOptionsData.value.series[1].data = data2 |
||||
barOptionsData.value.xAxis.data = axis |
||||
barOptionsData.value.series[2].data = new Array(axis.length).fill(top || 0.1) |
||||
barOptionsData.value.series[3].data = new Array(axis.length).fill(top || 0.1) |
||||
} |
||||
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 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 getAllApi = async () => { |
||||
await Promise.all([ |
||||
getUserAccessSource(), |
||||
getWeeklyUserActivity() |
||||
]) |
||||
const init = async () => { |
||||
await getArea() |
||||
await getData() |
||||
} |
||||
|
||||
// 获取数据 |
||||
const getData = async () => { |
||||
await Promise.all([getPieData(), getS2Data(), getS3Data(), getS4Data(), getS5S6()]) |
||||
loading.value = false |
||||
} |
||||
|
||||
getAllApi() |
||||
// 饼图颜色 |
||||
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> |
||||
|
||||
@ -1,148 +0,0 @@
|
||||
import { EChartsOption } from 'echarts' |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
|
||||
export const pieOptions: EChartsOption = { |
||||
title: { |
||||
text: '完成率90%', |
||||
left: 'center', |
||||
top: '35%', |
||||
textStyle: { |
||||
fontSize: 16, |
||||
fontWeight: 'bold' |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
||||
}, |
||||
legend: { |
||||
orient: 'horizontal', |
||||
bottom: 10, |
||||
left: 'center', |
||||
|
||||
data: [ |
||||
'执法一队', |
||||
'执法二队', |
||||
'执法三队', |
||||
'执法四队', |
||||
'执法五队', |
||||
] |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: t('analysis.userAccessSource'), |
||||
type: 'pie', |
||||
radius: ['40%', '70%'], |
||||
center: ['50%', '40%'], |
||||
itemStyle: { |
||||
borderRadius: 10, |
||||
borderColor: '#fff', |
||||
borderWidth: 2 |
||||
}, |
||||
data: [ |
||||
{ value: 335, name: '执法一队' }, |
||||
{ value: 310, name: '执法二队' }, |
||||
{ value: 234, name:'执法三队' }, |
||||
{ value: 135, name: '执法四队' }, |
||||
{ value: 1548, name: '执法五队' } |
||||
] |
||||
} |
||||
] |
||||
} |
||||
|
||||
export const barOptions: EChartsOption = { |
||||
title: { |
||||
text: '月均执法任务数', |
||||
left: 'center' |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
type: 'shadow' |
||||
} |
||||
}, |
||||
grid: { |
||||
left: 50, |
||||
right: 20, |
||||
bottom: 20 |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: [ |
||||
'一月', |
||||
'二月', |
||||
'三月', |
||||
'四月', |
||||
'五月', |
||||
'六月', |
||||
|
||||
], |
||||
axisTick: { |
||||
alignWithLabel: true |
||||
} |
||||
}, |
||||
yAxis: { |
||||
type: 'value' |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: t('analysis.activeQuantity'), |
||||
data: [13253, 34235, 26321, 12340, 24643, 1322, 1324], |
||||
type: 'bar' |
||||
} |
||||
] |
||||
} |
||||
|
||||
export const lineOptions: EChartsOption = { |
||||
title: { |
||||
text: '月均执法任务数', |
||||
left: 'center' |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
type: 'shadow' |
||||
} |
||||
}, |
||||
grid: { |
||||
left: 50, |
||||
right: 20, |
||||
bottom: 20 |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: [ |
||||
'一月', |
||||
'二月', |
||||
'三月', |
||||
'四月', |
||||
'五月', |
||||
'六月', |
||||
|
||||
], |
||||
axisTick: { |
||||
alignWithLabel: true |
||||
} |
||||
}, |
||||
yAxis: { |
||||
type: 'value' |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '任务数', |
||||
data: [13253, 34235, 26321, 12340, 24643, 1322, 1324], |
||||
type: 'line' |
||||
}, |
||||
{ |
||||
name: '执法数', |
||||
data: [15678, 28943, 31452, 19876, 22345, 25678, 18234], |
||||
type: 'line' |
||||
} |
||||
|
||||
] |
||||
} |
||||
|
||||
|
||||
|
||||
@ -1,50 +0,0 @@
|
||||
export type WorkplaceTotal = { |
||||
project: number |
||||
access: number |
||||
todo: number |
||||
} |
||||
|
||||
export type Project = { |
||||
name: string |
||||
icon: string |
||||
message: string |
||||
personal: string |
||||
time: Date | number | string |
||||
} |
||||
|
||||
|
||||
|
||||
export type Shortcut = { |
||||
name: string |
||||
icon: string |
||||
url: string |
||||
} |
||||
|
||||
export type RadarData = { |
||||
personal: number |
||||
team: number |
||||
max: number |
||||
name: string |
||||
} |
||||
export type AnalysisTotalTypes = { |
||||
users: number |
||||
messages: number |
||||
moneys: number |
||||
shoppings: number |
||||
} |
||||
|
||||
export type UserAccessSource = { |
||||
value: number |
||||
name: string |
||||
} |
||||
|
||||
export type WeeklyUserActivity = { |
||||
value: number |
||||
name: string |
||||
} |
||||
|
||||
export type MonthlySales = { |
||||
name: string |
||||
estimate: number |
||||
actual: number |
||||
} |
||||
Loading…
Reference in new issue