Haier_MES.git - Gitblit

			@@ -1,304 +1,346 @@
			<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
			<%@page import="builder.Manager" %>
			<%@page import="ng.db.*" %>
			<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
			<%@ page contentType="text/html;charset=UTF-8"%>

			<html>

			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			<meta http-equiv="expires" content="0">
			<meta http-equiv="pragma" content="no-cache">
			<meta http-equiv="cache-control" content="no-cache">
			<script src="../js/main.js"></script>

			<title>瑕疵检测</title>
			</head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

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

			}
			#main4 {
			width: 50%;
			height: 100%;
			}
			#main1-1 {
			width: 100%;
			height: 25%;
			font-size: 40px;
			}
			#main1-2 {
			width: 100%;
			height: 25%;
			font-size: 50px;
			}
			#main3-1 {
			width: 50%;
			height: 100%;
			}
			#main3-2 {
			width: 50%;
			height: 100%;

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

			.page-scroll .el-scrollbar__wrap {
			overflow-x: hidden;
			}
			}
			#main4-2 {
			width: 100%;
			height: 30%;

			.el-table__header {
			height: 20%;
			}
			#main4-3 {
			width: 100%;
			height: 30%;

			}
			}
			#main1-1-1 {
			font-size: 50px;
			margin-top: 2%;
			}
			#main1-2-1 {
			font-size: 50px;
			margin-top: 2%;
			}
			#main3-1-1 {
			width: 100%;
			height: 20%;
			}
			#main3-1-2 {
			width: 100%;
			height: 80%;
			}
			#main3-2-1 {
			width: 100%;
			height: 20%;
			}
			#main3-2-2 {
			width: 100%;
			height: 80%;
			}

			#app {
			width: 100%;
			height: 100%;
			}

			#app1 {
			width: 60%;
			position: absolute;
			left: 2%;
			top: 3%;
			}

			#chart-wrap {
			height: 40%;
			width: 30%;
			position: absolute;
			right: 2%;
			top: 2%;
			text-align: center;
			line-height: 275px;
			}

			#har {
			width: 99%;
			position: absolute;
			height: 2%;
			top: 43%;
			background-color: darkgrey;
			}

			#picture1 {
			width: 50%;
			position: absolute;
			height:100%;

			padding: 0;
			margin: 0;
			}

			#picture2 {
			width: 50%;
			height:100%;



			}
			#pictue{
			position: absolute;
			top: 50%;
			width: 99%;
			height:48vh;
			padding: 0;
			margin: 0;
			}
			img{
			max-width: 100%;
			max-height: 100%;
			}
			</style>

			</style>
			<title>大屏显示</title>
			</head>
			<body>
			<div id='app' @mousemove="onmouseMove" v-loading="loading" element-loading-background="white">
			<div id="mains" v-show="this.global.pollingIndex==0">
			<parts-change></parts-change>
			<div id='app1' style="width: 60%;height:30%;float: right;padding: 0;background-color: white;">
			<show-table :tablehead="tableHead" :tabledata="tableData1"></show-table>
			</div>
			<div id='chart-wrap'>
			</div>
			<div id='har'></div>
			<div id="pictue">
			<div id='picture1' >
			<img class="imgCenter" style="float: right;" :src="pictures[0]" alt="">
			<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>
			<div id="main3">
			<div id="main4"></div>
			<div id="main2"></div>
			</div>


			</div>
			<div id="picture2" style="float:right">
			<img class="imgCenter" style="float: left;" :src="pictures[1]" alt="">
			</div>

			</div>
			</div>
			<screen-photo :id="this.machineScreen" :intime="this.global.timer"
			v-show="this.global.pollingIndex==1 "
			>
			</screen-photo>
			</div>


			</body>
			<script type="text/javascript">
			let app = new Vue({
			el: '#app',
			mixins: [mixin],
			data: {
			storage: null,
			val:{
			title:{
			text:'',
			left:'center'
			},
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'shadow'
			}
			},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: [
			{
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			axisLine: { lineStyle: { color: '#5CADFE' } },
			axisLabel: { color: '#5CADFE' },
			splitLine: { lineStyle: { color: '#5CADFE', type: 'dashed' } }
			}
			],
			yAxis: [
			{
			type: "value",
			name: "水耗",
			nameTextStyle: {
			color: "#5CADFE",
			fontSize: 12,
			padding: [0, 0, 0, -30], //name文字位置对应上右下左
			},
			splitLine: {
			// 网格线
			show: true,
			lineStyle: { //分割线
			color: "#5CADFE",
			width: 1,
			type: "dashed" //dotted：虚线 solid:实线
			}
			},
			axisLabel: {
			// 轴文字
			color: "#5CADFE",
			fontSize: 12,
			},



			<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/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:[{}],
			type:'',





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

			],
			series: [
			{
			name: '水耗',
			type: 'bar',
			barWidth: '80%',
			data: [10, 52, 200, 334, 390, 330, 220],
			itemStyle: { color: '#5CADFE' }
			},
			},

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

			}
			},
			textStyle:{

			},
			series: [
			{

			]
			},

			tableHead: [{}],
			selectdate1: '',
			selectdate2: '',
			tableData: [{}],
			tableData1:[{}],
			tableHead2: [{}],
			tableData2: [{}],
			show: true,
			showGlassType: '',
			showGlassIndex: 0,
			machineLocal:<%= request.getParameter("local")%>,
			machineScreen:null,
			machineElectric:[{}],
			loading:true,
			machineIp:null,
			picture:[{}],
			pictures:['',''],
			getPhoto:null


			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 + '%)';
			}
			},
			methods: {
			echarsInit(type) {
			let HisArr=[]
			let datas=this.machineElectric
			datas=[datas[this.machineLocal]]
			HisArr[0] = this.$echarts.init(document.getElementById('chart-wrap'));

			this.val.yAxis[0].name="电耗";
			this.val.series[0].name='电耗(kw)'
			this.val.series[0].itemStyle.color='rgb(84,112,198)'
			danwei="(kw)"

			for(let i in datas){
			this.val.title.text=datas[i]["0_machine_name"]+danwei
			this.val.xAxis[0].data=datas[i]["6_shijian"].split(',');
			this.val.series[0].data=datas[i]["5_jiqidianliang"].split(',');
			HisArr[i].setOption(this.val);
			}
			},
			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"
			}
			}
			}

			}
			]
			},
			computed: {

			},
			watch: {
			tableData(newdate,olddate){
			this.tableData1=[this.tableData[this.machineLocal]]
			},
			machineElectric(){
			if(Object.keys(this.machineElectric[0]).length==0){
			return
			}
			this.echarsInit(0)
			this.loading=false

			},
			methods:{

			dingdanxiangqing(){
			let HisArr="";
			HisArr = this.$echarts.init(document.getElementById('main2'));
			let a = {
			value: this.shuzu1[0]['6_qualified'],

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

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

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


			HisArr.setOption(this.val1);
			this.loading=false
			},
			picture(newval){
			this.pictures[0]=newval[0]['A0']
			this.pictures[1]=newval[0]['A1']
			}
			},
			async mounted() {

			let sql=""
			let flag=2
			sql="{call AXJ_a_largeScreen_order_tableHead_select()}"
			await this.loadAjxss('大屏显示机器表头查询',sql,flag,"tableHead")
			await this.getTableData('瑕疵检测')
			await this.getMachineElectric('瑕疵检测','4')
			dingdanxiangqing1(){
			let HisArr="";
			HisArr = this.$echarts.init(document.getElementById('main4'));
			let a = {
			value: this.shuzu1[0]['2_smallglass_completed'],

			let param = new URLSearchParams();
			param.append("ip",this.machineIp);
			this.getPhoto = await setInterval(()=>{
			this.$http.post( '../mysqlInsert/getPicture.jsp',param)
			.then(function (response) {
			app.$data.picture= response.data
			}).catch(function (error) {
			clearInterval(this.getPhoto);
			//alert('Error: ' + "提取图片发生错误,请关闭界面重新打开！");

			});
			},30000)

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


			this.onmouseMove()
			},
			created() {
			switch (this.machineLocal) {
			case 0:
			this.machineScreen=7*1
			this.machineIp="192.168.10.196"
			break;
			case 1:
			this.machineScreen=10*1
			this.machineIp="192.168.20.51"
			break;
			default:
			this.machineScreen=12*1
			this.machineIp="192.168.20.107"
			break;
			//
			}
			},
			}
			let b = {
			value: this.shuzu1[0]['3_smallglass_processing'],
			name: "未完成",
			itemStyle: { color: 'darkseagreen' },
			label:{fontSize:30}

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

			},
			watch:{

			shuzu1(){
			this.dingdanxiangqing(),
			this.dingdanxiangqing1()
			}

			},
			async mounted(){
			let type=''
			let machineLocal=<%= request.getParameter("local")%>
			if (machineLocal==0) {
			type='瑕疵1'
			}else if(machineLocal==1){
			type='瑕疵2'
			}else if(machineLocal==2){
			type='瑕疵3'
			}
			let sql=""
			let flag=2
			sql="{call AXJ_dapingxianshi_dingdanshuju2('"+type+"')}"
			this.loadAjxss('大屏总订单数据',sql,flag,"shuzu1")


			await setInterval(()=>{

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





			}

			})



			</script>


			</body>
			</html>