n20-common-lib 1.3.3 → 1.3.6

package/src/components/NstcG6Components/NstcCharts/NstcCharts.vue

@@ -1,162 +0,0 @@
-<template>
-  <div class="charts-custom" />
-</template>
-
-<script>
-import * as echarts from 'echarts';
-import resize from './mixins/resize'
-import merge from 'lodash/merge'
-
-import { color, axisConfig, pieConfig } from './define'
-
-export default {
-  name: 'NstcCharts',
-
-  mixins: [resize],
-
-  props: {
-    isPie: {
-      type: Boolean,
-      default: false
-    },
-
-    option: {
-      type: Object,
-      require: true,
-      default: () => ({})
-    },
-
-    composedChartOption: { // 是否不跟之前设置的 option 进行合并，默认为 true，即不合并。如果合并，减少数据时，视图上还是保持着最多数据的展示效果
-      type: Boolean,
-      default: true
-    }
-  },
-
-  data() {
-    return {
-      chart: null
-    }
-  },
-
-  watch: {
-    option: {
-      deep: true,
-      handler() {
-        this.setOption()
-      }
-    }
-  },
-
-  mounted() {
-    this.initChart()
-  },
-
-  beforeDestroy() {
-    this.clear()
-  },
-
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el)
-      this.setOption()
-    },
-
-    setOption() {
-      this.chart.setOption(this.calcOption(this.option), this.composedChartOption)
-    },
-
-    grid({ grid = {}}) {
-      const selfGrid = {
-        containLabel: true
-      }
-
-      grid = Array.isArray(grid)
-          ? grid.map(item => merge({}, selfGrid, item))
-          : merge({}, selfGrid, grid)
-
-      return {
-        grid
-      }
-    },
-
-    xAxis({ xAxis }) {
-      xAxis = xAxis && xAxis.length
-          ? xAxis.map(item => merge({}, axisConfig, item))
-          : [merge({}, axisConfig, xAxis)]
-
-      return { xAxis }
-    },
-
-    yAxis({ yAxis }) {
-      yAxis =
-          yAxis && yAxis.length
-              ? yAxis.map(item => merge({}, axisConfig, item))
-              : [merge({}, axisConfig, yAxis)]
-
-      return { yAxis }
-    },
-
-    series({ series = [] }) {
-      series = series.map(sery => {
-        const type = sery.type
-        let config = {}
-
-        if (type === 'bar') {
-          config = {
-            itemStyle: {
-              barBorderRadius: 'stack' in sery ? 0 : [100, 100, 0, 0]
-            }
-          }
-        } else if (type === 'line') {
-          config = {
-            smooth: true
-          }
-        } else if (type === 'pie') {
-          config = pieConfig
-        }
-
-        return merge(config, sery)
-      })
-
-      return { series }
-    },
-
-    calcOption(params) {
-      const base = ['grid', 'series']
-      const keys = this.isPie
-          ? base
-          : base.concat(['xAxis', 'yAxis'])
-      const defaultConfigs = {
-        color,
-        barMaxWidth: 32,
-        barGap: 0
-      }
-
-      if (params.baseOption) {
-        const { baseOption, options, ...other } = params
-
-        const _baseOption = keys.reduce((prev, key) => {
-          return { ...prev, ...this[key](baseOption) }
-        }, defaultConfigs)
-
-        return { options, baseOption: merge({}, _baseOption, baseOption), ...other }
-      }
-
-      const option = keys.reduce((prev, key) => {
-        return { ...prev, ...this[key](params) }
-      }, defaultConfigs)
-
-      return merge({}, option, params)
-    },
-
-    clear() {
-      if (this.chart) {
-        this.chart.clear()
-        this.chart.dispose()
-        this.chart = null
-      }
-    }
-  }
-}
-</script>
-

package/src/components/NstcG6Components/NstcCharts/define.js

