3 changed files with 898 additions and 34 deletions
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,542 @@ |
|||
<template> |
|||
<div class="address_edit"> |
|||
<!-- 导航栏 --> |
|||
<!-- <div class="header_body"> |
|||
<header-nav |
|||
:slefBack="true" |
|||
@goBack="goBack" |
|||
:titelText="`统计分析`" |
|||
> |
|||
</header-nav> |
|||
</div> --> |
|||
<!-- 中间 --> |
|||
<div class="warp_body"> |
|||
<div class="countbox"> |
|||
<span class="count-tit">本月执法</span> |
|||
<span class="count-tot"><b>{{ data.allTotal }}</b>件</span> |
|||
<span class="count-com"><i>投诉：</i><b>{{ data.complaintCount }}</b>件</span> |
|||
</div> |
|||
|
|||
<div class="analybox"> |
|||
<div class="title">检查类别</div> |
|||
<div id="echartRing" class="chartbox"></div> |
|||
<div id="echartLine" class="chartbox"></div> |
|||
</div> |
|||
<div class="analybox"> |
|||
<div class="title">执法人员</div> |
|||
<div id="echartLineUser" class="chartbox" style="height: 10rem;"></div> |
|||
</div> |
|||
<div class="analybox"> |
|||
<div class="title">案件数量</div> |
|||
<div id="echarCount" class="chartbox"></div> |
|||
</div> |
|||
<div class="analybox"> |
|||
<div class="title">企业类型</div> |
|||
<div id="echartLineCompany" class="chartbox"></div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="addressEdit"> |
|||
|
|||
import {onBeforeUnmount} from 'vue'; |
|||
import util from "@/util/area"; |
|||
import {queryStatisticalData} from '@/api/enforce'; |
|||
import * as echarts from 'echarts'; |
|||
|
|||
const {useCommon, useShopCard} = $globalStore; |
|||
const router = useRouter(); |
|||
const route = useRoute(); |
|||
let queryaddressId = ref(""); |
|||
const data = reactive({ |
|||
searchResult: [], |
|||
areaList: util.areaList, |
|||
addressInfo: {}, |
|||
areaColumns: ["请选择", "请选择", "请选择"], |
|||
allTotal: 0, |
|||
complaintCount: 0 |
|||
}); |
|||
|
|||
// 返回 |
|||
const goBack = () => { |
|||
router.go(-1); |
|||
}; |
|||
|
|||
onBeforeUnmount(() => { |
|||
// 当前路由不是首页，且用户确认离开时 |
|||
router.replace('/enforceHome'); // 替换到首页 |
|||
}); |
|||
|
|||
onUnmounted(() => { |
|||
console.log("=============销毁完毕=============") |
|||
const chartEle = document.getElementById("echartRing"); |
|||
console.log(chartEle) |
|||
// chartEle.removeAttribute('_echarts_instance_') |
|||
}); |
|||
|
|||
// 保存地址操作 |
|||
const onSave = () => { |
|||
router.replace({name: "addressList"}); |
|||
}; |
|||
|
|||
// 删除地址操作 |
|||
const onDelete = () => { |
|||
router.replace({name: "addressList"}); |
|||
}; |
|||
|
|||
// 修改详细地址 |
|||
const onChangeDetail = () => { |
|||
}; |
|||
|
|||
const echartInit = (data, targetId) => { |
|||
var container = document.getElementById(targetId); |
|||
var myChart = echarts.getInstanceByDom(container); |
|||
if (myChart) { |
|||
myChart.dispose(); |
|||
} |
|||
myChart = echarts.init(document.getElementById(targetId)); |
|||
// 指定图表的配置项和数据 |
|||
let option = { |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '统计图表', |
|||
type: 'pie', |
|||
silent: true, // 设置所有的点击事件为静默模式 |
|||
radius: ['33%', '50%'], |
|||
avoidLabelOverlap: false, |
|||
itemStyle: { |
|||
borderRadius: 0, |
|||
borderColor: '#fff', |
|||
borderWidth: 1 |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: '14', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
position: 'outside', // 标签显示在外部 |
|||
formatter: '{b}\n{c} ({d}%)', // 标签格式化，b是数据名，c是数值，d是百分比 |
|||
textStyle: { |
|||
fontSize: 14, |
|||
rich: { |
|||
a: { |
|||
width: 100, |
|||
overflow: 'truncate', // 文字超出宽度时截断 |
|||
textOverflow: 'ellipsis', // 文字超出宽度时显示省略号 |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
// ... 其他配置项 |
|||
data: data, |
|||
color: ['#0038bb', '#0047eb', '#1c60ff', '#3f78ff', '#6592ff', '#8aadff'], |
|||
} |
|||
] |
|||
}; |
|||
// 使用刚指定的配置项和数据显示图表。 |
|||
myChart.setOption(option); |
|||
}; |
|||
|
|||
const initSchedule = (dataAll, targetId) => { |
|||
var container = document.getElementById(targetId); |
|||
var myChartLine = echarts.getInstanceByDom(container); |
|||
if (myChartLine) { |
|||
myChartLine.dispose(); |
|||
} |
|||
myChartLine = echarts.init(document.getElementById(targetId)); |
|||
let myColor = ['#3C83FF'] |
|||
var option = { |
|||
tooltip: { |
|||
trigger: 'item', |
|||
}, |
|||
grid: { // 直角坐标系内绘图网格 |
|||
top: '-5%', |
|||
bottom: '5%', |
|||
left: '25%', //grid 组件离容器左侧的距离, |
|||
//left的值可以是80这样具体像素值， |
|||
//也可以是'80%'这样相对于容器高度的百分比 |
|||
right: '25%', |
|||
//containLabel: true //gid区域是否包含坐标轴的刻度标签。为true的时候， |
|||
// left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的 |
|||
//所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景 |
|||
}, |
|||
xAxis: { //直角坐标系grid中的x轴, |
|||
//一般情况下单个grid组件最多只能放上下两个x轴, |
|||
//多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。 |
|||
type: 'value', //坐标轴类型,分别有： |
|||
//'value'-数值轴；'category'-类目轴; |
|||
//'time'-时间轴;'log'-对数轴 |
|||
splitLine: { |
|||
show: false |
|||
}, //坐标轴在 grid 区域中的分隔线 |
|||
axisLabel: { |
|||
show: false |
|||
}, //坐标轴刻度标签 |
|||
axisTick: { |
|||
show: false |
|||
}, //坐标轴刻度 |
|||
axisLine: { |
|||
show: false |
|||
}, //坐标轴轴线 |
|||
}, |
|||
yAxis: { |
|||
type: 'category', |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
axisLine: { |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
color: 'rgba(0,0,0,.7)', |
|||
fontSize: 14, |
|||
formatter: function (data) { |
|||
var traceValue; |
|||
for (var i = 0; i < dataAll.dataX.length; i++) { |
|||
if (data === dataAll.dataX[i]) { |
|||
traceValue = dataAll.dataY[i] |
|||
break |
|||
} |
|||
} |
|||
var arr = [ |
|||
'{a|' + data + '}', |
|||
'{b|' + traceValue + '}', |
|||
'{c|件}' |
|||
] |
|||
return arr.join('') |
|||
}, |
|||
formatter: function (params) { |
|||
var maxLength = 6; |
|||
//判断长度，超出使用...代替 |
|||
if (params && params.length > maxLength) { |
|||
return params.substring(0, maxLength - 1) + '.'; |
|||
} else { |
|||
return params; |
|||
} |
|||
}, |
|||
textStyle: { |
|||
rich: { |
|||
a: { |
|||
fontSize: 14, |
|||
//width: 100 |
|||
}, |
|||
b: { |
|||
fontSize: 14, |
|||
align: 'center', |
|||
color: '#3C83FF', |
|||
fontWeight: 600, |
|||
}, |
|||
c: { |
|||
padding: [0, 0, 0, 5], |
|||
fontSize: 14, |
|||
align: 'center', |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
data: dataAll.dataX //类目数据，在类目轴（type: 'category'）中有效。 |
|||
//如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。 |
|||
}, |
|||
series: [ //系列列表。每个系列通过 type 决定自己的图表类型 |
|||
{ |
|||
name: '', //系列名称 |
|||
type: 'bar', //柱状、条形图 |
|||
silent: true, // 设置所有柱子的点击事件为静默模式 |
|||
barWidth: 15, //柱条的宽度,默认自适应 |
|||
data: dataAll.dataPercent, //系列中数据内容数组 |
|||
label: { //图形上的文本标签 |
|||
show: true, |
|||
position: 'right', //标签的位置 |
|||
offset: [0, 40], //标签文字的偏移，此处表示向上偏移40 |
|||
//formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值 |
|||
formatter: function (data) { |
|||
//.toFixed(0)去掉小数位，如果为2就是保留两位小数 |
|||
//let b = data.percent.toFixed(0) + "%"; |
|||
//subText = b; |
|||
return ''; |
|||
}, |
|||
color: 'rgba(0,0,0,.7)', //标签字体颜色 |
|||
fontSize: 26 //标签字号 |
|||
}, |
|||
itemStyle: { //图形样式 |
|||
normal: { //normal 图形在默认状态下的样式; |
|||
//emphasis图形在高亮状态下的样式 |
|||
barBorderRadius: 10, //柱条圆角半径,单位px. |
|||
//此处统一设置4个角的圆角大小; |
|||
//也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下 |
|||
color: function (params) { |
|||
let num = myColor.length; //得到myColor颜色数组的长度 |
|||
return myColor[params.dataIndex % num]; //返回颜色数组中的一个对应的颜色值 |
|||
}, |
|||
} |
|||
}, |
|||
dataZoom: [ |
|||
{ |
|||
type: 'inside', // 设置为 inside 类型 |
|||
orient: 'vertical', // 设置为垂直滚动条 |
|||
start: 0, |
|||
end: 100, |
|||
left: "93%", |
|||
yAxisIndex: [0], |
|||
} |
|||
], |
|||
zlevel: 1 //柱状图所有图形的 zlevel 值, |
|||
//zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 |
|||
}, |
|||
{ |
|||
name: '', |
|||
type: 'bar', |
|||
silent: true, // 设置所有柱子的点击事件为静默模式 |
|||
label: { //图形上的文本标签 |
|||
show: true, |
|||
position: 'right', //标签的位置 |
|||
offset: [0, 0], //标签文字的偏移，此处表示向上偏移40 |
|||
//formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值 |
|||
formatter: function (data) { |
|||
//.toFixed(0)去掉小数位，如果为2就是保留两位小数 |
|||
var traceValue; |
|||
for (var i = 0; i < dataAll.dataX.length; i++) { |
|||
if (data.name === dataAll.dataX[i]) { |
|||
traceValue = dataAll.dataPercent[i] |
|||
break |
|||
} |
|||
} |
|||
var arr = [ |
|||
'{a|' + traceValue + '}', |
|||
'{b|%}' |
|||
] |
|||
return arr.join(''); |
|||
}, |
|||
textStyle: { |
|||
rich: { |
|||
a: { |
|||
fontSize: 14, |
|||
color: 'rgba(0,0,0,0.7)', |
|||
fontWeight: 560, |
|||
padding: [0, 0, 0, 15], |
|||
}, |
|||
b: { |
|||
fontSize: 14, |
|||
color: 'rgba(0,0,0,0.7)', |
|||
padding: [0, 0, 0, 3], |
|||
align: 'center', |
|||
}, |
|||
} |
|||
}, |
|||
}, |
|||
barGap: '-100%', //不同系列的柱间距离，为百分比。 |
|||
// 在同一坐标系上，此属性会被多个 'bar' 系列共享。 |
|||
// 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效， |
|||
//并且是对此坐标系中所有 'bar' 系列生效。 |
|||
barWidth: 15, |
|||
data: dataAll.dataSum, |
|||
|
|||
color: '#DEE0E3', //柱条颜色 |
|||
itemStyle: { |
|||
normal: { |
|||
barBorderRadius: 10 |
|||
} |
|||
} |
|||
}, |
|||
|
|||
] |
|||
}; |
|||
myChartLine.setOption(option, true); |
|||
}; |
|||
|
|||
const initData = (dataX, dataY, dataPercent, targetId) => { |
|||
|
|||
// 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 data = { |
|||
dataX: dataX, |
|||
dataY: dataY, |
|||
dataSum: dataSum, |
|||
dataPercent: dataPercent, |
|||
} |
|||
initSchedule(data, targetId); |
|||
}; |
|||
|
|||
|
|||
onMounted(() => { |
|||
|
|||
queryStatisticalData({ |
|||
"dataScopeId": useCommon.userId |
|||
}, success => { |
|||
var arrData = []; |
|||
var arrCompanyData = []; |
|||
var countTotal = 0; |
|||
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)); |
|||
}) |
|||
console.log(userDataPercent) |
|||
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> |
|||
|
|||
|
|||
<style lang="less" scoped> |
|||
.address_edit { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
background-color: #ebf3fb; |
|||
} |
|||
|
|||
.warp_body { |
|||
background-image: linear-gradient(to bottom, #ebf3fb, transparent); |
|||
margin-top: 0.15rem; |
|||
} |
|||
|
|||
.countbox, .analybox { |
|||
position: relative; |
|||
margin: 2% 3%; |
|||
padding: 2% 0 0; |
|||
width: 94%; |
|||
height: 3rem; |
|||
background: #fff url("../../assets/images/bg_count.jpg") no-repeat right; |
|||
background-size: auto 100%; |
|||
border-radius: 0.25rem; |
|||
} |
|||
|
|||
.countbox span { |
|||
display: block; |
|||
margin: 1.75% 4.5%; |
|||
color: #999; |
|||
font-size: 0.3rem; |
|||
line-height: 1.25; |
|||
} |
|||
|
|||
.countbox span.count-tit { |
|||
color: #666; |
|||
font-size: 0.40rem; |
|||
} |
|||
|
|||
.countbox span.count-tot { |
|||
font-size: 0.3rem; |
|||
|
|||
b { |
|||
margin-right: 0.15rem; |
|||
color: #085dff; |
|||
font-size: 0.85rem; |
|||
} |
|||
} |
|||
|
|||
.countbox span.count-com { |
|||
float: right; |
|||
margin-top: -0.1rem; |
|||
font-size: 0.3rem; |
|||
|
|||
i { |
|||
font-size: 0.4rem; |
|||
font-style: normal; |
|||
} |
|||
|
|||
b { |
|||
margin-right: 5px; |
|||
color: #f00; |
|||
font-size: 0.6rem; |
|||
} |
|||
} |
|||
|
|||
.analybox { |
|||
height: auto; |
|||
min-height: 7rem; |
|||
background: #fff none; |
|||
|
|||
.title { |
|||
margin: 2% 2.5%; |
|||
font-size: 0.42rem; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
.chartbox { |
|||
margin: 2% 5% 3%; |
|||
width: 90%; |
|||
height: 7rem; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
Loading…
Reference in new issue