<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">
|
<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.reportName" autocomplete="off" />
|
</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="reportDialogForm = false">否</el-button>
|
<el-button type="primary" @click="reportDialogForm = false">
|
是
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive,onMounted } from "vue";
|
const name = ref("飞跃器整模型");
|
const reportDialogForm = ref(false)
|
const reportInfo = reactive({
|
reportName:'',
|
testTime: '',
|
})
|
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 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 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);
|
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>
|