@@ -1,74 +0,0 @@
-
-const color = ['#99C0E5', '#A6ACE3', '#EFC27A', '#99DCD2', '#C1C1C1', '#FFB59E', '#EF8787']
-
-const axisConfig = {
-  nameTextStyle: {
-    color: '#3d4a57',
-    fontSize: 12
-  },
-  axisLabel: {
-    color: '#3d4a57',
-    fontSize: 12
-  },
-  axisLine: {
-    lineStyle: {
-      color: '#AEAEAE'
-    }
-  },
-  axisTick: {
-    show: false
-  },
-  splitLine: {
-    lineStyle: {
-      color: '#D0D0D0'
-    }
-  }
-}
-
-const pieConfig = {
-  radius: ['38%', '54%'],
-  center: ['50%', '50%'],
-  label: {
-    show: false,
-    position: 'center',
-    color: '#3d4a57',
-    fontSize: 18,
-    formatter: '{b}\n\n{d}%'
-    // formatter: function({ name, percent }) {
-    //   let nameStr = name
-    //   let wrapLength =
-    //     sery.label &&
-    //     sery.label.wrap &&
-    //     sery.label.wrap.length
-    //   let result = ''
-    //
-    //   // 如果有换行配置，并且名字的长度大于换行限制的长度，对名字进行换行
-    //   if (wrapLength && name && name.length > wrapLength) {
-    //     nameStr =
-    //       name.slice(0, wrapLength) +
-    //       '\n' +
-    //       name.slice(wrapLength)
-    //   }
-    //
-    //   // 如果要隐藏名称，则只显示percent
-    //   if (sery.label && sery.label.hideName) {
-    //     result = percent
-    //   } else {
-    //     result = `${nameStr}\n(${percent}%)`
-    //   }
-    //
-    //   return result
-    // }
-  },
-  emphasis: {
-    label: {
-      show: true
-    }
-  }
-}
-
-export {
-  color,
-  axisConfig,
-  pieConfig
-}

package/src/components/NstcG6Components/NstcCharts/mixins/resize.js

@@ -1,56 +0,0 @@
-import { debounce } from '../../../../utils/debounce'
-
-export default {
-  data() {
-    return {
-      $_sidebarElm: null,
-      $_resizeHandler: null
-    }
-  },
-  mounted() {
-    this.initListener()
-  },
-  activated() {
-    if (!this.$_resizeHandler) {
-      // avoid duplication init
-      this.initListener()
-    }
-
-    // when keep-alive chart activated, auto resize
-    this.resize()
-  },
-  beforeDestroy() {
-    this.destroyListener()
-  },
-  deactivated() {
-    this.destroyListener()
-  },
-  methods: {
-    // use $_ for mixins properties
-    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
-    $_sidebarResizeHandler(e) {
-      if (e.propertyName === 'width') {
-        this.$_resizeHandler()
-      }
-    },
-    initListener() {
-      this.$_resizeHandler = debounce(() => {
-        this.resize()
-      }, 100)
-      window.addEventListener('resize', this.$_resizeHandler)
-
-      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
-    },
-    destroyListener() {
-      window.removeEventListener('resize', this.$_resizeHandler)
-      this.$_resizeHandler = null
-
-      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
-    },
-    resize() {
-      const { chart } = this
-      chart && chart.resize()
-    }
-  }
-}

package/src/components/NstcG6Components/NstcConfirm/NstcConfirm.vue

