fl-web-component 1.2.11 → 1.2.13

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

@@ -1,84 +0,0 @@
-<!--
- * @Author: luoxue
- * @Date: 2022-09-05 15:40:46
- * @LastEditors: luoxue
- * @LastEditTime: 2023-06-15 16:14:10
- * @FilePath: \cms-ui\src\components\TextOverTooltip\index.vue
- * @Description: 单行文本溢出显示省略号，鼠标悬浮展现完整内容（单行展示）
--->
-<template>
-  <div class="text-over-tooltip">
-    <el-tooltip
-      :effect="effect"
-      :content="content"
-      :disabled="isDisableTooltip"
-      :placement="placement"
-    >
-      <div class="isEllipsis" @mouseover="onMouseOver(refName)">
-        <span :ref="refName">
-          <slot name="tooltip-content">
-            <span>{{ content }}</span>
-          </slot>
-        </span>
-      </div>
-    </el-tooltip>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'TextOverTooltip',
-  props: {
-    // 显示的文字内容
-    content: {
-      type: String,
-      required: true,
-    },
-    // 子元素标识（如在同一页面中调用多次组件，此参数不可重复）
-    refName: {
-      type: [String, Number],
-      required: true,
-    },
-    // 默认主题
-    effect: {
-      type: String,
-      default: 'dark',
-    },
-    // tooltip 出现的位置
-    placement: {
-      type: String,
-      default: 'top',
-    },
-  },
-  data() {
-    return {
-      // 是否禁止提示
-      isDisableTooltip: true,
-    };
-  },
-  methods: {
-    // 鼠标移入事件: 判断内容的宽度contentWidth是否大于父级的宽度
-    onMouseOver(str) {
-      if (!this.$refs[str]) return;
-      let parentWidth = this.$refs[str].parentNode.offsetWidth;
-      let contentWidth = this.$refs[str].offsetWidth;
-      // 判断是否禁用tooltip功能
-      this.isDisableTooltip = contentWidth <= parentWidth;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.text-over-tooltip {
-  width: 100%;
-  height: 100%;
-  vertical-align: middle;
-  /* 文字超出宽度显示省略号 单行*/
-  .isEllipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-</style>

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

@@ -1,410 +0,0 @@
-<template>
-  <div class="toolbar">
-    <el-tooltip class="item" effect="dark" content="提示：双击空白处输入文字" placement="top-start">
-      <el-button
-        type="text"
-        class="icon_toolbar icon_title"
-        :class="[type === 'Text' ? 'icon_active' : '']"
-        title="文本"
-        @click="handleDrawCanvas({ cursor: 'text', type: 'Text' })"
-      />
-    </el-tooltip>
-    <!-- <el-button
-      type="text"
-      class="icon_toolbar icon_line"
-      :class="[type === 'Line' ? 'icon_active' : '']"
-      title="画笔"
-      @click="handleDrawCanvas({ cursor: 'crosshair', type: 'Line' })"
-      slot="reference"
-    /> -->
-    <el-button
-      type="text"
-      class="icon_toolbar icon_rectangle"
-      :class="[type === 'Rect' ? 'icon_active' : '']"
-      title="矩形"
-      @click="handleDrawCanvas({ cursor: 'crosshair', type: 'Rect' })"
-    />
-    <el-button
-      type="text"
-      class="icon_toolbar icon_circle"
-      :class="[type === 'Circle' ? 'icon_active' : '']"
-      title="圆形"
-      @click="handleDrawCanvas({ cursor: 'crosshair', type: 'Circle' })"
-    />
-    <el-button
-      type="text"
-      class="icon_toolbar icon_rubber"
-      :class="[type === 'Rubber' ? 'icon_active' : '']"
-      title="橡皮擦"
-      @click="handleDrawCanvas({ cursor: 'eraser', type: 'Rubber' })"
-    />
-    <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"
-        :class="[strokeWidth === 1 ? 'icon_active' : '']"
-        @click="handleDrawCanvas({ strokeWidth: 1 })"
-        title="默认"
-      />
-      <el-button
-        type="text"
-        class="icon_toolbar icon_stroke_width_2x"
-        :class="[strokeWidth === 3 ? 'icon_active' : '']"
-        @click="handleDrawCanvas({ strokeWidth: 3 })"
-        title="粗"
-      />
-      <el-button
-        type="text"
-        class="icon_toolbar icon_stroke_width_3x"
-        :class="[strokeWidth === 5 ? 'icon_active' : '']"
-        @click="handleDrawCanvas({ strokeWidth: 5 })"
-        title="加粗"
-      />
-      <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="颜色">
-      <el-color-picker
-        v-model="defaultColor"
-        popper-class="popperClass"
-        @change="colorChange"
-      ></el-color-picker>
-    </el-button>
-    <el-button
-      type="text"
-      class="text_toolbar icon_clear"
-      @click="handleClear"
-      title="清除"
-    ></el-button>
-    <el-button
-      type="text"
-      class="text_toolbar icon_cancel"
-      @click="cancel"
-      title="取消"
-    ></el-button>
-    <el-button
-      type="text"
-      class="text_toolbar icon_save"
-      @click="saveDrawing"
-      title="保存"
-    ></el-button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'DrawToolbar',
-  data() {
-    return {
-      type: '',
-      defaultColor: '#A90A0A',
-      strokeWidth: 1,
-      visible: false,
-    };
-  },
-  methods: {
-    saveDrawing() {
-      this.$emit('save');
-    },
-    // 当前显示的颜色发生改变时
-    colorChange(val) {
-      if (val) {
-        this.$emit('colorChange', val);
-      }
-    },
-    uploadByUrl(url, data) {
-      return fetch(url, {
-        mode: 'cors', // 解决跨域
-        headers: { 'Content-Type': 'application/octet-stream' },
-        method: 'PUT',
-        body: data,
-      });
-    },
-    handleDrawCanvas({ cursorStyle, type, strokeWidth }) {
-      if (type === this.type) return;
-      if (type) {
-        this.type = type;
-      }
-      if (strokeWidth) {
-        this.strokeWidth = strokeWidth;
-      }
-      this.$emit('handleDraw', {
-        cursor: cursorStyle,
-        type: this.type,
-        strokeWidth: this.strokeWidth,
-      });
-      // if (actived !== this.type) { this.type = actived }
-      // if (style !== 'eraser') this.cursorStyle = style
-      // else if (style === 'eraser') this.cursorStyle = `url('${cursors.eraser}') 15 15, auto`
-      // this.canDraw = false
-      // let sx, sy, mx, my, arcDownX, arcDownY, arcMoveX, arcMoveY
-      // let text = document.getElementById("text")
-      // //鼠标按下
-      // let mousedown = (e) => {
-      //   this.ctx_front.strokeStyle = this.defaultColor
-      //   this.ctx_front.lineWidth = this.slide
-      //   e = e || window.event
-      //   sx = e.clientX - canvas_front.offsetLeft
-      //   sy = e.clientY - canvas_front.offsetTop
-      //   arcDownX = e.screenX
-      //   arcDownY = e.screenY
-      //   const cbx = this.ctx_base.getImageData( e.offsetX - 12, e.offsetY - 12, 12, 12)
-      //   this.ctx_front.moveTo(sx, sy)
-      //   this.canDraw = true
-      //   switch (type) {
-      //     case '橡皮':
-      //       this.ctx_front.putImageData( cbx, e.offsetX - 12, e.offsetY - 12)
-      //       this.ctx_back.putImageData(cbx, e.offsetX - 12, e.offsetY - 12)
-      //       break
-      //     case '文本':
-      //       this.handleTextBlur()
-      //       this.text = ""
-      //       text.style.fontSize = 14 + this.slide * 10 + "px"
-      //       text.style.color = this.defaultColor
-      //       text.style.left = e.offsetX + canvas_front.offsetLeft - 20 + "px"
-      //       text.style.top = e.offsetY + canvas_front.offsetTop - 10 + "px"
-      //       text.style.zIndex = 10
-      //       text.style.display = "block"
-      //       this.tl = e.offsetX - 20
-      //       this.tt = e.offsetY + 10
-      //       break
-      //   }
-      // }
-      // let mousemove = (e) => {
-      //   e = e || window.event
-      //   mx = e.clientX - canvas_front.offsetLeft
-      //   my = e.clientY - canvas_front.offsetTop
-      //   arcMoveX = e.screenX;
-      //   arcMoveY = e.screenY;
-      //   const cbx = this.ctx_base.getImageData( e.offsetX - 12, e.offsetY - 12, 12, 12)
-      //   if (this.canDraw) {
-      //     switch (type) {
-      //       case '折线':
-      //         this.handleFromCanvas()
-      //         this.ctx_front.beginPath()
-      //         this.ctx_front.moveTo(sx - 200 + create_canvas.scrollLeft, sy - 39 + create_canvas.scrollTop)
-      //         this.ctx_front.lineTo(mx - 200 + create_canvas.scrollLeft, my - 39 + create_canvas.scrollTop)
-      //         this.ctx_front.stroke()
-      //         break
-      //       case '圆形':
-      //         this.handleFromCanvas()
-      //         this.ctx_front.beginPath()
-      //         // eslint-disable-next-line no-case-declarations
-      //         let rds = Math.sqrt(Math.pow( (arcDownX - arcMoveX), 2) + (arcDownY - arcMoveY), 2 )
-      //         this.ctx_front.arc(sx - 200 + create_canvas.scrollLeft, sy - 39 + create_canvas.scrollTop, rds, 0, Math.PI * 2, false)
-      //         this.ctx_front.stroke()
-      //         break
-      //       case '矩形':
-      //         this.handleFromCanvas()
-      //         this.ctx_front.beginPath()
-      //         this.ctx_front.moveTo(sx - 200 + create_canvas.scrollLeft, sy - 39 + create_canvas.scrollTop)
-      //         this.ctx_front.lineTo(mx - 200 + create_canvas.scrollLeft, sy - 39 + create_canvas.scrollTop)
-      //         this.ctx_front.lineTo(mx - 200 + create_canvas.scrollLeft, my - 39 + create_canvas.scrollTop)
-      //         this.ctx_front.lineTo(sx - 200 + create_canvas.scrollLeft, my - 39 + create_canvas.scrollTop)
-      //         this.ctx_front.lineTo(sx - 200 + create_canvas.scrollLeft, sy - 39 + create_canvas.scrollTop)
-      //         this.ctx_front.stroke()
-      //         break
-      //       case '橡皮':
-      //         this.ctx_front.putImageData(cbx, e.offsetX - 12, e.offsetY - 12)
-      //         this.ctx_back.putImageData(cbx, e.offsetX - 12, e.offsetY - 12)
-      //         break
-      //     }
-      //   }
-      // }
-      // let mouseup = () => {
-      //   if (this.canDraw) {
-      //     this.canDraw = false
-      //     this.ctx_front.closePath()
-      //     if (type !== 6) {
-      //       this.handleSaveCanvasStore()
-      //     }
-      //   }
-      // }
-      // canvas_front.onmousedown = (e) => mousedown(e)
-      // canvas_front.onmousemove = (e) => mousemove(e)
-      // canvas_front.onmouseup = (e) => mouseup(e)
-      // canvas_front.onmouseout = (e) => mouseup(e)
-      // canvas_front.onmouseleave = (e) => mouseup(e)
-    },
-    /** 失焦或者回车绘制文本，框隐藏*/
-    handleTextBlur() {
-      let text = document.getElementById('text');
-      this.ctx_front.font = `300 ${text.style.fontSize} sans-serif`;
-      this.ctx_front.fillStyle = this.defaultColor;
-      this.ctx_front.fillText(this.text, this.tl, this.tt);
-      text.style.display = 'none';
-      this.text = '';
-      text.value = '';
-      this.handleSaveCanvasStore();
-    },
-    /** 保存绘制*/
-    handleSaveCanvasStore() {
-      let url = canvas_front.toDataURL();
-      let image = new Image();
-      image.src = url;
-      image.onload = () => {
-        this.ctx_front.clearRect(0, 0, canvas_front.width, canvas_front.height);
-        this.ctx_front.drawImage(image, 0, 0, image.width, image.height);
-        this.ctx_back.drawImage(image, 0, 0, image.width, image.height);
-        const url2 = canvas_back.toDataURL();
-        this.currentImg.url = url2;
-        this.currentImg.index += 1;
-        this.canvasStore.push(url2);
-      };
-    },
-    handleFromCanvas() {
-      this.ctx_front.clearRect(0, 0, canvas_front.width, canvas_front.height);
-    },
-    cancel() {
-      this.$emit('closeDrawing');
-    },
-    handleClear() {
-      this.$emit('handleClear');
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-// P标签样式
-.classification_title {
-  margin: 0 0 10px 0;
-  color: #fff;
-  font-size: 14px;
-  cursor: default;
-}
-
-// 工具栏样式
-.toolbar {
-  z-index: 10;
-  width: 520px;
-  padding: 6px 16px;
-  border-radius: 6px;
-  box-shadow: 0px 2px 8px 0px rgba(6, 29, 44, 0.25);
-  background-color: #fff;
-  position: relative;
-  left: 50%;
-  top: 50%;
-  box-sizing: border-box;
-  transform: translate(-50%, -50%);
-  display: flex;
-  justify-content: space-around;
-}
-// 工具栏图标
-.icon_toolbar,
-.text_toolbar {
-  float: left;
-  width: 40px;
-  height: 40px;
-  padding: 0px !important;
-  background-repeat: no-repeat;
-  background-size: 24px;
-  background-position: center;
-}
-.icon_toolbar:hover,
-.text_toolbar:hover,
-.icon_active {
-  background-color: rgba(238, 238, 238, 1);
-}
-.icon_title {
-  background-image: url(~@/assets/draw-tool/mark_font@2x.png);
-}
-.icon_line {
-  background-image: url(~@/assets/draw-tool/mark_polyline@2x.png);
-}
-
-.icon_rectangle {
-  background-image: url(~@/assets/draw-tool/mark_rectangle@2x.png);
-}
-
-.icon_circle {
-  background-image: url(~@/assets/draw-tool/mark_cercle@2x.png);
-}
-
-.icon_rubber {
-  background-image: url(~@/assets/draw-tool/mark_eraser@2x.png);
-}
-.icon_color {
-  background-image: url(~@/assets/draw-tool/mark_color@2x.png);
-}
-.icon_clear {
-  background-image: url(~@/assets/draw-tool/mark_clear@2x.png);
-}
-
-.icon_cancel {
-  background-image: url(~@/assets/draw-tool/mark_exit@2x.png);
-}
-
-.icon_stroke_width_1x {
-  background-image: url(~@/assets/draw-tool/stroke_width_1x.png);
-}
-
-.icon_stroke_width_2x {
-  background-image: url(~@/assets/draw-tool/stroke_width_2x.png);
-}
-
-.icon_stroke_width_3x {
-  background-image: url(~@/assets/draw-tool/stroke_width_3x.png);
-}
-
-.icon_save {
-  background-image: url(~@/assets/draw-tool/mark_finish@2x.png);
-}
-
-.icon_mark_stroke {
-  background-image: url(~@/assets/draw-tool/mark_stroke.png);
-}
-
-// 调色盘设置
-::v-deep .icon_color .el-color-picker__trigger {
-  opacity: 0;
-  filter: alpha(opacity=0);
-}
-::v-deep .el-color-picker--medium,
-::v-deep .el-color-picker--medium .el-color-picker__trigger {
-  width: 24px !important;
-  height: 24px !important;
-}
-
-// 画布
-.create_canvas {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  box-sizing: border-box;
-  // padding: 20px;
-
-  canvas {
-    position: absolute;
-    overflow: auto;
-    // top: 20px;
-    // left: 20px;
-  }
-  #ctx_front {
-    z-index: 5;
-  }
-  #ctx_back {
-    z-index: 3;
-  }
-  #ctx_base {
-    z-index: 1;
-  }
-}
-#text {
-  position: absolute;
-  z-index: -1;
-  resize: none;
-  outline: none;
-  border: 1px dashed #eeeeee;
-  overflow: hidden;
-  background: transparent;
-  line-height: 30px;
-  display: none;
-}
-</style>
-<style lang="scss">
-.toolbar_stroke-width {
-  display: flex;
-  justify-content: space-around;
-}
-</style>

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

@@ -1,39 +0,0 @@
-<template>
-  <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';
-
-export default {
-  name: 'CheckProofingModel',
-  data() {
-    return {
-      show: false,
-    };
-  },
-  props: {
-    defaultParams: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-  },
-  mounted() {},
-  methods: {
-    handleClick() {
-      this.$emit('click');
-    },
-    showCheckProofingModel() {
-      this.show = true;
-    },
-  },
-};
-</script>
-
-<style type="scss" scoped></style>

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

@@ -1,59 +0,0 @@
-<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>
-</template>
-<script>
-export default {
-  name: 'ClippingType',
-  data() {
-    return {
-      active: '',
-      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);
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.clipping-type {
-  height: 45px;
-}
-.btn-item {
-  height: 45px;
-  line-height: 45px;
-  padding: 0 10px;
-  cursor: pointer;
-}
-.btn-bg {
-  display: inline-block;
-  vertical-align: middle;
-}
-.unactive {
-  color: #fff;
-}
-.span-txt {
-  padding-right: 5px;
-}
-.active {
-  background: rgba(255, 255, 255, 0.5);
-}
-</style>

package/packages/components/model/components/com-dialogWrapper/Readme.md

@@ -1,53 +0,0 @@
-<!-- 使用方法 样例 -->
-<template>
-  <div class="trigger_dialog">
-    <!-- 触发弹窗操作  -->
-    <el-button type="primary" @click="dialogVisible = true">触发对话框</el-button>
-    <!-- 弹窗组件 -->
-    <DialogWrapper
-      v-if="dialogVisible"
-      dialog-title="触发对话框"
-      :visible.sync="dialogVisible"
-      :popup-width="'35%'"
-      @handleClose="handleClose"
-      @submitDialogData="submitDialogData"
-    >
-      弹窗内容
-    </DialogWrapper>
-  </div>
-</template>
-
-<script>
-export default {
-  components: {
-    // 弹窗引入，如注册全局组件则克直接使用
-    DialogWrapper: () => import('./DialogWrapper.vue')
-  },
-  props: {},
-  data() {
-    return {
-      dialogVisible: false // 弹框状态
-    }
-  },
-  computed: { },
-  watch: {},
-  created() {},
-  mounted() {},
-  methods: {
-    /* 弹窗 修改是否让页面显示与隐藏的事件 */
-    updateVisible(val) {
-      this.dialogVisible = val
-    },
-    /* 弹窗 确认 操作 */
-    submitDialogData() {
-      this.dialogVisible = false
-    },
-    /* 弹窗 关闭 操作 */
-    handleClose() {
-      this.dialogVisible = false
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-</style>