对接数据

common/common.scss

@@ -6,6 +6,11 @@ body {
 radio,checkbox {
 			transform: scale(0.7)
 }
+.inOneLine{
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 /* 画面监控引入特殊字体 */
 	@font-face {
 	  font-family: 'FANDOLFANG-REGULAR';  /* project id 2394829 */
@@ -103,7 +108,7 @@ radio,checkbox {
 
 .cu-list.menu-avatar>.cu-item .content {
 	left: 120rpx;
-	width: 460rpx;
+	width: 600rpx;
 }
 
 .unProcess,.error {

components/list-test/list-test.vue

@@ -19,13 +19,16 @@
 		<!-- 站点列表start -->
 		<view class="site-items">
 			<view class="cu-list menu-avatar">
-				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in nowData"
+				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in bindData"
 				 :key="index" :data-target="'move-box-' + index">
 					<view class="cu-avatar round lg"  v-bind:style="{ 'background-image': 'url(' + nowIcon+ ')' }"></view>
-					<view class="content"  @tap="goNowUrl" v-if="nowType==0">
+					
+					
+					<view class="content" v-if="nowType==1"  @tap="goNowUrl" >
 						<view class="text-grey site-tit">
-							{{item.siteName}}
-							<text> 
+							<text >{{item.siteName}}</text>
+							
+							<text > 
 							   （{{nowNum}}）
 							</text>
 						</view>
@@ -36,9 +39,12 @@
 							{{item.siteName}}
 							<text>（共3个设备）</text>
 						</view>
-						<view class="showDetail" v-if="item.isShow" @tap.stop="goSiteDetail" >查看详情</view>
+						<view class="showDetail" v-if="item.isShow" @tap.stop="goNowDetailUrl" >查看详情</view>
 					</view>
 					
+					
+					
+					
 					<view class="nav-right num">
 						<view class="text-grey">
 							<text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
@@ -69,6 +75,10 @@
 				type:String,
 				default: ''
 			},
+			bindDetailUrl:{
+				type:String,
+				default: ''
+			},
 			bindIcon:{
 				type:String,
 				default: ''
@@ -83,6 +93,7 @@
 				modalName: null,
 				nowData:this.bindData,
 				nowUrl:this.bindUrl,
+				nowDetailUrl:this.bindDetailUrl,
 				nowIcon:this.bindIcon,
 				nowNum:this.bindNum,
 				nowType:this.bindType
@@ -95,7 +106,44 @@
 				uni.stopPullDownRefresh();
 			}, 1000);
 		},
+		
+		computed: {
+			newSiteListData() {
+				return this.nowData.map(item => {
+					this.$set(item, "isShow", false)
+					return item
+				})
+			}
+		
+		},
+		
+		mounted() {
+			document.addEventListener('click', (e) => {
+				if (e.target.className != 'showDetail') {
+					this.nowData.forEach(item => {
+						item.isShow = false
+					})
+				}
+			})
+		},
 		methods:{
+			
+			
+			// 隐藏显示
+			showDetail(e) {
+				// alert(1);
+				// 存储点击那一项的状态
+				const nowStatu = e.isShow;
+				// 将每一项列表的isShow设置为false,让所有的列表都隐藏
+				this.nowData.forEach(item => {
+					item.isShow = false
+				})
+				// 用于再次点击该项的取反
+				e.isShow = !nowStatu
+			},
+			
+			
+			
 			// 页面跳转
 			goNowUrl() {
 				uni.navigateTo({
@@ -105,6 +153,15 @@
 					complete: () => {}
 				});
 			},
+			
+			goNowDetailUrl() {
+				uni.navigateTo({
+					url: this.nowDetailUrl,
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			},
 			InputFocus(e) {
 				this.InputBottom = e.detail.height
 			},
@@ -116,5 +173,18 @@
 </script>
 
 <style>
+	
+	.showDetail {
+		position: absolute;
+		background: #fff;
+		box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
+		padding: 0rpx 32rpx;
+		border-radius: 10rpx;
+		top: 42rpx;
+		right: 0%;
+		z-index: 3000000;
+		font-size: 28rpx;
+	
+	}
 
 </style>

pages/add/add.vue

@@ -92,13 +92,13 @@
 					<text class="necessary">*</text>
 					站点:
 				</view>
-				<view style="position:relative">
-					<input name="siteName" v-model="formMess.siteName" @focus="test" @input="handleInput()" placeholder="请选择"></input>
+				<view style="position:relative" class="innerZd">
+					<input name="siteName" v-model="formMess.siteName" @click="test" @focus="focusfns"  @input="handleInput()" placeholder="请选择"></input>
 					
 					<view class="siteItems" v-if="isShow">
-						<view class=" site-item" v-if="!newDataList.length">暂无结果</view>
+						<view class=" site-item" v-if="!siteItemData.length">暂无结果</view>
 						
-						<view class="site-item" v-for="(item,index) in newDataList" @click="add(item,index)" :key="index">{{item}}</view>
+						<view class="site-item" v-for="(item,index) in siteItemData" @click="add(item,index)" :key="index">{{item}}</view>
 					</view>
 					<view style="width:500rpx" class="selectedBox">
 						<button class="cu-btn  sm margin-xs" v-for="(item,index) in selectedData" @click="deleteItem(item,index)">
@@ -158,13 +158,14 @@
 				},
 
 				// 站点多选下拉
-				siteItemData: ["站点一", "站点二", "站点三", "站点四", "站点五", "站点六"],
-				newDataList: ["站点一", "站点二", "站点三", "站点四", "站点五", "站点六"],
+				siteItemDataOrigin: ["站点一", "站点二", "站点三", "站点四", "站点五", "站点六"],
+				// newDataList: [],
 
 				selectedData: [],
-				// 站点多选下拉 end
-
-
+				// 站点多选下拉 end
+				
+				siteItemData: ["站点一", "站点二", "站点三", "站点四", "站点五", "站点六"],
+				
 			}
 		},
 		onLoad: function(option) {
@@ -183,20 +184,45 @@
 					title: '权限新增'
 				});
 			}
