@wp1001/ui 2.9.13

package/packages/components/xchart/index.js

@@ -0,0 +1,263 @@
+import { baseDialog, baseTable } from '../../utils/model.js'
+import utils from './utils.js'
+import {
+  TYPES, SORTS,
+  COMMON_FORMATTERS, DATE_FORMATTERS, NUMBER_FORMATTERS, FORMATTERS,
+} from './constants.js'
+const { funcs, highdict } = StardustJs
+const { StardustEcharts } = StardustBrowser
+
+const OPTIONS_COMPONENTS = [
+  'x-select', 'x-select-v2', 'x-radios', 'x-checkboxs',
+  'XSelect', 'XSelectV2', 'XRadios', 'XCheckboxs'
+]
+
+export default {
+  name: 'XChart',
+  props: {
+    ...utils.props
+  },
+  data () {
+    return {
+      zoom: 1,
+      loading: false,
+      filterType: '分类',
+      SORTS,
+      dialog: {
+        ...baseDialog(),
+        formItems: utils.formItems,
+        form: utils.form
+      },
+      hasRendered: false,
+      dataDialog: {
+        visible: false,
+        table: baseTable()
+      }
+    }
+  },
+  computed: {
+    ...utils.computed
+  },
+  watch: {
+    option: {
+      handler: 'update',
+      immediate: true
+    },
+    zoomedHeight () {
+      this.$nextTick(this.resize)
+    },
+    sidebarCollapse () {
+      const duration = (this.$store.app.toggleDuration || 0) * 1000 + 50
+      const interval = 50
+      for (let i = 0; i < Math.ceil(duration / interval); i++) {
+        setTimeout(this.resize, interval * i)
+      }
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  beforeUnmount () {
+    this.timer && clearInterval(this.timer)
+    this.observer.disconnect()
+  },
+  methods: {
+    async init () {
+      await window.DynamicLibs?.use('echarts')
+      window.echarts._transforms_ ||= {}
+      if (!window.echarts._transforms_['StardustEcharts.grouping']) {
+        window.echarts.registerTransform(StardustEcharts.grouping)
+        window.echarts._transforms_['StardustEcharts.grouping'] = StardustEcharts.grouping
+      }
+      if (this.chart) this.$refs.el.removeAttribute('_echarts_instance_')
+      this.chart = window.echarts.init(this.$refs.el, null, this.option)
+      this.observer = new ResizeObserver(this.resize)
+      this.observer.observe(this.$refs.el)
+      this.update(this.getOption())
+      if (this.updator) {
+        this.timer = setInterval(this.updator.handler.bind(this), this.updator.interval || 1000)
+      }
+    },
+    initDatasource () {
+      if (!this.datasource) return
+      const columns = this.datasource.columns.filter(col => !TYPES.includes(col.type)).map(col => {
+        const column = { ...col, prop: col.label }
+        column.formatters = Object.keys(COMMON_FORMATTERS)
+        if (col.type === 'date' || ['el-date-picker', 'ElDatePicker'].includes(col.comp)) {
+          column.formatters.push(...Object.keys(DATE_FORMATTERS))
+        } else if (col.type === 'number' || ['el-input-number', 'ElInputNumber'].includes(col.comp)) {
+          column.formatters.push(...Object.keys(NUMBER_FORMATTERS))
+        }
+        return column
+      })
+      this.dialog.formItems.slice(0, 3).forEach(it => it.options = columns)
+      this.handleMakeChart()
+    },
+    handleCalcFormatters (item) {
+      const value = this.dialog.form[item.prop]
+      if (!value) {
+        this.dialog.form[item.prop + '_formatter'] = ''
+        return item.formatters = []
+      }
+      this.dialog.form[item.prop + '_formatter'] = '原样'
+      item.formatters = item.options.find(op => op.prop === value).formatters
+    },
+    async handleMakeChart () {
+      if (this.loading) return
+      if (!await this.dialog.formRef?.validate()) return
+      this.dialog.visible = false
+      this.loading = true
+      const rich = { ...this.dialog.form }
+      const { category, series, value } = rich
+      const attributes = [category, series, value].map(e => {
+        return e && this.datasource.columns.find(c => c.label === e)?.prop
+      }).filter(e => e)
+      if (!rich.filter?.category.isLimit) rich.filter.category.mergeOthers = false
+      if (!rich.filter?.series.isLimit) rich.filter.series.mergeOthers = false
+      let list = this.datasource.list
+      if (this.datasource.search) {
+        list = await this.datasource.search({ attributes })
+      }
+      rich.data = list
+      this.setRich(rich)
+      this.loading = false
+    },
+    handleViewData () {
+      this.dataDialog.table.columns = this.excel.header.map((label, index) => {
+        return {
+          label,
+          prop: index + '',
+          sortable: false,
+          tableAttrs: { minWidth: Math.min(label.length * 12 + 20, 150) }
+        }
+      })
+      this.dataDialog.table.list = this.excel.data
+      this.dataDialog.visible = true
+    },
+    handleDownloadData () {
+      StardustBrowser.excel.export2Excel(this.excel)
+    },
+    setRich (rich) {
+      const {
+        data,
+        category, series, value,
+        category_formatter, series_formatter, value_formatter,
+        summary, filter, sort,
+        chartType, coordinateSystem, grid, fontSizes
+      } = rich
+      if (!series || !value) return
+      const indicators = [category, series, value].filter(ele => ele)
+      const cols = indicators.map(ele => {
+        return this.datasource.columns.find(col => !col.virtual && col.prop && col.label === ele)
+      }).filter(col => col)
+      cols.sort((a, b) => indicators.indexOf(a) - indicators.indexOf(b))
+      const props = cols.map(col => col.tableAttrs?.linkProp ?? col.prop)
+      const numberMarks = cols.map(col => {
+        return col.type === 'number' || ['el-input-number', 'ElInputNumber'].includes(col.comp)
+      })
+      const optionsMarks = cols.map(col => {
+        return OPTIONS_COMPONENTS.includes(col.comp) && col.options?.length && !col.tableAttrs?.linkProp
+      })
+      const optionsDicts = cols.map((col, i) => {
+        if (!optionsMarks[i]) return
+        const dict = {}
+        col.options.forEach(o => {
+          const isPlain = typeof o !== 'object'
+          const text = isPlain ? o : (col.text || 'text')
+          const value = isPlain ? o : (col.value || 'value')
+          dict[isPlain ? o : o[value]] = isPlain ? o : o[text]
+        })
+        return dict
+      })
+      const dimensions = cols.map(col => col.label)
+      const source = data.map(ele => {
+        return props.map((d, i) => {
+          let value
+          if (optionsMarks[i]) {
+            value = optionsDicts[i][ele[d]]
+          } else {
+            value = highdict.get(ele, d)
+            if (numberMarks[i]) {
+              if (typeof value !== 'number') {
+                value = value * 1 || 0
+              }
+            }
+          }
+          return value
+        })
+      })
+      let updated = false
+      const params = {
+        dimensions,
+        source,
+        category,
+        series,
+        value,
+        category_formatter, series_formatter, value_formatter,
+        filter, sort,
+        summary,
+        chartType,
+        coordinateSystem: chartType === 'bar' || chartType === 'line' ? coordinateSystem : undefined,
+        FORMATTERS,
+        updateOnce: async option => {
+          if (updated) return
+          updated = true
+          await funcs.sleep(0)
+          this.update(option)
+        }
+      }
+      const option = StardustEcharts.generateOption(params, this.getOption())
+      this.update(option)
+      this.hasRendered = true
+      this.excel = {
+        header: option.dataset[0].dimensions,
+        data: option.dataset[0].source,
+        filename: StardustJs.funcs.randomUUID()
+      }
+      if (option.transposition) {
+        const header = this.excel.header
+        this.excel.header = [series, ...this.excel.data.map(row => row[0])]
+        this.excel.data = header.slice(1).map((ele, index) => {
+          return [ele, ...this.excel.data.map((row, i) => row[index + 1])]
+        })
+      }
+    },
+    resize () {
+      this.zoom = 1 / (parseFloat(document.documentElement.style.zoom) || 1)
+      this.chart?.resize()
+    },
+    getOption () {
+      const { devicePixelRatio, maxLimit, query, remote, ...others } = this.option
+      const option = {
+        tooltip: {},
+        toolbox: { feature: { saveAsImage: {} } },
+        ...others,
+        xAxis: { type: 'category' },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            fontSize: this.fontSizes[1]
+          }
+        },
+        grid: {
+          left: 40, top: 40, right: 20, bottom: 35,
+          ...this.dialog.form.grid
+        },
+        legend: { padding: [10, 60] }
+      }
+      return option
+    },
+    update (option) {
+      const { chartType, coordinateSystem, grid } = this.dialog.form
+      if (chartType === 'bar' || chartType === 'line') {
+        const axis = coordinateSystem === '直角坐标系-横轴' ? 'xAxis' : 'yAxis'
+        highdict.set(option, axis + '.axisLabel.fontSize', this.fontSizes[1])
+      }
+      option.series?.forEach(ele => {
+        highdict.set(ele, 'label.fontSize', this.fontSizes[2])
+      })
+      option.grid = { ...option.grid, ...grid }
+      this.chart?.setOption(option, true)
+    }
+  }
+}

