fl-web-component 0.1.0 → 1.0.0

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

@@ -0,0 +1,101 @@
+<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>
+</template>
+
+<script>
+import base from '../../utils/base.js';
+
+export default {
+  name: 'comTable',
+  inject: ['comTable'],
+  mixins: [base()],
+  data() {
+    return {
+      defaultPage: {
+        single: false,
+        total: 0, // 总页数
+        pagerCount: 7, //超过多少条隐藏
+        currentPage: 1, // 当前页数
+        pageSize: 10, // 每页显示多少条
+        pageSizes: [10, 20, 30, 40, 50, 100],
+        layout: 'total, sizes, prev, pager, next, jumper',
+        background: true, // 背景颜色
+      },
+    };
+  },
+  created() {
+    this.pageInit();
+    this.comTable.$emit('on-load', this.defaultPage);
+  },
+  watch: {
+    'comTable.page': {
+      handler() {
+        this.pageInit();
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    pageFlag() {
+      return this.defaultPage.total != 0;
+    },
+  },
+  methods: {
+    pageInit() {
+      this.defaultPage = Object.assign(this.defaultPage, this.comTable.page);
+      this.updateValue();
+    },
+    updateValue() {
+      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);
+    },
+    //上一页事件
+    prevClick(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);
+    },
+    // 页码回调
+    currentChange(val) {
+      this.updateValue();
+      this.comTable.$emit('on-load', this.defaultPage);
+      this.comTable.$emit('current-change', val);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-pagination {
+  text-align: right;
+  padding: 15px 10px 15px 20px !important;
+}
+</style>

package/packages/components/com-selectTree/Readme.md

@@ -0,0 +1,17 @@
+<!-- 使用方法 样例 -->
+<SelectTree
+  ref="SelectTree"
+  :filterable="true"
+  :value-key="`deptId`"
+  :select-key="`deptId`"
+  :value-name="`deptName`"
+  :tree-data="item.optionArr"
+  :tree-props="{
+    id: 'deptId',
+    label: 'deptName',
+    children: 'children'
+  }"
+  :tree-node-key="`deptId`"
+  :placeholder-title="`请选择${item.label}`"
+  @nodeClickTree="nodeClickTree"
+/>

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

@@ -0,0 +1,236 @@
+<!--
+ * @Author: fengyang9326@163.com
+ * @Date: 2024-05-13 10:36:07
+ * @LastEditors: fengyang9326@163.com
+ * @LastEditTime: 2024-05-20 09:38:24
+ * @FilePath: /web/components/com-selectTree/index.vue
+ * @Description: 树结构下拉框
+-->
+<template>
+  <el-select
+    ref="Select"
+    v-model="formData"
+    :value-key="selectKey"
+    :placeholder="placeholderTitle"
+    size="medium"
+    :clearable="clearable"
+    :disabled="disabled"
+    :filterable="filterable"
+    :filter-method="filterMethod"
+    style="width: 100%"
+    @clear="clear"
+    @visible-change="visibleChange"
+    @focus="setMinWidth"
+  >
+    <el-option
+      ref="option"
+      class="select_tree_option"
+      :value="formData.id"
+      :label="formData.name"
+      :style="{ width: minWidth + 2 + 'px' }"
+    >
+      <el-tree
+        ref="Tree"
+        class="select_tree_tree"
+        :node-key="treeNodeKey"
+        :current-node-key="currentSelect"
+        :data="treeData"
+        :props="treeProps"
+        :highlight-current="true"
+        :expand-on-click-node="false"
+        :default-expanded-keys="parentList"
+        :filter-node-method="filterNode"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ node }" class="custom-tree-node">
+          <span :title="node.label" class="title_tree">{{ node.label }}</span>
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'SelectTree',
+  props: {
+    // v-model绑定
+    // 作为 el-select value 唯一标识的键名，绑定值为对象类型时必填
+    selectKey: {
+      type: String,
+      default: 'id',
+    },
+    valueKey: {
+      type: String,
+      default: 'id',
+    },
+    valueName: {
+      type: String,
+      default: 'name',
+    },
+    // 树形的数据
+    treeData: {
+      type: Array,
+      default: () => [],
+    },
+    // 下拉框默认提示
+    placeholderTitle: {
+      type: String,
+      default: '请选择',
+    },
+    // 每个树节点用来作为唯一标识的属性
+    treeNodeKey: {
+      type: [String, Number],
+      default: 'id',
+    },
+    // 是否可搜
+    filterable: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否可清空input
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    // tree的props配置
+    treeProps: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 弹窗标题
+    title: {
+      type: String,
+      default: '新建',
+    },
+    echoData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      // 下拉框最小宽度样式
+      minWidth: undefined,
+      formData: {
+        id: '',
+        name: '',
+      },
+      parentList: [], // 树结构默认展开的节点的 key 的数组
+      filterFlag: false,
+      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]);
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.Tree.setCurrentKey(this.currentSelect);
+      const nodeTree = this.$refs.Tree.getCurrentNode();
+      if (nodeTree) {
+        this.$set(this.formData, 'name', nodeTree[this.valueName]);
+      }
+      if (!nodeTree) this.$set(this.formData, 'id', '');
+    });
+  },
+  methods: {
+    /* 下拉框样式 无数据的情况下，给请选择提示设置最小宽度*/
+    setMinWidth(val) {
+      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;
+      // this.$emit('nodeClickTree', this.formData)
+      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');
+        setTimeout(() => {
+          this.$refs.Select.scrollToOption({ $el: selectDom });
+        }, 0);
+      }
+    },
+    clear() {
+      this.formData = {
+        id: '',
+        name: '',
+      };
+      this.$refs.Tree.setCurrentKey(null);
+      this.$emit('nodeClickTree', this.formData);
+    },
+    /* 自定义搜索方法 */
+    filterMethod(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;
+    },
+  },
+};
+</script>
+<style lang="scss" scope>
+.el-select-dropdown {
+  padding: 5px 0;
+}
+.select_tree_option {
+  &.el-select-dropdown__item {
+    height: auto;
+    line-height: 1;
+    padding: 0;
+    background-color: #fff;
+  }
+}
+
+.select_tree_tree {
+  padding: 0px 0px;
+  font-weight: 400;
+}
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: #fff;
+  color: #1890ff;
+}
+.el-tree-node__content {
+  width: 100% !important;
+  height: 34px !important;
+  line-height: 34px !important;
+  overflow: hidden;
+  &: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;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>

package/packages/components/com-table/column-default.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <component :is="comTable.tableColumnName" width="1px"></component>
+    <!-- 选择框 -->
+    <component
+      :is="comTable.tableColumnName"
+      v-if="comTable.tableOption.selection"
+      :fixed="vaildData(comTable.tableOption.selectionFixed, config.selectionFixed)"
+      type="selection"
+      key="selection"
+      :selectable="comTable.tableOption.selectable"
+      align="center"
+    ></component>
+    <!-- 序号 -->
+    <component
+      :is="comTable.tableColumnName"
+      v-if="vaildData(comTable.tableOption.index)"
+      :fixed="vaildData(comTable.tableOption.indexFixed, config.indexFixed)"
+      :label="comTable.tableOption.indexLabel || config.indexLabel"
+      type="index"
+      key="index"
+      :index="indexMethod"
+      align="center"
+    >
+    </component>
+  </div>
+</template>
+
+<script>
+import config from './config.js';
+import base from '../../utils/base.js';
+
+export default {
+  name: 'comTable',
+  mixins: [base()],
+  components: {},
+  data() {
+    return {
+      config: config,
+    };
+  },
+  inject: ['comTable'],
+  mounted() {
+    this.setSort();
+  },
+  methods: {
+    indexMethod(index) {
+      return (
+        index +
+        1 +
+        ((this.comTable.page.currentPage || 1) - 1) * (this.comTable.page.pageSize || 10)
+      );
+    },
+    setSort() {
+      this.rowDrop();
+    },
+    rowDrop() {
+      if (!this.comTable.$refs.table) return;
+      const el = this.comTable.$refs.table.$el.querySelectorAll(this.config.dropRowClass)[0];
+      this.comTable.tableDrop('row', el, (evt) => {
+        const oldIndex = evt.oldIndex;
+        const newIndex = evt.newIndex;
+        const targetRow = this.comTable.list.splice(oldIndex, 1)[0];
+        this.comTable.list.splice(newIndex, 0, targetRow);
+        this.comTable.$emit('sortable-change', oldIndex, newIndex);
+        this.comTable.refreshTable(() => this.rowDrop());
+      });
+    },
+  },
+};
+</script>