fl-web-component 0.1.1 → 1.0.1

package/packages/components/com-graphics/per-control.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <div class="key">
+      <span>漫游</span>
+      <div class="center">
+        <div class="top"><span>W</span></div>
+        <div class="cen">
+          <span>A</span>
+          <span>S</span>
+          <span>D</span>
+        </div>
+        <span class="text">W向前移动、S向后移动、A向左移动、D向右移动</span>
+      </div>
+    </div>
+    <div class="line"></div>
+    <div class="mouse">
+      <span>环视</span>
+      <div class="center">
+        <i class="iconfont icon-shubiao"></i>
+        <span class="text">鼠标控制方向</span>
+      </div>
+    </div>
+    <div class="line"></div>
+    <div class="quit">
+      <span>退出</span>
+      <div class="center">
+        <div class="cen"><span>Esc</span></div>
+        <span class="text">使用Esc键退出漫游</span>
+      </div>
+    </div>
+    <div class="button">
+      <el-button @click="start(false)">好的，知道了</el-button>
+      <el-button @click="start(true)" type="primary">不再提示</el-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'PerControl',
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {
+    start(val) {
+      this.$emit('start', val);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+span {
+  font-weight: bolder;
+}
+.text {
+  margin-top: 20px;
+}
+.line {
+  border-bottom: 1px solid #dcdfe6;
+  margin: 20px 0;
+}
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .top,
+  .cen {
+    span {
+      color: '#53a8ff';
+      display: inline-block;
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+      border: 1px solid '#53a8ff';
+      padding: 5px;
+      margin-bottom: 10px;
+      background-color: #e9f3ff;
+    }
+  }
+  .cen {
+    span {
+      margin: 10px;
+    }
+  }
+}
+.button {
+  display: flex;
+  justify-content: end;
+  margin-top: 20px;
+}
+@font-face {
+  font-family: 'iconfont';
+  src: url('//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216') format('woff2'),
+    url('//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216') format('woff'),
+    url('//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216') format('truetype');
+}
+.iconfont {
+  font-family: 'iconfont' !important;
+  font-size: 50px;
+  font-style: normal;
+  color: '#53a8ff';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon-shubiao:before {
+  content: '\e8a7';
+}
+</style>

package/packages/components/com-graphics/pid.vue

@@ -0,0 +1,168 @@
+<template>
+  <div id="pid-svg">
+    <embed type="image/svg+xml" id="svg-tigger" :src="currentSvg" />
+  </div>
+</template>
+<script>
+  import * as svgPanZoom from 'static/svg-pan-zoom.min.js';
+  var svgCon = {},
+    svgTigger = {},
+    svgEmbed = {};
+  var preTargetCon = [],
+    preTargetStyle = [];
+  var firstTime = 0,
+    lastTime = 0;
+  var inspectionRect = null,
+    pointerRect = null;
+  export default {
+    name: 'PidSvg',
+    data() {
+      return {
+        currentSvg: null,
+      };
+    },
+    mounted() {
+      svgEmbed = document.getElementById('svg-tigger');
+      svgEmbed.addEventListener('resize', () => {
+        this.onWindowResize;
+      });
+      svgEmbed.addEventListener('load', () => {
+        svgTigger = svgPanZoom('#svg-tigger', {
+          viewportSelector: '.svg-pan-zoom_viewport',
+          preventMouseEventsDefault: false,
+        });
+        svgCon = svgEmbed.getSVGDocument().querySelector('svg');
+        svgCon.style = 'cursor: pointer;user-select: none;';
+        svgCon.setAttribute('viewBox', '0 0 ' + svgEmbed.offsetWidth + ' ' + svgEmbed.offsetHeight);
+        inspectionRect = svgCon.createSVGRect();
+        inspectionRect.width = 10;
+        inspectionRect.height = 10;
+        pointerRect = svgCon.createSVGPoint();
+        this.onWindowResize();
+        // 禁止右键菜单栏
+        svgCon.addEventListener('contextmenu', e => {
+          e.preventDefault();
+        });
+        // 鼠标的按下与抬起事件
+        svgCon.addEventListener('mousedown', this.mousedown);
+        svgCon.addEventListener('mouseup', this.mouseup);
+        // 加载完成后会通知
+        this.$emit('loaded');
+      });
+    },
+    methods: {
+      // 改变窗口大小
+      onWindowResize() {
+        svgCon.removeAttribute('width');
+        svgCon.removeAttribute('height');
+      },
+      // 鼠标按下
+      mousedown() {
+        firstTime = new Date().getTime();
+      },
+      // 鼠标抬起
+      mouseup(evt) {
+        lastTime = new Date().getTime();
+        let targetElement = null;
+        // 判断鼠标按下到抬起的时间间隔是否超过300ms 没有超过 则判断为点击
+        if (lastTime - firstTime <= 300) {
+          if (evt.target.nodeName !== 'svg') {
+            targetElement = evt.target;
+          } else {
+            pointerRect.x = evt.clientX;
+            pointerRect.y = evt.clientY;
+            const tp = pointerRect.matrixTransform(svgCon.getScreenCTM());
+            inspectionRect.x = tp.x;
+            inspectionRect.y = tp.y;
+            const intersectionList = svgCon.getIntersectionList(inspectionRect, null);
+            targetElement =
+              intersectionList.length > 0 ? intersectionList[intersectionList.length - 1] : null;
+          }
+          if (evt.button === 0) {
+            this.$emit('leftClick', targetElement);
+          } else if (event.button === 2) {
+            this.$emit('rightClick', targetElement);
+          }
+        }
+      },
+      // 高亮目标元素
+      /*
+      参数：svgIds: [], 需要高亮的id的集合， flag: true / false, 是否要定位目标元素, color: '', 高亮的颜色
+    */
+      highLight(svgIds, flag, color) {
+        if (svgIds === null || svgIds === undefined) {
+          throw new Error('svgIds should be an array');
+        } else {
+          for (let index = 0; index < svgIds.length; index++) {
+            let element = svgIds[index];
+            let targetCon = svgCon.getElementById(element);
+            if (!targetCon) return;
+            this.depthTraversal(targetCon.children, color);
+          }
+          if (flag) {
+            svgTigger.reset();
+            let firstCon = svgCon.getElementById(svgIds[0]);
+            setTimeout(() => {
+              svgTigger.zoomAtPoint(1.5, {
+                x: firstCon.getBoundingClientRect().x,
+                y: firstCon.getBoundingClientRect().y,
+              });
+            }, 100);
+          }
+        }
+      },
+      // pid组高亮 深度遍历
+      depthTraversal(svgCon, color) {
+        for (let i = 0; i < svgCon.length; i++) {
+          if (svgCon[i].children.length > 0) {
+            this.depthTraversal(svgCon[i].children, color);
+          } else {
+            preTargetCon.push(svgCon[i]);
+            preTargetStyle.push({
+              fillOpacity: svgCon[i].style.fillOpacity,
+              stroke: svgCon[i].style.stroke,
+              strokeWidth: svgCon[i].style.strokeWidth,
+            });
+            svgCon[i].style.fillOpacity = '0';
+            svgCon[i].style.stroke = color;
+            svgCon[i].style.strokeWidth = 0.5;
+          }
+        }
+      },
+      // 清除上一次的高亮
+      resetHightLight() {
+        for (let i = 0; i < preTargetCon.length; i++) {
+          preTargetCon[i].style.fillOpacity = preTargetStyle[i].fillOpacity;
+          preTargetCon[i].style.stroke = preTargetStyle[i].stroke;
+          preTargetCon[i].style.strokeWidth = preTargetStyle[i].strokeWidth;
+        }
+        preTargetStyle.splice(0);
+        preTargetCon.splice(0);
+      },
+      // 更新图纸/切换图纸
+      /*
+      参数：url: 图纸的路径
+    */
+      switchSvg(url) {
+        this.$set(this, 'currentSvg', url);
+        preTargetCon.splice(0);
+        preTargetStyle.splice(0);
+        inspectionRect = null;
+        pointerRect = null;
+      },
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  #pid-svg {
+    cursor: pointer;
+    height: 100%;
+    width: 100%;
+  }
+
+  #svg-tigger {
+    cursor: pointer;
+    height: 100%;
+    width: 100%;
+  }
+</style>

package/packages/components/com-page/index.vue

@@ -1,28 +1,28 @@
 <template>
-	<el-pagination
-		:small="comTable.size == 'mini'"
-		:disabled="defaultPage.disabled"
-		:hide-on-single-page="defaultPage.single"
-		:pager-count="defaultPage.pagerCount"
-		:current-page.sync="defaultPage.currentPage"
-		:background="defaultPage.background"
-		:page-size="defaultPage.pageSize"
-		:page-sizes="defaultPage.pageSizes"
-		@size-change="sizeChange"
-		@prev-click="prevClick"
-		@next-click="nextClick"
-		@current-change="currentChange"
-		:layout="defaultPage.layout"
-		:total="defaultPage.total"
-	></el-pagination>
+  <el-pagination
+    :small="comTable.size == 'mini'"
+    :disabled="defaultPage.disabled"
+    :hide-on-single-page="defaultPage.single"
+    :pager-count="defaultPage.pagerCount"
+    :current-page.sync="defaultPage.currentPage"
+    :background="defaultPage.background"
+    :page-size="defaultPage.pageSize"
+    :page-sizes="defaultPage.pageSizes"
+    @size-change="sizeChange"
+    @prev-click="prevClick"
+    @next-click="nextClick"
+    @current-change="currentChange"
+    :layout="defaultPage.layout"
+    :total="defaultPage.total"
+  ></el-pagination>
 </template>
 
 <script>
-import base from "../../utils/base.js";
+import base from '../../utils/base.js';
 
 export default {
-  name: "comTable",
-  inject: ["comTable"],
+  name: 'comTable',
+  inject: ['comTable'],
   mixins: [base()],
   data() {
     return {
@@ -33,17 +33,17 @@ export default {
         currentPage: 1, // 当前页数
         pageSize: 10, // 每页显示多少条
         pageSizes: [10, 20, 30, 40, 50, 100],
-        layout: "total, sizes, prev, pager, next, jumper",
+        layout: 'total, sizes, prev, pager, next, jumper',
         background: true, // 背景颜色
       },
     };
   },
   created() {
     this.pageInit();
-    this.comTable.$emit("on-load", this.defaultPage);
+    this.comTable.$emit('on-load', this.defaultPage);
   },
   watch: {
-    "comTable.page": {
+    'comTable.page': {
       handler() {
         this.pageInit();
       },
@@ -61,33 +61,33 @@ export default {
       this.updateValue();
     },
     updateValue() {
-      console.log("updateValue defaultPage", this.defaultPage);
-      this.comTable.$emit("update:page", this.defaultPage);
+      console.log('updateValue defaultPage', this.defaultPage);
+      this.comTable.$emit('update:page', this.defaultPage);
     },
     //下一页事件
     nextClick(val) {
-      console.log("nextClick", val);
-      this.comTable.$emit("next-click", val);
+      console.log('nextClick', val);
+      this.comTable.$emit('next-click', val);
     },
     //上一页事件
     prevClick(val) {
-      console.log("prevClick", val);
-      this.comTable.$emit("prev-click", val);
+      console.log('prevClick', val);
+      this.comTable.$emit('prev-click', val);
     },
     // 页大小回调
     sizeChange(val) {
       this.defaultPage.currentPage = 1;
       this.defaultPage.pageSize = val;
       this.updateValue();
-      console.log("sizeChange", val);
-      this.comTable.$emit("on-load", this.defaultPage);
-      this.comTable.$emit("size-change", val);
+      console.log('sizeChange', val);
+      this.comTable.$emit('on-load', this.defaultPage);
+      this.comTable.$emit('size-change', val);
     },
     // 页码回调
     currentChange(val) {
       this.updateValue();
-      this.comTable.$emit("on-load", this.defaultPage);
-      this.comTable.$emit("current-change", val);
+      this.comTable.$emit('on-load', this.defaultPage);
+      this.comTable.$emit('current-change', val);
     },
   },
 };

package/packages/components/com-selectTree/index.vue

@@ -17,7 +17,7 @@
     :disabled="disabled"
     :filterable="filterable"
     :filter-method="filterMethod"
-    style="width: 100%;"
+    style="width: 100%"
     @clear="clear"
     @visible-change="visibleChange"
     @focus="setMinWidth"
@@ -27,7 +27,7 @@
       class="select_tree_option"
       :value="formData.id"
       :label="formData.name"
-      :style="{'width': minWidth + 2 + 'px'}"
+      :style="{ width: minWidth + 2 + 'px' }"
     >
       <el-tree
         ref="Tree"
@@ -50,7 +50,6 @@
   </el-select>
 </template>
 <script>
-
 export default {
   name: 'SelectTree',
   props: {
@@ -58,60 +57,60 @@ export default {
     // 作为 el-select value 唯一标识的键名，绑定值为对象类型时必填
     selectKey: {
       type: String,
-      default: 'id'
+      default: 'id',
     },
     valueKey: {
       type: String,
-      default: 'id'
+      default: 'id',
     },
     valueName: {
       type: String,
-      default: 'name'
+      default: 'name',
     },
     // 树形的数据
     treeData: {
       type: Array,
-      default: () => ([])
+      default: () => [],
     },
     // 下拉框默认提示
     placeholderTitle: {
       type: String,
-      default: '请选择'
+      default: '请选择',
     },
     // 每个树节点用来作为唯一标识的属性
     treeNodeKey: {
       type: [String, Number],
-      default: 'id'
+      default: 'id',
     },
     // 是否可搜
     filterable: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 是否禁用
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 是否可清空input
     clearable: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // tree的props配置
     treeProps: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     // 弹窗标题
     title: {
       type: String,
-      default: '新建'
+      default: '新建',
     },
     echoData: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -119,83 +118,82 @@ export default {
       minWidth: undefined,
       formData: {
         id: '',
-        name: ''
+        name: '',
       },
       parentList: [], // 树结构默认展开的节点的 key 的数组
       filterFlag: false,
-      currentSelect: '' // 当前选中的节点
-    }
-  },
-  computed: {
+      currentSelect: '', // 当前选中的节点
+    };
   },
+  computed: {},
   created() {
     if (this.echoData[this.selectKey]) {
-      this.parentList.push(this.echoData[this.selectKey])
-      this.$set(this, 'currentSelect', this.echoData[this.selectKey])
-      this.$set(this.formData, 'id', this.echoData[this.selectKey])
+      this.parentList.push(this.echoData[this.selectKey]);
+      this.$set(this, 'currentSelect', this.echoData[this.selectKey]);
+      this.$set(this.formData, 'id', this.echoData[this.selectKey]);
     }
   },
   mounted() {
     this.$nextTick(() => {
-      this.$refs.Tree.setCurrentKey(this.currentSelect)
-      const nodeTree = this.$refs.Tree.getCurrentNode()
+      this.$refs.Tree.setCurrentKey(this.currentSelect);
+      const nodeTree = this.$refs.Tree.getCurrentNode();
       if (nodeTree) {
-        this.$set(this.formData, 'name', nodeTree[this.valueName])
+        this.$set(this.formData, 'name', nodeTree[this.valueName]);
       }
-      if (!nodeTree) this.$set(this.formData, 'id', '')
-    })
+      if (!nodeTree) this.$set(this.formData, 'id', '');
+    });
   },
   methods: {
     /* 下拉框样式 无数据的情况下，给请选择提示设置最小宽度*/
     setMinWidth(val) {
-      this.minWidth = val.srcElement.clientWidth
+      this.minWidth = val.srcElement.clientWidth;
     },
     /* 树节点被点击时的回调 */
     handleNodeClick(data) {
-      if (!data[this.valueKey]) return
-      const DataId = data[this.valueKey]
-      const DataName = data[this.valueName]
-      this.$set(this.formData, 'id', DataId)
-      this.$set(this.formData, 'name', DataName)
-      this.$set(this, 'currentSelect', data[this.valueKey])
-      this.$refs.Select.visible = false
+      if (!data[this.valueKey]) return;
+      const DataId = data[this.valueKey];
+      const DataName = data[this.valueName];
+      this.$set(this.formData, 'id', DataId);
+      this.$set(this.formData, 'name', DataName);
+      this.$set(this, 'currentSelect', data[this.valueKey]);
+      this.$refs.Select.visible = false;
       // this.$emit('nodeClickTree', this.formData)
-      this.$emit('nodeClickTree', data)
+      this.$emit('nodeClickTree', data);
     },
     /* 下拉框出现/隐藏时触发 */
     visibleChange(e) {
       if (e) {
-        const tree = this.$refs.Tree
-        this.filterFlag && tree.filter('')
-        this.filterFlag = false
-        let selectDom = null
-        selectDom = tree.$el.querySelector('.is-current')
+        const tree = this.$refs.Tree;
+        this.filterFlag && tree.filter('');
+        this.filterFlag = false;
+        let selectDom = null;
+        selectDom = tree.$el.querySelector('.is-current');
         setTimeout(() => {
-          this.$refs.Select.scrollToOption({ $el: selectDom })
-        }, 0)
+          this.$refs.Select.scrollToOption({ $el: selectDom });
+        }, 0);
       }
     },
     clear() {
       this.formData = {
         id: '',
-        name: ''
-      }
-      this.$refs.Tree.setCurrentKey(null)
-      this.$emit('nodeClickTree', this.formData)
+        name: '',
+      };
+      this.$refs.Tree.setCurrentKey(null);
+      this.$emit('nodeClickTree', this.formData);
     },
     /* 自定义搜索方法 */
     filterMethod(val) {
-      this.filterFlag = true
-      this.$refs.Tree.filter(val)
+      this.filterFlag = true;
+      this.$refs.Tree.filter(val);
     },
     /* 对树节点进行筛选时执行的方法 */
     filterNode(value, data) {
-      if (!value) return true
-      const label = this.treeProps.label || 'name'
-      return data[label].indexOf(value) !== -1
-    }
-  }
-}
+      if (!value) return true;
+      const label = this.treeProps.label || 'name';
+      return data[label].indexOf(value) !== -1;
+    },
+  },
+};
 </script>
 <style lang="scss" scope>
 .el-select-dropdown {
@@ -219,18 +217,18 @@ export default {
   color: #1890ff;
 }
 .el-tree-node__content {
-  width: 100%!important;
-  height: 34px!important;
-  line-height: 34px!important;
+  width: 100% !important;
+  height: 34px !important;
+  line-height: 34px !important;
   overflow: hidden;
-  &:hover{
-    background-color: transparent!important;
+  &:hover {
+    background-color: transparent !important;
   }
 }
 ::v-deep .select_tree_tree .el-tree-node .el-tree-node__content .custom-tree-node {
   display: inline-block;
   vertical-align: middle;
-  width: calc(100% - 50px)!important;
+  width: calc(100% - 50px) !important;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;