fl-web-component 0.1.0

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

@@ -0,0 +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>

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

@@ -0,0 +1,95 @@
+<template>
+  <el-row :style="style" ref="markPanel" class="mark-panel">
+    <el-card>
+      <div slot="header">
+        <span>新增人员定位</span>
+        <el-button type="text" style="float: right; padding: 0" @click="cancel">
+          <i class="el-icon-close"></i>
+        </el-button>
+      </div>
+      <el-form ref="form" :model="form"  :rules="rules" label-width="50px">
+        <el-form-item label="姓名" prop="userName">
+          <el-input type="text" v-model="form.userName" maxlength="50" show-word-limit></el-input>
+        </el-form-item>
+        <el-form-item label="编号" prop="userCode">
+          <el-input type="text" v-model="form.userCode" maxlength="50" show-word-limit></el-input>
+        </el-form-item>
+        <el-form-item class="create-btn">
+          <el-button size="small" @click="cancel">取消</el-button>
+          <el-button type="primary" size="small" @click="sure">确定</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </el-row>
+</template>
+<script>
+export default {
+  name: 'LocationPanel',
+  props: {
+    position: {
+      type: Object,
+      default() {
+        return {
+          left: 0,
+          top: 0
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      form: {
+        userName: '',
+        userCode: '',
+      },
+      style: `position: fixed; top: ${this.position.top}px; left: ${this.position.left}px;`,
+      rules: {
+        userName: [
+          { required: true, message: '请输入人员姓名', trigger: 'blur' },
+        ],
+        userCode: [
+          { required: true, message: '请输入人员编码', trigger: 'blur' },
+        ]
+      }
+    }
+  },
+  watch: {
+    position(val) {
+      this.$refs.markPanel.$el.style.top = `${val.top}px`
+      this.$refs.markPanel.$el.style.left = `${val.left}px`
+    }
+  },
+  methods: {
+    cancel() {
+      this.$emit('cancel')
+    },
+    sure(data) {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.$emit('sureLocation', this.form)
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm() {
+      this.$refs['form'].resetFields()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.mark-panel{
+  transition: all 1s;
+}
+::v-deep .el-card__header{
+  padding: 10px 20px;
+}
+::v-deep .el-input__inner{
+  height: 30px;
+  line-height: 30px;
+}
+::v-deep .icon-select .el-input__inner{
+  color: rgba(255,255, 255, 0);
+}
+</style>

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="measure-type action-box">
+    <div
+      v-for="item of measureList"
+      :key="item.id"
+      :class="[active === item.id ? 'active' : 'unactive', 'btn-item']"
+      @click="measureType(item.id)"
+    >
+      <span class="span-txt">{{item.name}}</span>
+      <img :src="item.imgUrl" :alt="item.name" class="btn-bg">
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'MeasureType',
+  data() {
+    return {
+      active: null,
+      measureList: [
+        { name: '距离测量', id: 'distance', imgUrl: require('@/assets/distance.png') },
+        { name: '面积测量', id: 'area', imgUrl: require('@/assets/area.png') },
+        { name: '角度测量', id: 'angle', imgUrl: require('@/assets/angle.png') },
+        // { name: '体积测量', id: 'volume', imgUrl: require('@/assets/area.png') }
+      ]
+    }
+  },
+  methods: {
+    measureType(type) {
+      this.$set(this, 'active', type)
+      this.$emit('measure', type)
+    }
+  }
+}
+</script>
+<style scoped>
+.measure-type{
+  height: 45px;
+}
+.btn-item{
+  height: 45px;
+  line-height: 45px;
+  padding: 0 10px;
+  cursor: pointer;
+}
+.btn-bg{
+  display: inline-block;
+  vertical-align: middle;
+}
+.active{
+  background: rgba(255, 255, 255, 0.5);
+}
+.unactive{
+  color: #fff;
+}
+.span-txt{
+  padding-right: 5px;
+}
+</style>