~admin/HangZhouMes.git

New file
			@@ -0,0 +1,212 @@
			<!-- 物料资料 -->


			<script setup>
			import { ref } from "vue";
			import { ArrowLeftBold, ArrowRight, Search } from "@element-plus/icons-vue";
			import request from "@/utils/request";
			import deepClone from "@/utils/deepClone";
			import { ElMessage } from "element-plus";
			import { useRouter } from "vue-router";


			const router = useRouter()
			let indexFlag = $ref(1)
			function changeRouter(index) {
			indexFlag = index
			}


			</script>

			<script>
			export default {
			mounted() {
			//获取数据
			var data="ProcessId="+"P24032508";
			request.get("/TidyUpGlassModule/SelectTerritoryInfo?"+data).then((res) => {
			if (res.code == 200) {
			var StoveCount=0;
			var temperid;
			for(var i=0;i<res.data.length;i++){
			if (temperid != res.data[i].layoutid) {
			StoveCount++;
			temperid=res.data[i].layoutid;
			}
			}
			// console.log(res.data);
			this.CanvaDraws("mycanvas",res.data,StoveCount);

			} else {
			ElMessage.warning(res.msg)
			router.push("/login")
			}
			});
			// request.get("/TidyUpGlassModule/CurrentCutTerritory").then((res) => {
			// if (res.code == 200) {
			// console.log(res.data);
			// } else {
			// ElMessage.warning(res.msg)
			// router.push("/login")
			// }
			// });



			},
			methods: {
			//Canva(id,基础数据,页面长：实际长，显示行内版图数， )
			//基础数据：实际炉长,实际炉宽, 小片X轴, 小片y轴, 小片长, 小片宽，显示数据（尺寸,ID,流程卡号,版图号）
			CanvaDraws(id,Datas,StoveCount) {
			//var StoveCount=43;//炉数
			var ArrangementMode='linefeed';//排布方式：linefeed(换行) /Wholeline 整行
			var RowMaxCount=3;//每行最多显示的图数
			var StoveWidth=3000; //实际炉宽 2850
			var StoveLength=5500;//实际炉长 5000
			var StoveColor='#CFC8C5';//炉子背景颜色


			var StoveIntervalX=30; //页面每一炉之间的间距X px
			var StoveIntervalY=50; //页面每一炉之间的间距Y px

			var HtmlWidth=1800; //页面横向
			//var actualWidth=12000;//页面横向所对应的实际长度
			var actualWidth=StoveWidth*RowMaxCount;//页面横向所对应的实际长度

			var Bli = actualWidth / (HtmlWidth-StoveIntervalX*RowMaxCount);//比例：实际长度mm/页面长度px

			var StoveCross=StoveWidth/Bli; //页面炉子横向像素
			var StoveVertical=StoveLength/Bli;//页面炉子纵向像素

			var Font1=(StoveCross*0.05);
			var Font2=(StoveCross*0.028);
			// var TerritoryWidth=dataTempered.loadwidth; //实际版图宽
			// var TerritoryLength=dataTempered.loadlength;//实际版图长
			// var TerritoryColor='#0DB637';//版图背景颜色

			// var TerritoryCross=TerritoryWidth/Bli; //页面版图横向像素
			// var TerritoryVertical=TerritoryLength/Bli;//页面版图纵向像素
			console.log(Font1);

			var canva = this.$refs[id];
			var content = canva.getContext('2d');
			canva.width = HtmlWidth;
			canva.height = StoveCount%RowMaxCount==0?((StoveVertical+StoveIntervalY)(StoveCount/RowMaxCount)):((StoveVertical+StoveIntervalY)(StoveCount/RowMaxCount+1));
			//console.log(StoveCount%RowMaxCount==0?((StoveVertical+StoveIntervalY)(StoveCount/RowMaxCount)):((StoveVertical+StoveIntervalY)(StoveCount/RowMaxCount+1)) );
			var temperid;//初始版图
			var Xlayout = 0; //炉子X轴起点
			var Ylayout = StoveIntervalY; //炉子Y轴起点
			var layoutCount = 0;//版图数
			var row=0;
			for (var i = 0; i < Datas.length; i++) {
			var dataTempered = Datas[i];

			var TerritoryWidth=dataTempered.loadwidth; //实际版图宽
			var TerritoryLength=dataTempered.loadlength;//实际版图长
			var TerritoryColor='#0DB637';//版图背景颜色

			var TerritoryCross=TerritoryWidth/Bli; //页面版图横向像素
			var TerritoryVertical=TerritoryLength/Bli;//页面版图纵向像素

			if (temperid != dataTempered.layoutid) {
			//画版图更改基础倍数
			if(layoutCount>0){
			Xlayout += StoveCross + StoveIntervalX;
			if (layoutCount %RowMaxCount== 0) {
			//换行
			Ylayout += StoveVertical+StoveIntervalY;
			Xlayout=0;
			row++;
			}
			}
			temperid=dataTempered.layoutid;
			layoutCount++;
			content.font ='bold '+Font1+'px Arial' ; //文字样式：加粗 16像素字体Arial
			content.fillStyle = '#000000'; //字体颜色
			content.textAlign = 'center'; //文字居中
			content.fillText((dataTempered.layoutid), (StoveCross / 2+ Xlayout), 50/2+(StoveVertical+50)*row+10);
			//炉子
			content.fillStyle = StoveColor;
			content.fillRect(Xlayout, Ylayout, StoveCross, StoveVertical);
			//版图
			content.fillStyle = TerritoryColor;
			content.fillRect(Xlayout, Ylayout, TerritoryCross, TerritoryVertical);
			}

			var Rx = dataTempered.xaxis / Bli + Xlayout;
			var Ry = dataTempered.yaxis / Bli + Ylayout;
			var Rwidth = dataTempered.width / Bli;
			var Rheight = dataTempered.height / Bli;
			var Xwidth;
			var Xheight;
			content.fillStyle = '#5CADFE';
			if (dataTempered.rotateangle != 0) {
			Xwidth = Rwidth;
			Xheight = Rheight;
			} else {
			Xwidth = Rheight;
			Xheight = Rwidth;
			}
			content.fillRect(Rx, Ry, Xwidth, Xheight);
			content.font = 'bold '+Font2+'px Arial' ; //文字样式：加粗 16像素字体Arial
			content.fillStyle = '#000000'; //字体颜色
			content.textAlign = 'center'; //文字居中

			content.fillText(('版图:'+dataTempered.layoutid+'-'+dataTempered.sort), (Xwidth / 2) + Rx, (Xheight) / 2 + Ry-Font2);
			content.fillText((dataTempered.width + ' * ' + dataTempered.height), (Xwidth / 2) + Rx, (Xheight) / 2 + Ry); //fillText里面的可填写的值(文本内容, x坐标, y坐标, 文本最大宽度)
			content.fillText((dataTempered.processid), (Xwidth / 2) + Rx, (Xheight) / 2 + Ry+Font2);
			//content.rotate(30*Math.PI/180);
			content.stroke();
			}
			}
			}
			}


			</script>



			<template>
			<div ref="content">
			<canvas ref="mycanvas"></canvas>
			</div>
			</template>

			<style scoped>
			#main {
			width: 100%;
			height: 100%;
			}



			#div-title {
			height: 5%;
			width: 100%;
			}

			#searchButton {
			margin-top: -5px;
			margin-left: 1rem;
			}

			#searchButton1 {
			/* margin-left: 10rem; */
			}

			/main-body样式/
			#main-body {
			width: 99%;
			height: 92%;
			margin-top: 1%;
			}

			#select {
			margin-left: 0.5rem;
			}

			:deep(.indexTag .el-breadcrumb__inner) {
			color: #5CADFE !important;
			}
			</style>