fl-web-component 1.2.11 → 1.2.13

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

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

@@ -1,126 +0,0 @@
-<!--
- * @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>