Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改文件夹位置 及 名称

Browse Source
This commit is contained in:
GGJ
2024-02-28 14:14:45 +08:00
parent 0d166eb582
commit cb78f1402e
23 changed files with 362 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
src/views/pqs/business/terminal/FrontManagement/index.vue Normal file
View File

@@ -0,0 +1,285 @@
<template>
<div class="default-main">
<TableHeader>
<template v-slot:select>
<el-form-item label="前置等级">
<el-select v-model="tableStore.table.params.nodeGrade" clearable placeholder="请选择前置等级">
<el-option v-for="item in fontdveoption" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="tableStore.table.params.searchState" clearable placeholder="请选择状态">
<el-option v-for="item in statusoption" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增</el-button>
</template>
</TableHeader>
<Table ref="tableRef"></Table>
<el-dialog
:title="dialogTitle"
v-model="dialogFormVisible"
:close-on-click-modal="false"
class="cn-operate-dialog"
:before-close="resetForm"
>
<el-form :model="formData" label-width="120px" :rules="rules" ref="ruleFormRef">
<el-form-item label="名称:" prop="name">
<el-input v-model="formData.name" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="IP:" prop="ip" class="top">
<el-input v-model="formData.ip" placeholder="请输入Ip"></el-input>
</el-form-item>
<el-form-item label="等级:" prop="nodeGrade" class="top">
<el-select v-model="formData.nodeGrade" placeholder="请选择等级" style="width: 100%">
<el-option
v-for="item in fontdveoption"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="最大装置数:" prop="nodeDevNum" class="top">
<el-input
v-model="formData.nodeDevNum"
onkeyup="value = value.replace(/[^0-9]/g,'')"
maxlength="5"
placeholder="请输入最大装置数"
></el-input>
</el-form-item>
<el-form-item label="排序:" prop="sort" class="top">
<el-input v-model="formData.sort" placeholder="请输入排序"></el-input>
</el-form-item>
<el-form-item label="描述:" prop="remark" class="top">
<el-input
v-model="formData.remark"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="请输入描述"
></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="resetForm">取 消</el-button>
<el-button type="primary" @click="onSubmit">确 定</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, nextTick } from 'vue'
import { addNode, delNode, updateNode } from '@/api/device-boot/Business.ts'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
defineOptions({
name: 'BusinessAdministrator/TerminalManagement/FrontManagement'
})
const fontdveoption: any = ref([
{ id: 0, name: '极重要' },
{ id: 1, name: '普通' },
{ id: 2, name: '备用' }
])
const statusoption: any = ref([
{ id: 0, name: '未启用' },
{ id: 1, name: '启用' }
])
const ruleFormRef = ref()
const formData: any = ref({
name: '',
ip: '',
nodeGrade: '',
nodeDevNum: '',
sort: '',
remark: ''
})
const rules = reactive({
name: [{ required: true, message: '名称不可为空', trigger: 'blur' }],
ip: [{ required: true, message: 'ip不可为空', trigger: 'blur' }],
nodeGrade: [{ required: true, message: '等级不可为空', trigger: 'blur' }],
nodeDevNum: [{ required: true, message: '最大装置数不可为空', trigger: 'blur' }],
sort: [{ required: true, message: '排序不可为空', trigger: 'blur' }],
remark: [{ required: true, message: '描述不可为空', trigger: 'blur' }]
})
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增前置机')
const tableStore = new TableStore({
url: '/device-boot/node/nodeList',
method: 'POST',
column: [
{ title: '名称', field: 'name' },
{ title: 'IP', field: 'ip' },
{
title: '等级',
field: 'nodeGrade',
render: 'tag',
custom: {
0: 'success',
1: 'warning',
2: 'info'
},
replaceValue: {
0: '极重要',
1: '普通',
2: '备用'
}
},
{
title: '最大监测点数量',
field: 'nodeDevNum'
},
{
title: '排序',
field: 'sort'
},
{
title: '状态',
field: 'state',
render: 'tag',
custom: {
0: 'warning',
1: 'success'
},
replaceValue: {
0: '未启用',
1: '启用'
}
},
{ title: '描述', field: 'remark' },
{
title: '操作',
align: 'center',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: async row => {
dialogFormVisible.value = true
dialogTitle.value = '前置机修改'
formData.value = JSON.parse(JSON.stringify(row))
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除吗？'
},
click: row => {
delNode(row.id).then(res => {
ElMessage.success('删除成功')
tableStore.index()
})
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '') {
delete tableStore.table.params[key]
}
}
}
})
tableStore.table.params.orderBy = 'desc'
// 新增
const add = () => {
dialogFormVisible.value = true
dialogTitle.value = '新增前置机'
}
// 确认
const onSubmit = () => {
ruleFormRef.value.validate((valid: any) => {
if (valid) {
if (dialogTitle.value == '新增前置机') {
addNode(formData.value).then(res => {
ElMessage.success('新增前置机')
resetForm()
tableStore.onTableAction('search', {})
})
} else {
updateNode(formData.value).then(res => {
ElMessage.success('修改成功')
resetForm()
tableStore.onTableAction('search', {})
})
}
}
})
}
// 清空表格
const resetForm = () => {
dialogFormVisible.value = false
formData.value = {
name: '',
ip: '',
nodeGrade: '',
nodeDevNum: '',
sort: '',
remark: ''
}
}
provide('tableStore', tableStore)
onMounted(() => {
setTimeout(() => {
tableStore.index()
}, 100)
})
const addMenu = () => {}
</script>
<style lang="scss" scoped>
.qrcode-label {
position: absolute;
top: 0;
right: 0;
z-index: -99;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
padding: 10px;
background: #fff;
flex-direction: column;
.qrcode-label-title {
margin-bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.qrcode-label-img {
width: 140px;
height: 140px;
}
}
</style>

376
src/views/pqs/business/terminal/ProgramManagement/index.vue Normal file
View File

@@ -0,0 +1,376 @@
<template>
<div class="default-main" style="position: relative">
<TableHeader>
<template #select>
<el-form-item label="终端型号">
<el-select v-model="tableStore.table.params.teriminal" 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.teriminalstatus" 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.state" 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-select v-model="tableStore.table.params.program" clearable placeholder="请选择程序版本">
<el-option
v-for="item in programoption"
: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>
</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"
show-overflow
:tree-config="{ transform: true, parentField: 'pid' }"
:scroll-y="{ enabled: true }"
>
<vxe-column field="name" align="left" title="电网拓扑" min-width="200" tree-node></vxe-column>
<vxe-column field="devType" title="终端型号" :formatter="formFilter"></vxe-column>
<vxe-column field="versionName" title="版本号"></vxe-column>
<vxe-column field="protocol" title="协议版本"></vxe-column>
<vxe-column field="versionDate" title="版本日期"></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 field="updateBy" title="升级人员">
<template #default="{ row }">
<span v-if="row.updateBy == null || row.updateBy == '/'">--</span>
<span v-else>{{ row.updateBy }}</span>
</template>
</vxe-column>
<vxe-column field="updateTime" title="最新升级时间"></vxe-column>
<vxe-column title="操作" min-width="100">
<template #default="{ row }">
<el-button v-if="row.level == 4" type="primary" size="small" link @click="updateprogram(row)">
升级
</el-button>
<el-button
v-if="row.level == 4"
:disabled="row.state == 1 ? true : false"
type="primary"
size="small"
link
@click="queryview(row)"
>
日志查看
</el-button>
</template>
</vxe-column>
</vxe-table>
</div>
<el-dialog
v-model="dialogVisible"
:close-on-click-modal="false"
:title="protitle + '#终端升级日志查看'"
width="70%"
>
<div :style="{ height: dialogHeight.height }">
<vxe-table height="auto" auto-resize :data="logtableData" v-bind="defaultAttribute">
<vxe-column field="devTypeName" align="center" title="装置序号"></vxe-column>
<vxe-column field="versionId" align="center" title="版本序号"></vxe-column>
<vxe-column field="flag" align="center" title="版本状态" width="100">
<template #default="{ row }">
<el-tag type="primary" v-if="row.flag == true" style="color: #fff; background: #fc0">
前期版本
</el-tag>
<el-tag type="primary" v-if="row.flag == false" style="color: #fff; background: #0c0">
当前版本
</el-tag>
</template>
</vxe-column>
<vxe-column field="result" align="center" title="升级结果" width="100">
<template #default="{ row }">
<el-tag type="primary" v-if="row.result == false" style="color: #fff; background: #f30">
升级失败
</el-tag>
<el-tag type="primary" v-if="row.result == true" style="color: #fff; background: #093">
升级成功
</el-tag>
</template>
</vxe-column>
<vxe-column field="state" align="center" title="状态" width="100">
<template #default="{ row }">
<el-tag type="primary" v-if="row.state == false" style="color: #fff; background: #f30">
删除
</el-tag>
<el-tag type="primary" v-if="row.state == true" style="color: #fff; background: #093">
正常
</el-tag>
</template>
</vxe-column>
<vxe-column field="createBy" align="center" title="创建用户"></vxe-column>
<vxe-column field="createTime" align="center" title="创建时间"></vxe-column>
<vxe-column field="updateTime" align="center" title="升级时间"></vxe-column>
<vxe-column field="updateBy" align="center" title="升级人员"></vxe-column>
</vxe-table>
</div>
</el-dialog>
<!-- 升级 -->
<el-dialog
v-model="prodialogVisible"
:close-on-click-modal="false"
:title="protitle + '#终端程序升级'"
width="40%"
>
<el-col v-for="(item, index) in percentageoption" :key="index">
<span style="font-size: 14px; font-weight: bold">{{ item.name }}</span>
:
<el-progress
:text-inside="true"
:stroke-width="24"
:percentage="item.percentage"
:status="item.status"
:format="format"
></el-progress>
</el-col>
</el-dialog>
</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/device-boot/Business.ts'
import XEUtils from 'xe-utils'
import { debounce } from 'lodash-es'
import { useDictData } from '@/stores/dictData'
defineOptions({
name: 'BusinessAdministrator/TerminalManagement/ProgramManagement'
})
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 treeDataCopy: any = ref([])
//进度条对象
const percentageoption = ref([
{
name: '1号测试终端',
status: 'exception',
percentage: 20
},
{
name: '2号测试终端',
status: 'warning',
percentage: 50
},
{
name: '3号测试终端',
status: 'success',
percentage: 90
}
])
const programoption: any = ref([])
const logtableData: any = ref([])
const tableRef = ref()
const status = ref('')
const tableStore = new TableStore({
url: '/device-boot/version/getTerminalVersionList',
method: 'POST',
column: [],
loadCallback: () => {
tableStore.table.data.forEach((item: any) => {
if (item.children.length > 0) {
item.id = item.children[0].pid
}
})
treeData.value = tree2List(tableStore.table.data)
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
setTimeout(() => {
tableRef.value.setAllTreeExpand(true)
}, 0)
}
})
const tree2List = (list: any) => {
//存储结果的数组
let arr: any = []
// 遍历 tree 数组
list.forEach((item: any) => {
// 判断item是否存在children
if (!item.children) return arr.push(item)
// 函数递归，对children数组进行tree2List的转换
const children = tree2List(item.children)
// 删除item的children属性
delete item.children
// 把item和children数组添加至结果数组
//..children: 意思是把children数组展开
arr.push(item, ...children)
})
// 返回结果数组
return arr
}
provide('tableStore', tableStore)
tableStore.table.params.searchValue = ''
tableStore.table.params.searchState = 0
onMounted(() => {
tableStore.index()
})
const add = () => {}
const updateprogram = (row: any) => {
protitle.value = row.name
prodialogVisible.value = true
}
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 format = (percentage: any) => {
if (percentage <= 100 && percentage >= 90) {
status.value = 'success'
return percentage === 100 ? '升级成功' : `${percentage}%`
} else if (percentage > 0 && percentage < 50) {
status.value = 'exception'
return percentage <= 20 ? '升级失败' + percentage + '%' : `${percentage}%`
} else if (percentage > 0 && percentage <= 50) {
status.value = 'warning'
return percentage <= 50 ? '升级中断' : `${percentage}%`
}
}
const formFilter = (row: any) => {
let title = '/'
if (row.cellValue != null) {
teriminaloption.forEach((item: any) => {
if (item.id == row.cellValue) {
title = item.name
}
})
}
return title
}
// 表格过滤
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(
treeDataCopy,
(item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
options
)
treeData.value = rest
// 搜索之后默认展开所有子节点
} else {
treeData.value = treeDataCopy
}
nextTick(() => {
const $table = tableRef.value
if ($table) {
$table.setAllTreeExpand(true)
}
})
}, 300)
</script>

