index.html2 23.1 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>蒙自市水库雨水情监测可视化大数据平台</title>
		<link rel="stylesheet" type="text/css" href="css/new.css"/>
		<script src="js/echarts.min.js"></script>
		<!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
		<!--<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>-->
	</head>
	<body>
		<div class="box" id="mydata">
			<div class="bg-top">
				<h1>蒙自市水库雨水情监测可视化大数据平台</h1>
				<img src="img/u493.png" alt="">
			</div>
			<div class="bg-box">
				<div class="bg-mid">
					<div class="bg-left left_1 fd">
						<!-- 1 -->
						<div class="box-width">
							<ul>
								<li>
									<h2 class="titlenav">水库雨量预警统计</h2>
									<div class="shuju" id="total">
										<h3>实时数据</h3>
										<ul>
											<li>
												<p><b style="color: #ffc107;" v-cloak>{{ontime.normal}}座</b></p>
												<!-- <p><img src="img/u740.svg" alt=""></p> -->
												<p>正常水库</p>
											</li>
											<li>
												<p><b style="color: #D9001B;" v-cloak>{{ontime.abnormal}}座</b></p>
												<!-- <p><img src="img/u740.svg" alt=""></p> -->
												<p>异常水库</p>
											</li>
										</ul>
										<div class="shuju_btm">
											<h3>设备统计</h3>
											<div class="shuju_col">
												<p v-cloak>
													<span style="color: #ff9800;" >{{sblist.total}}台</span>设备总数</p>
												<p v-cloak><span style="color: #ff9800;" >{{sblist.abnormal}}台</span>故障设备</p>
												<p  v-cloak><span style="color: #ff9800;">345天</span>已运行天数</p>
											</div>
										</div>
									</div>
								</li>
							</ul>
							<!-- 2 -->
							<ul class="left-2">
								<li>
									<h2  class="titlenav">预警统计</h2>
									<div class="shuju">
										<div id="main" style="width:100%;height:240px;"></div>
										<!-- <script src="js/yujing.js" type="text/javascript" charset="utf-8"></script> -->
									</div>
								</li>
							</ul>
							<!-- 3 -->
							<ul>
								<li>
									<h2  class="titlenav">降水量统计</h2>
									<div class="shuju">
										<div id="Main" style="width: 100%;height:240px;"></div>
										<!-- <script src="js/jiangyuliang.js" type="text/javascript" charset="utf-8"></script> -->
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="bg-center fd">
						<!-- 1 -->
						<div class="box-width-2">
							<div class="ct-box">
								<div class="ct-top alagn">
									<h2>水库库存水量</h2>
									<li class="sz">
										<!--<div class="sz-z">-->
										<!--	<span>百万</span>-->
										<!--	<span>十万</span>-->
										<!--	<span>万</span>-->
										<!--	<span>千</span>-->
										<!--</div>-->
										<p  v-cloak>{{num}}<sub>m<sup>3</sup></sub></p>
									</li>
								</div>
							</div>
							<!-- 2 -->
						    <div id="allmap" class="map" style="height:600px;width:780px;margin: auto;"></div>
							<!-- 3 -->
							<div class="md-fd">
								<!-- 1 -->
								<div class="md-fd lt">
									<div class="cols">
											<h2  class="titlenav">水库预警趋势图</h2>
											<div class="shuju sj-box">
												<div id="area" style="height:240px;"></div>
												<!-- <script src="js/yujingqushi.js" type="text/javascript" charset="utf-8"></script> -->
											</div>
									</div>
									<!-- 2 -->
									<div class="cols">

											<h2 class="titlenav">业务类型</h2>
											<div class="shuju sj-box">
												<div id="tab" style="height:240px;"></div>
												<!-- <script src="js/ywlx.js" type="text/javascript" charset="utf-8"></script> -->
											</div>

									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="bg-right fd gd">
						<!-- 1 -->
						<div class="box-width">
							<h2 class="titlenav">实况报警</h2>
							<div class="skbj">
								<div class="fix">
									<span>水库名称</span>
									<span>更新时间</span>
									<span >状态</span>
								</div>
								<div id="scroll">
									<ul class="newsdata ht">
										<li v-for="item in bj" :key="item.id">
											<span v-cloak>{{item.name}}</span>
											<span v-cloak>{{item.time}}</span>
											<span v-cloak>{{item.status}}</span>
										</li>
										<!-- <li class="bgs">
											<span>泸西县所得村水库</span>
											<span>今天 15:50</span>
											<span>正常</span>
										</li>
										<li>
											<span>泸西县所得村水库</span>
											<span>今天 15:50</span>
											<span class="no">异常</span>
										</li>
										<li class="bgs">
											<span>泸西县所得村水库</span>
											<span>今天 15:50</span>
											<span>正常</span>
										</li>
										<li>
											<span>泸西县所得村水库</span>
											<span>今天 15:50</span>
											<span class="no">异常</span>
										</li>
										<li class="bgs">
											<span>泸西县所得村水库</span>
											<span>今天 15:50</span>
											<span>正常</span>
										</li>
										<li>
											<span>泸西县所得村水库</span>
											<span>今天 15:50</span>
											<span class="no">异常</span>
										</li>
										<li class="bgs">
											<span>泸西县所得村水库</span>
											<span>今天 15:50</span>
											<span>正常</span>
										</li>

										<li>
											<span>泸西县所得村水库</span>
											<span>今天 15:50</span>
											<span>正常</span>
										</li>
										<li class="bgs">
											<span>泸西县所得村水库</span>
											<span>今天 15:50</span>
											<span class="no">异常</span>
										</li>
										<li>
											<span>泸西县所得村水库</span>
											<span>今天 15:50</span>
											<span>正常</span>
										</li> -->
									</ul>
								</div>
							</div>
						<!-- 2 -->
							<ul class="mag" id="app">
								<li >
									<h2 class="titlenav">水库雨量计安装统计</h2>
									<div class="sj-fd" >
										<ul>
											<li>
												<img src="img/u474.png" >
												<span>
													<p v-cloak>{{numtotal.rain}}</p>
													<p>雨量计安装座数</p>
												</span>
											</li>
											<li>
												<img src="img/u475.png" >
												<span>
													<p class="yc"><b v-cloak>{{numtotal2.water}}</b></p>
													<p>雨量不正常</p>
												</span>
											</li>
										</ul>
										<ul>
											<li>
												<img src="img/u476.png" >
												<span>
													<p v-cloak>{{numtotal.rain}}</p>
													<p>水位计安装座数</p>
												</span>
											</li>
											<li>
												<img src="img/u485.png" id="sw-no">
												<span>
													<p class="yc"><b v-cloak>{{numtotal2.water}}</b></p>
													<p>水位不正常</p>
												</span>
											</li>
										</ul>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=sSelQoVi2L3KofLo1HOobonW"></script>
