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

闫增涛

3 天以前 6227519a1bd9007aedae11b77b0b3b1851837c38

 src/views/simulation/testSimulation/detail.vue

@@ -16,13 +16,42 @@
          />
        </div>
        <div class="back hover" @click="goBack">
          <el-icon ><ArrowLeftBold /></el-icon>返回
          <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
@@ -69,7 +98,7 @@
              />
            </div>
            <div class="shadowZ-body"></div>
          </div>
          </div> -->
        </div>
      </div>
      <div class="flex operateBox" id="operateBox">
@@ -151,31 +180,39 @@
  <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-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-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>
        <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 } from "vue";
import { ref, reactive, onMounted, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
const name = ref("飞跃器整模型");
const reportDialogForm = ref(false)
const reportDialogForm = ref(false);
const reportInfo = reactive({
  reportName:'',
  testTime: '',
})
  TestName: "",
  testTime: "",
  ModelRemarks: "",
});
const enlarge = ref(true);
const enlargeX = ref(true);
const enlargeY = ref(true);
@@ -186,20 +223,156 @@
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();

const goBack =()=>{
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
  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");
@@ -347,7 +520,6 @@
  instructContent.value = "";
};


onMounted(() => {
  handleResize();
});
@@ -359,41 +531,42 @@
  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
    // 鼠标按下事件
    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>

@@ -448,7 +621,8 @@
  #shadowY,
  #shadowZ {
    background: #fff;
    height: calc((100% - 6px) / 3);
    //height: calc((100% - 6px) / 3);
    height: 100%;
    border: 1px solid #f1f1f1;
  }
}