|
|
@ -13,8 +13,8 @@ |
|
|
<div class="warp_body"> |
|
|
<div class="warp_body"> |
|
|
<div class="countbox"> |
|
|
<div class="countbox"> |
|
|
<span class="count-tit">本月执法</span> |
|
|
<span class="count-tit">本月执法</span> |
|
|
<span class="count-tot"><b>356</b>件</span> |
|
|
<span class="count-tot"><b>{{ data.allTotal }}</b>件</span> |
|
|
<span class="count-com"><i>投诉：</i><b>24</b>件</span> |
|
|
<span class="count-com"><i>投诉：</i><b>{{ data.complaintCount }}</b>件</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="analybox"> |
|
|
<div class="analybox"> |
|
|
@ -24,15 +24,15 @@ |
|
|
</div> |
|
|
</div> |
|
|
<div class="analybox"> |
|
|
<div class="analybox"> |
|
|
<div class="title">执法人员</div> |
|
|
<div class="title">执法人员</div> |
|
|
|
|
|
<div id="echartLineUser" class="chartbox"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="analybox"> |
|
|
<div class="analybox"> |
|
|
<div class="title">案件数量</div> |
|
|
<div class="title">案件数量</div> |
|
|
|
|
|
<div id="echarCount" class="chartbox"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="analybox"> |
|
|
<div class="analybox"> |
|
|
<div class="title">企业类型</div> |
|
|
<div class="title">企业类型</div> |
|
|
|
|
|
<div id="echartLineCompany" class="chartbox"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
@ -43,6 +43,7 @@ |
|
|
<script setup name="addressEdit"> |
|
|
<script setup name="addressEdit"> |
|
|
|
|
|
|
|
|
import util from "@/util/area"; |
|
|
import util from "@/util/area"; |
|
|
|
|
|
import {queryStatisticalData} from '@/api/enforce'; |
|
|
import * as echarts from 'echarts'; |
|
|
import * as echarts from 'echarts'; |
|
|
const { useMy } = $globalStore |
|
|
const { useMy } = $globalStore |
|
|
|
|
|
|
|
|
@ -54,6 +55,8 @@ const data = reactive({ |
|
|
areaList: util.areaList, |
|
|
areaList: util.areaList, |
|
|
addressInfo: {}, |
|
|
addressInfo: {}, |
|
|
areaColumns: ["请选择", "请选择", "请选择"], |
|
|
areaColumns: ["请选择", "请选择", "请选择"], |
|
|
|
|
|
allTotal: 0, |
|
|
|
|
|
complaintCount: 0 |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
// 返回 |
|
|
// 返回 |
|
|
@ -74,21 +77,8 @@ const onDelete = () => { |
|
|
// 修改详细地址 |
|
|
// 修改详细地址 |
|
|
const onChangeDetail = () => {}; |
|
|
const onChangeDetail = () => {}; |
|
|
|
|
|
|
|
|
// 获取编辑地址数据 |
|
|
const echartInit = (data,targetId) =>{ |
|
|
const getEditdata = async (addressId) => { |
|
|
var myChart = echarts.init(document.getElementById(targetId)); |
|
|
const res = await useMy.getAddressedit({ addressId: addressId }); |
|
|
|
|
|
if (res.code === 20000) { |
|
|
|
|
|
data.addressInfo = res?.data; |
|
|
|
|
|
data.areaColumns = [res?.data?.province, res?.data?.city, res?.data?.area]; |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
watchEffect(() => { |
|
|
|
|
|
if (route?.query?.addressId) { |
|
|
|
|
|
queryaddressId = route?.query?.addressId; |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
const echartInit = () =>{ |
|
|
|
|
|
var myChart = echarts.init(document.getElementById('echartRing')); |
|
|
|
|
|
// 指定图表的配置项和数据 |
|
|
// 指定图表的配置项和数据 |
|
|
let option = { |
|
|
let option = { |
|
|
tooltip: { |
|
|
tooltip: { |
|
|
@ -112,13 +102,7 @@ const echartInit = () =>{ |
|
|
fontWeight: 'bold' |
|
|
fontWeight: 'bold' |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
data: [ |
|
|
data: data, |
|
|
{ value: 1048, name: '生态环境检查' }, |
|
|
|
|
|
{ value: 735, name: '卫生健康检查' }, |
|
|
|
|
|
{ value: 580, name: '商务领域检查' }, |
|
|
|
|
|
{ value: 484, name: '财务领域检查' }, |
|
|
|
|
|
{ value: 300, name: '水务领域检查' } |
|
|
|
|
|
], |
|
|
|
|
|
color: ['#0038bb','#0047eb','#1c60ff','#3f78ff','#6592ff','#8aadff'], |
|
|
color: ['#0038bb','#0047eb','#1c60ff','#3f78ff','#6592ff','#8aadff'], |
|
|
} |
|
|
} |
|
|
] |
|
|
] |
|
|
@ -127,9 +111,9 @@ const echartInit = () =>{ |
|
|
myChart.setOption(option); |
|
|
myChart.setOption(option); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const initSchedule = (dataAll) =>{ |
|
|
const initSchedule = (dataAll,targetId) =>{ |
|
|
let _this = this; |
|
|
let _this = this; |
|
|
var myChartLine = echarts.init(document.getElementById('echartLine')); |
|
|
var myChartLine = echarts.init(document.getElementById(targetId)); |
|
|
let myColor = ['#3C83FF'] |
|
|
let myColor = ['#3C83FF'] |
|
|
var option = { |
|
|
var option = { |
|
|
grid: { // 直角坐标系内绘图网格 |
|
|
grid: { // 直角坐标系内绘图网格 |
|
|
@ -306,10 +290,12 @@ const initSchedule = (dataAll) =>{ |
|
|
myChartLine.setOption(option, true); |
|
|
myChartLine.setOption(option, true); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const initData = () => { |
|
|
const initData = (dataX,dataY,dataPercent,targetId) => { |
|
|
var dataX = ['生态环境检查', '卫生健康检查', '商务领域检查', '财务领域检查', '水务领域检查'] |
|
|
|
|
|
var dataY = ['30', '20', '15', '25', '10']; |
|
|
|
|
|
var dataPercent = ['30', '20', '15', '25', '10']; |
|
|
// var dataX = ['生态环境检查', '卫生健康检查', '商务领域检查', '财务领域检查', '水务领域检查'] |
|
|
|
|
|
// var dataY = ['30', '20', '15', '25', '10']; |
|
|
|
|
|
// var dataPercent = ['30', '20', '15', '25', '10']; |
|
|
var dataSum = new Array(dataX.length).fill(100); |
|
|
var dataSum = new Array(dataX.length).fill(100); |
|
|
var data = { |
|
|
var data = { |
|
|
dataX: dataX, |
|
|
dataX: dataX, |
|
|
@ -317,19 +303,85 @@ const initData = () => { |
|
|
dataSum: dataSum, |
|
|
dataSum: dataSum, |
|
|
dataPercent: dataPercent, |
|
|
dataPercent: dataPercent, |
|
|
} |
|
|
} |
|
|
initSchedule(data); |
|
|
initSchedule(data,targetId); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
onMounted(() => { |
|
|
// route?.query?.addressId && getEditdata(route?.query?.addressId); |
|
|
|
|
|
nextTick(() => { |
|
|
queryStatisticalData(null,success =>{ |
|
|
echartInit(); |
|
|
var arrData = []; |
|
|
initData(); |
|
|
var arrCompanyData = []; |
|
|
// if (!route?.query?.addressId) { |
|
|
var countTotal= 0; |
|
|
// data.addressInfo = {}; |
|
|
var userTotal= 0; |
|
|
// } |
|
|
//执法类别参数 |
|
|
|
|
|
var dataX = []; |
|
|
|
|
|
var dataY = []; |
|
|
|
|
|
var dataPercent = []; |
|
|
|
|
|
//执法人员 |
|
|
|
|
|
var userDataX = []; |
|
|
|
|
|
var userDataY = []; |
|
|
|
|
|
var userDataPercent = []; |
|
|
|
|
|
|
|
|
|
|
|
//本月案件数量 |
|
|
|
|
|
var arrCountData = []; |
|
|
|
|
|
|
|
|
|
|
|
console.log(success.data.item) |
|
|
|
|
|
|
|
|
|
|
|
success.data.item.forEach(res =>{ |
|
|
|
|
|
countTotal += res.total; |
|
|
|
|
|
}) |
|
|
|
|
|
success.data.lawEnforcer.forEach(res =>{ |
|
|
|
|
|
userTotal += res.total; |
|
|
|
|
|
}) |
|
|
|
|
|
success.data.item.forEach(res =>{ |
|
|
|
|
|
console.log(res) |
|
|
|
|
|
arrData.push({ |
|
|
|
|
|
"name": res.lawEnforcementItem, |
|
|
|
|
|
"value": res.total |
|
|
|
|
|
}) |
|
|
|
|
|
dataX.push(res.lawEnforcementItem); |
|
|
|
|
|
dataY.push(res.total); |
|
|
|
|
|
dataPercent.push((res.total / countTotal * 100).toFixed(2)); |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
success.data.lawEnforcer.forEach(res =>{ |
|
|
|
|
|
console.log(res) |
|
|
|
|
|
userDataX.push(res.lawEnforcer); |
|
|
|
|
|
userDataY.push(res.total); |
|
|
|
|
|
userDataPercent.push((res.total / userTotal * 100).toFixed(2)); |
|
|
|
|
|
}) |
|
|
|
|
|
success.data.enterpriseType.forEach(res =>{ |
|
|
|
|
|
console.log(res) |
|
|
|
|
|
arrCompanyData.push({ |
|
|
|
|
|
"name": res.dictLabel, |
|
|
|
|
|
"value": res.total |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
data.allTotal = success.data.mouth.total; |
|
|
|
|
|
data.complaintCount = success.data.mouth.complaintCount; |
|
|
|
|
|
arrCountData.push({ |
|
|
|
|
|
"name": "本月执法数量", |
|
|
|
|
|
"value": data.allTotal |
|
|
|
|
|
}) |
|
|
|
|
|
arrCountData.push({ |
|
|
|
|
|
"name": "本月执法投诉数量", |
|
|
|
|
|
"value": data.complaintCount |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
nextTick(() => { |
|
|
|
|
|
echartInit(arrData,'echartRing'); |
|
|
|
|
|
//执法类别统计 |
|
|
|
|
|
initData(dataX,dataY,dataPercent,"echartLine"); |
|
|
|
|
|
//执法人员 |
|
|
|
|
|
initData(userDataX,userDataY,userDataPercent,"echartLineUser"); |
|
|
|
|
|
//企业类型统计 |
|
|
|
|
|
echartInit(arrCompanyData,'echartLineCompany'); |
|
|
|
|
|
//本月案件数量 |
|
|
|
|
|
echartInit(arrCountData,'echarCount'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
},error =>{}) |
|
|
|
|
|
|
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
|
chenrui
3 years ago