封装工作台代码

gold-system/package-lock.json

@@ -15,6 +15,7 @@
         "lodash": "^4.17.21",
         "mathjs": "^14.0.1",
         "moment": "^2.30.1",
+        "pinia": "^3.0.2",
         "vue": "^3.5.12",
         "vue-icons-plus": "^0.1.7",
         "vue-json-excel": "^0.3.0",
@@ -2503,6 +2504,28 @@
       "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
       "license": "MIT"
     },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-7.7.2.tgz",
+      "integrity": "sha512-CY0I1JH3Z8PECbn6k3TqM1Bk9ASWxeMtTCvZr7vb+CHi+X/QwQm5F1/fPagraamKMAHVfuuCbdcnNg1A4CYVWQ==",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.2",
+        "birpc": "^0.2.19",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.1"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-7.7.2.tgz",
+      "integrity": "sha512-uBFxnp8gwW2vD6FrJB8JZLUzVb6PNRG0B0jBnHsOH8uKyva2qINY8PTF5Te4QlTbMDqU5K6qtJDr6cNsKWhbOA==",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
     "node_modules/@vue/language-core": {
       "version": "2.1.10",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/@vue/language-core/-/language-core-2.1.10.tgz",
@@ -2786,6 +2809,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/birpc": {
+      "version": "0.2.19",
+      "resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz",
+      "integrity": "sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -2936,6 +2967,20 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/copy-anything": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-3.0.5.tgz",
+      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/core-js": {
       "version": "3.40.0",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/core-js/-/core-js-3.40.0.tgz",
@@ -3296,6 +3341,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
+    },
     "node_modules/is-core-module": {
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
@@ -3311,6 +3361,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-what": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-4.1.16.tgz",
+      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/javascript-natural-sort": {
       "version": "0.7.1",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
@@ -3473,6 +3534,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "node_modules/moment": {
       "version": "2.30.1",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/moment/-/moment-2.30.1.tgz",
@@ -3539,6 +3605,11 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/picocolors/-/picocolors-1.1.1.tgz",
@@ -3558,6 +3629,34 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-3.0.2.tgz",
+      "integrity": "sha512-sH2JK3wNY809JOeiiURUR0wehJ9/gd9qFN2Y828jCbxEzKEmEt0pzCXwqiSTfuRsK9vQsOflSdnbdBOGrhtn+g==",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-7.7.2.tgz",
+      "integrity": "sha512-1syn558KhyN+chO5SjlZIwJ8bV/bQ1nOVTG66t2RbG66ZGekyiYNmRO7X9BJCXQqPsFHlnksqvPhce2qpzxFnA==",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.2"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.1",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/postcss/-/postcss-8.5.1.tgz",
@@ -3692,6 +3791,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA=="
+    },
     "node_modules/rollup": {
       "version": "4.34.6",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/rollup/-/rollup-4.34.6.tgz",
@@ -3780,6 +3884,14 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ssf": {
       "version": "0.11.2",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/ssf/-/ssf-0.11.2.tgz",
@@ -3792,6 +3904,17 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/superjson": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/superjson/-/superjson-2.2.2.tgz",
+      "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
+      "dependencies": {
+        "copy-anything": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",

gold-system/package.json

@@ -17,6 +17,7 @@
     "lodash": "^4.17.21",
     "mathjs": "^14.0.1",
     "moment": "^2.30.1",
+    "pinia": "^3.0.2",
     "vue": "^3.5.12",
     "vue-icons-plus": "^0.1.7",
     "vue-json-excel": "^0.3.0",

gold-system/src/main.ts

@@ -5,9 +5,9 @@ import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import './assets/css/common.css'; // 引入公共CSS文件
+import './assets/css/common.css' // 引入公共CSS文件
 import JsonExcel from 'vue-json-excel'
-
+import { createPinia } from 'pinia'
 import VxeUI from 'vxe-pc-ui'
 import 'vxe-pc-ui/lib/style.css'
 import VxeUITable from 'vxe-table'
@@ -22,8 +22,13 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 
 // 使用 ElementPlus 和路由器
 a.use(ElementPlus, {
-  locale: zhCn,
-}).use(router).use(VxeUI).use(VxeUITable).mount('#app');
+  locale: zhCn
+})
+  .use(router)
+  .use(VxeUI)
+  .use(VxeUITable)
+  .use(createPinia())
+  .mount('#app')
 
 // 注册 JsonExcel 组件
 a.component('downloadExcel', JsonExcel)

gold-system/src/store/area.js

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+
+export const useAreaStore = defineStore('area', {
+  state: () => ({
+    currentArea: '全部',
+  }),
+  actions: {
+    updateArea(newVal) {
+      this.currentArea = newVal
+    },
+  },
+})

gold-system/src/views/index.vue

@@ -1,85 +1,81 @@
 <script setup>
-import { ref, onMounted, reactive, computed, watch } from "vue";
-import { useRouter } from "vue-router";
-import ElementPlus from "element-plus";
-import { VscGlobe } from "vue-icons-plus/vsc";
-import { ElMessage } from "element-plus";
-import axios from "axios";
-import { ElMessageBox } from "element-plus";
-import API from "@/util/http";
-import dmmn from "../assets/动漫美女.png";
-import { useRoute } from "vue-router";
-
-const router = useRouter();
-const imgrule1 = dmmn;
-const messageVisible = ref(false);
-
+import { ref, onMounted, reactive, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import ElementPlus from 'element-plus'
+import { VscGlobe } from 'vue-icons-plus/vsc'
+import { ElMessage } from 'element-plus'
+import axios from 'axios'
+import { ElMessageBox } from 'element-plus'
+import API from '@/util/http'
+import dmmn from '../assets/动漫美女.png'
+import { useRoute } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { useAreaStore } from '@/store/area'
+const router = useRouter()
+const imgrule1 = dmmn
+const messageVisible = ref(false)
+const areaStore = useAreaStore()
+const { currentArea, updateArea } = storeToRefs(areaStore)
 //这是获取用户信息的接口
 const adminData = ref({
-  name: "",
-});
+  name: ''
+})
 const getAdminData = async function () {
   try {
-    const result = await API({ url: "/admin/userinfo", data: {} });
-    adminData.value = result;
-    console.log("请求成功", result);
-    console.log("用户信息", adminData.value);
+    const result = await API({ url: '/admin/userinfo', data: {} })
+    adminData.value = result
+    console.log('请求成功', result)
+    console.log('用户信息', adminData.value)
   } catch (error) {
-    console.log("请求失败", error);
+    console.log('请求失败', error)
+  }
 }
