From 286229e2b04de5c73a11abb257bada87ea1c3449 Mon Sep 17 00:00:00 2001
From: yangle <admin@YINMOU>
Date: 星期一, 11 九月 2023 17:06:03 +0800
Subject: [PATCH] 1
---
GlobalSituation.html | 1537 +++++++++++++++++++++++++++++
img/body.jpg | 0
img/bj.png | 0
GlobalSituation2.html | 1552 +++++++++++++++++++++++++++++
img/bj2.jpg | 0
img/body1.jpg | 0
6 files changed, 3,089 insertions(+), 0 deletions(-)
diff --git a/GlobalSituation.html b/GlobalSituation.html
new file mode 100644
index 0000000..fb216fc
--- /dev/null
+++ b/GlobalSituation.html
@@ -0,0 +1,1537 @@
+锘�<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8" />
+ <title>鍏ㄥ眬鐘跺喌鐪嬫澘</title>
+ <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
+ <link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css">
+ <link rel="stylesheet" type="text/css" href="css/index.css">
+ <script src="js/jquery.min.js"></script>
+ <script src='js/echarts.min.js'></script>
+ <script src="js/bootstrap.min.js"></script>
+ <script src='js/bootstrap-table.min.js'></script>
+ <script src='js/bootstrap-select.min.js'></script>
+ <script src='js/bootstrap-table-zh-CN.min.js'></script>
+ <script src="js/jquery.SuperSlide.2.1.3.js"></script>
+ <script src='js/template.js'></script>
+ <script src="js/jquery.qrcode.min.js"></script>
+ <script src="js/webConfig.js"></script>
+ <style>
+ body {
+ padding-left: 50px;
+ padding-right: 50px;
+ font-family: KaiTi;
+ /*background-color: #031f52;*/
+ }
+
+ .box:after {
+ content: "";
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: url(../KanBanUI/img/body.jpg) no-repeat center center; /*鍔犺浇鑳屾櫙鍥撅細鍥剧墖鍦板潃 涓嶅钩閾� */
+ background-size: cover; /* 璁╄儗鏅浘鍩轰簬瀹瑰櫒澶у皬浼哥缉 */
+ background-attachment: fixed; /* background-attachment璁剧疆鑳屾櫙鍥惧儚鏄惁鍥哄畾鎴栬�呴殢鐫�椤甸潰鐨勫叾浣欓儴鍒嗘粴鍔ㄣ��
+ scroll 鑳屾櫙鍥剧墖闅忕潃椤甸潰鐨勬粴鍔ㄨ�屾粴鍔紝杩欐槸榛樿鐨勩��
+ fixed 鑳屾櫙鍥剧墖涓嶄細闅忕潃椤甸潰鐨勬粴鍔ㄨ�屾粴鍔ㄣ��
+ local 鑳屾櫙鍥剧墖浼氶殢鐫�鍏冪礌鍐呭鐨勬粴鍔ㄨ�屾粴鍔ㄣ��*/
+
+ width: 100%;
+ height: 100%;
+ /*opacity: 0.1;*/
+ z-index: -1;
+ }
+
+ .tr0 {
+ height: 80px;
+ /*background-color: aquamarine;*/
+ width: 100%
+ }
+
+ .tr1 {
+ height: 600px;
+ /*background-color: aquamarine;*/
+ width: 100%
+ }
+
+ .col1 {
+ width: 13%;
+ background: rgb(0 104 255 / 23%);
+ height: 100%;
+ float: left;
+ margin-right: 2%;
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .col1-1 {
+ width: 100%;
+ height: 7%;
+ background: linear-gradient(270deg,#196bcb00,#1391ba);
+ line-height: 300%;
+ }
+
+ .col1-1 p {
+ font-size: 20PX;
+ text-align: center;
+ height: 100%;
+ /*padding-left: 5%;*/
+ }
+
+ .col1-2 {
+ width: 100%;
+ height: 93%;
+ font-size:20px;
+ /*background-color: #865454;*/
+
+ }
+
+ .col1-2 p {
+ padding-top: 10px;
+ }
+
+ .col1-2 h2 {
+ text-align: center;
+ }
+
+ .col1-2-j {
+ width: 100%;
+ height: 25%;
+ /*background-color: #865454;*/
+ }
+
+ .col1-2-w {
+ width: 100%;
+ height: 25%;
+ /*background-color: #865454;*/
+ }
+
+ .col1-2-z {
+ width: 100%;
+ height: 25%;
+ /*background-color: #865454;*/
+ }
+
+ .col1-2-d {
+ width: 100%;
+ height: 25%;
+ /*background-color: #865454;*/
+ }
+
+ .col2 {
+ width: 70%;
+ background: rgb(0 104 255 / 23%);
+ height: 100%;
+ float: left;
+ margin-right: 2%;
+ }
+
+ .col2-1 {
+ width: 100%;
+ height: 100%;
+ background-color: #865454;
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(25 125 239 / 64%)), color-stop(100%,rgba(125,185,232,0)));
+ /*border:solid 1px #0ddae8*/
+ }
+ .col2-1-p {
+ width: 50%;
+ height: 100%;
+ /*background-color: #0d5974;*/
+ margin: 0 auto;
+ line-height: 100%;
+ padding:1% 10%;
+ }
+
+ .col2-1-p p {
+ font-size: 32px;
+ text-align: center;
+ width: 100%;
+ height: 100%;
+ line-height: 160%;
+ /*background-color: #88ace74d;*/
+ }
+
+ .col2-2 {
+ width: 100%;
+ height: 100%;
+ }
+
+ .col2-2-in {
+ width: 100%;
+ height: 100%;
+ /*background-color: #d6bbbb;*/
+ background: url(../KanBanUI/img/bj.png) no-repeat center center;
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .col2-2-in-1 {
+ width: 100%;
+ height: 30%;
+ }
+
+ .col2-2-in-1-l {
+ width: 17%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 6.5%;
+ float: left;
+ }
+
+ .col2-2-in-1-l p {
+ text-align: right;
+ height: 10px;
+ }
+
+ .col2-2-in-1-c {
+ width: 20%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 6.5%;
+ float: left;
+ }
+
+ .col2-2-in-1-c p {
+ text-align: right;
+ height: 10px;
+ }
+
+ .col2-2-in-1-r {
+ width: 17%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 6.5%;
+ float: left;
+ }
+
+ .col2-2-in-1-r p {
+ text-align: right;
+ height: 10px;
+ }
+
+ .col2-2-in-1-r2 {
+ width: 17%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 6.5%;
+ float: left;
+ }
+
+ .col2-2-in-1-r2 p {
+ text-align: right;
+ height: 10px;
+ }
+
+ .col2-2-in-1-r3 {
+ width: 18%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 6.5%;
+ float: left;
+ }
+
+ .col2-2-in-1-r3 p {
+ text-align: right;
+ height: 10px;
+ }
+
+ .col2-2-in-2 {
+ width: 100%;
+ height: 10%;
+ /*background-color: #93a6b7;*/
+ }
+
+ .col2-2-in-2-l {
+ width: 12%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ float: left;
+ }
+
+ .col2-2-in-2-l p {
+ text-align: right;
+ font-size:20px;
+ }
+
+ .col2-2-in-2-c {
+ width: 20%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-2-c p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-2-r {
+ width: 18%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-2-r p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-2-r2 {
+ width: 17%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-2-r2 p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-2-r3 {
+ width: 19%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-2-r3 p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-3 {
+ width: 100%;
+ height: 29%;
+ /*background-color: #93a6b7;*/
+ padding-top: 10%;
+ }
+
+ .col2-2-in-3-l {
+ width: 31%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ float: left;
+ }
+
+ .col2-2-in-3-l p {
+ text-align: right;
+ height: 10px;
+ /*font-size: 20px;*/
+ }
+
+ .col2-2-in-3-r {
+ width: 26%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ float: left;
+ }
+
+ .col2-2-in-3-r p {
+ text-align: right;
+ height: 10px;
+ /*font-size: 20px;*/
+ }
+
+ .col2-2-in-3-r2 {
+ width: 23%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ float: left;
+ }
+
+ .col2-2-in-3-r2 p {
+ text-align: right;
+ height: 10px;
+ /*font-size: 20px;*/
+ }
+
+ .col2-2-in-4 {
+ width: 100%;
+ height: 5%;
+ /*background-color: #93a6b7;*/
+ }
+
+ .col2-2-in-4-l {
+ width: 15%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ float: left;
+ }
+
+ .col2-2-in-4-l p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-4-c {
+ width: 25%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-4-c p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-4-r {
+ width: 24%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-4-r p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-4-r2 {
+ width: 23%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-4-r2 p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-5 {
+ width: 100%;
+ height: 20%;
+ /*background-color: #93a6b7;*/
+ /*padding-bottom:2%;*/
+ }
+
+ .col2-2-in-5-l {
+ width: 17%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 5%;
+ float: left;
+ }
+
+ .col2-2-in-5-l p {
+ text-align: right;
+ height: 10px;
+ /*font-size: 20px;*/
+ }
+
+ .col2-2-in-5-lc {
+ width: 10%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*padding-top: 2%;*/
+ float: left;
+ }
+
+ .col2-2-in-5-lc p {
+ text-align: right;
+ height: 10px;
+ font-size: 20px;
+ }
+
+ .col2-2-in-5-c {
+ width: 16%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 5%;
+ float: left;
+ }
+
+ .col2-2-in-5-c p {
+ text-align: right;
+ height: 10px;
+ }
+
+ .col2-2-in-5-cr {
+ width: 9%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*padding-top: 2%;*/
+ float: left;
+ }
+
+ .col2-2-in-5-cr p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-5-rr2 {
+ width: 9%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*padding-top: 2%;*/
+ float: left;
+ }
+
+ .col2-2-in-5-rr2 p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-5-r {
+ width: 15%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 5%;
+ float: left;
+ }
+
+ .col2-2-in-5-r p {
+ text-align: right;
+ height: 10px;
+ /*font-size: 20px;*/
+ }
+
+ .col2-2-in-5-r2 {
+ width: 14%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 5%;
+ float: left;
+ }
+
+ .col2-2-in-5-r2 p {
+ text-align: right;
+ height: 10px;
+ /*background-color: #93a6b7;*/
+ }
+
+ .col3 {
+ width: 13%;
+ background: rgb(0 104 255 / 23%);
+ height: 100%;
+ float: left;
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .col3-1 {
+ width: 100%;
+ height: 7%;
+ background: linear-gradient(270deg,#196bcb00,#1391ba);
+ line-height: 300%;
+ }
+
+ .col3-1 p {
+ font-size: 20PX;
+ text-align: center;
+ height: 100%;
+ /*padding-left: 5%;*/
+ }
+
+ .col3-2 {
+ width: 100%;
+ height: 93%;
+ font-size:20px;
+ /*background-color: #865454;*/
+ }
+
+ .col3-2 p {
+ padding-top: 10px;
+ }
+
+ .col3-2 h2 {
+ text-align: center;
+ }
+
+ .col3-2-j {
+ width: 100%;
+ height: 20%;
+ /*background-color: #865454;*/
+ }
+
+ .col3-2-w {
+ width: 100%;
+ height: 20%;
+ /*background-color: #865454;*/
+ }
+
+ .col3-2-z {
+ width: 100%;
+ height: 20%;
+ /*background-color: #865454;*/
+ }
+
+ .col3-2-d {
+ width: 100%;
+ height: 20%;
+ /*background-color: #865454;*/
+ }
+
+ .col3-2-t {
+ width: 100%;
+ height: 20%;
+ /*background-color: #865454;*/
+ }
+
+ .tr2 {
+ height: 300px;
+ /*background-color: #e0dddd;*/
+ width: 100%;
+ padding-top: 1%;
+ }
+
+ .tr2-1 {
+ width: 24%;
+ height: 100%;
+ background: rgb(0 104 255 / 23%);
+ float: left;
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .tr2-1-on {
+ width: 100%;
+ height: 10%;
+ background: linear-gradient(270deg,#196bcb00,#1391ba);
+ }
+
+ .tr2-1-on p {
+ text-align: left;
+ padding-left: 2%;
+ font-size: 20px;
+ }
+
+ .tr2-1-in {
+ width: 100%;
+ height: 90%;
+ /*background-color: #c7c5db;*/
+ }
+
+ .tr2-2 {
+ width: 24%;
+ height: 100%;
+ background: rgb(0 104 255 / 23%);
+ float: left;
+ margin-left: 1%;
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .tr2-3 {
+ width: 24%;
+ height: 100%;
+ background: rgb(0 104 255 / 23%);
+ float: left;
+ margin-left: 1%;
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .tr2-4 {
+ width: 24%;
+ height: 100%;
+ background: rgb(0 104 255 / 23%);
+ float: left;
+ margin-left: 1%;
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .clock {
+ font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+ font-size: 20px;
+ float: right;
+ margin-top: -44px;
+ margin-right: 5px;
+ }
+
+ .clock ul {
+ width: 450px;
+ margin: 0 auto;
+ padding: 0px;
+ list-style: none;
+ text-align: right;
+ margin-left: 15px;
+ position: relative;
+ }
+
+ .clock ul li {
+ display: inline;
+ font-size: 24px;
+ text-align: left;
+ font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+ text-shadow: 0 0 0px #00c6ff;
+ }
+ </style>
+ <script type="text/javascript">
+ $(document).ready(function () {
+ // 鍒涘缓涓や釜鍙橀噺锛屼竴涓暟缁勪腑鐨勬湀鍜屾棩鐨勫悕绉�
+ var monthNames = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
+ setInterval(function () {
+ var date1 = new Date;
+ var year = date1.getFullYear();
+ var month = date1.getMonth();
+ var day = date1.getDate();
+ var hh = date1.getHours();
+ var mm = date1.getMinutes();
+ var ss = date1.getSeconds();
+
+
+ $('#Date').html(year + "-" + monthNames[month] + '-' + (day < 10 ? "0" + day : day) + " ");
+ $("#hours").html((hh < 10 ? ("0" + hh) : hh));
+ $("#min").html((mm < 10 ? ("0" + mm) : mm));
+ $("#sec").html((ss < 10 ? ("0" + ss) : ss));
+
+ }, 1000);
+ });
+
+ $(function () {
+ var mychart1 = echarts.init(document.getElementById('mychart1'));
+ var mychart2 = echarts.init(document.getElementById('mychart2'));
+ var mychart3 = echarts.init(document.getElementById('mychart3'));
+ var mychart4 = echarts.init(document.getElementById('mychart4'));
+
+ Chart(mychart1, mychart2, mychart3, mychart4);
+
+ setInterval(function () {
+ Chart(mychart1, mychart2, mychart3, mychart4);
+ }, 60000);
+
+
+
+ //鏍规嵁绐楀彛鐨勫ぇ灏忓彉鍔ㄥ浘琛� --- 閲嶇偣
+ window.onresize = function () {
+ mychart1.resize();
+ mychart2.resize();
+ mychart3.resize();
+ mychart4.resize();
+ }
+
+ });
+ var PubRes = [];
+
+
+
+ function Chart(mychart1, mychart2, mychart3, mychart4) {
+ //鎵�鏈夊伐搴忓湪鍒� 鐢熶骇鏁伴噺
+ get_Proc();
+ //褰撳墠鐘舵��
+ get_CurrentState();
+ //鎶樼嚎鍥�
+ get_LineChart(mychart1, mychart3);
+ //鏌辩姸鍥�
+ get_Histogram(mychart2);
+ //浠〃鐩�
+ get_Dashboard(mychart4);
+ }
+
+ //褰撳墠鐘舵��
+ function get_CurrentState() {
+ $.ajax({
+ url: GetWEBURL() + "/loaddata/get_CurrentState",
+ dataType: "JSON",
+ async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
+ type: "Get",
+ data: { "LineCode": "1" },
+ success: function (res) {
+ var HQty = 0.0;
+ for (var i = 0; i < PubRes.data[0].length; i++) {
+ HQty += PubRes.data[0][i].InHQty;
+ }
+ $("#jh").text(res.data[0][0]["HQty"].toLocaleString());
+ $("#wc").text(res.data[1][0]["HQty"].toLocaleString());
+ $("#zz").text(HQty.toLocaleString());
+ $("#dd").text(res.data[2][0]["HQty"].toLocaleString());
+ }
+ })
+ }
+
+ //宸ュ簭鏁伴噺
+ function get_Proc() {
+ $.ajax({
+ url: GetWEBURL() + "/loaddata/KB_ProcSum",
+ dataType: "JSON",
+ async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
+ type: "Get",
+ data: { "LineCode": "1" },
+ success: function (res) {
+ PubRes = res;
+ for (var i = 0; i < res.data[0].length; i++) {
+ if (res.data[0][i].HProcID == 191) {//缂稿巶
+ //$("#zzp1_2").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_2").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ } else
+ if (res.data[0][i].HProcID == 193) {//鐑樺共瀹氬瀷
+ $("#zzp1_3").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_3").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 194) {//涓婃祮瀹氬瀷
+ $("#zzp1_4").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_4").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 198) {//鑹插澂鐑厜
+ $("#zzp1_5").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_5").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 204) {//棰勭儷鍓�
+ $("#zzp1_6").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_6").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 197) {//琛ュ埛
+ $("#zzp1_7").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_7").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 201) {//鍗版瘺灏�
+ $("#zzp1_8").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_8").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 200) {//鎷夊箙瀹氬瀷
+ $("#zzp1_9").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_9").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 206) {//鐭嚎鐑�
+ $("#zzp1_10").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_10").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 205) {//闀跨嚎鐑�
+ $("#zzp1_11").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_11").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ $("#zzp1_12").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());//鎵撳寘鍏ュ簱
+ }
+ }
+ //鎵撳寘鍏ュ簱
+ $("#cps_12").text("浜у搧鏁�: " + res.data[1][0].HQty.toLocaleString());
+ //鏌撳巶鍦ㄥ埗鏁伴噺
+ $("#zzp1_2").text("鍦ㄥ埗鍝�: " + (res.data[2].length == 0 ? 0 : res.data[2][0].HQty.toLocaleString()));
+ }
+ })
+ }
+
+ //鎶樼嚎鍥�
+ function get_LineChart(mychart1, mychart3) {
+
+ //鐢熶骇鏁堢巼
+ var res = PubRes;
+ var optionData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+ for (var i = 0; i < res.data[0].length; i++) {
+ if (res.data[0][i].HProcID == 191) {//缂稿巶
+ optionData[0] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ } else if (res.data[0][i].HProcID == 193) {//鐑樺共瀹氬瀷
+ optionData[1] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 194) {//涓婃祮瀹氬瀷
+ optionData[2] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 198) {//鑹插澂鐑厜
+ optionData[3] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 204) {//棰勭儷鍓�
+ optionData[4] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 197) {//琛ュ埛
+ optionData[5] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 201) {//鍗版瘺灏�
+ optionData[6] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 200) {//鎷夊箙瀹氬瀷
+ optionData[7] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 206) {//鐭嚎鐑�
+ optionData[8] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 205) {//闀跨嚎鐑�
+ optionData[9] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ }
+ //鎵撳寘鍏ュ簱
+ optionData[10] = (res.data[1][0].HQty / 1000).toFixed(2);
+
+ var option = {
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['缂告煋', '鐑樺共瀹氬瀷', '涓婃祮瀹氬瀷', '鑹插澂鐑厜', '棰勭儷鍓�', '琛ュ埛', '鍗版瘺灏�', '鎷夊箙瀹氬瀷', '鐭嚎鐑�', '闀跨嚎鐑�', '鎵撳寘鍏ュ簱']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ legend: {
+ orient: 'vertical',
+ data: ['12', '43'],//璁剧疆绾挎潯鐨勫悕瀛�
+ right: 0,
+ top: 15,
+ textStyle: {
+ color: '#35d1ed' //璁剧疆瀛椾綋棰滆壊
+ }
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ color: '#35d1ed',
+ formatter: function (value) {
+ var ret = "";//鎷兼帴鍔燶n杩斿洖鐨勭被鐩」
+ var maxLength = 1;//姣忛」鏄剧ず鏂囧瓧涓暟
+ var valLength = value.length;//X杞寸被鐩」鐨勬枃瀛椾釜鏁�
+ var rowN = Math.ceil(valLength / maxLength); //绫荤洰椤归渶瑕佹崲琛岀殑琛屾暟
+ if (rowN > 1)//濡傛灉绫荤洰椤圭殑鏂囧瓧澶т簬3,
+ {
+ for (var i = 0; i < rowN; i++) {
+ var temp = "";//姣忔鎴彇鐨勫瓧绗︿覆
+ var start = i * maxLength;//寮�濮嬫埅鍙栫殑浣嶇疆
+ var end = start + maxLength;//缁撴潫鎴彇鐨勪綅缃�
+ //杩欓噷涔熷彲浠ュ姞涓�涓槸鍚︽槸鏈�鍚庝竴琛岀殑鍒ゆ柇锛屼絾鏄笉鍔犱篃娌℃湁褰卞搷锛岄偅灏变笉鍔犲惂
+ temp = value.substring(start, end) + "\n";
+ ret += temp; //鍑�熸渶缁堢殑瀛楃涓�
+ }
+ return ret;
+ }
+ else {
+ return value;
+ }
+ }
+ },
+ series: [
+ {
+ name: '12',//涓巐egend瀵瑰簲
+ data: optionData,
+ type: 'line',
+ label: {
+ normal: {
+ show: true,
+ position: 'top',
+ formatter: function (params) {
+ return echarts.format.addCommas(params.value);
+ }
+ }
+ },
+ smooth: true,//smooth灞炴�ч粯璁ゆ槸false false灏辨槸鐩寸嚎 true灏辨槸鏇茬嚎
+ lineStyle: {
+ color: '#44E2F0'
+ }
+ , itemStyle: {
+ // 璁剧疆绾挎潯涓婄偣鐨勯鑹诧紙鍜屽浘渚嬬殑棰滆壊锛�
+ normal: {
+ color: '#44E2F0',
+ label: {
+ show: true // 鍦ㄦ姌绾挎嫄鐐逛笂鏄剧ず鏁版嵁
+ }
+ },
+ }, areaStyle: {}
+ },
+ {
+ name: '43',
+ data: [10, 10, 10, 10, 10, 10, 10, 10],
+ type: 'line',
+ smooth: true,//smooth灞炴�ч粯璁ゆ槸false false灏辨槸鐩寸嚎 true灏辨槸鏇茬嚎
+ lineStyle: {
+ color: '#90f083'
+ }
+ , itemStyle: {
+ // 璁剧疆绾挎潯涓婄偣鐨勯鑹诧紙鍜屽浘渚嬬殑棰滆壊锛�
+ normal: {
+ color: '#90f083',
+ label: {
+ show: true // 鍦ㄦ姌绾挎嫄鐐逛笂鏄剧ず鏁版嵁
+ }
+ },
+ }, areaStyle: {}
+ }
+ ]
+ };
+
+
+ //鐢熶骇浜ч噺
+ var dateData = [];
+ var OptionData = [];
+ $.ajax({
+ url: GetWEBURL() + "/loaddata/ProductionOutput",
+ dataType: "JSON",
+ async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
+ type: "Get",
+ data: { "LineCode": "1" },
+ success: function (res) {
+ for (var i = 0; i < res.data[0].length; i++) {
+ dateData.push(res.data[0][i]["HDate"]);
+ OptionData.push((res.data[0][i]["HQty"] / 1000).toFixed(2));
+ }
+ }
+ })
+
+ var option2 = {
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: dateData
+ },
+ yAxis: {
+ type: 'value'
+ },
+ legend: {
+ orient: 'vertical',
+ data: ['鍗冪背'],//璁剧疆绾挎潯鐨勫悕瀛�
+ right: 0,
+ top: 15,
+ textStyle: {
+ color: '#35d1ed' //璁剧疆瀛椾綋棰滆壊
+ }
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ color: '#35d1ed',
+ formatter: function (value) {
+ var ret = "";//鎷兼帴鍔燶n杩斿洖鐨勭被鐩」
+ var maxLength = 2;//姣忛」鏄剧ず鏂囧瓧涓暟
+ var valLength = value.length;//X杞寸被鐩」鐨勬枃瀛椾釜鏁�
+ var rowN = Math.ceil(valLength / maxLength); //绫荤洰椤归渶瑕佹崲琛岀殑琛屾暟
+ if (rowN > 1)//濡傛灉绫荤洰椤圭殑鏂囧瓧澶т簬3,
+ {
+ for (var i = 0; i < rowN; i++) {
+ var temp = "";//姣忔鎴彇鐨勫瓧绗︿覆
+ var start = i * maxLength;//寮�濮嬫埅鍙栫殑浣嶇疆
+ var end = start + maxLength;//缁撴潫鎴彇鐨勪綅缃�
+ //杩欓噷涔熷彲浠ュ姞涓�涓槸鍚︽槸鏈�鍚庝竴琛岀殑鍒ゆ柇锛屼絾鏄笉鍔犱篃娌℃湁褰卞搷锛岄偅灏变笉鍔犲惂
+ if (value[i + 1] == "/") {
+ temp = value.substring(i + 1, i + 2) + "\n" + value.substring(i + 2, valLength);
+ ret += temp;
+ return ret;
+ } else {
+ temp = value.substring(start, end) + "\n";
+ }
+ ret += temp; //鍑�熸渶缁堢殑瀛楃涓�
+ }
+ return ret;
+ }
+ else {
+ return value;
+ }
+ }
+ },
+ series: [
+ {
+ name: '鍗冪背',//涓巐egend瀵瑰簲
+ data: OptionData,
+ type: 'line',
+ label: {
+ normal: {
+ show: true,
+ position: 'top',
+ formatter: function (params) {
+ return echarts.format.addCommas(params.value);
+ }
+ }
+ },
+ smooth: true,//smooth灞炴�ч粯璁ゆ槸false false灏辨槸鐩寸嚎 true灏辨槸鏇茬嚎
+ lineStyle: {
+ color: '#44E2F0' //绾挎潯棰滆壊
+ }
+ , itemStyle: {
+ // 璁剧疆绾挎潯涓婄偣鐨勯鑹诧紙鍜屽浘渚嬬殑棰滆壊锛�
+ normal: {
+ color: '#44E2F0',
+ label: {
+ show: true // 鍦ㄦ姌绾挎嫄鐐逛笂鏄剧ず鏁版嵁
+ }
+ },
+ }
+ }
+ ]
+ };
+ mychart1.setOption(option);
+ mychart3.setOption(option2);
+ }
+
+ //鏌辩姸鍥�
+ function get_Histogram(mychart2) {
+
+ //鐢熶骇璐熻嵎
+ var optionData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+
+ $.ajax({
+ url: GetWEBURL() + "/loaddata/KB_scfh",
+ dataType: "JSON",
+ async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
+ type: "Get",
+ data: { "LineCode": "1" },
+ success: function (res) {
+
+ for (var i = 0; i < res.data[0].length; i++) {
+ if (res.data[0][i].HProcID == 191) {//缂稿巶
+ optionData[0] = (res.data[0][i].HQty / 1000).toFixed(2);
+ } else if (res.data[0][i].HProcID == 193) {//鐑樺共瀹氬瀷
+ optionData[1] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 194) {//涓婃祮瀹氬瀷
+ optionData[2] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 198) {//鑹插澂鐑厜
+ optionData[3] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 204) {//棰勭儷鍓�
+ optionData[4] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 197) {//琛ュ埛
+ optionData[5] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 201) {//鍗版瘺灏�
+ optionData[6] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 200) {//鎷夊箙瀹氬瀷
+ optionData[7] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 206) {//鐭嚎鐑�
+ optionData[8] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 205) {//闀跨嚎鐑�
+ optionData[9] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ }
+ }
+ })
+
+ var option = {
+ xAxis: {
+ type: 'category',
+ data: ['缂告煋', '鐑樺共瀹氬瀷', '涓婃祮瀹氬瀷', '鑹插澂鐑厜', '棰勭儷鍓�', '琛ュ埛', '鍗版瘺灏�', '鎷夊箙瀹氬瀷', '鐭嚎鐑�', '闀跨嚎鐑�']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ color: '#35d1ed',
+ formatter: function (value) {
+ var ret = "";//鎷兼帴鍔燶n杩斿洖鐨勭被鐩」
+ var maxLength = 1;//姣忛」鏄剧ず鏂囧瓧涓暟
+ var valLength = value.length;//X杞寸被鐩」鐨勬枃瀛椾釜鏁�
+ var rowN = Math.ceil(valLength / maxLength); //绫荤洰椤归渶瑕佹崲琛岀殑琛屾暟
+ if (rowN > 1)//濡傛灉绫荤洰椤圭殑鏂囧瓧澶т簬3,
+ {
+ for (var i = 0; i < rowN; i++) {
+ var temp = "";//姣忔鎴彇鐨勫瓧绗︿覆
+ var start = i * maxLength;//寮�濮嬫埅鍙栫殑浣嶇疆
+ var end = start + maxLength;//缁撴潫鎴彇鐨勪綅缃�
+ //杩欓噷涔熷彲浠ュ姞涓�涓槸鍚︽槸鏈�鍚庝竴琛岀殑鍒ゆ柇锛屼絾鏄笉鍔犱篃娌℃湁褰卞搷锛岄偅灏变笉鍔犲惂
+ temp = value.substring(start, end) + "\n";
+ ret += temp; //鍑�熸渶缁堢殑瀛楃涓�
+ }
+ return ret;
+ }
+ else {
+ return value;
+ }
+ }
+ },
+ series: [
+ {
+ data: optionData,
+ type: 'bar',
+ label: {
+ normal: {
+ show: true,
+ position: 'top',
+ formatter: function (params) {
+ return echarts.format.addCommas(params.value);
+ }
+ }
+ }
+ , itemStyle: {
+ // 璁剧疆鏌卞舰鐨勯鑹�
+ normal: {
+ //color: '#44E2F0',
+ label: {
+ show: true // 鍦ㄦ姌绾挎嫄鐐逛笂鏄剧ず鏁版嵁
+ }
+ },
+ }
+ }
+ ]
+ };
+ mychart2.setOption(option);
+ }
+
+ //浠〃鐩�
+ function get_Dashboard(mychart4) {
+ var hgl = 0;
+ var zcl = 0;
+ //鍒舵垚鐜�
+ $.ajax({
+ url: GetWEBURL() + "/loaddata/Dashboard",
+ dataType: "JSON",
+ async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
+ type: "Get",
+ data: { "LineCode": "1" },
+ success: function (res) {
+ hgl = res.data[0][0]["鍚堟牸鐜�"].toFixed(2);
+ zcl = res.data[1][0]["鍒舵垚鐜�"].toFixed(2);
+ }
+ })
+
+ var option = {
+ series: [
+ {//宸﹁竟浠〃鐩�
+ // name: '涓氬姟鎸囨爣',
+ type: 'gauge',
+ detail: {
+ formatter: '{value}%',
+ //offsetCenter: ['10', '70%'], //鐩稿浜庝华琛ㄧ洏涓績鐨勫亸绉讳綅缃紝鏁扮粍绗竴椤规槸姘村钩鏂瑰悜鐨勫亸绉伙紝绗簩椤规槸鍨傜洿鏂瑰悜鐨勫亸绉汇�傚彲浠ユ槸缁濆鐨勬暟鍊硷紝涔熷彲浠ユ槸鐩稿浜庝华琛ㄧ洏鍗婂緞鐨勭櫨鍒嗘瘮
+ fontSize: 22, //鏂囧瓧鐨勫瓧浣撳ぇ灏�
+ offsetCenter: ['20%', '100%']
+ },
+ radius: "60%", // 鍙傛暟:number, string銆� 浠〃鐩樺崐寰�,榛樿 75% 锛屽彲浠ユ槸鐩稿浜庡鍣ㄩ珮瀹戒腑杈冨皬鐨勪竴椤圭殑涓�鍗婄殑鐧惧垎姣旓紝涔熷彲浠ユ槸缁濆鐨勬暟鍊笺��
+ center: ["25%", "60%"],
+ startAngle: 235,
+ endAngle: 25,
+ clockWise: true,
+ min: 0,
+ max: 100,
+ splitNumber: 10, // 浠〃鐩樺埢搴︾殑鍒嗗壊娈垫暟,榛樿 10銆�
+ axisTick: { // 鍒诲害(绾�)鏍峰紡銆�
+ show: true, // 鏄惁鏄剧ず鍒诲害(绾�),榛樿 true銆�
+ splitNumber: 5, // 鍒嗛殧绾夸箣闂村垎鍓茬殑鍒诲害鏁�,榛樿 5銆�
+ length: 15, // 鍒诲害绾块暱銆傛敮鎸佺浉瀵瑰崐寰勭殑鐧惧垎姣�,榛樿 8銆�
+ lineStyle: { // 鍒诲害绾挎牱寮忋��
+ color: "auto", //绾跨殑棰滆壊,榛樿 #eee銆�
+ opacity: 1, //鍥惧舰閫忔槑搴︺�傛敮鎸佷粠 0 鍒� 1 鐨勬暟瀛楋紝涓� 0 鏃朵笉缁樺埗璇ュ浘褰€��
+ width: 1, //绾垮害,榛樿 1銆�
+ type: "solid", //绾跨殑绫诲瀷,榛樿 solid銆� 姝ゅ杩樻湁 dashed,dotted
+ // shadowBlur: 10, //(鍙戝厜鏁堟灉)鍥惧舰闃村奖鐨勬ā绯婂ぇ灏忋�傝灞炴�ч厤鍚� shadowColor,shadowOffsetX, shadowOffsetY 涓�璧疯缃浘褰㈢殑闃村奖鏁堟灉銆�
+ // shadowColor: "#fff", //闃村奖棰滆壊銆傛敮鎸佺殑鏍煎紡鍚宑olor銆�
+ },
+ },
+ axisLine: { // 浠〃鐩樿酱绾�(杞粨绾�)鐩稿叧閰嶇疆銆�
+ show: true, // 鏄惁鏄剧ず浠〃鐩樿酱绾�(杞粨绾�),榛樿 true銆�
+ lineStyle: { // 浠〃鐩樿酱绾挎牱寮忋��
+ // color: colorTemplate1, //浠〃鐩樼殑杞寸嚎鍙互琚垎鎴愪笉鍚岄鑹茬殑澶氭銆傛瘡娈电殑 缁撴潫浣嶇疆(鑼冨洿鏄痆0,1]) 鍜� 棰滆壊 鍙互閫氳繃涓�涓暟缁勬潵琛ㄧず銆傞粯璁ゅ彇鍊硷細[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
+ // opacity: 1, //鍥惧舰閫忔槑搴︺�傛敮鎸佷粠 0 鍒� 1 鐨勬暟瀛楋紝涓� 0 鏃朵笉缁樺埗璇ュ浘褰€��
+ width: 10, //杞寸嚎瀹藉害,榛樿 30銆�
+ // shadowBlur: 20, //(鍙戝厜鏁堟灉)鍥惧舰闃村奖鐨勬ā绯婂ぇ灏忋�傝灞炴�ч厤鍚� shadowColor,shadowOffsetX, shadowOffsetY 涓�璧疯缃浘褰㈢殑闃村奖鏁堟灉銆�
+ // shadowColor: "#fff", //闃村奖棰滆壊銆傛敮鎸佺殑鏍煎紡鍚宑olor銆�
+ }
+ },
+ splitLine: { // 鍒嗛殧绾挎牱寮忋��
+ show: true, // 鏄惁鏄剧ず鍒嗛殧绾�,榛樿 true銆�
+ length: 15, // 鍒嗛殧绾跨嚎闀裤�傛敮鎸佺浉瀵瑰崐寰勭殑鐧惧垎姣�,榛樿 30銆�
+ lineStyle: { // 鍒嗛殧绾挎牱寮忋��
+ color: "auto", //绾跨殑棰滆壊,榛樿 #eee銆�
+ opacity: 1, //鍥惧舰閫忔槑搴︺�傛敮鎸佷粠 0 鍒� 1 鐨勬暟瀛楋紝涓� 0 鏃朵笉缁樺埗璇ュ浘褰€��
+ width: 2, //绾垮害,榛樿 2銆�
+ type: "solid", //绾跨殑绫诲瀷,榛樿 solid銆� 姝ゅ杩樻湁 dashed,dotted
+ // shadowBlur: 10, //(鍙戝厜鏁堟灉)鍥惧舰闃村奖鐨勬ā绯婂ぇ灏忋�傝灞炴�ч厤鍚� shadowColor,shadowOffsetX, shadowOffsetY 涓�璧疯缃浘褰㈢殑闃村奖鏁堟灉銆�
+ // shadowColor: "#fff", //闃村奖棰滆壊銆傛敮鎸佺殑鏍煎紡鍚宑olor銆�
+ }
+ },
+ title: {
+ fontSize: 20,
+ color: '#55bcd5',//鏍囬棰滆壊
+ offsetCenter: ['20%', '60%']//璁剧疆瀹屾垚鐜囦綅缃�
+ },
+ data: [{
+ value: zcl,
+ name: '鍒舵垚鐜�',
+ }],
+
+ },
+ {//鍙充华琛ㄧ洏
+ // name: '涓氬姟鎸囨爣',
+ type: 'gauge',
+ detail: {
+ formatter: '{value}%',
+ offsetCenter: ['10%', '90%']
+ },
+ radius: "80%", // 鍙傛暟:number, string銆� 浠〃鐩樺崐寰�,榛樿 75% 锛屽彲浠ユ槸鐩稿浜庡鍣ㄩ珮瀹戒腑杈冨皬鐨勪竴椤圭殑涓�鍗婄殑鐧惧垎姣旓紝涔熷彲浠ユ槸缁濆鐨勬暟鍊笺��
+ center: ["70%", "55%"],
+ startAngle: 225,//浠〃鐩樿捣濮嬭搴︺�傛鍙虫墜渚т负0搴︼紝姝ｄ笂鏂逛负90搴︼紝姝ｅ乏鎵嬩晶涓�180搴︺��
+ endAngle: -45,//浠〃鐩樼粨鏉熻搴�
+ clockWise: true,
+ min: 0,
+ max: 100,
+ splitNumber: 10, // 浠〃鐩樺埢搴︾殑鍒嗗壊娈垫暟,榛樿 10銆�
+ axisTick: { // 鍒诲害(绾�)鏍峰紡銆�
+ show: true, // 鏄惁鏄剧ず鍒诲害(绾�),榛樿 true銆�
+ splitNumber: 5, // 鍒嗛殧绾夸箣闂村垎鍓茬殑鍒诲害鏁�,榛樿 5銆�
+ length: 15, // 鍒诲害绾块暱銆傛敮鎸佺浉瀵瑰崐寰勭殑鐧惧垎姣�,榛樿 8銆�
+ lineStyle: { // 鍒诲害绾挎牱寮忋��
+ color: "auto", //绾跨殑棰滆壊,榛樿 #eee銆�
+ opacity: 1, //鍥惧舰閫忔槑搴︺�傛敮鎸佷粠 0 鍒� 1 鐨勬暟瀛楋紝涓� 0 鏃朵笉缁樺埗璇ュ浘褰€��
+ width: 1, //绾垮害,榛樿 1銆�
+ type: "solid", //绾跨殑绫诲瀷,榛樿 solid銆� 姝ゅ杩樻湁 dashed,dotted
+ // shadowBlur: 10, //(鍙戝厜鏁堟灉)鍥惧舰闃村奖鐨勬ā绯婂ぇ灏忋�傝灞炴�ч厤鍚� shadowColor,shadowOffsetX, shadowOffsetY 涓�璧疯缃浘褰㈢殑闃村奖鏁堟灉銆�
+ // shadowColor: "#fff", //闃村奖棰滆壊銆傛敮鎸佺殑鏍煎紡鍚宑olor銆�
+ },
+ },
+ axisLine: { // 浠〃鐩樿酱绾�(杞粨绾�)鐩稿叧閰嶇疆銆�
+ show: true, // 鏄惁鏄剧ず浠〃鐩樿酱绾�(杞粨绾�),榛樿 true銆�
+ lineStyle: { // 浠〃鐩樿酱绾挎牱寮忋��
+ // color: colorTemplate1, //浠〃鐩樼殑杞寸嚎鍙互琚垎鎴愪笉鍚岄鑹茬殑澶氭銆傛瘡娈电殑 缁撴潫浣嶇疆(鑼冨洿鏄痆0,1]) 鍜� 棰滆壊 鍙互閫氳繃涓�涓暟缁勬潵琛ㄧず銆傞粯璁ゅ彇鍊硷細[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
+ // opacity: 1, //鍥惧舰閫忔槑搴︺�傛敮鎸佷粠 0 鍒� 1 鐨勬暟瀛楋紝涓� 0 鏃朵笉缁樺埗璇ュ浘褰€��
+ width: 10, //杞寸嚎瀹藉害,榛樿 30銆�
+ // shadowBlur: 20, //(鍙戝厜鏁堟灉)鍥惧舰闃村奖鐨勬ā绯婂ぇ灏忋�傝灞炴�ч厤鍚� shadowColor,shadowOffsetX, shadowOffsetY 涓�璧疯缃浘褰㈢殑闃村奖鏁堟灉銆�
+ // shadowColor: "#fff", //闃村奖棰滆壊銆傛敮鎸佺殑鏍煎紡鍚宑olor銆�
+ }
+ },
+ splitLine: { // 鍒嗛殧绾挎牱寮忋��
+ show: true, // 鏄惁鏄剧ず鍒嗛殧绾�,榛樿 true銆�
+ length: 15, // 鍒嗛殧绾跨嚎闀裤�傛敮鎸佺浉瀵瑰崐寰勭殑鐧惧垎姣�,榛樿 30銆�
+ lineStyle: { // 鍒嗛殧绾挎牱寮忋��
+ color: "auto", //绾跨殑棰滆壊,榛樿 #eee銆�
+ opacity: 1, //鍥惧舰閫忔槑搴︺�傛敮鎸佷粠 0 鍒� 1 鐨勬暟瀛楋紝涓� 0 鏃朵笉缁樺埗璇ュ浘褰€��
+ width: 2, //绾垮害,榛樿 2銆�
+ type: "solid", //绾跨殑绫诲瀷,榛樿 solid銆� 姝ゅ杩樻湁 dashed,dotted
+ // shadowBlur: 10, //(鍙戝厜鏁堟灉)鍥惧舰闃村奖鐨勬ā绯婂ぇ灏忋�傝灞炴�ч厤鍚� shadowColor,shadowOffsetX, shadowOffsetY 涓�璧疯缃浘褰㈢殑闃村奖鏁堟灉銆�
+ // shadowColor: "#fff", //闃村奖棰滆壊銆傛敮鎸佺殑鏍煎紡鍚宑olor銆�
+ }
+ },
+ title: {
+ fontSize: 20,
+ color: '#55bcd5',//鏍囬棰滆壊
+ offsetCenter: ['0', '60%']//璁剧疆瀹屾垚鐜囦綅缃�
+ },
+ data: [{
+ value: hgl,
+ name: '鍚堟牸鐜�',
+ }]
+ }
+ ]
+
+ };
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ mychart4.setOption(option);
+ }
+
+ </script>
+</head>
+<body class="box">
+ <div>
+ <div class="tr0">
+ <div class="col2-1">
+ <div class="col2-1-p">
+ <p>瀹佹尝绉戣壓缁胯壊鐨崏闆嗗洟鏈夐檺鍏徃</p>
+ </div>
+ <div class="clock">
+ <ul>
+ <li id="Date"></li>
+ <li id="hours"> </li>
+ <li id="point">:</li>
+ <li id="min"> </li>
+ <li id="point">:</li>
+ <li id="sec"> </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="tr1">
+ <div class="col1">
+ <div class="col1-1">
+ <p>
+ 褰撳墠鐘舵��
+ </p>
+ </div>
+ <div class="col1-2">
+ <div class="col1-2-j">
+ <p>璁″垝鏁伴噺</p>
+ <h2><label id="jh">0</label> </h2>
+ </div>
+ <div class="col1-2-w">
+ <p>瀹屾垚鏁伴噺</p>
+ <h2><label id="wc">0</label></h2>
+ </div>
+ <div class="col1-2-z">
+ <p>鍦ㄥ埗鏁伴噺</p>
+ <h2><label id="zz">0</label></h2>
+ </div>
+ <div class="col1-2-d">
+ <p>绛夊緟鐢熶骇</p>
+ <h2><label id="dd">0</label></h2>
+ </div>
+ </div>
+ </div>
+ <div class="col2">
+ <div class="col2-2">
+ <div class="col2-2-on">
+ </div>
+ <div class="col2-2-in">
+ <div class="col2-2-in-1">
+ <div class="col2-2-in-1-l">
+ <p id="zzp1_1">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_1">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-1-c">
+ <p id="zzp1_2">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_2">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-1-r">
+ <p id="zzp1_3">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_3">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-1-r2">
+ <p id="zzp1_4">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_4">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-1-r3">
+ <p id="zzp1_5">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_5">浜у搧鏁�:0</p>
+ </div>
+ </div>
+ <div class="col2-2-in-2">
+ <div class="col2-2-in-2-l">
+ <p>缁囬��</p>
+ </div>
+ <div class="col2-2-in-2-c">
+ <p>缂告煋</p>
+ </div>
+ <div class="col2-2-in-2-r">
+ <p>
+ 鐑樺共瀹氬瀷
+ </p>
+ </div>
+ <div class="col2-2-in-2-r2">
+ <p>
+ 涓婃祮瀹氬瀷
+ </p>
+ </div>
+ <div class="col2-2-in-2-r3">
+ <p>
+ 鑹插澂鐑厜
+ </p>
+ </div>
+ </div>
+ <div class="col2-2-in-3">
+ <div class="col2-2-in-3-l">
+ <p id="zzp1_6">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_6">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-3-r">
+ <p id="zzp1_7">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_7">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-3-r2">
+ <p id="zzp1_8">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_8">浜у搧鏁�:0</p>
+ </div>
+ </div>
+ <div class="col2-2-in-4">
+ <div class="col2-2-in-4-l">
+ <p>
+ 鎷夊箙瀹氬瀷
+ </p>
+ </div>
+ <div class="col2-2-in-4-c">
+ <p>
+ 鐭嚎鐑�
+ </p>
+ </div>
+ <div class="col2-2-in-4-r">
+ <p>
+ 闀跨嚎鐑�
+ </p>
+ </div>
+ <div class="col2-2-in-4-r2">
+ <p>
+ 鎵撳寘鍏ュ簱
+ </p>
+ </div>
+ </div>
+ <div class="col2-2-in-5">
+ <div class="col2-2-in-5-l">
+ <p id="zzp1_9">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_9">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-5-lc">
+ <p>
+ 棰勭儷鍓�
+ </p>
+ </div>
+ <div class="col2-2-in-5-c">
+ <p id="zzp1_10">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_10">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-5-cr">
+ <p>琛ュ埛</p>
+ </div>
+ <div class="col2-2-in-5-r">
+ <p id="zzp1_11">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_11">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-5-rr2">
+ <p>
+ 鍗版瘺灏�
+ </p>
+ </div>
+ <div class="col2-2-in-5-r2">
+ <p id="zzp1_12">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_12">浜у搧鏁�:0</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col3">
+ <div class="col3-1">
+ <p>杩斿伐鐘舵��</p>
+ </div>
+ <div class="col1-2">
+ <div class="col3-2-j">
+ <p>鏌撳巶</p>
+ <h2><label id="rc">0</label> </h2>
+ </div>
+ <div class="col3-2-w">
+ <p>鍚庢暣涓�鍙�</p>
+ <h2><label id="hzyh">0</label></h2>
+ </div>
+ <div class="col3-2-z">
+ <p>鍚庢暣浜屽彿</p>
+ <h2><label id="hzeh">0</label></h2>
+ </div>
+ <div class="col3-2-d">
+ <p>鍚庢暣涓夊彿</p>
+ <h2><label id="hzsh">0</label></h2>
+ </div>
+ <div class="col3-2-t">
+ <p>鐗规暣</p>
+ <h2><label id="tz">0</label></h2>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tr2">
+ <div class="tr2-1">
+ <div class="tr2-1-on">
+ <p>鐢熶骇璐熻嵎(km)</p>
+ </div>
+ <div class="tr2-1-in" id="mychart1">
+
+ </div>
+ </div>
+ <div class="tr2-2">
+ <div class="tr2-1-on">
+ <p>鐢熶骇鏁堢巼(km)</p>
+ </div>
+ <div class="tr2-1-in" id="mychart2">
+
+ </div>
+ </div>
+ <div class="tr2-3">
+ <div class="tr2-1-on">
+ <p>鐢熶骇浜ч噺(km)</p>
+ </div>
+ <div class="tr2-1-in" id="mychart3">
+
+ </div>
+ </div>
+ <div class="tr2-4">
+ <div class="tr2-1-on">
+ <p>璐ㄩ噺鎸囨爣</p>
+ </div>
+ <div class="tr2-1-in" id="mychart4">
+
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/GlobalSituation2.html b/GlobalSituation2.html
new file mode 100644
index 0000000..7812a11
--- /dev/null
+++ b/GlobalSituation2.html
@@ -0,0 +1,1552 @@
+锘�<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8" />
+ <title>鍏ㄥ眬鐘跺喌鐪嬫澘</title>
+ <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
+ <link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css">
+ <link rel="stylesheet" type="text/css" href="css/index.css">
+ <script src="js/jquery.min.js"></script>
+ <script src='js/echarts.min.js'></script>
+ <script src="js/bootstrap.min.js"></script>
+ <script src='js/bootstrap-table.min.js'></script>
+ <script src='js/bootstrap-select.min.js'></script>
+ <script src='js/bootstrap-table-zh-CN.min.js'></script>
+ <script src="js/jquery.SuperSlide.2.1.3.js"></script>
+ <script src='js/template.js'></script>
+ <script src="js/jquery.qrcode.min.js"></script>
+ <script src="js/webConfig.js"></script>
+ <style>
+ /*body {
+ padding-left: 50px;
+ padding-right: 50px;
+ font-family: KaiTi;*/
+ /*background-color: #031f52;*/
+ /*}*/
+
+ body {
+ font-family: KaiTi;
+ background-image: url(../KanBanUI/img/bj2.jpg);
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ /*background-attachment: fixed;*/
+ height: 50%;
+ width: 100%;
+ }
+
+ /*.box:after {
+ content: "";
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: url(../KanBanUI/img/bj2.jpg);*/ /*鍔犺浇鑳屾櫙鍥撅細鍥剧墖鍦板潃 涓嶅钩閾� */
+ /*background-size: cover;*/ /* 璁╄儗鏅浘鍩轰簬瀹瑰櫒澶у皬浼哥缉 */
+ /*background-attachment: fixed;*/ /* background-attachment璁剧疆鑳屾櫙鍥惧儚鏄惁鍥哄畾鎴栬�呴殢鐫�椤甸潰鐨勫叾浣欓儴鍒嗘粴鍔ㄣ��
+ scroll 鑳屾櫙鍥剧墖闅忕潃椤甸潰鐨勬粴鍔ㄨ�屾粴鍔紝杩欐槸榛樿鐨勩��
+ fixed 鑳屾櫙鍥剧墖涓嶄細闅忕潃椤甸潰鐨勬粴鍔ㄨ�屾粴鍔ㄣ��
+ local 鑳屾櫙鍥剧墖浼氶殢鐫�鍏冪礌鍐呭鐨勬粴鍔ㄨ�屾粴鍔ㄣ��*/
+
+ /*width: 100%;
+ height: 100%;*/
+ /*opacity: 0.1;*/
+ /*z-index: -1;
+ }*/
+
+ .tr0 {
+ height: 80px;
+ /*background-color: aquamarine;*/
+ width: 100%
+ }
+
+ .tr1 {
+ height: 600px;
+ /*background-color: aquamarine;*/
+ width: 100%
+ }
+
+ .col1 {
+ width: 13%;
+ /*background: rgb(0 104 255 / 23%);*/
+ height: 100%;
+ float: left;
+ margin-right: 2%;
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .col1-1 {
+ width: 100%;
+ height: 7%;
+ /*background: linear-gradient(270deg,#196bcb00,#1391ba);*/
+ line-height: 300%;
+ }
+
+ .col1-1 p {
+ font-size: 20PX;
+ text-align: center;
+ height: 100%;
+ /*padding-left: 5%;*/
+ }
+
+ .col1-2 {
+ width: 100%;
+ height: 93%;
+ font-size: 20px;
+ /*background-color: #865454;*/
+ }
+
+ .col1-2 p {
+ padding-top: 10px;
+ }
+
+ .col1-2 h2 {
+ text-align: center;
+ }
+
+ .col1-2-j {
+ width: 100%;
+ height: 25%;
+ /*background-color: #865454;*/
+ }
+
+ .col1-2-w {
+ width: 100%;
+ height: 25%;
+ /*background-color: #865454;*/
+ }
+
+ .col1-2-z {
+ width: 100%;
+ height: 25%;
+ /*background-color: #865454;*/
+ }
+
+ .col1-2-d {
+ width: 100%;
+ height: 25%;
+ /*background-color: #865454;*/
+ }
+
+ .col2 {
+ width: 70%;
+ /*background: rgb(0 104 255 / 23%);*/
+ height: 100%;
+ float: left;
+ margin-right: 2%;
+ }
+
+ .col2-1 {
+ width: 100%;
+ height: 100%;
+ /*background-color: #865454;*/
+ /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(25 125 239 / 64%)), color-stop(100%,rgba(125,185,232,0)));*/
+ /*border:solid 1px #0ddae8*/
+ }
+
+ .col2-1-p {
+ width: 50%;
+ height: 100%;
+ /*background-color: #0d5974;*/
+ margin: 0 auto;
+ line-height: 100%;
+ padding: 1% 10%;
+ }
+
+ .col2-1-p p {
+ font-size: 32px;
+ text-align: center;
+ width: 100%;
+ height: 100%;
+ line-height: 160%;
+ /*background-color: #88ace74d;*/
+ }
+
+ .col2-2 {
+ width: 100%;
+ height: 100%;
+ }
+
+ .col2-2-in {
+ width: 100%;
+ height: 100%;
+ /*background-color: #d6bbbb;*/
+ /*background: url(../KanBanUI/img/bj.png) no-repeat center center;*/
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .col2-2-in-1 {
+ width: 100%;
+ height: 30%;
+ }
+
+ .col2-2-in-1-l {
+ width: 17%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 6.5%;
+ float: left;
+ }
+
+ .col2-2-in-1-l p {
+ text-align: right;
+ height: 10px;
+ }
+
+ .col2-2-in-1-c {
+ width: 20%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 6.5%;
+ float: left;
+ }
+
+ .col2-2-in-1-c p {
+ text-align: right;
+ height: 10px;
+ }
+
+ .col2-2-in-1-r {
+ width: 17%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 6.5%;
+ float: left;
+ }
+
+ .col2-2-in-1-r p {
+ text-align: right;
+ height: 10px;
+ }
+
+ .col2-2-in-1-r2 {
+ width: 17%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 6.5%;
+ float: left;
+ }
+
+ .col2-2-in-1-r2 p {
+ text-align: right;
+ height: 10px;
+ }
+
+ .col2-2-in-1-r3 {
+ width: 18%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 6.5%;
+ float: left;
+ }
+
+ .col2-2-in-1-r3 p {
+ text-align: right;
+ height: 10px;
+ }
+
+ .col2-2-in-2 {
+ width: 100%;
+ height: 10%;
+ /*background-color: #93a6b7;*/
+ }
+
+ .col2-2-in-2-l {
+ width: 12%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ float: left;
+ }
+
+ .col2-2-in-2-l p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-2-c {
+ width: 20%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-2-c p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-2-r {
+ width: 18%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-2-r p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-2-r2 {
+ width: 17%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-2-r2 p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-2-r3 {
+ width: 19%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-2-r3 p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-3 {
+ width: 100%;
+ height: 29%;
+ /*background-color: #93a6b7;*/
+ padding-top: 10%;
+ }
+
+ .col2-2-in-3-l {
+ width: 31%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ float: left;
+ }
+
+ .col2-2-in-3-l p {
+ text-align: right;
+ height: 10px;
+ /*font-size: 20px;*/
+ }
+
+ .col2-2-in-3-r {
+ width: 26%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ float: left;
+ }
+
+ .col2-2-in-3-r p {
+ text-align: right;
+ height: 10px;
+ /*font-size: 20px;*/
+ }
+
+ .col2-2-in-3-r2 {
+ width: 23%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ float: left;
+ }
+
+ .col2-2-in-3-r2 p {
+ text-align: right;
+ height: 10px;
+ /*font-size: 20px;*/
+ }
+
+ .col2-2-in-4 {
+ width: 100%;
+ height: 5%;
+ /*background-color: #93a6b7;*/
+ }
+
+ .col2-2-in-4-l {
+ width: 15%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ float: left;
+ }
+
+ .col2-2-in-4-l p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-4-c {
+ width: 25%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-4-c p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-4-r {
+ width: 24%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-4-r p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-4-r2 {
+ width: 23%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*text-align:right*/
+ float: left;
+ }
+
+ .col2-2-in-4-r2 p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-5 {
+ width: 100%;
+ height: 20%;
+ /*background-color: #93a6b7;*/
+ /*padding-bottom:2%;*/
+ }
+
+ .col2-2-in-5-l {
+ width: 17%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 5%;
+ float: left;
+ }
+
+ .col2-2-in-5-l p {
+ text-align: right;
+ height: 10px;
+ /*font-size: 20px;*/
+ }
+
+ .col2-2-in-5-lc {
+ width: 10%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*padding-top: 2%;*/
+ float: left;
+ }
+
+ .col2-2-in-5-lc p {
+ text-align: right;
+ height: 10px;
+ font-size: 20px;
+ }
+
+ .col2-2-in-5-c {
+ width: 16%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 5%;
+ float: left;
+ }
+
+ .col2-2-in-5-c p {
+ text-align: right;
+ height: 10px;
+ }
+
+ .col2-2-in-5-cr {
+ width: 9%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*padding-top: 2%;*/
+ float: left;
+ }
+
+ .col2-2-in-5-cr p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-5-rr2 {
+ width: 9%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ /*padding-top: 2%;*/
+ float: left;
+ }
+
+ .col2-2-in-5-rr2 p {
+ text-align: right;
+ font-size: 20px;
+ }
+
+ .col2-2-in-5-r {
+ width: 15%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 5%;
+ float: left;
+ }
+
+ .col2-2-in-5-r p {
+ text-align: right;
+ height: 10px;
+ /*font-size: 20px;*/
+ }
+
+ .col2-2-in-5-r2 {
+ width: 14%;
+ height: 100%;
+ /*background-color: #93a6b7;*/
+ padding-top: 5%;
+ float: left;
+ }
+
+ .col2-2-in-5-r2 p {
+ text-align: right;
+ height: 10px;
+ /*background-color: #93a6b7;*/
+ }
+
+ .col3 {
+ width: 13%;
+ /*background: rgb(0 104 255 / 23%);*/
+ height: 100%;
+ float: left;
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .col3-1 {
+ width: 100%;
+ height: 7%;
+ /*background: linear-gradient(270deg,#196bcb00,#1391ba);*/
+ line-height: 300%;
+ }
+
+ .col3-1 p {
+ font-size: 20PX;
+ text-align: center;
+ height: 100%;
+ /*padding-left: 5%;*/
+ }
+
+ .col3-2 {
+ width: 100%;
+ height: 93%;
+ font-size: 20px;
+ /*background-color: #865454;*/
+ }
+
+ .col3-2 p {
+ padding-top: 10px;
+ }
+
+ .col3-2 h2 {
+ text-align: center;
+ }
+
+ .col3-2-j {
+ width: 100%;
+ height: 20%;
+ /*background-color: #865454;*/
+ }
+
+ .col3-2-w {
+ width: 100%;
+ height: 20%;
+ /*background-color: #865454;*/
+ }
+
+ .col3-2-z {
+ width: 100%;
+ height: 20%;
+ /*background-color: #865454;*/
+ }
+
+ .col3-2-d {
+ width: 100%;
+ height: 20%;
+ /*background-color: #865454;*/
+ }
+
+ .col3-2-t {
+ width: 100%;
+ height: 20%;
+ /*background-color: #865454;*/
+ }
+
+ .tr2 {
+ height: 300px;
+ /*background-color: #e0dddd;*/
+ width: 100%;
+ padding-top: 1%;
+ }
+
+ .tr2-1 {
+ width: 24%;
+ height: 100%;
+ /*background: rgb(0 104 255 / 23%);*/
+ float: left;
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .tr2-1-on {
+ width: 100%;
+ height: 10%;
+ /*background: linear-gradient(270deg,#196bcb00,#1391ba);*/
+ }
+
+ .tr2-1-on p {
+ text-align: left;
+ padding-left: 2%;
+ font-size: 20px;
+ }
+
+ .tr2-1-in {
+ width: 100%;
+ height: 90%;
+ /*background-color: #c7c5db;*/
+ }
+
+ .tr2-2 {
+ width: 24%;
+ height: 100%;
+ /*background: rgb(0 104 255 / 23%);*/
+ float: left;
+ margin-left: 1%;
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .tr2-3 {
+ width: 24%;
+ height: 100%;
+ /*background: rgb(0 104 255 / 23%);*/
+ float: left;
+ margin-left: 1%;
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .tr2-4 {
+ width: 24%;
+ height: 100%;
+ /*background: rgb(0 104 255 / 23%);*/
+ float: left;
+ margin-left: 1%;
+ /*border: solid 1px #93c1de;*/
+ }
+
+ .clock {
+ font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+ font-size: 20px;
+ float: right;
+ margin-top: -44px;
+ margin-right: 5px;
+ }
+
+ .clock ul {
+ width: 450px;
+ margin: 0 auto;
+ padding: 0px;
+ list-style: none;
+ text-align: right;
+ margin-left: 15px;
+ position: relative;
+ }
+
+ .clock ul li {
+ display: inline;
+ font-size: 24px;
+ text-align: left;
+ font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+ text-shadow: 0 0 0px #00c6ff;
+ }
+
+ #jh, #wc, #zz, #dd, #rc, #hzsh, #hzyh, #hzeh, #tz {
+ color: #21d5dc
+ }
+ </style>
+ <script type="text/javascript">
+ $(document).ready(function () {
+ // 鍒涘缓涓や釜鍙橀噺锛屼竴涓暟缁勪腑鐨勬湀鍜屾棩鐨勫悕绉�
+ var monthNames = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
+ setInterval(function () {
+ var date1 = new Date;
+ var year = date1.getFullYear();
+ var month = date1.getMonth();
+ var day = date1.getDate();
+ var hh = date1.getHours();
+ var mm = date1.getMinutes();
+ var ss = date1.getSeconds();
+
+
+ $('#Date').html(year + "-" + monthNames[month] + '-' + (day < 10 ? "0" + day : day) + " ");
+ $("#hours").html((hh < 10 ? ("0" + hh) : hh));
+ $("#min").html((mm < 10 ? ("0" + mm) : mm));
+ $("#sec").html((ss < 10 ? ("0" + ss) : ss));
+
+ }, 1000);
+ });
+
+ $(function () {
+ var mychart1 = echarts.init(document.getElementById('mychart1'));
+ var mychart2 = echarts.init(document.getElementById('mychart2'));
+ var mychart3 = echarts.init(document.getElementById('mychart3'));
+ var mychart4 = echarts.init(document.getElementById('mychart4'));
+
+ Chart(mychart1, mychart2, mychart3, mychart4);
+
+ setInterval(function () {
+ Chart(mychart1, mychart2, mychart3, mychart4);
+ }, 60000);
+
+
+
+ //鏍规嵁绐楀彛鐨勫ぇ灏忓彉鍔ㄥ浘琛� --- 閲嶇偣
+ window.onresize = function () {
+ mychart1.resize();
+ mychart2.resize();
+ mychart3.resize();
+ mychart4.resize();
+ }
+
+ });
+ var PubRes = [];
+
+
+
+ function Chart(mychart1, mychart2, mychart3, mychart4) {
+ //鎵�鏈夊伐搴忓湪鍒� 鐢熶骇鏁伴噺
+ get_Proc();
+ //褰撳墠鐘舵��
+ get_CurrentState();
+ //鎶樼嚎鍥�
+ get_LineChart(mychart1, mychart3);
+ //鏌辩姸鍥�
+ get_Histogram(mychart2);
+ //浠〃鐩�
+ get_Dashboard(mychart4);
+ }
+
+ //褰撳墠鐘舵��
+ function get_CurrentState() {
+ $.ajax({
+ url: GetWEBURL() + "/loaddata/get_CurrentState",
+ dataType: "JSON",
+ async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
+ type: "Get",
+ data: { "LineCode": "1" },
+ success: function (res) {
+ var HQty = 0.0;
+ for (var i = 0; i < PubRes.data[0].length; i++) {
+ HQty += PubRes.data[0][i].InHQty;
+ }
+ $("#jh").text(res.data[0][0]["HQty"].toLocaleString());
+ $("#wc").text(res.data[1][0]["HQty"].toLocaleString());
+ $("#zz").text(HQty.toLocaleString());
+ $("#dd").text(res.data[2][0]["HQty"].toLocaleString());
+ }
+ })
+ }
+
+ //宸ュ簭鏁伴噺
+ function get_Proc() {
+ $.ajax({
+ url: GetWEBURL() + "/loaddata/KB_ProcSum",
+ dataType: "JSON",
+ async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
+ type: "Get",
+ data: { "LineCode": "1" },
+ success: function (res) {
+ PubRes = res;
+ for (var i = 0; i < res.data[0].length; i++) {
+ if (res.data[0][i].HProcID == 191) {//缂稿巶
+ //$("#zzp1_2").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_2").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ } else
+ if (res.data[0][i].HProcID == 193) {//鐑樺共瀹氬瀷
+ $("#zzp1_3").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_3").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 194) {//涓婃祮瀹氬瀷
+ $("#zzp1_4").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_4").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 198) {//鑹插澂鐑厜
+ $("#zzp1_5").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_5").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 204) {//棰勭儷鍓�
+ $("#zzp1_6").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_6").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 197) {//琛ュ埛
+ $("#zzp1_7").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_7").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 201) {//鍗版瘺灏�
+ $("#zzp1_8").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_8").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 200) {//鎷夊箙瀹氬瀷
+ $("#zzp1_9").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_9").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 206) {//鐭嚎鐑�
+ $("#zzp1_10").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_10").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ }
+ else if (res.data[0][i].HProcID == 205) {//闀跨嚎鐑�
+ $("#zzp1_11").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());
+ $("#cps_11").text("浜у搧鏁�: " + res.data[0][i].OutHQty.toLocaleString());
+ $("#zzp1_12").text("鍦ㄥ埗鍝�: " + res.data[0][i].InHQty.toLocaleString());//鎵撳寘鍏ュ簱
+ }
+ }
+ //鎵撳寘鍏ュ簱
+ $("#cps_12").text("浜у搧鏁�: " + res.data[1][0].HQty.toLocaleString());
+ //鏌撳巶鍦ㄥ埗鏁伴噺
+ $("#zzp1_2").text("鍦ㄥ埗鍝�: " + (res.data[2].length == 0 ? 0 : res.data[2][0].HQty.toLocaleString()));
+ }
+ })
+ }
+
+ //鎶樼嚎鍥�
+ function get_LineChart(mychart1, mychart3) {
+
+ //鐢熶骇鏁堢巼
+ var res = PubRes;
+ var optionData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+ for (var i = 0; i < res.data[0].length; i++) {
+ if (res.data[0][i].HProcID == 191) {//缂稿巶
+ optionData[0] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ } else if (res.data[0][i].HProcID == 193) {//鐑樺共瀹氬瀷
+ optionData[1] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 194) {//涓婃祮瀹氬瀷
+ optionData[2] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 198) {//鑹插澂鐑厜
+ optionData[3] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 204) {//棰勭儷鍓�
+ optionData[4] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 197) {//琛ュ埛
+ optionData[5] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 201) {//鍗版瘺灏�
+ optionData[6] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 200) {//鎷夊箙瀹氬瀷
+ optionData[7] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 206) {//鐭嚎鐑�
+ optionData[8] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 205) {//闀跨嚎鐑�
+ optionData[9] = (res.data[0][i].OutHQty / 1000).toFixed(2);
+ }
+ }
+ //鎵撳寘鍏ュ簱
+ optionData[10] = (res.data[1][0].HQty / 1000).toFixed(2);
+
+ var option = {
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['缂告煋', '鐑樺共瀹氬瀷', '涓婃祮瀹氬瀷', '鑹插澂鐑厜', '棰勭儷鍓�', '琛ュ埛', '鍗版瘺灏�', '鎷夊箙瀹氬瀷', '鐭嚎鐑�', '闀跨嚎鐑�', '鎵撳寘鍏ュ簱']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ legend: {
+ orient: 'vertical',
+ data: ['12', '43'],//璁剧疆绾挎潯鐨勫悕瀛�
+ right: 0,
+ top: 15,
+ textStyle: {
+ color: '#35d1ed' //璁剧疆瀛椾綋棰滆壊
+ }
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ color: '#35d1ed',
+ formatter: function (value) {
+ var ret = "";//鎷兼帴鍔燶n杩斿洖鐨勭被鐩」
+ var maxLength = 1;//姣忛」鏄剧ず鏂囧瓧涓暟
+ var valLength = value.length;//X杞寸被鐩」鐨勬枃瀛椾釜鏁�
+ var rowN = Math.ceil(valLength / maxLength); //绫荤洰椤归渶瑕佹崲琛岀殑琛屾暟
+ if (rowN > 1)//濡傛灉绫荤洰椤圭殑鏂囧瓧澶т簬3,
+ {
+ for (var i = 0; i < rowN; i++) {
+ var temp = "";//姣忔鎴彇鐨勫瓧绗︿覆
+ var start = i * maxLength;//寮�濮嬫埅鍙栫殑浣嶇疆
+ var end = start + maxLength;//缁撴潫鎴彇鐨勪綅缃�
+ //杩欓噷涔熷彲浠ュ姞涓�涓槸鍚︽槸鏈�鍚庝竴琛岀殑鍒ゆ柇锛屼絾鏄笉鍔犱篃娌℃湁褰卞搷锛岄偅灏变笉鍔犲惂
+ temp = value.substring(start, end) + "\n";
+ ret += temp; //鍑�熸渶缁堢殑瀛楃涓�
+ }
+ return ret;
+ }
+ else {
+ return value;
+ }
+ }
+ },
+ series: [
+ {
+ name: '12',//涓巐egend瀵瑰簲
+ data: optionData,
+ type: 'line',
+ label: {
+ normal: {
+ show: true,
+ position: 'top',
+ formatter: function (params) {
+ return echarts.format.addCommas(params.value);
+ }
+ }
+ },
+ smooth: true,//smooth灞炴�ч粯璁ゆ槸false false灏辨槸鐩寸嚎 true灏辨槸鏇茬嚎
+ lineStyle: {
+ color: '#44E2F0'
+ }
+ , itemStyle: {
+ // 璁剧疆绾挎潯涓婄偣鐨勯鑹诧紙鍜屽浘渚嬬殑棰滆壊锛�
+ normal: {
+ color: '#44E2F0',
+ label: {
+ show: true // 鍦ㄦ姌绾挎嫄鐐逛笂鏄剧ず鏁版嵁
+ }
+ },
+ }, areaStyle: {}
+ },
+ {
+ name: '43',
+ data: [10, 10, 10, 10, 10, 10, 10, 10],
+ type: 'line',
+ smooth: true,//smooth灞炴�ч粯璁ゆ槸false false灏辨槸鐩寸嚎 true灏辨槸鏇茬嚎
+ lineStyle: {
+ color: '#90f083'
+ }
+ , itemStyle: {
+ // 璁剧疆绾挎潯涓婄偣鐨勯鑹诧紙鍜屽浘渚嬬殑棰滆壊锛�
+ normal: {
+ color: '#90f083',
+ label: {
+ show: true // 鍦ㄦ姌绾挎嫄鐐逛笂鏄剧ず鏁版嵁
+ }
+ },
+ }, areaStyle: {}
+ }
+ ]
+ };
+
+
+ //鐢熶骇浜ч噺
+ var dateData = [];
+ var OptionData = [];
+ $.ajax({
+ url: GetWEBURL() + "/loaddata/ProductionOutput",
+ dataType: "JSON",
+ async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
+ type: "Get",
+ data: { "LineCode": "1" },
+ success: function (res) {
+ for (var i = 0; i < res.data[0].length; i++) {
+ dateData.push(res.data[0][i]["HDate"]);
+ OptionData.push((res.data[0][i]["HQty"] / 1000).toFixed(2));
+ }
+ }
+ })
+
+ var option2 = {
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: dateData
+ },
+ yAxis: {
+ type: 'value'
+ },
+ legend: {
+ orient: 'vertical',
+ data: ['鍗冪背'],//璁剧疆绾挎潯鐨勫悕瀛�
+ right: 0,
+ top: 15,
+ textStyle: {
+ color: '#35d1ed' //璁剧疆瀛椾綋棰滆壊
+ }
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ color: '#35d1ed',
+ formatter: function (value) {
+ var ret = "";//鎷兼帴鍔燶n杩斿洖鐨勭被鐩」
+ var maxLength = 2;//姣忛」鏄剧ず鏂囧瓧涓暟
+ var valLength = value.length;//X杞寸被鐩」鐨勬枃瀛椾釜鏁�
+ var rowN = Math.ceil(valLength / maxLength); //绫荤洰椤归渶瑕佹崲琛岀殑琛屾暟
+ if (rowN > 1)//濡傛灉绫荤洰椤圭殑鏂囧瓧澶т簬3,
+ {
+ for (var i = 0; i < rowN; i++) {
+ var temp = "";//姣忔鎴彇鐨勫瓧绗︿覆
+ var start = i * maxLength;//寮�濮嬫埅鍙栫殑浣嶇疆
+ var end = start + maxLength;//缁撴潫鎴彇鐨勪綅缃�
+ //杩欓噷涔熷彲浠ュ姞涓�涓槸鍚︽槸鏈�鍚庝竴琛岀殑鍒ゆ柇锛屼絾鏄笉鍔犱篃娌℃湁褰卞搷锛岄偅灏变笉鍔犲惂
+ if (value[i + 1] == "/") {
+ temp = value.substring(i + 1, i + 2) + "\n" + value.substring(i + 2, valLength);
+ ret += temp;
+ return ret;
+ } else {
+ temp = value.substring(start, end) + "\n";
+ }
+ ret += temp; //鍑�熸渶缁堢殑瀛楃涓�
+ }
+ return ret;
+ }
+ else {
+ return value;
+ }
+ }
+ },
+ series: [
+ {
+ name: '鍗冪背',//涓巐egend瀵瑰簲
+ data: OptionData,
+ type: 'line',
+ label: {
+ normal: {
+ show: true,
+ position: 'top',
+ formatter: function (params) {
+ return echarts.format.addCommas(params.value);
+ }
+ }
+ },
+ smooth: true,//smooth灞炴�ч粯璁ゆ槸false false灏辨槸鐩寸嚎 true灏辨槸鏇茬嚎
+ lineStyle: {
+ color: '#44E2F0' //绾挎潯棰滆壊
+ }
+ , itemStyle: {
+ // 璁剧疆绾挎潯涓婄偣鐨勯鑹诧紙鍜屽浘渚嬬殑棰滆壊锛�
+ normal: {
+ color: '#44E2F0',
+ label: {
+ show: true // 鍦ㄦ姌绾挎嫄鐐逛笂鏄剧ず鏁版嵁
+ }
+ },
+ }
+ }
+ ]
+ };
+ mychart1.setOption(option);
+ mychart3.setOption(option2);
+ }
+
+ //鏌辩姸鍥�
+ function get_Histogram(mychart2) {
+
+ //鐢熶骇璐熻嵎
+ var optionData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+
+ $.ajax({
+ url: GetWEBURL() + "/loaddata/KB_scfh",
+ dataType: "JSON",
+ async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
+ type: "Get",
+ data: { "LineCode": "1" },
+ success: function (res) {
+
+ for (var i = 0; i < res.data[0].length; i++) {
+ if (res.data[0][i].HProcID == 191) {//缂稿巶
+ optionData[0] = (res.data[0][i].HQty / 1000).toFixed(2);
+ } else if (res.data[0][i].HProcID == 193) {//鐑樺共瀹氬瀷
+ optionData[1] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 194) {//涓婃祮瀹氬瀷
+ optionData[2] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 198) {//鑹插澂鐑厜
+ optionData[3] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 204) {//棰勭儷鍓�
+ optionData[4] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 197) {//琛ュ埛
+ optionData[5] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 201) {//鍗版瘺灏�
+ optionData[6] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 200) {//鎷夊箙瀹氬瀷
+ optionData[7] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 206) {//鐭嚎鐑�
+ optionData[8] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ else if (res.data[0][i].HProcID == 205) {//闀跨嚎鐑�
+ optionData[9] = (res.data[0][i].HQty / 1000).toFixed(2);
+ }
+ }
+ }
+ })
+
+ var option = {
+ xAxis: {
+ type: 'category',
+ data: ['缂告煋', '鐑樺共瀹氬瀷', '涓婃祮瀹氬瀷', '鑹插澂鐑厜', '棰勭儷鍓�', '琛ュ埛', '鍗版瘺灏�', '鎷夊箙瀹氬瀷', '鐭嚎鐑�', '闀跨嚎鐑�']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ color: '#35d1ed',
+ formatter: function (value) {
+ var ret = "";//鎷兼帴鍔燶n杩斿洖鐨勭被鐩」
+ var maxLength = 1;//姣忛」鏄剧ず鏂囧瓧涓暟
+ var valLength = value.length;//X杞寸被鐩」鐨勬枃瀛椾釜鏁�
+ var rowN = Math.ceil(valLength / maxLength); //绫荤洰椤归渶瑕佹崲琛岀殑琛屾暟
+ if (rowN > 1)//濡傛灉绫荤洰椤圭殑鏂囧瓧澶т簬3,
+ {
+ for (var i = 0; i < rowN; i++) {
+ var temp = "";//姣忔鎴彇鐨勫瓧绗︿覆
+ var start = i * maxLength;//寮�濮嬫埅鍙栫殑浣嶇疆
+ var end = start + maxLength;//缁撴潫鎴彇鐨勪綅缃�
+ //杩欓噷涔熷彲浠ュ姞涓�涓槸鍚︽槸鏈�鍚庝竴琛岀殑鍒ゆ柇锛屼絾鏄笉鍔犱篃娌℃湁褰卞搷锛岄偅灏变笉鍔犲惂
+ temp = value.substring(start, end) + "\n";
+ ret += temp; //鍑�熸渶缁堢殑瀛楃涓�
+ }
+ return ret;
+ }
+ else {
+ return value;
+ }
+ }
+ },
+ series: [
+ {
+ data: optionData,
+ type: 'bar',
+ label: {
+ normal: {
+ show: true,
+ position: 'top',
+ formatter: function (params) {
+ return echarts.format.addCommas(params.value);
+ }
+ }
+ }
+ , itemStyle: {
+ // 璁剧疆鏌卞舰鐨勯鑹�
+ normal: {
+ //color: '#44E2F0',
+ label: {
+ show: true // 鍦ㄦ姌绾挎嫄鐐逛笂鏄剧ず鏁版嵁
+ }
+ },
+ }
+ }
+ ]
+ };
+ mychart2.setOption(option);
+ }
+
+ //浠〃鐩�
+ function get_Dashboard(mychart4) {
+ var hgl = 0;
+ var zcl = 0;
+ //鍒舵垚鐜�
+ $.ajax({
+ url: GetWEBURL() + "/loaddata/Dashboard",
+ dataType: "JSON",
+ async: false,//浣跨敤鍚屾鐨勬柟寮�,true涓哄紓姝ユ柟寮�
+ type: "Get",
+ data: { "LineCode": "1" },
+ success: function (res) {
+ hgl = res.data[0][0]["鍚堟牸鐜�"].toFixed(2);
+ zcl = res.data[1][0]["鍒舵垚鐜�"].toFixed(2);
+ }
+ })
+
+ var option = {
+ series: [
+ {//宸﹁竟浠〃鐩�
+ // name: '涓氬姟鎸囨爣',
+ type: 'gauge',
+ detail: {
+ formatter: '{value}%',
+ //offsetCenter: ['10', '70%'], //鐩稿浜庝华琛ㄧ洏涓績鐨勫亸绉讳綅缃紝鏁扮粍绗竴椤规槸姘村钩鏂瑰悜鐨勫亸绉伙紝绗簩椤规槸鍨傜洿鏂瑰悜鐨勫亸绉汇�傚彲浠ユ槸缁濆鐨勬暟鍊硷紝涔熷彲浠ユ槸鐩稿浜庝华琛ㄧ洏鍗婂緞鐨勭櫨鍒嗘瘮
+ fontSize: 22, //鏂囧瓧鐨勫瓧浣撳ぇ灏�
+ offsetCenter: ['20%', '100%']
+ },
+ radius: "60%", // 鍙傛暟:number, string銆� 浠〃鐩樺崐寰�,榛樿 75% 锛屽彲浠ユ槸鐩稿浜庡鍣ㄩ珮瀹戒腑杈冨皬鐨勪竴椤圭殑涓�鍗婄殑鐧惧垎姣旓紝涔熷彲浠ユ槸缁濆鐨勬暟鍊笺��
+ center: ["25%", "60%"],
+ startAngle: 235,
+ endAngle: 25,
+ clockWise: true,
+ min: 0,
+ max: 100,
+ splitNumber: 10, // 浠〃鐩樺埢搴︾殑鍒嗗壊娈垫暟,榛樿 10銆�
+ axisTick: { // 鍒诲害(绾�)鏍峰紡銆�
+ show: true, // 鏄惁鏄剧ず鍒诲害(绾�),榛樿 true銆�
+ splitNumber: 5, // 鍒嗛殧绾夸箣闂村垎鍓茬殑鍒诲害鏁�,榛樿 5銆�
+ length: 15, // 鍒诲害绾块暱銆傛敮鎸佺浉瀵瑰崐寰勭殑鐧惧垎姣�,榛樿 8銆�
+ lineStyle: { // 鍒诲害绾挎牱寮忋��
+ color: "auto", //绾跨殑棰滆壊,榛樿 #eee銆�
+ opacity: 1, //鍥惧舰閫忔槑搴︺�傛敮鎸佷粠 0 鍒� 1 鐨勬暟瀛楋紝涓� 0 鏃朵笉缁樺埗璇ュ浘褰€��
+ width: 1, //绾垮害,榛樿 1銆�
+ type: "solid", //绾跨殑绫诲瀷,榛樿 solid銆� 姝ゅ杩樻湁 dashed,dotted
+ // shadowBlur: 10, //(鍙戝厜鏁堟灉)鍥惧舰闃村奖鐨勬ā绯婂ぇ灏忋�傝灞炴�ч厤鍚� shadowColor,shadowOffsetX, shadowOffsetY 涓�璧疯缃浘褰㈢殑闃村奖鏁堟灉銆�
+ // shadowColor: "#fff", //闃村奖棰滆壊銆傛敮鎸佺殑鏍煎紡鍚宑olor銆�
+ },
+ },
+ axisLine: { // 浠〃鐩樿酱绾�(杞粨绾�)鐩稿叧閰嶇疆銆�
+ show: true, // 鏄惁鏄剧ず浠〃鐩樿酱绾�(杞粨绾�),榛樿 true銆�
+ lineStyle: { // 浠〃鐩樿酱绾挎牱寮忋��
+ // color: colorTemplate1, //浠〃鐩樼殑杞寸嚎鍙互琚垎鎴愪笉鍚岄鑹茬殑澶氭銆傛瘡娈电殑 缁撴潫浣嶇疆(鑼冨洿鏄痆0,1]) 鍜� 棰滆壊 鍙互閫氳繃涓�涓暟缁勬潵琛ㄧず銆傞粯璁ゅ彇鍊硷細[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
+ // opacity: 1, //鍥惧舰閫忔槑搴︺�傛敮鎸佷粠 0 鍒� 1 鐨勬暟瀛楋紝涓� 0 鏃朵笉缁樺埗璇ュ浘褰€��
+ width: 10, //杞寸嚎瀹藉害,榛樿 30銆�
+ // shadowBlur: 20, //(鍙戝厜鏁堟灉)鍥惧舰闃村奖鐨勬ā绯婂ぇ灏忋�傝灞炴�ч厤鍚� shadowColor,shadowOffsetX, shadowOffsetY 涓�璧疯缃浘褰㈢殑闃村奖鏁堟灉銆�
+ // shadowColor: "#fff", //闃村奖棰滆壊銆傛敮鎸佺殑鏍煎紡鍚宑olor銆�
+ }
+ },
+ splitLine: { // 鍒嗛殧绾挎牱寮忋��
+ show: true, // 鏄惁鏄剧ず鍒嗛殧绾�,榛樿 true銆�
+ length: 15, // 鍒嗛殧绾跨嚎闀裤�傛敮鎸佺浉瀵瑰崐寰勭殑鐧惧垎姣�,榛樿 30銆�
+ lineStyle: { // 鍒嗛殧绾挎牱寮忋��
+ color: "auto", //绾跨殑棰滆壊,榛樿 #eee銆�
+ opacity: 1, //鍥惧舰閫忔槑搴︺�傛敮鎸佷粠 0 鍒� 1 鐨勬暟瀛楋紝涓� 0 鏃朵笉缁樺埗璇ュ浘褰€��
+ width: 2, //绾垮害,榛樿 2銆�
+ type: "solid", //绾跨殑绫诲瀷,榛樿 solid銆� 姝ゅ杩樻湁 dashed,dotted
+ // shadowBlur: 10, //(鍙戝厜鏁堟灉)鍥惧舰闃村奖鐨勬ā绯婂ぇ灏忋�傝灞炴�ч厤鍚� shadowColor,shadowOffsetX, shadowOffsetY 涓�璧疯缃浘褰㈢殑闃村奖鏁堟灉銆�
+ // shadowColor: "#fff", //闃村奖棰滆壊銆傛敮鎸佺殑鏍煎紡鍚宑olor銆�
+ }
+ },
+ title: {
+ fontSize: 20,
+ color: '#55bcd5',//鏍囬棰滆壊
+ offsetCenter: ['20%', '60%']//璁剧疆瀹屾垚鐜囦綅缃�
+ },
+ data: [{
+ value: zcl,
+ name: '鍒舵垚鐜�',
+ }],
+
+ },
+ {//鍙充华琛ㄧ洏
+ // name: '涓氬姟鎸囨爣',
+ type: 'gauge',
+ detail: {
+ formatter: '{value}%',
+ offsetCenter: ['10%', '90%']
+ },
+ radius: "80%", // 鍙傛暟:number, string銆� 浠〃鐩樺崐寰�,榛樿 75% 锛屽彲浠ユ槸鐩稿浜庡鍣ㄩ珮瀹戒腑杈冨皬鐨勪竴椤圭殑涓�鍗婄殑鐧惧垎姣旓紝涔熷彲浠ユ槸缁濆鐨勬暟鍊笺��
+ center: ["70%", "55%"],
+ startAngle: 225,//浠〃鐩樿捣濮嬭搴︺�傛鍙虫墜渚т负0搴︼紝姝ｄ笂鏂逛负90搴︼紝姝ｅ乏鎵嬩晶涓�180搴︺��
+ endAngle: -45,//浠〃鐩樼粨鏉熻搴�
+ clockWise: true,
+ min: 0,
+ max: 100,
+ splitNumber: 10, // 浠〃鐩樺埢搴︾殑鍒嗗壊娈垫暟,榛樿 10銆�
+ axisTick: { // 鍒诲害(绾�)鏍峰紡銆�
+ show: true, // 鏄惁鏄剧ず鍒诲害(绾�),榛樿 true銆�
+ splitNumber: 5, // 鍒嗛殧绾夸箣闂村垎鍓茬殑鍒诲害鏁�,榛樿 5銆�
+ length: 15, // 鍒诲害绾块暱銆傛敮鎸佺浉瀵瑰崐寰勭殑鐧惧垎姣�,榛樿 8銆�
+ lineStyle: { // 鍒诲害绾挎牱寮忋��
+ color: "auto", //绾跨殑棰滆壊,榛樿 #eee銆�
+ opacity: 1, //鍥惧舰閫忔槑搴︺�傛敮鎸佷粠 0 鍒� 1 鐨勬暟瀛楋紝涓� 0 鏃朵笉缁樺埗璇ュ浘褰€��
+ width: 1, //绾垮害,榛樿 1銆�
+ type: "solid", //绾跨殑绫诲瀷,榛樿 solid銆� 姝ゅ杩樻湁 dashed,dotted
+ // shadowBlur: 10, //(鍙戝厜鏁堟灉)鍥惧舰闃村奖鐨勬ā绯婂ぇ灏忋�傝灞炴�ч厤鍚� shadowColor,shadowOffsetX, shadowOffsetY 涓�璧疯缃浘褰㈢殑闃村奖鏁堟灉銆�
+ // shadowColor: "#fff", //闃村奖棰滆壊銆傛敮鎸佺殑鏍煎紡鍚宑olor銆�
+ },
+ },
+ axisLine: { // 浠〃鐩樿酱绾�(杞粨绾�)鐩稿叧閰嶇疆銆�
+ show: true, // 鏄惁鏄剧ず浠〃鐩樿酱绾�(杞粨绾�),榛樿 true銆�
+ lineStyle: { // 浠〃鐩樿酱绾挎牱寮忋��
+ // color: colorTemplate1, //浠〃鐩樼殑杞寸嚎鍙互琚垎鎴愪笉鍚岄鑹茬殑澶氭銆傛瘡娈电殑 缁撴潫浣嶇疆(鑼冨洿鏄痆0,1]) 鍜� 棰滆壊 鍙互閫氳繃涓�涓暟缁勬潵琛ㄧず銆傞粯璁ゅ彇鍊硷細[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
+ // opacity: 1, //鍥惧舰閫忔槑搴︺�傛敮鎸佷粠 0 鍒� 1 鐨勬暟瀛楋紝涓� 0 鏃朵笉缁樺埗璇ュ浘褰€��
+ width: 10, //杞寸嚎瀹藉害,榛樿 30銆�
+ // shadowBlur: 20, //(鍙戝厜鏁堟灉)鍥惧舰闃村奖鐨勬ā绯婂ぇ灏忋�傝灞炴�ч厤鍚� shadowColor,shadowOffsetX, shadowOffsetY 涓�璧疯缃浘褰㈢殑闃村奖鏁堟灉銆�
+ // shadowColor: "#fff", //闃村奖棰滆壊銆傛敮鎸佺殑鏍煎紡鍚宑olor銆�
+ }
+ },
+ splitLine: { // 鍒嗛殧绾挎牱寮忋��
+ show: true, // 鏄惁鏄剧ず鍒嗛殧绾�,榛樿 true銆�
+ length: 15, // 鍒嗛殧绾跨嚎闀裤�傛敮鎸佺浉瀵瑰崐寰勭殑鐧惧垎姣�,榛樿 30銆�
+ lineStyle: { // 鍒嗛殧绾挎牱寮忋��
+ color: "auto", //绾跨殑棰滆壊,榛樿 #eee銆�
+ opacity: 1, //鍥惧舰閫忔槑搴︺�傛敮鎸佷粠 0 鍒� 1 鐨勬暟瀛楋紝涓� 0 鏃朵笉缁樺埗璇ュ浘褰€��
+ width: 2, //绾垮害,榛樿 2銆�
+ type: "solid", //绾跨殑绫诲瀷,榛樿 solid銆� 姝ゅ杩樻湁 dashed,dotted
+ // shadowBlur: 10, //(鍙戝厜鏁堟灉)鍥惧舰闃村奖鐨勬ā绯婂ぇ灏忋�傝灞炴�ч厤鍚� shadowColor,shadowOffsetX, shadowOffsetY 涓�璧疯缃浘褰㈢殑闃村奖鏁堟灉銆�
+ // shadowColor: "#fff", //闃村奖棰滆壊銆傛敮鎸佺殑鏍煎紡鍚宑olor銆�
+ }
+ },
+ title: {
+ fontSize: 20,
+ color: '#55bcd5',//鏍囬棰滆壊
+ offsetCenter: ['0', '60%']//璁剧疆瀹屾垚鐜囦綅缃�
+ },
+ data: [{
+ value: hgl,
+ name: '鍚堟牸鐜�',
+ }]
+ }
+ ]
+
+ };
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ mychart4.setOption(option);
+ }
+
+ </script>
+</head>
+<body class="box">
+ <div>
+ <div class="tr0">
+ <div class="col2-1">
+ <div class="col2-1-p">
+ <p>瀹佹尝绉戣壓缁胯壊鐨崏闆嗗洟鏈夐檺鍏徃</p>
+ </div>
+ <div class="clock">
+ <ul>
+ <li id="Date"></li>
+ <li id="hours"> </li>
+ <li id="point">:</li>
+ <li id="min"> </li>
+ <li id="point">:</li>
+ <li id="sec"> </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="tr1">
+ <div class="col1">
+ <div class="col1-1">
+ <p>
+ 褰撳墠鐘舵��
+ </p>
+ </div>
+ <div class="col1-2">
+ <div class="col1-2-j">
+ <p>璁″垝鏁伴噺</p>
+ <h2><label id="jh">0</label> </h2>
+ </div>
+ <div class="col1-2-w">
+ <p>瀹屾垚鏁伴噺</p>
+ <h2><label id="wc">0</label></h2>
+ </div>
+ <div class="col1-2-z">
+ <p>鍦ㄥ埗鏁伴噺</p>
+ <h2><label id="zz">0</label></h2>
+ </div>
+ <div class="col1-2-d">
+ <p>绛夊緟鐢熶骇</p>
+ <h2><label id="dd">0</label></h2>
+ </div>
+ </div>
+ </div>
+ <div class="col2">
+ <div class="col2-2">
+ <div class="col2-2-on">
+ </div>
+ <div class="col2-2-in">
+ <div class="col2-2-in-1">
+ <div class="col2-2-in-1-l">
+ <p id="zzp1_1">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_1">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-1-c">
+ <p id="zzp1_2">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_2">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-1-r">
+ <p id="zzp1_3">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_3">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-1-r2">
+ <p id="zzp1_4">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_4">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-1-r3">
+ <p id="zzp1_5">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_5">浜у搧鏁�:0</p>
+ </div>
+ </div>
+ <div class="col2-2-in-2">
+ <div class="col2-2-in-2-l">
+ <p>缁囬��</p>
+ </div>
+ <div class="col2-2-in-2-c">
+ <p>缂告煋</p>
+ </div>
+ <div class="col2-2-in-2-r">
+ <p>
+ 鐑樺共瀹氬瀷
+ </p>
+ </div>
+ <div class="col2-2-in-2-r2">
+ <p>
+ 涓婃祮瀹氬瀷
+ </p>
+ </div>
+ <div class="col2-2-in-2-r3">
+ <p>
+ 鑹插澂鐑厜
+ </p>
+ </div>
+ </div>
+ <div class="col2-2-in-3">
+ <div class="col2-2-in-3-l">
+ <p id="zzp1_6">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_6">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-3-r">
+ <p id="zzp1_7">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_7">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-3-r2">
+ <p id="zzp1_8">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_8">浜у搧鏁�:0</p>
+ </div>
+ </div>
+ <div class="col2-2-in-4">
+ <div class="col2-2-in-4-l">
+ <p>
+ 鎷夊箙瀹氬瀷
+ </p>
+ </div>
+ <div class="col2-2-in-4-c">
+ <p>
+ 鐭嚎鐑�
+ </p>
+ </div>
+ <div class="col2-2-in-4-r">
+ <p>
+ 闀跨嚎鐑�
+ </p>
+ </div>
+ <div class="col2-2-in-4-r2">
+ <p>
+ 鎵撳寘鍏ュ簱
+ </p>
+ </div>
+ </div>
+ <div class="col2-2-in-5">
+ <div class="col2-2-in-5-l">
+ <p id="zzp1_9">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_9">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-5-lc">
+ <p>
+ 棰勭儷鍓�
+ </p>
+ </div>
+ <div class="col2-2-in-5-c">
+ <p id="zzp1_10">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_10">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-5-cr">
+ <p>琛ュ埛</p>
+ </div>
+ <div class="col2-2-in-5-r">
+ <p id="zzp1_11">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_11">浜у搧鏁�:0</p>
+ </div>
+ <div class="col2-2-in-5-rr2">
+ <p>
+ 鍗版瘺灏�
+ </p>
+ </div>
+ <div class="col2-2-in-5-r2">
+ <p id="zzp1_12">鍦ㄥ埗鍝�:0</p>
+ <p id="cps_12">浜у搧鏁�:0</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col3">
+ <div class="col3-1">
+ <p>杩斿伐鐘舵��</p>
+ </div>
+ <div class="col1-2">
+ <div class="col3-2-j">
+ <p>鏌撳巶</p>
+ <h2><label id="rc">0</label> </h2>
+ </div>
+ <div class="col3-2-w">
+ <p>鍚庢暣涓�鍙�</p>
+ <h2><label id="hzyh">0</label></h2>
+ </div>
+ <div class="col3-2-z">
+ <p>鍚庢暣浜屽彿</p>
+ <h2><label id="hzeh">0</label></h2>
+ </div>
+ <div class="col3-2-d">
+ <p>鍚庢暣涓夊彿</p>
+ <h2><label id="hzsh">0</label></h2>
+ </div>
+ <div class="col3-2-t">
+ <p>鐗规暣</p>
+ <h2><label id="tz">0</label></h2>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tr2">
+ <div class="tr2-1">
+ <div class="tr2-1-on">
+ <p>鐢熶骇璐熻嵎(km)</p>
+ </div>
+ <div class="tr2-1-in" id="mychart1">
+
+ </div>
+ </div>
+ <div class="tr2-2">
+ <div class="tr2-1-on">
+ <p>鐢熶骇鏁堢巼(km)</p>
+ </div>
+ <div class="tr2-1-in" id="mychart2">
+
+ </div>
+ </div>
+ <div class="tr2-3">
+ <div class="tr2-1-on">
+ <p>鐢熶骇浜ч噺(km)</p>
+ </div>
+ <div class="tr2-1-in" id="mychart3">
+
+ </div>
+ </div>
+ <div class="tr2-4">
+ <div class="tr2-1-on">
+ <p>璐ㄩ噺鎸囨爣</p>
+ </div>
+ <div class="tr2-1-in" id="mychart4">
+
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/img/bj.png b/img/bj.png
new file mode 100644
index 0000000..3b94d09
--- /dev/null
+++ b/img/bj.png
Binary files differ
diff --git a/img/bj2.jpg b/img/bj2.jpg
new file mode 100644
index 0000000..8dc0a68
--- /dev/null
+++ b/img/bj2.jpg
Binary files differ
diff --git a/img/body.jpg b/img/body.jpg
new file mode 100644
index 0000000..9adb9c9
--- /dev/null
+++ b/img/body.jpg
Binary files differ
diff --git a/img/body1.jpg b/img/body1.jpg
new file mode 100644
index 0000000..82ad58f
--- /dev/null
+++ b/img/body1.jpg
Binary files differ
--
Gitblit v1.9.1