@@ -1,153 +0,0 @@
-<template>
-  <div class="confirmTip">
-    <NstcDialog
-        v-model="dialogVisible"
-        width="432px"
-        :show-close="false"
-        :closeAfterConfirm="false"
-        :show-footer="true"
-        @confirm="ok"
-        @close="cancel"
-    >
-      <div class="main">
-        <div class="main-item">
-          <i
-              class="el-icon-error errorColor i-item"
-              v-if="config.type == 'error'"
-          ></i>
-          <i
-              class="el-icon-question question i-item"
-              v-if="config.type == 'question'"
-          ></i>
-          <i
-              class="el-icon-info infoColor i-item"
-              v-if="config.type == 'info'"
-          ></i>
-          <div class="title margin-l-8">{{ config.title }}</div>
-        </div>
-
-        <div class="main-item margin-t-12">
-          <i class="el-icon-error errorColor i-item" style="opacity: 0"></i>
-          <div class="info margin-l-8" v-if="config.info">
-            {{ config.info }}
-          </div>
-        </div>
-        <div class="reject-message" v-if="config.rejectMessage">
-          <el-input
-              type="textarea"
-              :rows="4"
-              :placeholder="config.rejectMessagePlaceHolder"
-              maxlength="100"
-              show-word-limit
-              v-model="message"
-          >
-          </el-input>
-        </div>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="ok" v-if="config.button.ok">{{
-            config.button.ok
-          }}</el-button>
-        <el-button
-            class="nstc-g6-common-btn-2"
-            @click="cancel"
-            plain
-            v-if="config.button.cancel"
-        >{{ config.button.cancel }}</el-button
-        >
-      </span>
-      <!-- </el-dialog> -->
-    </NstcDialog>
-  </div>
-</template>
-
-<script>
-import NstcDialog from "@/components/NstcG6Components/NstcDialog/NstcDialog";
-export default {
-  name: "NstcConfirm",
-  components: {
-    NstcDialog
-  },
-  data() {
-    return {
-      dialogVisible: true,
-      config: {
-        type: "question",
-        title: "提示语言",
-        info: "详情提示语言",
-        rejectMessage: false, //驳回意见
-        rejectMessagePlaceHolder: "",
-        button: {
-          ok: "确定",
-          cancel: "取消",
-        },
-      },
-      message: "",
-    };
-  },
-  mounted() {},
-  methods: {
-    ok() {},
-    cancel() {},
-  },
-};
-</script>
-
-<style lang="scss">
-.errorColor {
-  color: #ff3b30;
-}
-.question {
-  color: #ffbf00;
-}
-.infoColor {
-  color: #ffbf00;
-}
-.i-item {
-  font-size: 22px;
-}
-.title {
-  font-size: 16px;
-  font-weight: 500;
-  text-align: left;
-  color: rgba(0, 0, 0, 0.85);
-  line-height: 24px;
-}
-.info {
-  font-size: 14px;
-  font-weight: 400;
-  text-align: left;
-  color: #666666;
-  line-height: 22px;
-}
-.main-item {
-  display: flex;
-  align-items: center;
-}
-.margin-l-8 {
-  margin-left: 8px;
-}
-.margin-t-12 {
-  margin-top: 12px;
-}
-</style>
-<style scoped>
-.confirmTip /deep/ .el-dialog {
-  margin-top: 36vh !important;
-}
-.confirmTip /deep/.el-dialog__header {
-  /* display: none; */
-  border-bottom: none !important;
-}
-.confirmTip /deep/.el-dialog__body {
-  padding: 24px;
-  padding-bottom: 0px;
-  padding: 0 20px !important;
-}
-.confirmTip /deep/.el-dialog__footer {
-  padding: 16px;
-}
-.confirmTip /deep/.el-dialog__headerbtn {
-  display: none;
-}
-</style>

package/src/components/NstcG6Components/NstcConfirm/index.js

@@ -1,25 +0,0 @@
-import Vue from 'vue'
-import confirm from './NstcConfirm'
-
-const confirmCon = Vue.extend(confirm);
-const confirmFunction = (config, ok, cancel) => {
-    return new Promise((res, rej) => {
-        let confirmDom = new confirmCon({
-            el: document.createElement('div')
-        })
-        document.body.appendChild(confirmDom.$el);
-        console.log(confirmDom, 'confirmDom----------------');
-        confirmDom.config = config;
-        confirmDom.ok = ok ||
-            function () {
-                res()
-                confirmDom.dialogVisible = false
-            }
-        confirmDom.cancel = cancel || function () {
-            rej()
-            confirmDom.dialogVisible = false
-        }
-    })
-
-}
-export default confirmFunction;

