gtqtOut.git - Gitblit

			@@ -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>

	src/api/goalManagement/index.ts	8 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/contingencyManagement/emergencyDrillStatistics/index.vue	226 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

			@@ -378,5 +378,13 @@
			data:params
			})
			},
			// 统计查询应急物资
			emergencySuppliesCount(params:any){
			return request({
			url:"/emergencyCount/emergencySupplies/count",
			method:"post",
			data:params
			})
			},
			}
			}