@ganwei-web/ganwei-pc-cli 6.2.2 → 6.2.3

package/ganwei-app-6.2.1/packages/ganwei-app-home/src/views/ganwei-app-home/src/components/HomeSnapshots.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="dataItem">
+        <TitleList>
+            <template #subTitle>
+                {{ $t('home.subModule.snapshot.title') }}
+            </template>
+            <el-row class="systemOperationOverview_main" :gutter="10">
+                <el-col :span="colWidth" v-for="(item, index) in snapshotList" :key="index">
+                    <div class="OverviewItem" @click="goPage(item.path, $t(item.name))">
+                        <div class="left_ico">
+                            <img class="left_img" :src="item.img" />
+                            <p class="right_msg_title">{{ $t(item.name) }}</p>
+                        </div>
+                        <div class="right_msg">
+                            <p class="right_msg_msg" :class="item.className">
+                                {{ item.displayValue }}
+                                <span>{{ $t('home.unit.item') }}</span>
+                            </p>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </TitleList>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { bus } from 'wujie';
+
+import { useMFEManager } from '@ganwei-web/gw-app-mfe';
+
+import TitleList from '@/components/Layout/TitleList.vue';
+
+import useLanguageStyle from '../js/useLanguageStyle';
+import useRealTime from '../js/useRealTime';
+
+const { colWidth } = useLanguageStyle()
+const { snapshotList } = useRealTime()
+
+const MFEManager = useMFEManager()
+function goPage(type: string, title: string) {
+    MFEManager?.router.push({ path: `/index/jump/ganwei-app-snapshots`, query: { type: type } });
+    bus.$emit('snapshotsTypeChange', { title, type })
+}
+
+</script>
+
+<style lang="scss" scoped>
+// 系统运行总览
+.systemOperationOverview_main {
+    width: 100%;
+    margin: 0 !important;
+
+    .OverviewItem {
+        position: relative;
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        height: 56px;
+        margin-bottom: 12px;
+        padding: 0 10px;
+
+        background-color: var(--snapshot-item-bg);
+        border-radius: 6px;
+
+        .left_ico {
+            // display: none;
+            display: flex;
+            align-items: center;
+
+            .left_img {
+                padding: 8px;
+            }
+
+            .right_msg_title {
+                font-size: 0.875rem;
+                color: var(--snapshot-item-title);
+                text-align: center;
+                white-space: nowrap;
+            }
+        }
+
+        .right_msg {
+            .right_msg_msg {
+                display: flex;
+
+                font-size: 20px;
+                font-weight: bold;
+                line-height: 20px;
+                color: var(--snapshot-item-title);
+                text-align: center;
+
+                span {
+                    margin-left: 2px;
+                    font-size: 14px;
+                    font-weight: normal;
+                    line-height: 23px;
+                }
+            }
+        }
+    }
+
+    .m_line {
+        position: absolute;
+    }
+}
+</style>

