@ganwei-web/ganwei-pc-cli 6.2.5 → 6.2.6

package/ganwei-iotcenter-index-6.2.2/packages/ganwei-iotcenter-index/src/components/asideMenu/topNav.vue

@@ -0,0 +1,256 @@
+<template>
+    <div class="top-nav-warpper" id="topNavWarpper">
+        <span class="arrow arrow-left iconfont icon-tubiao24_you" v-if="showLeftArrow"
+            @click.prevent.stop="arrowClikc('left')"></span>
+        <div class="scrollView" id="topNavScrollView">
+            <div class="top-nav-container" id="topNavContainer">
+                <div class="top-nav-item" :class="{ active: modelValue === item.index }" :id="item.id + item.name"
+                    v-for="item in options" :key="item.id" @click="itemClick(item)">
+                    <div class="iconBox" :style="{ backgroundColor: item.backgroundColor }">
+                        <i v-if="item.icon" class="iconfont" :class="item.icon"></i>
+                    </div>
+                    {{ item.name }}
+                </div>
+            </div>
+        </div>
+        <span class="arrow arrow-right iconfont icon-tubiao24_you" @click.prevent.stop="arrowClikc('right')"
+            v-if="showRightArrow"></span>
+    </div>
+</template>
+<script>
+import { getCurrentInstance, inject, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router'
+export default {
+    props: {
+        modelValue: {
+            type: Number
+        },
+        options: {
+            type: Array
+        }
+    },
+    emits: ['update:modelValue', 'select'],
+    setup(props, context) {
+        const routesMap = inject('routesMap')
+        const route = useRoute()
+        const showLeftArrow = ref(false)
+        const showRightArrow = ref(false);
+        const time = ref(null)
+        const { appContext: { config: { globalProperties } } } = getCurrentInstance()
+        globalProperties.$bus.on('topResize', () => {
+            updateArrayShow()
+        })
+        watch([route, routesMap], ([val, routesMap]) => {
+            const decodedPath = decodeURIComponent(val.fullPath)
+            if (decodedPath in routesMap) {
+                const index = routesMap[decodedPath]
+                if (index !== props.modelValue) {
+                    context.emit('update:modelValue', routesMap[decodedPath])
+                }
+            }
+        }, { deep: true, immediate: true }
+        )
+        const resize = () => {
+            updateArrayShow()
+        }
+        const updateArrayShow = () => {
+            if (time.value) {
+                clearTimeout(time.value)
+                time.value = null
+            }
+            time.value = setTimeout(() => {
+                const topNavWarpper = document.getElementById('topNavWarpper')
+                const topNavContainer = document.getElementById('topNavContainer')
+                if ((topNavWarpper.clientWidth < topNavContainer.clientWidth)) {
+                    showLeftArrow.value = true;
+                    showRightArrow.value = true
+                } else {
+                    showLeftArrow.value = false;
+                    showRightArrow.value = false
+                }
+                scrollToView()
+            }, 500)
+        }
+        const scrollToView = () => {
+            if (props.options.length) {
+                let item = props.options[props.modelValue]
+                if (item) {
+                    let dom = document.getElementById(`${item.id}${item.name}`)
+                    dom.scrollIntoView({ behavior: "smooth" })
+                }
+            }
+        }
+        onMounted(() => {
+            updateArrayShow()
+        })
+
+        watch(() => props.modelValue, (val) => {
+            updateArrayShow()
+        })
+
+        const itemClick = (item) => {
+            if (item.route && item.route.includes('http') && item.route.includes('target=_blank')) {
+                let url = item.route.replace(/\??target=_blank/, '')
+                window.open(url)
+                return
+            }
+            context.emit('update:modelValue', item.index)
+            context.emit('select', item.index)
+            let dom = document.getElementById(`${item.id}${item.name}`)
+            dom.scrollIntoView({ behavior: "smooth" })
+        }
+        const arrowClikc = (type) => {
+            const topNavScrollView = document.getElementById('topNavScrollView')
+            switch (type) {
+                case 'left':
+                    topNavScrollView.scrollTo({ left: topNavScrollView.scrollLeft - 200, behavior: "smooth" })
+                    break;
+                case 'right':
+                    topNavScrollView.scrollTo({ left: topNavScrollView.scrollLeft + 200, behavior: "smooth" })
+                    break;
+                default:
+                    break;
+            }
+        }
+
+        window.addEventListener("resize", () => {
+            resize()
+        });
+
+        return {
+            showLeftArrow, showRightArrow, resize, itemClick, arrowClikc
+        }
+    }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.iconBox {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    margin-right: 6px;
+    width: 24px;
+    height: 24px;
+    border-radius: 6px;
+}
+
+.top-nav-warpper {
+    display: flex;
+    width: calc(100% - 380px);
+    min-width: 140px;
+    max-width: 980px;
+    position: relative;
+    align-items: center;
+    height: 50px;
+    user-select: none;
+
+    .arrow {
+        display: block;
+        font-size: 24px;
+        color: var(--menu-color);
+        cursor: pointer;
+        z-index: 2;
+        opacity: 1;
+    }
+
+    .scrollView {
+        overflow: auto;
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+        gap: 10px;
+    }
+
+    &:hover .arrow {
+        opacity: 1;
+    }
+
+    .arrow-left {
+        transform: rotateY(180deg);
+        // margin-left: -20px;
+        z-index: 10000;
+    }
+}
+
+::-webkit-scrollbar {
+    width: 0px !important;
+    height: 0px !important;
+}
+
+.top-nav-container {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    line-height: 32px;
+    transition: transform 0.3s ease-in-out;
+    gap: 10px;
+
+    .top-nav-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: 400;
+        color: var(--menu-color);
+        position: relative;
+        cursor: pointer;
+        padding: 0 20px;
+        border: 1px solid transparent;
+        height: 32px;
+
+        &:hover,
+        &.active {
+            color: #3875FF;
+            border: 1px solid #3875FF;
+            border-radius: 8px;
+            background: rgba(56, 117, 255, 0.1);
+
+            .iconBox {
+                i {
+                    color: #3875FF !important;
+                }
+
+            }
+        }
+
+        .iconBox {
+            i {
+                font-size: 16px !important;
+                color: var(--menu-color) !important;
+            }
+
+            margin-right: 0;
+            background: transparent !important;
+        }
+    }
+}
+
+[data-theme="green"] #topNavContainer {
+    >.active {
+        height: 100%;
+        background: rgba(56, 117, 255, 0.1);
+        color: rgb(10 235 222 / 75%);
+        border: 1px solid rgb(10 235 222 / 75%);
+        z-index: -1;
+
+        .iconBox {
+            i {
+                color: rgb(10 235 222 / 75%) !important;
+            }
+        }
+    }
+
+    .top-nav-item:hover {
+        background: rgba(56, 117, 255, 0.1);
+        color: rgb(10 235 222 / 75%);
+        border: 1px solid rgb(10 235 222 / 75%);
+
+        .iconBox {
+            i {
+                color: rgb(10 235 222 / 75%) !important;
+            }
+        }
+    }
+}
+</style>

