diff --git a/package.json b/package.json index a53333d..857b13a 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "inspect": "vue inspect --mode=production > output.js" }, "dependencies": { + "@vue/composition-api": "^1.0.0-rc.5", "axios": "^0.21.1", "cl-admin": "^1.5.1", "cl-admin-crud": "^1.6.4", @@ -17,7 +18,7 @@ "codemirror": "^5.59.4", "core-js": "^3.6.5", "dayjs": "^1.10.4", - "echarts": "^4.5.0", + "echarts": "^5.0.2", "element-ui": "^2.15.1", "js-beautify": "^1.13.5", "mockjs": "^1.1.0", @@ -30,7 +31,7 @@ "vue": "^2.6.11", "vue-codemirror": "^4.0.6", "vue-cron": "^1.0.9", - "vue-echarts": "^5.0.0-beta.0", + "vue-echarts": "^6.0.0-rc.3", "vue-router": "^3.2.0", "vuedraggable": "^2.24.3", "vuex": "^3.4.0" diff --git a/src/cool/modules/base/common/resize.js b/src/cool/modules/base/common/resize.js index 3307de7..fd891ad 100644 --- a/src/cool/modules/base/common/resize.js +++ b/src/cool/modules/base/common/resize.js @@ -6,6 +6,9 @@ const lock = { }; function resize() { + // 更新数据 + store.commit("SET_BROWSER"); + const { browser, menuCollapse, app } = store.getters; if (browser.isMini) { @@ -41,8 +44,6 @@ function resize() { lock.menuCollapse = null; } } - - store.commit("SET_BROWSER"); } window.onload = function() { diff --git a/src/cool/modules/base/components/process/index.vue b/src/cool/modules/base/components/process/index.vue index 824120b..c79dd8a 100644 --- a/src/cool/modules/base/components/process/index.vue +++ b/src/cool/modules/base/components/process/index.vue @@ -4,24 +4,20 @@ -
+
{{ item.label }} - +
@@ -43,10 +39,17 @@ export default { ...mapGetters(["processList"]) }, + watch: { + "$route.path"(val) { + this.adScroll(this.processList.findIndex(e => e.value === val) || 0); + } + }, + methods: { ...mapMutations(["ADD_PROCESS", "DEL_PROCESS", "SET_PROCESS"]), - onTap(item) { + onTap(item, index) { + this.adScroll(index); this.$router.push(item.value); }, @@ -100,9 +103,23 @@ export default { } }, + adScroll(index) { + const el = this.$refs[`item-${index}`][0]; + + if (el) { + this.scrollTo(el.offsetLeft + el.clientWidth - this.$refs["scroller"].clientWidth); + } + }, + toScroll(f) { - const scroller = this.$el.querySelector(".app-process__scroller"); - scroller.scrollTo(scroller.scrollLeft + (f ? -100 : 100), 0); + this.scrollTo(this.$refs["scroller"].scrollLeft + (f ? -100 : 100)); + }, + + scrollTo(left) { + this.$refs["scroller"].scrollTo({ + left, + behavior: "smooth" + }); } } }; @@ -149,7 +166,7 @@ export default { } } - .block { + &__item { display: inline-flex; align-items: center; border-radius: 3px; diff --git a/src/main.js b/src/main.js index 5c7d021..f36e029 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,8 @@ import Vue from "vue"; -import App from "./App.vue"; +import VueECharts from "vue-echarts"; import { bootstrap } from "cl-admin"; +import { app } from "@/config/env"; +import App from "./App.vue"; import "./element"; // 路由 @@ -12,12 +14,16 @@ import store from "@/store"; // mock import "@/mock"; +// echarts 可视图表 +Vue.component("v-chart", VueECharts); + // 阻止显示生产模式的消息 Vue.config.productionTip = false; // 配置 bootstrap() .then(() => { + // 加载菜单、用户信息 store.dispatch("appLoad"); new Vue({ @@ -27,5 +33,5 @@ bootstrap() }).$mount("#app"); }) .catch(err => { - console.error("COOL-ADMIN 启动失败", err); + console.error(`${app.name} 启动失败`, err); }); diff --git a/src/views/home/components/category-ratio.vue b/src/views/home/components/category-ratio.vue index c3ccb32..31fe62a 100644 --- a/src/views/home/components/category-ratio.vue +++ b/src/views/home/components/category-ratio.vue @@ -5,23 +5,16 @@
- +