1382 lines
46 KiB
HTML
1382 lines
46 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>WebTools-Web开发者素材</title>
|
||
<meta name="keywords" content="vue,react,组件,插件,模板,echarts,数据可视化,微前端,后台管理系统,免费下载">
|
||
<meta name="description" content="提供vue/react/组件,插件,echarts数据可视化、后台管理系统模板免费下载,微前端解决方案">
|
||
<link rel="icon" href="../../img/logo.png">
|
||
<link rel="stylesheet" href="./css/reset.css">
|
||
</head>
|
||
<style>
|
||
.boxRader {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 80%;
|
||
}
|
||
|
||
.centerBox {
|
||
width: 75%;
|
||
margin-right: 15px;
|
||
background: transparent;
|
||
}
|
||
|
||
.boxFont {
|
||
font-size: 1.2vw;
|
||
}
|
||
|
||
.centerMainBox1 {
|
||
width: 100%;
|
||
height: 60.5%;
|
||
}
|
||
|
||
.centerMainBox2 {
|
||
width: 100%;
|
||
height: 38.5%;
|
||
position: relative;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.centerMainBox2 img {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.boxTitle2 {
|
||
width: 100%;
|
||
height: 10%;
|
||
font-size: .6vw;
|
||
text-align: center;
|
||
line-height: 10%;
|
||
margin-top: 1vw;
|
||
color: #0efcff;
|
||
}
|
||
|
||
.boxLis {
|
||
width: 70%;
|
||
height: 1.5vw;
|
||
margin-left: 3vw;
|
||
margin-top: 1vw;
|
||
border-bottom: .02vw solid rgb(40, 229, 233);
|
||
}
|
||
|
||
.boxLis>li {
|
||
width: 4vw;
|
||
height: 1.4vw;
|
||
display: block;
|
||
background: rgba(40, 229, 233, .5);
|
||
margin-right: .5vw;
|
||
color: #fff;
|
||
line-height: 1.4vw;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
border-bottom: .02vw solid #040A18;
|
||
border-top: .02vw solid rgb(40, 229, 233);
|
||
border-right: .02vw solid rgb(40, 229, 233);
|
||
border-left: .02vw solid rgb(40, 229, 233);
|
||
}
|
||
|
||
.contList {
|
||
position: relative;
|
||
width: 70%;
|
||
height: 7vw;
|
||
margin: 1vw auto 0;
|
||
|
||
}
|
||
|
||
.content1 li {
|
||
display: none;
|
||
}
|
||
|
||
.baseBox {
|
||
width: 100%;
|
||
border: none;
|
||
background: none;
|
||
}
|
||
|
||
.boxTitle {
|
||
font-size: .8vw;
|
||
width: 38%;
|
||
margin-top: 1vw;
|
||
text-align: center;
|
||
}
|
||
|
||
.right {
|
||
float: right;
|
||
}
|
||
|
||
.baseBoxLeft {
|
||
width: 30%;
|
||
height: 95%;
|
||
position: relative;
|
||
}
|
||
|
||
.baseBoxRight {
|
||
width: 68%;
|
||
height: 75%;
|
||
}
|
||
|
||
.baseBoxLeft img {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.maps {
|
||
width: 100%;
|
||
height: 95%;
|
||
margin-top: 2%;
|
||
background: pink;
|
||
}
|
||
|
||
.baseBox1,
|
||
.baseBox2,
|
||
.baseBox3 {
|
||
position: relative;
|
||
}
|
||
|
||
.baseBox1 img,
|
||
.baseBox2 img,
|
||
.baseBox3 img {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.csbaseBox1 {
|
||
position: relative;
|
||
z-index: 999;
|
||
}
|
||
</style>
|
||
<style>
|
||
.liSpan {
|
||
width: 100%;
|
||
margin-top: 3.2%;
|
||
text-align: center;
|
||
color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.liP {
|
||
width: 66%;
|
||
margin: .3vw auto 0;
|
||
text-align: left;
|
||
font-size: .5vw;
|
||
color: rgb(40, 229, 233);
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: none
|
||
}
|
||
|
||
.titleName {
|
||
color: #0EFCFF;
|
||
}
|
||
|
||
/* 种植 */
|
||
.plant {
|
||
width: 90%;
|
||
height: 5.5vw;
|
||
margin: 2% auto 0;
|
||
display: -webkit-flex;
|
||
display: -moz-flex;
|
||
-webkit-justify-content: space-between;
|
||
-moz-justify-content: space-between;
|
||
}
|
||
|
||
.plant>li {
|
||
width: 15%;
|
||
height: 100%;
|
||
}
|
||
|
||
.jumps {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 235, 255, .08);
|
||
display: -webkit-flex;
|
||
-webkit-flex-direction: column;
|
||
-webkit-justify-content: space-between;
|
||
display: -moz-flex;
|
||
-moz-flex-direction: column;
|
||
-moz-justify-content: space-between;
|
||
}
|
||
|
||
.jumps>div>img {
|
||
width: .88vw;
|
||
height: .88vw;
|
||
float: right;
|
||
}
|
||
|
||
.jumps>p {
|
||
width: 90%;
|
||
font-size: 1.3vw;
|
||
color: #fff;
|
||
margin: auto;
|
||
|
||
}
|
||
|
||
.jumps>div {
|
||
width: 90%;
|
||
margin: 5% auto 0;
|
||
}
|
||
|
||
.jumps>div>span {
|
||
font-size: .6vw;
|
||
color: #0efcff;
|
||
float: left;
|
||
}
|
||
|
||
.spans0 {
|
||
width: 80%;
|
||
height: 5%;
|
||
background: #03DA8D;
|
||
}
|
||
|
||
.spans1 {
|
||
width: 80%;
|
||
height: 5%;
|
||
background: #0efcff;
|
||
}
|
||
|
||
.spans2 {
|
||
width: 80%;
|
||
height: 5%;
|
||
background: #FE0000;
|
||
}
|
||
|
||
.spans3 {
|
||
width: 80%;
|
||
height: 5%;
|
||
background: #F78001;
|
||
}
|
||
|
||
.boxVideo {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.boxVideo video {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
}
|
||
|
||
.baseDatas {
|
||
width: 70%;
|
||
height: 2vw;
|
||
display: -webkit-flex;
|
||
-webkit-justify-content: space-between;
|
||
margin: 1vw 0 0 5vw;
|
||
|
||
}
|
||
|
||
.baseDatas li {
|
||
width: 10%;
|
||
}
|
||
|
||
.baseDatas li a {
|
||
color: #fff;
|
||
font-size: .8vw;
|
||
}
|
||
|
||
.active2 a>span {
|
||
color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.baseDatas li a:hover>span {
|
||
color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.baseDatas li a:hover>.borderRight {
|
||
border-left-color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.tableDetalis {
|
||
width: 92%;
|
||
color: #fff;
|
||
margin-left: 2vw;
|
||
}
|
||
|
||
.tableDetalis tr {
|
||
height: 1.3vw;
|
||
font-size: .8vw;
|
||
}
|
||
|
||
.tableDetalis tr>td {
|
||
text-align: center;
|
||
}
|
||
|
||
.tableDetalis tr>td:nth-child(7) {
|
||
text-align: right;
|
||
}
|
||
|
||
.borderRight {
|
||
width: 0;
|
||
height: 0;
|
||
float: left;
|
||
border: .4vw solid transparent;
|
||
border-left-color: #fff;
|
||
margin-top: .2vw;
|
||
}
|
||
|
||
.borderActive {
|
||
border-left-color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.equipment_table {
|
||
width: 85%;
|
||
height: 25%;
|
||
margin: auto;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: .5vw;
|
||
}
|
||
|
||
.equipment_table tr:nth-child(1) {
|
||
color: #0EFCFF;
|
||
}
|
||
|
||
.equipment_table tr {
|
||
border: 1px solid#0EFCFF;
|
||
}
|
||
|
||
.equipment_table tr:nth-child(1) {
|
||
font-size: .8vw;
|
||
}
|
||
|
||
.equipment_table img {
|
||
width: 1vw;
|
||
}
|
||
|
||
.env_table {
|
||
height: 35%;
|
||
margin-top: 5%;
|
||
}
|
||
|
||
.env_table td {
|
||
border: 1px solid#0EFCFF;
|
||
}
|
||
|
||
.env_table tr:nth-child(1) {
|
||
background: rgba(14, 252, 255, .3);
|
||
}
|
||
|
||
.map img {
|
||
width: 80%;
|
||
margin-left: 10%;
|
||
}
|
||
|
||
.map img {
|
||
width: 80%;
|
||
margin-left: 10%;
|
||
}
|
||
|
||
.mapActived1 {
|
||
position: absolute;
|
||
top: 41.5%;
|
||
left: 61%;
|
||
width: 3.5vw;
|
||
height: 5.5vw;
|
||
border-radius: 90px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mapActived2 {
|
||
position: absolute;
|
||
top: 60%;
|
||
right: 16%;
|
||
width: 4.5vw;
|
||
height: 2.5vw;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mapActived3 {
|
||
position: absolute;
|
||
top: 57%;
|
||
right: 9%;
|
||
width: 2.5vw;
|
||
height: 7vw;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mapContent1 {
|
||
position: absolute;
|
||
height: 6vw;
|
||
width: 8vw;
|
||
left: 65%;
|
||
top: 33%;
|
||
background: rgba(255, 255, 255, .2);
|
||
}
|
||
|
||
.mapContent2 {
|
||
position: absolute;
|
||
height: 6vw;
|
||
width: 8vw;
|
||
left: 70%;
|
||
top: 35%;
|
||
background: rgba(255, 255, 255, .2);
|
||
display: none;
|
||
}
|
||
|
||
.mapContent3 {
|
||
position: absolute;
|
||
height: 6vw;
|
||
width: 8vw;
|
||
right: 1%;
|
||
top: 35%;
|
||
background: rgba(255, 255, 255, .2);
|
||
display: none;
|
||
}
|
||
|
||
|
||
.mapContentFont {
|
||
width: 85%;
|
||
margin-left: 12%;
|
||
font-size: .6vw;
|
||
color: #0efcff;
|
||
letter-spacing: .05vw;
|
||
margin-bottom: .3vw;
|
||
}
|
||
|
||
.mapContentFont:nth-child(1) {
|
||
margin-top: .6vw;
|
||
}
|
||
|
||
.mapContentFont span {
|
||
color: white;
|
||
}
|
||
|
||
/* lafite video样式 */
|
||
.video-js {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.video-js:hover .vjs-big-play-button {
|
||
background: none;
|
||
}
|
||
.video-js .vjs-big-play-button:hover {
|
||
background: none;
|
||
}
|
||
.video-js .vjs-big-play-button {
|
||
border: none;
|
||
background: none;
|
||
}
|
||
</style>
|
||
|
||
<body>
|
||
<div class="main">
|
||
<div class="nav">某茶园可视化监控</div>
|
||
<div class="nav_btn">
|
||
<div class="btn_left">
|
||
<a href="#">
|
||
<div class="btn_list listActive">主页</div>
|
||
</a>
|
||
<a href="#">
|
||
<div class="btn_list">XX流转</div>
|
||
</a>
|
||
<a href="#">
|
||
<div class="btn_list">空天地</div>
|
||
</a>
|
||
<a href="#">
|
||
<div class="btn_list">生长监测</div>
|
||
</a>
|
||
</div>
|
||
<div class="btn_right">
|
||
<a href="#">
|
||
<div class="btn_list">生产加工</div>
|
||
</a>
|
||
<a href="#">
|
||
<div class="btn_list">仓储管理</div>
|
||
</a>
|
||
<a href="#">
|
||
<div class="btn_list">流通销售</div>
|
||
</a>
|
||
<a href="#">
|
||
<div class="btn_list">数据中心</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="centerBox">
|
||
<div class="baseBox centerMainBox1" style="height:70%">
|
||
<div class="baseBoxLeft left">
|
||
<div class="boxTitle">气象数据监测</div>
|
||
<img src="./img/left.png" alt="">
|
||
<table class="equipment_table env_table">
|
||
<tr>
|
||
<td>指标</td>
|
||
<td>标准值</td>
|
||
<td>当前值</td>
|
||
<td>预警</td>
|
||
</tr>
|
||
<tr>
|
||
<td>温度</td>
|
||
<td>18~20℃</td>
|
||
<td>9℃</td>
|
||
<td>正常</td>
|
||
</tr>
|
||
<tr>
|
||
<td>湿度</td>
|
||
<td>40%~60%</td>
|
||
<td>52%</td>
|
||
<td>正常</td>
|
||
</tr>
|
||
<tr>
|
||
<td>风速</td>
|
||
<td>0m/s~4m/s</td>
|
||
<td>2m/s</td>
|
||
<td>正常</td>
|
||
</tr>
|
||
<tr>
|
||
<td>降水</td>
|
||
<td>2mm~4mm</td>
|
||
<td>0mm</td>
|
||
<td style="color:red">偏低</td>
|
||
</tr>
|
||
</table>
|
||
<div style="width:95%;height:50%;margin-left:2.5%" id="wind"></div>
|
||
</div>
|
||
<div class="baseBoxRight right">
|
||
<ul class="plant">
|
||
<li>
|
||
<a class="jumps" href="">
|
||
<div>
|
||
<span>茶园种植面积(亩)</span>
|
||
<img src="./img/qqzmj.png" alt="">
|
||
</div>
|
||
<p class="">350000</p>
|
||
<span class="spans3"></span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="jumps" href="">
|
||
<div>
|
||
<span>产值(亿元)</span>
|
||
<img src="./img/ccc2.png" alt="">
|
||
</div>
|
||
<p class="">180</p>
|
||
<span class="spans2" style="background: #499BFF;"></span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="jumps" href="">
|
||
<div>
|
||
<span>产量(吨)</span>
|
||
<img src="./img/ccc.png" alt="">
|
||
</div>
|
||
<p class="">82000</p>
|
||
<span class="spans3" style="background: #F2CE43;"></span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="jumps" href="./teaGarden.html">
|
||
<div class="clear plantTop ">
|
||
<span class="flexLeft">茶园(个)</span>
|
||
<img class="flexright" src="./img/cy.png" alt="">
|
||
</div>
|
||
|
||
<p class=" plantNum1">3207</p>
|
||
<span class="spans0"></span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="jumps" href="./Tea-enterprises.html">
|
||
<div class="clear plantTop ">
|
||
<span class="flexLeft">茶企(个)</span>
|
||
<img class="flexright" src="./img/cq.png" alt="">
|
||
</div>
|
||
<p class=" plantNum1">157</p>
|
||
<span class="spans1"></span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="jumps" href="./teaPeasant.html">
|
||
<div>
|
||
<span>茶农(人)</span>
|
||
<img src="./img/cn.png" alt="">
|
||
</div>
|
||
<p class="">360000</p>
|
||
<span class="spans2"></span>
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
<!-- 地图 -->
|
||
<div class="map">
|
||
<img class="mapImg" src="./img/map1.png">
|
||
<div class="mapContent1">
|
||
<div class="mapContentFont">田庄乡</div>
|
||
<div class="mapContentFont">
|
||
茶园:<span>101</span>
|
||
</div>
|
||
<div class="mapContentFont">
|
||
茶企:<span>10</span>
|
||
</div>
|
||
<div class="mapContentFont">
|
||
茶农:<span>18371</span>
|
||
</div>
|
||
</div>
|
||
<a class="mapActived1" href="#"></a>
|
||
<!-- <div class="mapContent2">
|
||
<div class="mapContentFont">田庄乡</div>
|
||
<div class="mapContentFont">
|
||
茶园:<span>126</span>
|
||
</div>
|
||
<div class="mapContentFont">
|
||
茶企:<span>566</span>
|
||
</div>
|
||
<div class="mapContentFont">
|
||
茶农:<span>999</span>
|
||
</div>
|
||
</div> -->
|
||
<a class="mapActived2" href="#"></a>
|
||
<!-- <div class="mapContent3">
|
||
<div class="mapContentFont">田庄乡</div>
|
||
<div class="mapContentFont">
|
||
茶园:<span>126</span>
|
||
</div>
|
||
<div class="mapContentFont">
|
||
茶企:<span>566</span>
|
||
</div>
|
||
<div class="mapContentFont">
|
||
茶农:<span>999</span>
|
||
</div>
|
||
</div> -->
|
||
<a class="mapActived3" href="#"></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="baseBox centerMainBox2" style="height:30%;">
|
||
<img src="./img/down.png" alt="">
|
||
<div class="boxTitle2" style="width:26%">统计数据</div>
|
||
<div class="csbaseBox1">
|
||
<ul class="baseDatas">
|
||
<li class="left ">
|
||
<a href="./teaGarden.html">
|
||
<div class="borderRight "></div>
|
||
<span>茶园统计</span>
|
||
</a>
|
||
</li>
|
||
<li class="left">
|
||
<a href="./Tea-enterprises.html">
|
||
<div class="borderRight "></div>
|
||
<span>茶企统计</span>
|
||
</a>
|
||
</li>
|
||
<li class="left">
|
||
<a href="#">
|
||
<div class="borderRight "></div>
|
||
<span>茶农统计</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<table class="tableDetalis">
|
||
<tr>
|
||
<td>名称</td>
|
||
<td>类型</td>
|
||
<td>面积</td>
|
||
<td>名称</td>
|
||
<td>类型</td>
|
||
<td>面积</td>
|
||
<td>姓名  </td>
|
||
<td>品种</td>
|
||
<td>面积</td>
|
||
</tr>
|
||
<tr>
|
||
<td>青云观茶园</td>
|
||
<td>企业</td>
|
||
<td>1800亩</td>
|
||
<td>如需商用,请联系qq:136150985</td>
|
||
<td>私营</td>
|
||
<td>3283亩</td>
|
||
<td>刘新武</td>
|
||
<td>云台大叶</td>
|
||
<td>10亩</td>
|
||
</tr>
|
||
<tr>
|
||
<td>彩云谷茶园 </td>
|
||
<td>企业</td>
|
||
<td>380亩</td>
|
||
<td>如需商用,请联系qq:136150985</td>
|
||
<td>私营</td>
|
||
<td>6200亩</td>
|
||
<td>张方</td>
|
||
<td>碧香早</td>
|
||
<td>15亩</td>
|
||
</tr>
|
||
<tr>
|
||
<td>赵家坪茶园</td>
|
||
<td>合作社</td>
|
||
<td>510亩</td>
|
||
<td>如需商用,请联系qq:136150985</td>
|
||
<td>私营</td>
|
||
<td>5800亩</td>
|
||
<td>李小维</td>
|
||
<td>槠叶齐</td>
|
||
<td>12亩</td>
|
||
</tr>
|
||
<tr>
|
||
<td>马路口茶园</td>
|
||
<td>个人</td>
|
||
<td>17亩</td>
|
||
<td>如需商用,请联系qq:136150985</td>
|
||
<td>私营</td>
|
||
<td>30000亩</td>
|
||
<td>王骁骁</td>
|
||
<td>黄金茶</td>
|
||
<td>11亩</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="leftBox right" style="width:22%">
|
||
<div class="baseBox baseBox1" style="margin-bottom:15px;height:40%">
|
||
<img src="./img/right.png" alt="">
|
||
<div class="csbaseBox1">
|
||
<div class="boxTitle">视频监控设备</div>
|
||
<ul class="boxLis">
|
||
<li class="left active">茶园监控</li>
|
||
<li class="left">生产车间监控</li>
|
||
<li class="left">仓储监控</li>
|
||
</ul>
|
||
<div class="content1">
|
||
<ul>
|
||
<li style="display: block;" class="contList">
|
||
<!-- 四个角描边 stat -->
|
||
<div class="leftTopLine1"></div>
|
||
<div class="leftTopLine2"></div>
|
||
<div class="rightTopLine1"></div>
|
||
<div class="rightTopLine2"></div>
|
||
<div class="leftBottomLine1"></div>
|
||
<div class="leftBottomLine2"></div>
|
||
<div class="rightBottomLine1"></div>
|
||
<div class="rightBottomLine2"></div>
|
||
|
||
<div class="boxVideo">
|
||
<video controls>
|
||
<source src="./movie.ogv">
|
||
</video>
|
||
</div>
|
||
</li>
|
||
<li class="contList">
|
||
<!-- 四个角描边 stat -->
|
||
<div class="leftTopLine1"></div>
|
||
<div class="leftTopLine2"></div>
|
||
<div class="rightTopLine1"></div>
|
||
<div class="rightTopLine2"></div>
|
||
<div class="leftBottomLine1"></div>
|
||
<div class="leftBottomLine2"></div>
|
||
<div class="rightBottomLine1"></div>
|
||
<div class="rightBottomLine2"></div>
|
||
|
||
<div class="boxVideo">
|
||
<video controls>
|
||
<source src="movie.ogv">
|
||
</video>
|
||
</div>
|
||
</li>
|
||
<li class="contList">
|
||
<!-- 四个角描边 stat -->
|
||
<div class="leftTopLine1"></div>
|
||
<div class="leftTopLine2"></div>
|
||
<div class="rightTopLine1"></div>
|
||
<div class="rightTopLine2"></div>
|
||
<div class="leftBottomLine1"></div>
|
||
<div class="leftBottomLine2"></div>
|
||
<div class="rightBottomLine1"></div>
|
||
<div class="rightBottomLine2"></div>
|
||
|
||
<div class="boxVideo">
|
||
<video controls>
|
||
<source src="movie.ogv">
|
||
</video>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="liSpan">介绍</div>
|
||
<p class="liP">茶园环境远程监控物联网系统能够支持以网站,浏览器,视频等客户端访问方式提供远程监测与控制管理</p>
|
||
</div>
|
||
</div>
|
||
<div class="baseBox baseBox2" style="margin-bottom:15px;height:29.5%">
|
||
<img src="./img/right2.png" alt="">
|
||
<!-- 四个角描边 end -->
|
||
<div class="boxTitle2">种植品种分析</div>
|
||
<div class="boxRader" id="Progress"></div>
|
||
</div>
|
||
<div class="baseBox baseBox3" style="height:28.9%">
|
||
<img src="./img/right3.png" alt="">
|
||
<!-- 四个角描边 end -->
|
||
<div class="boxTitle2">茶叶销量分析</div>
|
||
<div class="boxRader" id="mains"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="../../js/jquery.min.js"></script>
|
||
<script src="../../js/echarts/echarts.min.js"></script>
|
||
<script src="./js/dataScoll.js"></script>
|
||
<script>
|
||
// 地图hover事件
|
||
function HoverFn() {
|
||
$('.mapActived1').hover(function () {
|
||
$(".mapImg").attr("src", "./img/map1.png");
|
||
$(".mapContent1,.mapContent2,.mapContent3").hide();
|
||
$(".mapContent1").slideDown(500);
|
||
}, function () {
|
||
|
||
});
|
||
// $('.mapActived2').hover(function () {
|
||
// $(".mapImg").attr("src", "./img/map2.png");
|
||
// $(".mapContent1,.mapContent2,.mapContent3").hide();
|
||
// $(".mapContent2").slideDown(500);
|
||
// }, function () {
|
||
// });
|
||
// $('.mapActived3').hover(function () {
|
||
// $(".mapImg").attr("src", "./img/map3.png");
|
||
// $(".mapContent1,.mapContent2,.mapContent3").hide();
|
||
// $(".mapContent3").slideDown(500);
|
||
// }, function () {
|
||
// });
|
||
}
|
||
HoverFn()
|
||
</script>
|
||
<script>
|
||
$('.boxLis').on('mouseenter', 'li', function () {
|
||
var that = $(this);
|
||
that.addClass('active').siblings().removeClass('active');
|
||
$('.content1 .contList').hide();
|
||
$('.content1 .contList').eq(that.index()).show()
|
||
})
|
||
</script>
|
||
<script>
|
||
var HYChart1 = echarts.init(document.getElementById('wind'));
|
||
var HYChart2 = echarts.init(document.getElementById('Progress'));
|
||
var HYChart3 = echarts.init(document.getElementById('mains'));
|
||
/**
|
||
* times:YYYY-mm-dd HHMMSS
|
||
* timeData:时间
|
||
* windsData:风速
|
||
* windxData:风向/等级
|
||
* temData:温度
|
||
* ,rainData:降水
|
||
* humData:湿度
|
||
*/
|
||
let Data = {
|
||
times: ["2019-10-28 11:00:00", "2019-10-28 12:00:00", "2019-10-28 13:00:00", "2019-10-28 14:00:00", "2019-10-28 15:00:00", "2019-10-28 16:00:00", "2019-10-28 17:00:00", "2019-10-28 18:00:00", "2019-10-28 19:00:00", "2019-10-28 20:00:00", "2019-10-28 21:00:00", "2019-10-28 22:00:00"],
|
||
timeData: ["08/00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11"],
|
||
windxData: ["东南", "北", "东南", "东", "东南", "东南", "西", "北", "南", "东南", "东南", "东南"],
|
||
windsData: ["2.8/2", "1.4/1", "2.7/2", "3/2", "2.2/2", "1.4/1", "1.5/1", "1.9/2", "1.4/1", "1.8/2", "2/2", "3.4/3"],
|
||
temData: [9, 11, 13, 12, 11, 9, 9, 7, 6, 4, 3, 3],
|
||
rainData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||
humData: [76, 76, 70, 62, 58, 53, 50, 49, 46, 44, 44, 42],
|
||
}
|
||
|
||
function windDen(wind) {
|
||
switch (wind) {
|
||
case '北': return 'n';
|
||
case '东北': return 'ne';
|
||
case '东': return 'e';
|
||
case '东南': return 'se';
|
||
case '南': return 's';
|
||
case '西南': return 'sw';
|
||
case '西': return 'w';
|
||
case '西北': return 'nw';
|
||
default: return ''
|
||
}
|
||
}
|
||
|
||
let colors = ['#FF6863', '#6EAB40', '#3BB5F5'];
|
||
|
||
option = {
|
||
color: colors,
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'cross' },
|
||
formatter: function (params, ticket, callback) {
|
||
let index = params[0].dataIndex;
|
||
let Htm = `${Data.times[index]}<br>
|
||
温度:${Data.temData[index]}℃<br>
|
||
降水:${Data.rainData[index]}mm<br>
|
||
风力:${Data.windsData[index].split('/')[0]}m/s ${Data.windsData[index].split('/')[1]}级风 ${Data.windxData[index]}<br>
|
||
湿度:${Data.humData[index]}%`
|
||
return Htm;
|
||
}
|
||
},
|
||
grid: {
|
||
top: '17%',
|
||
bottom: '30%',
|
||
left: '25%',
|
||
right: '10%'
|
||
},
|
||
dataZoom: {
|
||
bottom: '14%',
|
||
height: '30',
|
||
dataBackground: {
|
||
lineStyle: { color: '#39977D' },
|
||
areaStyle: { color: 'rgba(57,151,125,1)' }
|
||
},
|
||
borderColor: 'rgba(57,151,125,0)',
|
||
textStyle: { color: '#39977D' },
|
||
start: 0,
|
||
end: 100,
|
||
xAxisIndex: [0, 1, 2, 3]
|
||
},
|
||
xAxis: [{
|
||
name: '风力等级',
|
||
type: 'category',
|
||
position: 'bottom',
|
||
offset: 8,
|
||
axisTick: { show: false },
|
||
axisLine: { show: false },
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 10,
|
||
backgroundColor: 'transparent',
|
||
lineHeight: 20,
|
||
padding: [3, 3]
|
||
},
|
||
interval: 0
|
||
},
|
||
nameTextStyle: { color: '#585858', padding: [0, 0, -53] },
|
||
nameLocation: 'start',
|
||
data: Data.windsData
|
||
},
|
||
{
|
||
name: '风向',
|
||
type: 'category',
|
||
position: 'bottom',
|
||
offset: 40,
|
||
axisTick: { show: false },
|
||
axisLine: { show: false },
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: { color: '#fff', fontSize: 10, lineHeight: 20 },
|
||
interval: 0,
|
||
formatter: (value) => {
|
||
return '{' + windDen(value) + '| }' + value + '';
|
||
},
|
||
rich: {
|
||
value: {
|
||
lineHeight: 16,
|
||
align: 'left'
|
||
},
|
||
n: {
|
||
height: 16,
|
||
align: 'left',
|
||
backgroundColor: {
|
||
image: `/asset/get/s/data-1567915257914-d2XE-l1Xe.png`
|
||
}
|
||
},
|
||
ne: {
|
||
height: 16,
|
||
align: 'left',
|
||
backgroundColor: {
|
||
image: `/asset/get/s/data-1567915419689-EqosRMRlP.png`
|
||
}
|
||
},
|
||
e: {
|
||
height: 16,
|
||
align: 'left',
|
||
backgroundColor: {
|
||
image: `/asset/get/s/data-1567915374565-sE5G5rXU6.png`
|
||
}
|
||
},
|
||
se: {
|
||
height: 16,
|
||
align: 'left',
|
||
backgroundColor: {
|
||
image: `/asset/get/s/data-1567915457742-e5gWU0sT0.png`
|
||
}
|
||
},
|
||
s: {
|
||
height: 16,
|
||
align: 'left',
|
||
backgroundColor: {
|
||
image: `/asset/get/s/data-1567915473589-TN5oJTIdv.png`
|
||
}
|
||
},
|
||
sw: {
|
||
height: 16,
|
||
align: 'left',
|
||
backgroundColor: {
|
||
image: `/asset/get/s/data-1567915498319-h9PscokI2.png`
|
||
}
|
||
},
|
||
w: {
|
||
height: 16,
|
||
align: 'left',
|
||
backgroundColor: {
|
||
image: `/asset/get/s/data-1567915523655-sI1HtlidH.png`
|
||
}
|
||
},
|
||
nw: {
|
||
height: 16,
|
||
align: 'left',
|
||
backgroundColor: {
|
||
image: `/asset/get/s/data-1567915566043-E6t1OVpNh.png`
|
||
}
|
||
}
|
||
}
|
||
},
|
||
nameTextStyle: { color: '#585858', padding: [0, 0, -38] },
|
||
nameLocation: 'start',
|
||
data: Data.windxData
|
||
},
|
||
{
|
||
type: 'category',
|
||
axisLine: { show: false },
|
||
},
|
||
{
|
||
type: 'category',
|
||
position: 'bottom',
|
||
offset: 80,
|
||
axisTick: { alignWithLabel: true, textStyle: { color: '#707070' } },
|
||
data: Data.timeData
|
||
}
|
||
],
|
||
yAxis: [{
|
||
type: 'value',
|
||
name: '温度(°C)',
|
||
scale: true,
|
||
position: 'left',
|
||
offset: 54,
|
||
axisTick: { lineStyle: { color: colors[0] }, inside: true },
|
||
nameTextStyle: { color: colors[0] },
|
||
axisLabel: { color: colors[0] },
|
||
splitLine: { show: false }
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '降水(mm)',
|
||
position: 'left',
|
||
axisTick: { lineStyle: { color: colors[1] }, inside: true },
|
||
nameTextStyle: { color: colors[1] },
|
||
axisLabel: { color: colors[1] },
|
||
splitLine: { show: false }
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '相对湿度(%)',
|
||
scale: true,
|
||
position: 'right',
|
||
axisTick: { lineStyle: { color: colors[2] }, inside: true },
|
||
nameTextStyle: { color: colors[2] },
|
||
axisLabel: { color: colors[2] },
|
||
splitLine: { show: false }
|
||
}
|
||
],
|
||
series: [{
|
||
name: '温度',
|
||
type: 'line',
|
||
step: false,
|
||
label: { normal: { show: true, position: 'top' } },
|
||
data: Data.temData
|
||
},
|
||
{
|
||
name: '降水',
|
||
type: 'bar',
|
||
yAxisIndex: 1,
|
||
color: '#bee6b2',
|
||
barWidth: '50%',
|
||
label: { normal: { show: true, position: 'top' } },
|
||
data: Data.rainData
|
||
},
|
||
{
|
||
name: '相对湿度',
|
||
type: 'line',
|
||
step: false,
|
||
yAxisIndex: 2,
|
||
color: colors[2],
|
||
label: { normal: { show: true, position: 'top' } },
|
||
data: Data.humData
|
||
}
|
||
]
|
||
};
|
||
|
||
// 进度条
|
||
var baifenbi = [63000, 153210, 37210, 43780].reverse();
|
||
var grayBar = [1, 1, 1, 1,];
|
||
var zongjine = [500, 500, 500, 500];
|
||
var xingm = ['云台大叶', '槠叶齐', '碧香早', '黄金茶'].reverse();
|
||
// console.log(xingm.reverse())
|
||
option2 = {
|
||
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
grid: {
|
||
left: '30%',
|
||
right: '5%',
|
||
top: '0%',
|
||
bottom: '0%',
|
||
},
|
||
backgroundColor: 'transparent',
|
||
xAxis: [{
|
||
show: false,
|
||
},
|
||
//由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
|
||
{
|
||
show: false,
|
||
}
|
||
],
|
||
yAxis: {
|
||
type: 'category',
|
||
axisLabel: {
|
||
show: false, //让Y轴数据不显示
|
||
},
|
||
itemStyle: {
|
||
|
||
},
|
||
axisTick: {
|
||
show: false, //隐藏Y轴刻度
|
||
},
|
||
axisLine: {
|
||
show: false, //隐藏Y轴线段
|
||
},
|
||
data: xingm,
|
||
},
|
||
series: [
|
||
//背景色--------------------我是分割线君------------------------------//
|
||
|
||
{
|
||
show: true,
|
||
type: 'bar',
|
||
barGap: '-100%',
|
||
barWidth: '40%', //统计条宽度
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#3B4254'
|
||
},
|
||
},
|
||
z: 1,
|
||
// data: grayBar,
|
||
},
|
||
//蓝条--------------------我是分割线君------------------------------//
|
||
{
|
||
show: true,
|
||
type: 'bar',
|
||
barGap: '-100%',
|
||
barWidth: '40%', //统计条宽度
|
||
itemStyle: {
|
||
color: function (params) {
|
||
var colorList = ['#0EFCFF', '#1AC5CC', '#288E9A', '#FA8100', '#C06F18'].reverse();
|
||
return colorList[params.dataIndex]
|
||
},
|
||
},
|
||
max: 1,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#fff', //百分比颜色
|
||
fontSize: 8
|
||
},
|
||
position: 'right',
|
||
//百分比格式
|
||
formatter: function (data) {
|
||
return (baifenbi[data.dataIndex]);
|
||
},
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
z: 2,
|
||
data: baifenbi,
|
||
},
|
||
//数据条--------------------我是分割线君------------------------------//
|
||
{
|
||
show: true,
|
||
type: 'bar',
|
||
xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
|
||
barGap: '-100%',
|
||
barWidth: '40%', //统计条宽度
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 200,
|
||
color: 'transparent'
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
//label 的position位置可以是top bottom left,right,也可以是固定值
|
||
//在这里需要上下统一对齐,所以用固定值
|
||
position: ["-38%", '5%'],
|
||
rich: { //富文本
|
||
color: { //自定义颜色
|
||
color: '#1BC5CC',
|
||
fontSize: 12
|
||
},
|
||
value: xingm,
|
||
start1: {
|
||
},
|
||
|
||
},
|
||
formatter: function (data) {
|
||
//富文本固定格式{colorName|这里填你想要写的内容}
|
||
return '{start1|}{color|' + xingm[data.dataIndex] + '}'
|
||
|
||
},
|
||
}
|
||
},
|
||
data: zongjine
|
||
}
|
||
|
||
]
|
||
};
|
||
|
||
option3 = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
x: 'center',
|
||
data: ['销售', '销售额'],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 12
|
||
},
|
||
itemWidth: 8,
|
||
itemHeight: 8,
|
||
},
|
||
calculable: true,
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['2015', '2016', '2017', '2018', '2019'],
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.2)',
|
||
// opacity: 0.1,
|
||
}
|
||
},
|
||
"axisTick": { //y轴刻度线
|
||
"show": false
|
||
},
|
||
"axisLine": { //y轴
|
||
"show": false,
|
||
},
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
scale: true,
|
||
name: "销量(吨)",
|
||
nameTextStyle: {
|
||
color: 'rgba(255,255,255,.2)',
|
||
},
|
||
max: 100000,
|
||
min: 0,
|
||
boundaryGap: [0.2, 0.2],
|
||
"axisTick": { //y轴刻度线
|
||
"show": false
|
||
},
|
||
"axisLine": { //y轴
|
||
"show": false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.2)',
|
||
// opacity: 0.1,
|
||
}
|
||
},
|
||
splitLine: { //决定是否显示坐标中网格
|
||
show: true,
|
||
lineStyle: {
|
||
color: ['#fff'],
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
scale: true,
|
||
name: "销量额(万元)",
|
||
nameTextStyle: {
|
||
color: 'rgba(255,255,255,.2)',
|
||
},
|
||
max: 600000,
|
||
min: 0,
|
||
boundaryGap: [0.2, 0.2],
|
||
"axisTick": { //y轴刻度线
|
||
"show": false
|
||
},
|
||
"axisLine": { //y轴
|
||
"show": false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,.2)',
|
||
// opacity: 0.1,
|
||
}
|
||
},
|
||
splitLine: { //决定是否显示坐标中网格
|
||
show: false,
|
||
lineStyle: {
|
||
color: ['#fff'],
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
|
||
}
|
||
],
|
||
color: ['#0efcff', '#F45E23'],
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
top: '25%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
series: [
|
||
{
|
||
name: '销售',
|
||
type: 'bar',
|
||
data: [47800, 55000, 63580, 70000, 82000],
|
||
},
|
||
{
|
||
name: '销售额',
|
||
type: 'bar',
|
||
data: [28680, 33000, 38148, 45500, 53300],
|
||
}
|
||
]
|
||
};
|
||
|
||
HYChart1.setOption(option)
|
||
HYChart2.setOption(option2)
|
||
HYChart3.setOption(option3)
|
||
|
||
setInterval(function () {
|
||
numInit();
|
||
HYChart1.clear();
|
||
HYChart2.clear();
|
||
HYChart3.clear();
|
||
|
||
HYChart1.setOption(option);
|
||
HYChart2.setOption(option2);
|
||
HYChart3.setOption(option3);
|
||
|
||
}, 7000)
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|
||
|