xt-element-ui 1.2.4 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "基于 Vue2.7 + ElementUI 的组件库",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -27,7 +27,9 @@
   "files": [
     "lib",
     "src",
-    "README.md"
+    "README.md",
+    "docs/components/**/*md",
+    "docs/README.md"
   ],
   "dependencies": {
     "echarts": "^6.1.0",

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

@@ -15,6 +15,12 @@ export default {
       type: String,
       default: "medium"
     },
+    // 新增极简模式开关
+    simpleMode: {
+      type: Boolean,
+      default: false
+    },
+    highlightKey: String,// 需要高亮的日期/标识
     config: {
       type: Object,
       default() {
@@ -33,6 +39,7 @@ export default {
         return [
           {
             label: "入户数",
+            unit: "户",
             data: [
               { label: "01月", value: 980 },
               { label: "02月", value: 806 },
@@ -50,6 +57,7 @@ export default {
           },
           {
             label: "隐患数",
+            unit: "个",
             data: [
               { label: "01月", value: 200 },
               { label: "02月", value: 120 },
@@ -67,6 +75,7 @@ export default {
           },
           {
             label: "整改数",
+            unit: "个",
             data: [
               { label: "01月", value: 25 },
               { label: "02月", value: 19 },
@@ -89,10 +98,6 @@ export default {
       type: Array,
       default: () => { return []; }
     },
-    selectedNew: {
-      type: Object,
-      default: null
-    },
     energyType: {
       type: [String, Array],
       default: ""
@@ -138,9 +143,19 @@ export default {
   methods: {
     initChart() {
       const _self = this;
-      // 数据处理
-      const groupYAxis = (unit) => {
-        return {
+
+      // 从 chartData 中收集所有 unit，并保持首次出现顺序去重
+      const uniqueUnits = [];
+      (_self.chartData || []).forEach(item => {
+        const u = item.unit || "";
+        if (uniqueUnits.indexOf(u) === -1) {
+          uniqueUnits.push(u);
+        }
+      });
+
+      // 单个 yAxis 的生成函数
+      const groupYAxis = (unit, index) => {
+        const yAxis = {
           type: "value",
           name: unit,
           axisLine: {
@@ -167,7 +182,24 @@ export default {
             }
           }
         };
+        if (index > 0) {
+          yAxis.position = "right";
+          yAxis.splitLine = { show: false };
+        }
+        return yAxis;
       };
+
+      // 根据去重后的 unit 生成 yAxis
+      const yAxisList = uniqueUnits.length
+        ? uniqueUnits.map((unit, idx) => groupYAxis(unit, idx))
+        : [groupYAxis("", 0)];
+
+      // unit -> yAxisIndex 的映射，便于 series 绑定
+      const unitToYAxisIndex = {};
+      uniqueUnits.forEach((unit, idx) => {
+        unitToYAxisIndex[unit] = idx;
+      });
+
       const option = {
         legend: {
           right: 20,
@@ -176,10 +208,7 @@ export default {
           data: _self.chartData.map((item) => {
             return item.label;
           }),
-          selectedMode: "multiple",
-          selected: _self.selectedNew,
           textStyle: {
-            fontSize: 12
           }
         },
         tooltip: {
@@ -197,12 +226,6 @@ export default {
         },
         xAxis: {
           type: "category",
-          // splitLine: {
-          //   show: true,
-          //   lineStyle: {
-          //     type: "dashed"
-          //   }
-          // },
           axisLabel: {
             rotate: this.config.rotate
           },
@@ -210,7 +233,7 @@ export default {
             return item.label;
           }) : []
         },
-        yAxis: typeof _self.energyType == "string" ? groupYAxis(_self.energyType) : this.energyType.map(unit => groupYAxis(unit)),
+        yAxis: yAxisList,
         dataZoom: [
           {
             type: "inside",
@@ -219,33 +242,22 @@ export default {
             end: 100
           }
         ],
-        series: this.getSeriesData()
+        series: this.getSeriesData(unitToYAxisIndex)
       };
       this.myChart = EchartsUtil.init(_self.$refs.multilinechart, this.theme, option, this.size);
     },
-    getSeriesData() {
-      // 创建 24小时 时间数据填充对象
+    getSeriesData(unitToYAxisIndex) {
       const _self = this;
 
       const _seriesData = [];
       _self.chartData.map((item, ind) => {
-        // debugger;
-        const _isNUll = item.data.some(it => !it.value || it.value == "--");
-        const _itemNull = {
-          type: "",
-          name: item.label,
-          connectNulls: true, // 断点连线，true-连接，false-不连接
-          data: item.data.map(it => it.value),
-          tooltip: {
-            show: false
-          }
-        };
         const _item = {
           animation: true,
           name: item.label,
           type: item.type || "bar",
           avoidLabelOverlap: true,
-          data: item.data.map(it => it.value)
+          data: item.data.map(it => it.value),
+          yAxisIndex: unitToYAxisIndex[item.unit || ""] != null ? unitToYAxisIndex[item.unit || ""] : 0
         };
         _seriesData.push(_item);
       });

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

@@ -33,10 +33,12 @@ export default {
       type: Boolean,
       default: true
     },
-    chartMode: {
-      type: String,
-      default: "dark"
+    // 新增极简模式开关
+    simpleMode: {
+      type: Boolean,
+      default: false
     },
+    highlightKey: String,// 需要高亮的日期/标识
     roseType: {
       type: String,
       default: ""
@@ -83,7 +85,6 @@ export default {
   methods: {
     initChart() {
       const _self = this;
-      console.log(this.chartMode);
       // 数据处理
       const option = {
         title: {

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

@@ -122,7 +122,7 @@ EchartsUtil.EchartsUtil = {
 EchartsUtil.chartInstanceList = [];
 
 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>