package/src/components/NstcG6Components/NstcDialog/NstcDialog.vue

@@ -1,185 +0,0 @@
-<template>
-  <el-dialog
-      class="Nstc-dialog"
-      v-drag
-      :visible.sync="dialogVisible"
-      v-bind="$attrs"
-      :center="center"
-      :show-close="showClose"
-      :custom-class="customClass"
-      :append-to-body="toBody"
-      :close-on-click-modal="closeOnClickModal"
-      :close-on-press-escape="closeOnPressEscape"
-      :before-close="()=>{handleClose()}"
-      v-on="$listeners"
-  >
-    <template slot="title">
-      <span class="el-dialog__title">{{ title }}</span>
-      <button class="el-dialog__headerbtn" @click="handleClose">
-        <i class="el-dialog__close el-icon-close"></i>
-      </button>
-    </template>
-    <slot></slot>
-
-    <slot name="after"></slot>
-    <div
-        v-if="showFooter"
-        slot="footer"
-        class="dialog-footer"
-    >
-      <el-button
-          v-if="footerHandlers.confirm"
-          type="primary"
-          :disabled="footerHandlers.confirm.disabled || confirmDisabledFlag"
-          :class="footerHandlers.confirm.className"
-          @click="handleConfirm"
-      >
-        {{ footerHandlers.confirm.text || '确认' }}
-      </el-button>
-      <el-button
-          v-if="footerHandlers.cancel"
-          plain
-          :class="footerHandlers.cancel.className"
-          @click="handleClose"
-      >
-        {{ footerHandlers.cancel.text || '取消' }}
-      </el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  name: 'NstcDialog',
-  props: {
-    value: {
-      type: Boolean,
-      default: false
-    },
-
-    title: {
-      type: String,
-      default: ''
-    },
-
-    center: {
-      type: Boolean,
-      default: false
-    },
-
-    footerHandlers: {
-      type: Object,
-      default:  () => {
-        return {
-          confirm: {
-            text: '', //this.$t('common_w_0002')
-            className: '',
-            disabled: false
-          },
-          cancel: {
-            text: '', // this.t('common_w_0003')
-            className: '',
-            disabled: false
-          }
-        }
-      },
-
-    },
-    toBody: {
-      type: Boolean,
-      default: true
-    },
-    customClass: {
-      type: String,
-      default: ''
-    },
-
-    showFooter: {
-      type: Boolean,
-      default: true
-    },
-
-    showClose: {
-      type: Boolean,
-      default: false
-    },
-
-    /** 是否在点击确认按钮后关闭弹窗 */
-    closeAfterConfirm: {
-      type: Boolean,
-      default: true
-    },
-
-    /** 是否在点击确认按钮后立即关闭弹窗 */
-    immediateCloseAfterHandler: {
-      type: Boolean,
-      default: false
-    },
-
-    closeOnClickModal: {
-      type: Boolean,
-      default: false
-    },
-
-    closeOnPressEscape: {
-      type: Boolean,
-      default: false
-    },
-
-    confirmDisabledFlag: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    dialogVisible: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    }
-  },
-  methods: {
-    handleConfirm() {
-      this.handleListeners('confirm')
-    },
-
-    handleClose() {
-      this.handleListeners('cancel')
-    },
-
-    async handleListeners(type) {
-      this.loading = true
-      try {
-        const listener = this.$listeners[type]
-        const closeAfterListener = this.closeAfterConfirm || type === 'cancel'
-
-        if (this.immediateCloseAfterHandler) {
-          if (closeAfterListener) {
-            this.dialogVisible = false
-          }
-
-          listener && await listener()
-        } else {
-          listener && await listener()
-
-          if (closeAfterListener) {
-            this.dialogVisible = false
-          }
-        }
-      } catch (err) {
-        console.error(err)
-
-        err && err.type === 'VALIDATE_ERROR' && this.$message({
-          type: 'warning',
-          message: err.msg
-        })
-      } finally {
-        this.loading = false
-      }
-    }
-  }
-}
-</script>