fl-web-component 0.1.0 → 1.0.0

package/packages/components/model/components/header-button.vue

@@ -1,37 +1,22 @@
 <template>
   <div class="header-button">
-    <el-tooltip
-        class="item"
-        effect="dark"
-        content="返回"
-        placement="top-start"
-      >
+    <el-tooltip class="item" effect="dark" content="返回" placement="top-start">
       <el-button class="back" size="small" @click="$router.go(-1)" icon="el-icon-back"></el-button>
     </el-tooltip>
     <div class="left">
-      <el-tooltip
-        class="item"
-        effect="dark"
-        content="PBS树"
-        placement="top-start"
-      >
+      <el-tooltip class="item" effect="dark" content="PBS树" placement="top-start">
         <div
           :class="[
             'btn-item',
             'pbstree',
             btnActived['pbsTree'] ? 'el-button-actived' : '',
-            proofingModel ? '' : 'icon-disabeld'
+            proofingModel ? '' : 'icon-disabeld',
           ]"
           @click="rightOperation('pbsTree')"
         ></div>
       </el-tooltip>
       <div class="split-line"></div>
-      <el-tooltip
-        class="item"
-        effect="dark"
-        content="属性"
-        placement="top-start"
-      >
+      <el-tooltip class="item" effect="dark" content="属性" placement="top-start">
         <div
           :class="[
             'btn-item',
@@ -40,41 +25,29 @@
             proofingModel ? '' : 'icon-disabeld',
           ]"
           @click="rightOperation('property')"
-          style="margin-right: 0px;"
+          style="margin-right: 0px"
         ></div>
       </el-tooltip>
     </div>
     <div class="left">
-      <el-tooltip
-        class="item"
-        effect="dark"
-        content="校审"
-        placement="top-start"
-      >
+      <el-tooltip class="item" effect="dark" content="校审" placement="top-start">
         <div
           :class="[
             'btn-item',
             'proof',
             btnActived['proof'] ? 'el-button-actived' : '',
             proofingModel ? '' : 'icon-disabeld',
-
           ]"
           @click="rightOperation('proof')"
         ></div>
       </el-tooltip>
-      <el-tooltip
-        class="item"
-        effect="dark"
-        content="碰撞检查"
-        placement="top-start"
-      >
+      <el-tooltip class="item" effect="dark" content="碰撞检查" placement="top-start">
         <div
           :class="[
             'btn-item',
             'detect',
             btnActived['detect'] ? 'el-button-actived' : '',
             proofingModel ? '' : 'icon-disabeld',
-
           ]"
           @click="rightOperation('detect')"
         ></div>
@@ -95,17 +68,11 @@
             'popover-layout',
             btnActived['clip'] ? 'el-button-actived' : '',
             proofingModel ? '' : 'icon-disabeld',
-
           ]"
           @click="clickClip('clipping')"
         >
           <div class="popover-container" v-if="openClipping">
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="全局剖切"
-              placement="top-start"
-            >
+            <el-tooltip class="item" effect="dark" content="全局剖切" placement="top-start">
               <div
                 :class="[
                   'btn-item',
@@ -132,87 +99,44 @@
             'popover-layout',
             btnActived['measure'] ? 'el-button-actived' : '',
             proofingModel ? '' : 'icon-disabeld',
-
           ]"
           @click="clickMeasure('measure')"
         >
           <div class="popover-container" v-if="openMeasure">
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="长度"
-              placement="top-start"
-            >
+            <el-tooltip class="item" effect="dark" content="长度" placement="top-start">
               <div
-                :class="[
-                  'btn-item',
-                  'distance',
-                  btnActived['distance'] ? 'el-button-actived' : '',
-                ]"
+                :class="['btn-item', 'distance', btnActived['distance'] ? 'el-button-actived' : '']"
                 @click.stop="rightOperation('distance')"
               ></div
             ></el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="面积"
-              placement="top-start"
-            >
+            <el-tooltip class="item" effect="dark" content="面积" placement="top-start">
               <div
-                :class="[
-                  'btn-item',
-                  'area',
-                  btnActived['area'] ? 'el-button-actived' : '',
-                ]"
+                :class="['btn-item', 'area', btnActived['area'] ? 'el-button-actived' : '']"
                 @click.stop="rightOperation('area')"
               ></div
             ></el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="角度"
-              placement="top-start"
-            >
+            <el-tooltip class="item" effect="dark" content="角度" placement="top-start">
               <div