+		},
+		
+		mounted() {
+			document.addEventListener('click', (e) => {
+				if (e.target.className != 'uni-input-input') {
+					this.isShow = false;
+				}
+			});
 		},
 		methods: {
 			add: function(item, index) {
 				this.selectedData.push(item);
-				this.newDataList.splice(index, 1);
 				this.isShow = false;
-				this.formMess.siteName=''
+				this.formMess.siteName=''
+				this.siteItemData.splice(index, 1);
+				
 			},
 			deleteItem: function(item, index) {
-				// this.selectedData.remove(item);
-				this.selectedData.splice(index, 1);
-				this.newDataList.push(item);
+				// this.selectedData.remove(item);
+				
 				
-
+				this.selectedData.splice(index, 1);
+				this.siteItemDataOrigin.push(item);
+				
+				
+				
+				//将元素根据搜索内容过滤出来  这里改变了siteItemData
+				
+				this.siteItemData = this.getNotSelectItem();
+				
+				
+				this.siteItemData = this.siteItemData.filter(item => item.indexOf(this.formMess.siteName) > -1);
+				// console.log('这是过滤来的');
+				// console.log(this.siteItemData);
+				
+				// this.selectedData = newlist;
+				// console.log(this.selectedData)
+				
+			
 			},
 
 			// 站点多选下拉
@@ -206,14 +232,46 @@
 			test2: function() {
 				this.isShow = false;
 			},
-			handleInput() {
-				// var newlist = this.siteItemData.filter(item => item.indexOf(this.formMess.siteName) > -1)
-				// this.newDataList = newlist;
-				// console.log(this.newDataList)
+			handleInput() {
+				// this.getNotSelectItem();
+				
+				//将元素根据搜索内容过滤出来  这里改变了siteItemData
+				
+				this.siteItemData = this.getNotSelectItem();
+				this.siteItemData = this.siteItemData.filter(item => item.indexOf(this.formMess.siteName) > -1);
+				
+				// this.selectedData = newlist;
+				// console.log(this.selectedData)
+				
+			},
+			// 站点多选下拉 end
+			
+			
+			
+			getNotSelectItem(){
+				
+				let ok1 = this.siteItemDataOrigin;
+				let ok2 = this.selectedData;
+				// console.log('选中值',ok2);
+				// console.log('全部值',ok1);
+				
+				
+				if(ok2.length){
+					for(let i = 0; i < ok2.length; i++){
+						for(let j = 0; j < ok1.length; j++){
+							        if(ok1[j] === ok2[i]){//值已经被选中
+							            ok1.splice(j, 1);
+							        }
+							}
+						}
+						
+				}
+				
+				 
+				 return ok1;
+				
+			
 			},
-			// 站点多选下拉 end
-
-
 
 			formSubmit: function(e) {
 				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
@@ -244,7 +302,17 @@
 			},
 			formReset: function(e) {
 				console.log('清空数据')
-			}
+			},
+			focusfns:function(e){
+					// this.getNotSelectItem();
+					
+					//将元素根据搜索内容过滤出来  这里改变了siteItemData
+					
+					this.siteItemData = this.getNotSelectItem();
+					
+					
+					this.siteItemData = this.siteItemData.filter(item => item.indexOf(this.formMess.siteName) > -1);
+			},
 
 
 

pages/index/components/chart/chart.vue

@@ -1,51 +1,133 @@
 <template>
 	<view class="content">
-
 		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
-	
+
 	</view>
 </template>
 
-<script>
-	
-	
-	
-	export default {
+<script>
+	// let echartData = [{
+	// 		name: "电力监测",
+	// 		value: 1000
+	// 	},
+	// 	{
+	// 		name: "视频监测",
+	// 		value: 2920
+	// 	},
+	// ];
+	let title = '报警总数';
+	// let total = echartData.reduce((a, b) => {
+	// 	return a + b.value * 1
+	// }, 0);
+
+
+	export default {
+		 name: 'chart',
+		props:{
+			bindData:{
+				type:Object,
+				default: ''
+			}
+		},
 		data() {
 			return {
 				option: {
-					
-					 title: {
-					        left: 'center'
-					    },
-					    tooltip: {
-					        trigger: 'item'
-					    },
-					    legend: {
-					        // orient: 'vertical',
-					        left: 'center',
-					    },
-						color:[ '#3C8BF0', '#dd514c'],
-					    series: [
-					        {
-					            name: '访问来源',
-					            type: 'pie',
-					           radius: ['35%', '60%'],
-					           center: ['50%', '50%'],
-					            data: [
-					                {value: 1048, name: '电力监测'},
-					                {value: 735, name: '视频监测'},
-					               
-					            ],
-					            emphasis: {
-					                itemStyle: {
-					                    shadowBlur: 10,
-					                    shadowOffsetX: 0,
-					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-					                }
-					            }
-					        }
-					    ]
+					color: ['#67e0e3', '#e062ae'],
+					tooltip: {
+						trigger: 'item',
+						formatter: "{a} <br/>{b}: {c} ({d}%)"
+					},
+					title: [{ //aa标题
+						text: '{val|' + this.bindData.integratedAlarmCount + '}\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%'], //aa环装圈粗细
+						center: ['50%', '55%'],
+
+						itemStyle: {
+							normal: {
+								shadowBlur: 20,
+								shadowColor: '#F9F5F7',
+								shadowOffsetX: 0,
+								shadowOffsetY: 0,
+							},
+						},
+
+						data: [{
+								name: "电力监测",
+								value: this.bindData.smartElectricityCount
+							},
+							{
+								name: "视频监测",
+								value:  this.bindData.videoMonitoringCount
+							},
+
+						],
+
+						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 + '%';
+								// },
+							}
+						},
+					}]
 				}
 			}
 		},
