xfapp/pages/analyse/monthDetail/monthDetail.vue

<template>
	<view class="reportD-wrapper">
		<view class="text-center flex flex-wrap justify-center title-wrapper">
			<view class=" margin title" style="width:68%">{{company_name}}消防报警系统监测数据 {{event_time}}月报表</view>
		</view>
		<view class="basic-info bg-white margin-bottom-sm">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				项目情况
			</view>
			<view class="info-content">
				<view class="info-one-info ">
					<text>单位名称：</text>
					<text>{{project_info.company_name}}</text>
				</view>
				<view class="info-one-info ">
					<text>进场日期：</text>
					<text>{{project_info.approach_time}}</text>
				</view>
				<view class="info-one-info ">
					<text>完工日期：</text>
					<text>{{project_info.complete_time}}</text>
				</view>
				<view class="info-one-info ">
					<text>验收日期：</text>
					<text>{{project_info.check_time}}</text>
				</view>
			</view>
		</view>

		<view class=" bg-white margin-bottom-sm">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				安装设备情况
			</view>
			<view class="padding-lr padding-bottom-lg">
				<table style="border:1px solid #ccc" cellspacing="0" cellpadding="0" align="center">
					<tr>
						<th style="width:13%">序号</th>
						<th style="width:40%">设备名称</th>
						<th>规格型号</th>
						<th style="width:50px">数量</th>
					</tr>
					<tr v-for="(item,index) in instal_device_info" :key="index">
						<td>{{item.xh}}</td>
						<td>{{item.device_name}}</td>
						<td>{{item.specifications}}</td>
						<td>{{item.device_num}}</td>
					</tr>

					<tr>
						<td colspan="3">合计</td>
						<td>{{getData.device_cout}}</td>

					</tr>
				</table>
			</view>
		</view>

		<view class="bg-white margin-bottom-sm">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				监测点情况
			</view>
			<view class="padding-lr padding-bottom-lg">
				<table style="border:1px solid #ccc" cellspacing="0" cellpadding="0" align="center">
					<tr>
						<th style="width:13%">序号</th>
						<th style="width:40%">监控子系统</th>
						<th >检测点类型</th>
						<th style="width:50px">数量</th>

					</tr>
					<tr v-for="(item,index) in monitor_point_info">
						<td>{{item.xh}}</td>
						<td>{{item.monitor_son}}</td>
						<td>{{item.monitor_type}}</td>
						<td>{{item.monitor_sum}}</td>
					</tr>

					<tr>
						<td colspan="3">合计</td>
						<td>{{getData.point_count=='null'?'0':getData.point_count}}</td>
					</tr>
				</table>
			</view>
		</view>

		<view class="bg-white margin-bottom-sm">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				统计时段
			</view>
			<view class="info-content" style="font-size:30rpx">
				<view class="info-one-info ">
					<text style="width:125px!important">统计起始日期：</text>
					<text>{{count_time.startData}}</text>
				</view>
				<view  class="info-one-info ">
					<text style="width:125px!important">统计截至日期：</text>
					<text>{{count_time.endData}}</text>
				</view>
				<view class="info-one-info ">
					<text style="width:125px!important">统计时段时长：</text>
					<text>{{count_time.days}}</text>
				</view>
			</view>
		</view>

		<view class="bg-white margin-bottom-sm">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				统计报表
			</view>
			<view class="margin-lr padding-bottom-lg" style="overflow:auto">
				<table style="border:1px solid #ccc;width:150%;" cellspacing="0" cellpadding="0" align="center">
					<tr>
						<th>序号</th>
						<th>报告分类</th>
						<th>报告属性</th>
						<th>报告总数</th>
						<th>已处理</th>
						<th>未处理</th>
						<th>处置率</th>
					</tr>
					<block v-for="(item,index) in count_report">
						<template v-if="item.alarm_type=='火灾监测'">
							<tr>
								<td rowspan="2">{{item.xh}}</td>
								<td rowspan="2">{{item.alarm_type}}</td>
								<td>设备离线</td>
								<td>{{item.offline.hjlxtotal}}</td>
								<td>{{item.offline.hjlxcltotal}}</td>
								<td>{{item.offline.hjlxwcltotal}}</td>
								<td>{{item.offline.hjlxbaifenbi}}%</td>
							</tr>
							<tr>
								<td>报警</td>
								<td>{{item.alarm.hjtotal}}</td>
								<td>{{item.alarm.hjcltotal}}</td>
								<td>{{item.alarm.hjwcltotal}}</td>
								<td>{{item.alarm.hjbaifenbi}}%</td>
							</tr>
						</template>

						<template v-if="item.alarm_type=='电气火灾监测'">
							<tr>
								<td rowspan="2">{{item.xh}}</td>
								<td rowspan="2">{{item.alarm_type}}</td>
								<td>设备离线</td>
								<td>{{item.offline.eflxtotal}}</td>
								<td>{{item.offline.eflxcltotal}}</td>
								<td>{{item.offline.eflxwcltotal}}</td>
								<td>{{item.offline.eflxbaifenbi}}%</td>
							</tr>
							<tr>
								<td>报警</td>
								<td>{{item.alarm.efwcltotal}}</td>
								<td>{{item.alarm.efcltotal}}</td>
								<td>{{item.alarm.efwcltotal}}</td>
								<td>{{item.alarm.efbaifenbi}}%</td>
							</tr>
						</template>

						<template v-if="item.alarm_type=='消防水系统监测'">
							<tr>
								<td rowspan="2">{{item.xh}}</td>
								<td rowspan="2">{{item.alarm_type}}</td>
								<td>设备离线</td>
								<td>{{item.offline.sjlxtotal}}</td>
								<td>{{item.offline.sjlxcltotal}}</td>
								<td>{{item.offline.sjlxwcltotal}}</td>
								<td>{{item.offline.sjlxbaifenbi}}%</td>
							</tr>
							<tr>
								<td>报警</td>
								<td>{{item.alarm.sjtotal}}</td>
								<td>{{item.alarm.sjcltotal}}</td>
								<td>{{item.alarm.sjwcltotal}}</td>
								<td>{{item.alarm.sjbaifenbi}}%</td>
							</tr>
						</template>

						<template v-if="item.alarm_type=='RTU监测'">
							<tr>
								<td rowspan="2">{{item.xh}}</td>
								<td rowspan="2">{{item.alarm_type}}</td>
								<td>设备离线</td>
								<td>{{item.offline.rtulxtotal}}</td>
								<td>{{item.offline.rtulxcltotal}}</td>
								<td>{{item.offline.rtulxwcltotal}}</td>
								<td>{{item.offline.rtulxbaifenbi}}%</td>
							</tr>
							<tr>
								<td>报警</td>
								<td>{{item.alarm.rtutotal}}</td>
								<td>{{item.alarm.rtucltotal}}</td>
								<td>{{item.alarm.rtuwcltotal}}</td>
								<td>{{item.alarm.rtubaifenbi}}%</td>
							</tr>
						</template>


					</block>


				</table>
			</view>
		</view>


		<view class="bg-white margin-bottom-sm">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				项目情况
			</view>
			
			<view class="padding text-center">
				<view class="chart-tit">
					各类告警总数饼状图
				</view>
				<chart :bindData="alarm_total" v-if="Object.keys(alarm_total).length!==0" ></chart>
			</view>

			
			<view class="padding text-center">
				<view class="chart-tit">火灾告警处理情况饼图</view>
				<chart2 :bindData="fire_data" v-if="Object.keys(fire_data).length!==0" ></chart2>
			</view>
			<view class="padding text-df">
				<view v-html="fire_data.data"></view>
			</view>

			<view class="padding text-center">
				<view class="chart-tit">水系统告警处理情况饼图</view>
				<chart3 :bindData="water_data" v-if="Object.keys(water_data).length!==0"></chart3>
			</view>

			<view class="padding text-df">
				<view v-html="water_data.data"></view>
			</view>



			<view class="padding text-center">
				<view class="chart-tit">
					RTU系统告警处理情况饼图
				</view>
				<br>
				<chart4 :bindData="rtu_data" v-if="Object.keys(rtu_data).length!==0"></chart4>
			</view>
			<view class="padding text-df">
				<view v-html="rtu_data.data"></view>
			</view>

		</view>


		<view class="bg-white margin-bottom-sm">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				存在问题或需要改进事项
			</view>
			<view class="padding-lr padding-bottom">
				<view v-for="(item,index) in propose" :key="index" >
					{{index+1}}、{{item.data1}}
				</view>
				
			</view>
		</view>

		<view class="bg-white margin-bottom-sm">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				其他事宜
			</view>
			<view class="padding-lr padding-bottom other">
				<view v-for="(item,index) in other" :key="index" >
					{{index}}、{{item.data2}}
				</view>
			</view>


		</view>





	</view>
