This commit is contained in:
仲么了
2024-02-26 10:43:37 +08:00
11 changed files with 549 additions and 36 deletions

View File

@@ -19,6 +19,7 @@
"echarts": "^5.4.3",
"echarts4": "npm:echarts@^4.9.0",
"element-plus": "^2.5.3",
"exceljs": "^4.4.0",
"html2canvas": "^1.4.1",
"jquery": "^3.7.1",
"lodash-es": "^4.17.21",
@@ -34,6 +35,7 @@
"vue-draggable-resizable": "3.0.0-beta.2",
"vue-router": "4",
"vxe-table": "^4.5.17",
"vxe-table-plugin-export-xlsx": "^4.0.1",
"xe-utils": "^3.5.14"
},
"devDependencies": {

View File

@@ -0,0 +1,26 @@
import createAxios from '@/utils/request'
// 分析记录管理
export function queryRelevantLogPage(data: any) {
return createAxios({
url: '/advance-boot/process/queryRelevantLogPage',
method: 'post',
data: data
})
}
// 删除策略
export function delRelevantLog(data: any) {
return createAxios({
url: '/advance-boot/process/delRelevantLog',
method: 'get',
params:data,
})
}
// 影响范围分析 查询
export function queryEventsAssPage(data: any) {
return createAxios({
url: '/advance-boot/process/queryEventsAssPage',
method: 'post',
data,
})
}

View File

@@ -108,6 +108,9 @@ const initChart = () => {
],
...props.options.options
})
setTimeout(() => {
chart.resize()
},0)
}
const handlerYAxis = () => {
let temp = {

View File

@@ -15,7 +15,13 @@ import '@/styles/index.scss'
import '@/assets/font/iconfont.css'
import { ElDialog } from 'element-plus'
import BaiduMap from 'vue-baidu-map-3x'
import ExcelJS from 'exceljs'
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
// 方式1NPM 安装,注入 ExcelJS 对象
VXETable.use(VXETablePluginExportXLSX, {
ExcelJS
})
window.XEUtils = XEUtils
const app = createApp(App)

View File

@@ -44,7 +44,7 @@
.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon {
color: var(--el-color-primary-light-8);
color: var(--el-color-primary-light-3);
}
.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,

View File

@@ -59,8 +59,9 @@
ref="tableRef"
v-bind="defaultAttribute"
:data="treeData"
:column-config="{ resizable: true }"
:tree-config="{}"
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>
@@ -243,6 +244,7 @@ const dialogVisible = ref(false)
const protitle = ref('')
const filterName = ref('')
const treeData: any = ref([])
const treeDataCopy: any = ref([])
//进度条对象
const percentageoption = ref([
{
@@ -270,13 +272,36 @@ const tableStore = new TableStore({
method: 'POST',
column: [],
loadCallback: () => {
treeData.value = tableStore.table.data
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
@@ -330,8 +355,8 @@ const searchEvent = debounce(e => {
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),
treeDataCopy,
(item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
options
)
@@ -339,7 +364,7 @@ const searchEvent = debounce(e => {
// 搜索之后默认展开所有子节点
} else {
treeData.value = tableStore.table.data
treeData.value = treeDataCopy
}
nextTick(() => {
const $table = tableRef.value

View File

@@ -55,10 +55,19 @@
ref="tableRef"
v-bind="defaultAttribute"
:data="treeData"
:column-config="{ resizable: true }"
:scroll-y="{ enabled: true, gt: 30 }"
show-overflow
:tree-config="{ transform: true, parentField: 'pid' }"
:scroll-y="{ enabled: true }"
:checkbox-config="{ labelField: 'name' }"
>
<vxe-column field="name" align="left" title="电网拓扑" min-width="200" tree-node></vxe-column>
<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>
@@ -137,7 +146,8 @@
<el-button
v-if="row.level === 4"
type="primary"
size="small" link
size="small"
link
@click="uesdealia(row)"
icon="el-icon-view"
>
@@ -147,7 +157,8 @@
v-if="row.level === 4"
:disabled="row.state == 1 ? true : false"
type="primary"
size="small" link
size="small"
link
icon="el-icon-view"
@click="queryview(row)"
>
@@ -157,6 +168,36 @@
</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">
@@ -169,12 +210,13 @@ import { getTerminalUpLog } from '@/api/Business'
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 dialogHeight = mainHeight(300)
const dictData = useDictData()
const teriminaloption: any = dictData.getBasicData('Dev_Type')
const teriminalstatusoption = ref([
@@ -188,11 +230,18 @@ const stateoption = ref([
{ name: '正常', id: 1 },
{ name: '中断', id: 0 }
])
const prodialogVisible = ref(false)
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()
@@ -202,12 +251,37 @@ const tableStore = new TableStore({
method: 'POST',
column: [],
loadCallback: () => {
treeData.value = tableStore.table.data
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 = ''
@@ -215,7 +289,6 @@ tableStore.table.params.searchState = 0
onMounted(() => {
tableStore.index()
})
const add = () => {}
// 终端状态管理
const deviceData = () => {}
@@ -229,17 +302,84 @@ const liultjData = () => {}
const resect = () => {}
// 终端详情
const uesdealia = (row: any) => {}
// 流量详情
const queryview = (row: any) => {
dialogVisible.value = true
protitle.value = row.name
let data = {
id: row.id
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]
]
}
getTerminalUpLog(data).then((res: any) => {
logtableData.value = res.data
})
]
}
}
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 => {
@@ -248,16 +388,15 @@ const searchEvent = debounce(e => {
const options = { children: 'children' }
const searchProps = ['name']
const rest = XEUtils.searchTree(
tableStore.table.data,
treeDataCopy.value,
(item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
options
)
treeData.value = rest
// 搜索之后默认展开所有子节点
} else {
treeData.value = tableStore.table.data
treeData.value = treeDataCopy.value
}
nextTick(() => {
const $table = tableRef.value
@@ -265,5 +404,5 @@ const searchEvent = debounce(e => {
$table.setAllTreeExpand(true)
}
})
}, 300)
}, 500)
</script>

View File

@@ -105,14 +105,12 @@ const map = (res: any) => {
if (geoCoordMap.value.lengt > 0) {
geoCoordMap.value.map(item => {
console.log("🚀 ~ map ~ item:", item)
areaData.push(...new Array(3).fill(item))
})
}
let maxNum = 0
let minNum = 0
let num: any = []
console.log('🚀 ~ map ~ areaData:', areaData)
if (areaData.length > 0) {
areaData.forEach(item => {

View File

@@ -1,3 +1,161 @@
<template>
<div class='default-main'>关联性分析</div>
<div class="default-main">
<TableHeader datePicker>
<template #select>
<el-form-item label="筛选">
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="输入关键字筛选" />
</el-form-item>
</template>
<template #operation>
<el-button icon="el-icon-Tickets" type="primary" @click="analysis">分析记录管理</el-button>
<el-button icon="el-icon-SuccessFilled" type="primary" @click="firing">启动关联分析</el-button>
</template>
</TableHeader>
<Table ref="tableRef" />
<!-- 分析记录管理 -->
<el-dialog v-model="dialogAnalysis" title="分析记录管理" width="60%">
<vxe-table height="500" auto-resize :data="AnalysisData" v-bind="defaultAttribute">
<vxe-column field="timeId" title="策略名称"></vxe-column>
<vxe-column field="timeId" title="操作时间"></vxe-column>
<vxe-column field="createName" title="操作人"></vxe-column>
<vxe-column title="操作" width="100">
<template #default="{ row }">
<el-popconfirm title="是否确认删除策略!" @confirm="details(row)">
<template #reference>
<el-button type="danger" link>删除</el-button>
</template>
</el-popconfirm>
</template>
</vxe-column>
</vxe-table>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import TableHeader from '@/components/table/header/index.vue'
import { queryRelevantLogPage, delRelevantLog } from '@/api/advance-boot/analyse.ts'
import { ElMessage, ElMessageBox } from 'element-plus'
defineOptions({
name: 'govern/log/operation'
})
const dialogAnalysis = ref(false)
const AnalysisData = ref([])
const tableStore = new TableStore({
url: '/advance-boot/process/querySagEventsPage',
method: 'POST',
column: [
{
field: 'index',
title: '序号',
width: '60',
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ field: 'startTime', title: '发生时间' },
{ field: 'duration', title: '持续时间(s)' },
{
field: 'featureAmplitude',
title: '暂降(骤升)幅值(%)'
},
{ field: 'gdName', title: '供电公司' },
{ field: 'subName', title: '变电站' },
{ field: 'lineName', title: '监测点' },
{
field: 'dealFlag',
title: '暂降特征幅值计算',
render: 'tag',
custom: {
0: 'warning',
1: 'success',
2: 'success',
3: 'warning'
},
replaceValue: {
0: '未处理',
1: '已处理',
2: '已处理,无结果',
3: '计算失败'
}
},
{
field: 'fileFlag',
title: '录波文件',
render: 'tag',
custom: {
0: 'warning',
1: 'success'
},
replaceValue: {
0: '不存在',
1: '存在'
}
},
{
title: '操作',
width: '120',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '波形分析',
type: 'primary',
disabled: row => {
return row.fileFlag == 0
},
icon: 'el-icon-Plus',
render: 'basicButton',
click: row => {}
},
{
name: 'edit',
title: '暂无波形',
type: '',
disabled: row => {
return row.fileFlag == 1
},
icon: 'el-icon-Plus',
render: 'basicButton'
}
]
}
],
loadCallback: () => {
tableStore.table.data.forEach((item: any) => {
item.failReason = item.failReason || '/'
item.result = item.result === 1 ? '成功' : '失败'
item.loginName = item.loginName || '/'
})
}
})
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
//分析记录管理
const analysis = () => {
queryRelevantLogPage({}).then((res: any) => {
AnalysisData.value = res.data.records
})
dialogAnalysis.value = true
}
// 启动关联分析
const firing = () => {}
// 删除策略
const details = (row: any) => {
delRelevantLog({ id: row.id }).then((res: any) => {
ElMessage({
type: 'success',
message: res.message
})
queryRelevantLogPage({}).then((res: any) => {
AnalysisData.value = res.data.records
})
})
}
</script>

View File

@@ -0,0 +1,7 @@
<template>
<div>3</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
</script>
<style lang="scss" scoped></style>

View File

@@ -0,0 +1,149 @@
<template>
<div class="default-main">
<TableHeader datePicker>
<template #select>
<el-form-item label="筛选">
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="输入关键字筛选" />
</el-form-item>
</template>
<template #operation>
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
</template>
</TableHeader>
<Table ref="tableRef" />
<!-- 分析记录管理 -->
<el-dialog v-model="dialogAnalysis" title="分析记录管理" width="60%">
<vxe-table height="500" auto-resize :data="AnalysisData" v-bind="defaultAttribute">
<vxe-column field="timeId" title="策略名称"></vxe-column>
<vxe-column field="timeId" title="操作时间"></vxe-column>
<vxe-column field="createName" title="操作人"></vxe-column>
<vxe-column title="操作" width="100">
<template #default="{ row }">
<el-popconfirm title="是否确认删除策略!" @confirm="details(row)">
<template #reference>
<el-button type="danger" link>删除</el-button>
</template>
</el-popconfirm>
</template>
</vxe-column>
</vxe-table>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import TableHeader from '@/components/table/header/index.vue'
import { queryRelevantLogPage, delRelevantLog } from '@/api/advance-boot/analyse.ts'
import { ElMessage, ElMessageBox } from 'element-plus'
import { queryEventsAssPage } from '@/api/advance-boot/analyse.ts'
defineOptions({
name: 'govern/log/operation'
})
const dialogAnalysis = ref(false)
const AnalysisData = ref([])
const tableRef = ref()
const tableStore = new TableStore({
url: '/advance-boot/process/queryEventsAssPage',
method: 'POST',
column: [
{
field: 'index',
title: '序号',
width: '60',
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ field: 'timeId', title: '时间', width: '200' },
{ field: 'timeId', title: '事件关联分析名称', width: '200' },
{
field: 'contentDes',
title: '事件关联分析描述'
},
{
title: '操作',
width: '200',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '暂降源定位',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
click: row => {}
},
{
name: 'edit',
title: '范围查看',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton'
}
]
}
],
loadCallback: () => {
tableStore.table.data.forEach((item: any) => {
item.failReason = item.failReason || '/'
item.result = item.result === 1 ? '成功' : '失败'
item.loginName = item.loginName || '/'
})
}
})
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
//分析记录管理
const analysis = () => {
queryRelevantLogPage({}).then((res: any) => {
AnalysisData.value = res.data.records
})
dialogAnalysis.value = true
}
// 启动关联分析
const firing = () => {}
// 删除策略
const details = (row: any) => {
delRelevantLog({ id: row.id }).then((res: any) => {
ElMessage({
type: 'success',
message: res.message
})
queryRelevantLogPage({}).then((res: any) => {
AnalysisData.value = res.data.records
})
})
}
// 导出
const exportEvent = () => {
console.log('🚀 ~ exportEvent ~ tableRef.value:', tableRef.value)
queryEventsAssPage({
searchBeginTime: tableStore.table.params.searchBeginTime,
searchEndTime: tableStore.table.params.searchEndTime,
searchValue: tableStore.table.params.searchValue,
pageNum: 1,
pageSize: tableStore.table.params.total
}).then(res => {
tableRef.value.getRef().exportData({
filename: '影响范围分析', // 文件名字
sheetName: 'Sheet1',
type: 'xlsx', //导出文件类型 xlsx 和 csv
useStyle: true,
data: res.data.records, // 数据源 // 过滤那个字段导出
columnFilterMethod: function (column, $columnIndex) {
return !(column.$columnIndex === 0)
}
})
})
}
</script>