@@ -88,12 +170,12 @@
 				// 观测更新的数据在 view 层可以直接访问到
 				myChart.setOption(this.option)
 			},
-			updateEcharts(newValue, oldValue, ownerInstance, instance) {
+			updateEcharts(newValue, oldValue, ownerInstance, instance) {
 				// 监听 service 层数据变更
 				myChart.setOption(newValue)
 			},
-			onClick(event, ownerInstance) {
-				// 调用 service 层的方法
+			onClick(event, ownerInstance) {
+				// 调用 service 层的方法
 				ownerInstance.callMethod('onViewClick', {
 					test: 'test'
 				})
@@ -112,7 +194,7 @@
 
 	.echarts {
 		width: 100%;
-		height: 500rpx;
-		margin-top:70rpx;
+		height: 500rpx;
+		margin-top: 70rpx;
 	}
 </style>

pages/index/components/chart2/chart2.vue

@@ -7,41 +7,47 @@
 </template>
 
 <script>
-	let echartData = [{
-			name: "报警",
-			value: 1000
-		},
-		{
-			name: "事件",
-			value: 2920
-		},
-		{
-			name: "隐患",
-			value: 2200
-		},
+	// 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);
+	// ];
+	 let title = '总数';
+	// let total = echartData.reduce((a, b) => {
+	// 	return a + b.value * 1
+	// }, 0);
 
-	export default {
+	export default {
+		props:{
+			bindData:{
+				type:Object,
+				default: ''
+			}
+		},
 		data() {
 			return {
-				option: {
-					color: ['#F67F32', '#3BD2BD', '#1DABFE'],
-					
+				option: {
+					color: ['#F67F32', '#3BD2BD', '#1DABFE'],
+
 					title: {
 						left: 'center'
 					},
 					tooltip: {
 						trigger: 'item',
 						formatter: "{a} <br/>{b}: {c} ({d}%)"
-					},
-					
+					},
+
 					title: [{ //aa标题
-						text: '{val|' + total + '}\n{name|' + title + '}',
+						text: '{val|' + this.bindData.alarmCount+this.bindData.eventCount+ this.bindData.hiddenDangerCount+ '}\n{name|' + title + '}',
 						top: '45%',
 						left: 'center',
 						textStyle: {
@@ -88,49 +94,59 @@
 						center: ['50%', '55%'],
 						itemStyle: {
 							normal: {
-
 								shadowBlur: 20,
 								shadowColor: '#F9F5F7',
 								shadowOffsetX: 0,
 								shadowOffsetY: 0,
-
-
 							},
 						},
 
-						data: echartData,
+						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: '{a|{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 + '%';
-						
-								},
-								
-							}
+						},
+						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 + '%';
+
+								// },
+
+							}
 						},
 					}]
 				}

pages/index/components/chart3/chart3.vue

@@ -12,7 +12,13 @@
 	//end
 
 
-	export default {
+	export default {
+		props:{
+			bindData:{
+				type:Object,
+				default: ''
+			}
+		},
 		data() {
 			return {
 				option: {
@@ -46,14 +52,14 @@
 
 								}
 							},
-							data: ['正常 1569','其他 569','预警 156','故障 0','离线 12'   ],
+							data: ['正常 '+this.bindData.normalCount+'','其他 '+this.bindData.otherCount+'','预警 '+this.bindData.earlyWarningCount+'','故障 '+this.bindData.faultCount+'','离线 '+this.bindData.offlineCount+''   ],
 
 						},
 						{
 							//左侧柱状图的Y轴
 							axisTick: 'none',
 							axisLine: 'none',
-							data: [70,20,8,0,12],
+							data: [0,0,0,0,0],
 							axisLabel: {
 								show: true,
 								verticalAlign: 'bottom',
@@ -74,7 +80,7 @@
 					],
 					series: [{
 							type: 'bar',
-							data: [1357, , , , ],
+							data: ['+this.bindData.normalCount+', , , , ],
 							barWidth: 6,
 							itemStyle: {
 								normal: {
@@ -84,7 +90,7 @@
 							z: 2
 						}, {
 							type: 'bar',
-							data: [ ,1260, , , ],
+							data: [ ,'+this.bindData.normalCount+', , , ],
 							barWidth: 6,
 							itemStyle: {
 								normal: {
@@ -94,7 +100,7 @@
 							z: 2
 						}, {
 							type: 'bar',
-							data: [ , ,36, , ],
+							data: [ , ,'+this.bindData.normalCount+', , ],
 							barWidth: 6,
 							itemStyle: {
 								normal: {
@@ -105,7 +111,7 @@
 						},
 						{
 							type: 'bar',
-							data: [ , , ,36, ],
+							data: [ , , ,'+this.bindData.normalCount+', ],
 							barWidth: 6,
 							itemStyle: {
 								normal: {
@@ -116,7 +122,7 @@
 						},
 						{
 							type: 'bar',
-							data: [ , , , ,100],
+							data: [ , , , ,'+this.bindData.normalCount+'],
 							barWidth: 6,
 							itemStyle: {
 								normal: {

pages/index/components/chart4/chart4.vue

@@ -1,190 +1,39 @@
 <template>
-	<view class="content">
-
-		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
+	<view class="content">
+		111{{nowData}}
+		<br>
+		222{{bindData}}
 
 	</view>
 </template>
 
 <script>
 	
-	let echartData = [{
-			name: "电力监测",
-			value: 1000
-		},
-		{
-			name: "视频监测",
-			value: 2920
+	
+	export default {
+		 name: 'chart4',
+		
+		props:{
+			bindData:{
+				type:Object,
+				default: ''
+			},
 		},
-		
-
-	];
-	let title = '报警总数';
-	let total = echartData.reduce((a, b) => {
-		return a + b.value * 1
-	}, 0);
-
-	export default {
 		data() {
-			return {
-				option: {
-					color: ['#67e0e3', '#e062ae'],
-					tooltip: {
-						trigger: 'item',
-						                formatter: "{a} <br/>{b}: {c} ({d}%)"
-					},
-
-					title: [{ //aa标题
-						text: '{val|' + total + '}\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%'], //aa环装圈粗细
-						center: ['50%', '55%'],
-
-						itemStyle: {
-							normal: {
-								shadowBlur: 20,
-								shadowColor: '#F9F5F7',
-								shadowOffsetX: 0,
-								shadowOffsetY: 0,
-
-								
-							},
-						},
-
-						data: echartData,
-						
-						labelLine: {
-							normal: {
-								length: 10, //aa折线长度
-								length2: 20, //aa折线长度
-
-							}
-						},
-						label: {
-							normal: {
-								// formatter: '{a|{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 + '%';
-								},
-							}
-						},
-					}]
+			return {
+				nowData:this.bindData
 				}
-			}
 		},
 		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('echarts'))
-				// 观测更新的数据在 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/index/index.vue

@@ -3,33 +3,31 @@
 		<view class="searchSelect shadow" v-if="flag">
 			<view class="cu-bar search bg-white">
 				<view class="search-form round">
-					<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="" confirm-type="search"></input>
+					<input @focus="InputFocus" @blur="InputBlur" @input="handleInput()" v-model="searchInput" :adjust-position="false"
+					 type="text" placeholder="" confirm-type="search"></input>
 					<text class="cuIcon-search "></text>
 				</view>
 			</view>
-			<view>
-				<view class="select-item">虹泾总部园</view>
-				<view class="select-item">上海永天科技</view>
-				<view class="select-item">AAAAA</view>
-				<view class="select-item">BBBBBBB</view>
+			<view class="select-items">
+				<view class="select-item" v-for="(item,index) in searchList" @click="clickSelectItem(item,index)" :key="index">{{item}}</view>
 			</view>
 		</view>
 		<view class="section1 section bg-white padding-xs">
 			<view class=" static-tabs grid margin-bottom text-center col-3 margin-top-sm margin-bottom-sm">
+
 				<view :class="['padding-sm ',Inv==0?'active':'']" @click="Inv=0">报警信息统计</view>
 				<view :class="['padding-sm ',Inv==1?'active':'']" @click="Inv=1">数据等级统计</view>
 				<view :class="['padding-sm ',Inv==2?'active':'']" @click="Inv=2">设备运行状态</view>
 			</view>
-			<view class="time text-center">统计时段：2020年09月12日～2020年11月11日
+			<view class="time text-center">统计时段：{{staticData.statisticalPeriod}}
 			</view>
 			<view>
 				<view v-if="Inv == 0">
-					<!-- <chart></chart> -->
-					<chart4></chart4>
+					<chart :bindData="staticData" v-if="hackReset"></chart>
 				</view>
 				<view v-if="Inv == 1">
 
-					<chart2></chart2>
+					<chart2 :bindData="staticData"></chart2>
 				</view>
 				<view v-if="Inv == 2" class="chart3-box">
 					<ul class="chart3-icon">
@@ -49,8 +47,7 @@
 							<image src="../../static/chart3-5.png" style="width:64rpx;height:64rpx"></image>
 						</li>
 					</ul>
-					<chart3>
-
+					<chart3 :bindData="staticData">
 					</chart3>
 				</view>
 			</view>
@@ -88,11 +85,31 @@
 
 		},
 		data() {
-			return {
+			return {
+				componentKey:0,
+				arr: [],
+				searchInput: '',
 				flag: false,
 				// 宫格列表数据
 				cuIconList: json.cuIconList,
 				Inv: 0,
+				searchList: [],
+				searchList2: [],
+				staticData: {}
+				// staticData: {
+				// 	"statisticalPeriod": "2021-02-22~2021-03-22",
+				// 	"smartElectricityCount": "5",
+				// 	"videoMonitoringCount": "75",
+				// 	"alarmCount": 80,
+				// 	"eventCount": 0,
+				// 	"hiddenDangerCount": 0,
+				// 	"offlineCount": "0",
+				// 	"faultCount": 0,
+				// 	"earlyWarningCount": 0,
+				// 	"otherCount": 0,
+				// 	"normalCount": "0",
+				// 	"integratedAlarmCount": 80
+				// }
 			};
 		},
 		onNavigationBarButtonTap(e) {
@@ -126,8 +143,49 @@
 			}
 		},
 
-		onLoad() {},
+		onLoad() {
+			this.hackReset = false;
+			  this.$nextTick(() => {
+			       this.hackReset = true;
+			  })
+			this.getData();
+			this.getSearchList();
+		},
 		methods: {
+			async getData() {
+				const res = await uni.request({
+					url: 'https://iot.usky.cn/USKYOF/USKYOF.php/Home/Index/getDataStatistics',
+				})
+				console.log(res[1].data.data[0]);
+				this.staticData = res[1].data.data[0]
+			},
+
+			getSearchList(data) {
+				uni.request({
+					url: 'https://iot.usky.cn/USKYOF/USKYOF.php/Home/Index/getSiteDropDownBox', //仅为示例，并非真实接口地址。
+					method: 'POST',
+				
+					success: (res) => {
+						res.data.data.forEach(item => {
+							this.searchList.push(item.siteName)
+							this.searchList2.push(item.siteName)
+						});
+					}
+				});
+			},
+
+			clickSelectItem(item, index) {
+				// alert(index);
+				alert(item);
+				this.getSearchList();
+			},
+
+			handleInput() {
+				// this.searchList = this.searchList.filter(item => item.indexOf(this.searchInput) > -1);
+
+				var newlist = this.searchList2.filter(item => item.indexOf(this.searchInput) > -1)
+				this.searchList = newlist
+			},
 
 			navItemClick(index) {
 				// log(index)
@@ -191,7 +249,10 @@
 		background: #f1f1f1 !important;
 	}
 
-
+	.select-items {
+		overflow: auto;
+		height: 80vh
+	}
 
 	.static-tabs {
 		border-radius: 50rpx;

pages/siteList/siteList.vue

@@ -152,16 +152,5 @@
 </script>
 
 <style>
-	.showDetail {
-		position: absolute;
-		background: #fff;
-		box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
-		padding: 0rpx 32rpx;
-		border-radius: 10rpx;
-		top: 42rpx;
-		right: 0%;
-		z-index: 3000000;
-		font-size: 28rpx;
-
-	}
+	
 </style>

pages/siteListAlarming/siteListAlarming.vue

@@ -1,5 +1,6 @@
 <template>
-	<list-test :bindData="siteListData" :bindUrl="linkUrl" :bindIcon="linkIcon" :bindNum="num" :bindType="type">
+	<list-test :bindData="siteListData" :bindUrl="linkUrl" :bindIcon="linkIcon" :bindNum="num" :bindType="type"
+	 :bindDetailUrl="detailUrl">
 	</list-test>
 
 </template>
@@ -11,11 +12,12 @@
 
 		data() {
 			return {
-				type: 0,
-				linkUrl: '/pages/alarmingList/alarmingList',
-				linkIcon:'../../static/site-icon-alarm.png',
-				siteListData: json.siteListData,
-				num:' 共3个未处理告警'
+				type: 1,
+				linkUrl: '/pages/alarmingList/alarmingList',
+				linkIcon: '../../static/site-icon-alarm.png',
+				siteListData: [],
+				num: ' 共3个未处理告警',
+				detailUrl: '/pages/siteDetail/siteDetail'
 			};
 		},
 
@@ -27,14 +29,38 @@
 			}, 1000);
 		},
 		computed: {
-		
+
 		},
 
 		mounted() {
+		
 		},
 
+		onLoad() {
+			this.getSiteList()
+
+		},
 
 		methods: {
+			getSiteList() {
+		
+				uni.request({
+					url: 'https://iot.usky.cn/USKYOF/USKYOF.php/Home/IntegratedAlarm/getSiteList',
+					data: {
+						"companyCode": "13"
+					},
+					header: {
+						'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+					},
+
+					method: 'POST',
+					success: (res) => {
+						 console.log('res.data')
+						console.log(res.data.data)
+						this.siteListData=res.data.data
+					}
+				});
+			}
 		}
 
 	}