TV.kanbanUI.git

New file
			@@ -0,0 +1,928 @@
			<!DOCTYPE html>
			<html lang="zh-cn">

			<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<meta http-equiv="X-UA-Compatible" content="ie=edge">
			<title>产线看板</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/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-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>
			.clock {
			font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
			font-size: 20px;
			width: 450px;
			float: right;
			color: #fff;
			margin-top: -75px;
			margin-right: 5px;
			color: #09d1ea;
			}

			.clock #Date {
			text-align: center;
			text-shadow: 0 0 0px #00c6ff;
			}

			.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;
			}

			body {
			padding-left: 50px;
			padding-right: 50px;
			}

			.title {
			font-size: 44px;
			font-family: PingFangSC;
			font-weight: 500;
			color: rgba(9, 209, 234, 1);
			text-align: center;
			background: url(img/img_little_new.png) center no-repeat;
			margin-bottom: 30px;
			}

			.col-sm-12 {
			position: relative;
			min-height: 1px;
			padding-right: 0px;
			padding-left: 0px;
			}

			.left {
			/border: 1px solid #00c6ff;/
			background: rgb(0 104 255 / 23%);
			height: 500px;
			}

			#tb_order tr:hover {
			background-color: rgb(40 120 243 / 1%);
			}
			.right {
			/* border: 1px solid #00c6ff; */
			height: 500px;
			}



			.col-sm-12,
			.col-sm-2,
			.col-sm-3,
			.col-sm-4,
			.col-sm-6,
			.col-sm-8 {
			position: relative;
			min-height: 1px;
			padding-right: 0px;
			padding-left: 0px;
			}


			#mychart2,
			#mychart3 {
			height: 450px;
			width: 100%;
			border: none;
			background: rgb(0 104 255 / 23%);
			}
			#mychart2, .sccx1 {
			margin-left: 10px;
			}
			#mychart3, .sccx2 {
			margin-left: 20px;
			}

			.sccx1 {
			margin-left: 10px;
			margin-top: 20px;
			height: 50px;
			width: 100%;
			line-height: 50px;
			background: linear-gradient(270deg,#196bcb00,#1391ba);
			}
			.sccx1 p {
			text-align: left;
			padding-left: 10px;
			font-size: 28px;
			}

			.sccx2 {
			margin-top: 20px;
			height: 50px;
			width: 100%;
			line-height: 50px;
			background: linear-gradient(270deg,#196bcb00,#1391ba);
			}

			.sccx2 p {
			text-align: left;
			padding-left: 10px;
			font-size: 28px;
			}

			.cList {
			/padding-top: 20%;/
			/padding-left: 20%;/
			margin-left: 10px;
			width: 100%;
			height: 450px;
			background: rgb(0 104 255 / 23%);
			color: #00c6ff;
			font-size: 20px;
			}
			.cList h2 {
			text-align: center;
			}


			.ztcs {
			height: 50px;
			width: 100%;
			line-height: 50px;
			background: linear-gradient(270deg,#196bcb00,#1391ba);
			margin-left:10px;
			}

			.ztcs p {
			text-align: left;
			padding-left: 10px;
			font-size: 28px;
			}

			#cList0 {
			height: 50px;
			width: 100%;
			line-height:50px;
			/border: 1px solid #00c6ff;/
			color: #ffffff;
			float: left;
			background: linear-gradient(270deg,#196bcb00,#1391ba);
			}
			#cList0 p {
			font-size:28px;
			text-align:left;
			padding-left:10px;
			}

			#cList2 {
			height: 460px;
			width: 100%;
			/background-color: #6bceff8a;/
			float: left;
			}

			table tr td {
			text-align: center;
			vertical-align: middle !important;
			/border: 1px solid #464646;/
			border-right: 0px;
			height: 40px;
			font-size: 16px;
			font-family: '黑体';
			font-family: Arial;
			border: none;
			}

			.table > caption + thead > tr:first-child > td,
			.table > caption + thead > tr:first-child > th,
			.table > colgroup + thead > tr:first-child > td,
			.table > colgroup + thead > tr:first-child > th,
			.table > thead:first-child > tr:first-child > td,
			.table > thead:first-child > tr:first-child > th {
			background-color: #000;
			color: #3bff72;
			}

			.fixed-table-container tbody td .th-inner,
			.fixed-table-container thead th .th-inner {
			font-size: 15px;
			color: #09d1ea;
			padding: 20px 0 15px 0;
			}

			#tb_order tr td {
			text-align: center;
			height: 28px;
			line-height: 28px;
			font-size: 14px;
			/* font-family: '黑体'; */
			color: #a6a8ae;
			font-family: Arial;
			/border: 1px solid #09d1ea;/
			}

			.bootstrap-table .table {
			border-radius: none;
			}

			th {
			background-color: transparent !important;
			}

			td {
			background-color: transparent;
			}

			tr {
			background-color: transparent
			}

			#tb_order tr:nth-child(even) {
			/background: #080c1c;/
			}
			.table2 {
			height: 500px;
			margin-top: 20px;
			width: 50%;
			background: rgb(0 104 255 / 23%);
			}
			#tb_order2 tr td {
			text-align: center;
			height: 28px;
			line-height: 28px;
			font-size: 14px;
			/* font-family: '黑体'; */
			color: #a6a8ae;
			font-family: Arial;
			/* border: 1px solid #464646; */
			border: none;
			}
			#tb_order2 tr:hover {
			background-color: rgb(40 120 243 / 1%);
			}
			.fixed-table-container tbody td .th-inner,
			.fixed-table-container thead th .th-inner {
			text-align: center;
			}

			.progress {
			background-color: darkblue;
			}

			#tb_order tr:nth-child(even) {
			/background: #000000;/
			}

			.pull-right, .fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination {
			display: none;
			}

			.btn {
			margin-top: -8%;
			margin-right: 40%;
			}
			#FH, #ZT, #SZ {
			width:70px;
			height:40px;
			color:black;
			}
			.img {
			background-color:#a6a8ae;
			width:100%;
			height:400px;
			margin-left:20px;
			}
			.xz {
			margin-left: 20px;
			width: 100%;
			height: 50px;
			background: linear-gradient(270deg,#196bcb00,#1391ba);
			}
			.xz p {
			text-align: left;
			padding-left: 10px;
			font-size: 28px;
			}
			section {
			height: 50px;
			text-align: center;
			font-size: 28px;
			line-height: 50px;
			}
			.name {
			width: 100%;
			height: 50px;
			margin-left: 20px;
			background-color: rgb(0 104 255 / 23%);
			line-height: 50px;
			}
			.name p {
			text-align: center;
			padding-left: 10px;
			font-size: 28px;
			}
			.imgs {
			background: url(../KanBanUI/img/zg_false.png) no-repeat center center; /加载背景图：图片地址不平铺 /
			width: 100%;
			height: 400px;
			}

			.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;/
			}

			</style>
			<script type="text/javascript">
			//参数配置

			var interval;//计时器
			var interval1;//计时器
			var num = 0;
			var num2 = 0;
			var num3 = 0;
			var num4 = 0;
			var FHDt = []; //发货趋势时间数组
			var FHQty = []; //发货趋势时间值数组

			var ToDayDt = []; //近日达成率对比时间数组
			var OrderQty = []; //近日达成率对比订单总量数数组
			var FHSQty = []; //近日达成率对比总发货量数数组
			$(document).ready(function () {
			// 创建两个变量，一个数组中的月和日的名称
			var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "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();
			var dayNames = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
			var Stamp = new Date();


			$('#Date').html(year + " 年" + " " + monthNames[month] + ' ' + day + " 日  " + ' ' + dayNames[Stamp.getDay()]);
			$("#hours").html((hh < 10 ? ("0" + hh) : hh));
			$("#min").html((mm < 10 ? ("0" + mm) : mm));
			$("#sec").html((ss < 10 ? ("0" + ss) : ss));

			}, 1000);

			});
			$(function () {
			var mychart2 = echarts.init(document.getElementById('mychart2'));
			var mychart3 = echarts.init(document.getElementById('mychart3'));

			Chart(mychart2);
			Chart2(mychart3);
			DataTable();
			DataTable2();
			//定时器
			interval = setInterval(function () {
			FHDt = [];
			FHQty = [];
			ToDayDt = [];
			OrderQty = [];
			FHSQty = [];
			Chart(mychart2);
			Chart2(mychart3);
			}, 1000);
			interval1 = setInterval(function () {
			//$("#tb_order").bootstrapTable('refresh');
			DataTable();
			DataTable2();
			}, 1000);
			//根据浏览器大小改变大小
			window.onresize = () => {
			mychart2.resize();
			mychart3.resize();
			}
			})

			function Chart(mychart2) {
			num3 = num3 + 1;
			$.ajax({
			url: GetWEBURL() + "/loaddata/KB_ProductionLineDataModel",
			dataType: "JSON",
			async: false,//使用同步的方式,true为异步方式
			type: "Get",
			data: { "limit": "10", "offset": num3,"tag":1 },
			success: function (data) {

			$("#SCZT").html(parseFloat(data.rows[0][0].SCZT).toFixed(0));
			$("#CL").html(parseFloat(data.rows[2][0].CL).toFixed(0));
			$("#BLL").html(parseFloat(data.rows[3][0].BLL) + "%");
			$("#DDL").html(parseFloat(data.rows[1][0].DDL));

			var num_total = (data.total) / 10;
			if (num3 >= num_total) {
			num3 = 0;
			}

			//产能对比
			$.each(data.rows[4], function (index, val) {
			FHDt.push(val.hour.substring(5));
			FHQty.push(parseFloat(val.FHQty).toFixed(0));
			});

			},
			error: function (data) {

			}
			})

			var option2 = {
			tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}月 : {c}万"
			},
			grid: {
			left: '25',
			right: '7%',
			bottom: '5%',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: FHDt, //时间点数据
			axisLine: {
			show: true,
			lineStyle: {
			color: '#00c6ff',
			},
			},
			axisTick: {
			show: true,
			},
			axisLabel: {
			//interval:0, //显示所有的X轴数据
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			}
			},
			yAxis: [{
			type: 'value',
			axisLine: {
			show: true,
			lineStyle: {
			color: '#00c6ff',
			width: 0, //隐藏y轴
			}
			},
			splitLine: { //网格线
			lineStyle: {
			type: 'dotted', //设置网格线类型 dotted：虚线 solid:实线
			},
			show: false //隐藏或显示
			},
			axisTick: {
			show: false,
			},
			axisLabel: {
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			},
			splitNumber: 5
			}],
			legend: {
			icon: 'line',
			data: ['小时产能'],
			x: 'right', //可设定图例在左、右、居中
			y: 'top', //可设定图例在上、下、居中
			//padding:[0,0,0,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
			textStyle: {
			color: '#00c6ff',
			fontSize: 20,
			fontFamily: "微软雅黑"
			}
			},
			series: [
			{
			name: '小时产能',
			data: FHQty, //时间点值
			type: 'line',
			smooth: true,
			itemStyle: {
			normal: {
			color: 'orange',
			lineStyle: {
			width: 4, //设置线条粗细
			shadowColor: 'rgba(255, 94, 91,.1)',
			shadowOffsetX: 3,
			shadowOffsetY: 5,
			}
			},
			},
			textStyle: {
			fontFamily: "微软雅黑"
			}
			},
			]
			}

			mychart2.setOption(option2);
			}

			function Chart2(mychart3) {
			num4 = num4 + 1;
			$.ajax({
			url: GetWEBURL() + "/loaddata/KB_ProductionLineDataModel",
			dataType: "JSON",
			async: false,//使用同步的方式,true为异步方式
			type: "Get",
			data: { "limit": "10", "offset": num4, "tag": 2 },
			success: function (data) {

			var num_total = (data.total) / 10;
			if (num4 >= num_total) {
			num4 = 0;
			}

			//产能对比
			$.each(data.rows[4], function (index, val) {
			ToDayDt.push(val.hour.substring(5));
			OrderQty.push(parseFloat(val.ZDQty).toFixed(0));
			FHSQty.push(parseFloat(val.FHQty).toFixed(0));
			});
			},
			error: function (data) {

			}
			})


			var option3 = {
			color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
			tooltip: {

			},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '10%',
			containLabel: true
			},
			legend: {
			left: 'right',
			data: ['总订单', '总发货'],
			textStyle: {
			color: '#00c6ff',
			fontSize: 16,
			fontFamily: "微软雅黑"
			}

			},
			xAxis: [
			{
			type: 'category',
			data: ToDayDt,
			axisTick: {
			alignWithLabel: true
			},

			axisLine: {
			show: true,
			lineStyle: {
			color: '#00c6ff',
			type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
			width: 1, //隐藏y轴
			}
			},
			axisLabel: {
			show: true,
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			}
			}
			],
			yAxis: [
			{
			type: 'value',
			axisLine: {
			show: false,

			},
			splitLine: { //网格线
			lineStyle: {
			color: '#00c6ff',

			},
			show: true //隐藏或显示
			},
			axisLabel: {
			textStyle: {
			color: '#00c6ff', //坐标值得具体的颜色
			fontSize: '16'
			}
			}
			}
			],
			series: [
			{
			name: '总订单',
			type: 'bar',
			barWidth: 15,
			data: OrderQty
			},
			{
			name: '总发货',
			type: 'bar',
			barWidth: 15,
			data: FHSQty
			}
			]
			};


			mychart3.setOption(option3);
			}

			function DataTable() {
			num = num + 1;
			$.ajax({
			type: "GET",
			url: GetWEBURL() + '/loaddata/KB_ProductionLine_DayWork',
			contentType: "application/json;charset=utf-8",
			data: { "limit": "10", "offset": num },
			async: false,
			dataType: "json",
			json: 'callback',
			success: function (result) {
			var col = [];
			//给空的数组赋值
			for (var key in result.columnNameList) {
			if (result.columnNameList[key].ColmType == "Decimal") {
			col.push({
			field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			} });
			} else {
			col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center' });
			}
			}

			var num_total = (result.total) / 10;
			if (num >= num_total) {
			num = 0;
			}

			$('#tb_order').bootstrapTable('destroy').bootstrapTable({
			data: result.rows,
			//url: GetWEBURL() + '/loaddata/SalesDeliveryTableData',
			method: 'get', //请求方式（*）
			dataType: "json",
			//queryParams: queryParams,
			striped: false, //是否显示行间隔色
			cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination: true, //是否显示分页（*）
			sortable: false, //是否启用排序
			search: false, //是否启用搜索框
			sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
			pageNumber: 1, //初始化加载第一页，默认第一页
			pageSize: 10, //每页的记录行数（*）
			pageList: [10], //可供选择的每页的行数（*）
			strictSearch: false, //设置为 true启用全匹配搜索，否则为模糊搜索
			clickToSelect: true, //是否启用点击选中行
			singleSelect: true, //设置True 将禁止多选
			uniqueId: "ID", //每一行的唯一标识，一般为主键列
			cardView: false, //是否显示详细视图
			detailView: false, //是否显示父子表
			columns: [
			col
			]
			})
			}
			})


			}

			function DataTable2() {
			num2 = num2 + 1;
			$.ajax({
			type: "GET",
			url: GetWEBURL() + '/loaddata/KB_ProductionLine_HourCapacity',
			contentType: "application/json;charset=utf-8",
			data: { "limit": "10", "offset": num2 },
			async: false,
			dataType: "json",
			json: 'callback',
			success: function (result) {
			var col = [];
			//给空的数组赋值
			for (var key in result.columnNameList) {
			if (result.columnNameList[key].ColmType == "Decimal") {
			col.push({
			field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', formatter: function (value, row, index) {
			return parseFloat(value).toFixed(2);
			}
			});
			} else {
			col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center' });
			}
			}

			var num_total = (result.total) / 10;
			if (num2 >= num_total) {
			num2 = 0;
			}

			$('#tb_order2').bootstrapTable('destroy').bootstrapTable({
			data: result.rows,
			//url: GetWEBURL() + '/loaddata/SalesDeliveryTableData',
			method: 'get', //请求方式（*）
			dataType: "json",
			//queryParams: queryParams,
			striped: false, //是否显示行间隔色
			cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination: true, //是否显示分页（*）
			sortable: false, //是否启用排序
			search: false, //是否启用搜索框
			sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
			pageNumber: 1, //初始化加载第一页，默认第一页
			pageSize: 10, //每页的记录行数（*）
			pageList: [10], //可供选择的每页的行数（*）
			strictSearch: false, //设置为 true启用全匹配搜索，否则为模糊搜索
			clickToSelect: true, //是否启用点击选中行
			singleSelect: true, //设置True 将禁止多选
			uniqueId: "ID", //每一行的唯一标识，一般为主键列
			cardView: false, //是否显示详细视图
			detailView: false, //是否显示父子表
			columns: [
			col
			]
			})
			}
			})
			}

			//关闭网页
			function FH() {
			window.close();
			}

			var intervalNum = 0;
			//暂停
			function ZT() {
			if (intervalNum == 0) {
			clearInterval(interval);
			clearInterval(interval1);
			$("#ZT").text("开始");
			intervalNum = 1;
			} else {
			var mychart2 = echarts.init(document.getElementById('mychart2'));
			var mychart3 = echarts.init(document.getElementById('mychart3'));
			interval = setInterval(function () {
			FHDt = [];
			FHQty = [];
			ToDayDt = [];
			OrderQty = [];
			FHSQty = [];
			Chart(mychart2);
			Chart2(mychart3);
			}, 1000);
			interval1 = setInterval(function () {
			//$("#tb_order").bootstrapTable('refresh');
			DataTable();
			DataTable2();
			}, 1000);
			$("#ZT").text("暂停");
			intervalNum = 0;
			}

			}
			</script>
			</head>

			<body>
			<div class='title'>产线看板</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 class="btn">
			<button id="FH" onclick="FH()">返回</button>
			<button id="ZT" onclick="ZT(0)">暂停</button>
			<!--<button id="SZ">设置</button>-->
			</div>
			<div class="col-sm-8 left">
			<div id="cList0">
			<p>当日工单</p>
			</div>
			<div id="cList2">
			<table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table>
			</div>
			</div>

			<div class="col-sm-4 right">
			<div class="col-sm-6 right">
			<div class="ztcs">
			<p>状态</p>
			</div>
			<div class="cList">
			<div class="col1-2-j">
			<p>生产状态</p>
			<h2><label id="SCZT">0</label> </h2>
			</div>
			<div class="col1-2-w">
			<p>订单量</p>
			<h2><label id="DDL">0</label></h2>
			</div>
			<div class="col1-2-z">
			<p>产量</p>
			<h2><label id="CL">0</label></h2>
			</div>
			<div class="col1-2-d">
			<p>不良率</p>
			<h2><label id="BLL">0</label></h2>
			</div>
			</div>

			</div>
			<div class="col-sm-6 right">
			<div class="xz">
			<p>线长</p>
			</div>
			<div class="name">
			<p>张三</p>
			</div>
			<div class="img">
			<div class="imgs"></div>
			</div>
			</div>
			</div>
			<div class="col-sm-8 table2">
			<div id="cList0">
			<p>小时产能分析</p>
			</div>
			<div id="cList2">
			<table id="tb_order2" class="table-condensed table-responsive tb_order" data-filter-control="true"></table>
			</div>
			</div>
			<div class="col-sm-3 right">
			<div class="sccx1">
			<p>质量指标</p>
			</div>
			<div id="mychart2"></div>
			</div>
			<div class="col-sm-3 right">
			<div class="sccx2">
			<p>质量指标</p>
			</div>
			<div id="mychart3"></div>
			</div>

			</body>

			</html>