zant-admin 1.0.0

package/src/utils/baseEcharts.js

@@ -0,0 +1,661 @@
+import * as echarts from 'echarts'
+// 定义柱状图颜色调色板
+export const barColorPalette = [
+  '#025DF4',
+  '#DB6BCF',
+  '#2498D1',
+  '#BBBDE6',
+  '#4045B2',
+  '#21A97A',
+  '#FF745A',
+  '#007E99',
+  '#FFA8A8',
+  '#2391FF',
+]
+const createNoDataGraphic = (text = '暂无数据') => ({
+  graphic: {
+    type: 'text',
+    left: 'center',
+    top: 'center',
+    z: 100, // 确保在最上层
+    silent: true,
+    invisible: true, // 默认隐藏
+    style: {
+      text,
+      fontSize: 20,
+      fontWeight: 'normal',
+      fill: '#999',
+      align: 'center',
+    },
+  },
+})
+/**
+ * 初始化饼图
+ * @param {HTMLElement} chartRef 图表DOM元素引用
+ * @returns {echarts.ECharts} 图表实例
+ */
+export const initPieChart = (chartRef, seriesName = '标题') => {
+  if (!chartRef) return null
+  const chartInstance = echarts.init(chartRef)
+  const defaultOptions = {
+    ...createNoDataGraphic(), // 添加暂无数据图形
+    tooltip: {
+      trigger: 'item',
+      formatter: function (params) {
+        return `<span style="display:inline-block;margin-right:5px;
+                            border-radius:50%;width:10px;height:10px;
+                            background-color:${params.color}"></span>
+                            ${params.seriesName}<br/>${params.name}: ${params.value} (${params.percent}%)`
+      },
+    },
+    legend: {
+      top: 0,
+      left: 'center',
+      type: 'scroll', // 改为滚动式图例
+      pageTextStyle: {
+        color: '#333',
+      },
+    },
+    color: barColorPalette,
+    series: [
+      {
+        name: seriesName,
+        type: 'pie',
+        radius: '55%',
+        center: ['50%', '60%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 3,
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+        label: {
+          show: true, // 显示标签
+          formatter: function (params) {
+            // 自定义格式化函数，实现多行显示
+            return [`${params.name}`, `${params.percent}%`].join('\n')
+          },
+          fontSize: 12, // 调整字体大小
+          color: '#333', // 标签颜色
+          lineHeight: 14, // 行高
+        },
+        emphasis: {},
+        labelLine: {
+          show: true,
+        },
+        data: [],
+      },
+    ],
+  }
+
+  chartInstance.setOption(defaultOptions)
+  return chartInstance
+}
+/**
+ * 更新饼图数据
+ * @param {echarts.ECharts} chartInstance 图表实例
+ * @param {Array} data 图表数据
+ */
+export const updatePieChart = ({ chartInstance, data }) => {
+  hideChartLoading(chartInstance)
+  if (!chartInstance) return
+  const isEmpty = !data || data.length === 0
+  // 更新配置
+  const updateOptions = {
+    tooltip: {
+      show: !isEmpty,
+    },
+    legend: {
+      show: !isEmpty,
+    },
+    series: [
+      {
+        data: isEmpty
+          ? []
+          : data.map(item => ({
+              ...item,
+              name: `${item.name} (${item.value})`,
+            })),
+        silent: isEmpty,
+      },
+    ],
+    graphic: {
+      invisible: !isEmpty, // 有数据时隐藏，无数据时显示
+    },
+  }
+  // 合并自定义配置
+  chartInstance.setOption(updateOptions)
+}
+/**
+ * 初始化柱状图
+ * @param {HTMLElement} chartRef 图表DOM元素引用
+ * @returns {echarts.ECharts} 图表实例
+ */
+export const initBarChart = (chartRef, yAxisName = '单位') => {
+  if (!chartRef) return null
+  const chartInstance = echarts.init(chartRef)
+  const defaultOptions = {
+    ...createNoDataGraphic(), // 添加暂无数据图形
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '1%', // 增加底部间距为滑动条留出空间
+      top: '15%',
+      containLabel: true,
+    },
+    legend: {
+      top: 'top', // 设置图例位于顶部
+      data: [],
+    },
+    xAxis: {
+      type: 'category',
+      data: [],
+      axisLabel: {
+        rotate: 0, // 保持水平
+        interval: 0,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: yAxisName,
+      axisLabel: {
+        formatter: function (value) {
+          // 只显示整数值
+          return value % 1 === 0 ? value : ''
+        },
+      },
+      nameTextStyle: {
+        padding: [0, 30, 15, 0],
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+        },
+      },
+    },
+    // 默认启用内置滑动条，但隐藏（超过12列时显示）
+    dataZoom: [
+      {
+        type: 'inside', // 内置型数据区域缩放
+        start: 0,
+        end: 100,
+        zoomOnMouseWheel: false, // 禁用鼠标滚轮缩放
+        moveOnMouseMove: true, // 允许拖拽滑动
+        moveOnMouseWheel: true, // 允许鼠标滚轮滑动
+      },
+      {
+        type: 'slider', // 滑动条型数据区域缩放
+        show: false, // 默认隐藏
+        start: 0,
+        end: 100,
+        bottom: '0%',
+        height: 15,
+        handleSize: '100%',
+        handleStyle: {
+          color: '#025DF4',
+        },
+        fillerColor: 'rgba(2, 93, 244, 0.2)',
+        borderColor: '#ddd',
+        backgroundColor: '#f5f5f5',
+        showDetail: false,
+      },
+    ],
+    series: [],
+  }
+  chartInstance.setOption(defaultOptions)
+  return chartInstance
+}
+/**
+ * 更新柱状图数据
+ * @param {echarts.ECharts} chartInstance 图表实例
+ * @param {Object} data 图表数据 {xAxis: {data: []}, series: []}
+ */
+export const updateBarChart = ({
+  chartInstance,
+  data,
+  shouldShowSlider = false,
+  shouldShowSliderNumber = 12,
+}) => {
+  hideChartLoading(chartInstance)
+  if (!chartInstance) return
+
+  const isEmpty =
+    !data || !data.xAxis || !data.xAxis.data || data.xAxis.data.length === 0
+  const dataLength = isEmpty ? 0 : data.xAxis.data.length
+
+  // 提取图例数据（公司名称）
+  const legendData = isEmpty ? [] : data.series.map(item => item.name)
+
+  // 构建系列配置
+  const series = isEmpty
+    ? []
+    : data.series.map((companyData, index) => {
+        // 获取当前线条的颜色
+        const baseColor = barColorPalette[index % barColorPalette.length]
+        return {
+          name: companyData.name,
+          type: 'bar',
+          barMaxWidth: 40,
+          barCategoryGap: shouldShowSlider ? '15%' : '30%', // 有滑动条时减小间距
+          data: companyData.data,
+          itemStyle: {
+            color: {
+              // 线性渐变，方向从底部到顶部
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: baseColor, // 0% 处的颜色 - 原始颜色
+                },
+                {
+                  offset: 1,
+                  color: getLighterColor(baseColor, 0.7), // 100% 处的颜色 - 更浅的颜色
+                },
+              ],
+              global: false, // 全局使用默认值
+            },
+            borderRadius: [5, 5, 0, 0],
+            shadowColor: 'rgba(0, 0, 0, 0.1)',
+            shadowBlur: 5,
+            shadowOffsetY: 3,
+          },
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c}',
+            color: '#333',
+            fontSize: 12,
+          },
+          emphasis: {
+            itemStyle: {
+              shadowColor: 'rgba(0, 0, 0, 0.3)',
+              shadowBlur: 10,
+              shadowOffsetY: 5,
+            },
+          },
+        }
+      })
+
+  // x轴配置 - 保持水平显示，不旋转
+  const xAxisConfig = {
+    data: isEmpty ? [] : data.xAxis.data,
+    axisLabel: {
+      rotate: 0, // 保持水平，不旋转
+      interval: 0,
+      margin: 8,
+      fontSize: 12, // 统一字体大小
+      // 如果文字过长可以自动换行
+      formatter: function (value) {
+        if (value.length > 6) {
+          // 超过6个字符换行
+          return value.substring(0, 6) + '\n' + value.substring(6)
+        }
+        return value
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+  }
+
+  // 滑动条配置
+  const dataZoomConfig = [
+    {
+      type: 'inside',
+      start: 0,
+      end: shouldShowSlider
+        ? Math.min(100, (shouldShowSliderNumber / dataLength) * 100)
+        : 100, // 初始显示12列
+      zoomOnMouseWheel: false,
+      moveOnMouseMove: true,
+      moveOnMouseWheel: true,
+    },
+    {
+      type: 'slider',
+      show: shouldShowSlider, // 根据数据长度决定是否显示
+      start: 0,
+      end: shouldShowSlider
+        ? Math.min(100, (shouldShowSliderNumber / dataLength) * 100)
+        : 100,
+      bottom: '0%',
+      height: 15,
+      handleSize: '100%',
+      handleStyle: {
+        color: '#025DF4',
+      },
+      fillerColor: 'rgba(2, 93, 244, 0.2)',
+      borderColor: '#ddd',
+      backgroundColor: '#f5f5f5',
+      showDetail: false,
+    },
+  ]
+
+  // 构建最终配置
+  const defaultOptions = {
+    tooltip: {
+      show: !isEmpty,
+    },
+    grid: {
+      bottom: shouldShowSlider ? '6%' : '1%', // 增加底部间距为滑动条留出空间
+    },
+    xAxis: xAxisConfig,
+    legend: {
+      data: legendData,
+    },
+    series: series,
+    dataZoom: dataZoomConfig,
+    graphic: {
+      invisible: !isEmpty, // 有数据时隐藏，无数据时显示
+    },
+  }
+
+  // 更新图表配置
+  chartInstance.setOption(defaultOptions, {
+    replaceMerge: ['series'], // 关键修改：替换而非合并
+  })
+}
+
+/**
+ * 初始化折线图
+ * @param {HTMLElement} chartRef 图表DOM元素引用
+ * @returns {echarts.ECharts} 图表实例
+ */
+export const initLineChart = (chartRef, yAxisName = '单位') => {
+  if (!chartRef) return null
+  const chartInstance = echarts.init(chartRef)
+  const defaultOptions = {
+    ...createNoDataGraphic(), // 添加暂无数据图形
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '1%', // 增加底部间距为滑动条留出空间
+      top: '15%',
+      containLabel: true,
+    },
+    legend: {
+      top: 'top', // 设置图例位于顶部
+      data: [],
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: [],
+      axisLabel: {
+        rotate: 0, // 保持水平
+        interval: 0,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: yAxisName,
+      axisLabel: {
+        formatter: function (value) {
+          // 只显示整数值
+          return value % 1 === 0 ? value : ''
+        },
+      },
+      nameTextStyle: {
+        padding: [0, 30, 15, 0],
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+        },
+      },
+    },
+    // 默认启用内置滑动条，但隐藏（超过12列时显示）
+    dataZoom: [
+      {
+        type: 'inside', // 内置型数据区域缩放
+        start: 0,
+        end: 100,
+        zoomOnMouseWheel: false, // 禁用鼠标滚轮缩放
+        moveOnMouseMove: true, // 允许拖拽滑动
+        moveOnMouseWheel: true, // 允许鼠标滚轮滑动
+      },
+      {
+        type: 'slider', // 滑动条型数据区域缩放
+        show: false, // 默认隐藏
+        start: 0,
+        end: 100,
+        bottom: '5%', // 滑动条位置
+        height: 15,
+        handleSize: '100%',
+        handleStyle: {
+          color: '#025DF4',
+        },
+        fillerColor: 'rgba(2, 93, 244, 0.2)',
+        borderColor: '#ddd',
+        backgroundColor: '#f5f5f5',
+        showDetail: false,
+      },
+    ],
+    series: [],
+  }
+
+  chartInstance.setOption(defaultOptions)
+  return chartInstance
+}
+
+/**
+ * 更新折线图数据
+ * @param {echarts.ECharts} chartInstance 图表实例
+ * @param {Object} data 图表数据 {xAxis: {data: []}, series: []}
+ */
+export const updateLineChart = ({
+  chartInstance,
+  data,
+  shouldShowSlider = false,
+  shouldShowSliderNumber = 12,
+}) => {
+  hideChartLoading(chartInstance)
+  if (!chartInstance) return
+
+  const isEmpty =
+    !data || !data.xAxis || !data.xAxis.data || data.xAxis.data.length === 0
+  const dataLength = isEmpty ? 0 : data.xAxis.data.length
+
+  // 提取图例数据
+  const legendData = isEmpty ? [] : data.series.map(item => item.name)
+
+  // 构建系列配置
+  const series = isEmpty
+    ? []
+    : data.series.map((lineData, index) => {
+        // 获取当前线条的颜色
+        const baseColor = barColorPalette[index % barColorPalette.length]
+
+        return {
+          name: lineData.name,
+          type: 'line',
+          smooth: true, // 平滑曲线
+          symbol: 'circle',
+          symbolSize: 5,
+          data: lineData.data,
+          itemStyle: {
+            color: baseColor,
+          },
+          lineStyle: {
+            width: 2,
+            shadowColor: 'rgba(0, 0, 0, 0.1)',
+            shadowBlur: 5,
+            shadowOffsetY: 3,
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: getLighterColor(baseColor, 0.1), // 区域顶部颜色，较浅
+                },
+                {
+                  offset: 1,
+                  color: getLighterColor(baseColor, 0.9), // 区域底部颜色，更浅
+                },
+              ],
+              global: false,
+            },
+            opacity: 0.3, // 轻微区域填充
+          },
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c}',
+            color: '#333',
+            fontSize: 12,
+          },
+          emphasis: {
+            focus: 'series',
+          },
+        }
+      })
+
+  // x轴配置 - 保持水平显示，不旋转
+  const xAxisConfig = {
+    data: isEmpty ? [] : data.xAxis.data,
+    axisLabel: {
+      rotate: 0, // 保持水平，不旋转
+      interval: 0,
+      margin: 8,
+      fontSize: 12, // 统一字体大小
+      // 如果文字过长可以自动换行
+      formatter: function (value) {
+        if (value.length > 6) {
+          // 超过6个字符换行
+          return value.substring(0, 6) + '\n' + value.substring(6)
+        }
+        return value
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+  }
+
+  // 滑动条配置
+  const dataZoomConfig = [
+    {
+      type: 'inside',
+      start: 0,
+      end: shouldShowSlider
+        ? Math.min(100, (shouldShowSliderNumber / dataLength) * 100)
+        : 100, // 初始显示12列
+      zoomOnMouseWheel: false,
+      moveOnMouseMove: true,
+      moveOnMouseWheel: true,
+    },
+    {
+      type: 'slider',
+      show: shouldShowSlider, // 根据数据长度决定是否显示
+      start: 0,
+      end: shouldShowSlider
+        ? Math.min(100, (shouldShowSliderNumber / dataLength) * 100)
+        : 100,
+      bottom: '0%',
+      height: 15,
+      handleSize: '100%',
+      handleStyle: {
+        color: '#025DF4',
+      },
+      fillerColor: 'rgba(2, 93, 244, 0.2)',
+      borderColor: '#ddd',
+      backgroundColor: '#f5f5f5',
+      showDetail: false,
+    },
+  ]
+
+  // 构建最终配置
+  const defaultOptions = {
+    tooltip: {
+      show: !isEmpty,
+    },
+    grid: {
+      bottom: shouldShowSlider ? '6%' : '1%', // 增加底部间距为滑动条留出空间
+    },
+    xAxis: xAxisConfig,
+    legend: {
+      data: legendData,
+    },
+    series: series,
+    dataZoom: dataZoomConfig,
+    graphic: {
+      invisible: !isEmpty, // 有数据时隐藏，无数据时显示
+    },
+  }
+
+  // 更新图表配置
+  chartInstance.setOption(defaultOptions, {
+    replaceMerge: ['series'], // 关键修改：替换而非合并
+  })
+}
+
+/**
+ * 显示图表加载状态
+ * @param {echarts.ECharts} chartInstance 图表实例
+ */
+export const showChartLoading = chartInstance => {
+  if (!chartInstance) return
+
+  chartInstance.showLoading({
+    text: '数据加载中...',
+    color: '#1677ff',
+    maskColor: 'rgba(255, 255, 255, 0.8)',
+    textColor: '#000',
+    zlevel: 0,
+  })
+}
+/**
+ * 隐藏图表加载状态
+ * @param {echarts.ECharts} chartInstance 图表实例
+ */
+export const hideChartLoading = chartInstance => {
+  if (!chartInstance) return
+  chartInstance.hideLoading()
+}
+
+/**
+ * 获取更亮颜色的函数
+ * @param {string} color - 基础颜色
+ * @param {number} lum - 亮度系数 (0 <= lum <= 1)
+ */
+function getLighterColor(color, lum) {
+  // 将十六进制颜色转换为RGB
+  let rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color)
+  let r = parseInt(rgb[1], 16)
+  let g = parseInt(rgb[2], 16)
+  let b = parseInt(rgb[3], 16)
+
+  // 调整亮度
+  r = Math.floor(Math.min(255, Math.max(0, r + (255 - r) * lum)))
+  g = Math.floor(Math.min(255, Math.max(0, g + (255 - g) * lum)))
+  b = Math.floor(Math.min(255, Math.max(0, b + (255 - b) * lum)))
+
+  return `rgb(${r},${g},${b})`
+}

package/src/utils/dictTemplate.js

@@ -0,0 +1,26 @@
+import { dictStore } from '@/stores/dict'
+const dict = dictStore()
+const dictTemplate = {
+  tabletempInt(type, value) {
+    var data = dict.getDictItems(type)
+    if (data) {
+      for (var i = 0; i < data.length; i++) {
+        if (data[i].value == value) {
+          return `<span class="${data[i].colorClass}">${data[i].label}</span>`
+        }
+      }
+    }
+  },
+  tabletempbool(type, value) {
+    var data = dict.getDictItems(type)
+    var val = value ? 1 : 0
+    if (data) {
+      for (var i = 0; i < data.length; i++) {
+        if (data[i].value == val) {
+          return `<span class="${data[i].colorClass}">${data[i].label}</span>`
+        }
+      }
+    }
+  },
+}
+export default dictTemplate