package/ganwei-app-6.2.1/packages/ganwei-app-home/src/views/ganwei-app-home/src/components/chatbot.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="chatbot-entry" :style="{ left: pos.x + 'px', top: pos.y + 'px' }" @mousedown="onMouseDown"
+    @touchstart="onTouchStart" @click="onClick" title="问答机器人" :class="isAI.includes(AI_PATH.path) ? '' : 'displayNone'">
+    <img src="../img/chatbot.gif" alt="问答机器人" />
+
+  </div>
+</template>
+
+<script setup>
+import { inject, ref } from 'vue'
+
+import { useMFEManager } from '@ganwei-web/gw-app-mfe';
+
+import { AI_PATH } from '@/enums';
+const showModules = inject('showModules');
+const arry = showModules._value.filter(element => {
+  return element.route.includes(AI_PATH.path)
+});
+const isAI = arry.length > 0 ? arry[0].route : '';
+
+const MFEManager = useMFEManager()
+
+const pos = ref({ x: window.innerWidth - 90, y: window.innerHeight - 220 });
+const dragging = ref(false);
+let offset = { x: 0, y: 0 };
+
+const onMouseDown = (e) => {
+  dragging.value = true;
+  offset.x = e.clientX - pos.value.x;
+  offset.y = e.clientY - pos.value.y;
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp);
+};
+
+const onMouseMove = (e) => {
+  if (!dragging.value) return;
+  pos.value.x = e.clientX - offset.x;
+  pos.value.y = e.clientY - offset.y;
+};
+
+const onMouseUp = () => {
+  dragging.value = false;
+  document.removeEventListener('mousemove', onMouseMove);
+  document.removeEventListener('mouseup', onMouseUp);
+};
+
+// 移动端 touch 事件
+const onTouchStart = (e) => {
+  dragging.value = true;
+  const touch = e.touches[0];
+  offset.x = touch.clientX - pos.value.x;
+  offset.y = touch.clientY - pos.value.y;
+  document.addEventListener('touchmove', onTouchMove, { passive: false });
+  document.addEventListener('touchend', onTouchEnd);
+};
+
+const onTouchMove = (e) => {
+  if (!dragging.value) return;
+  const touch = e.touches[0];
+  pos.value.x = touch.clientX - offset.x;
+  pos.value.y = touch.clientY - offset.y;
+  e.preventDefault(); // 防止页面滚动
+};
+
+const onTouchEnd = () => {
+  dragging.value = false;
+  document.removeEventListener('touchmove', onTouchMove);
+  document.removeEventListener('touchend', onTouchEnd);
+};
+
+const onClick = () => {
+  MFEManager?.router.push("/index/jump/outerlink?url=" + AI_PATH.path)
+};
+</script>
+
+<style scoped>
+.chatbot-entry {
+  position: fixed;
+  z-index: 999999;
+  user-select: none;
+  transition: box-shadow 0.2s;
+}
+
+.chatbot-entry img {
+  width: 100px;
+  height: 100px;
+}
+
+.chatbot-entry:active {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+.displayNone {
+  display: none;
+}
+</style>

package/ganwei-app-6.2.1/packages/ganwei-app-home/src/views/ganwei-app-home/src/components/eslint.config.js

@@ -0,0 +1,10 @@
+import js from "@eslint/js";
+import { defineConfig } from "eslint/config";
+import pluginVue from "eslint-plugin-vue";
+import globals from "globals";
+
+export default defineConfig([
+  { files: ["**/*.{js,mjs,cjs,vue}"], plugins: { js }, extends: ["js/recommended"] },
+  { files: ["**/*.{js,mjs,cjs,vue}"], languageOptions: { globals: globals.browser } },
+  pluginVue.configs["flat/essential"],
+]);

package/ganwei-app-6.2.1/packages/ganwei-app-home/src/views/ganwei-app-home/src/css/index.scss

@@ -0,0 +1,5 @@
+.home {
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+}

package/ganwei-app-6.2.1/packages/ganwei-app-home/src/views/ganwei-app-home/src/index.vue

@@ -0,0 +1,42 @@
+
+<template>
+    <appFrame :showTop="false" :showBottom="false" :leftText="$t('home.title')" rightIcon="icon_Nav_saoyisao"
+        :rightIconTip="$t('home.button.scane')">
+        <div class="home">
+            <HomeSnapshots></HomeSnapshots>
+            <HomeMenus :showModules :showEditButton @edit="showMenuEditDrawer"></HomeMenus>
+            <HomeMenusEditDrawer v-model:showModules="showModules" v-bind:deleteModules="deleteModules" v-model:showEdit="menuEditDrawerVisible"></HomeMenusEditDrawer>
+            <chatbot></chatbot>
+        </div>
+    </appFrame>
+</template>
+<script setup lang="ts">
+import { computed, provide, ref } from 'vue'
+
+import chatbot from './components/chatbot.vue'
+import HomeMenus from './components/HomeMenus.vue'
+import HomeMenusEditDrawer from './components/HomeMenusEditDrawer.vue'
+import HomeSnapshots from './components/HomeSnapshots.vue'
+import useMenus from './js/useMenus'
+
+const menuColorList = ['#6763EF', '#2FA9E6', '#B945CE', '#27AE79', '#F68309', '#9872EF', '#0FD3D4', '#F37071', '#FDB03D']
+const menuEditDrawerVisible = ref(false)
+const { showModules, deleteModules } = useMenus()
+
+const showEditButton = computed(() => {
+    return showModules.value.length > 0 || deleteModules.value.length > 0
+})
+
+function showMenuEditDrawer() {
+    menuEditDrawerVisible.value = true
+}
+function getBackground(index: number) {
+    return {
+        background: menuColorList[index % menuColorList.length]
+    }
+}
+
+provide('getBackground', getBackground)
+provide('showModules', showModules)
+</script>
+<style lang="scss" src="./css/index.scss" scoped></style>

package/ganwei-app-6.2.1/packages/ganwei-app-home/src/views/ganwei-app-home/src/js/useLanguageStyle.ts

@@ -0,0 +1,21 @@
+import { onBeforeMount, ref } from "vue";
+
+export default function () {
+    const colWidth = ref(12)
+    function setColWidth(languageType: string) {
+        if (languageType == 'en-US') {
+            colWidth.value = 24
+        } else {
+            colWidth.value = 12
+        }
+    }
+
+    onBeforeMount(() => {
+        setColWidth(localStorage.languageType)
+    })
+
+    return {
+        colWidth,
+        setColWidth
+    }
+}

package/ganwei-app-6.2.1/packages/ganwei-app-home/src/views/ganwei-app-home/src/js/useManageMenus.ts

@@ -0,0 +1,38 @@
+import { Ref } from "vue";
+
+import { MenuItem } from "@/models";
+
+export default function useManageMenus(showModules: Ref<MenuItem[]>, deleteModules: Ref<MenuItem[]>) {
+
+    /**
+     * @description 本地保存菜单禁用、启用状态
+     */
+    function saveModules() {
+        localStorage.setItem('showModules', JSON.stringify(showModules.value));
+        localStorage.setItem('deleteModules', JSON.stringify(deleteModules.value));
+    }
+
+    /**
+     * @description 启用菜单
+     * @param {number} index
+     */
+    function addModules(index: number) {
+        showModules.value.push(deleteModules.value[index]);
+        deleteModules.value.splice(index, 1)
+    }
+
+    /**
+     * @description 禁用菜单
+     * @param {number} index
+     */
+    function removeModules(index: number) {
+        deleteModules.value.push(showModules.value[index]);
+        showModules.value.splice(index, 1)
+    }
+
+    return {
+        addModules,
+        removeModules,
+        saveModules
+    }
+}

package/ganwei-app-6.2.1/packages/ganwei-app-home/src/views/ganwei-app-home/src/js/useMenus.ts

@@ -0,0 +1,49 @@
+import { computed, onBeforeMount, ref } from "vue";
+
+import { MenuItem } from "@/models";
+
+export default function () {
+    const allModules = ref<MenuItem[]>([])
+    const showModules = ref<MenuItem[]>([])
+    const deleteModules = ref<MenuItem[]>([])
+
+    /**
+     * @description 过滤出非底部菜单
+     */
+    function filterBottomMenu() {
+        try {
+            const menu = JSON.parse(sessionStorage.menu) as MenuItem[]
+            const filterMenu = menu.filter(i => !i.isAppBottomMenu)
+            allModules.value = filterMenu;
+        } catch (e) {
+            console.log(e)
+        }
+    }
+
+    /**
+     * @description 获取本地禁用菜单、启用菜单
+     */
+    function getShowMenus() {
+        deleteModules.value = []
+        showModules.value = []
+
+        const localDeleteModules = (JSON.parse(localStorage.getItem('deleteModules')!) || []) as MenuItem[]
+        for (const module of allModules.value) {
+            if (localDeleteModules.some(deleteModule => module.route === deleteModule.route)) {
+                deleteModules.value.push(module)
+            } else {
+                showModules.value.push(module)
+            }
+        }
+    }
+
+    onBeforeMount(() => {
+        filterBottomMenu()
+        getShowMenus()
+    })
+
+    return {
+        showModules,
+        deleteModules,
+    }
+}

package/ganwei-app-6.2.1/packages/ganwei-app-home/src/views/ganwei-app-home/src/js/usePolling.ts

@@ -0,0 +1,38 @@
+import { onBeforeUnmount } from "vue";
+
+export default function (requestFn: () => Promise<unknown>, timeOut = 1000) {
+    let pollingInterval: number | null = null;
+
+    function startPolling() {
+        if (pollingInterval) {
+            // 已经存在定时器，不重复执行
+            return;
+        }
+
+        requestFn().then(() => {
+            pollingInterval = window.setTimeout(
+                () => {
+                    pollingInterval = null;
+                    startPolling()
+                },
+                timeOut
+            )
+        }).catch(() => {
+            stopPolling()
+        })
+    }
+
+    function stopPolling() {
+        if (pollingInterval) {
+            window.clearTimeout(pollingInterval);
+            pollingInterval = null;
+        }
+    }
+
+    onBeforeUnmount(stopPolling)
+
+    return {
+        startPolling,
+        stopPolling
+    }
+}

package/ganwei-app-6.2.1/packages/ganwei-app-home/src/views/ganwei-app-home/src/js/useRealTime.ts

@@ -0,0 +1,128 @@
+
+import { onMounted, ref } from 'vue';
+
+import Toast from '@ganwei-web/gw-app-components/toast';
+
+import { ISnapshot } from '@/models';
+import { realTimeService } from '@/request/api';
+
+import usePolling from './usePolling'
+
+function getNumberRange(min: number, max: number) {
+    return Array.from({ length: max - min + 1 }, (_, i) => min + i);
+}
+
+export default function () {
+    let levels: number[] = []
+    const { startPolling } = usePolling(getRealTimeEventCounts)
+
+    const snapshotList = ref<ISnapshot[]>([
+        {
+            title: '故障',
+            displayValue: '0',
+            value: 0,
+            tabTopId: 1,
+            img: import.meta.env.VITE_IMAGE_BASE + '/snapshot_alarm.svg',
+            name: 'home.subModule.snapshot.types.alarm',
+            className: 'guzhang',
+            path: 'Errors'
+        },
+        {
+            title: '警告',
+            displayValue: '0',
+            value: 0,
+            tabTopId: 2,
+            img: import.meta.env.VITE_IMAGE_BASE + '/snapshot_warning.svg',
+            name: 'home.subModule.snapshot.types.warning',
+            className: 'jinggao',
+            path: 'Warnings'
+        },
+        {
+            title: '信息',
+            displayValue: '0',
+            value: 0,
+            tabTopId: 3,
+            img: import.meta.env.VITE_IMAGE_BASE + '/snapshot_info.svg',
+            name: 'home.subModule.snapshot.types.info',
+            className: 'xinxi',
+            path: 'Infos'
+        },
+        {
+            title: '设置',
+            displayValue: '0',
+            value: 0,
+            tabTopId: 4,
+            img: import.meta.env.VITE_IMAGE_BASE + '/snapshot_setup.svg',
+            name: 'home.subModule.snapshot.types.setup',
+            className: 'shezhi',
+            path: 'Settings'
+        },
+        {
+            title: '资产',
+            displayValue: '0',
+            value: 0,
+            tabTopId: 5,
+            img: import.meta.env.VITE_IMAGE_BASE + '/snapshot_zichan.svg',
+            name: 'home.subModule.snapshot.types.asset',
+            className: 'zichan',
+            path: 'Assets'
+        }
+    ])
+
+    /**
+     * @description 获取实时快照类别配置
+     */
+    function getRealTimeEventTypeConfig() {
+        realTimeService.getRealTimeEventTypeConfig().then(res => {
+            if (res.data.code === 200) {
+                const data = res.data.data
+                if (data) {
+                    levels = data.reduce<number[]>((range, config) => {
+                        return range.concat(getNumberRange(config.snapshotLevelMin, config.snapshotLevelMax))
+                    }, [])
+                    startPolling()
+                }
+            } else {
+                Toast.error(res.data.message);
+            }
+        }).catch(err => {
+            console.log('err', err);
+        })
+    }
+
+    /**
+     * @description 获取实时快照类别数量
+     */
+    function getRealTimeEventCounts() {
+        const data = {
+            types: levels.join(',')
+        }
+        return realTimeService.getRealTimeEventCount(data).then(res => {
+            if (res.data.code === 200) {
+                const data = res.data.data
+                if (data) {
+                    snapshotList.value.forEach(snapshot => {
+                        const findSnapshot = data.find(i => i.name === snapshot.title)
+                        if (findSnapshot) {
+                            snapshot.value = findSnapshot.value
+                            snapshot.displayValue = findSnapshot.displayValue
+                        }
+                    })
+                } else {
+                    Toast.error(res.data.message);
+                }
+            }
+        }).catch(err => {
+            console.log(err);
+            throw new Error(err)
+        })
+    }
+
+    onMounted(() => {
+        getRealTimeEventTypeConfig()
+    })
+
+    return {
+        snapshotList
+    }
+}