TV.kanbanUI.git

New file
			@@ -0,0 +1,1296 @@
			<!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: 0px;
			font-family: KaiTi;
			height: 100%;
			width: 100%;
			}

			.bj {
			background: url(../KanBanUI/img/bj3.jpg) no-repeat center center; /加载背景图：图片地址不平铺 /
			background-size: cover; /让背景图基于容器大小伸缩 /
			background-attachment: fixed;
			height: 100%;
			width: 100%;
			position: absolute;
			}

			.tr0 {
			height: 80px;
			/background-color: aquamarine;/
			width: 100%
			}

			.col2-1 {
			/background-color: aquamarine;/
			width: 100%;
			height: 100%;
			}

			.col2-1-p {
			padding-right:2%;
			width: 50%;
			height: 100%;
			/background-color: #0d5974;/
			margin: 0 auto;
			line-height: 100%;
			}

			.col2-1-p p {
			font-size: 28px;
			text-align: center;
			width: 100%;
			height: 100%;
			line-height: 400%;
			/background-color: #88ace74d;/
			}

			.clock {
			/background-color: #88ace74d;/
			font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
			font-size: 20px;
			float: right;
			/margin-top: -4px;/
			margin-right: 25px;
			}

			.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;
			}
			.tr1 {
			height: 1000px;
			/background-color: #e5b2b26b;/
			width: 22%;
			float: left;
			}
			.tr1-k {
			height: 1000px;
			/background-color: #e5b1b26b;/
			width: 5.5%;
			float: left;
			}

			.tr1-1 {
			height: 28%;
			/background-color: #e5c6b26b;/
			width: 94.5%;
			float: left;
			}
			.tr1-2 {
			height: 23%;
			/background-color: #dd9393ad;/
			width: 94.5%;
			float: left;
			color: aqua;
			}
			.tr1-2-k {
			height: 34%;
			width: 100%;
			/background-color: #cc9393ad;/
			}
			.tr1-2-cen {
			height: 20%;
			width: 100%;
			/background-color: #cc9223ad;/
			}
			.tr1-2-cenk {
			height: 100%;
			width: 10%;
			/background-color: #9d202099;/
			float: left;
			}
			.tr1-2-cen-left {
			height: 100%;
			width: 39%;
			/background-color: #9d909099;/
			float: left;
			}

			.tr1-2-cen-left p {
			text-align:center;
			font-size: 30px;
			height: 100%;
			width: 100%;
			/background-color: #9d909099;/
			}
			.tr1-2-cen-right {
			height: 100%;
			width: 35%;
			/background-color: #9d329099;/
			float: left;
			}

			.tr1-2-cen-right p {
			text-align: center;
			font-size: 30px;
			height: 100%;
			width: 100%;
			/background-color: #9d909099;/
			}
			.tr1-2-cen-k {
			height: 21%;
			width: 100%;
			/background-color: #cc9393ad;/
			}
			.tr1-2-btm {
			height: 27%;
			width: 100%;
			/background-color: #9d909099;/
			float: left;
			}
			.tr1-2-btm-k {
			height: 100%;
			width: 10%;
			/background-color: #9d909099;/
			float: left;
			}
			.tr1-2-btm-left {
			height: 100%;
			width: 37%;
			/background-color: #9d303099;/
			float: left;
			}

			.tr1-2-btm-left p {
			text-align:center;
			font-size: 30px;
			height: 100%;
			width: 100%;
			/background-color: #9d909099;/
			}

			.tr1-2-btm-right {
			height: 100%;
			width: 42%;
			/background-color: #9d909099;/
			float: left;
			}

			.tr1-2-btm-right p {
			text-align:center;
			font-size: 30px;
			height: 100%;
			width: 100%;
			/background-color: #9d909099;/
			}
			.tr1-3 {
			margin-left: 2%;
			height: 20%;
			/background-color: #6aa3dbde;/
			width: 90.5%;
			float: left;
			}
			.tr1-4 {
			margin-left: 2%;
			margin-top: 9%;
			height: 20%;
			/background-color: #6cc3aade;/
			width: 88%;
			float: left;
			}
			.tr2 {
			height: 966px;
			/background-color: #7e7474a3;/
			width: 56%;
			float: left;
			}
			.tr2-k {
			height: 12%;
			/background-color: #7e3374a3;/
			width: 100%;
			}
			.tr2-1 {
			height: 14%;
			/background-color: #7e3323a3;/
			width: 100%;
			}
			.tr2-1-k {
			height: 100%;
			/background-color: #7e6623a3;/
			width: 8%;
			float:left;
			}
			.tr2-1-1 {
			height: 100%;
			/background-color: #7e8426c3;/
			width: 9%;
			float: left;
			}
			.tr2-1-1-k {
			height: 100%;
			/background-color: #7e6623a3;/
			width: 13.5%;
			float: left;
			}
			.tr2-1-2 {
			height: 100%;
			/background-color: #7e8426c3;/
			width: 9%;
			float: left;
			}
			.tr2-1-2-k {
			height: 100%;
			/background-color: #7e6623a3;/
			width: 14%;
			float: left;
			}
			.tr2-1-3 {
			height: 100%;
			/background-color: #7e8426c3;/
			width: 9%;
			float: left;
			}
			.tr2-1-3-k {
			height: 100%;
			/background-color: #7e6623a3;/
			width: 15%;
			float: left;
			}

			.tr2-1-4 {
			height: 100%;
			/background-color: #7e8426c3;/
			width: 9%;
			float: left;
			}
			.tr2-k-1 {
			height: 12%;
			/background-color: #7e3374a3;/
			width: 100%;
			}
			.tr3 {
			height: 966px;
			/background-color: #99d7c799;/
			width: 22%;
			float: left;
			}
			.tr3-1 {
			height: 36%;
			/background-color: #99d7c799;/
			width: 100%;
			}
			.tr3-2 {
			height: 26%;
			/background-color: #99f6a799;/
			width: 100%;
			color: aqua;
			}
			.tr3-2-k {
			height: 40%;
			/background-color: #99f6a799;/
			width: 100%;
			}
			.tr3-2-l-k {
			height: 20%;
			/background-color: #99f3e399;/
			width: 6%;
			float: left;
			}
			.tr3-2-l {
			height: 20%;
			/background-color: #99f3e399;/
			width: 28%;
			float: left;
			padding-top: 1%;
			}
			.tr3-2-l p {
			text-align: center;
			font-size: 22px;
			height: 100%;
			width: 100%;
			/background-color: #9d909099;/
			}
			.tr3-2-c {
			height: 20%;
			/background-color: #99f3e399;/
			width: 28%;
			float: left;
			padding-top: 1%;
			}

			.tr3-2-c p {
			text-align: center;
			font-size: 22px;
			height: 100%;
			width: 100%;
			/background-color: #9d909099;/
			}
			.tr3-2-r {
			height: 20%;
			/background-color: #99f3e399;/
			width: 29%;
			float: left;
			padding-top: 1%;
			}

			.tr3-2-r p {
			text-align: center;
			font-size: 22px;
			height: 100%;
			width: 100%;
			/background-color: #9d909099;/
			}
			.tr3-2-2-k {
			height: 39%;
			/background-color: #99f6a799;/
			width: 100%;
			}
			.tr3-2-2 {
			height: 20%;
			/background-color: #99f3e399;/
			width: 32%;
			float: left;
			}

			.tr3-2-2 p {
			text-align: center;
			font-size: 22px;
			height: 100%;
			width: 100%;
			/background-color: #9d332359;/
			}
			.tr3-2-3 {
			height: 20%;
			/background-color: #99f3e399;/
			width: 20%;
			float: left;
			}

			.tr3-2-3 p {
			text-align: center;
			font-size: 22px;
			height: 100%;
			width: 100%;
			/background-color: #9d909099;/
			}

			.tr3-3 {
			margin-left: 3%;
			margin-top: 7%;
			height: 30%;
			/background-color: #99f6a733;/
			width: 88%;
			}

			</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'));
			var mychart5 = echarts.init(document.getElementById('mychart5'));

			Chart(mychart1, mychart2, mychart3, mychart4, mychart5);

			setInterval(function () {
			Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
			}, 60000);



			//根据窗口的大小变动图表 --- 重点
			window.onresize = function () {
			mychart1.resize();
			mychart2.resize();
			mychart3.resize();
			mychart4.resize();
			}

			});
			var PubRes = [];



			function Chart(mychart1, mychart2, mychart3, mychart4, mychart5) {
			//所有工序在制生产数量
			get_Proc();
			//当前状态
			get_CurrentState();
			//折线图
			get_LineChart(mychart1, mychart3);
			//柱状图
			get_Histogram(mychart2);
			//仪表盘
			get_Dashboard(mychart4);
			get_Dashboard_2(mychart5);
			}

			//当前状态
			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 == 206) {//短线烫
			$("#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 == 200) {//拉幅定型
			$("#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 == 198) {//色坯烫光
			$("#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 == 197) {//补刷
			$("#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 == 201) {//印毛尖
			$("#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',//与legend对应
			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: '千米',//与legend对应
			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: '#14b16a',
			label: {
			show: true // 在折线拐点上显示数据
			}
			},
			}
			}
			]
			};
			mychart2.setOption(option);
			}

			//仪表盘制成率
			function get_Dashboard(mychart4) {
			var zcl = 0;
			//制成率
			$.ajax({
			url: GetWEBURL() + "/loaddata/Dashboard",
			dataType: "JSON",
			async: false,//使用同步的方式,true为异步方式
			type: "Get",
			data: { "LineCode": "1" },
			success: function (res) {
			zcl = res.data[1][0]["制成率"].toFixed(2);
			}
			})

			var option = {
			series: [
			{//右仪表盘
			// name: '业务指标',
			type: 'gauge',
			detail: {
			formatter: '{value}%',
			offsetCenter: ['10%', '90%']
			},
			radius: "80%", // 参数:number, string。仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
			center: ["50%", "60%"],
			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", //阴影颜色。支持的格式同color。
			},
			},
			axisLine: { // 仪表盘轴线(轮廓线)相关配置。
			show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
			lineStyle: { // 仪表盘轴线样式。
			color: [[0.2, '#fc3333'], [0.8, '#17cee3'], [1, '#01e878']], //仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置(范围是[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", //阴影颜色。支持的格式同color。
			}
			},
			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", //阴影颜色。支持的格式同color。
			}
			},
			title: {
			fontSize: 20,
			color: '#55bcd5',//标题颜色
			offsetCenter: ['0', '60%']//设置完成率位置
			},
			data: [{
			value: zcl,
			name: '制成率',
			}]
			}
			]

			};

			// 使用刚指定的配置项和数据显示图表。
			mychart4.setOption(option);
			}

			//仪表盘合格率
			function get_Dashboard_2(mychart5) {
			var hgl = 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);
			}
			})

			var option = {
			series: [
			{//右仪表盘
			// name: '业务指标',
			type: 'gauge',
			detail: {
			formatter: '{value}%',
			offsetCenter: ['10%', '90%']
			},
			radius: "80%", // 参数:number, string。仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
			center: ["55%", "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", //阴影颜色。支持的格式同color。
			},
			},
			axisLine: { // 仪表盘轴线(轮廓线)相关配置。
			show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
			lineStyle: { // 仪表盘轴线样式。
			color: [[0.2, '#fc3333'], [0.8, '#17cee3'], [1, '#01e878']], //仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置(范围是[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", //阴影颜色。支持的格式同color。
			}
			},
			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", //阴影颜色。支持的格式同color。
			}
			},
			title: {
			fontSize: 20,
			color: '#55bcd5',//标题颜色
			offsetCenter: ['0', '60%']//设置完成率位置
			},
			data: [{
			value: hgl,
			name: '合格率',
			}]
			}
			]

			};

			// 使用刚指定的配置项和数据显示图表。
			mychart5.setOption(option);
			}

			</script>
			</head>
			<body class="box">
			<div class="bj">
			<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="tr1-k">
			</div>
			<div class="tr1-1" id="mychart4">

			</div>
			<div class="tr1-2">
			<div class="tr1-2-k">

			</div>
			<div class="tr1-2-cen">
			<div class="tr1-2-cenk">
			</div>
			<div class="tr1-2-cen-left">
			<p id="jh">0</p>
			</div>
			<div class="tr1-2-cen-right">
			<p id="wc">0</p>
			</div>
			</div>
			<div class="tr1-2-cen-k">

			</div>
			<div class="tr1-2-btm">
			<div class="tr1-2-btm-k">
			</div>
			<div class="tr1-2-btm-left">
			<p id="zz">0</p>
			</div>
			<div class="tr1-2-btm-right">
			<p id="dd">0</p>
			</div>
			</div>
			</div>
			<div class="tr1-3" id="mychart2">

			</div>
			<div class="tr1-4" id="mychart1">

			</div>

			</div>
			<div class="tr2">
			<div class="tr2-k">

			</div>
			<div class="tr2-1">
			<div class="tr2-1-k">

			</div>
			<div class="tr2-1-1">
			<p>在制品:</p>
			<p id="zzp1_1">0</p>
			<p>产品数:</p>
			<p id="cps_1">0</p>
			</div>
			<div class="tr2-1-1-k">

			</div>
			<div class="tr2-1-2">
			<p>在制品:</p>
			<p id="zzp1_2">0</p>
			<p>产品数:</p>
			<p id="cps_2">0</p>
			</div>
			<div class="tr2-1-2-k">

			</div>
			<div class="tr2-1-3">
			<p>在制品:</p>
			<p id="zzp1_3">0</p>
			<p>产品数:</p>
			<p id="cps_3">0</p>
			</div>
			<div class="tr2-1-3-k">

			</div>
			<div class="tr2-1-4">
			<p>在制品:</p>
			<p id="zzp1_4">0</p>
			<p>产品数:</p>
			<p id="cps_4">0</p>
			</div>
			</div>
			<div class="tr2-k-1">

			</div>
			<div class="tr2-1">
			<div class="tr2-1-k">

			</div>
			<div class="tr2-1-1">
			<p>在制品:</p>
			<p id="zzp1_5">0</p>
			<p>产品数:</p>
			<p id="cps_5">0</p>
			</div>
			<div class="tr2-1-1-k">

			</div>
			<div class="tr2-1-2">
			<p>在制品:</p>
			<p id="zzp1_6">0</p>
			<p>产品数:</p>
			<p id="cps_6">0</p>
			</div>
			<div class="tr2-1-2-k">

			</div>
			<div class="tr2-1-3">
			<p>在制品:</p>
			<p id="zzp1_7">0</p>
			<p>产品数:</p>
			<p id="cps_7">0</p>
			</div>
			<div class="tr2-1-3-k">

			</div>
			<div class="tr2-1-4">
			<p>在制品:</p>
			<p id="zzp1_8">0</p>
			<p>产品数:</p>
			<p id="cps_8">0</p>
			</div>
			</div>
			<div class="tr2-k-1">

			</div>
			<div class="tr2-1">
			<div class="tr2-1-k">

			</div>
			<div class="tr2-1-1">
			<p>在制品:</p>
			<p id="zzp1_9">0</p>
			<p>产品数:</p>
			<p id="cps_9">0</p>
			</div>
			<div class="tr2-1-1-k">

			</div>
			<div class="tr2-1-2">
			<p>在制品:</p>
			<p id="zzp1_10">0</p>
			<p>产品数:</p>
			<p id="cps_10">0</p>
			</div>
			<div class="tr2-1-2-k">

			</div>
			<div class="tr2-1-3">
			<p>在制品:</p>
			<p id="zzp1_11">0</p>
			<p>产品数:</p>
			<p id="cps_11">0</p>
			</div>
			<div class="tr2-1-3-k">

			</div>
			<div class="tr2-1-4">
			<p>在制品:</p>
			<p id="zzp1_12">0</p>
			<p>产品数:</p>
			<p id="cps_12">0</p>
			</div>
			</div>
			</div>
			<div class="tr3">
			<div class="tr3-1" id="mychart5">

			</div>
			<div class="tr3-2">
			<div class="tr3-2-k">

			</div>
			<div class="tr3-2-l-k">
			</div>
			<div class="tr3-2-l">
			<p id="rc">0</p>
			</div>
			<div class="tr3-2-c">
			<p id="hzyh">0</p>
			</div>
			<div class="tr3-2-r">
			<p id="hzeh">0</p>
			</div>
			<div class="tr3-2-2-k">

			</div>
			<div class="tr3-2-l-k">
			</div>
			<div class="tr3-2-2">
			<p id="hzsh">0</p>
			</div>
			<div class="tr3-2-3">
			<p id="tz">0</p>
			</div>
			</div>
			<div class="tr3-3" id="mychart3">

			</div>
			</div>
			</div>
			</body>
			</html>

	GlobalSituation3.html	1296 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	img/bj3.jpg	补丁 \| 查看 \| 原始文档 \| blame \| 历史