-};
 // 获取地区
-const areas = ref([]);
+const areas = ref([])
 const getAreas = async function () {
   try {
-    const result = await API({ url: "/recharge/user/search", data: {} });
-    areas.value = result.data;
-    console.log("请求成功", result);
+    const result = await API({ url: '/recharge/user/search', data: {} })
+    areas.value = result.data
+    console.log('请求成功', result)
   } catch (error) {
-    console.log("请求失败", error);
+    console.log('请求失败', error)
+  }
 }
-};
 // 查看个人信息弹出框
 const openMessage = function () {
-  messageVisible.value = true;
-};
+  messageVisible.value = true
+}
 const closeMessage = function () {
-  messageVisible.value = false;
-};
+  messageVisible.value = false
+}
 const message = function () {
-  openMessage();
-};
+  openMessage()
+}
 
 // 获取machineId
 
 function logout() {
-  const machineId = localStorage.getItem("machineId");
-  console.log("machineId:", machineId);
-  localStorage.removeItem("token");
+  const machineId = localStorage.getItem('machineId')
+  console.log('machineId:', machineId)
+  localStorage.removeItem('token')
   // localStorage.clear();
-  router.push("/login?machineId=" + machineId);
+  router.push('/login?machineId=' + machineId)
   //添加刷新页面的代码
   // window.location.reload();
-  ElMessage.success("退出成功");
+  ElMessage.success('退出成功')
 }
 
 // 挂载
 onMounted(async function () {
   // 获取用户信息
-  getAdminData();
+  getAdminData()
   // 获取地区
-  getAreas();
-});
+  getAreas()
+})
 // 处理地区点击事件
 const changeDataByArea = (item) => {
-  router.push({
-    name: "workspace", // 假设工作台路由的名称为 'Workspace'
-    params: {
-      area: item,
-    },
-  });
-  // 替换完url后刷新页面
-};
+  areaStore.updateArea(item)
+}
 </script>
 
 <template>
