main.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. import Vue from "vue";
  2. import App from "./App.vue";
  3. import router from "./router";
  4. import { store } from "./store/index.js";
  5. // import "./assets/style/element-variables.module.scss";
  6. import "./icons/index"; // icon
  7. import VueRulerTool from "vue-ruler-tool";
  8. // 引入element ui
  9. import ElementUI from "element-ui";
  10. import "element-ui/lib/theme-chalk/index.css";
  11. import "@wangeditor/editor/dist/css/style.css";
  12. // 引入css
  13. import "./styles/index.scss";
  14. // 注册svg组件
  15. import SvgIcons from "@/components/SvgIcons/index.vue";
  16. import VueDraggableResizable from "vue-draggable-resizable-gorkys";
  17. import "vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css";
  18. import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
  19. import VirtualList from "@/components/virtual_list/index.vue";
  20. Vue.component("VueDraggableResizable", VueDraggableResizable);
  21. Vue.component("SvgIcons", SvgIcons);
  22. Vue.component("vue-ruler-tool", VueRulerTool);
  23. // 序列化post方法
  24. import qs from "qs";
  25. // 将自动注册所有组件为全局组件
  26. import dataV from "@jiaminghi/data-view";
  27. import permission from "./directives/permission"; // 导入自定义指令
  28. import lazyLoad from "./directives/lazyLoad";
  29. import inview from "./directives/inview";
  30. import "echarts-gl";
  31. Vue.use(dataV);
  32. Vue.prototype.$qs = qs;
  33. // Vue.prototype.$tinymce = tinymce;
  34. // dialog拖拽全屏
  35. import dialogDrag from "./views/health/dialogDrag";
  36. import { RecycleScroller } from 'vue-virtual-scroller'
  37. Vue.directive("dialogDrag", dialogDrag);
  38. Vue.component('RecycleScroller', RecycleScroller)
  39. Vue.component('VirtualList', VirtualList)
  40. Vue.use(ElementUI);
  41. // 引入tailwind
  42. // https://www.tailwindcss.cn/docs/installation
  43. Vue.prototype.$BASE_URL = window?._BASE_CONFIG?.API;
  44. Vue.config.productionTip = false;
  45. if (store.state.auth.userInfo.permission !== undefined) {
  46. store.dispatch("auth/setAddRouter", {
  47. resultRouter:
  48. (store.state.auth.userInfo && store.state.auth.userInfo.permission) || [],
  49. router,
  50. });
  51. }
  52. //开始结束时间转换
  53. Vue.prototype.$formatDate = function (date) {
  54. const year = date.getFullYear();
  55. const month = (date.getMonth() + 1).toString().padStart(2, "0"); // Adding 1 to month since it's zero-based
  56. const day = date.getDate().toString().padStart(2, "0");
  57. return `${year}-${month}-${day}`;
  58. };
  59. Vue.directive("lazy-load", lazyLoad);
  60. Vue.directive("hasPermi", permission);
  61. Vue.directive("inview", inview);
  62. // 时间戳转换
  63. Vue.prototype.$formatDateTWO = function (timestamp) {
  64. const date = new Date(timestamp);
  65. const year = date.getFullYear();
  66. const month = String(date.getMonth() + 1).padStart(2, "0");
  67. const day = String(date.getDate()).padStart(2, "0");
  68. const hours = String(date.getHours()).padStart(2, "0");
  69. const minutes = String(date.getMinutes()).padStart(2, "0");
  70. // const seconds = String(date.getSeconds()).padStart(2, "0");:${seconds}
  71. return `${year}-${month}-${day} ${hours}:${minutes}`;
  72. };
  73. // 路由导航守卫
  74. router.beforeEach((to, from, next) => {
  75. if (from.path === "/home/performance/customAnalysis") {
  76. if (to.path !== "/home/performance/luckySheet") {
  77. store.commit("dragChart/clearchart");
  78. }
  79. }
  80. next();
  81. });
  82. // 监听页面刷新或关闭事件
  83. window.addEventListener("beforeunload", () => {
  84. // 调用清空 Vuex 仓库的 Action
  85. store.commit("dragChart/clearchart");
  86. });
  87. new Vue({
  88. router,
  89. store,
  90. mounted() {
  91. this.applyTheme();
  92. },
  93. watch: {
  94. "$store.state.themes.theme": {
  95. handler(newTheme, oldTheme) {
  96. this.applyTheme(newTheme, oldTheme);
  97. },
  98. immediate: true,
  99. },
  100. },
  101. methods: {
  102. async applyTheme(theme, oldTheme) {
  103. const themeFile = theme || this.$store.state.themes.theme;
  104. // 动态加载新的主题样式
  105. try {
  106. // 动态导入 SCSS 文件
  107. const theme = await import(`@/themes/${themeFile}.scss`);
  108. Vue.prototype.$backgroundColor = getComputedStyle(
  109. document.documentElement
  110. ).getPropertyValue("--background-color");
  111. // 移除之前的主题样式
  112. let oldThemeStyle = document.getElementById("theme-style");
  113. if (oldThemeStyle) {
  114. oldThemeStyle.parentNode.removeChild(oldThemeStyle);
  115. }
  116. // 创建新的样式标签并插入到 head 中
  117. const style = document.createElement("style");
  118. style.id = "theme-style";
  119. style.type = "text/css";
  120. style.innerHTML = theme.default;
  121. document.head.appendChild(style);
  122. if (theme !== oldTheme && oldTheme !== undefined) {
  123. this.$router.go(0);
  124. }
  125. } catch (error) {
  126. console.error("Failed to load theme", error);
  127. }
  128. },
  129. },
  130. render: (h) => h(App),
  131. }).$mount("#app");