<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 aircraftList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
<ul class="flex tabs">
|
<li
|
v-for="item in modelTypeList"
|
:key="item.id"
|
@click="handleClick(item)"
|
:class="item.id == modelTypeActive ? 'activeItem' : 'item'"
|
>
|
{{ item.name }}
|
</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="6"
|
v-for="(item, index) in modelDataList"
|
:key="index"
|
>
|
<div class="model-body-box">
|
<div class="model-img">
|
<img :src="item.icon" alt="" />
|
</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="modelDataList.length == 0">
|
<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 } from "vue";
|
import { useRouter, useRoute } from 'vue-router'
|
const router = useRouter()
|
const route = useRoute()
|
|
const aircraftList = ref([]);
|
const aircraftActive = ref('1')
|
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)
|
onMounted(() => {
|
getAircraftList();
|
getModelData();
|
});
|
|
const getAircraftList = () => {
|
let list = [
|
{
|
name: "嫦娥七号",
|
id: "1",
|
},
|
{
|
name: "其他型号",
|
id: "2",
|
},
|
];
|
aircraftList.value = list;
|
};
|
|
const handleClick = (item) => {
|
modelTypeActive.value = item.id
|
};
|
const getModelData = () => {
|
listLoading.value = true;
|
let list = [
|
{
|
name: "巡视器整模型",
|
icon: "",
|
id: "1",
|
},
|
{
|
name: "天线",
|
icon: "",
|
id: "2",
|
},
|
{
|
name: "太阳翼",
|
icon: "",
|
id: "3",
|
},
|
];
|
modelDataList.value = list;
|
listLoading.value = false;
|
};
|
|
|
//查看属性
|
const gotoDetail = () => {
|
detailDialogVisible.value = true
|
};
|
const handleClose = () =>{
|
detailDialogVisible.value = false
|
}
|
//查看测试报告
|
const gotoReport = (item) => {
|
router.push({
|
name: 'testReport',
|
query: {
|
id: item.id
|
}
|
})
|
};
|
//打开仿真
|
const gotoSimulation = (item) => {
|
router.push({
|
name: 'testSimulation-detail',
|
query: {
|
id: item.id
|
}
|
})
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
.simulation-index {
|
padding: 20px;
|
}
|
.tabs{
|
margin-left: 40px;
|
li{
|
width:60px;
|
text-align: center;
|
padding: 5px 0;
|
margin:0 15px;
|
cursor: pointer;
|
}
|
.activeItem{
|
border-bottom:2px solid #1890ff;
|
}
|
}
|
.page-box{
|
margin-top: 20px;
|
}
|
.list {
|
margin-top: 20px;
|
.model-body-box {
|
border: 1px solid #f1f1f1;
|
.model-img {
|
height: 240px;
|
|
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>
|
