master

分支 (1)

管理

管理

master

WaterService
/
index.html

<!DOCTYPE html>

<html lang="zh-CN">

	<head>

		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>大方县水务管理平台</title>
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/bootstrap.min.css">

		<style>
			.t_title {

				width: 100%;

				height: 100%;

				text-align: center;

				font-size: 2.5em;

				line-height: 80px;

				color: #fff;

			}

			#chart_map {

				cursor: pointer;

			}

			.t_show {

				position: absolute;

				top: 0;

				right: 0;

				border-radius: 2px;

				background: #2C58A6;

				padding: 2px 5px;

				color: #fff;

				cursor: pointer;

			}
		</style>

	</head>

	<body>


		<!--header-->

		<!-- <div class="header">

    <div class="bg_header">

        <div class="header_nav fl t_title" style="cursor:pointer;" onclick="location.href='https://shop188702750.taobao.com/search.htm?spm=a1z10.1-c.0.0.1221421cqgmNaI&search=y'">

           电子商务公共服务平台大数据中心

        </div>

    </div>

</div> -->

		<table border="0" cellpadding="0" cellspacing="0">

			<tr>

				<td style="width: 480px;background-image: url(img/topBk.png);"></td>

				<td style="background-image: url(img/topbar.png);width: 960px;height: 50px;">

					<img src="img/leftBar.gif" style="margin-top: 24px;margin-left: 42px;" />

					<img src="img/rightBar.gif" style="margin-top: 24px;margin-left: 716px;" />

				</td>

				<td style="width: 480px;background-image: url(img/topBk.png);">
					<div class="head">
						<div class="showtimecss"><span id="showTime"></span></div>
					</div>
				</td>
			</tr>


		</table>

		<!--main-->

		<div class="data_content">

			<!-- <div class="data_time">

        温馨提示: 点击模块后跳转至详情页面。

    </div> -->


			<div class="data_main">

				<div class="main_left fl">

					<div class="left_1 t_btn6" style="cursor: pointer;">

						<!--左上边框-->

						<div class="t_line_box">

							<i class="t_l_line"></i>

							<i class="l_t_line"></i>

						</div>

						<!--右上边框-->

						<div class="t_line_box">

							<i class="t_r_line"></i>

							<i class="r_t_line"></i>

						</div>

						<!--左下边框-->

						<div class="t_line_box">

							<i class="l_b_line"></i>

							<i class="b_l_line"></i>

						</div>

						<!--右下边框-->

						<div class="t_line_box">

							<i class="r_b_line"></i>

							<i class="b_r_line"></i>

						</div>

						<div class="main_title">
							<img src="picture/t_1.png" alt="">
							天气情况
						</div>

						<div id="chart_left_1" class="chart" style="width:100%;height:100%;">
							<img src="img/wetear.png" style="width:100%;height:100%;">
							<!-- 							daFanWeather   在线天气预报有问题
							<div id="weather-view-he"></div>
							<script>
							WIDGET = {ID: 'N6h0tXXeCV'};
							</script>
							<script type="text/javascript" src="https://apip.weatherdt.com/view/static/js/r.js?v=1111"></script> -->
						</div>

					</div>

					<div class="left_2" style="cursor: pointer;">

						<div class="t_line_box">

							<i class="t_l_line"></i>

							<i class="l_t_line"></i>

						</div>

						<div class="t_line_box">

							<i class="t_r_line"></i>

							<i class="r_t_line"></i>

						</div>

						<div class="t_line_box">

							<i class="l_b_line"></i>

							<i class="b_l_line"></i>

						</div>

						<div class="t_line_box">

							<i class="r_b_line"></i>

							<i class="b_r_line"></i>

						</div>

						<div class="main_title">
							<img src="picture/t_2.png" alt="">
							中心概览
						</div>

						<div id="chart_left_2" class="chart t_btn9" style="width:100%;height:100%;">
							<img src="img/factory.png" style="width:100%;height:100%;">
						</div>
					</div>

					<div class="left_3" style="cursor: pointer;">

						<div class="t_line_box">

							<i class="t_l_line"></i>

							<i class="l_t_line"></i>

						</div>

						<div class="t_line_box">

							<i class="t_r_line"></i>

							<i class="r_t_line"></i>

						</div>

						<div class="t_line_box">

							<i class="l_b_line"></i>

							<i class="b_l_line"></i>

						</div>

						<div class="t_line_box">

							<i class="r_b_line"></i>

							<i class="b_r_line"></i>

						</div>

						<div class="main_title">
							<img src="picture/t_2.png" alt="">
							基础信息
						</div>

						<div id="chart_left_3" class="chart t_btn9" style="width:100%;height:100%;">
							<div class="d-flex  flex-column   text-white " style="margin-top: 20px;">
								<div class="align-self-center" style="font-size: 25px;">水务系统</div>
								<div class="p-2 ">
									<li> 投资规模：xxxxx</li>
									<li> 建设时长：xxxxx</li>
									<li> 受益人口：xxxxx</li>
									<li> 设计规模：20万人</li>
								</div>
							</div>
						</div>

					</div>
					<div class="left_4" style="cursor: pointer;">

						<div class="t_line_box">

							<i class="t_l_line"></i>

							<i class="l_t_line"></i>

						</div>

						<div class="t_line_box">

							<i class="t_r_line"></i>

							<i class="r_t_line"></i>

						</div>

						<div class="t_line_box">

							<i class="l_b_line"></i>

							<i class="b_l_line"></i>

						</div>

						<div class="t_line_box">

							<i class="r_b_line"></i>

							<i class="b_r_line"></i>

						</div>

						<div class="main_title">
							<img src="picture/t_2.png" alt="">
							值班情况
						</div>
						<div id="chart_left_4" class="chart t_btn9" style="width:100%;height:100%;">
							<div class="d-flex  p-3 flex-column">
								<div class=" bg-info text-white">监管领导：xx主任</div>
								<div class=" bg-success text-white">值班领导：xx</div>
								<div class=" bg-primary text-white">工作人员：xx,xx,xxx</div>
							</div>
						</div>
					</div>
				</div>


				<div class="main_center fl">
					<div class="center_text" style="position: relative;">
						<!--左上边框-->
						<div class="t_line_box">

							<i class="t_l_line"></i>

							<i class="l_t_line"></i>

						</div>

						<!--右上边框-->

						<div class="t_line_box">

							<i class="t_r_line"></i>

							<i class="r_t_line"></i>

						</div>

						<!--左下边框-->

						<div class="t_line_box">

							<i class="l_b_line"></i>

							<i class="b_l_line"></i>

						</div>

						<!--右下边框-->

						<div class="t_line_box">

							<i class="r_b_line"></i>

							<i class="b_r_line"></i>

						</div>

						<div class="main_title" style="width: 230px;">

							<img src="picture/t_3.png" alt="">
							供水点分布概况
						</div>

						<div id="chart_map" style="width:100%;height:100%;">
						</div>
						<div class="linshi_zdy">
							<li><span></span>总计(42个)</li>

							<li><span></span>在线(40个)</li>

							<li><span></span>报警(2个)</li>

							<li><span></span>离线(2个)</li>

							</ul>
						</div>

					</div>

				</div>

				<div class="main_right fr">

					<div class="right_1">

						<!--左上边框-->

						<div class="t_line_box">

							<i class="t_l_line"></i>

							<i class="l_t_line"></i>

						</div>

						<!--右上边框-->

						<div class="t_line_box">

							<i class="t_r_line"></i>

							<i class="r_t_line"></i>

						</div>

						<!--左下边框-->

						<div class="t_line_box">

							<i class="l_b_line"></i>

							<i class="b_l_line"></i>

						</div>

						<!--右下边框-->

						<div class="t_line_box">

							<i class="r_b_line"></i>

							<i class="b_r_line"></i>

						</div>

						<div class="main_title" style="width:220px;">
							<img src="picture/t_4.png" alt="">
							实时消息
						</div>
						<div id="chart_right_1" class="echart t_btn7" style="width:100%;height: 100%;">
							<div class="navboxall" style="padding: 20px;">
								<div class="wraptit">
									<span>时间</span><span>地点</span><span>内容</span>
								</div>
								<div class="wrap">
									<ul>
										<li>
											<p><span>2019-12-22:12:22</span> <span>马场二级泵站</span><span>1#水泵启动</span></p>
										</li>
										<li>
											<p><span>2019-12-23:12:22</span> <span>猫场二级泵站</span><span>2#水泵停止</span></p>
										</li>
										<li>
											<p><span>2019-12-24:12:22</span> <span>对江二级泵站</span><span>出口压力过高</span></p>
										</li>
										<li>
											<p><span>2019-12-25:12:22</span> <span>八宝二级泵站</span><span>高位水池满</span></p>
										</li>
										<li>
											<p><span>2019-12-26:12:22</span> <span>新开二级泵站</span><span>系统故障</span></p>
										</li>
										<li>
											<p><span>2019-12-27:12:22</span> <span>马场二级泵站</span><span>清水池液位低</span></p>
										</li>
										<li>
											<p><span>2019-12-28:12:22</span> <span>马场一级泵站</span><span>高位水池满</span></p>
										</li>
										<li>
											<p><span>2019-12-29:12:22</span> <span>罗马水厂</span><span>高位水池满</span></p>
										</li>
										<li>
											<p><span>2019-12-20:12:22</span> <span>黄泥塘理化水厂</span><span>浊度偏高</span></p>
										</li>
									</ul>
								</div>

							</div>

						</div>
					</div>

					<div class="right_2">

						<!--左上边框-->

						<div class="t_line_box">

							<i class="t_l_line"></i>

							<i class="l_t_line"></i>

						</div>

						<!--右上边框-->

						<div class="t_line_box">

							<i class="t_r_line"></i>

							<i class="r_t_line"></i>

						</div>

						<!--左下边框-->

						<div class="t_line_box">

							<i class="l_b_line"></i>

							<i class="b_l_line"></i>

						</div>

						<!--右下边框-->

						<div class="t_line_box">

							<i class="r_b_line"></i>

							<i class="b_r_line"></i>

						</div>

						<div class="main_title" style="width:200px;">

							<img src="picture/t_5.png" alt="">

							月度报警统计

						</div>

						<div  class="echart fl t_btn4" style="width:100%;height: 100%;cursor: pointer;">
							<div class="d-flex  text-white " style="margin-top: 20px; width:100%;height:100% ">
								<div class="flex-fill" style="width: 40%; height: 90%;" id="chart_right_2_1"></div>
								<div class="flex-fill" style="width: 60%; height: 90%;" id="chart_right_2_2"></div>

							</div>
						</div>

					</div>

					<div class="right_3">
						<!--左上边框-->
						<div class="t_line_box">

							<i class="t_l_line"></i>

							<i class="l_t_line"></i>

						</div>

						<!--右上边框-->

						<div class="t_line_box">

							<i class="t_r_line"></i>

							<i class="r_t_line"></i>

						</div>

						<!--左下边框-->

						<div class="t_line_box">

							<i class="l_b_line"></i>

							<i class="b_l_line"></i>

						</div>

						<!--右下边框-->

						<div class="t_line_box">

							<i class="r_b_line"></i>

							<i class="b_r_line"></i>

						</div>

						<div class="main_title" style="width:200px;">

							<img src="picture/t_5.png" alt="">

							设备情况

						</div>

						<div id="chart_right_3" class="echart fl t_btn4" style="width:100%;height:100%;cursor: pointer;">
							<div class="d-flex  text-white " style="margin-top: 20px; width:100%;height:100% ">
								<!-- 						<div class="flex-fill" style="width: 30%; height: 90%; border:3px solid #000" id="chart_driver_1"></div>
							  <div class="flex-fill" style="width: 30%; height: 90%; border:3px solid #000" id="chart_driver_2"></div>
							  <div class="flex-fill" style="width: 30%; height: 90%; border:3px solid #000" id="chart_driver_3"></div> -->
								<div class="flex-fill" style="width: 30%; height: 90%; " id="chart_driver_1"></div>
								<div class="flex-fill" style="width: 30%; height: 90%; " id="chart_driver_2"></div>
								<div class="flex-fill" style="width: 30%; height: 90%; " id="chart_driver_3"></div>
							</div>
						</div>

					</div>
				</div>

			</div>

			<div class="data_bottom">
				<div class="bottom_1 fl">
					<div class="t_line_box">
						<i class="t_l_line"></i>
						<i class="l_t_line"></i>
					</div>
					<div class="t_line_box">
						<i class="t_r_line"></i>
						<i class="r_t_line"></i>
					</div>
					<div class="t_line_box">
						<i class="l_b_line"></i>

						<i class="b_l_line"></i>

					</div>
					<div class="t_line_box">
						<i class="r_b_line"></i>
						<i class="b_r_line"></i>
					</div>
					<div class="main_title" style="width:260px;">
						<img src="picture/t_7.png" alt="">
						水质监测
					</div>
					<!-- <div class="main_table t_btn8">

						</div> -->
					<div id="chart_bottom_1" class="chart t_btn9" style="width:100%;height:100%; padding-left: 20px;"></div>


				</div>


				<div class="bottom_2 fl">
					<div class="t_line_box">

						<i class="t_l_line"></i>

						<i class="l_t_line"></i>
					</div>
					<div class="t_line_box">

						<i class="t_r_line"></i>

						<i class="r_t_line"></i>

					</div>
					<div class="t_line_box">

						<i class="l_b_line"></i>

						<i class="b_l_line"></i>

					</div>

					<div class="t_line_box">

						<i class="r_b_line"></i>

						<i class="b_r_line"></i>

					</div>
					<div class="main_title" style="width:260px;">
						<img src="picture/t_7.png" alt="">
						本月环比运行时长统计
					</div>
					<div id="chart_bottom_2" class="chart t_btn9" style="width:100%;height:100%;"></div>
				</div>

			</div>

		</div>

	</body>

	<script src="scripts/jquery-2.2.1.min.js"></script>

	<script src="scripts/bootstrap.min.js"></script>

	<script src="scripts/common.js"></script>

	<script src="scripts/echarts.min.js"></script>

	<script src="scripts/datatool.js"></script>

	<script src="scripts/index.js"></script>

	<!-- <script src="scripts/china.js"></script> -->

	<script src="scripts/guangxi.js"></script>

	<script src="scripts/guizhou.js"></script>

	<script src="scripts/biji.js"></script>

	<script src="scripts/dafan.js"></script>
	<script src="scripts/walden.js"></script>
	<script src="scripts/jquery.liMarquee.js"></script>
	<script src="scripts/echarts-liquidfill.min.js"></script>
	<script src="scripts/vue.min.js"></script>
	<script src="scripts/data.js"></script>
	<script>
		$(function() {
			$('.wrap').liMarquee({
				direction: 'up', //身上滚动
				runshort: false, //内容不足时不滚动
				scrollamount: 20 //速度
			});
		});
		var t = null;
		t = setTimeout(time, 1000); //開始运行
		function time() {
			clearTimeout(t); //清除定时器
			dt = new Date();
			var y = dt.getFullYear();
			var mt = dt.getMonth() + 1;
			var day = dt.getDate();
			var h = dt.getHours(); //获取时
			var m = dt.getMinutes(); //获取分
			var s = dt.getSeconds(); //获取秒
			document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
			t = setTimeout(time, 1000); //设定定时器，循环运行
		}
	</script>
	<script type="text/javascript">
		var dianshang = [];

		function get_shuju() {

			$.ajax({

				type: "post",

				async: false,

				url: "/record/dianshang",

				data: {},

				dataType: "json",

				success: function(res) {

					// console.log(res);

					// if (res) {

					// for (var i = 0; i < res.length; i++) {

					dianshang.push(res);

					// };

					// };

				}

			})

			return dianshang;

		}
		//电商企业入驻情况

		dianshang = get_shuju();

		var changedetail = echarts.init(document.getElementById('chart_4'));

		option = {

			tooltip: {

				trigger: 'axis',

				// formatter: '{b}</br>{a}: {c}</br>{a1}: {c1}'

			},

			toolbox: {

				show: false,

				feature: {

					dataView: {
						show: true,
						readOnly: false
					},

					magicType: {
						show: true,
						type: ['line', 'bar']
					},

					restore: {
						show: true
					},

					saveAsImage: {
						show: true
					}

				}

			},

			legend: {

				data: ['', ''],

				show: false

			},

			grid: {

				top: '18%',

				right: '5%',

				bottom: '8%',

				left: '5%',

				containLabel: true

			},

			xAxis: [

				{

					type: 'category',

					data: ['名优企业', '技术服务', '技术开发', '电子商务', '网络推广', '涉互联网企业'],

					splitLine: {

						show: false,

						lineStyle: {

							color: '#3c4452'

						}

					},

					axisTick: {

						show: false

					},

					axisLabel: {

						textStyle: {

							color: "#fff"

						},

						lineStyle: {

							color: '#519cff'

						},

						alignWithLabel: true,

						interval: 0

					}

				}

			],

			yAxis: [

				{

					type: 'value',

					name: '入驻数据',

					nameTextStyle: {

						color: '#fff'

					},

					interval: 100000,

					min: 0,

					splitLine: {

						show: true,

						lineStyle: {

							color: '#23303f'

						}

					},

					axisLine: {

						show: false,

						lineStyle: {

							color: '#115372'

						}

					},

					axisTick: {

						show: false

					},

					axisLabel: {

						textStyle: {

							color: "#fff"

						},

						alignWithLabel: true,

						interval: 0


					}

				}

			],

			color: "yellow",

			series: [

				{

					name: '电商企业入驻',

					type: 'bar',

					data: [dianshang[0][0], dianshang[0][1], dianshang[0][2], dianshang[0][3], dianshang[0][4], dianshang[0][5]],

					boundaryGap: '45%',

					barWidth: '40%',


					itemStyle: {

						normal: {

							color: function(params) {

								var colorList = [

									'#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#6bc0fb'

								];

								return colorList[params.dataIndex]

							},
							label: {

								show: true,

								position: 'top',

								formatter: '{c}'

							}

						}

					}

				}

			]

		};

		changedetail.setOption(option);
	</script>

</html>