<template>
|
<div>
|
<div class="echart">
|
<h2 class="title">距上次应急演练结束{{day}}天</h2>
|
<el-form :model="form" label-width="20px">
|
<el-row>
|
<el-col :span="4" :offset="15">
|
<el-form-item size="default">
|
<el-tree-select v-model="form.deptId" :data="data" @change="eaclick" placeholder="选择部门" :props="propse" style="width: 100%" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item size="default">
|
<el-select v-model="form.type" placeholder="年/月" @change="eaclick" style="width:100%">
|
<el-option label="年" :value="1" />
|
<el-option label="月" :value="2" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div ref="main" style="width: 100%; height: 300px"></div>
|
<div style="width: 100%; padding-left: 20px">
|
<el-select v-model="params.searchParams.classification" style="width: 200px"
|
placeholder="请选择物资分类" @change="emergencySuppliesCount">
|
<el-option label="事故气体吸收装置" :value="1"></el-option>
|
<el-option label="通讯设施" :value="2"></el-option>
|
<el-option label="交通运输工具" :value="3"></el-option>
|
<el-option label="照明装置" :value="4"></el-option>
|
<el-option label="防护器材" :value="5"></el-option>
|
<el-option label="其它" :value="6"></el-option>
|
</el-select>
|
<div class="pie-body">
|
<div class="pie-item" ref="echarts0">
|
</div>
|
<div class="pie-item" ref="echarts1">
|
</div>
|
<div class="pie-item" ref="echarts2">
|
</div>
|
<div class="pie-item" ref="echarts3">
|
</div>
|
<div class="pie-item" ref="echarts4">
|
</div>
|
<ArrowLeftBold class="pie-left" :class="disabledLeft" @click="leftClick" />
|
<ArrowRightBold class="pie-right" :class="disabledRight" @click="rightClick" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script lang="ts">
|
import { defineComponent, onMounted, ref } from 'vue';
|
import * as echarts from 'echarts';
|
import { ElMessage } from 'element-plus';
|
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
|
import { goalManagementApi } from '/@/api/goalManagement';
|
import { toNamespacedPath } from 'path/posix';
|
import { deepClone } from '/@/utils/other';
|
export default defineComponent({
|
components: {
|
ArrowLeftBold,
|
ArrowRightBold,
|
},
|
setup() {
|
const params = ref({
|
pageIndex:1,
|
pageSize:5,
|
searchParams:{
|
classification:''
|
}
|
})
|
const list = ref([])
|
|
const leftClick = () => {
|
params.value.pageIndex--
|
emergencySuppliesCount()
|
initPies()
|
}
|
const rightClick = () => {
|
params.value.pageIndex++
|
emergencySuppliesCount()
|
initPies()
|
}
|
const disabledLeft = ref()
|
const disabledRight = ref()
|
//加载数据
|
const emergencySuppliesCount = () => {
|
goalManagementApi()
|
.emergencySuppliesCount(params.value)
|
.then((res) => {
|
if (res.data.code == 200) {
|
list.value = res.data.data;
|
initPies()
|
//禁用左右按钮
|
if(res.data.pageIndex==1){
|
disabledLeft.value = 'disabled-pie'
|
}else{
|
disabledLeft.value = ''
|
}
|
if(res.data.pageIndex==res.data.pages){
|
disabledRight.value = 'disabled-pie'
|
}else{
|
disabledRight.value = ''
|
}
|
} else {
|
ElMessage.error(res.data.msg);
|
}
|
});
|
};
|
const echarts0 = ref()
|
const echarts1 = ref()
|
const echarts2 = ref()
|
const echarts3 = ref()
|
const echarts4 = ref()
|
const initPies = () => {
|
var myChart0 = echarts.init(echarts0.value);
|
var myChart1 = echarts.init(echarts1.value);
|
var myChart2 = echarts.init(echarts2.value);
|
var myChart3 = echarts.init(echarts3.value);
|
var myChart4 = echarts.init(echarts4.value);
|
myChart0.clear()
|
myChart1.clear()
|
myChart2.clear()
|
myChart3.clear()
|
myChart4.clear()
|
for(var a = 0;a<list.value.length;a++){
|
var option = {
|
tooltip: {
|
trigger: 'item',
|
show:false
|
},
|
color:['#24c548'],
|
title: {
|
text: list.value[a].name+'\n\n'+list.value[a].totalNum,
|
x: '49%',
|
y: '35%',
|
textAlign:'center',
|
textStyle: {
|
color: '#24c548',
|
fontSize: 19,
|
fontWeight: "bold",
|
fontFamily:'D-DIN',
|
textShadowColor:'red'
|
},
|
},
|
series: [
|
{
|
name: null,
|
type: 'pie',
|
radius: ['80%', '90%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: '#fff',
|
borderWidth: 0
|
},
|
label: {
|
show: false,
|
position: 'center'
|
},
|
labelLine: {
|
show: false
|
},
|
data: [
|
{ value: list.value[a].totalNum, name: list.value[a].name },
|
]
|
}
|
]
|
};
|
|
|
if(a==0){
|
var option0 = deepClone(option)
|
option0.color = ['#24c548']
|
option0.title.textStyle.color = '#24c548'
|
myChart0.setOption(option0, true);
|
}
|
if(a==1){
|
var option1 = deepClone(option)
|
option1.color = ['#e7bd27']
|
option1.title.textStyle.color = '#e7bd27'
|
myChart1.setOption(option1, true);
|
}
|
if(a==2){
|
var option2 = deepClone(option)
|
option2.color = ['#e65c3e']
|
option2.title.textStyle.color = '#e65c3e'
|
myChart2.setOption(option2, true);
|
}
|
if(a==3){
|
var option3 = deepClone(option)
|
option3.color = ['#8e66e7']
|
option3.title.textStyle.color = '#8e66e7'
|
myChart3.setOption(option3, true);
|
}
|
if(a==4){
|
var option4 = deepClone(option)
|
option4.color = ['#28b8d6']
|
option4.title.textStyle.color = '#28b8d6'
|
myChart4.setOption(option4, true);
|
}
|
}
|
|
};
|
|
const form = ref({
|
type:1,
|
deptId:1
|
});
|
//部门
|
const department = () => {
|
goalManagementApi()
|
.getTreedepartment()
|
.then((res) => {
|
if (res.data.code == 200) {
|
data.value = res.data.data;
|
} else {
|
ElMessage.error(res.data.msg);
|
}
|
});
|
};
|
const propse = {
|
label: 'depName',
|
children: 'children',
|
value: 'depId',
|
};
|
const eaclick=()=>{
|
listApi()
|
}
|
onMounted(() => {
|
listApi()
|
department();
|
emergencySuppliesCount()
|
});
|
const day=ref(0)
|
const listApi=()=>{
|
goalManagementApi().emergencyStat(form.value).then(res=>{
|
if(res.data.code==200){
|
day.value=res.data.data.days
|
let date=[]
|
let names=[]
|
res.data.data.dataList.forEach(item => {
|
date.push(item.num)
|
names.push(item.name)
|
});
|
init(date,names)
|
}
|
})
|
}
|
const main = ref();
|
const init = (data: any,names:any) => {
|
var myChart = echarts.init(main.value);
|
var option = {
|
tooltip: {},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '5%',
|
containLabel: true,
|
},
|
xAxis: {
|
type: 'category',
|
data: names,
|
},
|
yAxis: {
|
type: 'value',
|
name: '次数',
|
nameTextStyle: {
|
color: '#aaa',
|
nameLocation: 'start',
|
},
|
},
|
color: ['#6394f9'],
|
series: [
|
{
|
data: data,
|
barWidth : 40,
|
type: 'bar',
|
},
|
],
|
};
|
|
myChart.setOption(option);
|
};
|
const data = ref([])
|
return {
|
form,
|
main,
|
init,
|
data,
|
department,
|
propse,
|
listApi,
|
eaclick,
|
day,
|
list,
|
emergencySuppliesCount,
|
params,
|
initPies,
|
leftClick,
|
rightClick,
|
echarts0,
|
echarts1,
|
echarts2,
|
echarts3,
|
echarts4,
|
disabledRight,
|
disabledLeft
|
};
|
},
|
});
|
</script>
|
<style scoped>
|
.title{
|
text-align: center;
|
padding: 20px 0;
|
}
|
.echart {
|
background-color: #fff;
|
border-radius: 5px;
|
}
|
.el-form {
|
padding: 20px 0;
|
}
|
.pie-body{
|
width: 50%;
|
height: 370px;
|
display: flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
position: relative;
|
}
|
.pie-item{
|
width: 32%;
|
height: 48%;
|
margin-right: 1%;
|
margin-bottom: 1%;
|
}
|
.pie-left{
|
position: absolute;
|
width: 30px;
|
height: 30px;
|
left: 0;
|
top: 48%;
|
cursor: pointer;
|
}
|
.pie-right{
|
position: absolute;
|
width: 30px;
|
height: 30px;
|
right: 0;
|
top: 48%;
|
cursor: pointer;
|
}
|
.disabled-pie{
|
pointer-events:none;
|
color: #9b9da1;
|
}
|
</style>
|
