Haier_MES_II.git

			@@ -14,7 +14,7 @@
			}
			#header1 {
			width: 100%;
			height: 7%;
			height: 5%;
			background-color: white;
			display: inline-block;
			text-align: center;
			@@ -22,43 +22,59 @@
			}
			#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%;
			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,7 +108,7 @@
			}
			#main3-2-2 {
			width: 100%;
			height: 80%;
			height: 50%;
			}


			@@ -115,8 +117,8 @@
			<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="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">当前订单号：
			@@ -125,22 +127,30 @@
			<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 id="main1-3">当班计划数量：
			<div id="main1-2-1">{{items1['4_smallglass_sum']}}</div>
			</div>
			<div id="main1-2">当班完成数量：
			<div id="main1-4">当班完成数量：
			<div id="main1-2-1">{{items1['2_smallglass_completed']}} </div>
			</div>
			</div>
			<div id="main3">

			</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>



			@@ -167,7 +177,78 @@



			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)'
			}
			},

			]
			},
			val1: {
			borderColor:'#082352',
			title: {
			@@ -177,7 +258,7 @@
			text:'合格率',//主标题文本
			left:'center',
			top:'45%',
			left:'50%',
			left:'40%',
			textStyle:{
			color:'#454c5c',
			align:'center'
			@@ -223,6 +304,13 @@
			{ 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:{
			@@ -240,29 +328,89 @@

			},
			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'],
			value: 942,

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

			}
			let b = {
			value: this.shuzu1[0]['7_qualified_not'],
			value: 58,
			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

			@@ -277,31 +425,81 @@
			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:{
			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()
			@@ -310,15 +508,42 @@
			},
			async mounted(){


			let sql=""
			let flag=2
			sql="{call AXJ_dapingxianshi_dingdanshuju2('切割')}"
			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_dapingxianshi_dingdanshuju2('切割')}"
			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)


			@@ -330,6 +555,7 @@




			</script>
			</body>
			</html>