fl-web-component 0.1.0

package/packages/components/model/components/detect-tree.vue

@@ -0,0 +1,460 @@
+<template>
+  <div class="tree-box-item-card">
+    <!-- <el-input
+      placeholder="请输入位号"
+      v-model="filterVal"
+      clearable
+      maxlength="30"
+      class="input-with-pbs"
+      @clear="getTree"
+      @keyup.enter.native="queryPbs"
+    >
+      <i class="el-icon-search el-input__icon search-icon" slot="suffix" @click="queryPbs"> </i>
+    </el-input> -->
+
+    <!-- :render-content="renderContent" -->
+    <el-scrollbar>
+      <!-- @node-click="handleNodeClick" -->
+      <!-- @check="handleCheckChange" -->
+
+      <el-tree
+        ref="tree"
+        :data="formatTreeData"
+        node-key="id"
+        :expand-on-click-node="false"
+        :current-node-key="currentKey"
+        :props="defaultProps"
+        :highlight-current="true"
+        :default-expanded-keys="expanded"
+        empty-text="暂无数据"
+      >
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <span class="node-root" v-if="data.id == -1" :title="node.label">{{
+            node.label
+          }}</span>
+          <span
+            class="node-child"
+            v-else-if="node.isLeaf && data.id != -1"
+            :title="node.label"
+            >碰撞点位：{{ node.label }}</span
+          >
+          <span class="node-parent" v-else :title="node.label"
+            >本体：{{ node.label }}</span
+          >
+
+          <span v-if="data.id != -1">
+            <el-button
+              title="定位"
+              icon="el-icon-location-outline"
+              type="text"
+              @click="() => handleNodeClick(node, data, 'locate')"
+            >
+            </el-button>
+            <el-button
+              title="高亮"
+              style="margin: 0 5px"
+              icon="el-icon-s-opportunity"
+              type="text"
+              @click="() => handleNodeClick(node, data, 'highlight')"
+            >
+            </el-button>
+          </span>
+        </span>
+      </el-tree>
+    </el-scrollbar>
+  </div>
+</template>
+<script>
+import { proofInit, getPbsTree } from '../api/index';
+import { loading, loadingClose } from '../utils/index';
+
+var projectId = null;
+var timeout = null; //防抖时间戳
+var checkedArr = [];
+const proofInfo = {
+  // projectId: 566,
+  // stageId: 2,
+  projectId: 451,
+  stageId: 1,
+};
+let selectedIds = [];
+
+export default {
+  name: 'DetectTree',
+  props: {
+    folderId: {
+      type: String,
+      default() {
+        return '';
+      },
+    },
+    projectId: {
+      type: String,
+      default() {
+        return '';
+      },
+    },
+    version: {
+      type: String,
+      default: '',
+    },
+    flag: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    },
+    pbsVersion: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    treeData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      defaultProps: {
+        label: 'category',
+        children: 'detect',
+        // isLeaf: (data) => {
+        //   return !data.leaf
+        // },
+        // disabled: (data) => {
+        //   return data.type !== 0;
+        // }
+      },
+      currentKey: null,
+      expanded: [],
+      checkedArr: [],
+      node: '',
+      filterVal: '',
+    };
+  },
+  computed: {
+    formatTreeData() {
+      // let nodeCount = 0;
+      // this.treeData.forEach((item) => {
+      //   nodeCount += item.detect.length;
+      // });
+
+      const root = [
+        {
+          category: `碰撞检查树（总数：${this.treeData.length}）`,
+          detect: this.treeData,
+          id: -1,
+          objectid: '',
+        },
+      ];
+      return root;
+    },
+  },
+  watch: {
+    // folderId(val) {
+    //   if (val) this.getTree()
+    // },
+    // projectId(val) {
+    //   if (val) this.getTree()
+    // },
+    // flag(val) {
+    //   if (val) this.getTree()
+    // },
+  },
+  created() {
+    // proofInit(proofInfo).then(res => {
+    //   this.getTree()
+    // }).catch()
+    // console.log(this.pbsVersion)
+  },
+  methods: {
+    expandNodes(data) {
+      data.forEach((item) => {
+        this.expanded.push(item.nodeId);
+        if (item.children) {
+          item.children.forEach((childrenItem) => {
+            this.expanded.push(childrenItem.nodeId);
+            this.expandNodes(childrenItem.children);
+          });
+        }
+      });
+      return this.expanded;
+    },
+    formatTree(data) {
+      if (data.type !== 0) {
+        data.disabled = true;
+      } else {
+        data.disabled = false;
+      }
+      if (data.child) {
+        data.child.forEach((childrenItem) => {
+          this.formatTree(childrenItem);
+        });
+      }
+      return data;
+    },
+    // 获取pbs节点
+    getPbsTree(params) {
+      loading('加载中...');
+
+      getPbsTree(params)
+        .then((res) => {
+          // res = this.formatTree(res)
+
+          if (res) {
+            this.$set(this, 'treeData', [res]);
+            // this.$set(this, 'currentKey', [res])
+            // this.$nextTick(() => {
+            // this.scrollTo('2.441.2-MODELELEM-o.157.f.66dd4337-157')
+            // this.$refs.tree.setChecked(, true, true)
+            // this.handleCheckChange(this.$refs.tree.getNode(res.objectId).data)
+
+            // })
+          }
+        })
+        .catch(() => {
+          console.log('error');
+          this.treeData.splice(0);
+        })
+        .finally(() => {
+          loadingClose();
+        });
+    },
+    handleNodeClick(node, data, type) {
+      this.node = data;
+      type === 'locate' && this.$emit('locate', node, data);
+      type === 'highlight' && this.$emit('highlight', node, data);
+
+      // if (data.nodeType === 'Pbs') {
+      // 这个有待考究  需不需要传版本数据 data里面没有版本数据的字段
+      // this.getModelIdsByNodeIds(projectId, data, 'PbsClick')
+      // }
+    },
+    setChecked(entityId) {
+      modelApi
+        .PbsInfo(entityId, projectId)
+        .then((res) => {})
+        .catch((err) => {
+          this.$set(this, 'currentKey', '');
+          this.$refs.tree.setCurrentKey(null);
+          // this.$message({ type: 'error', message: err.msg })
+        });
+    },
+    // 选中节点
+    scrollTo(nodeId) {
+      this.$refs.tree.setCurrentKey(nodeId);
+      if (nodeId) {
+        this.expanded.push(nodeId);
+        this.$set(this, 'currentKey', nodeId);
+        this.$nextTick(() => {
+          const ele = document.querySelector('.is-current');
+          setTimeout(() => {
+            if (ele) {
+              ele.scrollIntoView({
+                block: 'center',
+                behavior: 'smooth',
+              });
+            }
+          }, 400);
+        });
+      } else {
+        this.$message({
+          type: 'warning',
+          message: '未关联Pbs节点',
+        });
+      }
+    },
+    //获取复选框选中得到的数据
+    handleCheckChange(data, node) {
+      // type 为0的是组节点 加载模型 10是模型 (定位) 14是专业
+      console.log(data, node);
+      const tree = this.$refs.tree;
+      console.log(tree.getNode(data));
+      const currentNode = tree.getNode(data);
+      const nodeData = currentNode.data;
+      if (currentNode.checked) {
+        this.selectAllChildren([nodeData]);
+      } else {
+        this.invertChildrenSelection([nodeData]);
+      }
+      // selectedIds = ['100']
+      console.log(selectedIds);
+      tree.setCheckedKeys(selectedIds);
+
+      if (data.type === 0) {
+        this.getModelIdsByNodeIds(projectId, selectedIds, 'checkChange');
+      }
+      // clearTimeout(timeout)
+      // // 过滤一下数据
+      // const checkedKeys = tree.getCheckedKeys();
+      // console.log(checkedKeys)
+      // // this.filterCheckArr(data)
+      // timeout = setTimeout(() => {
+      //   this.getModelIdsByNodeIds(projectId, checkedKeys, 'checkChange')
+      //   checkedKeys.splice(0)
+      // }, 500)
+    },
+    filterCheckArr(data) {
+      if (data.children.length === 0) {
+        checkedArr.push({
+          folderId: data.nodeFolderId,
+          nodeId: data.nodeId,
+          version: this.pbsVersion[data.nodeFolderId],
+        });
+      } else {
+        for (let index = 0; index < data.children.length; index++) {
+          this.filterCheckArr(data.children[index]);
+        }
+      }
+    },
+    // 获取当前选中的节点中所对应的模型信息集合
+    getModelIdsByNodeIds(projectId, nodes, type) {
+      // this.$emit('checkChange', nodes)
+      type === 'checkChange' && this.$emit('checkChange', nodes);
+      type === 'PbsClick' && this.$emit('pbsNodeClick', nodes);
+
+      // PbsApi.getModelIdsByNodeIds(projectId, parmas).then(res => {
+      //   // type === 'checkChange' && this.$emit('checkChange', this.formatterMsg(res))
+      //   // type === 'PbsClick' && this.$emit('PbsNodeClick', res, this.node)
+      //   this.$emit('PbsNodeClick', res, this.node)
+      // }).catch((err) => {
+      //   this.$message({
+      //     type: 'warning',
+      //     message: err.msg
+      //   })
+      // })
+    },
+    // 整合数据
+    formatterMsg(data) {
+      //整合数据以对象形式传递，{key:[]},key为titleName，[]是batchId去重后组成的数组
+      const batchIdObj = {};
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].batchIds) {
+          let batchIds = JSON.parse(data[i].batchIds);
+          for (let index = 0; index < batchIds.length; index++) {
+            const element = batchIds[index];
+            let modelPiece = element.titleName;
+            if (Object.keys(batchIdObj).includes(modelPiece)) {
+              !batchIdObj[modelPiece].batchIds.find(
+                (item) => item === element.batchId
+              ) && batchIdObj[modelPiece].batchIds.push(element.batchId);
+            } else {
+              batchIdObj[modelPiece] = {
+                folderId: '',
+                batchIds: [],
+              };
+              if (
+                !batchIdObj[modelPiece].batchIds.find(
+                  (item) => item === element.batchId
+                )
+              ) {
+                batchIdObj[modelPiece].batchIds.push(element.batchId);
+                batchIdObj[modelPiece].folderId = data[i].groupId;
+              }
+            }
+          }
+        }
+      }
+      return batchIdObj;
+    },
+    // 判断节点是否拥有子节点
+    hasChildren(data) {
+      return data.hasOwnProperty('child') && data.child.length > 0;
+    },
+    // 选中当前节点的所有子节点
+    selectAllChildren(items) {
+      const childIds = this.collectChildIdsRecursive(items);
+      selectedIds = [...new Set([...selectedIds, ...childIds])];
+    },
+    // 取消选中当前节点的所有子节点
+    invertChildrenSelection(items) {
+      const childIds = this.collectChildIdsRecursive(items);
+      selectedIds = selectedIds.filter((id) => !childIds.includes(id));
+    },
+    // 递归收集节点及其子节点的ID
+    collectChildIdsRecursive(items, result = []) {
+      items.forEach((item) => {
+        item.type === 0 && result.push(item.objectId);
+        if (this.hasChildren(item))
+          this.collectChildIdsRecursive(item.child, result);
+      });
+      return result;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-card__body {
+  height: 100%;
+  padding: 0;
+}
+
+::v-deep .el-tree {
+  margin-top: 10px;
+  height: 100%;
+  // color: #fff;
+  background: none;
+}
+
+::v-deep .el-tree__empty-text {
+  // color: #fff;
+  font-size: 12px;
+}
+
+::v-deep .el-tree-node__content:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+::v-deep .el-tree-node:focus > .el-tree-node__content {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.title {
+  font-size: 16px;
+}
+
+::v-deep .el-tree-node > .el-tree-node__children {
+  overflow: unset;
+}
+
+::v-deep .el-tree .is-disabled {
+  display: none;
+}
+
+::v-deep .el-tree--highlight-current
+  .el-tree-node.is-current
+  > .el-tree-node__content {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+.node-parent {
+  width: 173px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.node-child {
+  width: 155px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+::v-deep .el-scrollbar{
+  height: 739px;
+}
+</style>

package/packages/components/model/components/firstPer-panel.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <div class="key">
+      <span>漫游</span>
+      <div class="center">
+        <div class="top"><span>W</span></div>
+        <div class="cen">
+          <span>A</span>
+          <span>S</span>
+          <span>D</span>
+        </div>
+        <span class="text">W向前移动、S向后移动、A向左移动、D向右移动</span>
+      </div>
+    </div>
+    <div class="line"></div>
+    <div class="mouse">
+      <span>环视</span>
+      <div class="center">
+        <i class="iconfont icon-shubiao"></i>
+        <span class="text">鼠标控制方向</span>
+      </div>
+    </div>
+    <div class="line"></div>
+    <div class="quit">
+      <span>退出</span>
+      <div class="center">
+        <div class="cen"><span>Esc</span></div>
+        <span class="text">使用Esc键退出漫游</span>
+      </div>
+    </div>
+    <div class="button">
+      <el-button @click="start(false)">好的，知道了</el-button>
+      <el-button @click="start(true)" type="primary">不再提示</el-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'FirstPerPanel',
+  data() {
+    return {
+      
+    }
+  },
+  created() {
+  },
+  methods: {
+    start(val) {
+      this.$emit('start', val)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+span{
+  font-weight: bolder;
+}
+.text{
+  margin-top: 20px;
+}
+.line{
+  border-bottom: 1px solid #DCDFE6;
+  margin: 20px 0;
+}
+.center{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .top,.cen{
+    span{
+      color: #53a8ff;
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      text-align: center;
+      line-height: 30px;
+      border: 1px solid #53a8ff;
+      padding: 5px;
+      margin-bottom: 10px;
+      background-color: #E9F3FF;
+    }
+  }
+  .cen{
+    span{
+      margin: 10px;
+    }
+  }
+}
+.button{
+  display: flex;
+  justify-content: end;
+  margin-top: 20px;
+}
+@font-face {
+  font-family: "iconfont"; /* Project id 3226805 */
+  src: url('//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216') format('woff2'),
+       url('//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216') format('woff'),
+       url('//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216') format('truetype');
+}
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 50px;
+  font-style: normal;
+  color: #53a8ff;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon-shubiao:before {
+  content: "\e8a7";
+}
+</style>