-                :class="[
-                  'btn-item',
-                  'angle',
-                  btnActived['angle'] ? 'el-button-actived' : '',
-                ]"
+                :class="['btn-item', 'angle', btnActived['angle'] ? 'el-button-actived' : '']"
                 @click.stop="rightOperation('angle')"
               ></div
             ></el-tooltip>
           </div>
         </div>
       </el-tooltip>
-      <el-tooltip
-        class="item"
-        effect="dark"
-        content="批注"
-        placement="top-start"
-      >
+      <el-tooltip class="item" effect="dark" content="批注" placement="top-start">
         <div
-          :class="[
-            'btn-item',
-            'annotate',
-            btnActived['annotate'] ? 'el-button-actived' : '',
-          ]"
+          :class="['btn-item', 'annotate', btnActived['annotate'] ? 'el-button-actived' : '']"
           @click="rightOperation('annotate')"
         ></div>
       </el-tooltip>
-      <el-tooltip
-        class="item"
-        effect="dark"
-        content="第一视角"
-        placement="top-start"
-      >
+      <el-tooltip class="item" effect="dark" content="第一视角" placement="top-start">
         <div
           :class="[
             'btn-item',
             'first-person',
             btnActived['firstPerson'] ? 'el-button-actived' : '',
             proofingModel ? '' : 'icon-disabeld',
-
           ]"
           @click="rightOperation('first-person')"
         ></div>
@@ -262,10 +186,10 @@ export default {
         };
       },
     },
