解润东 (8a84a68d) · Commits · 首开风险隐患双控平台 / BCDH-APP · GitLab

src/views/danger/dangerPatrol/statistics/index.vue

+227 −14

Original line number	Original line	Diff line number	Diff line
	@@ -6,18 +6,31 @@
	<div class="con-list">		<div class="con-list">
	<van-cell-group inset>		<van-cell-group inset>
	<van-row gutte>		<van-row gutte>
	<van-col span="24">总巡查次数:85次</van-col>		<van-col span="24">总巡查次数:{{countObj.totalNumber}}次</van-col>
	</van-row>		</van-row>
	<van-row gutte>		<van-row gutte>
	<van-col span="24">认定隐患数量: 25个</van-col>		<van-col span="24">认定隐患数量: {{countObj.hdNumber}}个</van-col>
	</van-row>		</van-row>

	<van-tabs @click="onClick" color="#2980f7">		<van-tabs @click="onClick" color="#2980f7">
	<van-tab title="隐患上报统计">		<van-tab title="隐患上报统计">
	<van-row gutte>		<van-row gutte>
	<van-col span="24" class="excel-title">		<van-col span="24" class="excel-title">
	<span>月巡查</span>		<van-cell title="请选择查询的月份" :value="date" @click="show = true" />
	<span>周巡查</span>		<!-- <span>月巡查</span>
			<span>周巡查</span> -->
			<van-popup v-model="show" position="bottom">
			<van-datetime-picker
			v-model="currentDate"
			type="year-month"
			title="选择年月"
			:min-date="minDate"
			:max-date="maxDate"
			:formatter="formatter"
			@confirm="onConfirm"
			@cancel="show=false"
			/>
			</van-popup>
	</van-col>		</van-col>
	</van-row>		</van-row>
	<!-- echarts图 -->		<!-- echarts图 -->
	@@ -27,7 +40,45 @@
	</van-col>		</van-col>
	</van-row>		</van-row>
	</van-tab>		</van-tab>
	<van-tab title="巡查时长统计">2</van-tab>		<van-tab title="巡查时长统计">
			<van-row gutte>
			<van-col span="24" class="excel-title">
			<van-col span="24" class="excel-title">
			<van-cell title="请选择查询的月份" :value="dateTwo" @click="showTwo = true" />
			<!-- <span>月巡查</span>
			<span>周巡查</span> -->
			<van-popup v-model="showTwo" position="bottom">
			<van-datetime-picker
			v-model="currentDateTwo"
			type="year-month"
			title="选择年月"
			:min-date="minDateTwo"
			:max-date="maxDateTwo"
			:formatter="formatterTwo"
			@confirm="onConfirmTwo"
			@cancel="showTwo=false"
			/>
			</van-popup>
			</van-col>
			</van-col>
			</van-row>
			<!-- 日历图 -->
			<van-row gutte v-if="aa">
			<van-col span="24" class="excel-title">
			<van-calendar
			title="日历"
			:poppable="false"
			:show-confirm="false"
			:style="{ height: '500px' }"
			type="multiple"
			:min-date="minDateThree"
			:max-date="maxDateThree"
			:formatter="formatterThree"
			:default-date="defaultData"
			/>
			</van-col>
			</van-row>
			</van-tab>
	</van-tabs>		</van-tabs>
	</van-cell-group>		</van-cell-group>
	</div>		</div>
	@@ -48,36 +99,190 @@ export default {
	},		},
	data() {		data() {
	return {		return {
			date:'2022/01',
			show:false,
			minDate: new Date(2020, 0, 1),
			maxDate: new Date(2025, 10, 1),
			currentDate: new Date(),
			dateTwo:'2022/01',
			showTwo:false,
			minDateTwo: new Date(2020, 0, 1),
			maxDateTwo: new Date(2025, 10, 1),
			currentDateTwo: new Date(),
	text: "巡查统计",		text: "巡查统计",
	messageList: [],		messageList: [],
	isHaveNews: false		minDateThree: new Date(2022, 0, 1),
			maxDateThree: new Date(2022, 0, 31),
			defaultData:[],
			isHaveNews: false,
			countObj:{},
			dateList:[],
			MonthList:[],

			aa:true
	};		};
	},		},
			watch: {
			dateList: {
			deep: true,
			handler(val) {
			this.myEcharts(val)
			}
			}
			},
	mounted() {		mounted() {
	this.$nextTick(() => {		this.init()
	this.myEcharts();
	});
	},		},

	methods: {		methods: {
			init(){
			this.count()
			this.leftEcharts()
			this.rightEcharts()
			},
			count(){
			this.$toast.loading({
			message:'加载中...',
			forbidClick: true,
			loadingType: 'spinner',
			duration: 0
			})
			getFun('patrol/statistics/total/count').then((response)=>{
			this.$toast.clear()
			this.countObj=response.data
			}).catch(()=>{
			this.$toast.clear()
			this.$toast.fail('加载失败,请稍后再试')
			})
			},
			//加载左侧折线图数据
			leftEcharts(){
			var obj={
			time:this.date
			}
			this.$toast.loading({
			message:'加载中...',
			forbidClick: true,
			loadingType: 'spinner',
			duration: 0
			})
			getFun('patrol/statistics/hd/count',obj).then((response)=>{
			this.$toast.clear()
			this.dateList=response.data
			}).catch(()=>{
			this.$toast.clear()
			this.$toast.fail('加载失败,请稍后再试')
			})
			},
			rightEcharts(){
			var obj={
			time:this.dateTwo
			}
			this.$toast.loading({
			message:'加载中...',
			forbidClick: true,
			loadingType: 'spinner',
			duration: 0
			})
			getFun('patrol/statistics/example/status',obj).then((response)=>{
			this.$toast.clear()
			this.MonthList=response.data
			}).catch(()=>{
			this.$toast.clear()
			this.$toast.fail('加载失败,请稍后再试')
			})
			},
			formatter(type, val) {
			if (type === 'year') {
			return `${val}年`;
			} else if (type === 'month') {
			return `${val}月`;
			}
			return val;
			},
			formatterTwo(type, val) {
			if (type === 'year') {
			return `${val}年`;
			} else if (type === 'month') {
			return `${val}月`;
			}
			return val;
			},
			formatterThree(date){
			var date1=this.util.timestampToTime(date.date,'DT2',true)
			this.MonthList.forEach((i)=>{
			if(date1==i.date){
			if(i.status=='red'){
			date.className='red-flag'
			}else if(i.status=='green'){
			date.className='green-flag'
			}
			}
			})
			return date
			},
	onClick(name, title) {		onClick(name, title) {
	console.log(title);		console.log(title);
	},		},
	myEcharts() {		formatDate(date) {
	console.log(echarts);		return `${date.getFullYear()}/${(date.getMonth() + 1)<10?'0'+(date.getMonth() + 1):(date.getMonth() + 1)}`;
			},
			onConfirm(date) {
			console.log(date,999)
			this.show = false;
			this.date = this.formatDate(date);
			this.leftEcharts()
			},
			onConfirmTwo(date) {
			this.aa = false
			this.showTwo = false;
			this.dateTwo = this.formatDate(date);
			this.maxDateThree=this.getCurrentMonthLast(date)
			this.minDateThree=date
			this.rightEcharts()
			setTimeout(() =>{
			this.aa = true
			},100)
			},
			getCurrentMonthLast(date){
			var currentMonth=date.getMonth();
			var nextMonth=++currentMonth;
			var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
			var oneDay=10006060*24;
			return new Date(nextMonthFirstDay-oneDay);
			},
			myEcharts(data) {
			var xData=[]
			var seriesData=[]
			data.forEach((i)=>{
			xData.push(i.date)
			seriesData.push(i.hdNumber)
			})
	var myChart = echarts.init(document.getElementById("box"));		var myChart = echarts.init(document.getElementById("box"));
	//配置图表		//配置图表
	var option = {		var option = {
	xAxis: {		xAxis: {
	type: "category",		type: "category",
	data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]		data: xData
	},		},
	yAxis: {		yAxis: {
	type: "value"		type: "value"
	},		},
			dataZoom: [
			{
			type: 'inside',
			start: 0,
			end: 20
			},
			{
			start: 0,
			end: 20
			}
			],
	series: [		series: [
	{		{
	data: [120, 200, 150, 80, 70, 110, 130],		data: seriesData,
	type: "bar"		type: "line"
	}		}
	]		]
	};		};
	@@ -117,4 +322,12 @@ export default {
	}		}
	}		}
	}		}
			/deep/ .red-flag{
			background:red !important;
			color: #fff;
			}
			/deep/ .green-flag{
			background:green !important;
			color: #fff;
			}
	</style>		</style>