cnhis-design-vue 2.2.3 → 2.2.6

package/packages/fabric-chart/src/components/DropPopup.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="c-drop-popup" :style="dialogStyle">
-    <div class="c-drop-popup-list">
-      <span>{{val.title}}</span>
-      <span v-for="item in val.list" :key="item.id">
-        {{`${item.name}: ${item.value}`}}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-import FabricCommon from '../mixins/fabricCommon';
-
-export default {
-  name: 'CDropPopup',
-  mixins: [FabricCommon],
-  props: {
-    dropPos: {
-      type: Object,
-      required: true
-    },
-    val: {
-      type: Object,
-      required: true
-    }
-  },
-
-  computed: {
-    dialogStyle() {
-      const { canvasWidth, canvasHeight } = this.propItems;
-      const { left, top } = this.dropPos;
-      const marginLeft = this.dropPos.margin?.left || 5;
-      const marginTop = this.dropPos.margin?.top || 0;
-      const style = {
-        top: '',
-        bottom: '',
-        left: '',
-        right: '',
-        'transform-origin': ''
-      };
-      const height = 200;
-      if (canvasWidth - (left + marginLeft) < height) {
-        style.right = canvasWidth - left + marginLeft + 'px';
-        style['transform-origin'] = 'right';
-      } else {
-        style.left = (left + marginLeft) + 'px';
-        style['transform-origin'] = 'left';
-      }
-      if (canvasHeight - (top + marginTop) < height) {
-        style.bottom = canvasHeight - top + marginTop + 'px';
-        style['transform-origin'] += ' bottom';
-      } else {
-        style.top = (top + marginTop) + 'px';
-        style['transform-origin'] += ' top';
-      }
-      return style;
-    }
-  },
-
-  mounted() {
-  },
-};
-</script>
-
-<style lang="less" scoped>
-ul,
-li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.c-drop-popup {
-  position: absolute;
-  z-index: 1001;
-  background: #fff;
-  box-shadow: 0 2px 12px 0 rgba(56, 56, 56, 0.2);
-  border: 1px solid #e2e6ed;
-  border-radius: 2px;
-  font-size: 12px;
-}
-.c-drop-popup-list {
-  // height: 36px;
-  padding: 8px 12px;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-}
-
-</style>

package/packages/fabric-chart/src/components/MouseRightClick.vue

