From ae07a87d84ccc7f568d4e3b8ff4b0c68cf43c0b1 Mon Sep 17 00:00:00 2001
From: shj <1790240199@qq.com>
Date: 星期四, 18 八月 2022 15:27:32 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut
---
src/views/contingencyManagement/emergencyDrillStatistics/index.vue | 226 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 223 insertions(+), 3 deletions(-)
diff --git a/src/views/contingencyManagement/emergencyDrillStatistics/index.vue b/src/views/contingencyManagement/emergencyDrillStatistics/index.vue
index dbe6adc..d9134b7 100644
--- a/src/views/contingencyManagement/emergencyDrillStatistics/index.vue
+++ b/src/views/contingencyManagement/emergencyDrillStatistics/index.vue
@@ -24,7 +24,32 @@
</el-col>
</el-row>
</el-form>
- <div ref="main" style="width: 100%; height: 400px"></div>
+ <div ref="main" style="width: 100%; height: 300px"></div>
+ <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>
</template>
@@ -32,10 +57,157 @@
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'+list.value[a].totalNum,
+ x: 127,
+ y: 63,
+ textAlign:'center',
+ textStyle: {
+ color: '#24c548',
+ fontSize: 25,
+ 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
@@ -61,8 +233,9 @@
listApi()
}
onMounted(() => {
- listApi()
+ listApi()
department();
+ emergencySuppliesCount()
});
const day=ref(0)
const listApi=()=>{
@@ -124,7 +297,20 @@
propse,
listApi,
eaclick,
- day
+ day,
+ list,
+ emergencySuppliesCount,
+ params,
+ initPies,
+ leftClick,
+ rightClick,
+ echarts0,
+ echarts1,
+ echarts2,
+ echarts3,
+ echarts4,
+ disabledRight,
+ disabledLeft
};
},
});
@@ -141,4 +327,38 @@
.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>
--
Gitblit v1.9.2