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

package/ganwei-iotcenter-index-6.2.1/packages/ganwei-iotcenter-index/src/components/indexRightContent/headerRight/userInfo/systemInfoDialog/index.js

@@ -0,0 +1,240 @@
+import * as Echarts from 'echarts'
+export default {
+    props: {
+        showDialog: {
+            type: Boolean,
+            default: false
+        }
+    },
+    watch: {
+        showDialog (val) {
+            this.getSystemInfo()
+            this.dialogVisible = val;
+        }
+    },
+    data () {
+        return {
+            systemInfo: {
+                "platformInfo": {
+                    "grpcVersionInfo": "",
+                    "webVersionInfo": ""
+                },
+                // "licensingAndUsage": {
+                //     "liscenseEquipTotal": 0,
+                //     "equipTotal": 0,
+                //     "equipPercentage": 0,
+                //     "liscensePointTotal": 0,
+                //     "pointTotal": 0,
+                //     "pointPercentage": 0
+                // },
+                // "pointUsageDistribute": {
+                //     "ycpTotal": 0,
+                //     "yxpTotal": 0,
+                //     "setparmTotal": 0
+                // }
+            },
+            echartsList: [],
+            dialogVisible: false
+        }
+    },
+    mounted () {
+        this.getSystemInfo()
+    },
+    computed: {
+        platformInfo () {
+            return {
+                title: this.$t('login.framePro.platformInfo.title'),
+                childObject: {
+                    grpcVersionInfo: {
+                        title: this.$t('login.framePro.platformInfo.ghostVersion.title'),
+                        icon: "icon-yunhangpingtai"
+                    },
+                    webVersionInfo: {
+                        title: this.$t('login.framePro.platformInfo.webVersion.title'),
+                        icon: "icon-banbenguankong"
+                    }
+                }
+            }
+        },
+        licensingAndUsage () {
+            return {
+                title: this.$t('login.framePro.licensingAndUsage.title'),
+                childObject: {
+                    "liscenseEquipTotal": {
+                        title: this.$t('login.framePro.licensingAndUsage.liscenseEquipTotal.title'),
+                        toolTip: this.$t('login.framePro.licensingAndUsage.liscenseEquipTotal.toolTip'),
+                        icon: "icon-gw-icon-yijimenu-shebeiguanli"
+                    },
+                    "liscensePointTotal": {
+                        title: this.$t('login.framePro.licensingAndUsage.liscensePointTotal.title'),
+                        toolTip: this.$t('login.framePro.licensingAndUsage.liscensePointTotal.toolTip'),
+                        icon: "icon-jiancedian"
+                    },
+                    "equipTotal": {
+                        title: this.$t('login.framePro.licensingAndUsage.equipTotal.title'),
+                        valueColor: "#87c225",
+                        icon: "icon-caidan_shujufenxi"
+                    },
+                    "pointTotal": {
+                        title: this.$t('login.framePro.licensingAndUsage.pointTotal.title'),
+                        valueColor: "#87c225",
+                        icon: "icon-caidan_shujufenxi"
+                    },
+                    "equipPercentage": {
+                        title: this.$t('login.framePro.licensingAndUsage.equipPercentage.title'),
+                        showEchart: true,
+                        bottomTip: this.$t('login.framePro.licensingAndUsage.equipPercentage.bottomTip'),
+                        echartId: "equipPercentage",
+                        unit: "%"
+                    },
+                    "pointPercentage": {
+                        title: this.$t('login.framePro.licensingAndUsage.pointPercentage.title'),
+                        showEchart: true,
+                        bottomTip: this.$t('login.framePro.licensingAndUsage.pointPercentage.bottomTip'),
+                        echartId: "pointPercentage",
+                        unit: "%"
+                    }
+                }
+            }
+        },
+        pointUsageDistribute () {
+            return {
+                title: this.$t('login.framePro.pointUsageDistribute.title'),
+                childObject: {
+                    "ycpTotal": {
+                        title: this.$t('login.framePro.pointUsageDistribute.ycpTotal.title'),
+                        icon: "icon-yaotiao"
+                    },
+                    "yxpTotal": {
+                        title: this.$t('login.framePro.pointUsageDistribute.yxpTotal.title'),
+                        icon: "icon-yaoxinxinxiliangguanli"
+                    },
+                    "setparmTotal": {
+                        title: this.$t('login.framePro.pointUsageDistribute.setparmTotal.title'),
+                        icon: "icon-tubiao14_shezhi"
+                    }
+                }
+            }
+        }
+    },
+    methods: {
+        getColor (childItem) {
+            if (!childItem.showEchart) {
+                return childItem.valueColor || ''
+            }
+            let proportion = childItem.value.split('%')[0]
+            switch (true) {
+                case proportion <= 90:
+                    return '#0fe90f';
+                case proportion > 90 && proportion < 100:
+                    return 'orange'
+                case proportion >= 100:
+                    return 'red'
+                default:
+                    return 'green'
+            }
+        },
+        showBottomTip (childItem) {
+            if (childItem.showEchart) {
+                return childItem.value.split('%')[0] >= 100
+            }
+            return false
+        },
+
+        getSystemInfo () {
+            this.$api.getSystemInfo().then(res => {
+                const { code, data } = res?.data || {}
+                if (code == 200 && data) {
+                    Object.keys(this.systemInfo).forEach(key => {
+                        if (this[key]) {
+                            Object.keys(this.systemInfo[key]).forEach(key1 => {
+                                if (this[key]['childObject'][key1]) {
+                                    this.systemInfo[key]['childObject'] = this.systemInfo[key]['childObject'] || {}
+                                    this.systemInfo[key]['childObject'][key1] = {
+                                        value: (data[key] ? data[key][key1] : '') + '',
+                                        ...this[key]['childObject'][key1]
+                                    }
+                                    if (this[key]['childObject'][key1].showEchart) {
+                                        this.echartsList.push({
+                                            echartId: this[key]['childObject'][key1].echartId,
+                                            value: (data[key] ? data[key][key1] : '')
+                                        })
+                                    }
+                                }
+                            })
+                            this.systemInfo[key].title = this[key].title
+                        }
+                    })
+                    this.drawEchart()
+                }
+            })
+        },
+        drawEchart () {
+            this.echartsList.forEach(item => {
+                let dom = document.getElementById(item.echartId)
+                if (dom) {
+                    dom = Echarts.init(
+                        document.getElementById(item.echartId),
+                        'light'
+                    )
+                    let option = {
+                        backgroundColor: 'transparent',
+                        angleAxis: {
+                            max: 100,
+                            clockwise: false, // 逆时针
+                            // 隐藏刻度线
+                            show: false
+                        },
+                        radiusAxis: {
+                            type: 'category',
+                            show: true,
+                            axisLabel: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            }
+                        },
+                        polar: [
+                            {
+                                center: ['50%', '50%'],
+                                radius: '80%'
+                            }
+                        ],
+                        series: [
+                            {
+                                type: 'bar',
+                                data: [item.value],
+                                showBackground: true,
+                                polarIndex: 0,
+                                backgroundStyle: {
+                                    color: 'rgba(157, 166, 186, 0.39)',
+                                    borderWidth: 2
+                                },
+                                coordinateSystem: 'polar',
+                                roundCap: true,
+                                barWidth: 5,
+                                itemStyle: {
+                                    normal: {
+                                        opacity: 1,
+                                        color: '#0097fa'
+                                    }
+                                }
+                            }
+                        ]
+                    };
+                    dom.setOption(option)
+                }
+            })
+        },
+        getProportion (total, num) {
+            return ((num || 0) / (total || 1) * 100).toFixed(2) + "%"
+        },
+        closeDialog () {
+            this.$emit('closeDialog')
+        }
+    }
+}

