fl-web-component 0.1.0

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

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

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

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

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

@@ -0,0 +1,53 @@
+<!-- 使用方法 样例 -->
+<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>