xt-element-ui 1.2.4 → 1.2.6

package/src/components/ex-chart/ExPie.vue

@@ -15,12 +15,16 @@ export default {
       type: Array,
       default: () => {
         return [
-          { value: 53, name: "张三" },
-          { value: 10, name: "李四" },
-          { value: 60, name: "宋五" }
+          { value: 53, label: "张三" },
+          { value: 10, label: "李四" },
+          { value: 60, label: "宋五" }
         ];
       }
     },
+    fieldKeys: {
+      type: Object,
+      default: () => ({ label: "label", value: "value", data: "data" })
+    },
     colors: {
       type: Array,
       default: () => { return []; }
@@ -33,10 +37,11 @@ export default {
       type: Boolean,
       default: true
     },
-    chartMode: {
-      type: String,
-      default: "dark"
+    simpleMode: {
+      type: Boolean,
+      default: false
     },
+    highlightKey: String,
     roseType: {
       type: String,
       default: ""
@@ -57,7 +62,11 @@ export default {
   },
   computed: {
     totalNum() {
-      return this.chartData.map(it => parseFloat(it.value)).reduce((pre, aft) => { return pre + aft; }, 0);
+      const keys = Object.assign(
+        { label: "label", value: "value", data: "data" },
+        this.fieldKeys || {}
+      );
+      return this.chartData.map(it => parseFloat(it[keys.value])).reduce((pre, aft) => { return pre + aft; }, 0);
     }
   },
   watch: {
@@ -76,24 +85,19 @@ export default {
     this.$nextTick(() => {
       this.initChart();
     });
-    /* setTimeout(() => {
-      this.initChart();
-    }, 1000); */
   },
   methods: {
     initChart() {
       const _self = this;
-      console.log(this.chartMode);
-      // 数据处理
+      const keys = Object.assign(
+        { label: "label", value: "value", data: "data" },
+        _self.fieldKeys || {}
+      );
       const option = {
         title: {
           text: `${_self.totalLabel}:${_self.totalNum}`,
           textStyle: {
-            color: "#808080",
-            fontSize: 20
           },
-          // left: "40%",
-          // top: "45%",
           top: "middle",
           left: "center"
         },
@@ -121,10 +125,11 @@ export default {
           minAngle: 5,
           avoidLabelOverlap: true,
           data: _self.chartData.map((item, ind) => {
-            const { name, value } = item;
+            const label = item[keys.label];
+            const value = item[keys.value];
             return {
               value,
-              name,
+              name: label,
               labelLine: {
                 show: this.showLabel
               },
@@ -145,6 +150,9 @@ export default {
           })
         }]
       };
+      if (this.simpleMode) {
+        EchartsUtil.applySimpleMode(option, "pie");
+      }
       this.myChart = EchartsUtil.init(_self.$refs.piechart, this.theme, option, this.size);
     }
   }

package/src/components/ex-chart/index.vue

@@ -3,14 +3,12 @@
   <ex-line v-else-if="type=='line'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-line>
   <ex-pie v-else-if="type=='pie'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-pie>
   <ex-multi v-else-if="type=='multi'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-multi>
-  <ex-trend v-else-if="type=='trend'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-trend>
 </template>
 <script>
 import ExBar from "./ExBar.vue"
 import ExLine from "./ExLine.vue"
 import ExPie from "./ExPie.vue"
 import ExMulti from "./ExMulti.vue"
-import ExTrend from "./ExTrend.vue"
 
 export default {
   name: "ExChart",
@@ -18,8 +16,7 @@ export default {
     ExBar,
     ExLine,
     ExPie,
-    ExMulti,
-    ExTrend
+    ExMulti
   },
   props: {
     theme: {

package/src/components/ex-chart/utils.js

@@ -1,16 +1,10 @@
 import themeWhite from "./theme/white";
 import themeDark from "./theme/dark";
-import themeBlue from "./theme/blue";
-import themeStarry from "./theme/starry";
-import themeOrange from "./theme/orange";
 
 const themeKeys = {
   "default": themeWhite,
   "white": themeWhite,
-  "dark": themeDark,
-  "blue": themeBlue,
-  "starry": themeStarry,
-  "orange": themeOrange
+  "dark": themeDark
 };
 
 // echarts 仅在客户端加载，避免 SSR 编译/渲染报错
@@ -121,8 +115,155 @@ EchartsUtil.EchartsUtil = {
 
 EchartsUtil.chartInstanceList = [];
 
+// === 极简模式（simpleMode）预设配置 ===
+// 极简模式：隐藏图例、隐藏坐标轴/网格线、缩小内边距、简化 tooltip、去除动画装饰
+
+EchartsUtil.simpleModeOption = {
+  legend: { show: false },
+  tooltip: {
+    borderWidth: 0,
+    extraCssText: "box-shadow: 0 2px 8px rgba(0,0,0,0.12);"
+  },
+  grid: {
+    top: "5%",
+    left: "5%",
+    right: "5%",
+    bottom: "5%",
+    containLabel: true
+  },
+  xAxis: {
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { show: false }
+  },
+  yAxis: {
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { show: false },
+    axisLabel: { show: false }
+  },
+  animationDuration: 300,
+  animationEasing: "linear"
+};
+
+// 各类图表的极简模式特殊配置
+EchartsUtil.simpleModeByType = {
+  bar: {
+    series: {
+      barWidth: "60%",
+      label: { show: false },
+      markPoint: null,
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 6,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0,0,0,0.15)"
+        }
+      }
+    }
+  },
+  line: {
+    series: {
+      symbol: "none",
+      smooth: true,
+      symbolSize: 0,
+      label: { show: false },
+      areaStyle: null
+    }
+  },
+  pie: {
+    legend: { show: false },
+    title: { show: false },
+    series: {
+      radius: ["40%", "72%"],
+      label: { show: false },
+      labelLine: { show: false }
+    }
+  },
+  multi: {
+    legend: { show: false },
+    grid: {
+      top: "8%",
+      left: "5%",
+      right: "5%",
+      bottom: "5%",
+      containLabel: true
+    }
+  }
+};
+
+// 深拷贝 + 深合并工具
+function deepMerge(target, source) {
+  if (source == null) return target;
+  if (Array.isArray(source)) return source.slice();
+  if (typeof source !== "object") return source;
+  if (target == null || typeof target !== "object") {
+    return JSON.parse(JSON.stringify(source));
+  }
+  const result = Array.isArray(target) ? target.slice() : Object.assign({}, target);
+  Object.keys(source).forEach(key => {
+    const src = source[key];
+    if (src === null || src === undefined) {
+      if (source.hasOwnProperty(key)) result[key] = src;
+      return;
+    }
+    if (typeof src === "object") {
+      result[key] = deepMerge(result[key], src);
+    } else {
+      result[key] = src;
+    }
+  });
+  return result;
+}
+
+// 对 option 应用极简模式（会保留调用方显式设置的值）
+EchartsUtil.applySimpleMode = function(option, type) {
+  if (!option || typeof option !== "object") return option;
+
+  const base = JSON.parse(JSON.stringify(EchartsUtil.simpleModeOption));
+  const typeConfig = EchartsUtil.simpleModeByType[type] || {};
+  const merged = deepMerge(base, typeConfig);
+
+  // 合并 base 与 typeConfig 到当前 option
+  Object.keys(merged).forEach(key => {
+    if (key === "series") return; // series 单独处理
+    if (option[key] == null) {
+      option[key] = merged[key];
+    } else if (typeof option[key] === "object" && typeof merged[key] === "object" && !Array.isArray(option[key])) {
+      option[key] = deepMerge(merged[key], option[key]);
+    }
+    // 若调用方已有原始值则保留（不覆盖）
+  });
+
+  // series 处理：若存在则对每个 series 应用简化配置
+  if (option.series && Array.isArray(option.series)) {
+    const simpleSeries = (merged.series || {});
+    option.series = option.series.map(s => {
+      if (s == null || typeof s !== "object") return s;
+      return deepMerge(simpleSeries, s); // 调用方的值优先级更高
+    });
+  }
+
+  // 特殊：xAxis / yAxis 可能是数组
+  ["xAxis", "yAxis"].forEach(axisKey => {
+    if (option[axisKey] != null && typeof option[axisKey] === "object") {
+      const simpleAxis = merged[axisKey] || {};
+      if (Array.isArray(option[axisKey])) {
+        option[axisKey] = option[axisKey].map(axis => {
+          if (axis == null || typeof axis !== "object") return axis;
+          return deepMerge(simpleAxis, axis);
+        });
+      } else {
+        option[axisKey] = deepMerge(simpleAxis, option[axisKey]);
+      }
+    }
+  });
+
+  return option;
+};
+
 EchartsUtil.mergeOptions = function(themeOption, customOption) {
-  return Object.assign({}, this.baseOption, themeOption, customOption);
+  return Object.assign({}, themeOption, customOption);
 };
 
 // 根据字体大小调整主题配置

package/src/components/ex-icon/index.js

@@ -0,0 +1,2 @@
+import ExIcon from './index.vue'
+export default ExIcon

package/src/components/ex-icon/index.vue

@@ -0,0 +1,168 @@
+<template>
+  <component
+    :is="tag"
+    :class="iconClasses"
+    :style="iconStyle"
+    v-on="$listeners"
+    @click="handleClick"
+  >
+    <svg v-if="isSvgSprite" :style="svgStyle" aria-hidden="true">
+      <use :href="svgHref" />
+    </svg>
+    <slot v-else-if="hasDefaultSlot" />
+  </component>
+</template>
+
+<script>
+const customPrefixes = {}
+
+const ExIcon = {
+  name: 'ExIcon',
+  inheritAttrs: false,
+
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: [String, Number],
+      default: ''
+    },
+    color: {
+      type: String,
+      default: ''
+    },
+    spin: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    hasDefaultSlot() {
+      return !!this.$slots.default
+    },
+    iconName() {
+      return (this.name || '').trim()
+    },
+    isElIcon() {
+      return /^el-icon-/.test(this.iconName)
+    },
+    isSvgInline() {
+      return this.iconName.indexOf('<svg') > -1
+    },
+    isSvgSprite() {
+      return /^(#|svg:)/.test(this.iconName)
+    },
+    isCustomFont() {
+      if (!this.iconName) return false
+      return !this.isElIcon && !this.isSvgInline && !this.isSvgSprite
+    },
+    svgHref() {
+      if (!this.isSvgSprite) return ''
+      const name = this.iconName.replace(/^svg:/, '').replace(/^#/, '')
+      return `#${name}`
+    },
+    needsExIconPrefix() {
+      if (!this.isCustomFont) return false
+      for (const prefix of Object.keys(customPrefixes)) {
+        if (this.iconName.indexOf(prefix) === 0) {
+          return false
+        }
+      }
+      return true
+    },
+    tag() {
+      if (this.isSvgInline) return 'span'
+      return 'i'
+    },
+    iconClasses() {
+      const classes = []
+      if (this.isElIcon) {
+        classes.push(this.iconName)
+      } else if (this.isSvgSprite) {
+        classes.push('ex-icon-svg')
+      } else if (this.isCustomFont) {
+        if (this.needsExIconPrefix) classes.push('ex-icon')
+        classes.push(this.iconName)
+      } else if (this.isSvgInline) {
+        classes.push('ex-icon-inline-svg')
+      }
+      if (this.spin) classes.push('ex-icon-spin')
+      return classes
+    },
+    iconStyle() {
+      const style = {}
+      if (this.size) {
+        const s = typeof this.size === 'number' ? `${this.size}px` : this.size
+        style.fontSize = s
+        style.width = s
+        style.height = s
+      }
+      if (this.color) {
+        style.color = this.color
+      }
+      if (this.isSvgInline) {
+        style.display = 'inline-block'
+        style.verticalAlign = 'middle'
+      }
+      return style
+    },
+    svgStyle() {
+      return {
+        width: '1em',
+        height: '1em',
+        verticalAlign: '-0.15em',
+        fill: 'currentColor',
+        overflow: 'hidden'
+      }
+    }
+  },
+
+  mounted() {
+    if (this.isSvgInline && this.$el) {
+      this.$el.innerHTML = this.iconName
+    }
+  },
+
+  beforeUpdate() {
+    if (this.isSvgInline && this.$el) {
+      this.$el.innerHTML = this.iconName
+    }
+  },
+
+  methods: {
+    handleClick(e) {
+      this.$emit('click', e)
+    }
+  }
+}
+
+ExIcon.registerPrefix = function (prefix) {
+  if (prefix && typeof prefix === 'string') {
+    customPrefixes[prefix] = true
+  }
+}
+
+export default ExIcon
+</script>
+
+<style lang="scss" scoped>
+.ex-icon-svg {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  font-size: inherit;
+}
+
+.ex-icon-spin {
+  animation: ex-icon-spin-rotate 1s linear infinite;
+}
+
+@keyframes ex-icon-spin-rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+</style>

package/src/components/ex-icon/style/index.scss

@@ -0,0 +1,7 @@
+.ex-icon {
+  display: inline-block;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  vertical-align: -0.15em;
+}

package/src/components/ex-table/index.vue

@@ -97,10 +97,10 @@
     <!-- 分页 -->
     <div class="ex-table-footer" v-if="showPagination">
       <el-pagination
-        :current-page="pagination.PageNum"
-        :page-size="pagination.PageSize"
+        :current-page="pagination.ppageNum"
+        :page-size="pagination.pageSize"
         :total="total"
-        :page-sizes="pagination.PageSizes || [10, 20, 50, 100]"
+        :page-sizes="pagination.pageSizes || [10, 20, 50, 100]"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"

package/src/components/index.scss

@@ -28,4 +28,7 @@
 @import './ex-card/style/index.scss';
 
 // GridBox 组件样式
-@import './xt-grid-box/style/index.scss';
+@import './xt-grid-box/style/index.scss';
+
+// ExIcon 组件样式
+@import './ex-icon/style/index.scss';

package/src/components/xt-card-item/images/bar.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1781571276852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35671" data-spm-anchor-id="a313x.search_index.0.i17.53a93a81J5fQhI" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 346.453333h179.2v611.84H0z" fill="#C0D6FF" p-id="35672" data-spm-anchor-id="a313x.search_index.0.i14.53a93a81J5fQhI" class=""></path><path d="M281.6 113.777778H460.8v844.8H281.6z" fill="#035DFF" p-id="35673" data-spm-anchor-id="a313x.search_index.0.i16.53a93a81J5fQhI" class="selected"></path><path d="M563.2 229.376h179.2v729.088H563.2z" fill="#32C894" p-id="35674"></path><path d="M844.8 338.716444H1024v620.032h-179.2z" fill="#CCF1E4" p-id="35675" data-spm-anchor-id="a313x.search_index.0.i13.53a93a81J5fQhI" class="selected"></path></svg>

package/src/components/xt-card-item/images/line.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1781571535496" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="54623" data-spm-anchor-id="a313x.search_index.0.i19.53a93a81J5fQhI" xmlns:xlink="http://www.w3.org/1999/xlink" width="239.84375" height="200"><path d="M25.4464 679.296C137.3696 957.952 264.3968 1061.4528 405.8624 985.088c41.5744-22.4256 85.1712-81.0752 138.24-179.5584 21.3504-39.5776 43.8272-84.736 72.448-144.7168 12.9536-27.1872 63.5392-134.8096 75.6992-160.4096 97.6128-205.1328 165.2224-323.9168 238.7456-403.2768 92.5184-99.8912 180.1216-113.4592 271.2576-27.392l8.8064-9.2928c-96.896-91.4944-192.512-76.672-289.4592 27.9808-74.7008 80.64-142.7456 200.1408-240.896 406.5024-12.2112 25.6-62.7712 133.2224-75.7248 160.384-28.5184 59.8016-50.9184 104.7808-72.1408 144.128-51.8912 96.3328-94.464 153.5488-133.0688 174.3872C267.3664 1045.2992 146.7904 947.0976 37.3504 674.56l-11.8784 4.7616z" fill="#67c8fb" p-id="54624" data-spm-anchor-id="a313x.search_index.0.i20.53a93a81J5fQhI" class="selected"></path><path d="M0.1024 472.3968c95.0272 187.1616 234.496 238.72 415.744 153.4976 69.632-32.768 118.8864-87.6288 209.3312-215.7056l9.728-13.7984 9.728-13.7216c92.3648-130.3552 146.2272-184.4736 218.6496-199.8592 93.1328-19.7632 201.8816 44.5696 340.736 215.936l9.984-8.064c-141.568-174.6944-254.3616-241.408-353.3568-220.3904-76.8512 16.3328-132.1728 71.8848-226.4576 204.9792l-9.728 13.7472-9.728 13.7984c-89.088 126.1568-137.472 180.0448-204.3392 211.4816-174.848 82.2528-306.944 33.408-398.8736-147.712L0.1024 472.4224z" fill="#5483FC" p-id="54625"></path></svg>

package/src/components/xt-card-item/images/pie.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1781571036529" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15689" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M463.368 835.6c-139.688-23.544-278.456-159-278.456-323.256 6.512-159.328 121.848-293.224 278.456-323.256V0.648C230.768 24.192 0.008 244.08 0.008 511.704c0 267.616 230.624 488.16 463.352 511.048V835.6z m0 0" fill="#83a9fd" p-id="15690"></path><path d="M837.352 511.704a322.96 322.96 0 0 1-21.6 121.048l161.832 93.592a520.536 520.536 0 0 0 44.528-214.64m0 0c6.728-267.888-199.096-493.376-466.488-511.056l0.648 187.8c186.088 23.576 281.08 159 281.08 323.256" fill="#2e65f3" p-id="15691" data-spm-anchor-id="a313x.search_index.0.i8.53a93a81J5fQhI" class="selected"></path><path d="M770.336 711.928a315.104 315.104 0 0 1-212.056 121.832v188a533.704 533.704 0 0 0 371.096-216.168l-159.04-93.664z m0 0" fill="#83a9fd" p-id="15692"></path></svg>

package/src/index.js

@@ -29,6 +29,7 @@ import XtDatePicker from './components/xt-date-picker'
 import ExButton from './components/ex-button'
 import ExChart from './components/ex-chart'  // ExChart 组件（基于 ECharts 封装）
 import ExCard from './components/ex-card'
+import ExIcon from './components/ex-icon'    // ExIcon 组件（支持 el-icon / svg / 自定义字体）
 import ExTable from './components/ex-table'  // ExTable 组件（基于 ElementUI Table 封装）
 
 // 导入 Element UI 组件注册配置
@@ -49,6 +50,7 @@ const components = [
   ExButton,
   ExChart,
   ExCard,
+  ExIcon,
   ExTable
 ]
 
@@ -134,6 +136,7 @@ export default {
   XtDatePicker,
   ExButton,
   ExCard,
+  ExIcon,
   ExTable
 }
 

package/src/components/ex-chart/ExTrend.vue

@@ -1,124 +0,0 @@
-<template>
-  <div ref="barchart" class="bar-box" :style="{width:width}"></div>
-</template>
-<script>
-import EchartsUtil from "./utils";
-export default {
-  name: "XtTrend",
-  props: {
-    type: {
-      type: String,
-      default: "bar"
-    },
-    theme: {},
-    size: {
-      type: String,
-      default: "medium"
-    },
-    chartData: {
-      type: Array,
-      default: () => {
-        return [
-          { value: 53, label: "正常设备" },
-          { value: 10, label: "正常设备" },
-          { value: 60, label: "离线设备" }
-        ];
-      }
-    },
-    width: {
-      type: String,
-      default: "100%"
-    },
-    energyType: {
-      type: String,
-      default: "m³"
-    }
-  },
-  data() {
-    return {
-      myChart: null
-    };
-  },
-  watch: {
-    type: {
-      handler() {
-        const _self = this;
-        const option = _self.getOption();
-        _self.myChart.setOption(option);
-      }
-    },
-    chartData: {
-      deep: true,
-      handler(newVal, oldVal) {
-        const _self = this;
-        _self.initChart();
-      }
-    },
-    theme(newVal) {
-      this.initChart();
-    }
-  },
-  mounted() {
-    this.initChart();
-  },
-  methods: {
-    getOption() {
-      const _self = this;
-      // 数据处理
-      const option = {
-        xAxis: {
-          type: "category",
-          axisTick: {
-            show: false,
-            splitLine: {
-              lineStyle: {
-              }
-            }
-          },
-          axisLabel: {
-          }
-        },
-        tooltip: {
-          borderWidth: 1,
-          trigger: "item"
-        },
-        grid: {
-          top: "10",
-          left: "10",
-          right: "10",
-          bottom: "20"
-        },
-        yAxis: {
-          show: false,
-          type: "value"
-        },
-        series: {
-          type: _self.type || "bar",
-          areaStyle: {},
-          showSymbol: false,
-          smooth: true,
-          data: _self.chartData.map((item, ind) => {
-            const { label, value } = item;
-            return {
-              value,
-              label
-            };
-          })
-        }
-      };
-      return option;
-    },
-    initChart() {
-      const _self = this;
-      // 数据处理
-      const option = this.getOption();
-      this.myChart = EchartsUtil.init(_self.$refs.barchart, this.theme, option, this.size);
-    }
-  }
-};
-</script>
-<style lang="scss" scoped>
-.bar-box{
-  position: relative;
-}
-</style>