package/ganwei-iotcenter-index-6.2.2/packages/ganwei-iotcenter-index/src/components/contextMenu/index.js

@@ -0,0 +1,42 @@
+
+// import Vue from "vue";
+import { createApp } from "vue";
+
+import Main from "./Index.vue";
+
+let instance;
+
+const createMount = options => {
+    const mountNode = document.createElement("div");
+    mountNode.id = "mountNode"
+    mountNode.style.position = "relative"
+    mountNode.style.zIndex = 9
+    document.body.appendChild(mountNode);
+    const app = createApp(Main, {
+        ...options,
+        remove () {
+            app.unmount(mountNode);
+            document.body.removeChild(document.getElementById("mountNode"));
+        }
+    });
+    return app.mount(document.getElementById("mountNode"));
+};
+
+const ContextMenu = options => {
+    instance = createMount(options);
+    instance.visible = true;
+    instance.commands = options.commands;
+    instance.left = options.left;
+    instance.top = options.top;
+    instance.root = options.root;
+    instance.width = options.width;
+    return instance;
+};
+
+ContextMenu.close = () => {
+    if (instance) {
+        instance.closed = true;
+    }
+}
+
+export default ContextMenu;

package/ganwei-iotcenter-index-6.2.2/packages/ganwei-iotcenter-index/src/components/contextMenu/index.vue

