<template>
<div class="highrisk-ships" :style="styleObj">
<div class="common-title" v-show="height">
<slot name="title"></slot>
</div>
<div class="content enforce-content">
<div id="public-container"></div>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
import {echartfontSize} from "@/utils"
export default {
name: 'theCasePublicity',
components: {
},
props: {
height: {
type: Number
}
},
data () {
return {
tableData: [], // 高危渔船列表
chart: null,
}
},
computed: {
styleObj () {
return {
'height': this.height + 'px',
'top': this.height * 2 + 20 + 'px'
}
},
// 表格最大高度
tableMaxHeight () {
// 当前组件高度 - header高度 - （内容padding高度 + 10）
return this.height - 43 - 25
}
},
mounted () {
this.getRiskShipLists()
},
methods: {
// 获取接口数据
getRiskShipLists (deptId) {
this.$http.get('/enforce/lawenforcementcensus/publicCaseCensus')
.then(res => {
if (res.success){
const {processCase, finishPublicCase, punishPublicCase, notPublicCase} = res.data
let data = []
let total = notPublicCase + finishPublicCase + punishPublicCase + notPublicCase
data.push({value: notPublicCase, name: '未公开'},
{value: processCase, name: '办理中'},
{value: finishPublicCase, name: '结案归档公开'},
{value: punishPublicCase, name: '处罚决定公开'})
this.tableData = data
this.initChart(data, total)
}
else this.tableData = []
})
.catch(err => console.log(err))
},
initChart(data, total) {
const chart = echarts.init(document.getElementById('public-container'))
let option = {
color: ['#15e1fc','#12b795','#1d8ac4', '#1cadfe'],
tooltip: {
trigger: 'item'
},
title: {
zlevel: 0,
text: total,
subtext: '总案件数',
top: '80',
left: '200',
textAlign: 'center',
textStyle: {
color: '#FFA042'
},
subtextStyle: {
fontSize: 12,
color: '#fff',
},
},
legend: {
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
itemWidth: echartfontSize(0.15), // 图例图形的宽度
itemHeight: echartfontSize(0.1), // 图例图形的高度
itemGap: echartfontSize(0.3),
textStyle: {
color: '#fff',
fontSize: 14,
marginTop: 60
}
},
series: [
{
type: 'gauge',
center: ["40%", "50%"],
startAngle: 0,
endAngle: 359.999,
splitNumber: 12,
radius:'82%',
pointer: {
show: false,
},
axisLine: {
lineStyle: {
width: 8,
color: [
[0, '163d59'],
[0.5, '#163d59'],
[1, '#163d59']
]
}
},
axisTick: {
distance: -30,
length: 6,
splitNumber: 6,
lineStyle: {
width: 1,
color: '#099fe4'
}
},
splitLine: {
distance: -30,
length: 10,
lineStyle: {
width: 2,
color: '#099fe4'
}
},
axisLabel: {
show: false,
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
show: false,
},
data: []
},
{
name: '',
type: 'pie',
radius: ['50%', '65%'],
center: ['40%', '50%'],
startAngle:150,
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#122227',
borderWidth: 3
},
labelLine: {
length: 30,
},
label: {
bleedMargin: 5,
alignTo: 'labelLine',
position: 'outer',
formatter: '{a|{c}({d}%)}\n {per|{b}} ',
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#fff',
lineHeight: 26,
align: 'center',
fontSize: echartfontSize(0.12),
},
hr: {
borderColor: 'auto',
width: '100%',
borderWidth: 1,
height: 0,
},
per: {
color: '#1ef0ed',
backgroundColor: 'rgba(0, 0, 0, 0)',
padding: [5, 5],
borderRadius: 4,
fontSize: echartfontSize(0.12),
}
}
},
data: []
}
]
}
option.series[1].data = data
chart.setOption(option)
this.chart = chart
window.addEventListener("resize",function(){
chart.resize();
});
}
}
}
</script>
<style lang="scss" scoped>
$url: "~images/module/enforceIndex";
.highrisk-ships {
width: 540px;
overflow: hidden;
transition: height 0.4s;
z-index: 2;
.content {
padding: 15px 15px 0;
position: relative;
#public-container {
height: 100%;
width: 100%;
}
}
}
</style>
