n20-common-lib 1.2.43 → 1.3.0

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

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

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

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

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

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

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