zhxf-app/pages/analyse/buildingCheck/buildingCheck.vue

<template>
	<view>
		
		<!-- 筛选框start -->
		<view class="ding">
			<view class="cu-bar search bg-gray filter-section" style="with:50%;">
				<view class="search-form round bg-white" >
					<select name="" id="" placeholder="" style="width:98%;background-size: 4%;font-size:28rpx">
						<option value="">请选择建筑</option>
						<option value="">建筑1</option>
						<option value="">建筑2</option>
					</select>
				</view>
			</view>
			<view class="cu-bar search bg-gray filter-section">
				 <calendar></calendar>
				<!-- <view class="search-form round bg-white" style="margin-bottom:26rpx">
					<input class="" @focus="InputFocus" v-model="siteName" @blur="InputBlur" :adjust-position="false" type="text"
					 placeholder="请选择时间" confirm-type="search"></input>
				</view> -->
				<view class="action">
					<button class="cu-btn bg-blue round" @click="searchData()">查询</button>
				</view>
			</view>
		</view>
		<!-- 筛选框end -->
		
		<view class="processStatus  bg-white margin-bottom-sm" style="margin-top:206rpx">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				安全分析
			</view>
			<view class="padding-lr padding-bottom-lg">
				<chart :bindData="this.staticData"></chart>
			</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 padding-lr padding-bottom">
				<table style="border:1px solid #ccc"  cellspacing="0" cellpadding="0" align="center">
					<tr>
						<td>子系统安装情况</td>
						<td>报警数</td>
						<td>误报频率</td>
					</tr>
					<tr>
						<td>火灾自动报警系统 </td>
						<td>报警数量68，处理37</td>
						<td>12%</td>
					</tr>
					<tr>
						<td>电气火灾监控系统</td>
						<td>报警数量595，处理88</td>
						<td>0</td>
					</tr>
					<tr>
						<td>消防给水系统</td>
						<td>报警数量1414，处理1252  </td>
						<td>1% </td>
					</tr>
					<tr>
						<td>消火栓系统</td>
						<td>报警数量3020，处理387</td>
						<td> 15%</td>
					</tr>
					<tr>
						<td>自动喷水灭火系统</td>
						<td>报警数量36351，处理9</td>
						<td>  23%</td>
					</tr>
					<tr>
						<td>防排烟系统</td>
						<td>报警数量10，处理9</td>
						<td> 0</td>
					</tr>
				</table>
			</view>
		</view>
		
		<view class="processStatus  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 padding-lr padding-bottom">
				<table style="border:1px solid #ccc"  cellspacing="0" cellpadding="0" align="center">
					<tr>
						<td>子系统 </td>
						<td>报警点位 </td>
						<td>报警次数</td>
					</tr>
					<tr>
						<td rowspan="3">火灾自动报警系统</td>
						<td>一楼大厅门口 </td>
						<td>12</td>
					</tr>
					<tr>
						
						<td>二楼茶水间</td>
						<td>10</td>
					</tr>
					<tr>
						
						<td>厨房</td>
						<td>8</td>
					</tr>
					<tr>
						<td rowspan="3"> 电气火灾监控系统</td>
						<td> 二楼卫生间  </td>
						<td> 7</td>
					</tr>
					<tr>
						
						<td>二楼茶水间</td>
						<td>6</td>
					</tr>
					<tr>
						<td>三楼大厅</td>
						<td>5</td>
					</tr>
					
					<tr>
						<td>消防给水系统</td>
						<td>二楼接待室</td>
						<td>4</td>
					</tr>
					<tr>
						<td> 消火栓系统</td>
						<td> 三楼会议室</td>
						<td>3</td>
					</tr>
					<tr>
						<td> 自动喷水灭火系统</td>
						<td> 一楼大厅 </td>
						<td>2</td>
					</tr>
					<tr>
						<td rowspan="2">防排烟系统</td>
						<td>三楼档案室 </td>
						<td>1</td>
					</tr>
					<tr>
						<td>一楼展厅</td>
						<td>1</td>
					</tr>
					
				</table>
			</view>
		</view>
		
		
		<view class="processStatus  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" style="font-size:30rpx;text-indent:60rpx;line-height:1.7">
				<view>用户信息传输装置该类设备隐患极高或存在故障，建议尽早进行排查；</view>
				<view>水系统该类设备隐患极高或存在故障，建议尽早进行排查；</view>
				<view> 消防栓该类设备隐患极高或存在故障，建议尽早进行排查；</view>
				<view>液位该类设备隐患极高或存在故障，建议尽早进行排查；</view>
				<view>电气火灾该类设备隐患极高或存在故障，建议尽早进行排查；</view>
				<view> 视频监测该类设备隐患极高或存在故障，建议尽早进行排查；</view>
				<view> 电梯监测该类设备隐患极高或存在故障，建议尽早进行排查； </view>
				<view>可燃气体监测该类设备隐患极高或存在故障，建议尽早进行排查；</view>
			</view>
		</view>
		
		<view class="processStatus  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" style="font-size:30rpx;text-indent:60rpx;line-height:1.7">
				<view>目前数据反映：烟感该类设备通信情况较好，需要保持； </view>
				<view>目前数据反映：RTU该类设备通信情况较好，需要保持。</view>
			</view>
		</view>

	</view>
</template>

<script>
	// import json from '../../data/json.js';
	import chart from './components/chart/chart.vue';
	export default {
		components: {
			chart,
		
		},
		data() {
			return {
				// deviceOffLineData:json.deviceOffLineData,
				siteListRes: 0,
				siteName: '',
				type: '0',
				siteListData: [],
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				CustomBar: this.CustomBar,
				
				staticData: {
	"msg": "\u64cd\u4f5c\u6210\u529f",
	"flag": true,
	"companyCode": "1,2,3,4,5,6,7,8,12,13,14,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39",
	"data": [{
		"statisticalPeriod": "2021-03-16~2021-04-16",
		"smartElectricityCount": "178",
		"videoMonitoringCount": "12456",
		"alarmCount": 12627,
		"eventCount": 2,
		"hiddenDangerCount": 4,
		"offlineCount": 20,
		"faultCount": 30,
		"earlyWarningCount": 100,
		"otherCount": 99,
		"normalCount": 66,
		"integratedAlarmCount": 12627,
		"unprocessedCount": 0
	}]
}
				
			
			}
		},
		methods: {
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			

			


		}
	}
</script>

<style lang="scss">
	
	

page {
		background: #EDEDED;
	}
/deep/ .leave_cont .ul .li{
		width:42%!important;
		
	}
/deep/ .leave_cont .ul{
		background:#fff;
		
	}
/deep/	.date{font-size:28rpx;}
/deep/	.leave_cont{
	width:76%
}
	


</style>