@@ -0,0 +1,113 @@
+<template>
+    <transition name="el-fade-in">
+        <div @mouseup="this.close" v-show="visible" class="ContextMenu-wrapper">
+            <ul :class="['ContextMenu', customClass]" :style="`width: ${width}px;left: ${left}px;top: ${top}px;`">
+                <li @mouseup="handleClick($event, item)" class="ContextMenu-item" :class="{ 'is-disabled': item.disabled }"
+                    v-for="item in commands" :key="item">
+                    <i :class="['iconfont', iconClass, item.icon]"></i>
+                    <span>{{ item.label }}</span>
+                </li>
+            </ul>
+        </div>
+    </transition>
+</template>
+
+<script type="text/babel">
+export default {
+    data () {
+        return {
+            visible: false,
+            customClass: '',
+            iconClass: '',
+            onClose: null,
+            closed: false,
+            commands: [],
+            left: -9999,
+            top: -9999,
+            width: 100
+        };
+    },
+
+    watch: {
+        closed (newVal) {
+            if (newVal) {
+                this.visible = false;
+                // this.$el.addEventListener('transitionend', this.destroyElement);
+            }
+        }
+    },
+    methods: {
+        destroyElement () {
+            this.$el.removeEventListener('transitionend', this.destroyElement);
+            this.$destroy(true);
+            this.$el.parentNode.removeChild(this.$el);
+        },
+
+        close () {
+            this.closed = true;
+            if (typeof this.onClose === 'function') {
+                this.onClose();
+            }
+        },
+
+        handleClick (e, item) {
+            if (item.disabled) {
+                e.stopPropagation();
+                return;
+            }
+            item.onclick && item.onclick();
+        }
+    },
+
+    // mounted () {
+    // }
+};
+</script>
+
+<style lang="scss" scoped>
+.ContextMenu-wrapper {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+.ContextMenu {
+    position: fixed;
+    background-color: var(--contextmenu-background);
+    border-radius: 6px;
+    margin: 4px;
+    padding: 6px 0;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(240, 244, 255, 0.16);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    user-select: none;
+
+    &-item {
+        cursor: pointer;
+        padding: 10px;
+        font-size: 14px;
+        color: var(--contextmenu-color);
+        display: flex;
+        align-items: center;
+
+        i {
+            display: inline-block;
+            min-width: 16px;
+            margin-right: 5px;
+            font-size: 16px;
+        }
+
+        &.is-disabled {
+            cursor: not-allowed;
+            color: var(--contextmenu-color__disabled);
+        }
+
+        &:not(.is-disabled):hover {
+            background-color: var(--contextmenu-background__hover);
+        }
+    }
+}
+</style>

package/ganwei-iotcenter-index-6.2.2/packages/ganwei-iotcenter-index/src/components/indexLeftContent/index.js

@@ -0,0 +1,205 @@
+
+import { defineAsyncComponent, getCurrentInstance, inject, nextTick, ref, toRaw, watch } from 'vue'
+import { useRouter } from 'vue-router'
+const asideMenu = defineAsyncComponent(() => { return import('@/components/asideMenu/menu.vue') })
+const contractMenu = defineAsyncComponent(() => { return import('@/components/asideMenu/contractMenu.vue') })
+// 整合调整：ganwei-pc 改为 ganwei-web
+const widthSetting = defineAsyncComponent(() => { return import('@ganwei-web/gw-base-components-plus/widthSetting/dist/index.es.js') })
+
+export default {
+    props: {
+        allMenus: {
+            type: Array,
+            default: () => []
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        navTopActive: {
+            type: Number || String,
+            default: -1
+        }
+    },
+    components: {
+        asideMenu,
+        widthSetting,
+        contractMenu
+    },
+
+    setup(props) {
+        const config = inject('config')
+        const theme = inject('theme')
+        const menuSearch = ref('')
+        const isCollapse = ref(false)
+        const transition = ref(false)
+        const renderMenu = ref([])
+        const menus = ref([])
+        const showOrganizationalStructure = ref(config.value.showOrganization)
+        const organizationName = ref('')
+        let router = useRouter()
+        const menuActive = ref(router.currentRoute.value.fullPath)
+        const { appContext: { config: { globalProperties } } } = getCurrentInstance()
+        globalProperties.$bus.on('organizationName', (value) => {
+            organizationName.value = value
+        })
+        globalProperties.$bus.on('jumpUrl', (route) => {
+            jump(route)
+        })
+        const initMenu = () => {
+            menuSearch.value = ''
+            if (!config.value.showTopNav) {
+                menus.value = JSON.parse(JSON.stringify(props.allMenus))
+            } else if (props.navTopActive != -1) {
+                if (props.allMenus?.[props.navTopActive]?.children) {
+                    menus.value = toRaw([...props.allMenus[props.navTopActive].children])
+                } else {
+                    menus.value = []
+                }
+            }
+            renderMenu.value = JSON.parse(JSON.stringify(menus.value))
+            jumpMenu()
+        }
+        const jumpMenu = () => {
+            let route = router.currentRoute.value.fullPath
+            if (route.toLowerCase() == '/index') {
+                if (renderMenu.value.length) {
+                    jumpFirstMenu()
+                } else if (props.navTopActive != -1) {
+                    const { nodeType, route, name } = props.allMenus[props.navTopActive] || {}
+                    if (nodeType == 2) {
+                        jump(route, name)
+                    }
+                }
+            } else {
+                let navTopItem = props.allMenus?.[props.navTopActive]
+                if (navTopItem && navTopItem.nodeType == 2) {
+                    const { route, name } = navTopItem || {}
+                    jump(route, name)
+                }
+            }
+        }
+        const jumpFirstMenu = () => {
+            let firstMenu = getFirstMenu(renderMenu.value)
+            const { route, name } = firstMenu
+            jump(route, name)
+        }
+
+        const jump = (route) => {
+            if (!route) {
+                return;
+            }
+            nextTick(() => {
+                if (route.includes('http') && route.includes('target=_blank')) {
+                    let jumpUrl = route.replace(/\??target=_blank/, '')
+                    window.open(jumpUrl)
+                } else {
+                    router.push(route)
+                }
+            })
+        }
+        const getFirstMenu = (menus) => {
+            let firstMenu = {}
+            if (menus) {
+                for (let item of menus) {
+                    if (item.nodeType == 2 && item.route) {
+                        firstMenu.route = item.route;
+                        firstMenu.name = item.name;
+                        break
+                    } else if (item.children) {
+                        firstMenu = getFirstMenu(item.children)
+                        if (firstMenu.route && firstMenu.name) { break }
+                    }
+                }
+            }
+            return firstMenu
+        }
+        const searchMenu = () => {
+            renderMenu.value = findMenu(menuSearch.value, toRaw(menus.value))
+        }
+
+        // 导航菜单折叠显示
+        const onAsideListShow = () => {
+            if (transition.value) {
+                return
+            }
+            transition.value = true
+            isCollapse.value = !isCollapse.value
+            setTimeout(() => {
+                transition.value = false
+            }, 600)
+        }
+        const findMenu = (value, arr) => {
+            let newarr = [];
+            arr.forEach(element => {
+                if (element.name.toLowerCase().indexOf(String(value).toLowerCase()) > -1) { // 判断条件
+                    newarr.push(element);
+                } else {
+                    if (element.children && element.children.length > 0) {
+                        let redata = findMenu(value, element.children || []);
+                        if (redata && redata.length > 0) {
+                            let obj = {
+                                ...element,
+                                children: redata
+                            };
+                            newarr.push(obj);
+                        }
+                    }
+                }
+            });
+            return newarr;
+        }
+        const logoJump = () => {
+            let logoJumpPath = config?.value?.logoJumpPath?.url
+            if (logoJumpPath) {
+                jump(logoJumpPath)
+            }
+        }
+        const setActiveMenu = () => {
+            let route = decodeURIComponent(router.currentRoute.value.fullPath)
+            if (route.toLowerCase() != '/index') {
+                menuActive.value = route
+            }
+        }
+
+        const resizeEnd = () => {
+            globalProperties.$bus.emit('topResize')
+        }
+
+        watch(() => props.navTopActive, () => {
+            initMenu()
+        }, { immediate: true })
+
+        watch(() => props.allMenus, () => {
+            initMenu()
+            setActiveMenu()
+        }, { immediate: true })
+
+        watch(menuSearch, (val) => {
+            if (!val) {
+                searchMenu()
+            }
+        })
+        watch(() => router.currentRoute.value.fullPath, () => {
+            setActiveMenu()
+        }, { immediate: true })
+
+        globalProperties.$bus.on('navTopSelectChange', () => {
+            jumpFirstMenu()
+        })
+
+        const showImg = () => {
+            if (process.env.NODE_ENV === "development") { theme.value.logo = `/static/images/${localStorage.theme == 'dark' ? 'index-logo-src' : 'index-logo-src-light'}.svg` }
+        }
+
+        return {
+            logoJump,
+            resizeEnd,
+            onAsideListShow,
+            searchMenu,
+            menuSearch,
+            isCollapse,
+            transition, renderMenu, menus, menuActive, config, theme, showImg, showOrganizationalStructure, organizationName
+        }
+    },
+}