fl-web-component 0.1.0

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

@@ -0,0 +1,546 @@
+<template>
+  <div class="header-button">
+    <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"
+      >
+        <div
+          :class="[
+            'btn-item',
+            'pbstree',
+            btnActived['pbsTree'] ? 'el-button-actived' : '',
+            proofingModel ? '' : 'icon-disabeld'
+          ]"
+          @click="rightOperation('pbsTree')"
+        ></div>
+      </el-tooltip>
+      <div class="split-line"></div>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="属性"
+        placement="top-start"
+      >
+        <div
+          :class="[
+            'btn-item',
+            'property',
+            btnActived['property'] ? 'el-button-actived' : '',
+            proofingModel ? '' : 'icon-disabeld',
+          ]"
+          @click="rightOperation('property')"
+          style="margin-right: 0px;"
+        ></div>
+      </el-tooltip>
+    </div>
+    <div class="left">
+      <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"
+      >
+        <div
+          :class="[
+            'btn-item',
+            'detect',
+            btnActived['detect'] ? 'el-button-actived' : '',
+            proofingModel ? '' : 'icon-disabeld',
+
+          ]"
+          @click="rightOperation('detect')"
+        ></div>
+      </el-tooltip>
+    </div>
+    <div class="left">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="剖切"
+        placement="top-start"
+        :disabled="openClipping"
+      >
+        <div
+          :class="[
+            'btn-item',
+            'clip',
+            '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"
+            >
+              <div
+                :class="[
+                  'btn-item',
+                  'clipping-all',
+                  btnActived['clippingAll'] ? 'el-button-actived' : '',
+                ]"
+                @click.stop="rightOperation('clipping-all')"
+              ></div
+            ></el-tooltip>
+          </div>
+        </div>
+      </el-tooltip>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="测量"
+        placement="top-start"
+        :disabled="openMeasure"
+      >
+        <div
+          :class="[
+            'btn-item',
+            'measure',
+            '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"
+            >
+              <div
+                :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"
+            >
+              <div
+                :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"
+            >
+              <div
+                :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"
+      >
+        <div
+          :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"
+      >
+        <div
+          :class="[
+            'btn-item',
+            'first-person',
+            btnActived['firstPerson'] ? 'el-button-actived' : '',
+            proofingModel ? '' : 'icon-disabeld',
+
+          ]"
+          @click="rightOperation('first-person')"
+        ></div>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'HeaderButton',
+  components: {
+    // Item: () => import('@/layout/components/Sidebar/Item.vue')
+  },
+  props: {
+    currentRoute: {
+      type: String,
+      default: '',
+    },
+    drawName: {
+      type: String,
+      default: '',
+    },
+    btnVisiable: {
+      type: Object,
+      default() {
+        return {
+          obj: true,
+          menu: true,
+          mainView: true,
+          light: true,
+          mark: true,
+          search: true,
+          inspection: true,
+          continue: true,
+          property: true,
+          visiable: true,
+          layer: true,
+        };
+      },
+    },
+    closeRightOperationType: {
+      type: Object,
+      default() {
+        return {
+          type: '',
+          close: false,
+        };
+      },
+    },
+    proofingModel:{
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      rightType: '',
+      type: '',
+      openMeasure: false,
+      lightType: 'bright',
+      visiableType: '',
+      openClipping: false,
+      btnActived: {
+        proof: false,
+        detect: false,
+        mark: false,
+        property: false,
+        clip: false,
+        clippingAll: false,
+        annotate: false,
+        firstPerson: false,
+        angle: false,
+        area: false,
+        distance: false,
+        measure: false,
+        pbsTree: true,
+      },
+    };
+  },
+  watch: {
+    closeRightOperationType(param) {
+      console.log('closeRightOperationType', param);
+
+      this.btnActived[param.type] = !param.close;
+    },
+  },
+  created() {},
+  methods: {
+    mainView() {
+      this.$parent.mainView();
+    },
+    resetType() {
+      this.rightType = '';
+    },
+    rightOperation(name) {
+      if(!this.proofingModel){
+        return
+      }
+      // this.rightType = this.rightType === name ? '': name
+      this.btnActived[name] = !this.btnActived[name];
+      this.$emit('rightOperation', name);
+      // this.$parent.rightOperation(name)
+    },
+    leftInformation(reveal, conceal, type) {
+      type === this.type ? (this.type = '') : (this.type = type);
+      this.$parent.leftInformation(reveal, conceal);
+    },
+    clickClip(type) {
+      if(!this.proofingModel){
+        return
+      }
+
+      type === this.type ? (this.type = '') : (this.type = type);
+      this.openClipping = !this.openClipping;
+      if(this.openMeasure){
+        this.openMeasure = false
+      }
+      this.rightOperation(type);
+    },
+    clickMeasure(type) {
+      if(!this.proofingModel){
+        return
+      }
+
+      type === this.type ? (this.type = '') : (this.type = type);
+      this.openMeasure = !this.openMeasure;
+      if(this.openClipping){
+        this.openClipping = false
+      }
+      this.rightOperation(type);
+    },
+    setColorOpen(type) {
+      if (type === this.lightType) return;
+      this.lightType = type;
+      this.$parent.setColorOpen(type);
+    },
+    clickVisiable(type) {
+      type === this.type ? (this.type = '') : (this.type = type);
+      this.openHandleVisiable = !this.openHandleVisiable;
+      if (!this.openHandleVisiable) {
+        this.visiableType = '';
+        this.$emit('setHandleVisiable', '');
+      }
+    },
+    setHandleVisiable(type) {
+      if (type === this.visiableType) return;
+      this.visiableType = type;
+      this.$emit('setHandleVisiable', type);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.header-name {
+  color: #2e3136;
+  font-size: 12px;
+  font-weight: bold;
+  margin-left: 4px;
+}
+
+// 大部分页面顶部按钮
+.header-button {
+  width: 100%;
+  height: 58px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 16px;
+  // justify-content: space-between;
+  border-bottom: 1px solid #ddd;
+}
+
+.split-line {
+  width: 1px;
+  height: 17px;
+  background: #ddd;
+  margin: 0 10px;
+}
+
+.right-left {
+  margin-right: 16px;
+}
+
+.right {
+  display: flex;
+}
+
+.left,
+.right-left,
+.right-right {
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  padding: 4px 10px;
+  margin-right: 60px;
+}
+
+.btn-item {
+  width: 32px;
+  height: 32px;
+  display: inline-block;
+  border-radius: 4px;
+  background-position: center;
+  background-size: 26px;
+  background-repeat: no-repeat;
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid #c5deee;
+  }
+}
+
+.popover-container {
+  position: absolute;
+  left: 0;
+  top: 42px;
+  background-color: #fff;
+  display: flex;
+  border-radius: 8px;
+  padding: 2px 8px;
+  box-shadow: 0px 2px 10px -2px #2e3136;
+  z-index: 10;
+
+  .btn-item:hover {
+    border: none;
+    background-color: rgba(241, 241, 241, 1);
+  }
+}
+
+.popover-layout {
+  position: relative;
+}
+
+// .main-view{
+//   margin-right: 10px;
+// }
+.right-right .btn-item {
+  margin-right: 10px;
+}
+
+// .btn-item:hover{
+//   border: 1px solid #C5DEEE;
+// }
+.el-button-actived {
+  background-color: rgba(241, 241, 241, 1);
+}
+
+.proof {
+  background-image: url('../../../assets/proof/proof@2x.png');
+}
+
+.detect {
+  background-image: url('../../../assets/proof/detect@2x.png');
+}
+
+.property {
+  background-image: url('../../../assets/proof/property@2x.png');
+}
+
+.annotate {
+  background-image: url('../../../assets/proof/annotate@2x.png');
+}
+
+.clip {
+  background-image: url('../../../assets/proof/clip@2x.png');
+}
+
+.first-person {
+  background-image: url('../../../assets/proof/first-person@2x.png');
+}
+
+.measure {
+  background-image: url('../../../assets/proof/measure@2x.png');
+}
+
+.clipping-all {
+  background-image: url('../../../assets/proof/clipping-all@2x.png');
+}
+
+.clipping {
+  background-image: url('../../../assets/proof/clipping@2x.png');
+}
+
+.distance {
+  background-image: url('../../../assets/proof/distance@2x.png');
+}
+
+.area {
+  background-image: url('../../../assets/proof/area@2x.png');
+}
+
+.angle {
+  background-image: url('../../../assets/proof/angle@2x.png');
+}
+
+.pbstree {
+  background-image: url('../../../assets/proof/pbstree@2x.png');
+}
+.icon-disabeld{
+  cursor: not-allowed;
+}
+.back{
+  margin: 0 25px 0 10px;
+  padding: 12px;
+  border: 1px solid #ddd;
+}
+// .save{
+//   background-image: url('../images/header-button/tool_save@2x.png');
+//   margin-right: 10px;
+// }
+// .menu{
+//   background-image: url('../images/header-button/tool_list@2x.png');
+// }
+// .mergdraw{
+//   background-image: url('../images/header-button/tool_mergdraw@2x.png');
+// }
+// .visiableOrShow{
+//   position: relative;
+//   background-image: url('../images/header-button/tool_visiable@2x.png');
+//   background-size: 22px;
+// }
+// .obj-hide{
+//   background-image: url('../images/header-button/tool_hide@2x.png');
+//   background-size: 18px;
+// }
+// .obj-show{
+//   background-image: url('../images/header-button/tool_show@2x.png');
+//   background-size: 18px;
+// }
+</style>

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

@@ -0,0 +1,127 @@
+<!--
+ * @Author: yangling
+ * @Date: 2024-08-27 19:02:05
+ * @LastEditors: yangling
+ * @LastEditTime: 2024-08-27 19:02:14
+ * @FilePath: \DocumentCollaboration\src\components\imageViewr\index.vue
+ * @Description: 图片放大缩小 拖动
+-->
+<template>
+  <div
+    class="imageView"
+    @mousedown="onMouseDown"
+    @mousemove="onMouseMove"
+    @mouseleave="onMouseUp"
+    @mouseup="onMouseUp"
+  >
+    <div v-if="isErrorImage" class="error-image">
+      <div class="image-slot">
+        <i class="image-icon el-icon-picture-outline"></i>
+      </div>
+    </div>
+    <img v-else :src="imageUrl" ref="image" @wheel="onWheel"/>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    imageUrl: {
+      type: String,
+      require: true
+    },
+    isErrorImage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      currentScale: 1, // 当前缩放比例
+      isDragging: false, // 是否正在拖拽图片
+      startX: 0, // 拖拽起始点x坐标
+      startY: 0, // 拖拽起始点y坐标
+      translateX: 0, // 图片平移x方向距离
+      translateY: 0, // 图片平移y方向距离
+      dragSpeed: 0.3, // 拖拽速度
+      zoomSpeed: 0.1, //控制缩放速度
+      maxScale: 5, //最大缩放值
+      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'
+    },
+    // 鼠标移动事件处理函数
+    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
+    },
+    // 鼠标松开事件处理函数
+    onMouseUp() {
+      this.isDragging = false
+      this.$refs.image.style.cursor = 'grab'
+    },
+    // 鼠标滚轮事件处理函数
+    onWheel(e) {
+      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)`
+    },
+    // 重置图片缩放和移动
+    resetImage() {
+      this.currentScale = 1
+      this.translateX = 0
+      this.translateY = 0
+      this.$refs.image.style.transform = 'scale(1) translate(0, 0)'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.imageView {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.imageView .elImageclass {
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+  user-drag: none;
+  -webkit-user-drag: none;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+  object-fit: contain !important;
+}
+
+.image-icon{
+  font-size: 50px;
+  
+}
+</style>