<template>
|
<el-card>
|
<template #header>
|
<div class="card-header">
|
<span>执法情况汇总</span>
|
</div>
|
</template>
|
<div>
|
<div class="border"> <!-- 执法单位执法次数月度分布 -->
|
<div class="flex-box">
|
<div>执法单位执法次数月度分布</div>
|
<el-form>
|
<el-form-item label="执法单位">
|
<el-select style="width: 200px" v-model="echarts1Ruery.deptId">
|
<el-option v-for="(item, index) in deptList" :key="index" :label="item.deptName"
|
:value="item.deptId"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div id="echarts1" ref="echarts1"></div>
|
</div>
|
<div class="border">
|
<div class="flex-box" >
|
<div>执法单位执法次数统计</div>
|
<el-form>
|
<el-form-item label="月份">
|
<el-date-picker v-model="mounth.month" type="monthrange" range-separator="至" start-placeholder="开始月份"
|
end-placeholder="结束月份" />
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 执法单位执法次数月度分布 -->
|
<div id="echarts2" ref="echarts2"></div>
|
</div>
|
<div class="border">
|
<div class="flex-box" >
|
<div>企业被执法次数月度分布</div>
|
<!-- <el-form>
|
<el-form-item label="企业">
|
<el-select style="width: 200px;" filterable v-model="queryParams.deptId">
|
<el-option v-for="(item, index) in listCompanyData" :key="index" :label="item.companyName"
|
:value="item.companyId"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form> -->
|
</div>
|
<!-- 执法单位执法次数月度分布 -->
|
<div id="echarts3" ref="echarts3"></div>
|
</div>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<div class="border">
|
<div class="flex-box" >
|
<div>执法类型占比</div>
|
<el-form>
|
<el-form-item label="月份">
|
<el-date-picker v-model="typeArg.month" type="monthrange" range-separator="至" start-placeholder="开始月份"
|
end-placeholder="结束月份" />
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 执法单位执法次数月度分布 -->
|
<div id="echarts4" ref="echarts4"></div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="border">
|
<div class="flex-box">
|
<div>企业投诉处理情况占比</div>
|
<el-form>
|
<el-form-item label="月份">
|
<el-date-picker v-model="typeArg1.month" type="monthrange" range-separator="至"
|
start-placeholder="开始月份" end-placeholder="结束月份" />
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 执法单位执法次数月度分布 -->
|
<div id="echarts5" ref="echarts5"></div>
|
</div>
|
</el-col>
|
</el-row>
|
<!-- 投诉问题类型处理情况 -->
|
|
<div class="border">
|
<div>投诉问题类型处理情况</div>
|
<div id="echarts6" ref="echarts6"></div>
|
</div>
|
</div>
|
</el-card>
|
</template>
|
|
<script lang="ts" setup>
|
import * as echarts from 'echarts'
|
import { listDept } from '@/api/system/dept'
|
import { parseTime } from "@/utils/ruoyi";
|
import { getMonthCount, getDeptCount, listCompany, getCompanyCount, getComplaintTypeCount, getComplaintStatusCount, getEnforceTypeCount } from '@/api/system/company/company'
|
import { ElMessage } from 'element-plus';
|
const deptList = ref([])
|
const echarts1 = ref()
|
const echarts1Ruery = reactive({
|
deptId: ''
|
})
|
watch(() => echarts1Ruery.deptId, () => {
|
getMonthCountHttp()
|
})
|
function getData() {
|
// 查询执法单位
|
listDept({ parentId: 100 }).then((val) => {
|
deptList.value = val.data
|
echarts1Ruery.deptId = deptList.value[2].deptId
|
})
|
}
|
function getMonthCountHttp() {
|
getMonthCount(echarts1Ruery).then((val) => {
|
const label: any[] = []
|
const value: any[] = []
|
val.data.map((item: { k: any; v: any }) => {
|
label.push(item.k)
|
value.push(item.v)
|
})
|
const setOptions = echarts.init(echarts1.value, 'macarons')
|
setOptions.setOption({
|
tooltip: {
|
trigger: 'axis',
|
formatter: param => {
|
let result = '';
|
param.forEach(function (item) {
|
// item 是每一个系列的数据
|
const seriesName = item.seriesName; // 系列名称
|
const value = item.value; // 数据值
|
const marker = item.marker; // 标志图形
|
result += `${item.axisValue}月<br/>执法次数: ${value}<br/>`;
|
});
|
return result
|
}
|
},
|
grid: { //方法 2
|
x: 25,
|
y: 45,
|
x2: 0,
|
y2: 0,
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: label
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: value,
|
type: 'bar',
|
barWidth: 50
|
}
|
]
|
})
|
})
|
}
|
getData()
|
|
// 执法单位执法次数统计
|
const echarts2 = ref()
|
const mounth = reactive({
|
month: ["2025-06", "2025-06"],
|
beginTime: "2025-06",
|
endTime: "2025-06"
|
})
|
mounth.beginTime = parseTime(new Date().setDate(1), '{y}-{m}-{d}')
|
mounth.endTime = parseTime(new Date(), '{y}-{m}-{d}')
|
mounth.month = [mounth.beginTime, mounth.endTime]
|
watch(() => mounth.month, (e) => {
|
let year = new Date(e[1]).getFullYear()//查询本月天数
|
let month = new Date(e[1]).getMonth()//查询本月天数
|
const lastDay = new Date(year, month, 0).getDate();
|
mounth.beginTime = parseTime(new Date(e[0]))
|
mounth.endTime = parseTime(new Date(e[1]).setDate(lastDay))
|
getDeptCountHttp()
|
})
|
function getDeptCountHttp() {
|
getDeptCount(mounth).then(val => {
|
const label: any[] = []
|
const value: any[] = []
|
val.data.map((item: { k: any; v: any }) => {
|
label.push(item.k)
|
value.push(item.v)
|
})
|
const setOptions = echarts.init(echarts2.value, 'macarons')
|
setOptions.setOption({
|
tooltip: {
|
trigger: 'axis',
|
formatter: param => {
|
let result = '';
|
param.forEach(function (item) {
|
// item 是每一个系列的数据
|
const seriesName = item.seriesName; // 系列名称
|
const value = item.value; // 数据值
|
const marker = item.marker; // 标志图形
|
result += `${item.axisValue}月<br/>执法次数: ${value}<br/>`;
|
});
|
return result
|
}
|
},
|
grid: { //方法 2
|
x: 25,
|
y: 45,
|
x2: 0,
|
y2: 0,
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: label
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: value,
|
type: 'bar',
|
barWidth: 50
|
}
|
]
|
})
|
})
|
}
|
getDeptCountHttp()
|
|
// 企业企业被执法次数月度分布
|
const listCompanyData = ref([])
|
const echarts3 = ref()
|
const queryParams = reactive({
|
deptId: ''
|
})
|
function listCompanyHttp() {
|
listCompany({ pageNum: 1, pageSize: 100 }).then(val => {
|
listCompanyData.value = val.rows
|
queryParams.companyId = val.rows[0].companyId
|
getCompanyCountHttp()
|
})
|
}
|
function getCompanyCountHttp() {
|
getCompanyCount(queryParams).then(val => {
|
console.log(val.data)
|
const endData = val.data.slice(0,10)
|
const label: any[] = []
|
const value: any[] = []
|
endData.map((item: { k: any; v: any }) => {
|
label.push(item.k)
|
value.push(item.v)
|
})
|
const setOptions = echarts.init(echarts3.value, 'macarons')
|
setOptions.setOption({
|
tooltip: {
|
trigger: 'axis',
|
formatter: param => {
|
let result = '';
|
param.forEach(function (item) {
|
// item 是每一个系列的数据
|
const seriesName = item.seriesName; // 系列名称
|
const value = item.value; // 数据值
|
const marker = item.marker; // 标志图形
|
result += `${item.axisValue}月<br/>执法次数: ${value}<br/>`;
|
});
|
return result
|
}
|
},
|
grid: { //方法 2
|
x: 25,
|
y: 45,
|
x2: 0,
|
y2: 0,
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: label
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: value,
|
type: 'bar',
|
barWidth: 50
|
}
|
]
|
})
|
})
|
}
|
listCompanyHttp()
|
|
// 执法类型占比
|
const echarts4 = ref()
|
const typeArg = reactive({
|
month: ["2025-06", "2025-06"],
|
beginTime: "2025-06",
|
endTime: "2025-06"
|
})
|
typeArg.beginTime = parseTime(new Date().setDate(1), '{y}-{m}-{d}')
|
console.log(typeArg.beginTime)
|
typeArg.endTime = parseTime(new Date(), '{y}-{m}-{d}')
|
typeArg.month = [typeArg.beginTime, typeArg.endTime]
|
function getComplaintTypeCountHttp() {
|
getEnforceTypeCount(typeArg).then(val => {
|
// console.log(val)
|
const label: any[] = []
|
const value: any[] = []
|
const data = val.data.map((item: { k: any; v: any }) => {
|
return {
|
name: item.k,
|
value: item.v
|
}
|
})
|
const setOptions = echarts.init(echarts4.value, 'macarons')
|
setOptions.setOption({
|
legend: {
|
top: 'bottom'
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{b} : {c} ({d}%)'
|
},
|
toolbox: {
|
show: false,
|
feature: {
|
mark: { show: true },
|
dataView: { show: true, readOnly: false },
|
restore: { show: true },
|
saveAsImage: { show: true }
|
}
|
},
|
series: [
|
{
|
name: 'Nightingale Chart',
|
type: 'pie',
|
radius: [50, 180],
|
center: ['50%', '50%'],
|
roseType: 'area',
|
itemStyle: {
|
borderRadius: 8
|
},
|
data: data
|
}
|
]
|
})
|
})
|
}
|
getComplaintTypeCountHttp()
|
// 企业投诉处理情况占比
|
const echarts5 = ref()
|
const typeArg1 = reactive({
|
month: ["2025-06", "2025-06"],
|
beginTime: "2025-06",
|
endTime: "2025-06"
|
})
|
typeArg1.beginTime = parseTime(new Date().setDate(1), '{y}-{m}-{d}')
|
console.log(typeArg1.beginTime)
|
typeArg1.endTime = parseTime(new Date(), '{y}-{m}-{d}')
|
typeArg1.month = [typeArg1.beginTime, typeArg1.endTime]
|
function getComplaintStatusCountHttp() {
|
getComplaintStatusCount(typeArg1).then(val => {
|
let mapState = {
|
0: '带响应',
|
1: '处理中',
|
'-1': '驳回',
|
2: '办结'
|
}
|
const data = val.data.map((item: { k: any; v: any }) => {
|
return {
|
name: mapState[item.k],
|
value: item.v
|
}
|
})
|
// 0未处理，1已处理 -1 处理中
|
const setOptions = echarts.init(echarts5.value, 'macarons')
|
setOptions.setOption({
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
top: '5%',
|
left: 'center'
|
},
|
series: [
|
{
|
name: 'Access From',
|
type: 'pie',
|
radius: ['40%', '70%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: '#fff',
|
borderWidth: 2
|
},
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: 40,
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: data
|
}
|
]
|
})
|
})
|
}
|
getComplaintStatusCountHttp()
|
// 投诉类型处理情况
|
const echarts6 = ref()
|
async function getComplaintTypeCountHttpGet() {
|
try{
|
const noneHnalder = await getComplaintTypeCount({doComplaint: 0})
|
const handler = await getComplaintTypeCount({doComplaint: 1})
|
const value1: any[] = []
|
const value: any[] = []
|
const label: any[] = []
|
noneHnalder.data.map((item: { k: any; v: any }) => {
|
value.push({
|
value: item.v
|
})
|
label.push(item.k)
|
})
|
handler.data.map(item => {
|
value1.push({
|
value: item.v
|
})
|
})
|
const setOptions = echarts.init(echarts6.value, 'macarons')
|
setOptions.setOption({
|
xAxis: {
|
type: 'category',
|
data: label
|
},
|
yAxis: {
|
type: 'value'
|
},
|
legend: {
|
show: true
|
},
|
grid: { //方法 2
|
x: 25,
|
y: 45,
|
x2: 0,
|
y2: 0,
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{b} : {c}'
|
},
|
series: [{
|
type: 'bar',
|
stack: 'a',
|
name: '未处理',
|
data: value,
|
barWidth: 50
|
}, {
|
type: 'bar',
|
stack: 'a',
|
name: '已处理',
|
data: value1,
|
barWidth: 50
|
}]
|
})
|
|
handler
|
} catch(err) {
|
ElMessage.error(err.message || '请求出错')
|
}
|
|
}
|
getComplaintTypeCountHttpGet()
|
</script>
|
|
<style>
|
.card-header {
|
font-size: 20px;
|
font-weight: 600;
|
}
|
|
.flex-box {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
margin-top: 10px;
|
}
|
|
#echarts1,
|
#echarts2,
|
#echarts3,
|
#echarts4,
|
#echarts5,#echarts6 {
|
height: 420px;
|
}
|
|
.border {
|
border: 1px solid #eee;
|
padding: 10px;
|
border-radius: 10px;
|
margin-bottom: 10px
|
}
|
</style>
|
