| 对比新文件 |
| | |
|---|
| | | <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> |
|---|
