fl-web-component 0.1.1 → 1.0.1

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

@@ -27,7 +27,7 @@
 
 <script>
 export default {
-  name: "TextOverTooltip",
+  name: 'TextOverTooltip',
   props: {
     // 显示的文字内容
     content: {
@@ -42,12 +42,12 @@ export default {
     // 默认主题
     effect: {
       type: String,
-      default: "dark",
+      default: 'dark',
     },
     // tooltip 出现的位置
     placement: {
       type: String,
-      default: "top",
+      default: 'top',
     },
   },
   data() {

package/packages/components/model/components/annotation-toolbar.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="toolbar">
-    <el-tooltip
-      class="item"
-      effect="dark"
-      content="提示：双击空白处输入文字"
-      placement="top-start"
-    >
+    <el-tooltip class="item" effect="dark" content="提示：双击空白处输入文字" placement="top-start">
       <el-button
         type="text"
         class="icon_toolbar icon_title"
@@ -43,12 +38,7 @@
       title="橡皮擦"
       @click="handleDrawCanvas({ cursor: 'eraser', type: 'Rubber' })"
     />
-    <el-popover
-      popper-class="toolbar_stroke-width"
-      placement="top"
-      width="100"
-      v-model="visible"
-    >
+    <el-popover popper-class="toolbar_stroke-width" placement="top" width="100" v-model="visible">
       <el-button
         type="text"
         class="icon_toolbar icon_stroke_width_1x"
@@ -70,12 +60,7 @@
         @click="handleDrawCanvas({ strokeWidth: 5 })"
         title="加粗"
       />
-      <el-button
-        type="text"
-        class="icon_toolbar icon_mark_stroke"
-        title="粗细"
-        slot="reference"
-      />
+      <el-button type="text" class="icon_toolbar icon_mark_stroke" title="粗细" slot="reference" />
     </el-popover>
 
     <el-button type="text" class="icon_toolbar icon_color" title="颜色">
@@ -422,4 +407,4 @@ export default {
   display: flex;
   justify-content: space-around;
 }
-</style>
+</style>

package/packages/components/model/components/check-proofing-model.vue

@@ -1,42 +1,39 @@
 <template>
-	<div v-if="show">
-		<el-empty>
-			<el-button type="text" @click="handleClick">载入模型</el-button>
-		</el-empty>
-	</div>
+  <div v-if="show">
+    <el-empty>
+      <el-button type="text" @click="handleClick">载入模型</el-button>
+    </el-empty>
+  </div>
 </template>
 
 <script>
-import * as modelApi from "../api/index";
+import * as modelApi from '../api/index';
 
 export default {
-	name: 'CheckProofingModel',
-	data() {
-		return {
-			show: false,
-		}
-	},
-	props: {
-		defaultParams: {
+  name: 'CheckProofingModel',
+  data() {
+    return {
+      show: false,
+    };
+  },
+  props: {
+    defaultParams: {
       type: Object,
       default() {
         return {};
       },
     },
-	},
-	mounted() {
-	},
-	methods: {
-		handleClick(){
-			this.$emit('click')
-		},
-		showCheckProofingModel(){
-			this.show = true;
-		}
-	}
-}
+  },
+  mounted() {},
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    },
+    showCheckProofingModel() {
+      this.show = true;
+    },
+  },
+};
 </script>
 
-<style type="scss" scoped>
-
-</style>
+<style type="scss" scoped></style>

package/packages/components/model/components/clipping-type.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="clipping-type action-box">
-    <div v-for="item of clippingList" :key="item.id" :class="[active === item.id ? 'active' : 'unactive', 'btn-item']" @click="clippingType(item.id)"><span class="span-txt">{{item.name}}</span><img :src="item.imgUrl" :alt="item.name" class="btn-bg"></div>
+    <div
+      v-for="item of clippingList"
+      :key="item.id"
+      :class="[active === item.id ? 'active' : 'unactive', 'btn-item']"
+      @click="clippingType(item.id)"
+    >
+      <span class="span-txt">{{ item.name }}</span
+      ><img :src="item.imgUrl" :alt="item.name" class="btn-bg" />
+    </div>
   </div>
 </template>
 <script>
@@ -12,40 +20,40 @@ export default {
       clippingList: [
         { name: '全局剖切', id: 'all', imgUrl: require('@/assets/clipping-all.png') },
         // { name: '局部剖切', id: 'local', imgUrl: require('@/assets/clipping-local.png') }
-      ]
-    }
+      ],
+    };
   },
   methods: {
     clippingType(type) {
       if (type !== this.active) {
-        this.$set(this, 'active', type)
-        this.$emit('clippingType', type)
+        this.$set(this, 'active', type);
+        this.$emit('clippingType', type);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-.clipping-type{
+.clipping-type {
   height: 45px;
 }
-.btn-item{
+.btn-item {
   height: 45px;
   line-height: 45px;
   padding: 0 10px;
   cursor: pointer;
 }
-.btn-bg{
+.btn-bg {
   display: inline-block;
   vertical-align: middle;
 }
-.unactive{
+.unactive {
   color: #fff;
 }
-.span-txt{
+.span-txt {
   padding-right: 5px;
 }
-.active{
+.active {
   background: rgba(255, 255, 255, 0.5);
 }
 </style>

package/packages/components/model/components/com-dialogWrapper/index.vue

@@ -17,7 +17,6 @@
     :append-to-body="appendToBody"
     :modal-append-to-body="modalAppendToBody"
   >
-
     <!-- 弹窗title -->
     <template slot="title">
       <div class="custom_dialog_header">
@@ -49,69 +48,67 @@ export default {
     /* 弹窗 title标题 */
     dialogTitle: {
       type: String,
-      default: '标题'
+      default: '标题',
     },
     /* 弹窗 width宽度 */
     popupWidth: {
       type: String,
-      default: '35%'
+      default: '35%',
     },
     /* 弹窗 显示隐藏状态 */
     visible: {
       type: Boolean,
-      default: false
+      default: false,
     },
     footerDisabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     appendToBody: {
       type: Boolean,
-      default: true
+      default: true,
     },
     modalAppendToBody: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
       openDialog: false,
-      dialogFullScreen: false
-    }
+      dialogFullScreen: false,
+    };
   },
   computed: {
     dialogVisible: {
       get() {
-        console.log(this.visible)
+        console.log(this.visible);
         // 初始化数据
-        if (this.visible) Object.assign(this.$data, this.$options.data())
-        return this.visible
+        if (this.visible) Object.assign(this.$data, this.$options.data());
+        return this.visible;
       },
       set(val) {
         // 当visible改变的时候，触发父组件的 updateVisible方法，
         // 在该方法中更改传入子组件的 centerDialogVisible的值
-        this.$emit('updateVisible', val)
-      }
-    }
+        this.$emit('updateVisible', val);
+      },
+    },
   },
   watch: {},
   created() {
-    console.log('test')
+    console.log('test');
   },
   mounted() {},
   methods: {
     /* 关闭弹窗 */
     handleClose() {
-      this.$emit('handleClose')
+      this.$emit('handleClose');
     },
     /* 弹窗 确认 操作 */
     handleSubmit() {
-      this.$emit('submitDialogData')
-    }
-  }
-}
+      this.$emit('submitDialogData');
+    },
+  },
+};
 </script>
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

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

@@ -1,8 +1,12 @@
 <template>
-  <div  class="box-card" style="height: calc(100vh - 134px)">
+  <div class="box-card" style="height: calc(100vh - 134px)">
     <div class="box-title">
       <span class="box-title-desc">碰撞报告</span>
-      <i class="el-icon-close box-title-close" style="cursor: pointer" @click="$emit('rightOperation', 'detect')" />
+      <i
+        class="el-icon-close box-title-close"
+        style="cursor: pointer"
+        @click="$emit('rightOperation', 'detect')"
+      />
     </div>
     <detect-tree
       v-if="showDetectTree"
@@ -12,7 +16,12 @@
       @highlight="highlight"
     />
     <div class="process-container" v-else>
-      <el-progress class="process-percent"  type="circle" :percentage="processPercent" :color="processPercentStatus"></el-progress>
+      <el-progress
+        class="process-percent"
+        type="circle"
+        :percentage="processPercent"
+        :color="processPercentStatus"
+      ></el-progress>
       <p v-if="!processCompleted">碰撞报告生成中...</p>
       <div v-else>
         <el-row>
@@ -31,7 +40,7 @@ import detectTree from './detect-tree.vue';
 
 export default {
   name: 'Details',
-  components:{
+  components: {
     DetectTree: detectTree,
   },
   props: {
@@ -46,7 +55,7 @@ export default {
       default() {
         return [];
       },
-    }
+    },
   },
   data() {
     return {
@@ -61,20 +70,23 @@ export default {
     };
   },
   mounted() {
-    this.init({queryParams: {...this.defaultParams, rebuild: 0}}, { contentType: 'application/x-www-form-urlencoded'});
+    this.init(
+      { queryParams: { ...this.defaultParams, rebuild: 0 } },
+      { contentType: 'application/x-www-form-urlencoded' },
+    );
   },
   computed: {
-    processPercentStatus(){
+    processPercentStatus() {
       return this.processCompleted ? '#5cb87a' : '';
     },
-    processCompleted(){
+    processCompleted() {
       return this.processPercent == 100;
-    }
+    },
   },
   watch: {
     treeData(val) {
       this.processPercent = 100;
-    }
+    },
   },
   methods: {
     init(params, options) {
@@ -113,29 +125,29 @@ export default {
         .catch((action) => {
           action == 'cancel' &&
             this.init(
-              { queryParams: {...this.defaultParams, rebuild: 1} },
-              { contentType: 'application/x-www-form-urlencoded' }
+              { queryParams: { ...this.defaultParams, rebuild: 1 } },
+              { contentType: 'application/x-www-form-urlencoded' },
             );
         });
     },
-    initDetect(){
+    initDetect() {
       this.init(
-        { queryParams: {...this.defaultParams, rebuild: 1} },
-        { contentType: 'application/x-www-form-urlencoded' }
+        { queryParams: { ...this.defaultParams, rebuild: 1 } },
+        { contentType: 'application/x-www-form-urlencoded' },
       );
     },
-    viewReport(){
+    viewReport() {
       this.showDetectTree = true;
     },
     // 生成一个0到100之间的随机整数百分比
     getRandomPercentage() {
       return Math.floor(Math.random() * 100);
     },
-    locate(node, data){
-      this.$emit('locate', node, data)
+    locate(node, data) {
+      this.$emit('locate', node, data);
     },
-    highlight(node, data){
-      this.$emit('highlight', node, data)
+    highlight(node, data) {
+      this.$emit('highlight', node, data);
     },
   },
   destroyed() {
@@ -292,7 +304,7 @@ export default {
   padding-bottom: 0;
   background: #fff;
   width: 360px;
-  .box-title{
+  .box-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -301,26 +313,26 @@ export default {
     padding-left: 8px;
     padding-right: 8px;
     border-bottom: 1px solid #dfdfdf;
-    .box-title-desc{
+    .box-title-desc {
       font-size: 14px;
       font-weight: bold;
     }
-    .box-title-close{
+    .box-title-close {
       font-size: 24px;
     }
   }
 }
-.process-container{
+.process-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: calc(75% - 54px);
-  .process-percent{
+  .process-percent {
     padding: 20px;
   }
 }
-::v-deep .el-progress__text{
+::v-deep .el-progress__text {
   font-size: 32px !important;
   font-weight: bold;
 }

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

@@ -29,18 +29,11 @@
         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"
+          <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 class="node-parent" v-else :title="node.label">本体：{{ node.label }}</span>
 
           <span v-if="data.id != -1">
             <el-button
@@ -339,19 +332,14 @@ export default {
             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);
+              !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
-                )
-              ) {
+              if (!batchIdObj[modelPiece].batchIds.find((item) => item === element.batchId)) {
                 batchIdObj[modelPiece].batchIds.push(element.batchId);
                 batchIdObj[modelPiece].folderId = data[i].groupId;
               }
@@ -379,8 +367,7 @@ export default {
     collectChildIdsRecursive(items, result = []) {
       items.forEach((item) => {
         item.type === 0 && result.push(item.objectId);
-        if (this.hasChildren(item))
-          this.collectChildIdsRecursive(item.child, result);
+        if (this.hasChildren(item)) this.collectChildIdsRecursive(item.child, result);
       });
       return result;
     },
@@ -425,9 +412,7 @@ export default {
   display: none;
 }
 
-::v-deep .el-tree--highlight-current
-  .el-tree-node.is-current
-  > .el-tree-node__content {
+::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
   background: rgba(255, 255, 255, 0.3);
 }
 
@@ -454,7 +439,7 @@ export default {
   overflow: hidden;
 }
 
-::v-deep .el-scrollbar{
+::v-deep .el-scrollbar {
   height: 739px;
 }
 </style>

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

@@ -38,36 +38,34 @@
 export default {
   name: 'FirstPerPanel',
   data() {
-    return {
-      
-    }
-  },
-  created() {
+    return {};
   },
+  created() {},
   methods: {
     start(val) {
-      this.$emit('start', val)
-    }
-  }
-}
+      this.$emit('start', val);
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-span{
+span {
   font-weight: bolder;
 }
-.text{
+.text {
   margin-top: 20px;
 }
-.line{
-  border-bottom: 1px solid #DCDFE6;
+.line {
+  border-bottom: 1px solid #dcdfe6;
   margin: 20px 0;
 }
-.center{
+.center {
   display: flex;
   flex-direction: column;
   align-items: center;
-  .top,.cen{
-    span{
+  .top,
+  .cen {
+    span {
       color: #53a8ff;
       display: inline-block;
       width: 40px;
@@ -77,28 +75,28 @@ span{
       border: 1px solid #53a8ff;
       padding: 5px;
       margin-bottom: 10px;
-      background-color: #E9F3FF;
+      background-color: #e9f3ff;
     }
   }
-  .cen{
-    span{
+  .cen {
+    span {
       margin: 10px;
     }
   }
 }
-.button{
+.button {
   display: flex;
   justify-content: end;
   margin-top: 20px;
 }
 @font-face {
-  font-family: "iconfont"; /* Project id 3226805 */
+  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');
+    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-family: 'iconfont' !important;
   font-size: 50px;
   font-style: normal;
   color: #53a8ff;
@@ -106,6 +104,6 @@ span{
   -moz-osx-font-smoothing: grayscale;
 }
 .icon-shubiao:before {
-  content: "\e8a7";
+  content: '\e8a7';
 }
 </style>