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%;">
						<option value="">请选择建筑</option>
						<option value="">建筑1</option>
						<option value="">建筑2</option>
					</select>
				</view>
			</view>
			<view class="cu-bar search bg-gray filter-section">
				<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" 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" >
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				消防各子系统安装情况
			</view>
			<view class="info-content padding-lr">
				<table style="border:1px solid #ccc"  cellspacing="0" cellpadding="0" align="center">
					<tr>
						<td>子系统安装情况</td>
						<td>报警数</td>
						<td>误报频率</td>
					</tr>
					<tr>
						<td>建筑物类别</td>
						<td>办公</td>
					</tr>
					<tr>
						<td>建造日期</td>
						<td>1999年3月21日</td>
					</tr>
					<tr>
						<td>使用性质</td>
						<td> 办公  </td>
					</tr>
					<tr>
						<td>火灾危险级</td>
						<td> 一级</td>
					</tr>
					<tr>
						<td>耐火等级</td>
						<td>一级 </td>
					</tr>
					<tr>
						<td> 结构类型</td>
						<td>砖混结构</td>
					</tr>
					<tr>
						<td>建筑高度</td>
						<td> 100m</td>
					</tr>
					<tr>
						<td> 建筑面积</td>
						<td>15698.3㎡</td>
					</tr>
					<tr>
						<td>占地面积</td>
						<td>15698.3㎡</td>
					</tr>
	
					<tr>
						<td>标准层面积</td>
						<td>5000㎡</td>
					</tr>
					<tr>
						<td>地上层数  </td>
						<td>3</td>
					</tr>
					<tr>
						<td>地上层面积  </td>
						<td>5000㎡</td>
					</tr>
					
					<tr>
						<td>地下层数 </td>
						<td> 0</td>
					</tr>
					<tr>
						<td>地下层面积 </td>
						<td>-</td>
					</tr>
					<tr>
						<td>消防控制室位置</td>
						<td>一楼</td>
					</tr>
					<tr>
						<td> 避难层数量</td>
						<td>2</td>
					</tr>
					<tr>
						<td> 消防电梯数量</td>
						<td>2</td>
					</tr>
				</table>
			</view>
		</view>

		
		<view class="processStatus">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				告警频发点位统计分析
			</view>
			<view class="padding-lr">
				<img src="../../../static/building1.png" alt="" width="100%">
			</view>
		</view>
		
		
		<view class="processStatus">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				存在问题或需要改进事项
			</view>
			<view class="padding-lr padding-bottom-lg">
				<img src="../../../static/building2.png" alt="" width="100%">
				<br><br>
			</view>
		</view>
		
		<view class="processStatus">
			<view class="info-tit margin-left-xs">
				<text class="cuIcon-titles margin-right-xs"></text>
				其他事宜
			</view>
			<view class="padding-lr padding-bottom-lg">
				<img src="../../../static/building2.png" alt="" width="100%">
				<br><br>
			</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">
	
	

	
	


</style>