ZhiHuiQiCe/FangCangZhiNeng.git

			@@ -16,8 +16,14 @@
			</uni-forms-item>
			<uni-forms-item :label="order_qty">
			</uni-forms-item>
			<uni-forms-item label="å¾æ«ç©æç¼ç :">
			<uni-easyinput type="text" placeholder="è¯·æ«æç©æç¼ç " ref='materialInput'
			:focus="step === 1" v-model="materialCode"
			@confirm="materialCodeInput"
			@blur="materialCodeInput" />
			</uni-forms-item>
			<uni-forms-item label="åºä½ç¼å·:">
			<uni-easyinput type="text" placeholder="è¯·æ«æåºä½ç¼å·" ref='midInput' :focus="!focus"
			<uni-easyinput type="text" placeholder="è¯·æ«æåºä½ç¼å·" ref='midInput' :focus="focus"
			v-model="barcode" @confirm="barcodeInput" />
			</uni-forms-item>
			<!-- <uni-forms-item label="åºåºæ°é:">
			@@ -37,7 +43,7 @@
			<view style="display: flex;justify-content: space-around;margin-top: 2%;">
			<!-- <button @click="reset" type="default" size="default"
			style="width: 160rpx;border: 1rpx solid #007aff;color: #007aff;">éç½®</button> -->
			<button @click="submit" type="primary" size="default" style="width: 200rpx;">ç¡®è®¤åºåº</button>
			<button @click="submit" type="primary" size="default" style="width: 250rpx;">ç¡®è®¤åºåº</button>
			</view>
			</uni-forms-item>
			</uni-forms>
			@@ -126,385 +132,541 @@
			</template>

			<script>
			const innerAudioContext = uni.createInnerAudioContext();
			export default {
			data() {
			return {
			items: ['åºåº'], //, 'è§£ç''ç»ç', , 'åæ®ä¿¡æ¯'
			current: 0,
			taskId:"",
			matTotal: [],
			matInfos: [],
			orderNo: "",
			batchNo:"",
			orderqty:"",
			Inqty:"",
			goods_no:"",
			batch_num:"",
			order_qty:"",
			order_Inqty:"",
			label: "",
			orderInfo: [],
			focus: false,
			pkfocus: false,
			barcode: "",
			materSn: "",
			Initiallife: 1000,
			sns: [],
			pksns: [],
			addressFocus: false,
			inboundBarcode: "",
			address: "",
			check: true,
			value: "",
			matInfo: [],
			value2: "",
			matTotals: [],
			warehouseId: "",
			Test: false,
			Testlabel: "",
			Testplaceholder: "",
			Testcheck: false,
			pkmaterSn: "",
			pkmatInfos: [],
			addressdisabled: false
			}
			},
			onShow() {},
			onLoad(res) {
			this.focus = false;
			this.addressFocus = false;
			this.orderNo = res.orderNo;
			this.taskId=res.taskId;
			this.Inqty=res.order_Inqty;
			this.orderqty=res.order_qty;
			this.batchNo=res.batchNo;
			this.warehouseId = res.warehouseId;
			this.label = "åæ®ç¼å·ï¼" + this.orderNo;
			this.batch_num="æ¹æ¬¡å·ï¼"+res.batchNo;
			this.order_qty="åºåºæ°éï¼"+res.stockQuantity;
			this.order_Inqty="ç©æåç§°ï¼"+res.materielName;
			this.goods_no="ç©æç¼å·ï¼"+res.materielCode;
			// this.getData();
			},
			methods: {
			// voiceSpeech(src) {
			// innerAudioContext.src = src; // '../../static/success.mp3';
			// innerAudioContext.play();
			// },
			updateFocus() {
			debugger
			this.$nextTick(() => {
			this.materSn = '';
			if (!this.focus) {
			this.focus = true;
			}
			});
			},
			barcodeFocus() {
			debugger
			this.barcode = '';
			if (this.focus) {
			this.focus = false;
			}
			},
			getData() {
			var postData = {
			MainData: {
			orderNo: this.orderNo
			},
			}
			this.$u.post('/api/InboundOrderDetail/GetInboundOrderDetails', postData).then((res) => {
			if (res.status) {
			this.orderInfo = res.data;
			if (this.orderInfo.length > 3) {
			this.loadVisible = true;
			}
			}
			})
			},
			onClickItem(e) {
			this.focus = false;
			this.addressFocus = false;
			if (this.current !== e.currentIndex) {
			this.current = e.currentIndex;
			if (this.current == 2) {
			this.getData();
			}
			}
			},
			barcodeInput() {
			this.$nextTick(function(x) {
			if (this.barcode.length > 0) {
			// if (this.barcode.substring(0, 1) == 'A' \|\| this.barcode.substring(0, 2) == 'TP') {
			this.focus = true;
			// } else {
			// this.$refs.uToast.show({
			// title: "æ«ç éè¯¯,è¯·æ«ææçç ",
			// type: "error"
			// })
			// }
			}
			})
			},
			snInput() {
			this.$nextTick(() => {
			if (this.materSn != "") {
			this.focus = false;
			var matSn = this.materSn;
			if (this.warehouseId == 11) {
			matSn = matSn.replace(/,SC.*/, '');
			}
			//æ¥è¯¢matSnæ¯å¦åå¨åç¬¦
			if(matSn.indexOf("POHA")>0){
			this.$u.post('/api/MaterielInfo/CodeAnalysis?serNum=' + matSn, {}).then((res) => {
			this.Testcheck = false;
			if (res.status) {
			this.sns.push(res.data.serialNumber);

			this.matInfos.push(res.data);
			if (res.message) {
			this.$refs.uToast.show({
			title: res.message,
			type: "error"
			})
			// setTimeout(() => {
			// this.voiceSpeech('../../static/fail.mp3');
			// }, 100);
			return;
			}
			// setTimeout(() => {
			// this.voiceSpeech('../../static/success.mp3');
			// }, 100);
			} else {
			this.$refs.uToast.show({
			title: res.message,
			type: "error"
			})
			// setTimeout(() => {
			// this.voiceSpeech('../../static/fail.mp3');
			// }, 100);
			}
			})
			}
			setTimeout(() => {
			this.materSn = "";
			}, 100);
			}
			})
			},
			pksnInput() {
			this.$nextTick(() => {
			if (this.pkmaterSn != "") {

			var matSn = this.pkmaterSn;

			if(matSn.indexOf("POHA")>0){
			this.$u.post('/api/MaterielInfo/CodeAnalysis?serNum=' + matSn, {}).then((res) => {
			if (res.status) {
			this.pksns.push(res.data.serialNumber);
			this.pkmatInfos.push(res.data);
			if (!res.status) {
			this.$refs.uToast.show({
			title: res.message,
			type: "error"
			})
			// setTimeout(() => {
			// this.voiceSpeech('../../static/fail.mp3');
			// }, 100);
			return;
			}
			// setTimeout(() => {
			// this.voiceSpeech('../../static/success.mp3');
			// }, 100);
			return;
			} else {
			this.$refs.uToast.show({
			title: res.message,
			type: "error"
			})
			// setTimeout(() => {
			// this.voiceSpeech('../../static/fail.mp3');
			// }, 100);
			}
			})
			}
			setTimeout(() => {
			this.pkmaterSn = "";
			}, 100);
			}
			})
			},
			inbound() {
			if (this.inboundBarcode == "") {
			this.$refs.uToast.show({
			title: "è¯·æ«ææçæ¡ç ",
			type: "error"
			})
			return;
			}
			if (this.address == "") {
			this.$refs.uToast.show({
			title: "è¯·æ«æå°åæ¡ç ",
			type: "error"
			})
			return;
			}
			var postData = {
			MainData: {
			"barcode": this.inboundBarcode,
			"startPoint": this.address,
			"warehouseId": this.warehouseId
			}
			}
			this.$u.post('/api/Task/RequestInboundTask', postData).then(res => {
			if (res.status) {
			this.inboundBarcode = "";
			if (this.warehouseId != 5) this.address = "";
			setTimeout(() => {
			this.addressFocus = false;
			this.$refs.uToast.show({
			title: "æå",
			type: "success"
			})
			}, 200);
			} else {
			this.$refs.uToast.show({
			title: res.message,
			type: "error"
			})
			}
			}).catch(err => {
			this.$refs.uToast.show({
			title: err.message,
			type: "error"
			})
			})
			},
			inputChangebarcode() {
			this.addressFocus = false;
			this.$nextTick(function(x) {
			if (this.inboundBarcode != '') {
			this.addressFocus = true;
			}
			})
			},
			deleteList(res) {
			this.matInfos.splice(res, 1);
			this.sns.splice(res, 1);
			},
			pkdeleteList(res) {
			this.pkmatInfos.splice(res, 1);
			this.pksns.splice(res, 1);
			},
			reset() {
			this.barcode = "";
			this.matInfos = [];
			this.sns = [];
			this.materSn = "";
			if (this.warehouseId = !6) {
			this.Initiallife = 0;
			}
			},
			resetInPk() {
			this.pkmaterSn = "";
			this.pkfocus = false;
			this.pkmatInfos = [];
			this.pksns = [];
			},
			pksubmit() {
			if (this.pkmatInfos.length == 0) {
			this.$refs.uToast.show({
			title: "è¯·æ«æåç®±æ ç¾",
			type: 'error'
			})
			return;
			}
			this.$u.post('/api/DeliveryOrder/FeedbackOut?warehouseId=' + this.warehouseId + "&orderNo=" + this.orderNo, this
			.pksns).then(res => {
			if (res.status) {
			this.$refs.uToast.show({
			title: "åºåºæå",
			type: "success"
			})
			this.pkfocus = false;
			this.pkmatInfos = [];
			this.pksns = [];
			} else {
			this.$refs.uToast.show({
			title: res.message,
			type: "error"
			})
			}
			})
			},
			submit() {
			if (this.barcode == "") {
			this.$refs.uToast.show({
			title: "è¯·æ«æè´§ä½ç¼å·",
			type: 'error'
			})
			return;
			}
			// if (this.materSn.length == 0) {
			// this.$refs.uToast.show({
			// title: "è¯·è¾å¥åºåºæ°é",
			// type: 'error'
			// })
			// return;
			// }
			this.$u.post('/api/DeliveryOrder/OutFinish', {
			MainData: {
			"locationCode": this.barcode,
			"taskId":this.taskId,
			// "warehouseCode": this.warehouseId,
			// "orderNo": this.orderNo,
			// "Inqty": this.materSn,
			// "batchNo": this.batchNo,
			},
			// DelKeys: this.sns
			}).then(res => {
			this.Testcheck = false;
			if (res.status) {
			this.$refs.uToast.show({
			title: "åºåºæå",
			type: "success"
			})
			this.Inqty=res.message;
			// this.order_Inqty="å·²åºåºæ°éï¼"+this.Inqty;
			this.barcode="";
			// this.materSn="";
			} else {
			this.$refs.uToast.show({
			title: res.message,
			type: "error"
			})
			}
			})
			}
			}
			}
			const innerAudioContext = uni.createInnerAudioContext();
			export default {
			data() {
			return {
			items: ["åºåº"], //, 'è§£ç''ç»ç', , 'åæ®ä¿¡æ¯'
			current: 0,
			taskId: "",
			matTotal: [],
			matInfos: [],
			orderNo: "",
			batchNo: "",
			orderqty: "",
			Inqty: "",
			goods_no: "",
			batch_num: "",
			order_qty: "",
			order_Inqty: "",
			label: "",
			orderInfo: [],
			focus: false,
			pkfocus: false,
			barcode: "",
			materSn: "",
			Initiallife: 1000,
			sns: [],
			pksns: [],
			addressFocus: false,
			inboundBarcode: "",
			address: "",
			check: true,
			value: "",
			matInfo: [],
			value2: "",
			matTotals: [],
			warehouseId: "",
			Test: false,
			Testlabel: "",
			Testplaceholder: "",
			Testcheck: false,
			pkmaterSn: "",
			pkmatInfos: [],
			addressdisabled: false,
			materialCode: "", // æ°å¢ï¼æ«æçç©æç¼ç
			materialCodeValid: false, // æ°å¢ï¼ç©æç¼ç éªè¯ç¶æ
			step: 1, // æ°å¢ï¼1-ç©æç¼ç ï¼2-åºä½ç¼å·ï¼
			};
			},
			onShow() {},
			onLoad(res) {
			this.focus = false;
			this.addressFocus = false;
			this.orderNo = res.orderNo;
			this.taskId = res.taskId;
			this.Inqty = res.order_Inqty;
			this.orderqty = res.order_qty;
			this.batchNo = res.batchNo;
			this.warehouseId = res.warehouseId;
			this.label = "åæ®ç¼å·ï¼" + this.orderNo;
			this.batch_num = "æ¹æ¬¡å·ï¼" + res.batchNo;
			this.order_qty = "åºåºæ°éï¼" + res.stockQuantity;
			this.order_Inqty = "ç©æåç§°ï¼" + res.materielName;
			this.goods_no = "ç©æç¼å·ï¼" + res.materielCode;
			this.materielCode = res.materielCode; // è®¾ç½®ç¨äºéªè¯çç©æç¼ç
			// this.getData();
			},
			methods: {
			// voiceSpeech(src) {
			// innerAudioContext.src = src; // '../../static/success.mp3';
			// innerAudioContext.play();
			// },

			// ç©æç¼ç éªè¯
			materialCodeInput() {
			console.log("materialCodeInput è¢«è§¦å");
			console.log("è¾å¥å¼:", this.materialCode);
			this.$nextTick(() => {
			if (this.materialCode.trim() !== "") {
			const scannedCode = this.materialCode.trim();
			const expectedCode = this.materielCode;

			console.log("æ«æç¼ç :", scannedCode);
			console.log("ææç¼ç ï¼materielCodeï¼:", expectedCode);

			if (scannedCode === expectedCode) {
			this.materialCodeValid = true;
			console.log("â ç©æç¼ç éªè¯æå");

			this.step = 2;
			this.$refs.uToast.show({
			title: "ç©æç¼ç éªè¯æå",
			type: "success",
			});
			this.$nextTick(() => {
			this.$refs.midInput.focus();
			});
			} else {
			this.materialCodeValid = false;
			console.log("â ç©æç¼ç éªè¯å¤±è´¥");

			this.$refs.uToast.show({
			title: `ç©æç¼ç ä¸å¹é`,
			type: "error",
			});

			setTimeout(() => {
			this.materialCode = "";
			this.step = 1;
			this.$nextTick(() => {
			this.$refs.materialInput.focus();
			});
			}, 500);
			}
			}
			});
			},

			updateFocus() {
			debugger;
			this.$nextTick(() => {
			this.materSn = "";
			if (!this.focus) {
			this.focus = true;
			}
			});
			},
			barcodeFocus() {
			debugger;
			this.barcode = "";
			if (this.focus) {
			this.focus = false;
			}
			},
			getData() {
			var postData = {
			MainData: {
			orderNo: this.orderNo,
			},
			};
			this.$u
			.post("/api/InboundOrderDetail/GetInboundOrderDetails", postData)
			.then((res) => {
			if (res.status) {
			this.orderInfo = res.data;
			if (this.orderInfo.length > 3) {
			this.loadVisible = true;
			}
			}
			});
			},
			onClickItem(e) {
			this.focus = false;
			this.addressFocus = false;
			if (this.current !== e.currentIndex) {
			this.current = e.currentIndex;
			if (this.current == 2) {
			this.getData();
			}
			}
			},
			// barcodeInput() {
			// this.$nextTick(function (x) {
			// if (this.barcode.length > 0) {
			// // if (this.barcode.substring(0, 1) == 'A' \|\| this.barcode.substring(0, 2) == 'TP') {
			// this.focus = true;
			// // } else {
			// // this.$refs.uToast.show({
			// // title: "æ«ç éè¯¯,è¯·æ«ææçç ",
			// // type: "error"
			// // })
			// // }
			// }
			// });
			// },
			barcodeInput() {
			this.$nextTick(() => {
			if (this.barcode.length > 0) {
			this.$refs.uToast.show({
			title: "åºä½ç¼å·æ«ææå",
			type: "success",
			});
			setTimeout(() => {
			this.$nextTick(() => {
			this.$refs.midInput.focus();
			});
			}, 100);
			}
			});
			},

			snInput() {
			this.$nextTick(() => {
			if (this.materSn != "") {
			this.focus = false;
			var matSn = this.materSn;
			if (this.warehouseId == 11) {
			matSn = matSn.replace(/,SC.*/, "");
			}
			//æ¥è¯¢matSnæ¯å¦åå¨åç¬¦
			if (matSn.indexOf("POHA") > 0) {
			this.$u
			.post("/api/MaterielInfo/CodeAnalysis?serNum=" + matSn, {})
			.then((res) => {
			this.Testcheck = false;
			if (res.status) {
			this.sns.push(res.data.serialNumber);

			this.matInfos.push(res.data);
			if (res.message) {
			this.$refs.uToast.show({
			title: res.message,
			type: "error",
			});
			// setTimeout(() => {
			// this.voiceSpeech('../../static/fail.mp3');
			// }, 100);
			return;
			}
			// setTimeout(() => {
			// this.voiceSpeech('../../static/success.mp3');
			// }, 100);
			} else {
			this.$refs.uToast.show({
			title: res.message,
			type: "error",
			});
			// setTimeout(() => {
			// this.voiceSpeech('../../static/fail.mp3');
			// }, 100);
			}
			});
			}
			setTimeout(() => {
			this.materSn = "";
			}, 100);
			}
			});
			},
			pksnInput() {
			this.$nextTick(() => {
			if (this.pkmaterSn != "") {
			var matSn = this.pkmaterSn;

			if (matSn.indexOf("POHA") > 0) {
			this.$u
			.post("/api/MaterielInfo/CodeAnalysis?serNum=" + matSn, {})
			.then((res) => {
			if (res.status) {
			this.pksns.push(res.data.serialNumber);
			this.pkmatInfos.push(res.data);
			if (!res.status) {
			this.$refs.uToast.show({
			title: res.message,
			type: "error",
			});
			// setTimeout(() => {
			// this.voiceSpeech('../../static/fail.mp3');
			// }, 100);
			return;
			}
			// setTimeout(() => {
			// this.voiceSpeech('../../static/success.mp3');
			// }, 100);
			return;
			} else {
			this.$refs.uToast.show({
			title: res.message,
			type: "error",
			});
			// setTimeout(() => {
			// this.voiceSpeech('../../static/fail.mp3');
			// }, 100);
			}
			});
			}
			setTimeout(() => {
			this.pkmaterSn = "";
			}, 100);
			}
			});
			},
			inbound() {
			if (this.inboundBarcode == "") {
			this.$refs.uToast.show({
			title: "è¯·æ«ææçæ¡ç ",
			type: "error",
			});
			return;
			}
			if (this.address == "") {
			this.$refs.uToast.show({
			title: "è¯·æ«æå°åæ¡ç ",
			type: "error",
			});
			return;
			}
			var postData = {
			MainData: {
			barcode: this.inboundBarcode,
			startPoint: this.address,
			warehouseId: this.warehouseId,
			},
			};
			this.$u
			.post("/api/Task/RequestInboundTask", postData)
			.then((res) => {
			if (res.status) {
			this.inboundBarcode = "";
			if (this.warehouseId != 5) this.address = "";
			setTimeout(() => {
			this.addressFocus = false;
			this.$refs.uToast.show({
			title: "æå",
			type: "success",
			});
			}, 200);
			} else {
			this.$refs.uToast.show({
			title: res.message,
			type: "error",
			});
			}
			})
			.catch((err) => {
			this.$refs.uToast.show({
			title: err.message,
			type: "error",
			});
			});
			},
			inputChangebarcode() {
			this.addressFocus = false;
			this.$nextTick(function (x) {
			if (this.inboundBarcode != "") {
			this.addressFocus = true;
			}
			});
			},
			deleteList(res) {
			this.matInfos.splice(res, 1);
			this.sns.splice(res, 1);
			},
			pkdeleteList(res) {
			this.pkmatInfos.splice(res, 1);
			this.pksns.splice(res, 1);
			},
			reset() {
			this.barcode = "";
			this.matInfos = [];
			this.sns = [];
			this.materSn = "";
			if ((this.warehouseId = !6)) {
			this.Initiallife = 0;
			}
			},
			resetInPk() {
			this.pkmaterSn = "";
			this.pkfocus = false;
			this.pkmatInfos = [];
			this.pksns = [];
			},
			pksubmit() {
			if (this.pkmatInfos.length == 0) {
			this.$refs.uToast.show({
			title: "è¯·æ«æåç®±æ ç¾",
			type: "error",
			});
			return;
			}
			this.$u
			.post(
			"/api/DeliveryOrder/FeedbackOut?warehouseId=" +
			this.warehouseId +
			"&orderNo=" +
			this.orderNo,
			this.pksns
			)
			.then((res) => {
			if (res.status) {
			this.$refs.uToast.show({
			title: "åºåºæå",
			type: "success",
			});
			this.pkfocus = false;
			this.pkmatInfos = [];
			this.pksns = [];
			} else {
			this.$refs.uToast.show({
			title: res.message,
			type: "error",
			});
			}
			});
			},

			// submit() {
			// if (this.barcode == "") {
			// this.$refs.uToast.show({
			// title: "è¯·æ«æè´§ä½ç¼å·",
			// type: 'error'
			// })
			// return;
			// }

			// this.$u.post('/api/DeliveryOrder/OutFinish', {
			// MainData: {
			// "locationCode": this.barcode,
			// "taskId": this.taskId,
			// },
			// }).then(res => {
			// if (res.status) {
			// this.$refs.uToast.show({
			// title: "åºåºæå",
			// type: "success"
			// })
			// this.barcode = "";

			// // å³é®ä¿®æ¹ï¼ä½¿ç¨ getCurrentPages è·ååä¸ä¸ªé¡µé¢å¹¶ç´æ¥è°ç¨å¶æ¹æ³
			// const pages = getCurrentPages();
			// const prevPage = pages[pages.length - 2]; // è·åä¸ä¸ä¸ªé¡µé¢å®ä¾

			// if (prevPage && prevPage.refreshData) {
			// // ç´æ¥è°ç¨ä¸ä¸ä¸ªé¡µé¢çå·æ°æ¹æ³
			// prevPage.refreshData();
			// }

			// setTimeout(() => {
			// uni.navigateBack({
			// delta: 1
			// });
			// }, 300);
			// } else {
			// this.$refs.uToast.show({
			// title: res.message,
			// type: "error"
			// })
			// }
			// })
			// }
			submit() {
			if (!this.materialCodeValid) {
			this.$refs.uToast.show({
			title: "è¯·åæ«æå¹¶éªè¯ç©æç¼ç ",
			type: "error",
			});
			return;
			}
			if (this.barcode == "") {
			this.$refs.uToast.show({
			title: "è¯·æ«æè´§ä½ç¼å·",
			type: "error",
			});
			return;
			}

			// æ°å¢äºæ¬¡ç¡®è®¤é»è¾
			uni.showModal({
			title: "ç¡®è®¤åºåº",
			content: "æ¨ç¡®å®è¦æäº¤åºåºä¿¡æ¯åï¼",
			success: (res) => {
			if (res.confirm) {
			// æ¾ç¤ºå è½½ä¸
			uni.showLoading({
			title: 'æäº¤ä¸...',
			mask: true
			});

			this.$u.post("/api/DeliveryOrder/OutFinish", {
			MainData: {
			locationCode: this.barcode,
			taskId: this.taskId,
			},
			}).then((res) => {
			uni.hideLoading();

			if (res.status) {
			this.$refs.uToast.show({
			title: "åºåºæå",
			type: "success",
			});

			// æ¸ç©ºè¾å¥æ¡
			this.barcode = "";
			this.materialCode = "";
			this.materialCodeValid = false;

			// è®¾ç½®å·æ°æ è®°
			uni.setStorageSync('needRefreshOutbound', true);

			// å»¶è¿è¿å
			setTimeout(() => {
			uni.navigateBack({
			delta: 1
			});
			}, 500);

			} else {
			this.$refs.uToast.show({
			title: res.message \|\| "åºåºå¤±è´¥",
			type: "error",
			});
			}
			}).catch(err => {
			uni.hideLoading();
			this.$refs.uToast.show({
			title: "è¯·æ±å¤±è´¥ï¼è¯·éè¯",
			type: "error",
			});
			});
			}
			},
			});
			}
			},
			};
			</script>

			<style lang="scss">
			@import '@/common/uni-ui.scss';
			@import "@/common/uni-ui.scss";

			.content {
			display: flex;
			height: 150px;
			}
			.content {
			display: flex;
			height: 150px;
			}

			.content-text {
			font-size: 14px;
			color: #666;
			}
			.content-text {
			font-size: 14px;
			color: #666;
			}

			.itemstyle {
			margin-top: 30px;
			margin-left: 5%;
			}
			.itemstyle {
			margin-top: 30px;
			margin-left: 5%;
			}

			.headerstyle {
			width: 90%;
			}
			.headerstyle {
			width: 90%;
			}
			</style>