package/packages/components/xchart/utils.js

@@ -0,0 +1,121 @@
+const { funcs } = StardustBrowser
+
+export const props = {
+  height: {
+    type: String,
+    default: '150px'
+  },
+  option: {
+    type: Object,
+    default: () => ({})
+  },
+  updator: Object,
+  datasource: Object
+}
+
+export const formItems = [
+  {
+    label: '分类', prop: 'category', comp: 'x-select',
+    text: 'label', value: 'prop', options: [],
+    slot: 'selects-formatters', formatters: []
+  },
+  {
+    label: '系列', prop: 'series', comp: 'x-select', clearable: false, required: true,
+    text: 'label', value: 'prop', options: [],
+    slot: 'selects-formatters', formatters: []
+  },
+  {
+    label: '值', prop: 'value', comp: 'x-select', clearable: false, required: true,
+    text: 'label', value: 'prop', options: [],
+    slot: 'selects-formatters', formatters: []
+  },
+  {
+    label: '汇总方式', prop: 'summary', comp: 'x-select', clearable: false, required: true,
+    options: [
+      { text: '求和', value: 'sum' },
+      { text: '平均', value: 'average' },
+      { text: '首个', value: 'first' },
+      { text: '最后一个', value: 'last' },
+      { text: '最大值', value: 'max' },
+      { text: '最小值', value: 'min' },
+      { text: '个数', value: 'count' },
+    ]
+  },
+  {
+    label: '图表类型', prop: 'chartType', comp: 'x-select', clearable: false, required: true,
+    options: [
+      { text: '柱状图', value: 'bar' },
+      { text: '折线图', value: 'line' },
+      { text: '饼图', value: 'pie' },
+      { text: '环形图', value: 'pie-doughnut' },
+      { text: '旭日图', value: 'sunburst' }
+    ]
+  },
+  {
+    label: '坐标系', prop: 'coordinateSystem', comp: 'x-select', clearable: false,
+    options: ['直角坐标系-横轴', '直角坐标系-纵轴', '极坐标系'],
+    when: 'chartType=bar|line'
+  },
+  { label: '边距', slot: 'grid' },
+  { label: '数据筛选', slot: 'filter' },
+  { label: '字体大小', slot: 'font-sizes' }
+]
+
+export const form = {
+  sort: '',
+  category: '',
+  series: '',
+  value: '',
+  summary: 'count',
+  chartType: 'bar',
+  coordinateSystem: '直角坐标系-横轴',
+  grid: {
+    left: 40,
+    top: 40,
+    right: 20,
+    bottom: 30
+  },
+  filter: {
+    category: { isLimit: false, limit: 10, mergeOthers: false },
+    series: { isLimit: false, limit: 10, mergeOthers: false }
+  },
+  fontSizes: [12, 12, 12]
+}
+
+export function zoomedHeight () {
+  return funcs.calcPixel(this.height) * this.zoom + 'px'
+}
+
+export function sidebarCollapse () {
+  return this.$store.app.sidebarCollapse
+}
+
+export function grid () {
+  return this.dialog.form.grid
+}
+
+export function category () {
+  return this.dialog.form.filter.category
+}
+
+export function series () {
+  return this.dialog.form.filter.series
+}
+
+export function fontSizes () {
+  return this.dialog.form.fontSizes
+}
+
+export default {
+  props,
+  formItems,
+  form,
+  computed: {
+    zoomedHeight,
+    sidebarCollapse,
+    grid,
+    category,
+    series,
+    fontSizes
+  }
+}

