系统升级管理页面 10%

2024-02-22 14:48:27 +08:00
parent 06933e0f1e
commit aec4b74b71
4 changed files with 276 additions and 6 deletions
--- a/src/views/pms/BusinessAdministrator/TerminalManagement/FrontManagement.vue
+++ b/src/views/pms/BusinessAdministrator/TerminalManagement/FrontManagement.vue
@@ -78,7 +78,7 @@ import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 defineOptions({
-    name: 'FrontManagement'
+    name: 'BusinessAdministrator/TerminalManagement/FrontManagement'
 })

 const fontdveoption: any = ref([
--- a/src/views/pms/BusinessAdministrator/TerminalManagement/ProgramManagement.vue
+++ b/src/views/pms/BusinessAdministrator/TerminalManagement/ProgramManagement.vue
@@ -51,7 +51,7 @@
                <el-button icon="el-icon-Check" type="primary" @click="add">批量升级</el-button>
            </template>
        </TableHeader>
-        <div :style="{ height: pageHeight.height }">
+        <div :style="`height: calc(${tableStore.table.height} + 58px)`">
            <vxe-table
                v-loading="tableStore.table.loading"
                height="auto"
@@ -122,7 +122,7 @@
                    </template>
                </vxe-column>
                <vxe-column field="updateTime" title="最新升级时间"></vxe-column>
-                <vxe-column field="updateBy" title="升级人员">
+                <vxe-column  title="操作" min-width="100">
                    <template #default="{ row }">
                        <el-button v-if="row.level == 4" type="primary" size="small" link @click="updateprogram(row)">
                            升级
@@ -215,12 +215,12 @@ import TableStore from '@/utils/tableStore'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import TableHeader from '@/components/table/header/index.vue'
 import { mainHeight } from '@/utils/layout'
-import { getTerminalUpLog } from '@/api/Business/index.ts'
+import { getTerminalUpLog } from '@/api/Business'
 import XEUtils from 'xe-utils'
 import { debounce } from 'lodash-es'
 import { useDictData } from '@/stores/dictData'
 defineOptions({
-    name: 'ProgramManagement'
+    name: 'BusinessAdministrator/TerminalManagement/ProgramManagement'
 })

 const pageHeight = mainHeight(83)
@@ -331,7 +331,7 @@ const searchEvent = debounce(e => {
        const searchProps = ['name']
        const rest = XEUtils.searchTree(
            tableStore.table.data,
-            item => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
+            (item:any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
            options
        )

--- a/src/views/pms/BusinessAdministrator/TerminalManagement/TerminalManagement.vue
+++ b/src/views/pms/BusinessAdministrator/TerminalManagement/TerminalManagement.vue
@@ -0,0 +1,269 @@
+<template>
+    <div class="default-main" style="position: relative">
+        <TableHeader>
+            <template #select>
+                <el-form-item label="终端型号">
+                    <el-select v-model="tableStore.table.params.devType" clearable placeholder="请选择终端型号">
+                        <el-option
+                            v-for="item in teriminaloption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="终端状态">
+                    <el-select v-model="tableStore.table.params.runFlag" clearable placeholder="请选择终端状态">
+                        <el-option
+                            v-for="item in teriminalstatusoption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="通讯状态">
+                    <el-select v-model="tableStore.table.params.comFlag" clearable placeholder="请选择通讯状态">
+                        <el-option
+                            v-for="item in stateoption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item label="筛选">
+                    <el-input v-model="filterName" @keyup="searchEvent" placeholder="输入关键字筛选" />
+                </el-form-item>
+            </template>
+            <template #operation>
+                <!-- <el-button icon="el-icon-Download" type="primary" @click="add">导出</el-button>
+                <el-button icon="el-icon-Check" type="primary" @click="add">批量升级</el-button> -->
+                <el-button type="primary" icon="el-icon-Success" @click="deviceData">终端状态管理</el-button>
+                <el-button type="primary" icon="el-icon-s-order" @click="liuniangconfig">流量套餐配置</el-button>
+                <el-button type="primary" icon="el-icon-Menu" @click="configliul">流量策略配置</el-button>
+                <el-button type="primary" icon="el-icon-s-data" @click="liultjData">流量统计</el-button>
+                <el-button type="primary" icon="el-icon-Setting" @click="resect">重启前置程序</el-button>
+            </template>
+        </TableHeader>
+        <div :style="`height: calc(${tableStore.table.height} + 58px)`">
+            <vxe-table
+                v-loading="tableStore.table.loading"
+                height="auto"
+                auto-resize
+                ref="tableRef"
+                v-bind="defaultAttribute"
+                :data="treeData"
+                :column-config="{ resizable: true }"
+                :scroll-y="{ enabled: true, gt: 30 }"
+            >
+                <vxe-column field="name" align="left" title="电网拓扑" min-width="200" tree-node></vxe-column>
+                <vxe-column field="devType" title="终端型号"></vxe-column>
+                <vxe-column field="version" title="版本信息"></vxe-column>
+                <vxe-column field="baseFlowMeal" title="基础套餐(MB)"></vxe-column>
+                <vxe-column field="reamFlowMeal" title="扩展套餐(MB)"></vxe-column>
+                <vxe-column title="剩余流量(MB)">
+                    <template #default="{ row }">
+                        <el-tag v-if="row.level === 4" type="primary">
+                            {{
+                                row.level === 4
+                                    ? (row.baseFlowMeal + row.reamFlowMeal - row.statisValue).toFixed(2)
+                                    : ''
+                            }}
+                        </el-tag>
+                    </template>
+                </vxe-column>
+                <vxe-column title="流量使用占比(%)">
+                    <template #default="{ row }">
+                        {{
+                            row.level === 4
+                                ? ((row.statisValue / (row.baseFlowMeal + row.reamFlowMeal)) * 100).toFixed(2)
+                                : ''
+                        }}
+                    </template>
+                </vxe-column>
+                <vxe-column field="runFlag" title="终端状态">
+                    <template #default="{ row }">
+                        <el-tag
+                            type="primary"
+                            v-if="row.runFlag === 0"
+                            style="color: #fff; background: #0099cc"
+                            size="small"
+                        >
+                            投运
+                        </el-tag>
+                        <el-tag
+                            type="primary"
+                            v-if="row.runFlag === 1"
+                            style="color: #fff; background: #996600"
+                            size="small"
+                        >
+                            热备用
+                        </el-tag>
+                        <el-tag
+                            type="primary"
+                            v-if="row.runFlag === 2"
+                            style="color: #fff; background: #cc0000"
+                            size="small"
+                        >
+                            停运
+                        </el-tag>
+                    </template>
+                </vxe-column>
+                <vxe-column field="comFlag" title="通讯状态">
+                    <template #default="{ row }">
+                        <el-tag
+                            type="primary"
+                            v-if="row.comFlag === 0"
+                            style="color: #fff; background: #cc0000"
+                            size="small"
+                        >
+                            中断
+                        </el-tag>
+                        <el-tag
+                            type="primary"
+                            v-if="row.comFlag === 1"
+                            style="color: #fff; background: #2e8b57"
+                            size="small"
+                        >
+                            正常
+                        </el-tag>
+                    </template>
+                </vxe-column>
+
+                <vxe-column title="操作" min-width="100">
+                    <template #default="{ row }">
+                        <el-button
+                            v-if="row.level === 4"
+                            type="primary"
+                            size="small" link
+                            @click="uesdealia(row)"
+                            icon="el-icon-view"
+                        >
+                            终端详情
+                        </el-button>
+                        <el-button
+                            v-if="row.level === 4"
+                            :disabled="row.state == 1 ? true : false"
+                            type="primary"
+                            size="small" link
+                            icon="el-icon-view"
+                            @click="queryview(row)"
+                        >
+                            流量详情
+                        </el-button>
+                    </template>
+                </vxe-column>
+            </vxe-table>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import TableHeader from '@/components/table/header/index.vue'
+import { mainHeight } from '@/utils/layout'
+import { getTerminalUpLog } from '@/api/Business'
+import XEUtils from 'xe-utils'
+import { debounce } from 'lodash-es'
+import { useDictData } from '@/stores/dictData'
+defineOptions({
+    name: 'BusinessAdministrator/TerminalManagement/TerminalManagement'
+})
+
+const pageHeight = mainHeight(83)
+const dialogHeight = mainHeight(300)
+const dictData = useDictData()
+const teriminaloption: any = dictData.getBasicData('Dev_Type')
+const teriminalstatusoption = ref([
+    { name: '全部', id: '' },
+    { name: '投运', id: 0 },
+    { name: '热备用', id: 1 },
+    { name: '停运', id: 2 }
+])
+const stateoption = ref([
+    { name: '全部', id: '' },
+    { name: '正常', id: 1 },
+    { name: '中断', id: 0 }
+])
+const prodialogVisible = ref(false)
+const dialogVisible = ref(false)
+const protitle = ref('')
+const filterName = ref('')
+const treeData: any = ref([])
+
+const logtableData: any = ref([])
+const tableRef = ref()
+const status = ref('')
+const tableStore = new TableStore({
+    url: '/device-boot/maintain/getTerminalMainList',
+    method: 'POST',
+    column: [],
+    loadCallback: () => {
+        treeData.value = tableStore.table.data
+        setTimeout(() => {
+            tableRef.value.setAllTreeExpand(true)
+        }, 0)
+    }
+})
+
+provide('tableStore', tableStore)
+tableStore.table.params.searchValue = ''
+tableStore.table.params.searchState = 0
+onMounted(() => {
+    tableStore.index()
+})
+const add = () => {}
+
+// 终端状态管理
+const deviceData = () => {}
+// 流量套餐配置
+const liuniangconfig = () => {}
+// 流量策略配置
+const configliul = () => {}
+// 流量统计
+const liultjData = () => {}
+// 重启前置程序
+const resect = () => {}
+
+// 终端详情
+const uesdealia = (row: any) => {}
+// 流量详情
+const queryview = (row: any) => {
+    dialogVisible.value = true
+    protitle.value = row.name
+    let data = {
+        id: row.id
+    }
+    getTerminalUpLog(data).then((res: any) => {
+        logtableData.value = res.data
+    })
+}
+// 表格过滤
+const searchEvent = debounce(e => {
+    const filterVal = XEUtils.toValueString(filterName.value).trim().toLowerCase()
+    if (filterVal) {
+        const options = { children: 'children' }
+        const searchProps = ['name']
+        const rest = XEUtils.searchTree(
+            tableStore.table.data,
+            (item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
+            options
+        )
+
+        treeData.value = rest
+
+        // 搜索之后默认展开所有子节点
+    } else {
+        treeData.value = tableStore.table.data
+    }
+    nextTick(() => {
+        const $table = tableRef.value
+        if ($table) {
+            $table.setAllTreeExpand(true)
+        }
+    })
+}, 300)
+</script>
--- a/src/views/pms/device-boot/deviceter.vue
+++ b/src/views/pms/device-boot/deviceter.vue
@@ -1437,6 +1437,7 @@ import { queryTerminal, nodeAllList, delTerminal, updateTerminal, addTerminal }
 import { useDictData } from '@/stores/dictData'
 import { ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+
 const TerminalRef = ref()
 const pageHeight = mainHeight(20)
 const Height = mainHeight(100)