</template>

<script>
	import chart from './components/chart.vue';
	import chart2 from './components/chart2.vue';
	import chart3 from './components/chart3.vue';
	import chart4 from './components/chart4.vue';
	export default {
		components: {
			chart,
			chart2,
			chart3,
			chart4
		},
		data() {
			return {
				staticData: {
					wubao: 9,
					unSolve: 6,
					truely: 20
				},
				staticData2: {
					wubao: 9,
					unSolve: 6,
					truely: 20
				},
				
				getData: {},
				company_name:'',
				event_time:'',
				project_info: {},
				instal_device_info: {},
				monitor_point_info: {},
				count_time: {},
				count_report: {},
				alarm_total:{},
				fire_data:{},
				water_data:{},
				rtu_data:{},
				propose:{},
				other:{},


			}
		},
		onLoad: function(option) {
			// this.companyName=uni.getStorageSync('selectedName')

			this.getDataDetail({
				'company_code': uni.getStorageSync('selectedCode'),
				'id': option.id
			})

		},
		methods: {
			
			

			// 详情数据请求
			async getDataDetail(params = {}) {
				const res = await this.$myRequest({
					url: 'MonthlyReport/getMonthlyReportDetails',
					data: params,
					showLoading: true
				})
				this.getData = res.data.data;
				// console.log(this.getData)
				this.project_info = this.getData.project_info; //基本情况

				this.instal_device_info = this.getData.instal_device_info; //安装设备情况
				console.log(this.instal_device_info)
				this.monitor_point_info = this.getData.monitor_point_info; //监控点情况  

				this.count_time = this.getData.count_time; //统计时段

				this.count_report = this.getData.count_report; //统计报表
				
				this.alarm_total = this.getData.alarm_total; //各类告警
				
				this.fire_data = this.getData.fire_data; //火灾告警		
						
				this.water_data = this.getData.water_data; //水系统告警
				
				this.rtu_data = this.getData.rtu_data; //水系统告警  
				
				this.propose = this.getData.propose; //存在问题
				
				this.other = this.getData.other; //其他事宜  
				
				this.event_time=res.data.event_time;
				this.company_name=res.data.company_name;



			},






		}
	}
</script>

<style lang="scss">
	page {
		background: #EDEDED;
	}
</style>