<script  type="text/javascript">
    var marker2;
    var map = new BMap.Map("allmap");
	var mapStyle={  style : "bluish" }  //地图主题色1
	map.setMapStyle(mapStyle);//地图主题色2
    var cityName = '蒙自';
    map.centerAndZoom(cityName, 11);                     // 初始化地图,设置中心点坐标和地图级别。    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
    map.enableScrollWheelZoom(true);
    var geoc = new BMap.Geocoder();
    map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE ,anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(40, 250)}));
    var bdary = new BMap.Boundary();
    bdary.get(cityName, function (rs) {       //获取行政区域

         // map.clearOverlays();        //清除地图覆盖物
         //for循环都删除掉了，只剩下这个
        //网上查了下，东西经南北纬的范围
        var EN_JW = "180, 90;";         //东北角
        var NW_JW = "-180,  90;";       //西北角
        var WS_JW = "-180, -90;";       //西南角
        var SE_JW = "180, -90;";        //东南角
        //4.添加环形遮罩层
        var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "#4c4ef7", fillOpacity:1, strokeOpacity: 0.5 }); //建立多边形覆盖物
        map.addOverlay(ply1);
        //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
        var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#56aaff",fillColor: "" });
         map.addOverlay(ply);
        //map.setViewport(ply.getPath());    //调整视野
         map.addEventListener("click", function(e){
            // map.removeOverlay(marker2)
             //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
            var pt = e.point;
            console.log(pt)
            var point = new BMap.Point(pt.lng, pt.lat);
            marker2 = new BMap.Marker(point);  // 创建标注
            // map.addOverlay(marker2);               // 将标注添加到地图中
            marker2.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
             geoc.getLocation(pt, function(rs){
                 //addressComponents对象可以获取到详细的地址信息
                var addComp = rs.addressComponents;
                debugger
                var site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
              //将对应的HTML元素设置值
                document.getElementById("site").value=site;
                document.getElementById("longitude").value=rs.point.lng;
                document.getElementById("latitude").value=rs.point.lat;
          });
        })
});
  function init() {
       var point = new BMap.Point('103.377832', '23.332216');
        marker2 = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker2);               // 将标注添加到地图中
        marker2.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        geoc.getLocation(point, function(rs)
        {
            var xiangxi = rs.addressComponents;
            var adress=xiangxi.province + ", " + xiangxi.city + ", " + xiangxi.district + ", " + xiangxi.street + ", " + xiangxi.streetNumber; //创建信息窗口
            // document.getElementById("site").value=adress;
        });
  }
    init()
	function init2() {
	     var point = new BMap.Point('103.450122','23.298596');
	      marker2 = new BMap.Marker(point);  // 创建标注
	      map.addOverlay(marker2);               // 将标注添加到地图中
	      marker2.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
	      geoc.getLocation(point, function(rs)
	      {
	          var xiangxi = rs.addressComponents;
	          var adress=xiangxi.province + ", " + xiangxi.city + ", " + xiangxi.district + ", " + xiangxi.street + ", " + xiangxi.streetNumber; //创建信息窗口
	       //   document.getElementById("site").value=adress;
	      });
	}
	  init2()
	function init3() {
	     var point = new BMap.Point('103.2847','23.1308');
	      marker2 = new BMap.Marker(point);  // 创建标注
	      map.addOverlay(marker2);               // 将标注添加到地图中
	      marker2.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
	      geoc.getLocation(point, function(rs)
	      {
	          var xiangxi = rs.addressComponents;
	          var adress=xiangxi.province + ", " + xiangxi.city + ", " + xiangxi.district + ", " + xiangxi.street + ", " + xiangxi.streetNumber; //创建信息窗口
	       //   document.getElementById("site").value=adress;
	      });
	}
	  init3()
