modify

pages.json

@@ -649,6 +649,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/analyse/buildingCheck/buildingCheck",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "建筑体检",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	
 	

pages/analyse/analyse.vue

@@ -15,7 +15,7 @@
 					</view>
 				</view>
 			</view>
-			<view class="cu-item  shadow" >
+			<view class="cu-item  shadow"  @tap="goBuildingCheck()">
 				<view class="cu-avatar " style="background-image:url(../../static/build-icon.png)"></view>
 				<view class="content">
 					<view class="">建筑体检</view>
@@ -43,6 +43,11 @@
 				uni.navigateTo({
 					url: '/pages/analyse/monthReport/monthReport',
 				});
+			},
+			goBuildingCheck(){
+				uni.navigateTo({
+					url: '/pages/analyse/buildingCheck/buildingCheck',
+				});
 			}
 			
 

pages/analyse/buildingCheck/buildingCheck.vue

@@ -0,0 +1,229 @@
+<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>
+

pages/analyse/buildingCheck/components/chart/chart.vue

@@ -0,0 +1,213 @@
+<template>
+	<view class="content">
+
+		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts2" class="echarts"></view>
+
+	</view>
+</template>
+
+<script>
+
+	 let title = '安全评分';
+	export default {
+		props:{
+			bindData:{
+				type:Object,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				option: {
+					color: ['#00B7FC', '#935AF9', '#FF5354', '#FF8758', '#FFCF34', '#00E9CD', '#00B7FC'],
+
+					title: {
+						left: 'center'
+					},
+					tooltip: {
+						trigger: 'item',
+						// formatter: "{a} <br/>{b}: {c} ({d}%)"
+						formatter: "{b}: {c} "
+					},
+
+					title: [{ //aa标题
+						// text: '{val|121}',
+						text: '{val|121}\n{name|' + title + '}',
+						top: '45%',
+						left: 'center',
+						textStyle: {
+							rich: {
+								name: {
+									fontSize: 14,
+									fontWeight: 'normal',
+									color: '#666666',
+									padding: [5, 0]
+								},
+								val: {
+									fontSize: 24,
+									color: '#333333',
+								}
+							}
+						}
+					}],
+					legend: { //aa图例
+					show:false,
+						orient: 'horizontal',
+						icon: 'circle',
+						itemWidth: 12,
+						itemHeight: 12,
+						itemGap: 60,
+						// top: -10,
+						textStyle: {
+
+							fontSize: 14,
+							rich: {
+								name: {
+									fontSize: 18
+								},
+								value: {
+									fontSize: 14,
+									padding: [0, 20, 0, 5]
+								},
+
+							}
+						},
+					},
+					series: [{
+						name: '访问来源',
+						type: 'pie',
+						radius: ['40%', '60%'],
+						center: ['50%', '55%'],
+						itemStyle: {
+							normal: {
+								// shadowBlur: 20,
+								// shadowColor: '#F9F5F7',
+								// shadowOffsetX: 0,
+								// shadowOffsetY: 0,
+							},
+						},
+						data: [{
+								name: "TTU",
+								value: '11'
+							},
+							{
+								name: "电气火灾",
+								value: 22
+							},
+							{
+								name: "视频监测",
+								value: 8
+							},
+							{
+								name: "水系统",
+								value:3
+							},
+							{
+								name: "烟感",
+								value: 11
+							},
+							{
+								name: "消防栓",
+								value: 23
+							},
+							{
+								name: "液位",
+								value: 21
+							},
+						],
+					
+						labelLine: {
+							normal: {
+								length: 10, //aa折线长度
+								length2: 20, //aa折线长度
+							}
+						},
+						label: {
+							normal: {
+								formatter: '{b}：{d}%',
+								// formatter: params => {
+								// 	var percent = 0;
+								// 	var total = 0;
+								// 	for (var i = 0; i < echartData.length; i++) {
+								// 		total += echartData[i].value;
+								// 	}
+								// 	console.log(111);
+								// 	console.log(total);
+
+								// 	percent = ((params.value / total) * 100).toFixed(0);
+								// 	return params.name + ': ' + percent + '%';
+
+								// },
+
+							}
+						},
+					}]
+				}
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			changeOption() {
+				const data = this.option.series[0].data
+				// 随机更新示例数据
+				data.forEach((item, index) => {
+					data.splice(index, 1, Math.random() * 40)
+				})
+			},
+			onViewClick(options) {
+				console.log(options)
+			}
+		}
+	}
+</script>
+
+<script module="echarts" lang="renderjs">
+	let myChart
+	export default {
+		mounted() {
+			if (typeof window.echarts === 'function') {
+				this.initEcharts()
+			} else {
+				// 动态引入较大类库避免影响页面展示
+				const script = document.createElement('script')
+				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
+				script.src = '/static/echarts.min.js'
+				script.onload = this.initEcharts.bind(this)
+				document.head.appendChild(script)
+			}
+		},
+		methods: {
+			initEcharts() {
+				myChart = echarts.init(document.getElementById('echarts2'))
+				// 观测更新的数据在 view 层可以直接访问到
+				myChart.setOption(this.option)
+			},
+			updateEcharts(newValue, oldValue, ownerInstance, instance) {
+				// 监听 service 层数据变更
+				myChart.setOption(newValue)
+			},
+			onClick(event, ownerInstance) {
+				// 调用 service 层的方法
+				ownerInstance.callMethod('onViewClick', {
+					test: 'test'
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.echarts {
+		width: 100%;
+		height: 500rpx;
+	}
+</style>

pages/analyse/buildingCheck/components/chart2/chart2.vue

@@ -0,0 +1,222 @@
+<template>
+	<view class="content">
+
+		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts2" class="echarts"></view>
+
+	</view>
+</template>
+
+<script>
+	// let echartData = [{
+	// 		name: "报警",
+	// 		value: 1000
+	// 	},
+	// 	{
+	// 		name: "事件",
+	// 		value: 2920
+	// 	},
+	// 	{
+	// 		name: "隐患",
+	// 		value: 2200
+	// 	},
+
+	// ];
+	 let title = '总数';
+	// let total = echartData.reduce((a, b) => {
+	// 	return a + b.value * 1
+	// }, 0);
+
+	export default {
+		props:{
+			bindData:{
+				type:Object,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				option: {
+					color: ['#F67F32', '#3BD2BD', '#1DABFE'],
+
+					title: {
+						left: 'center'
+					},
+					tooltip: {
+						trigger: 'item',
+						// formatter: "{a} <br/>{b}: {c} ({d}%)"
+						formatter: "{b}: {c} "
+					},
+
+					title: [{ //aa标题
+						text: '{val|' +(parseInt(this.bindData.alarmCount)+parseInt(this.bindData.eventCount)+ parseInt(this.bindData.hiddenDangerCount))+ '}\n{name|' + title + '}',
+						top: '45%',
+						left: 'center',
+						textStyle: {
+							rich: {
+								name: {
+									fontSize: 14,
+									fontWeight: 'normal',
+									color: '#666666',
+									padding: [5, 0]
+								},
+								val: {
+									fontSize: 24,
+									color: '#333333',
+								}
+							}
+						}
+					}],
+					legend: { //aa图例
+						orient: 'horizontal',
+						icon: 'circle',
+						itemWidth: 12,
+						itemHeight: 12,
+						itemGap: 60,
+						// top: -10,
+						textStyle: {
+
+							fontSize: 14,
+							rich: {
+								name: {
+									fontSize: 18
+								},
+								value: {
+									fontSize: 14,
+									padding: [0, 20, 0, 5]
+								},
+
+							}
+						},
+					},
+					series: [{
+						name: '访问来源',
+						type: 'pie',
+						radius: ['40%', '60%'],
+						center: ['50%', '55%'],
+						itemStyle: {
+							normal: {
+								shadowBlur: 20,
+								shadowColor: '#F9F5F7',
+								shadowOffsetX: 0,
+								shadowOffsetY: 0,
+							},
+						},
+
+						data: [{
+								name: "报警",
+								value: this.bindData.alarmCount
+							},
+							{
+								name: "事件",
+								value: this.bindData.eventCount
+							},
+							{
+								name: "隐患",
+								value: this.bindData.hiddenDangerCount
+							},
+
+						],
+						emphasis: {
+							itemStyle: {
+								shadowBlur: 10,
+								shadowOffsetX: 0,
+								shadowColor: 'rgba(0, 0, 0, 0.5)'
+							}
+						},
+						labelLine: {
+							normal: {
+								length: 10, //aa折线长度
+								length2: 20, //aa折线长度
+
+							}
+						},
+						label: {
+							normal: {
+								formatter: '{b}：{d}%',
+								// formatter: params => {
+								// 	var percent = 0;
+								// 	var total = 0;
+								// 	for (var i = 0; i < echartData.length; i++) {
+								// 		total += echartData[i].value;
+								// 	}
+								// 	console.log(111);
+								// 	console.log(total);
+
+								// 	percent = ((params.value / total) * 100).toFixed(0);
+								// 	return params.name + ': ' + percent + '%';
+
+								// },
+
+							}
+						},
+					}]
+				}
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			changeOption() {
+				const data = this.option.series[0].data
+				// 随机更新示例数据
+				data.forEach((item, index) => {
+					data.splice(index, 1, Math.random() * 40)
+				})
+			},
+			onViewClick(options) {
+				console.log(options)
+			}
+		}
+	}
+</script>
+
+<script module="echarts" lang="renderjs">
+	let myChart
+	export default {
+		mounted() {
+			if (typeof window.echarts === 'function') {
+				this.initEcharts()
+			} else {
+				// 动态引入较大类库避免影响页面展示
+				const script = document.createElement('script')
+				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
+				script.src = '/static/echarts.min.js'
+				script.onload = this.initEcharts.bind(this)
+				document.head.appendChild(script)
+			}
+		},
+		methods: {
+			initEcharts() {
+				myChart = echarts.init(document.getElementById('echarts2'))
+				// 观测更新的数据在 view 层可以直接访问到
+				myChart.setOption(this.option)
+			},
+			updateEcharts(newValue, oldValue, ownerInstance, instance) {
+				// 监听 service 层数据变更
+				myChart.setOption(newValue)
+			},
+			onClick(event, ownerInstance) {
+				// 调用 service 层的方法
+				ownerInstance.callMethod('onViewClick', {
+					test: 'test'
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.echarts {
+		width: 100%;
+		height: 500rpx;
+		margin-top: 70rpx;
+	}
+</style>

pages/analyse/buildingCheck/components/chart3/chart3.vue

@@ -0,0 +1,236 @@
+<template>
+	<view class="content">
+		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts3" class="echarts"></view>
+
+	</view>
+</template>
+
+<script>
+	//start
+
+	//end
+
+
+	export default {
+		
+		
+		props:{
+			bindData:{
+				type:Object,
+				default: ''
+			}
+		},
+		
+		data() {
+			return {
+				option: {
+					// legend: {
+					//         data: ['bar', 'bar2', 'bar3', 'bar4'],
+					// 		color: ['#1ECC22', '#0FC6C8','#0D88F0', '#FF1313', '#FF522A' ],
+							
+					//     },
+					grid: {  //aa位置
+						top: '2%',
+						right: '8%',
+						bottom: '1%',
+						left: '17%',
+						
+					},
+
+					color: ['#1ECC22', '#0FC6C8','#0D88F0', '#FF1313', '#FF522A' ],
+					xAxis: [{
+						show: false
+					}],
+					yAxis: [{  //aay轴
+							axisTick: 'none',
+							axisLine: 'none',
+							axisLabel: {
+								verticalAlign: 'bottom',
+								align: 'bottom',
+								padding: [0, 0, 8, 5],
+								textStyle: {
+									color: '#333',
+									fontSize:'15'
+
+								}
+							},
+							data: ['正常','其他','预警','故障','离线'   ],
+
+						},
+						{
+							//左侧柱状图的Y轴
+							axisTick: 'none',
+							axisLine: 'none',
+							data: [this.bindData.normalCount,this.bindData.otherCount,this.bindData.earlyWarningCount,this.bindData.earlyWarningCount,this.bindData.offlineCount],
+							axisLabel: {
+								show: true,
+								verticalAlign: 'bottom',
+								align: 'right',
+								padding: [0, 10, 8, 0],
+								textStyle: {
+									color: '#333',
+									fontSize:'15'
+
+								},
+								formatter: function(value) {
+									return value 
+								}
+
+							}
+						},
+
+					],
+					series: [{
+							type: 'bar',
+							data: [this.bindData.normalCount, , , , ],
+							barWidth: 6,
+							itemStyle: {
+								normal: {
+									barBorderRadius: 6,
+								}
+							},
+							z: 2
+						}, {
+							type: 'bar',
+							data: [ ,this.bindData.otherCount, , , ],
+							barWidth: 6,
+							itemStyle: {
+								normal: {
+									barBorderRadius: 6,
+								}
+							},
+							z: 2
+						}, {
+							type: 'bar',
+							data: [ , ,this.bindData.earlyWarningCount, , ],
+							barWidth: 6,
+							itemStyle: {
+								normal: {
+									barBorderRadius: 6,
+								}
+							},
+							z: 2
+						},
+						{
+							type: 'bar',
+							data: [ , , ,this.bindData.faultCount, ],
+							barWidth: 6,
+							itemStyle: {
+								normal: {
+									barBorderRadius: 6,
+								}
+							},
+							z: 2
+						},
+						{
+							type: 'bar',
+							data: [ , , , ,this.bindData.offlineCount],
+							barWidth: 6,
+							itemStyle: {
+								normal: {
+									barBorderRadius: 6,
+								}
+							},
+							z: 2
+						},
+
+						{
+							type: 'bar',
+							barGap: '-100%',
+							data: [1000, 1000, 1000, 1000, 1000],
+							barWidth: 6,
+							itemStyle: {
+								normal: {
+									color: 'rgba(0,0,0, 0.15)',
+									barBorderRadius: 6,
+								}
+							},
+							z: 0
+						},
+					]
+				}
+			}
+			
+			
+		},
+		computed: {
+					// total:function(){
+					// 	 return parseInt(this.bindData.normalCount)+3
+					//  },
+					// onePersent:function(){
+					// 	 return parseInt(1/this.total*100)
+					//  },
+					 
+					 
+		},
+		onLoad() {
+			
+			// this.option.series.reverse()
+
+		},
+		
+		methods: {
+			changeOption() {
+				const data = this.option.series[0].data
+				// 随机更新示例数据
+				data.forEach((item, index) => {
+					data.splice(index, 1, Math.random() * 40)
+				})
+			},
+			onViewClick(options) {
+				console.log(options)
+			}
+		}
+	}
+</script>
+
+<script module="echarts" lang="renderjs">
+	let myChart
+	export default {
+		mounted() {
+			if (typeof window.echarts === 'function') {
+				this.initEcharts()
+			} else {
+				// 动态引入较大类库避免影响页面展示
+				const script = document.createElement('script')
+				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
+				script.src = '/static/echarts.min.js'
+				script.onload = this.initEcharts.bind(this)
+				document.head.appendChild(script)
+			}
+		},
+		methods: {
+			initEcharts() {
+				myChart = echarts.init(document.getElementById('echarts3'))
+				// 观测更新的数据在 view 层可以直接访问到
+				myChart.setOption(this.option)
+			},
+			updateEcharts(newValue, oldValue, ownerInstance, instance) {
+				// 监听 service 层数据变更
+				myChart.setOption(newValue)
+			},
+			onClick(event, ownerInstance) {
+				// 调用 service 层的方法
+				ownerInstance.callMethod('onViewClick', {
+					test: 'test'
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.echarts {
+		width: 100%;
+		height: 500rpx;
+		margin-top: 70rpx;
+		/* 	background:pink */
+	}
+</style>

pages/analyse/buildingCheck/components/chart4/chart4.vue

@@ -0,0 +1,39 @@
+<template>
+	<view class="content">
+		111{{nowData}}
+		<br>
+		222{{bindData}}
+
+	</view>
+</template>
+
+<script>
+	
+	
+	export default {
+		 name: 'chart4',
+		
+		props:{
+			bindData:{
+				type:Object,
+				default: ''
+			},
+		},
+		data() {
+			return {
+				nowData:this.bindData
+				}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+
+<style>
+	
+</style>

pages/analyse/monthDetail/components/chart.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="content">
 
-		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts2" class="echarts"></view>
+		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
 
 	</view>
 </template>
@@ -75,7 +75,7 @@
 					series: [{
 						name: '访问来源',
 						type: 'pie',
-						radius: ['0%', '60%'],
+						radius: ['40%', '60%'],
 						center: ['50%', '45%'],
 						itemStyle: {
 							normal: {
@@ -173,7 +173,7 @@
 		},
 		methods: {
 			initEcharts() {
-				myChart = echarts.init(document.getElementById('echarts2'))
+				myChart = echarts.init(document.getElementById('echarts'))
 				// 观测更新的数据在 view 层可以直接访问到
 				myChart.setOption(this.option)
 			},

pages/analyse/monthDetail/components/chart2.vue

@@ -1,92 +1,138 @@
 <template>
 	<view class="content">
-		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
+
+		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts2" class="echarts"></view>
 
 	</view>
 </template>
 
 <script>
 
+	 let title = '报警总数';
 
 	export default {
-		name: 'chart',
-		props: {
-
+		props:{
+			bindData:{
+				type:Object,
+				default: ''
+			}
 		},
 		data() {
 			return {
 				option: {
-					 series: [{
-					         type: 'gauge',
-							 //半径
-							 radius: '80%',	 
-					         detail: {
-					             color: '#FFC600',
-					             fontSize: 30,
-					             fontWeight: 'normal',
-					             offsetCenter: [0, '70%']  
-					         },
-					         data: [{
-					             value: 30,
-					             name: '任务完成率'
-					         }],
-							  
-							   startAngle: 210,
-							                  //结束角度。
-							                  endAngle: -30,
-							                  center: ['50%', '50%'],  //中心位置
-					         pointer: {
-					 	    	show: true,
-								 length: '70%',
-					 	    },
-					 	    title: {
-					 	        offsetCenter: [0, '30%'],
-					 	        fontSize: 15,
-					 	        color: '#444'
-					 	    },
-					 	    min:0,
-					         max:100,
-					         splitNumber: 10,
-							 //分隔线样式。
-							 splitLine: {
-								 show: false,
-							 },
-					         axisLine: {
-					             show: true,
-					             lineStyle: {
-									  width: 20,
-									  // color: [[1, 'red']]
-					                 // color: [
-					                 //     [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-					                 //             offset: 0.1,
-					                 //             color: "#E43F3D"
-					                 //         },
-					                 //         {
-					                 //             offset: 0.15,
-					                 //             color: "#E98E2C"
-					                 //         },
-					                 //         {
-					                 //             offset: 0.2,
-					                 //             color: "#DDBD4D"
-					                 //         },
-					                 //         {
-					                 //             offset: 0.8,
-					                 //             color: "#7CBB55"
-					                 //         },
-					                 //         {
-					                 //             offset: 1,
-					                 //             color: "#9CD6CE"
-					                 //         }
-					                 //     ])]
-					                 // ]
-					 
-					             }
-					         },
-					      
-					 
-					     }]}
-
-				
+					color: ['#00E9CD', '#FF5354'],
+
+					title: {
+						left: 'center'
+					},
+					tooltip: {
+						trigger: 'item',
+						formatter: "{a} <br/>{b}: {c} ({d}%)"
+					},
+
+					title:false,
+					//  [{ //aa标题
+					// 	text: '{val|' +(parseInt(this.bindData.wubao)+parseInt(this.bindData.unSolve)+ parseInt(this.bindData.truely))+ '}\n{name|' + title + '}',
+					// 	top: '35%',
+					// 	left: 'center',
+					// 	textStyle: {
+					// 		rich: {
+					// 			name: {
+					// 				fontSize: 14,
+					// 				fontWeight: 'normal',
+					// 				color: '#666666',
+					// 				padding: [5, 0]
+					// 			},
+					// 			val: {
+					// 				fontSize: 24,
+					// 				color: '#333333',
+					// 			}
+					// 		}
+					// 	}
+					// }],
+					legend: { //aa图例
+						orient: 'horizontal',
+						// icon: 'circle',
+						itemWidth: 12,
+						itemHeight: 12,
+						itemGap: 20,
+						 bottom: -6,
+						textStyle: {
+
+							fontSize: 14,
+							rich: {
+								name: {
+									fontSize: 18
+								},
+								value: {
+									fontSize: 14,
+									padding: [0, 20, 0, 5]
+								},
+
+							}
+						},
+					},
+					series: [{
+						name: '访问来源',
+						type: 'pie',
+						radius: ['40%', '60%'],
+						center: ['50%', '45%'],
+						itemStyle: {
+							normal: {
+								// shadowBlur: 20,
+								// shadowColor: '#F9F5F7',
+								// shadowOffsetX: 0,
+								// shadowOffsetY: 0,
+							},
+						},
+
+						data: [{
+								name: "已处理",
+								value: this.bindData.wubao
+							},
+							{
+								name: "未处理",
+								value: this.bindData.unSolve
+							},
+							
+
+						],
+						emphasis: {
+							itemStyle: {
+								shadowBlur: 10,
+								shadowOffsetX: 0,
+								// shadowColor: 'rgba(0, 0, 0, 0.5)'
+							}
+						},
+						labelLine: {
+							normal: {
+								length: 10, //aa折线长度
+								length2: 20, //aa折线长度
+
+							}
+						},
+						label: {
+							normal: {
+								
+								formatter: "{d}%"
+								// formatter: params => {
+								// 	var percent = 0;
+								// 	var total = 0;
+								// 	for (var i = 0; i < echartData.length; i++) {
+								// 		total += echartData[i].value;
+								// 	}
+								// 	console.log(111);
+								// 	console.log(total);
+
+								// 	percent = ((params.value / total) * 100).toFixed(0);
+								// 	return params.name + ': ' + percent + '%';
+
+								// },
+
+							}
+						},
+					}]
+				}
 			}
 		},
 		onLoad() {
@@ -117,16 +163,14 @@
 				// 动态引入较大类库避免影响页面展示
 				const script = document.createElement('script')
 				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
-				script.src = '/static/echarts.min.js'
+				script.src = '/static/echarts.js'
 				script.onload = this.initEcharts.bind(this)
 				document.head.appendChild(script)
 			}
 		},
 		methods: {
 			initEcharts() {
-
-
-				myChart = echarts.init(document.getElementById('echarts'))
+				myChart = echarts.init(document.getElementById('echarts2'))
 				// 观测更新的数据在 view 层可以直接访问到
 				myChart.setOption(this.option)
 			},
@@ -154,7 +198,7 @@
 
 	.echarts {
 		width: 100%;
-		height: 400rpx;
-
+		height: 500rpx;
+		margin-bottom: 70rpx;
 	}
 </style>

pages/analyse/monthDetail/components/chart3.vue

@@ -0,0 +1,203 @@
+<template>
+	<view class="content">
+
+		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echart3" class="echarts"></view>
+
+	</view>
+</template>
+
+<script>
+
+	 let title = '报警总数';
+
+	export default {
+		props:{
+			bindData:{
+				type:Object,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				option: {
+					color: ['#00E9CD', '#FF5354'],
+
+					title: {
+						left: 'center'
+					},
+					tooltip: {
+						trigger: 'item',
+						formatter: "{a} <br/>{b}: {c} ({d}%)"
+					},
+
+					title:false,
+					//  [{ //aa标题
+					// 	text: '{val|' +(parseInt(this.bindData.wubao)+parseInt(this.bindData.unSolve)+ parseInt(this.bindData.truely))+ '}\n{name|' + title + '}',
+					// 	top: '35%',
+					// 	left: 'center',
+					// 	textStyle: {
+					// 		rich: {
+					// 			name: {
+					// 				fontSize: 14,
+					// 				fontWeight: 'normal',
+					// 				color: '#666666',
+					// 				padding: [5, 0]
+					// 			},
+					// 			val: {
+					// 				fontSize: 24,
+					// 				color: '#333333',
+					// 			}
+					// 		}
+					// 	}
+					// }],
+					legend: { //aa图例
+						orient: 'horizontal',
+						// icon: 'circle',
+						itemWidth: 12,
+						itemHeight: 12,
+						itemGap: 20,
+						 bottom: -6,
+						textStyle: {
+
+							fontSize: 14,
+							rich: {
+								name: {
+									fontSize: 18
+								},
+								value: {
+									fontSize: 14,
+									padding: [0, 20, 0, 5]
+								},
+
+							}
+						},
+					},
+					series: [{
+						name: '访问来源',
+						type: 'pie',
+						radius: ['40%', '60%'],
+						center: ['50%', '45%'],
+						itemStyle: {
+							normal: {
+								// shadowBlur: 20,
+								// shadowColor: '#F9F5F7',
+								// shadowOffsetX: 0,
+								// shadowOffsetY: 0,
+							},
+						},
+
+						data: [{
+								name: "已处理",
+								value: this.bindData.wubao
+							},
+							{
+								name: "未处理",
+								value: this.bindData.unSolve
+							},
+							
+
+						],
+						emphasis: {
+							itemStyle: {
+								shadowBlur: 10,
+								shadowOffsetX: 0,
+								// shadowColor: 'rgba(0, 0, 0, 0.5)'
+							}
+						},
+						labelLine: {
+							normal: {
+								length: 10, //aa折线长度
+								length2: 20, //aa折线长度
+
+							}
+						},
+						label: {
+							normal: {
+								
+								formatter: "{d}%"
+								// formatter: params => {
+								// 	var percent = 0;
+								// 	var total = 0;
+								// 	for (var i = 0; i < echartData.length; i++) {
+								// 		total += echartData[i].value;
+								// 	}
+								// 	console.log(111);
+								// 	console.log(total);
+
+								// 	percent = ((params.value / total) * 100).toFixed(0);
+								// 	return params.name + ': ' + percent + '%';
+
+								// },
+
+							}
+						},
+					}]
+				}
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			changeOption() {
+				const data = this.option.series[0].data
+				// 随机更新示例数据
+				data.forEach((item, index) => {
+					data.splice(index, 1, Math.random() * 40)
+				})
+			},
+			onViewClick(options) {
+				console.log(options)
+			}
+		}
+	}
+</script>
+
+<script module="echarts" lang="renderjs">
+	let myChart
+	export default {
+		mounted() {
+			if (typeof window.echarts === 'function') {
+				this.initEcharts()
+			} else {
+				// 动态引入较大类库避免影响页面展示
+				const script = document.createElement('script')
+				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
+				script.src = '/static/echarts.js'
+				script.onload = this.initEcharts.bind(this)
+				document.head.appendChild(script)
+			}
+		},
+		methods: {
+			initEcharts() {
+				myChart = echarts.init(document.getElementById('echart3'))
+				// 观测更新的数据在 view 层可以直接访问到
+				myChart.setOption(this.option)
+			},
+			updateEcharts(newValue, oldValue, ownerInstance, instance) {
+				// 监听 service 层数据变更
+				myChart.setOption(newValue)
+			},
+			onClick(event, ownerInstance) {
+				// 调用 service 层的方法
+				ownerInstance.callMethod('onViewClick', {
+					test: 'test'
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.echarts {
+		width: 100%;
+		height: 500rpx;
+	}
+</style>

pages/analyse/monthDetail/components/chart4.vue

@@ -0,0 +1,203 @@
+<template>
+	<view class="content">
+
+		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts4" class="echarts"></view>
+
+	</view>
+</template>
+
+<script>
+
+	 let title = '报警总数';
+
+	export default {
+		props:{
+			bindData:{
+				type:Object,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				option: {
+					color: ['#00E9CD', '#FF5354'],
+
+					title: {
+						left: 'center'
+					},
+					tooltip: {
+						trigger: 'item',
+						formatter: "{a} <br/>{b}: {c} ({d}%)"
+					},
+
+					title:false,
+					//  [{ //aa标题
+					// 	text: '{val|' +(parseInt(this.bindData.wubao)+parseInt(this.bindData.unSolve)+ parseInt(this.bindData.truely))+ '}\n{name|' + title + '}',
+					// 	top: '35%',
+					// 	left: 'center',
+					// 	textStyle: {
+					// 		rich: {
+					// 			name: {
+					// 				fontSize: 14,
+					// 				fontWeight: 'normal',
+					// 				color: '#666666',
+					// 				padding: [5, 0]
+					// 			},
+					// 			val: {
+					// 				fontSize: 24,
+					// 				color: '#333333',
+					// 			}
+					// 		}
+					// 	}
+					// }],
+					legend: { //aa图例
+						orient: 'horizontal',
+						// icon: 'circle',
+						itemWidth: 12,
+						itemHeight: 12,
+						itemGap: 20,
+						 bottom: -6,
+						textStyle: {
+
+							fontSize: 14,
+							rich: {
+								name: {
+									fontSize: 18
+								},
+								value: {
+									fontSize: 14,
+									padding: [0, 20, 0, 5]
+								},
+
+							}
+						},
+					},
+					series: [{
+						name: '访问来源',
+						type: 'pie',
+						radius: ['40%', '60%'],
+						center: ['50%', '45%'],
+						itemStyle: {
+							normal: {
+								// shadowBlur: 20,
+								// shadowColor: '#F9F5F7',
+								// shadowOffsetX: 0,
+								// shadowOffsetY: 0,
+							},
+						},
+
+						data: [{
+								name: "已处理",
+								value: this.bindData.wubao
+							},
+							{
+								name: "未处理",
+								value: this.bindData.unSolve
+							},
+							
+
+						],
+						emphasis: {
+							itemStyle: {
+								shadowBlur: 10,
+								shadowOffsetX: 0,
+								// shadowColor: 'rgba(0, 0, 0, 0.5)'
+							}
+						},
+						labelLine: {
+							normal: {
+								length: 10, //aa折线长度
+								length2: 20, //aa折线长度
+
+							}
+						},
+						label: {
+							normal: {
+								
+								formatter: "{d}%"
+								// formatter: params => {
+								// 	var percent = 0;
+								// 	var total = 0;
+								// 	for (var i = 0; i < echartData.length; i++) {
+								// 		total += echartData[i].value;
+								// 	}
+								// 	console.log(111);
+								// 	console.log(total);
+
+								// 	percent = ((params.value / total) * 100).toFixed(0);
+								// 	return params.name + ': ' + percent + '%';
+
+								// },
+
+							}
+						},
+					}]
+				}
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			changeOption() {
+				const data = this.option.series[0].data
+				// 随机更新示例数据
+				data.forEach((item, index) => {
+					data.splice(index, 1, Math.random() * 40)
+				})
+			},
+			onViewClick(options) {
+				console.log(options)
+			}
+		}
+	}
+</script>
+
+<script module="echarts" lang="renderjs">
+	let myChart
+	export default {
+		mounted() {
+			if (typeof window.echarts === 'function') {
+				this.initEcharts()
+			} else {
+				// 动态引入较大类库避免影响页面展示
+				const script = document.createElement('script')
+				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
+				script.src = '/static/echarts.js'
+				script.onload = this.initEcharts.bind(this)
+				document.head.appendChild(script)
+			}
+		},
+		methods: {
+			initEcharts() {
+				myChart = echarts.init(document.getElementById('echarts4'))
+				// 观测更新的数据在 view 层可以直接访问到
+				myChart.setOption(this.option)
+			},
+			updateEcharts(newValue, oldValue, ownerInstance, instance) {
+				// 监听 service 层数据变更
+				myChart.setOption(newValue)
+			},
+			onClick(event, ownerInstance) {
+				// 调用 service 层的方法
+				ownerInstance.callMethod('onViewClick', {
+					test: 'test'
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.echarts {
+		width: 100%;
+		height: 500rpx;
+	}
+</style>

pages/analyse/monthDetail/monthDetail.vue

@@ -253,6 +253,7 @@
 				</view>
 				<chart :bindData="staticData"></chart>
 				<view class="chart-tit">火灾告警处理情况饼图</view>
+				<chart2 :bindData="staticData2"></chart2>
 				<br>
 			</view>
 
@@ -267,8 +268,10 @@
 			</view>
 			
 			<view class="padding text-center">
-			
 				<view class="chart-tit">水系统告警处理情况饼图</view>
+				<chart3 :bindData="staticData2"></chart3>
+			
+				
 				<br>
 			</view>
 			
@@ -289,6 +292,7 @@
 					RTU系统告警处理情况饼图
 				</view>
 				<br>
+				<chart4 :bindData="staticData2"></chart4>
 			</view>
 			<view  class="padding text-df">
 				<view>未安装此设备。</view>
@@ -335,9 +339,11 @@
 <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
+			chart,chart2,chart3,chart4
 		},
 		data() {
 			return {
@@ -345,6 +351,11 @@
 					wubao:9,
 					unSolve:6,
 					truely:20
+				},
+				staticData2: {
+					wubao:9,
+					unSolve:6,
+					truely:20
 				}
 
 

pages/setting/building/building.vue

@@ -93,7 +93,7 @@
 				消防设施平面布置图
 			</view>
 			<view class="padding-lr">
-				<img src="../../../static/video-img.png" alt="" width="100%">
+				<img src="../../../static/building1.png" alt="" width="100%">
 			</view>
 		</view>
 		
@@ -104,7 +104,7 @@
 				建筑平面图
 			</view>
 			<view class="padding-lr padding-bottom-lg">
-				<img src="../../../static/video-img.png" alt="" width="100%">
+				<img src="../../../static/building2.png" alt="" width="100%">
 				<br><br>
 			</view>
 		</view>

pages/weiBao/plan/components/chart.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script>
+	import echarts from 'static/echarts.min.js'
 	export default {
 		name: 'chart',
 		props: {

pages/weiBao/plan/components/chart2.vue

@@ -5,45 +5,26 @@
 
 	</view>
 </template>
-<!-- <script src="/static/echarts.min.js"></script> -->
-<script>
-	// var abcolor = new echarts.graphic.LinearGradient(
-	// 	0, 0, 0, 1,
-	// 	[{
-	// 			offset: 0,
-	// 			color: '#2378f7'
-	// 		},
-	// 		{
-	// 			offset: 0.7,
-	// 			color: '#2378f7'
-	// 		},
-	// 		{
-	// 			offset: 1,
-	// 			color: '#83bff6'
-	// 		}
-	// 	]
-	// )
-</script>
 
 
 <script>
+	import echarts from 'static/echarts.min.js'
 	
-	var abcolor = new echarts.graphic.LinearGradient(
-		0, 0, 0, 1,
-		[{
-				offset: 0,
-				color: '#2378f7'
-			},
-			{
-				offset: 0.7,
-				color: '#2378f7'
-			},
-			{
-				offset: 1,
-				color: '#83bff6'
-			}
-		]
-	)
+	var abcolor =  new echarts.graphic.LinearGradient(
+                                0, 1, 1, 0, [{
+                                        offset: 0,
+                                        color: '#FF1F48',
+                                    },
+									{
+									        offset: .4,
+									        color: '#D6FF1F',
+									    },
+                                    {
+                                        offset: 1,
+                                        color: '#1FFBFF',
+                                    }
+                                ]
+                            )
 	export default {
 		name: 'chart',
 		props: {
@@ -54,11 +35,17 @@
 				option: {
 					series: [{
 						type: 'gauge',
+
+						axisLabel: {
+							distance: -12 //aa 数字位置
+						},
 						//半径
-						radius: '80%',
+						radius: '95%',
 						detail: {
+							 formatter: '{value}%',
 							color: '#FFC600',
 							fontSize: 30,
+							fontFamily: 'IMPACT',
 							fontWeight: 'normal',
 							offsetCenter: [0, '70%']
 						},
@@ -67,17 +54,18 @@
 							name: '任务完成率'
 						}],
 
-						startAngle: 210,
-						//结束角度。
-						endAngle: -30,
+						//起始角度 （aa弧度）
+						startAngle: 220,
+						endAngle: -40,
+
 						center: ['50%', '50%'], //中心位置
 						pointer: {
 							show: true,
-							length: '70%',
+							length: '70%', //指针长度
 						},
 						title: {
-							offsetCenter: [0, '30%'],
-							fontSize: 15,
+							offsetCenter: [0, '40%'], //aa文字位置
+							fontSize: 14,
 							color: '#444'
 						},
 						min: 0,
@@ -87,10 +75,12 @@
 						splitLine: {
 							show: false,
 						},
+						
+
 						axisLine: {
 							show: true,
 							lineStyle: {
-								width: 20,
+								width: 14,
 								color: [
 									[1, abcolor]
 								]

pages/weiBao/plan/plan.vue

@@ -2,6 +2,7 @@
 	<view>
 		<view class="margin bg-white plan-sec text-center">
 			<view class="plan-tit padding-top-lg">任务名称：ui测试</view>
+			<br>
 			<chart2></chart2>
 		</view>