<template>
|
<div class="simulation-result">
|
<div style="width: 100%; height: 100%; background: #fff" id="myDiv">
|
<div class="titleBox">
|
<div class="name">
|
<span>{{ name }}仿真</span>
|
<img
|
src="@/assets/images/icon/fullScreen.png"
|
@click="enlargeDiv('true')"
|
v-if="enlarge"
|
/>
|
<img
|
src="@/assets/images/icon/halfScreen.png"
|
@click="enlargeDiv('false')"
|
v-else
|
/>
|
</div>
|
<div class="back hover" @click="goBack">
|
<el-icon><ArrowLeftBold /></el-icon>返回
|
</div>
|
</div>
|
<div class="flex bodyBox">
|
<div class="modelBox"></div>
|
|
<div class="shadowBox">
|
<div id="shadowX">
|
<div class="title" style="padding: 5px 10px;">
|
<el-select
|
v-model="select_data"
|
placeholder="请选择投影位置"
|
size="large"
|
style="width: 200px"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<img
|
src="@/assets/images/icon/fullScreen.png"
|
@click="enlargeXDiv('true')"
|
v-if="enlargeX"
|
/>
|
<img
|
src="@/assets/images/icon/halfScreen.png"
|
@click="enlargeXDiv('false')"
|
v-else
|
/>
|
</div>
|
<div class="shadowX-body"></div>
|
</div>
|
<!-- <div id="shadowX">
|
<div class="title">
|
<span>X轴投影</span>
|
<img
|
src="@/assets/images/icon/fullScreen.png"
|
@click="enlargeXDiv('true')"
|
v-if="enlargeX"
|
/>
|
<img
|
src="@/assets/images/icon/halfScreen.png"
|
@click="enlargeXDiv('false')"
|
v-else
|
/>
|
</div>
|
<div class="shadowX-body"></div>
|
</div>
|
<div id="shadowY">
|
<div class="title">
|
<span>Y轴投影</span>
|
<img
|
src="@/assets/images/icon/fullScreen.png"
|
@click="enlargeYDiv('true')"
|
v-if="enlargeY"
|
/>
|
<img
|
src="@/assets/images/icon/halfScreen.png"
|
@click="enlargeYDiv('false')"
|
v-else
|
/>
|
</div>
|
<div class="shadowY-body"></div>
|
</div>
|
<div id="shadowZ">
|
<div class="title">
|
<span>Z轴投影</span>
|
<img
|
src="@/assets/images/icon/fullScreen.png"
|
@click="enlargeZDiv('true')"
|
v-if="enlargeZ"
|
/>
|
<img
|
src="@/assets/images/icon/halfScreen.png"
|
@click="enlargeZDiv('false')"
|
v-else
|
/>
|
</div>
|
<div class="shadowZ-body"></div>
|
</div> -->
|
</div>
|
</div>
|
<div class="flex operateBox" id="operateBox">
|
<div id="instruct">
|
<div class="title jc-sb">
|
<div class="title">
|
<span>指令</span>
|
<img
|
src="@/assets/images/icon/fullScreen.png"
|
@click="enlargeInstructDiv('true')"
|
v-if="enlargeI"
|
/>
|
<img
|
src="@/assets/images/icon/halfScreen.png"
|
@click="enlargeInstructDiv('false')"
|
v-else
|
/>
|
</div>
|
<div class="upBold">
|
<el-icon @click="operateBoxDiv('true')" v-if="operate"
|
><ArrowUpBold
|
/></el-icon>
|
<el-icon @click="operateBoxDiv('false')" v-else
|
><ArrowDownBold
|
/></el-icon>
|
</div>
|
</div>
|
<div class="instruct-body">
|
<div class="instruct-list">
|
<div v-for="(item, index) in instructList" :key="index">
|
>{{ item }}
|
</div>
|
</div>
|
<div class="inputBox">
|
<el-input
|
v-model="instructContent"
|
placeholder="请输入指令"
|
@keyup.enter="setInstruct"
|
/>
|
</div>
|
</div>
|
</div>
|
<div id="resize"></div>
|
<div id="log">
|
<div class="title jc-sb">
|
<div class="title">
|
<span>日志</span>
|
<img
|
src="@/assets/images/icon/fullScreen.png"
|
@click="enlargeLogDiv('true')"
|
v-if="enlargeL"
|
/>
|
<img
|
src="@/assets/images/icon/halfScreen.png"
|
@click="enlargeLogDiv('false')"
|
v-else
|
/>
|
</div>
|
<div class="upBold">
|
<el-icon @click="operateBoxDiv('true')" v-if="operate"
|
><ArrowUpBold
|
/></el-icon>
|
<el-icon @click="operateBoxDiv('false')" v-else
|
><ArrowDownBold
|
/></el-icon>
|
</div>
|
</div>
|
<div class="log-body">
|
<div class="log-list">
|
<div v-for="(item, index) in instructList" :key="index">
|
>{{ item }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog v-model="reportDialogForm" title="生成测试报告" width="500">
|
<el-form :model="reportInfo">
|
<el-form-item label="报告名称" label-width="100px">
|
<el-input v-model="reportInfo.TestName" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="备注" label-width="100px">
|
<el-input
|
v-model="reportInfo.ModelRemarks"
|
:rows="2"
|
type="textarea"
|
placeholder="请输入..."
|
/>
|
</el-form-item>
|
<el-form-item label="测试时间" label-width="100px">
|
<el-input v-model="reportInfo.testTime" autocomplete="off" disabled />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="backList">否</el-button>
|
<el-button type="primary" @click="generateTestReport"> 是 </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive, onMounted, inject } from "vue";
|
import { useRoute, useRouter } from "vue-router";
|
const name = ref("飞跃器整模型");
|
const reportDialogForm = ref(false);
|
const reportInfo = reactive({
|
TestName: "",
|
testTime: "",
|
ModelRemarks: "",
|
});
|
const enlarge = ref(true);
|
const enlargeX = ref(true);
|
const enlargeY = ref(true);
|
const enlargeZ = ref(true);
|
const enlargeI = ref(true);
|
const enlargeL = ref(true);
|
const instructContent = ref("");
|
const operate = ref(true);
|
const instructList = ref([]);
|
const logList = ref([]);
|
const typeInfo = ref();
|
const MG: any = inject("MG");
|
const toolClass: any = inject("toolClass");
|
const route = useRoute();
|
|
import { curStoreInfo } from "@/store/index";
|
import { ElMessage } from "element-plus";
|
import { label } from "three/tsl";
|
const seleStore = curStoreInfo();
|
const router = useRouter();
|
onMounted(() => {
|
getType();
|
});
|
const select_data = ref<any>('x');
|
const options = reactive<any[]>([
|
{
|
value: "x",
|
label: "x轴投影",
|
},
|
{
|
value: "y",
|
label: "y轴投影",
|
},
|
{
|
value: "z",
|
label: "z轴投影",
|
},
|
]);
|
|
//获取类型
|
const getType = async () => {
|
const type = await MG.dps5.GetTypeByRefCode({
|
refCodes: ["TestReport"],
|
});
|
const typeData = toolClass.handleTypeList(type);
|
console.log(typeData);
|
|
typeInfo.value = typeData[0];
|
};
|
|
const goBack = () => {
|
var time = new Date(Date.now());
|
var year = time.getFullYear();
|
var month = time.getMonth() + 1;
|
var day = time.getDate();
|
var hour = time.getHours();
|
var minute = time.getMinutes();
|
var second = time.getSeconds();
|
reportInfo.testTime =
|
year +
|
"-" +
|
(month < 10 ? "0" + month : month) +
|
"-" +
|
(day < 10 ? "0" + day : day) +
|
" " +
|
(hour < 10 ? "0" + hour : hour) +
|
":" +
|
(minute < 10 ? "0" + minute : minute) +
|
":" +
|
(second < 10 ? "0" + second : second);
|
reportDialogForm.value = true;
|
};
|
|
const backList = () => {
|
router.push({
|
path: "/simulation",
|
});
|
};
|
|
const generateTestReport = async () => {
|
console.log(route.query);
|
const TestModelField = typeInfo.value.typeLinkList[0].children.find(
|
(item: any) => item.typeField.refCode === "TestModel"
|
);
|
const TestNameField = typeInfo.value.typeLinkList[0].children.find(
|
(item: any) => item.typeField.refCode === "TestName"
|
);
|
const ModelRemarksField = typeInfo.value.typeLinkList[0].children.find(
|
(item: any) => item.typeField.refCode === "ModelRemarks"
|
);
|
|
const fieldList = [
|
{
|
baseType: TestModelField.typeField.baseType,
|
order: TestModelField.order,
|
link: {},
|
linkFiles: [],
|
addLinkItems: [],
|
strValue: route.query.id,
|
typeFieldId: TestModelField.typeField.id,
|
refCode: TestModelField.typeField.refCode,
|
sequenceNum: TestModelField.cfg.uuid,
|
},
|
{
|
baseType: TestNameField.typeField.baseType,
|
order: TestNameField.order,
|
link: {},
|
linkFiles: [],
|
addLinkItems: [],
|
strValue: reportInfo.TestName,
|
typeFieldId: TestNameField.typeField.id,
|
refCode: TestNameField.typeField.refCode,
|
sequenceNum: TestNameField.cfg.uuid,
|
},
|
{
|
baseType: ModelRemarksField.typeField.baseType,
|
order: ModelRemarksField.order,
|
link: {},
|
linkFiles: [],
|
addLinkItems: [],
|
strValue: reportInfo.ModelRemarks,
|
typeFieldId: ModelRemarksField.typeField.id,
|
refCode: ModelRemarksField.typeField.refCode,
|
sequenceNum: ModelRemarksField.cfg.uuid,
|
},
|
];
|
|
console.log(seleStore.testReportChannel, "seleStore.testReportChannel");
|
const params = {
|
accessModule: "",
|
accessPath: seleStore.testReportChannel.data.idPath,
|
accessStoreId: seleStore.storeInfo.storeId,
|
accessRepositoryId: seleStore.storeInfo.repositoryId,
|
accessItemId: seleStore.testReportChannel.data.id,
|
sysType: "CmsItem",
|
linkType: "TestReport",
|
cmsItemRequest: {
|
name: reportInfo.TestName,
|
description: reportInfo.ModelRemarks,
|
type: "Normal",
|
state: "Normal",
|
accessType: "Private",
|
cmsTypeId: typeInfo.value.id,
|
cmsItemDataList: fieldList,
|
linkCmsItemDataIds: [],
|
linkOrgIds: [1],
|
linkDepartmentIds: [1],
|
},
|
newProcessInstanceCmsItemRightsPointRequests: [],
|
};
|
const res = await MG.dps5.NewCmsItem(params);
|
reportDialogForm.value = false;
|
ElMessage({
|
message: "新建成功",
|
type: "success",
|
});
|
router.push({
|
path: "/simulation",
|
});
|
};
|
|
const enlargeDiv = (state) => {
|
let divStyle = document.getElementById("myDiv");
|
if (state == "true") {
|
enlarge.value = false;
|
let screenWidth = window.innerWidth; // 获取屏幕宽度
|
let screenHeight = window.innerHeight; // 获取屏幕高度
|
divStyle.style.width = screenWidth + "px"; // 设置宽度为屏幕宽度
|
divStyle.style.height = screenHeight + "px"; // 设置高度为屏幕高度
|
divStyle.style.left = "0"; // 设置左边距为0，使其从屏幕左侧开始
|
divStyle.style.top = "0"; // 设置顶部边距为0，使其从屏幕顶部开始
|
divStyle.style.position = "fixed"; // 使用fixed定位，确保覆盖整个屏幕
|
} else {
|
enlarge.value = true;
|
divStyle.style.width = "100%"; // 还原宽度
|
divStyle.style.height = "100%"; // 还原高度
|
divStyle.style.left = ""; // 清除左边距
|
divStyle.style.top = ""; // 清除顶部边距
|
divStyle.style.position = ""; // 清除定位属性
|
}
|
};
|
const enlargeXDiv = (state) => {
|
let divStyle = document.getElementById("shadowX");
|
if (state == "true") {
|
enlargeX.value = false;
|
let screenWidth = window.innerWidth;
|
let screenHeight = window.innerHeight;
|
divStyle.style.width = screenWidth + "px";
|
divStyle.style.height = screenHeight + "px";
|
divStyle.style.left = "0";
|
divStyle.style.top = "0";
|
divStyle.style.position = "fixed";
|
} else {
|
enlargeX.value = true;
|
divStyle.style.width = "100%";
|
divStyle.style.height = "calc((100% - 6px) / 3)";
|
divStyle.style.left = "";
|
divStyle.style.top = "";
|
divStyle.style.position = "";
|
}
|
};
|
const enlargeYDiv = (state) => {
|
let divStyle = document.getElementById("shadowY");
|
if (state == "true") {
|
enlargeY.value = false;
|
let screenWidth = window.innerWidth;
|
let screenHeight = window.innerHeight;
|
divStyle.style.width = screenWidth + "px";
|
divStyle.style.height = screenHeight + "px";
|
divStyle.style.left = "0";
|
divStyle.style.top = "0";
|
divStyle.style.position = "fixed";
|
} else {
|
enlargeY.value = true;
|
divStyle.style.width = "100%";
|
divStyle.style.height = "calc((100% - 6px) / 3)";
|
divStyle.style.left = "";
|
divStyle.style.top = "";
|
divStyle.style.position = "";
|
}
|
};
|
const enlargeZDiv = (state) => {
|
let divStyle = document.getElementById("shadowZ");
|
if (state == "true") {
|
enlargeZ.value = false;
|
let screenWidth = window.innerWidth;
|
let screenHeight = window.innerHeight;
|
divStyle.style.width = screenWidth + "px";
|
divStyle.style.height = screenHeight + "px";
|
divStyle.style.left = "0";
|
divStyle.style.top = "0";
|
divStyle.style.position = "fixed";
|
} else {
|
enlargeZ.value = true;
|
divStyle.style.width = "100%";
|
divStyle.style.height = "calc((100% - 6px) / 3)";
|
divStyle.style.left = "";
|
divStyle.style.top = "";
|
divStyle.style.position = "";
|
}
|
};
|
const enlargeInstructDiv = (state) => {
|
let divStyle = document.getElementById("instruct");
|
if (state == "true") {
|
enlargeI.value = false;
|
let screenWidth = window.innerWidth;
|
let screenHeight = window.innerHeight;
|
divStyle.style.width = screenWidth + "px";
|
divStyle.style.height = screenHeight + "px";
|
divStyle.style.left = "0";
|
divStyle.style.top = "0";
|
divStyle.style.position = "fixed";
|
} else {
|
enlargeI.value = true;
|
divStyle.style.width = "100%";
|
divStyle.style.height = "100%";
|
divStyle.style.left = "";
|
divStyle.style.top = "";
|
divStyle.style.position = "";
|
}
|
};
|
const enlargeLogDiv = (state) => {
|
let divStyle = document.getElementById("log");
|
if (state == "true") {
|
enlargeL.value = false;
|
let screenWidth = window.innerWidth;
|
let screenHeight = window.innerHeight;
|
divStyle.style.width = screenWidth + "px";
|
divStyle.style.height = screenHeight + "px";
|
divStyle.style.left = "0";
|
divStyle.style.top = "0";
|
divStyle.style.position = "fixed";
|
} else {
|
enlargeL.value = true;
|
divStyle.style.width = "100%";
|
divStyle.style.height = "100%";
|
divStyle.style.left = "";
|
divStyle.style.top = "";
|
divStyle.style.position = "";
|
}
|
};
|
|
const operateBoxDiv = (state) => {
|
let divStyle = document.getElementById("operateBox");
|
if (state == "true") {
|
operate.value = false;
|
divStyle.style.width = "100%";
|
divStyle.style.height = "calc(100% - 36px)";
|
divStyle.style.left = "0";
|
divStyle.style.top = "36px";
|
divStyle.style.position = "absolute";
|
} else {
|
operate.value = true;
|
divStyle.style.height = "calc(100% - 36px - 70%)";
|
divStyle.style.left = "";
|
divStyle.style.top = "";
|
divStyle.style.position = "";
|
}
|
};
|
|
const setInstruct = () => {
|
console.log(instructContent.value);
|
instructList.value.push(instructContent.value);
|
logList.value.push(instructContent.value);
|
instructContent.value = "";
|
};
|
|
onMounted(() => {
|
handleResize();
|
});
|
//指令日志框宽度拖拽
|
const handleResize = () => {
|
let operateDom = document.getElementById("operateBox");
|
let instructDom = document.getElementById("instruct");
|
let logDom = document.getElementById("log");
|
let resizeDom = document.getElementById("resize");
|
|
for (let i = 0; i < resizeDom.length; i++) {
|
// 鼠标按下事件
|
console.log(1);
|
resizeDom[i].onmousedown = function (e) {
|
//颜色改变提醒
|
resizeDom[i].style.background = "#f0f2f5";
|
var startX = e.clientX;
|
resizeDom[i].left = resizeDom[i].offsetLeft;
|
// 鼠标拖动事件
|
document.onmousemove = function (e) {
|
console.log(2);
|
var endX = e.clientX;
|
var moveLen = resizeDom[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
|
var maxT = operateDom[i].clientWidth - resizeDom[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
|
|
if (moveLen < 200) moveLen = 200; // 左边区域的最小宽度为32px
|
if (moveLen > maxT - 200) moveLen = maxT - 200; //右边区域最小宽度为150px
|
|
resizeDom[i].style.left = moveLen; // 设置左侧区域的宽度
|
for (let j = 0; j < instructDom.length; j++) {
|
instructDom[j].style.width = moveLen + "px";
|
logDom[j].style.width =
|
operateDom[i].clientWidth - moveLen - 10 + "px";
|
}
|
};
|
// 鼠标松开事件
|
document.onmouseup = function (evt) {
|
//颜色恢复
|
resizeDom[i].style.background = "#f0f2f5";
|
document.onmousemove = null;
|
document.onmouseup = null;
|
resizeDom[i].releaseCapture && resizeDom[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
|
};
|
resizeDom[i].setCapture && resizeDom[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
|
return false;
|
};
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.simulation-result {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
.titleBox {
|
height: 36px;
|
line-height: 36px;
|
background: #409eff;
|
position: relative;
|
.name {
|
display: flex;
|
justify-content: center; /* 水平居中 */
|
align-items: center;
|
img {
|
margin-left: 10px;
|
}
|
}
|
.back {
|
position: absolute;
|
left: 10px;
|
top: 0;
|
display: flex;
|
align-items: center;
|
color: #ffffff;
|
}
|
}
|
.title {
|
background: #409eff;
|
height: 36px;
|
display: flex;
|
align-items: center;
|
padding: 0 10px;
|
img {
|
margin-left: 10px;
|
}
|
}
|
.bodyBox {
|
height: 70%;
|
.modelBox {
|
width: 60%;
|
border: 1px solid #f1f1f1;
|
}
|
.shadowBox {
|
width: 40%;
|
}
|
#shadowX,
|
#shadowY,
|
#shadowZ {
|
background: #fff;
|
//height: calc((100% - 6px) / 3);
|
height: 100%;
|
border: 1px solid #f1f1f1;
|
}
|
}
|
.operateBox {
|
height: calc(100% - 36px - 70%);
|
box-sizing: border-box;
|
overflow: hidden;
|
#instruct,
|
#log {
|
background: #fff;
|
border: 1px solid #f1f1f1;
|
width: calc((100% - 4px) / 2);
|
height: 100%;
|
box-sizing: border-box;
|
float: left;
|
}
|
#resize {
|
width: 3px;
|
position: relative;
|
cursor: col-resize;
|
background-size: cover;
|
background-position: center;
|
&:hover {
|
background: #45a3ff;
|
}
|
}
|
|
.upBold {
|
display: flex;
|
align-items: center;
|
color: #fff;
|
}
|
|
.instruct-body {
|
height: calc(100% - 36px);
|
position: relative;
|
.instruct-list {
|
height: calc(100% - 52px);
|
overflow-y: auto;
|
padding: 10px;
|
}
|
.inputBox {
|
width: 100%;
|
position: absolute;
|
bottom: 0;
|
}
|
}
|
.log-body {
|
height: calc(100% - 36px);
|
.log-list {
|
height: calc(100% - 20px);
|
overflow-y: auto;
|
padding: 10px;
|
}
|
}
|
}
|
</style>
|