</script>

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
	    var listPanel = $('#scroll .newsdata');
	    var nubcers = 0;
	    function up() {
	        listPanel.animate({
	            'top': (nubcers-74) + 'px'
	        },3000, 'linear', function() {
	            listPanel.css({
	                'top': '0px'
	            })
	                .find("li:first").appendTo(listPanel);
	            up();
	        });
	    }
	    up();

	});
</script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- <script src="index.js"></script> -->

<script>
	var example = new Vue({
		el:"#mydata",
		data(){
			return{
				ontime:[],    //实时数据
				sblist:[],    //设备统计
				yjtotal:[],    //预警统计
				jyltotal_x:[],
				jyltotal_y:[],
				qst_x:[],
				qst_y:[],
				typelist_zc:[],
				typelist_yc:[],
				num:[],
				bj:[],
				numtotal:[],
				numtotal2:[]
			}
		},
		mounted(){
			this.mytime(),
			this.mysb(),
			this.myyj(),
			this.myjyl(),
			this.myqst(),
			this.mytype(),
			this.myData(),
			this.mybj(),
			this.mynum()
		},

		created(){
			let yj = 'https://www.ynzhsk.cn/api/reservoir/warning/warning/getCountyWarningCount?id=1'
			axios.get(yj).then((res)=>{
				yjtotal = []
				this.yjtotal.push(res.data.data.crack)
				this.yjtotal.push(res.data.data.displacement)
				this.yjtotal.push(res.data.data.rainfall)
				this.yjtotal.push(res.data.data.settlement)
				this.yjtotal.push(res.data.data.waterlevel)
				this.yjtotal.push(res.data.data.waterseepage)
				this.yjtotal.push(res.data.data.weather)
				console.log('预警统计',this.yjtotal)
			});

			let jyl = 'https://www.ynzhsk.cn/api/reservoir/rain/rainfall/getRainByCounty?id=1'
			axios.get(jyl).then((res)=>{
				// jyltotal = res.data.data
				this.jyltotal_x = res.data.data.date
				this.jyltotal_y = res.data.data.count
				console.log('降雨量统计',res)
			});

			let qst = 'https://www.ynzhsk.cn/api/reservoir/warning/warning/getCountyWarningCountWeek?id=1'
			axios.get(qst).then((res)=>{
				this.qst_x = res.data.data.date
				this.qst_y = res.data.data.count
				console.log('预警趋势图',res)
			});

			let type = 'https://www.ynzhsk.cn/api/reservoir/warning/warning/getRainWarningByCounty?id=1'
			axios.get(type).then((res)=>{
				this.typelist_zc = res.data.data.normal
				this.typelist_yc = res.data.data.abnormal
				console.log('业务类型',res)
			});


		},

		watch:{
			yjtotal:{
				handler: function() {
					this.myyj();
				},
				deep:true,
			},

			jyltotal_x:{
				handler:function(){
					this.myjyl()
				},
				deep:true
			},

			jyltotal_y:{
				handler:function(){
					this.myjyl()
				},
				deep:true
			},

			qst_x:{
				handler:function(){
					this.myqst()
				},
				deep:true
			},

			qst_y:{
				handler:function(){
					this.myqst()
				},
				deep:true
			},

			typelist_zc:{
				handler:function(){
					this.mytype()
				},
				deep:true
			},

			typelist_yc:{
				handler:function(){
					this.mytype()
				},
				deep:true
			},
		},

		methods:{
			mytime(){
				let ontime = 'https://www.ynzhsk.cn/api/reservoir/warning/warning/getRainWarningByCounty?id=1';
				axios.get(ontime).then((res)=>{
					this.ontime = res.data.data
					console.log('实时数据',this.ontime)
				})
			},
			mysb(){
				let sb = 'https://www.ynzhsk.cn/api/reservoir/rain/rainfall/getEquipmentCount?id=1'
				axios.get(sb).then((res)=>{
					this.sblist = res.data.data
					console.log('设备统计',this.sblist)
				})
			},
			myyj(){
				var chartDom = document.getElementById('main');
					var myChart = echarts.init(chartDom);
					var option;
					option = {
						// width:'90%',
						// heigt:'90%',
						grid:{
							// left:'10%',
						},
					  xAxis: [{
						axisTick: {
						show: false
						},
						axisLabel:{
							show:true,
							interval:0,
							rotate:40,
							textStyle:{
								color:'#fff',
								// fontSize:14,
							}
						},
						axisLine:{
							lineStyle:{
								color:'#5456CB',
							}
						},
						type: 'category',
						data: ['坝体裂隙', '坝体位移', '降雨量', '坝体沉降', '水位预警', '坝体渗水', '极端天气']
					  }],
					  yAxis:{
						  name:'单位/条',
						  nameTextStyle:{
							  color:'#fff',
						  },
						  nameLocation:'end',
						  color:['#fff'],
						  splitLine:{
							  show:true,
							  lineStyle:{
								  color:['#5456CB'],
								  width:1,
								  type:'solid',
							  },
						  },
						  axisLine:{
							  lineStyle:{
								  color:'#5456CB',
							  }
						  },
						  axisLabel:{
							textStyle:{
								color:'#fff',
								fontSize:12,
							}
						  },
						  axisTick: {
						  show: false
						  },
					  },
					  series: [
						{
							color:['#008CCC'],
							data: this.yjtotal,
							type: 'bar',
							barWidth: '50%',
							itemStyle:{
							  normal:{
								  label:{
									  show:true,
									  position:'top',
									  textStyle:{
										  color:'#fff',
										  fontSize:12,
									  }
								  },
								//   color:function(params){
								// 	var colorList = [
								// 		'#FF0000','#DD4103','#CBDD03','#006699','#00FDFD','#008CCC','#999933',
								// 	];
								// 	return colorList[params.dataIndex]
								// },
							}
						  }
						}
					]
				};
				// option && myChart.setOption(option);
				if (option && typeof option === 'object') {
					myChart.setOption(option);
				}
			},
			myjyl(){
				var chartDom = document.getElementById('Main');
				var myChart = echarts.init(chartDom);
				var option;
				option = {
				  title: {
				  },
				  grid: {
					x:80,
					y:40,
					bottom:40,
					x2:20,
					y2:90,
					// borderWidth:1
				  },
				  xAxis: {
					  // interval:5,
					  color:['#fff'],
					  splitLine:{
						show:true,
						lineStyle:{
						  color:['#5456CB'],
						  // width:0.4,
						  type:'solid',
						},
					  },
					  axisLine:{
						lineStyle:{
						  color:'#5456CB',
						}
					  },
					  axisLabel:{
						textStyle:{
							color:'#fff',
							fontSize:12,
						}
					  },
					  axisTick: {
					  show: false
					  },
					type: 'value',
					boundaryGap: [0, 0.2]
				  },
				  yAxis: {
					  name:'单位/mm',
					  nameTextStyle:{
						color:'#fff',
					  },
					  axisLine:{
						lineStyle:{
						  color:'#5456CB',
						}
					  },
					  axisLabel:{
						textStyle:{
							color:'#fff',
							fontSize:12,
						}
					  },
					  axisTick: {
					  show: false
					  },
					type: 'category',
					data: this.jyltotal_x,
				  },
				  series: [
					{
						color:['#029ACF'],
						type: 'bar',
						barWidth: '15',
						data: this.jyltotal_y,
						itemStyle:{
						  normal:{
							  label:{
								  show:true,
								  textStyle:{
									  color:'#fff',
									  fontSize:12,
								  }
								},
							},
						},
					},
				  ]
				};
				// option && myChart.setOption(option);
				if (option && typeof option === 'object') {
					myChart.setOption(option);
				}
			},
			myData(){
				let number = 'https://www.ynzhsk.cn/api/reservoir/reservoir/getCountyUnder?id=1'
				axios.get(number).then((res)=>{
					this.num = res.data.data
					console.log('平台数据',res)
				})
			},
			myqst(){
				var chartDom = document.getElementById('area');
				var myChart = echarts.init(chartDom);
				var option;
				option = {
					grid:{
						top:'5%',
						left:'18%',
						bottom:'25%',
					},
					tooltip: {
						trigger:'axis',
					  axisPointer: {
						type: 'shadow'
					  }
					},
					calcuabel:true,
				  xAxis: {
					  color:['#fff'],
					  splitLine:{
						show:false,
						lineStyle:{
						  color:['#5456CB'],
						  width:1,
						  type:'solid',
						},
					  },
					  axisLine:{
						  show:false,
					  },
					  axisLabel:{
						  show:true,
						  interval:0,
						  rotate:40,
						textStyle:{
							color:'#fff',
							fontSize:12,
						}
					  },
					  axisTick: {
					  show: false
					  },
					type: 'category',
					boundaryGap: false,
					data: this.qst_x,
				  },
				  yAxis: {
					  color:['#fff'],
					  splitLine:{
						show:false,
						lineStyle:{
						  color:['#5456CB'],
						  width:1,
						  type:'solid',
						},
					  },
					  axisLine:{
						  show:true,
						lineStyle:{
						  color:'#5456CB',
						}
					  },
					  axisLabel:{
						  show:true,
						textStyle:{
							color:'#fff',
							fontSize:14,
						}
					  },
					  axisTick: {
					  show: false
					  },
					type: 'value',
				  },
				  series: [
					{

						color:['#7EA0F3'],
						data: this.qst_y,
						type: 'line',
						areaStyle: {},
					},
				  ]
				};
				// option && myChart.setOption(option);
				if(option && typeof option === 'object'){
					myChart.setOption(option)
				}
			},
			mytype(){
				var chartDom = document.getElementById('tab');
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					height:"300px",
					width:"300px",
				  title: {

				  },
				  tooltip: {
					// trigger: 'item'
				  },
				  grid:{
					  x:40,
					  left: 0,
					  right: 0,

				  },
				  legend: {
					orient: 'vertical',
					left: '62%',
					x:'right',
					y:'center',
					data:['异常','异常','正常','正常'],
					textStyle:{
						color:'#fff',
						fontSize:12,
					}
				  },
				  series: [
					{
					  // name: 'Access From',
					  type: 'pie',
					  radius: '60%',
					  center: ["30%", "53%"],
					  data: [
						{ value: this.typelist_zc, name: '正常' },
						{ value: this.typelist_yc, name: '异常' },
						// { value: 580, name: '正常' },
						// { value: 484, name: '异常' },
					  ],
					  emphasis: {
						itemStyle: {
							show:false,
						  // shadowBlur: 10,
						  // shadowOffsetX: 0,
						  // shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					  },
					  labelLine:{
						  normal:{
							  position:'inner',
							  show:false,
						  }
					  },
					  itemStyle:{
						normal:{
					  label:{
						  show:false,
					  },
					  color:function(params){
						  var colorList = [
							  '#CBDD03','#00FDFD',     //'#FF0000','#DD4103',
						  ];
						  return colorList[params.dataIndex]
					  },
						}
					  }
					}
				  ]
				};
				// option && myChart.setOption(option);
				if(option && typeof option === 'object'){
					myChart.setOption(option)
				}
			},
			mybj(){
				let skbj = 'https://www.ynzhsk.cn/api/reservoir/warning/warning/getCountyWarningList?id=1'
				axios.get(skbj).then((res)=>{
					this.bj = res.data.data
					console.log('实况报警',res)
				})
			},
			mynum(){
				let numtotal = 'https://www.ynzhsk.cn/api/reservoir/Equipment/getRainEquipment?id=1'
				axios.get(numtotal).then((res)=>{
					this.numtotal = res.data.data.equipment
					this.numtotal2 = res.data.data.warning
					console.log('雨量安装统计',res.data.data)
				})
			}
		},
	})

</script>

	</body>
</html>