@@ -1,168 +0,0 @@
-<template>
-  <div class="c-mouse-right-menu-popup c-animation-in" :style="dialogStyle">
-    <div class="c-mouse-right-menu">
-      <div v-for="(item, index) in nodeList" :key="index" class="c-mouse-menu-item" @click="handleNodeClick(item)">
-        <span>{{ item.name }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CMouseRightClick',
-  props: {
-    nodeList: {
-      type: Array,
-      require: true
-    },
-    rightPos: {
-      type: Object,
-      required: true
-    },
-    getContainer: Function
-  },
-
-  computed: {
-    dialogStyle() {
-      const screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
-      const screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
-      const style = {
-        top: '',
-        bottom: '',
-        left: '',
-        right: '',
-        'transform-origin': ''
-      };
-      const height = 200;
-      if (screenWidth - this.rightPos.clientX < height) {
-        style.right = screenWidth - this.rightPos.clientX + 'px';
-        style['transform-origin'] = 'right';
-      } else {
-        style.left = this.rightPos.clientX + 'px';
-        style['transform-origin'] = 'left';
-      }
-      if (screenHeight - this.rightPos.clientY < height) {
-        style.bottom = screenHeight - this.rightPos.clientY + 'px';
-        style['transform-origin'] += ' bottom';
-      } else {
-        style.top = this.rightPos.clientY + 'px';
-        style['transform-origin'] += ' top';
-      }
-      return style;
-    }
-  },
-
-  mounted() {
-    this.$nextTick(() => {
-      const body = this.getContainer() ? this.getContainer(): document.querySelector('body');
-      if (body.append) {
-        body.append(this.$el);
-      } else {
-        body.appendChild(this.$el);
-      }
-    });
-  },
-  methods: {
-    handleNodeClick(item) {
-      this.$emit('nodeClick', item);
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-ul,
-li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.c-mouse-right-menu-popup {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  z-index: 1001;
-  background: #fff;
-  box-shadow: 0 2px 12px 0 rgba(56, 56, 56, 0.2);
-  border: 1px solid #e2e6ed;
-  border-radius: 2px;
-  font-size: 12px;
-}
-.c-mouse-right-menu {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  svg {
-    position: absolute;
-    left: 5px;
-    top: 8px;
-    fill: #3d4757;
-    stroke: #3d4757;
-  }
-}
-.c-mouse-menu-item {
-  flex-shrink: 0;
-  flex-grow: 1;
-  position: relative;
-  padding: 0 32px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  text-align: left;
-  position: relative;
-  cursor: pointer;
-  svg {
-    position: absolute;
-    left: 5px;
-    top: 8px;
-    fill: #3d4757;
-    stroke: #3d4757;
-  }
-}
-.c-mouse-menu-item:hover {
-  background: #ecf5ff;
-  color: #2d7aff;
-  svg {
-    fill: #2d7aff;
-    stroke: #2d7aff;
-  }
-}
-.c-mouse-right-menu-line {
-  width: 100%;
-  height: 1px;
-  padding: 0;
-  background-color: #e2e6ed;
-}
-
-.c-animation-in {
-  animation: fadeScaleYIn 0.2s ease-in-out;
-}
-.c-animation-out {
-  animation: fadeScaleYOut 0.2s ease-in-out;
-}
-@keyframes fadeScaleYIn {
-  0% {
-    opacity: 0;
-    transform: scaleY(0.8);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes fadeScaleYOut {
-  0% {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-
-  to {
-    opacity: 0;
-    transform: scaleY(0);
-  }
-}
-</style>

package/packages/fabric-chart/src/components/TimeScaleValue.vue

@@ -1,125 +0,0 @@
-<template>
-  <div v-show="isShow" class="c-time-scalevalue" :style="{ '--left': popupStyle.left, '--top': popupStyle.top, '--height': popupStyle.height, '--width': popupStyle.width }">
-    <span
-      class="c-time-scalevalue-list"
-      v-show="index % 2 == 0"
-      v-for="(item, index) in times"
-      :key="item.left"
-      :style="{ left: `${item.left - item.width / 2}px`, '--font-size': popupStyle.fontSize }"
-    >
-      {{ item.time }}
-    </span>
-  </div>
-</template>
-
-<script>
-// import Vue from 'vue';
-// import DomPortal from 'vue-dom-portal';
-import vexutils from '@/utils/vexutils';
-import fabricCommon from '../mixins/fabricCommon';
-
-export default {
-  mixins: [fabricCommon],
-  props: {
-    times: {
-      type: Array,
-      required: true
-    }
-    // to: {
-    //   type: String,
-    //   default: 'body'
-    // }
-  },
-  // beforeCreate() {
-  //   Vue.use(DomPortal);
-  // },
-  data() {
-    return {
-      cFabricChart: null,
-      scrollEvent: null,
-      popupStyle: {
-        width: '1000px',
-        height: '80px',
-        left: 0,
-        top: 0,
-        fontSize: '12px'
-      },
-      isShow: false
-    };
-  },
-  computed: {
-    popupTop() {
-      return this.$attrs.templateData.top?.xScalevalue?.popupTop ?? 0;
-    }
-  },
-  watch: {
-    popupTop: {
-      handler(value) {
-        this.popupStyle.top = `${value}px`;
-      }
-    }
-  },
-  mounted() {
-    this._timer = setInterval(() => {
-      if (document.readyState === 'complete') {
-        this.initDoc();
-        clearInterval(this._timer);
-      }
-    }, 500);
-  },
-  methods: {
-    initDoc() {
-      // this.to = this.templateData.top?.xScalevalue?.to || 'body';
-      const { xScalevalue } = this.$attrs.templateData.top || {};
-      const { canvasWidth, spaceHeight, xCellWidth } = this.propItems;
-      this.cFabricChart = this.canvas.wrapperEl?.parentNode?.parentNode;
-      // this.bodyHeight = document.body.getBoundingClientRect().height;
-      
-      this.popupStyle = {
-        left: `${this.cFabricChart?.getBoundingClientRect()?.left || 0}px`,
-        top: `${this.popupTop}px`,
-        width: `${canvasWidth}px`,
-        height: `${spaceHeight}px`,
-        fontSize: `${xScalevalue.style?.fontSize || 12}px`
-      };
-      // const spaceGridNumber = xScalevalue.spaceGridNumber || 3;
-      // this.marginLeft = `${xCellWidth * spaceGridNumber}px`;
-      // 节流的间隔时间不宜太大，因为实际top值不准，会造成判断条件不准确
-      if (!this.scrollEvent) {
-        this.scrollEvent = vexutils.debounce(this.scroll, 80);
-        window.addEventListener('scroll', this.scrollEvent, true);
-      }
-    },
-    scroll() {
-      if (this.cFabricChart) {
-        const { originYTime } = this.propItems;
-        const top = this.cFabricChart.getBoundingClientRect().top;
-        this.isShow = top + originYTime < this.popupTop ? true : false;
-      }
-    }
-  },
-  beforeDestroy() {
-    this._timer && clearInterval(this._timer);
-    window.removeEventListener('scroll', this.scrollEvent, true);
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.c-time-scalevalue {
-  position: fixed;
-  z-index: 999;
-  left: var(--left);
-  top: var(--top);
-  width: var(--width);
-  height: var(--height);
-  background: rgba(0, 0, 0, 0.6);
-  color: #fff;
-  &-list {
-    position: absolute;
-    line-height: var(--height);
-    transform-origin: center;
-    font-size: var(--font-size);
-  }
-}
-</style>

package/packages/fabric-chart/src/const/defaultVaule.js

@@ -1,61 +0,0 @@
-const data = {
-  style: {
-    evented: false,
-    selectable: false,
-    objectCaching: false
-  },
-  rectStyle: {
-    fill: 'transparent',
-    stroke: '#999',
-    strokeWidth: 1
-  },
-  textStyle: {
-    fontFamily: '微软雅黑',
-    fontSize: 12,
-    fill: '#000',
-    lineHeight: 1
-  },
-  borderStyle: {
-    stroke: '#999',
-    strokeWidth: 1,
-    selectable: false,
-    evented: false
-  },
-  // 折线图中的点
-  pointStyle: {
-    fill: '#ffffff', // 填充色
-    stroke: '#000000', // 描边色
-    originX: 'center',
-    originY: 'center'
-  },
-  // 折线图中的线
-  lineStyle: {
-    stroke: '#000', // 描边色
-    strokeWidth: 1, // 描边宽度
-    originX: 'center',
-    originY: 'center'
-  },
-  topSpaceHeight: 20, // templateData.top.spaceHeight
-  topSpaceGridNumber: 3, // templateData.top.xScalevalue.spaceGridNumber
-  leftSpaceGridNumber: 2, // templateData.left.leftYScalevalue.spaceGridNumber
-  rightSpaceGridNumber: 2, // templateData.right.rightYScalevalue.spaceGridNumber
-  topTotal: {
-    title: '总量',
-    width: 0,
-    style: {
-      fontFamily: '微软雅黑',
-      fontSize: 12,
-      fill: '#000',
-      lineHeight: 1
-    }
-  },
-  criticalStyle: {
-    // 危急值样式
-    stroke: 'purple', // 颜色 默认 #999
-    strokeWidth: 1, // 线宽 默认 1
-    strokeDashArray: [0, 0] // 实线设置 默认[0, 0]
-  },
-  bottomNumberLeftSpace: 10 // 底部标记的序号与标记之间的距离
-};
-
-export default data;