Haier_MES_II.git

			@@ -3,62 +3,78 @@
			<html>
			<head>

			<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

			<style>
			html,body{
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
			}
			#header1 {
			<style>
			html,body{
			width: 100%;
			height: 7%;
			height: 100%;
			padding: 0;
			margin: 0;
			}
			#header1 {
			width: 100%;
			height: 5%;
			background-color: white;
			display: inline-block;
			text-align: center;
			font-size: 50px;
			text-align: center;
			font-size: 50px;
			}
			#header {
			width: 100%;
			height: 90%;
			height: 28%;
			background-color: white;
			display: flex;
			text-align: center;
			margin-top: 2%;
			}
			#footer {
			width: 100%;
			height: 70%;

			height: 60%;
			display: flex;
			}
			#main1 {
			width: 100%;
			height: 30%;
			display: flex;
			}
			#main3 {
			width: 100%;
			height: 70%;
			height: 30%;
			display: flex;
			}
			#main2 {
			width: 50%;
			height: 100%;

			width: 20%;
			height: 400px;
			}
			#main4 {
			margin-left: 5%;
			width: 20%;
			height: 400px;
			}
			#main3 {
			width: 50%;
			height: 100%;
			display: flex;
			}
			#main1-1 {
			width: 100%;
			height: 25%;
			font-size: 40px;
			height: 100%;
			margin: 5px;
			background-color: #00a7d0;
			}
			#main1-2 {
			width: 100%;
			height: 25%;
			font-size: 50px;
			height: 100%;
			margin: 5px;
			background-color: #00a7d0;
			}
			#main1-3 {
			width: 100%;
			height: 100%;
			margin: 5px;
			background-color: #00a7d0;
			}
			#main1-4 {
			width: 100%;
			height: 100%;
			margin: 5px;
			background-color: #00a7d0;
			}
			#main3-1 {
			width: 50%;
			@@ -69,27 +85,13 @@
			height: 100%;

			}
			#main4-1 {
			width: 100%;
			height: 30%;

			}
			#main4-2 {
			width: 100%;
			height: 30%;

			}
			#main4-3 {
			width: 100%;
			height: 30%;

			}
			#main1-1-1 {
			font-size: 50px;
			font-size: 40px;
			margin-top: 2%;
			}
			#main1-2-1 {
			font-size: 50px;
			font-size: 40px;
			margin-top: 2%;
			}
			#main3-1-1 {
			@@ -98,7 +100,7 @@
			}
			#main3-1-2 {
			width: 100%;
			height: 80%;
			height: 50%;
			}
			#main3-2-1 {
			width: 100%;
			@@ -106,227 +108,451 @@
			}
			#main3-2-2 {
			width: 100%;
			height: 80%;
			height: 50%;
			}



			</style>
			<title>大屏显示</title>
			<title>大屏显示</title>
			</head>
			<body>
			<div id="app" style="width: 99%;height: 99%;background-color: white;">
			<div id="header1" v-for='items1 in shuzu1'><span>{{items1['5_machineType']}}工序</span></div>
			<div id="header">
			<div id="main1" v-for='items1 in shuzu1'>
			<div id="main1-1">当前订单号：
			<div id="main1-1-1" >{{items1['0_order_id']}}</div>
			</div>
			<div id="main1-2">当前产品号：
			<div id="main1-2-1">{{items1['1_recipe_no']}}</div>
			</div>
			<div id="main1-2">当班计划数量：
			<div id="main1-2-1">{{items1['8_smallglass_sum']}}</div>
			</div>
			<div id="main1-2">当班完成数量：
			<div id="main1-2-1">{{items1['2_smallglass_completed']}} </div>
			</div>
			<div id="app" style="width: 1920px;height: 100%;background-color: white;">
			<div id="header1"><span>海尔智家厨电莱阳工厂玻璃产线二期</span></div>
			<div id="header">
			<div id="main1" v-for='items1 in shuzu1'>
			<div id="main1-1">当前订单号：
			<div id="main1-1-1" >{{items1['0_order_id']}}</div>
			</div>
			<div id="main3">
			<div id="main4"></div>
			<div id="main2"></div>
			<div id="main1-2">当前产品号：
			<div id="main1-2-1">{{items1['1_recipe_no']}}</div>
			</div>


			<div id="main1-3">当班计划数量：
			<div id="main1-2-1">{{items1['4_smallglass_sum']}}</div>
			</div>
			<div id="main1-4">当班完成数量：
			<div id="main1-2-1">{{items1['2_smallglass_completed']}} </div>
			</div>
			</div>



			</div>
			<div id="footer">
			<div id="main4"></div>
			<div id="main2"></div>
			<div id="main3">
			<div id="main3-1">
			<div id="main3-1-1">总耗电：<span>{{shuzu2[0]['0_@jiqidianliang']}}kw</span></div>
			<div id="main3-1-2"></div>
			</div>
			<div id="main3-2">
			<div id="main3-2-1">总耗水：<span>{{shuzu2[0]['1_@jiqidianliang1']}}m³</span></div>
			<div id="main3-2-2"></div>
			</div>
			</div>
			</div>
			</div>



			<script src="../js/jquery-3.4.1.min.js"></script>
			<script type="text/javascript" src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
			<script src="../js/vue.min.js"></script>
			<script src="../js/axios.min.js"></script>
			<script src="../js/axios.min.js"></script>
			<script src="../js/mixins.js"></script>
			<script src="../js/echarts.min.js"></script>

			<script>
			Vue.prototype.$echarts = echarts;
			Vue.prototype.$http= axios;
			let app = new Vue({
			el:'#app',
			mixins:[mixin],
			data:{
			shuzu:[{}],
			shuzu1:[{}],
			shuzu2:[{}],
			machineElectric:[{}],
			machineWater:[{}],
			Vue.prototype.$echarts = echarts;
			Vue.prototype.$http= axios;
			let app = new Vue({
			el:'#app',
			mixins:[mixin],
			data:{
			shuzu:[{}],
			shuzu1:[{}],
			shuzu2:[{}],
			machineElectric:[{}],
			machineWater:[{}],





			val1: {
			borderColor:'#082352',
			title: {
			// text: '成品库存',
			// left: '290px',
			// top: '0px'
			text:'合格率',//主标题文本
			left:'center',
			top:'45%',
			left:'50%',
			textStyle:{
			color:'#454c5c',
			align:'center'



			val: {
			title:{
			text:'',
			left:'center'
			},
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'shadow'
			}
			},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: [{
			type: 'category',
			data: [],
			axisLine: {
			lineStyle: {
			color: 'rgb(30, 144, 255)'
			}
			},
			axisLabel: {
			color: 'rgb(30, 144, 255)'
			},
			splitLine: {
			lineStyle: {
			color: 'rgb(30, 144, 255)',
			type: 'dashed'
			}
			}
			}],
			yAxis: [{
			type: "value",
			name: "能耗",
			nameTextStyle: {
			color: "rgb(30, 144, 255)",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: false,
			lineStyle: { //分割线
			color: "rgb(180, 180, 180)",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "rgb(30, 144, 255)",
			fontSize: 12,
			},
			},

			],
			series: [{
			name: '电耗',
			type: 'bar',
			barWidth: '80%',
			data: [220, 152, 200, 334, 390, 330, 220],
			itemStyle: {
			color: 'rgb(180, 180, 180)'
			}
			},

			]
			},
			subtextStyle:{
			fontFamily : "微软雅黑",
			color:'#6c7a89',
			}
			val1: {
			borderColor:'#082352',
			title: {
			// text: '成品库存',
			// left: '290px',
			// top: '0px'
			text:'合格率',//主标题文本
			left:'center',
			top:'45%',
			left:'40%',
			textStyle:{
			color:'#454c5c',
			align:'center'
			},
			subtextStyle:{
			fontFamily : "微软雅黑",
			color:'#6c7a89',
			}

			},

			tooltip: {
			trigger: 'item',
			textStyle:{
			}
			},
			legend: {
			// orient: 'vertical',
			left: 'left',
			textStyle:{

			}
			},
			textStyle:{

			},
			series: [
			{
			},

			type: 'pie',
			radius : ['40%','70%'],
			center: ['50%', '50%'],
			minAngle:'15',
			label: {
			// position: 'inside',
			show: true,
			formatter(param) {
			// correct the percentage
			return param.name + ' (' + param.percent + '%)';
			}
			},
			data: [
			{ value: 300, name: '成品',itemStyle:{color:'#53a2ff'} },
			{ value: 700, name: '次品',itemStyle:{color:'darkseagreen'} }
			],
			itemStyle: {
			normal:{
			label:{
			show:true,
			//formatter: "{b} :\n {c} \n ({d}%)",
			formatter: "{b} :\n ({d}%)",
			position:"inner"
			}
			}
			}
			tooltip: {
			trigger: 'item',
			textStyle:{
			}
			},
			legend: {
			// orient: 'vertical',
			left: 'left',
			textStyle:{

			}
			]
			},

			},
			methods:{

			}
			},
			textStyle:{

			},
			series: [
			{

			type: 'pie',
			radius : ['40%','70%'],
			center: ['50%', '50%'],
			minAngle:'15',
			label: {
			// position: 'inside',
			show: true,
			formatter(param) {
			// correct the percentage
			return param.name + ' (' + param.percent + '%)';
			}
			},
			data: [
			{ value: 300, name: '成品',itemStyle:{color:'#53a2ff'} },
			{ value: 700, name: '次品',itemStyle:{color:'darkseagreen'} }
			],
			// emphasis: {
			// itemStyle: {
			// shadowBlur: 10,
			// shadowOffsetX: 0,
			// shadowColor: 'rgba(0, 0, 0, 0.5)'
			// }
			// }
			itemStyle: {
			normal:{
			label:{
			show:true,
			//formatter: "{b} :\n {c} \n ({d}%)",
			formatter: "{b} :\n ({d}%)",
			position:"inner"
			}
			}
			}

			}
			]
			},

			},
			methods:{
			echarsInit() {
			var datashijian=[];
			var s=7;
			while(s>0){
			s=s-1;

			var date_day7=new Date(Date.parse(new Date())-s2460601000);

			var day7= (date_day7.getMonth()+1) +"/"+date_day7.getDate();
			datashijian.push(day7);


			}
			let HisArr="";
			let dianhao=[];
			let shijian=[];


			HisArr = this.$echarts.init(document.getElementById('main3-1-2'));

			this.val.yAxis[0].name="电耗";
			this.val.series[0].name='电耗(kw.h)'
			for(let i in this.machineElectric){
			dianhao.push(this.machineElectric[i]["0_jiqidianliang"]);
			shijian.push(this.machineElectric[i]["1_date"]);
			}
			console.log(dianhao);
			this.val.title.text="总耗电(kw.h)"
			this.val.series[0].itemStyle.color='rgb(84,112,198)'
			this.val.xAxis[0].data=datashijian;
			this.val.series[0].data=dianhao;
			HisArr.setOption(this.val);
			this.loading=false
			},
			echarsInit1(){
			var datashijian=[];
			var s=7;
			while(s>0){
			s=s-1;

			var date_day7=new Date(Date.parse(new Date())-s2460601000);

			var day7= (date_day7.getMonth()+1) +"/"+date_day7.getDate();
			datashijian.push(day7);


			}
			let HisArr="";
			let dianhao=[];
			let shijian=[];
			HisArr = this.$echarts.init(document.getElementById('main3-2-2'));
			this.val.yAxis[0].name="水耗";
			this.val.series[0].name='水耗(m³)'
			for(let i in this.machineWater){
			dianhao.push(this.machineWater[i]["0_jiqidianliang"]);
			shijian.push(this.machineWater[i]["1_date"]);
			}
			this.val.title.text="总耗水(m³)"
			this.val.series[0].itemStyle.color='#00ff00'
			this.val.xAxis[0].data=datashijian;
			this.val.series[0].data=[78,80,84,75,82,77,80];
			HisArr.setOption(this.val);
			this.loading=false
			},
			dingdanxiangqing(){
			let HisArr="";
			HisArr = this.$echarts.init(document.getElementById('main2'));
			let a = {
			value: this.shuzu1[0]['6_qualified'],
			let HisArr="";
			HisArr = this.$echarts.init(document.getElementById('main2'));
			let a = {
			value: 942,

			name: "成品",
			itemStyle: { color: '#53a2ff' },
			label:{fontSize:30}
			name: "成品",
			itemStyle: { color: '#53a2ff' }

			}
			let b = {
			value: this.shuzu1[0]['7_qualified_not'],
			name: "次品",
			itemStyle: { color: 'darkseagreen' },
			label:{fontSize:30}
			}
			let b = {
			value: 58,
			name: "次品",
			itemStyle: { color: 'darkseagreen' }

			}
			}
			this.val1.title.text="合格率"
			this.val1.title.top="45%"
			this.val1.title.left="45%"
			this.val1.title.textStyle.fontSize=30
			this.val1.title.left="40%"
			this.val1.series[0].data[0]=a
			this.val1.series[0].data[1]=b


			HisArr.setOption(this.val1);
			this.loading=false
			},

			HisArr.setOption(this.val1);
			this.loading=false
			},
			dingdanxiangqing1(){
			let HisArr="";
			HisArr = this.$echarts.init(document.getElementById('main4'));
			let HisArr="";
			HisArr = this.$echarts.init(document.getElementById('main4'));
			let a = {
			value: this.shuzu1[0]['2_smallglass_completed'],

			name: "已完成",
			itemStyle: { color: '#53a2ff' },
			label:{fontSize:30}

			itemStyle: { color: '#53a2ff' }

			}
			let b = {
			value: this.shuzu1[0]['3_smallglass_processing'],
			name: "未完成",
			itemStyle: { color: 'darkseagreen' },
			label:{fontSize:30}
			itemStyle: { color: 'darkseagreen' }

			}
			this.val1.title.text="订单加工"
			this.val1.title.top="45%"
			this.val1.title.left="45%"
			this.val1.title.textStyle.fontSize=30
			this.val1.title.left="40%"
			this.val1.series[0].data[0]=a
			this.val1.series[0].data[1]=b
			HisArr.setOption(this.val1);
			this.loading=false
			},

			},
			watch:{

			this.val1.series[0].data[1]=b

			HisArr.setOption(this.val1);
			this.loading=false
			},

			},
			watch:{
			shuzu(){
			for(item of this.shuzu){

			if((item["3_class_html"].indexOf("33")>-1) \|\| (item["3_class_html"].indexOf("35")>-1) \|\| (item["3_class_html"].indexOf("40")>-1)){
			if(item["1_connect_state"]=="已连接"){
			if(item["5_baojin"]>0){
			//水刀
			if(item["3_class_html"].indexOf("35")>-1){
			if(item["5_baojin"]>1){
			item["6_class"]='divYellow';
			}else{
			item["4_shuliang"]==4?item["6_class"]='divGrenn':item["6_class"]='divnull';
			}

			}else{
			item["6_class"]='divYellow';
			}

			}else{

			//钻孔加工中心
			item["4_shuliang"]==2?item["6_class"]='divGrenn':item["6_class"]='divnull';


			}
			}else{
			item["6_class"]='divRed';
			}
			}
			else{
			if(item["1_connect_state"]=="已连接"){
			if(item["5_baojin"]>0){
			item["6_class"]='divYellow';
			}else{
			if((item["0_machine_id"]==76)\|\|(item["0_machine_id"]==77)\|\|(item["0_machine_id"]==26)\|\|(item["0_machine_id"]==53)){

			item["6_class"]='divGrenn';
			}else{
			item["4_shuliang"]>0?item["6_class"]='divGrenn':item["6_class"]='divnull';}
			}
			}else{
			item["6_class"]='divRed';
			}

			}

			}
			},
			machineElectric(){
			this.echarsInit()
			},
			machineWater(){
			this.echarsInit1()
			},
			shuzu1(){
			this.dingdanxiangqing(),
			this.dingdanxiangqing1()
			}

			},
			async mounted(){
			this.dingdanxiangqing(),
			this.dingdanxiangqing1()
			}

			let sql=""
			let flag=2
			sql="{call AXJ_dapingxianshi_dingdanshuju2('切割')}"
			this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1")

			await setInterval(()=>{

			sql="{call AXJ_dapingxianshi_dingdanshuju2('切割')}"
			this.interValLoadAjxs('大屏总订单数据',sql,flag,"shuzu1")
			},5000)

			},
			async mounted(){



			}

			})
			let sql=""
			let flag=2
			sql="{call AXJ_dapingxianshijiqishuju()}"
			this.loadAjxss('大屏显示',sql,flag,"shuzu")
			sql="{call AXJ_dapingxianshi_dingdanshuju()}"
			this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1")
			sql="{call AXJ_a_largeScreen_sumelectric_select()}"
			this.loadAjxss('大屏总电耗数据',sql,flag,"machineElectric")
			sql="{call AXJ_a_largeScreen_sumselect()}"
			this.loadAjxss('大屏总能耗总数据',sql,flag,"shuzu2")
			sql="{call AXJ_a_largeScreen_sumwater_select()}"
			this.loadAjxss('大屏总水耗数据',sql,flag,"machineWater")


			await setInterval(()=>{

			sql="{call AXJ_dapingxianshijiqishuju()}"
			this.interValLoadAjxs('大屏显示',sql,flag,"shuzu")
			},5000)
			await setInterval(()=>{

			sql="{call AXJ_dapingxianshi_dingdanshuju()}"
			this.interValLoadAjxs('大屏总订单数据',sql,flag,"shuzu1")
			},5000)
			await setInterval(()=>{
			sql="{call AXJ_a_largeScreen_sumelectric_select()}"
			this.interValLoadAjxs('大屏总电耗数据',sql,flag,"machineElectric")
			},5000)
			await setInterval(()=>{
			sql="{call AXJ_a_largeScreen_sumselect()}"
			this.interValLoadAjxs('大屏总能耗总数据',sql,flag,"shuzu2")
			},5000)
			await setInterval(()=>{
			sql="{call AXJ_a_largeScreen_sumwater_select()}"
			this.interValLoadAjxs('大屏总水耗数据',sql,flag,"machineWater")
			},5000)




			}

			})