package/ganwei-iotcenter-index-6.2.1/packages/ganwei-iotcenter-index/src/components/indexRightContent/headerRight/userInfo/systemInfoDialog/index.scss

@@ -0,0 +1,158 @@
+.el-overlay,
+.el-overlay-dialog {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.systemInformation_main {
+    user-select: none;
+
+    .flex-between-center {
+        display: flex;
+        // justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .systemInformation {
+        width: 100%;
+        height: 100%;
+        margin-bottom: 40px;
+
+        >header {
+            position: absolute;
+            top: -42px;
+            margin-left: 10%;
+            width: 80%;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+        }
+
+        .inform_title {
+            font-weight: bold;
+        }
+
+        .information_box {
+            width: 100%;
+            height: calc(100% - 50px);
+
+
+            &>div {
+                margin-top: 20px;
+            }
+
+            .diviceLine {
+                width: 100%;
+                height: 1.5px;
+                background-color: rgba(157, 166, 186, 0.39);
+                margin: 20px 0 0;
+                transform: scaleY(0.5);
+            }
+
+            .information_box_list {
+                width: 100%;
+                align-items: stretch;
+                justify-content: space-between;
+                gap: 10px;
+
+                .information_box_list_item {
+                    width: 228px;
+                    min-height: 100px;
+                    border: 1px solid rgba(157, 166, 186, 0.39);
+                    margin-top: 20px;
+                    padding: 10px 0px 10px 20px;
+                    padding-left: 20px;
+                    border-radius: 5px;
+                    position: relative;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: flex-start;
+
+
+                    .information_box_list_item_box {
+                        width: 100%;
+                        height: fit-content;
+                        flex-wrap: nowrap;
+                    }
+
+                    .box_left {
+                        width: 60px;
+                        margin-right: 12px;
+
+                        i {
+                            font-size: 22px;
+                            color: white;
+                        }
+
+                        .icon {
+                            width: 50px;
+                            height: 50px;
+                            border-radius: 50%;
+                            background-color: #078fff;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                        }
+                    }
+
+                    .box_right {
+                        width: calc(100% - 60px - 12px);
+
+                        .label {
+                            width: fit-content;
+                            font-size: 12px;
+                            white-space: break-spaces;
+
+                            span,
+                            .question_icon {
+                                font-size: 12px;
+                                display: inline;
+                                cursor: pointer;
+                                // word-break: break-all;
+                            }
+
+                            .question_icon {
+                                font-size: 16px;
+                                position: relative;
+                                top: 3px;
+                            }
+                        }
+
+                        .value {
+                            font-size: 24px;
+                            margin-top: 10px;
+                        }
+                    }
+
+                    .propotionEchart {
+                        width: 100px;
+                        height: 80px;
+
+                        .chart {
+                            width: 100%;
+                            height: 100%;
+
+                            div {
+                                width: 100% !important;
+                                height: 100% !important;
+                            }
+                        }
+                    }
+
+                    .bottomTip {
+                        font-size: 12px;
+                        white-space: break-spaces;
+                        line-height: 16px;
+                        padding-right: 20px;
+                        color: red;
+                    }
+                }
+            }
+
+
+        }
+    }
+}

package/ganwei-iotcenter-index-6.2.1/packages/ganwei-iotcenter-index/src/components/indexRightContent/headerRight/userInfo/systemInfoDialog/index.vue

@@ -0,0 +1,50 @@
+<template>
+    <el-dialog :title="$t('login.framePro.title.dialogSystemInfoTitle')" class="systemInformation_main"
+        v-model="dialogVisible" :before-close="closeDialog" width="auto" top="6vh" center append-to="#index">
+        <div class="systemInformation">
+            <!-- <header>系统运行信息</header> -->
+            <div class="information_box">
+                <div v-for="(item, key) in systemInfo" :key="key">
+                    <p class="inform_title">{{ item.title }}</p>
+                    <div class="diviceLine"></div>
+                    <div class="information_box_list flex-between-center">
+                        <div class="information_box_list_item " v-for="(childItem, key) in item.childObject" :key="key">
+                            <div class="information_box_list_item_box flex-between-center">
+                                <div class="box_left" v-if="childItem.icon">
+                                    <div class="icon">
+                                        <i class="iconfont" :class="childItem.icon"></i>
+                                    </div>
+                                </div>
+                                <div class="box_right">
+                                    <div class="label">
+                                        <span>{{ childItem.title }}</span>
+                                        <el-tooltip effect="dark" popper-class="topToolTip" :content="childItem.toolTip"
+                                            placement="top-start">
+                                            <el-icon class="question_icon" v-if="childItem.toolTip">
+                                                <Warning />
+                                            </el-icon>
+                                        </el-tooltip>
+                                    </div>
+                                    <div class="value" :style="{ color: getColor(childItem) }">
+                                        {{ `${childItem.value}${childItem.unit || ''}` }}
+                                    </div>
+                                </div>
+                                <div class="propotionEchart" v-if="childItem.showEchart">
+                                    <div class="chart" :id="childItem.echartId"></div>
+                                </div>
+                            </div>
+                            <div class="bottomTip" v-if="showBottomTip(childItem)">
+                                {{ childItem.bottomTip }}
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script src="./index.js"></script>
+
+<style src="./index.scss"></style>

package/ganwei-iotcenter-index-6.2.1/packages/ganwei-iotcenter-index/src/components/indexRightContent/index.js

@@ -0,0 +1,63 @@
+import { computed, defineAsyncComponent, getCurrentInstance, inject, nextTick } from 'vue'
+const topNav = defineAsyncComponent(() => { return import('@/components/asideMenu/topNav.vue') })
+const headerRight = defineAsyncComponent(() => { return import('./headerRight/index.vue') })
+const normalPage = defineAsyncComponent(() => { return import('./normalPage/index.vue') })
+const labelPage = defineAsyncComponent(() => { return import('./labelPage/index.vue') })
+export default {
+    components: {
+        topNav,
+        headerRight,
+        normalPage,
+        labelPage
+    },
+    model: {
+        prop: "modelValue",
+        event: 'update'
+    },
+    emits: ['update:modelValue'],
+    props: {
+        modelValue: { //获取父组件的数据value
+            type: [Number, String],
+            default: -1
+        },
+        allMenus: {
+            type: Object,
+            default: () => []
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup (props, context) {  
+        const config = inject('config')
+        const navTopOpt = computed(() => {
+            return props.allMenus.map((group, index) => {
+                if (config.value.showTopNav) {
+                    const { name, resourceId: id, route, icon, backgroundColor } = group
+                    return { name, id, index, route, icon, backgroundColor }
+                }
+            })
+        })
+        const navTopActive = computed({
+            get: () => props.modelValue,
+            set: (val) => {
+                context.emit('update:modelValue', val)
+            }
+        })
+        const { appContext: { config: { globalProperties } } } = getCurrentInstance()
+
+        const topNavSelect = () => {
+            nextTick(() => {
+                globalProperties.$bus.emit('navTopSelectChange')
+            })
+        }
+
+        return {
+            navTopOpt,
+            navTopActive,
+            topNavSelect,
+            config
+        }
+    }
+}

package/ganwei-iotcenter-index-6.2.1/packages/ganwei-iotcenter-index/src/components/indexRightContent/index.scss

@@ -0,0 +1,40 @@
+.el-container {
+    flex: 1;
+
+    .indexBottomContent {
+        height: calc(100% - 50px);
+        position: relative;
+    }
+
+    // 页面内容组件
+    .el-main {
+        padding: 0;
+        height: 100%;
+        position: relative;
+    }
+}
+
+[data-theme="green"] .el-container {
+    .indexHeader{
+        background: url(/static/images/head-background.png) no-repeat center center/100% 110%;
+    }
+    .indexBottomContent{
+        .container-main .el-tabs .el-tabs__header{
+            background: url(/static/images/head-background.png) no-repeat center center/100% 110%;
+        }
+    }
+}
+
+
+.indexHeader {
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    background-color: var(--frame-top-background);
+    white-space: nowrap;
+    position: relative;
+    padding-left: 16px;
+    padding-right: 16px;
+    // box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.05);
+    z-index: 2;
+}

package/ganwei-iotcenter-index-6.2.1/packages/ganwei-iotcenter-index/src/components/indexRightContent/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <el-container id="contentRef">
+        <!-- 顶部内容块 -->
+        <el-header class="indexHeader">
+            <top-nav ref="TopNav" v-model="navTopActive" @select="topNavSelect" v-if="config.showTopNav"
+                :options="navTopOpt">
+            </top-nav>
+            <headerRight />
+        </el-header>
+
+        <!-- 底部内容块 -->
+        <div class="indexBottomContent">
+            <normalPage :allMenus="allMenus" v-if="!config.labelPage" />
+            <labelPage :allMenus="allMenus" v-else />
+        </div>
+    </el-container>
+</template>
+
+<script src="./index.js"></script>
+<style src="./index.scss" scoped></style>