package/packages/components/xchart/xchart.vue

@@ -0,0 +1,173 @@
+<script>
+export { default } from './index.js'
+</script>
+
+<template>
+  <div
+    v-loading="loading" element-loading-text="加载中..."
+    class="x-chart" :class="isMobile ? 'mobile-x-chart' : 'pc-x-chart'"
+  >
+    <div class="chart-container">
+      <div class="chart" ref="el" />
+    </div>
+    <div class="tools">
+      <el-button v-show="!!datasource" icon="setting" @click="dialog.visible = true">
+        配置
+      </el-button>
+      <el-button v-show="hasRendered" icon="View" @click="handleViewData">
+        显示数据
+      </el-button>
+    </div>
+    <x-dialog
+      v-model="dialog.visible" title="图表配置" drawer class="x-chart-config__dialog"
+      width="460" submit-text="生成图表" cancel-text="关闭"
+      @submit="handleMakeChart"
+      @cancel="dialog.visible = false"
+    >
+      <x-form :dialog use-when>
+        <template #selects-formatters="{ item }">
+          <el-row :gutter="5">
+            <el-col :span="12">
+              <x-select
+                v-model="dialog.form[item.prop]" v-bind="item"
+                @change="handleCalcFormatters(item)"
+              />
+            </el-col>
+            <el-col :span="12">
+              <x-select
+                v-model="dialog.form[item.prop + '_formatter']" :options="item.formatters"
+                placeholder="格式化方式"
+              />
+            </el-col>
+          </el-row>
+        </template>
+        <template #grid>
+          <el-row :gutter="5" class="grid">
+            <el-col :span="12">
+              <span>左</span>
+              <el-input-number v-model="grid.left" />
+            </el-col>
+            <el-col :span="12">
+              <span>上</span>
+              <el-input-number v-model="grid.top" />
+            </el-col>
+            <el-col :span="12">
+              <span>右</span>
+              <el-input-number v-model="grid.right" />
+            </el-col>
+            <el-col :span="12">
+              <span>下</span>
+              <el-input-number v-model="grid.bottom" />
+            </el-col>
+          </el-row>
+        </template>
+        <template #filter>
+          <label class="sorts flex-center">
+            排序方式
+            <x-radios v-model="dialog.form.sort" :options="SORTS" />
+          </label>
+          <el-tabs v-model="filterType">
+            <el-tab-pane label="分类" name="分类">
+              <el-checkbox v-model="category.isLimit">只使用前有限条记录</el-checkbox>
+              <div v-show="category.isLimit">
+                记录条数
+                <el-input-number v-model="category.limit" :min="0" :precision="0" />
+                <el-checkbox v-model="category.mergeOthers">合并剩余项为其他</el-checkbox>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="系列" name="系列">
+              <el-checkbox v-model="series.isLimit">只使用前有限条记录</el-checkbox>
+              <div v-show="series.isLimit">
+                记录条数
+                <el-input-number v-model="series.limit" :min="0" :precision="0" />
+                <el-checkbox v-model="series.mergeOthers">合并剩余项为其他</el-checkbox>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </template>
+        <template #font-sizes>
+          <el-row :gutter="5">
+            <el-col :span="8">
+              X轴
+              <el-input-number v-model="fontSizes[0]" />
+            </el-col>
+            <el-col :span="8">
+              Y轴
+              <el-input-number v-model="fontSizes[1]" />
+            </el-col>
+            <el-col :span="8">
+              值
+              <el-input-number v-model="fontSizes[2]" />
+            </el-col>
+          </el-row>
+        </template>
+      </x-form>
+    </x-dialog>
+
+    <x-dialog
+      v-model="dataDialog.visible" width="88%"
+      class="x-chart-data__dialog" title="图表数据"
+    >
+      <el-button icon="Download" @click="handleDownloadData">
+        下载数据
+      </el-button>
+      <x-table :table="dataDialog.table" :max-height="360" plain />
+    </x-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.x-chart {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .chart-container {
+    height: 100%;
+    overflow-y: auto;
+    zoom: v-bind('zoom');
+  }
+  .chart {
+    height: v-bind('zoomedHeight');
+  }
+  .tools {
+    position: absolute;
+    left: 310px;
+    top: -40px;
+  }
+  &-config__dialog {
+    .el-form-item {
+      margin-bottom: 10px;
+    }
+    .grid {
+      .el-col {
+        margin-bottom: 5px;
+      }
+      span {
+        display: inline-block;
+        width: 20px;
+      }
+      .el-input-number {
+        width: calc(100% - 20px);
+      }
+    }
+    .sorts {
+      height: 32px;
+      justify-content: flex-start;
+      .el-radio-group {
+        margin-left: 20px;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.x-chart-data__dialog {
+  .el-dialog__body {
+    padding: 10px;
+  }
+  .el-button {
+    margin-bottom: 10px;
+  }
+}
+</style>

package/packages/components/xcheckboxs/mobile.js

@@ -0,0 +1,58 @@
+import { formatOptions } from '../../utils/index.js'
+
+export default {
+  name: 'MobileXCheckboxs',
+  inheritAttrs: false,
+  props: {
+    text: {
+      type: String,
+      default: 'text'
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: String,
+      default: 'value'
+    },
+    shape: {
+      type: String,
+      default: 'square'
+    },
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    sort: Boolean | String,
+    options: Array | Object
+  },
+  emits: ['change'],
+  data () {
+    return {
+      _options: []
+    }
+  },
+  computed: {
+    attrs () {
+      const {
+        clearable,
+        platform,
+        placeholder,
+        rules,
+        required,
+        ...others
+      } = this.$attrs
+      return others
+    }
+  },
+  watch: {
+    options: {
+      immediate: true,
+      deep: true,
+      handler () {
+        this._options = formatOptions(this.options, this)
+      }
+    }
+  }
+}

package/packages/components/xcheckboxs/mobile.vue

@@ -0,0 +1,38 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <van-checkbox-group
+    class="x-checkboxs mobile-x-checkboxs"
+    :class="plain ? 'mobile-x-checkboxs--plain' : ''"
+    v-bind="attrs"
+    :direction
+    @change="$emit('change', $event)"
+  >
+    <van-checkbox
+      v-for="option in _options"
+      v-bind="attrs"
+      :disabled="option.raw?.disabled"
+      :key="option.text"
+      :shape
+      :name="option.value"
+    >
+      {{ option.text }}
+    </van-checkbox>
+  </van-checkbox-group>
+</template>
+
+<style lang="scss" scoped>
+.mobile-x-checkboxs--plain {
+  :deep(.van-checkbox) {
+    margin-right: 20px;
+    .van-checkbox__icon {
+      display: none;
+    }
+    .van-checkbox__icon--checked ~ .van-checkbox__label {
+      color: var(--van-blue);
+    }
+  }
+}
+</style>

package/packages/components/xcheckboxs/pc.js

@@ -0,0 +1,49 @@
+import { formatOptions } from '../../utils/index.js'
+
+export default {
+  name: 'PcXCheckboxs',
+  inheritAttrs: false,
+  props: {
+    modelValue: Array,
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    text: {
+      type: String,
+      default: 'text'
+    },
+    value: {
+      type: String,
+      default: 'value'
+    },
+    sort: Boolean | String,
+    options: Array | Object
+  },
+  emits: ['update:modelValue', 'change'],
+  data () {
+    return {
+      _options: []
+    }
+  },
+  computed: {
+    attrs () {
+      const {
+        clearable,
+        platform,
+        placeholder,
+        ...others
+      } = this.$attrs
+      return others
+    }
+  },
+  watch: {
+    options: {
+      immediate: true,
+      deep: true,
+      handler (value) {
+        this._options = formatOptions(value, this)
+      }
+    }
+  }
+}