<template>
|
<div class="simulation-index">
|
<div class="flex ai-c">
|
<el-select
|
v-model="aircraftActive"
|
placeholder="Select"
|
style="width: 140px"
|
>
|
<el-option
|
v-for="item in seleStore.channelList"
|
:key="item.key"
|
:label="item.label"
|
:value="item.key"
|
/>
|
</el-select>
|
<ul class="flex tabs">
|
<li
|
v-for="item in modelTypeList"
|
:key="item.key"
|
@click="handleClick(item)"
|
:class="item.key == modelTypeActive ? 'activeItem' : 'item'"
|
>
|
{{ item.label }}
|
</li>
|
</ul>
|
</div>
|
<div class="page-box">
|
<div class="search">
|
<el-input
|
v-model="searchValue"
|
style="width: 400px"
|
placeholder="请输入搜索关键字"
|
>
|
<template #suffix>
|
<el-icon class="el-input__icon"><search /></el-icon>
|
</template>
|
</el-input>
|
</div>
|
<div class="list">
|
<div class="model-body" v-loading="listLoading">
|
<el-row :gutter="20" v-if="modelDataList.length > 0">
|
<el-col
|
:span="5"
|
v-for="(item, index) in modelDataList"
|
:key="index"
|
>
|
<div class="model-body-box">
|
<div class="model-img">
|
<!-- <iframe
|
style="width: 100%; height: 100%"
|
src="./static/modelView/index.html?md5=62d4eadc420b7403fce2be993baa095d&name=飞行棋&domain=https://www.jlstp.cn&target=iframe"
|
frameborder="0"
|
></iframe> -->
|
<showModel :md5="item.md5" :index="index"></showModel>
|
</div>
|
<div class="model-info">
|
<h1 class="model-title" :title="item.name">
|
{{ item.name }}
|
</h1>
|
<p class="flex jc-sb">
|
<span class="attribute hover" @click="gotoDetail(item)"
|
>属性</span
|
>
|
<span class="report hover" @click="gotoReport(item)"
|
>测试报告</span
|
>
|
<span class="simulation hover" @click="gotoSimulation(item)"
|
>仿真</span
|
>
|
</p>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<div v-if="noData">
|
<el-empty :image-size="140" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog
|
v-model="detailDialogVisible"
|
title="属性"
|
width="500"
|
:before-close="handleClose"
|
>
|
<div>
|
<div>名称：巡视器整模型</div>
|
<div>尺寸：巡视器整模型</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted, watch, inject } from "vue";
|
import { useRouter, useRoute } from "vue-router";
|
import showModel from "../../../components/showModel.vue";
|
const router = useRouter();
|
const route = useRoute();
|
import { curStoreInfo } from "@/store/index";
|
const seleStore = curStoreInfo();
|
|
const aircraftList = ref([]);
|
const aircraftActive = ref(0);
|
const modelTypeList = ref([
|
{
|
name: "着陆器",
|
id: "2",
|
},
|
{
|
name: "巡视器",
|
id: "3",
|
},
|
{
|
name: "飞跃器",
|
id: "4",
|
},
|
]);
|
const modelTypeActive = ref("3");
|
const searchValue = ref();
|
const modelDataList = ref([]);
|
const listLoading = ref(false);
|
const detailDialogVisible = ref(false);
|
const parentChannel = ref({});
|
const toolClass: any = inject("toolClass");
|
const noData = ref<boolean>(false)
|
onMounted(() => {
|
listLoading.value = true
|
getAircraftList();
|
});
|
|
watch(
|
() => parentChannel.value, // 监听 reactive 对象（默认深度监听）
|
(newVal) => {
|
console.log(newVal, "parentChannel");
|
if (newVal) {
|
getChildChannelList();
|
}
|
}
|
);
|
watch(
|
() => modelTypeActive.value, // 监听 reactive 对象（默认深度监听）
|
(newVal) => {
|
console.log(newVal, "modelTypeActive");
|
if (newVal) {
|
getModelList();
|
}
|
}
|
);
|
|
//获取子级频道列表
|
const getChildChannelList = async () => {
|
const treeData = await toolClass.getResourceItem(
|
parentChannel.value,
|
seleStore.storeInfo,
|
{
|
"SysType=": ["CmsChannel"],
|
},
|
{
|
ChildrenCount: [],
|
}
|
);
|
if (treeData && treeData.datas.length > 0) {
|
const fomartData = toolClass.handleTreeData(
|
treeData.datas,
|
parentChannel.value,
|
false
|
);
|
console.log(fomartData, "fomartData");
|
modelTypeList.value = fomartData;
|
modelTypeActive.value = fomartData[0].key;
|
}
|
};
|
|
//获取预览模型列表
|
const getModelList = async () => {
|
listLoading.value = true
|
const currentNode = modelTypeList.value.find(
|
(item) => item.key == modelTypeActive.value
|
);
|
const treeData = await toolClass.getResourceItem(
|
currentNode,
|
seleStore.storeInfo,
|
{
|
"SysType=": ["CmsItem"],
|
},
|
{
|
ModelName: [],
|
ModelFile: [],
|
JointData: [],
|
IsSimulation: [],
|
ModelRemarks: [],
|
ChildrenCount: [],
|
}
|
);
|
for (let index = 0; index < treeData.datas.length; index++) {
|
const item = treeData.datas[index];
|
item.md5 = null;
|
try {
|
const fileData = item.fieldList.find((citem: any) => citem.FileList.length);
|
item.md5 = fileData.FileList[0].File.Md5;
|
} catch (error) {}
|
}
|
if(!treeData.datas.length) noData.value = true
|
modelDataList.value = treeData.datas;
|
listLoading.value = false;
|
};
|
|
const getAircraftList = () => {
|
console.log(seleStore.channelList, "seleStore.channelList");
|
if (seleStore.channelList && seleStore.channelList.length > 0) {
|
aircraftList.value = seleStore.channelList;
|
aircraftActive.value = seleStore.channelList[0].key;
|
parentChannel.value = seleStore.channelList[0];
|
}
|
};
|
|
const handleClick = (item) => {
|
modelTypeActive.value = item.key;
|
};
|
|
//查看属性
|
const gotoDetail = () => {
|
detailDialogVisible.value = true;
|
};
|
const handleClose = () => {
|
detailDialogVisible.value = false;
|
};
|
//查看测试报告
|
const gotoReport = (item) => {
|
router.push({
|
name: "simulation-testReport",
|
});
|
};
|
//打开仿真
|
const gotoSimulation = (item) => {
|
router.push({
|
name: "simulation-detail",
|
query: {
|
id: item.name,
|
},
|
});
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
.simulation-index {
|
padding: 20px;
|
background-color: #fff;
|
height: 100%;
|
}
|
.tabs {
|
margin-left: 40px;
|
li {
|
width: 70px;
|
text-align: center;
|
padding: 5px 0;
|
margin: 0 15px;
|
cursor: pointer;
|
font-size: 14px;
|
}
|
.activeItem {
|
border-bottom: 2px solid #1890ff;
|
}
|
}
|
.page-box {
|
margin-top: 20px;
|
}
|
.list {
|
margin-top: 20px;
|
.model-body-box {
|
border: 1px solid #f1f1f1;
|
min-height:300px;
|
.jc-sb {
|
margin-top: 20px;
|
}
|
.model-img {
|
height: 200px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
|
.model-info {
|
height: 80px;
|
padding: 20px;
|
.model-title {
|
font-size: 16px;
|
}
|
p {
|
line-height: 30px;
|
font-size: 16px;
|
}
|
.attribute {
|
color: #1890ff;
|
}
|
.report {
|
color: #1fbc1f;
|
}
|
.simulation {
|
color: #ee1818;
|
}
|
}
|
}
|
}
|
</style>
|