408
src/views/pqs/business/terminal/TerminalManagement/index.vue Normal file
View File

@@ -0,0 +1,408 @@
<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"
show-overflow
:tree-config="{ transform: true, parentField: 'pid' }"
:scroll-y="{ enabled: true }"
:checkbox-config="{ labelField: 'name' }"
>
<vxe-column
field="name"
align="left"
type="checkbox"
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>
<!-- 终端使用详情 -->
<el-dialog
v-model="dialogVisiblexq"
v-if="dialogVisiblexq"
title="终端使用详情"
width="70%"
:before-close="handleClose"
>
<MyEchart :options="echartsXq" style="width: 100%; height: 300px" />
<vxe-table v-bind="defaultAttribute" height="400" :data="logtableData">
<vxe-colgroup title="cup使用率">
<vxe-column field="date" title="使用率"></vxe-column>
<vxe-column field="date" title="总量"></vxe-column>
<vxe-column field="date" title="使用量"></vxe-column>
<vxe-column field="date" title="未使用量"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="内存使用率">
<vxe-column field="date" title="使用率"></vxe-column>
<vxe-column field="date" title="总量"></vxe-column>
<vxe-column field="date" title="使用量"></vxe-column>
<vxe-column field="date" title="未使用量"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="磁盘使用率">
<vxe-column field="date" title="使用率"></vxe-column>
<vxe-column field="date" title="总量"></vxe-column>
<vxe-column field="date" title="使用量"></vxe-column>
<vxe-column field="date" title="未使用量"></vxe-column>
</vxe-colgroup>
</vxe-table>
</el-dialog>
</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/device-boot/Business.ts'
import XEUtils from 'xe-utils'
import { debounce } from 'lodash-es'
import { useDictData } from '@/stores/dictData'
import MyEchart from '@/components/echarts/MyEchart.vue'
defineOptions({
name: 'BusinessAdministrator/TerminalManagement/TerminalManagement'
})
const pageHeight = mainHeight(83)
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 dialogVisiblexq = ref(false)
const dialogVisible = ref(false)
const prodialogVisible = ref(false)
const liudialogVisible = ref(false)
const condialogVisible = ref(false)
const tjdialogVisible = ref(false)
const protitle = ref('')
const filterName = ref('')
const treeData: any = ref([])
const treeDataCopy: any = ref([])
const echartsXq: 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: () => {
tableStore.table.data.forEach((item: any) => {
if (item.children.length > 0) {
item.id = item.children[0].pid
}
})
treeData.value = tree2List(tableStore.table.data)
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
setTimeout(() => {
tableRef.value.setAllTreeExpand(true)
}, 0)
}
})
// 处理大数据卡顿
const tree2List = (list: any) => {
//存储结果的数组
let arr: any = []
// 遍历 tree 数组
list.forEach((item: any) => {
// 判断item是否存在children
if (!item.children) return arr.push(item)
// 函数递归，对children数组进行tree2List的转换
const children = tree2List(item.children)
// 删除item的children属性
delete item.children
// 把item和children数组添加至结果数组
//..children: 意思是把children数组展开
arr.push(item, ...children)
})
// 返回结果数组
return arr
}
provide('tableStore', tableStore)
tableStore.table.params.searchValue = ''
tableStore.table.params.searchState = 0
onMounted(() => {
tableStore.index()
})
// 终端状态管理
const deviceData = () => {}
// 流量套餐配置
const liuniangconfig = () => {}
// 流量策略配置
const configliul = () => {}
// 流量统计
const liultjData = () => {}
// 重启前置程序
const resect = () => {}
// 终端详情
const uesdealia = (row: any) => {
echartsXq.value = {
title: {
text: row.name + '性能详情'
},
legend: {
data: ['cpu使用率', '内存使用率', '磁盘使用率'],
icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z'
},
xAxis: {
type: 'time',
name: '时间'
},
yAxis: {
max: '100',
name: '%'
},
options: {
series: [
{
name: 'cpu使用率',
type: 'line',
smooth: true,
data: [
['2022-02-01 12:12:11', 10],
['2022-02-01 12:12:12', 20],
['2022-02-01 12:12:13', 30],
['2022-02-01 12:12:14', 44],
['2022-02-01 12:12:15', 50],
['2022-02-01 12:12:16', 65],
['2022-02-01 12:12:17', 76]
]
},
{
name: '内存使用率',
type: 'line',
smooth: true,
data: [
['2022-02-01 12:12:11', 13],
['2022-02-01 12:12:12', 54],
['2022-02-01 12:12:13', 34],
['2022-02-01 12:12:14', 44],
['2022-02-01 12:12:15', 35],
['2022-02-01 12:12:16', 53]
]
},
{
name: '磁盘使用率',
type: 'line',
smooth: true,
data: [
['2022-02-01 12:12:11', 13],
['2022-02-01 12:12:12', 2],
['2022-02-01 12:12:13', 2],
['2022-02-01 12:12:14', 32],
['2022-02-01 12:12:15', 43],
['2022-02-01 12:12:16', 23],
['2022-02-01 12:12:17', 23]
]
}
]
}
}
dialogVisiblexq.value = true
}
// 流量详情
const queryview = (row: any) => {}
// 关闭
const handleClose = () => {
dialogVisible.value = false
prodialogVisible.value = false
liudialogVisible.value = false
condialogVisible.value = false
tjdialogVisible.value = false
dialogVisiblexq.value = false
// this.getList()
}
// 表格过滤
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(
treeDataCopy.value,
(item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
options
)
treeData.value = rest
// 搜索之后默认展开所有子节点
} else {
treeData.value = treeDataCopy.value
}
nextTick(() => {
const $table = tableRef.value
if ($table) {
$table.setAllTreeExpand(true)
}
})
}, 500)
</script>

2739
src/views/pqs/business/terminal/deviceter/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff