仿真测试页面，模型三位投影模块布局1修改

闫增涛

4 天以前 6227519a1bd9007aedae11b77b0b3b1851837c38

 src/views/simulation/testSimulation/index.vue

@@ -1,22 +1,26 @@
<template>
  <div class="simulation-index">
    <div class="flex ai-c">
      <el-select v-model="aircraftActive" placeholder="Select" style="width: 140px">
      <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"
          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.id"
          @click="handleClick(item)" 
          :class="item.id == modelTypeActive ? 'activeItem' : 'item'"
          :key="item.key"
          @click="handleClick(item)"
          :class="item.key == modelTypeActive ? 'activeItem' : 'item'"
        >
          {{ item.name }}
          {{ item.label }}
        </li>
      </ul>
    </div>
@@ -36,28 +40,39 @@
        <div class="model-body" v-loading="listLoading">
          <el-row :gutter="20" v-if="modelDataList.length > 0">
            <el-col
              :span="6"
              :span="5"
              v-for="(item, index) in modelDataList"
              :key="index"
            >
              <div class="model-body-box">
                <div class="model-img">
                  <img :src="item.icon" alt="" />
                  <!-- <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>
                    <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">
          <div v-if="noData">
            <el-empty :image-size="140" />
          </div>
        </div>
@@ -74,18 +89,20 @@
      <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()
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('1')
const aircraftActive = ref(0);
const modelTypeList = ref([
  {
    name: "着陆器",
@@ -104,77 +121,126 @@
const searchValue = ref();
const modelDataList = ref([]);
const listLoading = ref(false);
const detailDialogVisible = ref(false)
const detailDialogVisible = ref(false);
const parentChannel = ref({});
const toolClass: any = inject("toolClass");
const noData = ref<boolean>(false)
onMounted(() => {
  listLoading.value = true
  getAircraftList();
  getModelData();
});

const getAircraftList = () => {
  let list = [
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,
    {
      name: "嫦娥七号",
      id: "1",
      "SysType=": ["CmsChannel"],
    },
    {
      name: "其他型号",
      id: "2",
    },
  ];
  aircraftList.value = list;
      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 handleClick = (item) => {
  modelTypeActive.value = item.id
};
const getModelData = () => {
  listLoading.value = true;
  let list = [
//获取预览模型列表
const getModelList = async () => {
  listLoading.value = true
  const currentNode = modelTypeList.value.find(
    (item) => item.key == modelTypeActive.value
  );
  const treeData = await toolClass.getResourceItem(
    currentNode,
    seleStore.storeInfo,
    {
      name: "巡视器整模型",
      icon: "",
      id: "1",
      "SysType=": ["CmsItem"],
    },
    {
      name: "天线",
      icon: "",
      id: "2",
    },
    {
      name: "太阳翼",
      icon: "",
      id: "3",
    },
  ];
  modelDataList.value = list;
      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
  detailDialogVisible.value = true;
};
const handleClose = () =>{
  detailDialogVisible.value = false
}
const handleClose = () => {
  detailDialogVisible.value = false;
};
//查看测试报告
const gotoReport = (item) => {
  router.push({
    name: 'testReport',
    query: {
      id: item.id
    }
  })
    name: "simulation-testReport",
  });
};
//打开仿真
const gotoSimulation = (item) => {
  router.push({
    name: 'testSimulation-detail',
    name: "simulation-detail",
    query: {
      id: item.id
    }
  })
      id: item.name,
    },
  });
};

</script>
@@ -182,29 +248,36 @@
<style lang="less" scoped>
.simulation-index {
  padding: 20px;
  background-color: #fff;
  height: 100%;
}
.tabs{
.tabs {
  margin-left: 40px;
  li{
    width:60px;
  li {
    width: 70px;
    text-align: center;
    padding: 5px 0;
    margin:0 15px;
    margin: 0 15px;
    cursor: pointer;
    font-size: 14px;
  }
  .activeItem{
    border-bottom:2px solid #1890ff;
  .activeItem {
    border-bottom: 2px solid #1890ff;
  }
}
.page-box{
.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: 240px;
      height: 200px;

      img {
        width: 100%;