@@ -276,7 +272,7 @@ const changeDataByArea = (item) => {
             left: 15%;
             right: 0;
             z-index: 101;
-            position: fixed;
+            background: white;
           "
         >
           <el-menu
@@ -288,6 +284,7 @@ const changeDataByArea = (item) => {
             <el-sub-menu index="1" class="area" :disabled="isWorkspace">
               <template #title>
                 <VscGlobe />
+                {{ currentArea }}
               </template>
               <el-menu-item
                 v-for="(item, index) in areas"

gold-system/src/views/workspace/index.vue

@@ -87,7 +87,7 @@ const gold = [
 
 const list = ref([])
 const token = localStorage.getItem('token')
-
+let rechargeBar = null
 // 方法
 // 搜索方法
 const get = async function () {
@@ -441,86 +441,87 @@ const getMiddleBar = async function () {
 
   if (getMiddleBarObj.value.updateType == 0) {
     // 基于准备好的dom，初始化echarts实例
-    var recharge = echarts.init(document.getElementById('recharge'))
-    const option = {
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow'
-        },
-        formatter: function (params) {
-          let total = 0
-          let content = `${params[0].name}<br/>`
-          params.forEach((param) => {
-            content += `${param.seriesName}: ${param.value}<br/>`
-            total += param.value
-          })
-          content += `总和: ${total}`
-          return content
-        }
-      },
-      legend: {
-        right: '-5%',
-        orient: 'vertical'
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-      },
-      xAxis: {
-        type: 'category',
-        data: middleCategory.value
-      },
-      yAxis: {
-        type: 'value'
-      },
-      series: [
-        {
-          name: '永久金币',
-          color: '#35e383',
-          type: 'bar',
-          stack: 'total',
-          label: {
-            show: false
-          },
-          emphasis: {
-            focus: 'series'
-          },
-          data: middleRecharge.value
-        },
-        {
-          name: '免费金币',
-          color: '#5f8ff5',
-          type: 'bar',
-          stack: 'total',
-          label: {
-            show: false
-          },
-          emphasis: {
-            focus: 'series'
-          },
-          data: middleFree.value
-        },
-        {
-          name: '任务金币',
-          color: '#ffe733',
-          type: 'bar',
-          stack: 'total',
-          label: {
-            show: false
-          },
-          emphasis: {
-            focus: 'series'
-          },
-          data: middleTask.value
-        }
-      ]
-    }
+    updateChart()
+    // var recharge = echarts.init(document.getElementById('recharge'))
+    // const option = {
+    //   tooltip: {
+    //     trigger: 'axis',
+    //     axisPointer: {
+    //       type: 'shadow'
+    //     },
+    //     formatter: function (params) {
+    //       let total = 0
+    //       let content = `${params[0].name}<br/>`
+    //       params.forEach((param) => {
+    //         content += `${param.seriesName}: ${param.value}<br/>`
+    //         total += param.value
+    //       })
+    //       content += `总和: ${total}`
+    //       return content
+    //     }
+    //   },
+    //   legend: {
+    //     right: '-5%',
+    //     orient: 'vertical'
+    //   },
+    //   grid: {
+    //     left: '3%',
+    //     right: '4%',
+    //     bottom: '3%',
+    //     containLabel: true
+    //   },
+    //   xAxis: {
+    //     type: 'category',
+    //     data: middleCategory.value
+    //   },
+    //   yAxis: {
+    //     type: 'value'
+    //   },
+    //   series: [
+    //     {
+    //       name: '永久金币',
+    //       color: '#35e383',
+    //       type: 'bar',
+    //       stack: 'total',
+    //       label: {
+    //         show: false
+    //       },
+    //       emphasis: {
+    //         focus: 'series'
+    //       },
+    //       data: middleRecharge.value
+    //     },
+    //     {
+    //       name: '免费金币',
+    //       color: '#5f8ff5',
+    //       type: 'bar',
+    //       stack: 'total',
+    //       label: {
+    //         show: false
+    //       },
+    //       emphasis: {
+    //         focus: 'series'
+    //       },
+    //       data: middleFree.value
+    //     },
+    //     {
+    //       name: '任务金币',
+    //       color: '#ffe733',
+    //       type: 'bar',
+    //       stack: 'total',
+    //       label: {
+    //         show: false
+    //       },
+    //       emphasis: {
+    //         focus: 'series'
+    //       },
+    //       data: middleTask.value
+    //     }
+    //   ]
+    // }
 
-    // 使用刚指定的配置项和数据显示图表。
-    recharge.setOption(option)
+    // // 使用刚指定的配置项和数据显示图表。
+    // recharge.setOption(option)
   } else {
     // 基于准备好的dom，初始化echarts实例
     var consume = echarts.init(document.getElementById('consume'))
@@ -934,10 +935,9 @@ const formatNum = function (val) {
   }
 }
 
-onMounted(async function () {
-  await get()
+function updateChart() {
   // 第一个柱状图 基于准备好的dom，初始化echarts实例
-  var rechargeBar = echarts.init(document.getElementById('recharge'))
+  rechargeBar = echarts.init(document.getElementById('recharge'))
   const option1 = {
     tooltip: {
       trigger: 'axis',
@@ -947,7 +947,7 @@ onMounted(async function () {
       }
     },
     legend: {
-      right: '-5%',
+      right: 0,
       orient: 'vertical'
     },
     grid: {
@@ -1007,6 +1007,10 @@ onMounted(async function () {
   }
   // 使用刚指定的配置项和数据显示图表。
   rechargeBar.setOption(option1)
+}
+onMounted(async function () {
+  await get()
+  updateChart()
 
   // 第一个饼状图 基于准备好的dom，初始化echarts实例
   var yearRechargePie = echarts.init(document.getElementById('yearRecharge'))

gold-system/tsconfig.app.json

@@ -7,7 +7,6 @@
     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "Bundler",
     "allowImportingTsExtensions": true,
@@ -22,7 +21,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
-    "noImplicitAny": false,
+    "noImplicitAny": false
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

gold-system/tsconfig.json

@@ -3,5 +3,6 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ]
+  ],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

gold-system/tsconfig.node.json

@@ -19,6 +19,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
+  }
 }