<!-- 物料资料 -->
|
|
|
<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>
|
