<template>
|
<div class="system-user-container">
|
<el-card shadow="hover">
|
<div class="system-user-search mb15">
|
<el-form ref="ruleFormRef" size="default" label-width="80px" :inline="true">
|
<el-row :gutter="35">
|
<el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4" class="mb20">
|
<el-form-item prop="telephone" label="选择年月">
|
<el-radio-group v-model="params.type" class="w100">
|
<el-radio :label="2">年</el-radio>
|
<el-radio :label="1">月</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4" class="mb20">
|
<el-form-item v-if="params.type==2" prop="telephone" label="选择年">
|
<el-date-picker
|
v-model="params.year"
|
:disabled="disabled"
|
type="year"
|
class="w100"
|
value-format="YYYY"
|
placeholder="选择日期时间"
|
/>
|
</el-form-item>
|
<el-form-item v-if="params.type==1" prop="telephone" label="选择月">
|
<el-date-picker
|
v-model="params.realMonth"
|
:disabled="disabled"
|
type="month"
|
class="w100"
|
value-format="YYYY-MM"
|
placeholder="选择日期时间"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
<el-button size="default" type="primary" class="ml10" @click="emergencySuppliesCount"> 查询</el-button>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div class="echarts" ref="echarts1">
|
|
</div>
|
</div>
|
|
</el-card>
|
|
</div>
|
</template>
|
<script lang="ts">
|
import { defineComponent, onMounted, ref } from 'vue';
|
import * as echarts from 'echarts';
|
import { ElMessage } from 'element-plus';
|
import { goalManagementApi } from '/@/api/goalManagement';
|
import { toNamespacedPath } from 'path/posix';
|
export default defineComponent({
|
setup() {
|
const params = ref({
|
level:'',
|
type:2,
|
year:'2022',
|
month:'',
|
realMonth:''
|
})
|
const list = ref([])
|
//加载数据
|
const emergencySuppliesCount = () => {
|
if(params.value.type==2){
|
params.value.month=''
|
}
|
if(params.value.type==1){
|
params.value.year=params.value.realMonth.split('-')[0]
|
params.value.month=params.value.realMonth.split('-')[1]
|
}
|
goalManagementApi()
|
.accidentReportCount(params.value)
|
.then((res) => {
|
if (res.data.code == 200) {
|
var newList = []
|
for(var a = 0;a<res.data.data.length;a++){
|
newList.push(
|
{
|
name:res.data.data[a].name+":"+res.data.data[a].num,
|
value:res.data.data[a].num,
|
deathNum: res.data.data[a].deathNum,
|
economicLoss: res.data.data[a].economicLoss,
|
minorInjuryNum: res.data.data[a].minorInjuryNum,
|
seriousInjuryNum: res.data.data[a].seriousInjuryNum
|
}
|
)
|
}
|
list.value = newList;
|
initPies()
|
} else {
|
ElMessage.error(res.data.msg);
|
}
|
});
|
};
|
const echarts1 = ref()
|
const initPies = () => {
|
var myChart = echarts.init(echarts1.value);
|
myChart.clear()
|
var option = {
|
tooltip: {
|
trigger: 'item',
|
textStyle:{
|
fontSize:18
|
},
|
formatter(params){
|
for(var x in params){
|
return params.data.name.split(':')[0] +"："+params.data.value+'<br />'+
|
'死亡人数：'+params.data.deathNum+'<br />'+
|
'轻伤人数：'+params.data.minorInjuryNum+'<br />'+
|
'重伤人数：'+params.data.seriousInjuryNum+'<br />'+
|
'经济损失：'+params.data.economicLoss+'<br />'
|
}
|
|
}
|
},
|
legend: {
|
top: '5%',
|
left: 'center',
|
icon: "circle",
|
formatter: function(param){
|
param=param.split(":");
|
return [param[0]+':'+param[1]].join("");
|
},
|
},
|
series: [
|
{
|
name: '事故等级分布',
|
type: 'pie',
|
radius: ['40%', '70%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: '#fff',
|
borderWidth: 2
|
},
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: false,
|
fontSize: '40',
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: list.value
|
}
|
]
|
};
|
|
myChart.setOption(option, true);
|
|
};
|
onMounted(() => {
|
emergencySuppliesCount()
|
});
|
return {
|
params,
|
list,
|
emergencySuppliesCount,
|
initPies,
|
echarts1
|
}
|
}
|
|
})
|
</script>
|
<style scoped>
|
.echarts{
|
width: 500px;
|
height: 400px;
|
}
|
</style>
|