-    proofingModel:{
+    proofingModel: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   data() {
     return {
@@ -308,8 +232,8 @@ export default {
       this.rightType = '';
     },
     rightOperation(name) {
-      if(!this.proofingModel){
-        return
+      if (!this.proofingModel) {
+        return;
       }
       // this.rightType = this.rightType === name ? '': name
       this.btnActived[name] = !this.btnActived[name];
@@ -321,26 +245,26 @@ export default {
       this.$parent.leftInformation(reveal, conceal);
     },
     clickClip(type) {
-      if(!this.proofingModel){
-        return
+      if (!this.proofingModel) {
+        return;
       }
 
       type === this.type ? (this.type = '') : (this.type = type);
       this.openClipping = !this.openClipping;
-      if(this.openMeasure){
-        this.openMeasure = false
+      if (this.openMeasure) {
+        this.openMeasure = false;
       }
       this.rightOperation(type);
     },
     clickMeasure(type) {
-      if(!this.proofingModel){
-        return
+      if (!this.proofingModel) {
+        return;
       }
 
       type === this.type ? (this.type = '') : (this.type = type);
       this.openMeasure = !this.openMeasure;
-      if(this.openClipping){
-        this.openClipping = false
+      if (this.openClipping) {
+        this.openClipping = false;
       }
       this.rightOperation(type);
     },
@@ -512,10 +436,10 @@ export default {
 .pbstree {
   background-image: url('../../../assets/proof/pbstree@2x.png');
 }
-.icon-disabeld{
+.icon-disabeld {
   cursor: not-allowed;
 }
-.back{
+.back {
   margin: 0 25px 0 10px;
   padding: 12px;
   border: 1px solid #ddd;

package/packages/components/model/components/imageViewer/index.vue

@@ -19,7 +19,7 @@
         <i class="image-icon el-icon-picture-outline"></i>
       </div>
     </div>
-    <img v-else :src="imageUrl" ref="image" @wheel="onWheel"/>
+    <img v-else :src="imageUrl" ref="image" @wheel="onWheel" />
   </div>
 </template>
 
@@ -28,12 +28,12 @@ export default {
   props: {
     imageUrl: {
       type: String,
-      require: true
+      require: true,
     },
     isErrorImage: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
@@ -46,53 +46,53 @@ export default {
       dragSpeed: 0.3, // 拖拽速度
       zoomSpeed: 0.1, //控制缩放速度
       maxScale: 5, //最大缩放值
-      minScale: 0.1 //最小缩放值
-    }
+      minScale: 0.1, //最小缩放值
+    };
   },
   methods: {
     // 鼠标按下事件处理函数
     onMouseDown(e) {
-      e.preventDefault()
-      this.isDragging = true
-      this.startX = e.clientX
-      this.startY = e.clientY
-      this.$refs.image.style.cursor = 'grabbing'
+      e.preventDefault();
+      this.isDragging = true;
+      this.startX = e.clientX;
+      this.startY = e.clientY;
+      this.$refs.image.style.cursor = 'grabbing';
     },
     // 鼠标移动事件处理函数
     onMouseMove(e) {
-      if (!this.isDragging) return
-      const deltaX = (e.clientX - this.startX) * this.dragSpeed
-      const deltaY = (e.clientY - this.startY) * this.dragSpeed
-      this.translateX += deltaX
-      this.translateY += deltaY
-      this.$refs.image.style.transform = `scale(${this.currentScale}) translate(${this.translateX}px, ${this.translateY}px)`
-      this.startX = e.clientX
-      this.startY = e.clientY
+      if (!this.isDragging) return;
+      const deltaX = (e.clientX - this.startX) * this.dragSpeed;
+      const deltaY = (e.clientY - this.startY) * this.dragSpeed;
+      this.translateX += deltaX;
+      this.translateY += deltaY;
+      this.$refs.image.style.transform = `scale(${this.currentScale}) translate(${this.translateX}px, ${this.translateY}px)`;
+      this.startX = e.clientX;
+      this.startY = e.clientY;
     },
     // 鼠标松开事件处理函数
     onMouseUp() {
-      this.isDragging = false
-      this.$refs.image.style.cursor = 'grab'
+      this.isDragging = false;
+      this.$refs.image.style.cursor = 'grab';
     },
     // 鼠标滚轮事件处理函数
     onWheel(e) {
-      e.preventDefault()
-      const delta = e.deltaY > 0 ? -1 : 1
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -1 : 1;
       this.currentScale = Math.min(
         this.maxScale,
-        Math.max(this.minScale, this.currentScale + delta * this.zoomSpeed)
-      )
-      this.$refs.image.style.transform = `scale(${this.currentScale}) translate(${this.translateX}px, ${this.translateY}px)`
+        Math.max(this.minScale, this.currentScale + delta * this.zoomSpeed),
+      );
+      this.$refs.image.style.transform = `scale(${this.currentScale}) translate(${this.translateX}px, ${this.translateY}px)`;
     },
     // 重置图片缩放和移动
     resetImage() {
-      this.currentScale = 1
-      this.translateX = 0
-      this.translateY = 0
-      this.$refs.image.style.transform = 'scale(1) translate(0, 0)'
-    }
-  }
-}
+      this.currentScale = 1;
+      this.translateX = 0;
+      this.translateY = 0;
+      this.$refs.image.style.transform = 'scale(1) translate(0, 0)';
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -120,8 +120,7 @@ img {
   object-fit: contain !important;
 }
 
-.image-icon{
+.image-icon {
   font-size: 50px;
-  
 }
 </style>

package/packages/components/model/components/import-model.vue

@@ -1,127 +1,127 @@
-<template>
-  <div>
-    <div class="trigger-button">
-      <el-tooltip
-        class="item"
-        effect="dark"
-        content="已存在模型和校审数据，不可更换模型"
-        placement="top-start"
-        :disabled="!disabledBtn"
-      >
-        <el-button type="text" @click="triggerDialog" :disabled="disabledBtn"
-          ><i class="pre-img"></i>载入模型</el-button
-        >
-      </el-tooltip>
-    </div>
-    <com-dialog
-      v-if="dialogVisible"
-      dialog-title="载入模型"
-      :visible="dialogVisible"
-      :popup-width="'25%'"
-      @handleClose="handleClose"
-      @submitDialogData="submitDialogData"
-    >
-      <el-form ref="form" :model="dialogForm" :rules="formRules">
-        <el-form-item label="链接" prop="url">
-          <el-input v-model="dialogForm.url"></el-input>
-        </el-form-item>
-      </el-form>
-    </com-dialog>
-  </div>
-</template>
-
-<script>
-import * as modelApi from '../api/index';
-
-export default {
-  name: 'importModel',
-  data() {
-    return {
-      dialogVisible: false,
-      dialogForm: {
-        url: '',
-      },
-      formRules: {
-        url: [{ required: true, message: '请输入链接', trigger: 'blur' }],
-      },
-      disabledBtn: true,
-    };
-  },
-  props: {
-    defaultParams: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-  },
-  created() {
-    this.dialogForm.projectId = this.defaultParams.projectId;
-  },
-  components: {
-    ComDialog: () => import('./com-dialogWrapper'),
-  },
-  methods: {
-    triggerDialog() {
-      this.dialogVisible = !this.dialogVisible;
-    },
-    /* 弹窗 修改是否让页面显示与隐藏的事件 */
-    updateVisible(val) {
-      this.dialogVisible = val;
-    },
-    /* 弹窗 确认 操作 */
-    submitDialogData() {
-      this.$refs.form.validate((vaild) => {
-        if (vaild) {
-          modelApi
-            .loadProofModel(this.dialogForm)
-            .then((res) => {
-              if (res.code === 200) {
-                this.dialogVisible = false;
-                this.$message({ type: 'success', message: '模型载入成功' });
-                setTimeout(() => {
-                  this.$emit('viewVersion', null);
-                }, 1000);
-              }
-            })
-            .catch((err) => {
-              console.log(err);
-              // this.$message({ type: 'error', message: err.msg })
-            });
-        } else {
-          console.log('error submit');
-        }
-      });
-    },
-    /* 弹窗 关闭 操作 */
-    handleClose() {
-      this.resetForm();
-      this.dialogVisible = false;
-    },
-    resetForm() {
-      this.$refs.form.resetFields();
-    },
-    ableBtn() {
-      this.disabledBtn = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-::v-deep .trigger-button {
-  span {
-    display: flex;
-    align-items: center;
-    color: #2e3136;
-  }
-
-  .pre-img {
-    background-image: url('../../../assets/proof/import_model@2x.png');
-    width: 30px;
-    height: 30px;
-    display: inline-block;
-    background-size: cover;
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="trigger-button">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="已存在模型和校审数据，不可更换模型"
+        placement="top-start"
+        :disabled="!disabledBtn"
+      >
+        <el-button type="text" @click="triggerDialog" :disabled="disabledBtn"
+          ><i class="pre-img"></i>载入模型</el-button
+        >
+      </el-tooltip>
+    </div>
+    <com-dialog
+      v-if="dialogVisible"
+      dialog-title="载入模型"
+      :visible="dialogVisible"
+      :popup-width="'25%'"
+      @handleClose="handleClose"
+      @submitDialogData="submitDialogData"
+    >
+      <el-form ref="form" :model="dialogForm" :rules="formRules">
+        <el-form-item label="链接" prop="url">
+          <el-input v-model="dialogForm.url"></el-input>
+        </el-form-item>
+      </el-form>
+    </com-dialog>
+  </div>
+</template>
+
+<script>
+import * as modelApi from '../api/index';
+
+export default {
+  name: 'importModel',
+  data() {
+    return {
+      dialogVisible: false,
+      dialogForm: {
+        url: '',
+      },
+      formRules: {
+        url: [{ required: true, message: '请输入链接', trigger: 'blur' }],
+      },
+      disabledBtn: true,
+    };
+  },
+  props: {
+    defaultParams: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  created() {
+    this.dialogForm.projectId = this.defaultParams.projectId;
+  },
+  components: {
+    ComDialog: () => import('./com-dialogWrapper'),
+  },
+  methods: {
+    triggerDialog() {
+      this.dialogVisible = !this.dialogVisible;
+    },
+    /* 弹窗 修改是否让页面显示与隐藏的事件 */
+    updateVisible(val) {
+      this.dialogVisible = val;
+    },
+    /* 弹窗 确认 操作 */
+    submitDialogData() {
+      this.$refs.form.validate((vaild) => {
+        if (vaild) {
+          modelApi
+            .loadProofModel(this.dialogForm)
+            .then((res) => {
+              if (res.code === 200) {
+                this.dialogVisible = false;
+                this.$message({ type: 'success', message: '模型载入成功' });
+                setTimeout(() => {
+                  this.$emit('viewVersion', null);
+                }, 1000);
+              }
+            })
+            .catch((err) => {
+              console.log(err);
+              // this.$message({ type: 'error', message: err.msg })
+            });
+        } else {
+          console.log('error submit');
+        }
+      });
+    },
+    /* 弹窗 关闭 操作 */
+    handleClose() {
+      this.resetForm();
+      this.dialogVisible = false;
+    },
+    resetForm() {
+      this.$refs.form.resetFields();
+    },
+    ableBtn() {
+      this.disabledBtn = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .trigger-button {
+  span {
+    display: flex;
+    align-items: center;
+    color: #2e3136;
+  }
+
+  .pre-img {
+    background-image: url('../../../assets/proof/import_model@2x.png');
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    background-size: cover;
+  }
+}
+</style>