zant-admin 2.0.1 → 2.0.3

package/src/views/demo/statistics.vue

@@ -1,214 +1,214 @@
-<template>
-  <div class="statistics-container">
-    <a-row :gutter="16">
-      <!-- 柱状图 -->
-      <a-col :span="12">
-        <a-card title="销售数据统计" class="chart-card">
-          <div ref="barChartRef" class="chart-container"></div>
-        </a-card>
-      </a-col>
-
-      <!-- 饼图 -->
-      <a-col :span="12">
-        <a-card title="产品占比分析" class="chart-card">
-          <div ref="pieChartRef" class="chart-container"></div>
-        </a-card>
-      </a-col>
-    </a-row>
-
-    <a-row :gutter="16" style="margin-top: 16px">
-      <!-- 折线图 -->
-      <a-col :span="24">
-        <a-card title="月度趋势分析" class="chart-card">
-          <div ref="lineChartRef" class="chart-container"></div>
-        </a-card>
-      </a-col>
-    </a-row>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-import {
-  initBarChart,
-  updateBarChart,
-  initPieChart,
-  updatePieChart,
-  initLineChart,
-  updateLineChart,
-} from '@/utils/baseEcharts'
-
-// 图表DOM引用
-const barChartRef = ref(null)
-const pieChartRef = ref(null)
-const lineChartRef = ref(null)
-
-// 图表实例
-let barChartInstance = null
-let pieChartInstance = null
-let lineChartInstance = null
-
-/**
- * 初始化所有图表
- */
-const initCharts = () => {
-  // 初始化柱状图
-  if (barChartRef.value) {
-    barChartInstance = initBarChart(barChartRef.value, '销售额(万元)')
-  }
-
-  // 初始化饼图
-  if (pieChartRef.value) {
-    pieChartInstance = initPieChart(pieChartRef.value, '产品占比')
-  }
-
-  // 初始化折线图
-  if (lineChartRef.value) {
-    lineChartInstance = initLineChart(lineChartRef.value, '访问量(万次)')
-  }
-}
-
-/**
- * 生成模拟数据
- */
-const generateMockData = () => {
-  // 柱状图数据
-  const barData = {
-    xAxis: {
-      data: [
-        '1月',
-        '2月',
-        '3月',
-        '4月',
-        '5月',
-        '6月',
-        '7月',
-        '8月',
-        '9月',
-        '10月',
-        '11月',
-        '12月',
-      ],
-    },
-    series: [
-      {
-        name: '产品A',
-        data: [120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290],
-      },
-      {
-        name: '产品B',
-        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290],
-      },
-      {
-        name: '产品C',
-        data: [150, 232, 201, 154, 190, 330, 410, 320, 282, 291, 334, 390],
-      },
-    ],
-  }
-
-  // 饼图数据
-  const pieData = [
-    { name: '电子产品', value: 335 },
-    { name: '家居用品', value: 310 },
-    { name: '服装鞋帽', value: 234 },
-    { name: '食品饮料', value: 135 },
-    { name: '图书音像', value: 1048 },
-  ]
-
-  // 折线图数据
-  const lineData = {
-    xAxis: {
-      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
-    },
-    series: [
-      {
-        name: '网站访问量',
-        data: [820, 932, 901, 934, 1290, 1330, 1320],
-      },
-      {
-        name: 'APP访问量',
-        data: [620, 732, 701, 734, 1090, 1130, 1120],
-      },
-      {
-        name: '小程序访问量',
-        data: [420, 532, 501, 534, 890, 930, 920],
-      },
-    ],
-  }
-
-  return { barData, pieData, lineData }
-}
-
-/**
- * 更新所有图表数据
- */
-const updateCharts = () => {
-  const { barData, pieData, lineData } = generateMockData()
-
-  // 更新柱状图
-  if (barChartInstance) {
-    updateBarChart({
-      chartInstance: barChartInstance,
-      data: barData,
-      shouldShowSlider: false,
-    })
-  }
-
-  // 更新饼图
-  if (pieChartInstance) {
-    updatePieChart({
-      chartInstance: pieChartInstance,
-      data: pieData,
-    })
-  }
-
-  // 更新折线图
-  if (lineChartInstance) {
-    updateLineChart({
-      chartInstance: lineChartInstance,
-      data: lineData,
-      shouldShowSlider: false,
-    })
-  }
-}
-
-/**
- * 窗口大小变化时重新调整图表大小
- */
-const handleResize = () => {
-  barChartInstance?.resize()
-  pieChartInstance?.resize()
-  lineChartInstance?.resize()
-}
-
-// 组件挂载时初始化图表
-onMounted(() => {
-  initCharts()
-  updateCharts()
-
-  // 监听窗口大小变化
-  window.addEventListener('resize', handleResize)
-})
-
-// 组件卸载时清理资源
-onUnmounted(() => {
-  // 销毁图表实例
-  barChartInstance?.dispose()
-  pieChartInstance?.dispose()
-  lineChartInstance?.dispose()
-
-  // 移除事件监听
-  window.removeEventListener('resize', handleResize)
-})
-</script>
-
-<style scoped>
-.chart-card {
-  margin-bottom: 16px;
-}
-
-.chart-container {
-  height: 300px;
-  width: 100%;
-}
-</style>
+<template>
+  <div class="statistics-container">
+    <a-row :gutter="16">
+      <!-- 柱状图 -->
+      <a-col :span="12">
+        <a-card title="销售数据统计" class="chart-card">
+          <div ref="barChartRef" class="chart-container"></div>
+        </a-card>
+      </a-col>
+
+      <!-- 饼图 -->
+      <a-col :span="12">
+        <a-card title="产品占比分析" class="chart-card">
+          <div ref="pieChartRef" class="chart-container"></div>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16" style="margin-top: 16px">
+      <!-- 折线图 -->
+      <a-col :span="24">
+        <a-card title="月度趋势分析" class="chart-card">
+          <div ref="lineChartRef" class="chart-container"></div>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import {
+  initBarChart,
+  updateBarChart,
+  initPieChart,
+  updatePieChart,
+  initLineChart,
+  updateLineChart,
+} from '@/utils/baseEcharts'
+
+// 图表DOM引用
+const barChartRef = ref(null)
+const pieChartRef = ref(null)
+const lineChartRef = ref(null)
+
+// 图表实例
+let barChartInstance = null
+let pieChartInstance = null
+let lineChartInstance = null
+
+/**
+ * 初始化所有图表
+ */
+const initCharts = () => {
+  // 初始化柱状图
+  if (barChartRef.value) {
+    barChartInstance = initBarChart(barChartRef.value, '销售额(万元)')
+  }
+
+  // 初始化饼图
+  if (pieChartRef.value) {
+    pieChartInstance = initPieChart(pieChartRef.value, '产品占比')
+  }
+
+  // 初始化折线图
+  if (lineChartRef.value) {
+    lineChartInstance = initLineChart(lineChartRef.value, '访问量(万次)')
+  }
+}
+
+/**
+ * 生成模拟数据
+ */
+const generateMockData = () => {
+  // 柱状图数据
+  const barData = {
+    xAxis: {
+      data: [
+        '1月',
+        '2月',
+        '3月',
+        '4月',
+        '5月',
+        '6月',
+        '7月',
+        '8月',
+        '9月',
+        '10月',
+        '11月',
+        '12月',
+      ],
+    },
+    series: [
+      {
+        name: '产品A',
+        data: [120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290],
+      },
+      {
+        name: '产品B',
+        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290],
+      },
+      {
+        name: '产品C',
+        data: [150, 232, 201, 154, 190, 330, 410, 320, 282, 291, 334, 390],
+      },
+    ],
+  }
+
+  // 饼图数据
+  const pieData = [
+    { name: '电子产品', value: 335 },
+    { name: '家居用品', value: 310 },
+    { name: '服装鞋帽', value: 234 },
+    { name: '食品饮料', value: 135 },
+    { name: '图书音像', value: 1048 },
+  ]
+
+  // 折线图数据
+  const lineData = {
+    xAxis: {
+      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+    },
+    series: [
+      {
+        name: '网站访问量',
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+      },
+      {
+        name: 'APP访问量',
+        data: [620, 732, 701, 734, 1090, 1130, 1120],
+      },
+      {
+        name: '小程序访问量',
+        data: [420, 532, 501, 534, 890, 930, 920],
+      },
+    ],
+  }
+
+  return { barData, pieData, lineData }
+}
+
+/**
+ * 更新所有图表数据
+ */
+const updateCharts = () => {
+  const { barData, pieData, lineData } = generateMockData()
+
+  // 更新柱状图
+  if (barChartInstance) {
+    updateBarChart({
+      chartInstance: barChartInstance,
+      data: barData,
+      shouldShowSlider: false,
+    })
+  }
+
+  // 更新饼图
+  if (pieChartInstance) {
+    updatePieChart({
+      chartInstance: pieChartInstance,
+      data: pieData,
+    })
+  }
+
+  // 更新折线图
+  if (lineChartInstance) {
+    updateLineChart({
+      chartInstance: lineChartInstance,
+      data: lineData,
+      shouldShowSlider: false,
+    })
+  }
+}
+
+/**
+ * 窗口大小变化时重新调整图表大小
+ */
+const handleResize = () => {
+  barChartInstance?.resize()
+  pieChartInstance?.resize()
+  lineChartInstance?.resize()
+}
+
+// 组件挂载时初始化图表
+onMounted(() => {
+  initCharts()
+  updateCharts()
+
+  // 监听窗口大小变化
+  window.addEventListener('resize', handleResize)
+})
+
+// 组件卸载时清理资源
+onUnmounted(() => {
+  // 销毁图表实例
+  barChartInstance?.dispose()
+  pieChartInstance?.dispose()
+  lineChartInstance?.dispose()
+
+  // 移除事件监听
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style scoped>
+.chart-card {
+  margin-bottom: 16px;
+}
+
+.chart-container {
+  height: 300px;
+  width: 100%;
+}
+</style>

package/src/views/home.vue

@@ -1,6 +1,6 @@
-<script setup>
-import MainPage from '../components/MainPage.vue'
-</script>
-<template>
-  <MainPage />
-</template>
+<script setup>
+import MainPage from '../components/MainPage.vue'
+</script>
+<template>
+  <MainPage />
+</template>

package/src/views/operations/log/logError.vue

@@ -1,78 +1,78 @@
-<template>
-  <form-table
-    :formState="formState"
-    :columns="columns"
-    modulePath="LogError"
-    :rowSelect="false"
-    :permissionModulePath="permissionModulePath"
-    @details="details"
-  >
-  </form-table>
-  <!-- 详情 -->
-  <LogErrorDetails
-    :open="detailsopen"
-    :info="info"
-    @close="detailsopen = false"
-  >
-  </LogErrorDetails>
-</template>
-<script setup>
-import { ref } from 'vue'
-import FormTable from '@/components/FormTable.vue'
-import logError from '@/api/methods/logError'
-import LogErrorDetails from '@/components/details/logErrorDetails.vue'
-// 权限模块路径
-const permissionModulePath = ref('operations:log:logError')
-const formState = ref({
-  actionName: { label: '方法', value: '', type: 'text' },
-  code: { label: '异常码', value: '', type: 'text' },
-  createTime: { label: '日期范围', value: '', type: 'time' },
-})
-const columns = ref([
-  {
-    title: '序号',
-    key: 'num',
-    width: 80,
-  },
-  {
-    title: '方法',
-    dataIndex: 'actionName',
-    ellipsis: true,
-  },
-  {
-    title: '异常码',
-    dataIndex: 'code',
-    width: 100,
-  },
-  {
-    title: '异常内容',
-    dataIndex: 'message',
-    ellipsis: true,
-  },
-
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    width: 200,
-  },
-  {
-    title: '操作',
-    key: 'operation',
-    fixed: 'right',
-    width: 100,
-  },
-])
-//详情
-const detailsopen = ref(false)
-const info = ref({})
-const details = record => {
-  logError.detail({ id: record.id }).then(res => {
-    info.value = res.data
-    detailsopen.value = true
-  })
-}
-const detailsHandleCancel = () => {
-  detailsopen.value = false
-}
-</script>
-<style></style>
+<template>
+  <form-table
+    :formState="formState"
+    :columns="columns"
+    modulePath="LogError"
+    :rowSelect="false"
+    :permissionModulePath="permissionModulePath"
+    @details="details"
+  >
+  </form-table>
+  <!-- 详情 -->
+  <LogErrorDetails
+    :open="detailsopen"
+    :info="info"
+    @close="detailsopen = false"
+  >
+  </LogErrorDetails>
+</template>
+<script setup>
+import { ref } from 'vue'
+import FormTable from '@/components/FormTable.vue'
+import logError from '@/api/methods/logError'
+import LogErrorDetails from '@/components/details/logErrorDetails.vue'
+// 权限模块路径
+const permissionModulePath = ref('operations:log:logError')
+const formState = ref({
+  actionName: { label: '方法', value: '', type: 'text' },
+  code: { label: '异常码', value: '', type: 'text' },
+  createTime: { label: '日期范围', value: '', type: 'time' },
+})
+const columns = ref([
+  {
+    title: '序号',
+    key: 'num',
+    width: 80,
+  },
+  {
+    title: '方法',
+    dataIndex: 'actionName',
+    ellipsis: true,
+  },
+  {
+    title: '异常码',
+    dataIndex: 'code',
+    width: 100,
+  },
+  {
+    title: '异常内容',
+    dataIndex: 'message',
+    ellipsis: true,
+  },
+
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 200,
+  },
+  {
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 100,
+  },
+])
+//详情
+const detailsopen = ref(false)
+const info = ref({})
+const details = record => {
+  logError.detail({ id: record.id }).then(res => {
+    info.value = res.data
+    detailsopen.value = true
+  })
+}
+const detailsHandleCancel = () => {
+  detailsopen.value = false
+}
+</script>
+<style></style>