修改冀北问题
This commit is contained in:
guanj
377
src/views/pqs/harmonicMonitoring/embed/dataOverview_JB/index.vue
Normal file
377
src/views/pqs/harmonicMonitoring/embed/dataOverview_JB/index.vue
Normal file
@@ -0,0 +1,377 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader :showSearch="false" v-show="flag">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<DatePicker
|
||||
ref="datePickerRef"
|
||||
:nextFlag="false"
|
||||
:theCurrentTime="true"
|
||||
@change="handleDatePickerChange"
|
||||
></DatePicker>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation></template>
|
||||
</TableHeader>
|
||||
|
||||
<GridLayout
|
||||
v-model:layout="layout"
|
||||
:row-height="rowHeight"
|
||||
:is-resizable="false"
|
||||
:is-draggable="false"
|
||||
:responsive="false"
|
||||
:vertical-compact="false"
|
||||
prevent-collision
|
||||
:col-num="12"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<div class="box">
|
||||
<div class="title">
|
||||
<div style="display: flex; align-items: center">
|
||||
<Icon class="HelpFilled" :name="(item as LayoutItem).icon" />
|
||||
{{ (item as LayoutItem).name }}
|
||||
</div>
|
||||
<!-- <img :src="flag ? img : img1" style="cursor: pointer; height: 16px" @click="zoom(item)" /> -->
|
||||
<el-tooltip effect="dark" content="查看详情" placement="top">
|
||||
<View style="cursor: pointer; height: 16px" @click="jump(item)" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div>
|
||||
<component
|
||||
:is="(item as LayoutItem).component"
|
||||
v-if="(item as LayoutItem).component"
|
||||
class="pd10"
|
||||
:key="key"
|
||||
:timeValue="datePickerRef?.timeValue || 3"
|
||||
:height="rowHeight * item.h - seRowHeight(item.h) + 'px'"
|
||||
:width="rowWidth * item.w - 30 + 'px'"
|
||||
:timeKey="(item as LayoutItem).timeKey"
|
||||
:interval="datePickerRef?.interval"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
/>
|
||||
<div v-else class="pd10">组件加载失败...</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</GridLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, markRaw, onUnmounted, computed, defineAsyncComponent, type Component } from 'vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { GridLayout } from 'grid-layout-plus'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { View } from '@element-plus/icons-vue'
|
||||
import { useTimeCacheStore } from '@/stores/timeCache'
|
||||
import { adminBaseRoutePath } from '@/router/static'
|
||||
const { push } = useRouter()
|
||||
const datePickerRef = ref()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const timeCacheStore = useTimeCacheStore()
|
||||
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/preview'
|
||||
})
|
||||
// 定义类型
|
||||
interface LayoutItem {
|
||||
x: number
|
||||
y: number
|
||||
w: number
|
||||
h: number
|
||||
timeKey: number | string
|
||||
i: string | number
|
||||
name: string
|
||||
path: string
|
||||
icon?: string // 新增 icon 可选字段
|
||||
component?: Component | string
|
||||
loading?: boolean
|
||||
error?: any
|
||||
}
|
||||
const key = ref(0)
|
||||
const img = new URL(`@/assets/img/amplify.png`, import.meta.url).href
|
||||
const img1 = new URL(`@/assets/img/reduce.png`, import.meta.url).href
|
||||
// 响应式数据
|
||||
const rowHeight = ref(0)
|
||||
const rowWidth = ref(0)
|
||||
const layout: any = ref([
|
||||
// {
|
||||
// x: 4,
|
||||
// y: 0,
|
||||
// w: 4,
|
||||
// h: 2,
|
||||
// i: '1',
|
||||
// name: '',
|
||||
// path: '/src/views/pqs/runManage/assessment/components/uese/index.vue'
|
||||
// },
|
||||
])
|
||||
const layoutCopy: any = ref([])
|
||||
const flag = ref(true)
|
||||
// 组件映射
|
||||
const componentMap = reactive(new Map<string, Component | string>())
|
||||
const dataList: any = ref({})
|
||||
// 获取主内容区域高度
|
||||
const getMainHeight = () => {
|
||||
const elMain = document.querySelector('.el-main')
|
||||
return (elMain?.offsetHeight || 0) - 70
|
||||
}
|
||||
// 获取主内容区域高度
|
||||
const getMainWidth = () => {
|
||||
const elMain = document.querySelector('.el-main')
|
||||
return (elMain?.offsetWidth || 0) - 20
|
||||
}
|
||||
|
||||
// 初始化行高
|
||||
const initRowHeight = () => {
|
||||
rowHeight.value = Math.max(0, (getMainHeight() - 77 + (flag.value ? 0 : 56)) / 6)
|
||||
rowWidth.value = Math.max(0, getMainWidth() / 12)
|
||||
}
|
||||
|
||||
// 动态注册组件
|
||||
const registerComponent = (path: string): Component | string | null => {
|
||||
if (!path) return null
|
||||
|
||||
const cacheKey = path
|
||||
|
||||
// 使用缓存的组件
|
||||
if (componentMap.has(cacheKey)) {
|
||||
return componentMap.get(cacheKey)!
|
||||
}
|
||||
|
||||
try {
|
||||
// 动态导入组件
|
||||
const modules = import.meta.glob('@/**/*.vue')
|
||||
if (!modules[path]) {
|
||||
console.error(`组件加载失败: ${path}`)
|
||||
return null
|
||||
}
|
||||
|
||||
const AsyncComponent = defineAsyncComponent({
|
||||
loader: modules[path],
|
||||
loadingComponent: () => h('div', '加载中...'),
|
||||
errorComponent: ({ error }) => h('div', `加载错误: ${error.message}`),
|
||||
delay: 200,
|
||||
timeout: 10000
|
||||
})
|
||||
|
||||
// 保存到映射中
|
||||
componentMap.set(cacheKey, markRaw(AsyncComponent))
|
||||
return AsyncComponent
|
||||
} catch (error) {
|
||||
console.error('注册组件失败:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
// 缩放
|
||||
const zoom = (value: any) => {
|
||||
if (flag.value) {
|
||||
layout.value = [{ ...value, x: 0, y: 0, w: 12, h: 6 }]
|
||||
} else {
|
||||
layout.value = layoutCopy.value.map((item: any, index: number) => ({
|
||||
...item,
|
||||
i: item.i || index, // 确保有唯一标识
|
||||
component: registerComponent(item.path)
|
||||
}))
|
||||
}
|
||||
|
||||
flag.value = !flag.value
|
||||
|
||||
initRowHeight()
|
||||
key.value += 1
|
||||
}
|
||||
// 跳转
|
||||
const jump = (item: any) => {
|
||||
if (item.routerPath) {
|
||||
push(adminBaseRoutePath + item.routerPath)
|
||||
}
|
||||
}
|
||||
// 计算组件高度
|
||||
const seRowHeight = (value: any) => {
|
||||
if (value == 6) return 0
|
||||
if (value == 5) return 12
|
||||
if (value == 4) return 20
|
||||
if (value == 3) return 30
|
||||
if (value == 2) return 40
|
||||
if (value == 1) return 50
|
||||
return 0
|
||||
}
|
||||
// 获取布局数据
|
||||
const fetchLayoutData = async () => {
|
||||
try {
|
||||
// const { data } = await queryByPagePath({ pagePath: router.currentRoute.value.name })
|
||||
// dataList.value = data
|
||||
dataList.value = {
|
||||
createBy: 'e6a67ccbe789493687766c4304fcb228',
|
||||
createTime: '2025-11-26 08:43:56',
|
||||
updateBy: 'e6a67ccbe789493687766c4304fcb228',
|
||||
updateTime: '2025-11-26 08:43:56',
|
||||
id: 'e8218545cc11e32d5d6b87c92fdd0fbc',
|
||||
pageName: '测试',
|
||||
thumbnail: '',
|
||||
remark: '',
|
||||
containerConfig: [
|
||||
{
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 6,
|
||||
h: 3,
|
||||
i: 0.9274640143002512,
|
||||
name: '终端运行评价',
|
||||
path: '/src/components/cockpit/terminalEvaluation/index.vue',
|
||||
icon: 'local-审计列表',
|
||||
timeKey: '3',
|
||||
routerPath: '/runManage/runEvaluate',
|
||||
moved: false
|
||||
},
|
||||
{
|
||||
x: 6,
|
||||
y: 0,
|
||||
w: 6,
|
||||
h: 3,
|
||||
i: 0.9154814002445102,
|
||||
name: '终端在线率',
|
||||
path: '/src/components/cockpit/onlineRate/index.vue',
|
||||
icon: 'local-告警中心',
|
||||
timeKey: '3',
|
||||
routerPath: '/harmonic-boot/area/OnlineRate',
|
||||
moved: false
|
||||
},
|
||||
{
|
||||
x: 0,
|
||||
y: 3,
|
||||
w: 6,
|
||||
h: 3,
|
||||
i: 0.6560899767923003,
|
||||
name: '监测点数据完整性',
|
||||
path: '/src/components/cockpit/integrity/index.vue',
|
||||
icon: 'local-稳态指标超标明细',
|
||||
timeKey: '3',
|
||||
routerPath: '/harmonic-boot/harmonic/getIntegrityData',
|
||||
moved: false
|
||||
},
|
||||
{
|
||||
x: 6,
|
||||
y: 3,
|
||||
w: 6,
|
||||
h: 3,
|
||||
i: 0.5812302648025226,
|
||||
name: '异常数据清洗',
|
||||
path: '/src/components/cockpit/dataCleaning/index.vue',
|
||||
icon: 'local-区域暂态评估',
|
||||
timeKey: '3',
|
||||
routerPath: '/runManage/cleaning',
|
||||
moved: false
|
||||
}
|
||||
],
|
||||
sort: 100,
|
||||
state: 1,
|
||||
pagePath: 'dashboard/index6',
|
||||
pathName: null,
|
||||
routeName: '/src/views/pqs/cockpit/homePage/index.vue',
|
||||
icon: ''
|
||||
}
|
||||
const parsedLayout = (dataList.value.containerConfig || '[]') as LayoutItem[]
|
||||
// 处理布局数据
|
||||
layout.value = parsedLayout.map((item, index) => ({
|
||||
...item,
|
||||
i: item.i || index, // 确保有唯一标识
|
||||
component: registerComponent(item.path)
|
||||
}))
|
||||
layoutCopy.value = JSON.parse(JSON.stringify(layout.value))
|
||||
initRowHeight()
|
||||
} catch (error) {
|
||||
console.error('获取布局数据失败:', error)
|
||||
// 可以添加错误提示逻辑
|
||||
}
|
||||
}
|
||||
|
||||
// 窗口大小变化处理 - 使用防抖
|
||||
const handleResize = useDebounceFn(() => {
|
||||
initRowHeight()
|
||||
// key.value += 1
|
||||
}, 200)
|
||||
|
||||
// 处理 DatePicker 值变化事件
|
||||
const handleDatePickerChange = (value: any) => {
|
||||
// 将值缓存到 timeCache
|
||||
if (value) {
|
||||
timeCacheStore.setCache(route.path, value.interval, value.timeValue)
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
// initRowHeight()
|
||||
fetchLayoutData()
|
||||
|
||||
// 添加窗口大小变化监听器
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
// 移除监听器防止内存泄漏
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vgl-layout {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.vgl-item:not(.vgl-item--placeholder)) {
|
||||
background-color: #ffffff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:deep(.vgl-item:hover:not(.vgl-item--placeholder)) {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
:deep(.vgl-item--static) {
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
:deep(.vgl-item) {
|
||||
overflow: hidden;
|
||||
}
|
||||
.box {
|
||||
overflow: hidden;
|
||||
.title {
|
||||
border-bottom: 1px solid #000;
|
||||
font-size: 14px;
|
||||
height: 30px;
|
||||
font-weight: 600;
|
||||
padding: 0px 10px;
|
||||
color: #fff;
|
||||
background-color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.HelpFilled {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: #fff !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,291 +1,291 @@
|
||||
<template>
|
||||
<TableHeader area datePicker ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
value-key="id"
|
||||
placeholder="请选择统计类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.scale"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择电压等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择终端厂家"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.loadType"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择干扰源类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in interfereoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<my-echart class="mt10" :style="`height: calc(${tableStore.table.height} - 75px)`" :options="options" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import * as echarts from 'echarts/core'
|
||||
const dictData = useDictData()
|
||||
const options = ref({})
|
||||
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/LineIntegrityData/getIntegrityIcon',
|
||||
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
column: [],
|
||||
|
||||
loadCallback: () => {
|
||||
// tableStore.table.data.type
|
||||
let code = tableStore.table.params.statisticalType.code
|
||||
let title = '',
|
||||
titleX = ''
|
||||
if (code == 'Power_Network') {
|
||||
title = '区域'
|
||||
titleX = '区域'
|
||||
} else if (code == 'Manufacturer') {
|
||||
title = '终端厂家'
|
||||
titleX = '终端\n厂家'
|
||||
} else if (code == 'Voltage_Level') {
|
||||
title = '电压等级'
|
||||
titleX = '电压\n等级'
|
||||
} else if (code == 'Load_Type') {
|
||||
title = '干扰源类型'
|
||||
titleX = '干扰\n源类型'
|
||||
} else if (code == 'Report_Type') {
|
||||
title = '上报类型'
|
||||
titleX = '上报\n类型'
|
||||
}
|
||||
options.value = {
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var tips = ''
|
||||
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 1) {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '完整性:暂无数据'
|
||||
} else {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '完整性:' + params[i].value.toFixed(2)
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
right: '80px'
|
||||
},
|
||||
xAxis: {
|
||||
name: titleX,
|
||||
data: tableStore.table.data.map((item: any) => item.type)
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
max: 100
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '完整性',
|
||||
type: 'bar',
|
||||
data: tableStore.table.data.map((item: any) => item.single),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params: any) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#339966'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFCC33'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value <= 60 && params.value > 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#A52a2a'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value > 0 && params.value <= 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: '#339966'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#339966'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: '#FFCC33'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FFCC33'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: '#A52a2a'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#A52a2a'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'harmonicBoot'
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<template>
|
||||
<TableHeader area datePicker ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
value-key="id"
|
||||
placeholder="请选择统计类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.scale"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择电压等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择终端厂家"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.loadType"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择干扰源类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in interfereoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<my-echart class="mt10" :style="`height: calc(${tableStore.table.height} - 75px)`" :options="options" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import * as echarts from 'echarts/core'
|
||||
const dictData = useDictData()
|
||||
const options = ref({})
|
||||
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/LineIntegrityData/getIntegrityIcon',
|
||||
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
column: [],
|
||||
|
||||
loadCallback: () => {
|
||||
// tableStore.table.data.type
|
||||
let code = tableStore.table.params.statisticalType.code
|
||||
let title = '',
|
||||
titleX = ''
|
||||
if (code == 'Power_Network') {
|
||||
title = '区域'
|
||||
titleX = '区域'
|
||||
} else if (code == 'Manufacturer') {
|
||||
title = '终端厂家'
|
||||
titleX = '终端\n厂家'
|
||||
} else if (code == 'Voltage_Level') {
|
||||
title = '电压等级'
|
||||
titleX = '电压\n等级'
|
||||
} else if (code == 'Load_Type') {
|
||||
title = '干扰源类型'
|
||||
titleX = '干扰\n源类型'
|
||||
} else if (code == 'Report_Type') {
|
||||
title = '上报类型'
|
||||
titleX = '上报\n类型'
|
||||
}
|
||||
options.value = {
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var tips = ''
|
||||
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '完整性:暂无数据'
|
||||
} else {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '完整性:' + params[i].value.toFixed(2)
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
right: '80px'
|
||||
},
|
||||
xAxis: {
|
||||
name: titleX,
|
||||
data: tableStore.table.data.map((item: any) => item.type)
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
max: 100
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '完整性',
|
||||
type: 'bar',
|
||||
data: tableStore.table.data.map((item: any) => item.single),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params: any) {
|
||||
if (params.value ==3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#339966'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFCC33'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value <= 60 && params.value > 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#A52a2a'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: '#339966'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#339966'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: '#FFCC33'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FFCC33'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: '#A52a2a'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#A52a2a'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'harmonicBoot'
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@@ -1,314 +1,314 @@
|
||||
<template>
|
||||
<TableHeader area datePicker ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="筛选">
|
||||
<el-input
|
||||
v-model="tableStore.table.params.filterName"
|
||||
@keyup="searchEvent"
|
||||
placeholder="输入关键字筛选"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
value-key="id"
|
||||
placeholder="请选择统计类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.scale"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择电压等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择终端厂家"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.loadType"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择干扰源类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in interfereoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<!-- <el-button icon="el-icon-Plus" type="primary" @click="addFormModel">新增</el-button> -->
|
||||
<el-button icon="el-icon-Download" :loading="loading" @click="exportEvent" type="primary">
|
||||
下载报告
|
||||
</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table
|
||||
ref="tableRef"
|
||||
:radio-config="{
|
||||
labelField: 'name',
|
||||
highlight: true,
|
||||
visibleMethod: row => row.row.level == 6
|
||||
}"
|
||||
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||||
:scroll-y="{ enabled: true }"
|
||||
/>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { exportModelJB } from '@/api/harmonic-boot/harmonic.ts'
|
||||
import { debounce } from 'lodash-es'
|
||||
import XEUtils from 'xe-utils'
|
||||
const dictData = useDictData()
|
||||
const tableRef = ref()
|
||||
const treeDataCopy: any = ref([])
|
||||
const treeData: any = ref([])
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/LineIntegrityData/getLineIntegrityData',
|
||||
publicHeight: 65,
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
column: [
|
||||
// { width: '60', title: '111', },
|
||||
{ field: 'name', title: '电网拓扑', width: 350, type: 'radio', align: 'left', treeNode: true },
|
||||
{
|
||||
field: 'ip',
|
||||
title: '网络参数',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.ip || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'deviceName',
|
||||
title: '终端名称',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.deviceName || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'manufacturer',
|
||||
title: '厂家',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.manufacturer || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'comFlag',
|
||||
title: '通讯状态',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'danger',
|
||||
1: 'success',
|
||||
3: 'info'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '中断',
|
||||
1: '正常',
|
||||
3: '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'updateTime',
|
||||
title: '最新数据时间',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.updateTime || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'integrityData',
|
||||
title: '完整性(%)',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.integrityData == 3.14159 ? '暂无数据' : row.integrityData.toFixed(2)
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'assess',
|
||||
title: '评估',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'info',
|
||||
1: 'danger',
|
||||
2: 'warning',
|
||||
3: 'success'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '暂无数据',
|
||||
1: '不合格',
|
||||
2: '合格',
|
||||
3: '优秀'
|
||||
}
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.options.column[0].title = tableStore.table.params.statisticalType.name
|
||||
},
|
||||
loadCallback: () => {
|
||||
setTimeout(() => {
|
||||
tableRef.value.getRef().setAllTreeExpand(true)
|
||||
}, 1000)
|
||||
|
||||
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
|
||||
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
|
||||
tableStore.table.data = treeData.value
|
||||
tableStore.table.params.filterName = ''
|
||||
searchEvent()
|
||||
}
|
||||
})
|
||||
const loading = ref(false)
|
||||
|
||||
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'harmonicBoot'
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
const tree2List = (list: any, id: any) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
item.uPid = id
|
||||
item.uId = Math.random() * 1000
|
||||
item.comFlag = item.comFlag == null ? 3 : item.comFlag
|
||||
item.assess = item.integrityData == 3.14159 ? 0 : item.integrityData < 60 ? 1 : item.integrityData < 90 ? 2 : 3
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.uId)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
const searchEvent = debounce(() => {
|
||||
const filterVal = XEUtils.toValueString(tableStore.table.params.filterName).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
|
||||
)
|
||||
console.log('🚀 ~ searchEvent ~ rest:', rest)
|
||||
|
||||
tableStore.table.data = rest
|
||||
|
||||
// 搜索之后默认展开所有子节点
|
||||
} else {
|
||||
tableStore.table.data = treeDataCopy.value
|
||||
}
|
||||
nextTick(() => {
|
||||
const $table = tableRef.value.getRef()
|
||||
if ($table) {
|
||||
$table.setAllTreeExpand(true)
|
||||
}
|
||||
})
|
||||
}, 500)
|
||||
const exportEvent = () => {
|
||||
let line = tableRef.value.getRef().getRadioRecord()
|
||||
if (!line) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
|
||||
message: '请选择要导出的数据'
|
||||
})
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
let form = new FormData()
|
||||
form.append('isUrl', false)
|
||||
form.append('lineIndex', line.id)
|
||||
form.append('startTime', TableHeaderRef.value.datePickerRef.timeValue[0])
|
||||
form.append('endTime', TableHeaderRef.value.datePickerRef.timeValue[1])
|
||||
form.append('type', 0)
|
||||
form.append('name', line.name)
|
||||
ElMessage({
|
||||
message: '下载报告中,请稍等.....',
|
||||
duration: 1000
|
||||
})
|
||||
exportModelJB(form)
|
||||
.then(async res => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
||||
})
|
||||
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download =
|
||||
line.name +
|
||||
TableHeaderRef.value.datePickerRef.timeValue[0] +
|
||||
'_' +
|
||||
TableHeaderRef.value.datePickerRef.timeValue[1] // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<template>
|
||||
<TableHeader area datePicker ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="筛选">
|
||||
<el-input
|
||||
v-model="tableStore.table.params.filterName"
|
||||
@keyup="searchEvent"
|
||||
placeholder="输入关键字筛选"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
value-key="id"
|
||||
placeholder="请选择统计类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.scale"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择电压等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择终端厂家"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.loadType"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择干扰源类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in interfereoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<!-- <el-button icon="el-icon-Plus" type="primary" @click="addFormModel">新增</el-button> -->
|
||||
<el-button icon="el-icon-Download" :loading="loading" @click="exportEvent" type="primary">
|
||||
下载报告
|
||||
</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table
|
||||
ref="tableRef"
|
||||
:radio-config="{
|
||||
labelField: 'name',
|
||||
highlight: true,
|
||||
visibleMethod: row => row.row.level == 6
|
||||
}"
|
||||
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||||
:scroll-y="{ enabled: true }"
|
||||
/>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { exportModelJB } from '@/api/harmonic-boot/harmonic'
|
||||
import { debounce } from 'lodash-es'
|
||||
import XEUtils from 'xe-utils'
|
||||
const dictData = useDictData()
|
||||
const tableRef = ref()
|
||||
const treeDataCopy: any = ref([])
|
||||
const treeData: any = ref([])
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/LineIntegrityData/getLineIntegrityData',
|
||||
publicHeight: 65,
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
column: [
|
||||
// { width: '60', title: '111', },
|
||||
{ field: 'name', title: '电网拓扑', width: 350, type: 'radio', align: 'left', treeNode: true },
|
||||
{
|
||||
field: 'ip',
|
||||
title: '网络参数',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.ip || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'deviceName',
|
||||
title: '终端名称',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.deviceName || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'manufacturer',
|
||||
title: '厂家',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.manufacturer || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'comFlag',
|
||||
title: '通讯状态',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'danger',
|
||||
1: 'success',
|
||||
3: 'info'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '中断',
|
||||
1: '正常',
|
||||
3: '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'updateTime',
|
||||
title: '最新数据时间',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.updateTime || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'integrityData',
|
||||
title: '完整性(%)',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.integrityData == 3.14159 ? '暂无数据' : row.integrityData.toFixed(2)
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'assess',
|
||||
title: '评估',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'info',
|
||||
1: 'danger',
|
||||
2: 'warning',
|
||||
3: 'success'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '暂无数据',
|
||||
1: '不合格',
|
||||
2: '合格',
|
||||
3: '优秀'
|
||||
}
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.options.column[0].title = tableStore.table.params.statisticalType.name
|
||||
},
|
||||
loadCallback: () => {
|
||||
setTimeout(() => {
|
||||
tableRef.value.getRef().setAllTreeExpand(true)
|
||||
}, 1000)
|
||||
|
||||
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
|
||||
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
|
||||
tableStore.table.data = treeData.value
|
||||
tableStore.table.params.filterName = ''
|
||||
searchEvent()
|
||||
}
|
||||
})
|
||||
const loading = ref(false)
|
||||
|
||||
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'harmonicBoot'
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
const tree2List = (list: any, id: any) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
item.uPid = id
|
||||
item.uId = Math.random() * 1000
|
||||
item.comFlag = item.comFlag == null ? 3 : item.comFlag
|
||||
item.assess = item.integrityData == 3.14159 ? 0 : item.integrityData < 60 ? 1 : item.integrityData < 90 ? 2 : 3
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.uId)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
const searchEvent = debounce(() => {
|
||||
const filterVal = XEUtils.toValueString(tableStore.table.params.filterName).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
|
||||
)
|
||||
console.log('🚀 ~ searchEvent ~ rest:', rest)
|
||||
|
||||
tableStore.table.data = rest
|
||||
|
||||
// 搜索之后默认展开所有子节点
|
||||
} else {
|
||||
tableStore.table.data = treeDataCopy.value
|
||||
}
|
||||
nextTick(() => {
|
||||
const $table = tableRef.value.getRef()
|
||||
if ($table) {
|
||||
$table.setAllTreeExpand(true)
|
||||
}
|
||||
})
|
||||
}, 500)
|
||||
const exportEvent = () => {
|
||||
let line = tableRef.value.getRef().getRadioRecord()
|
||||
if (!line) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
|
||||
message: '请选择要导出的数据'
|
||||
})
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
let form = new FormData()
|
||||
form.append('isUrl', false)
|
||||
form.append('lineIndex', line.id)
|
||||
form.append('startTime', TableHeaderRef.value.datePickerRef.timeValue[0])
|
||||
form.append('endTime', TableHeaderRef.value.datePickerRef.timeValue[1])
|
||||
form.append('type', 0)
|
||||
form.append('name', line.name)
|
||||
ElMessage({
|
||||
message: '下载报告中,请稍等.....',
|
||||
duration: 1000
|
||||
})
|
||||
exportModelJB(form)
|
||||
.then(async res => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
||||
})
|
||||
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download =
|
||||
line.name +
|
||||
TableHeaderRef.value.datePickerRef.timeValue[0] +
|
||||
'_' +
|
||||
TableHeaderRef.value.datePickerRef.timeValue[1] // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<TableHeader area datePicker ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
value-key="id"
|
||||
placeholder="请选择统计类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.scale"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择电压等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择终端厂家"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.loadType"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择干扰源类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in interfereoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<my-echart class="mt10" :style="`height: calc(${tableStore.table.height} - 75px)`" :options="options" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import * as echarts from 'echarts/core'
|
||||
const dictData = useDictData()
|
||||
const options = ref({})
|
||||
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/LineIntegrityData/getIntegrityIcon',
|
||||
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
column: [],
|
||||
|
||||
loadCallback: () => {
|
||||
// tableStore.table.data.type
|
||||
let code = tableStore.table.params.statisticalType.code
|
||||
let title = '',
|
||||
titleX = ''
|
||||
if (code == 'Power_Network') {
|
||||
title = '区域'
|
||||
titleX = '区域'
|
||||
} else if (code == 'Manufacturer') {
|
||||
title = '终端厂家'
|
||||
titleX = '终端\n厂家'
|
||||
} else if (code == 'Voltage_Level') {
|
||||
title = '电压等级'
|
||||
titleX = '电压\n等级'
|
||||
} else if (code == 'Load_Type') {
|
||||
title = '干扰源类型'
|
||||
titleX = '干扰\n源类型'
|
||||
} else if (code == 'Report_Type') {
|
||||
title = '上报类型'
|
||||
titleX = '上报\n类型'
|
||||
}
|
||||
options.value = {
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var tips = ''
|
||||
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '完整性:暂无数据'
|
||||
} else {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '完整性:' + params[i].value.toFixed(2)
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
right: '80px'
|
||||
},
|
||||
xAxis: {
|
||||
name: titleX,
|
||||
data: tableStore.table.data.map((item: any) => item.type)
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
max: 100
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '完整性',
|
||||
type: 'bar',
|
||||
data: tableStore.table.data.map((item: any) => item.single),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params: any) {
|
||||
if (params.value ==3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#339966'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFCC33'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value <= 60 && params.value > 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#A52a2a'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: '#339966'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#339966'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: '#FFCC33'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FFCC33'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: '#A52a2a'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#A52a2a'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'harmonicBoot'
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<TableHeader area datePicker ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="筛选">
|
||||
<el-input
|
||||
v-model="tableStore.table.params.filterName"
|
||||
@keyup="searchEvent"
|
||||
placeholder="输入关键字筛选"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
value-key="id"
|
||||
placeholder="请选择统计类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.scale"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择电压等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择终端厂家"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.loadType"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择干扰源类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in interfereoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<!-- <el-button icon="el-icon-Plus" type="primary" @click="addFormModel">新增</el-button> -->
|
||||
<el-button icon="el-icon-Download" :loading="loading" @click="exportEvent" type="primary">
|
||||
下载报告
|
||||
</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table
|
||||
ref="tableRef"
|
||||
:radio-config="{
|
||||
labelField: 'name',
|
||||
highlight: true,
|
||||
visibleMethod: row => row.row.level == 6
|
||||
}"
|
||||
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||||
:scroll-y="{ enabled: true }"
|
||||
/>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { exportModelJB } from '@/api/harmonic-boot/harmonic.ts'
|
||||
import { debounce } from 'lodash-es'
|
||||
import XEUtils from 'xe-utils'
|
||||
const dictData = useDictData()
|
||||
const tableRef = ref()
|
||||
const treeDataCopy: any = ref([])
|
||||
const treeData: any = ref([])
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/LineIntegrityData/getLineIntegrityData',
|
||||
publicHeight: 65,
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
column: [
|
||||
// { width: '60', title: '111', },
|
||||
{ field: 'name', title: '电网拓扑', width: 350, type: 'radio', align: 'left', treeNode: true },
|
||||
{
|
||||
field: 'ip',
|
||||
title: '网络参数',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.ip || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'deviceName',
|
||||
title: '终端名称',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.deviceName || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'manufacturer',
|
||||
title: '厂家',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.manufacturer || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'comFlag',
|
||||
title: '通讯状态',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'danger',
|
||||
1: 'success',
|
||||
3: 'info'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '中断',
|
||||
1: '正常',
|
||||
3: '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'updateTime',
|
||||
title: '最新数据时间',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.updateTime || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'integrityData',
|
||||
title: '完整性(%)',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.integrityData == 3.14159 ? '暂无数据' : row.integrityData.toFixed(2)
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'assess',
|
||||
title: '评估',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'info',
|
||||
1: 'danger',
|
||||
2: 'warning',
|
||||
3: 'success'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '暂无数据',
|
||||
1: '不合格',
|
||||
2: '合格',
|
||||
3: '优秀'
|
||||
}
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.options.column[0].title = tableStore.table.params.statisticalType.name
|
||||
},
|
||||
loadCallback: () => {
|
||||
setTimeout(() => {
|
||||
tableRef.value.getRef().setAllTreeExpand(true)
|
||||
}, 1000)
|
||||
|
||||
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
|
||||
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
|
||||
tableStore.table.data = treeData.value
|
||||
tableStore.table.params.filterName = ''
|
||||
searchEvent()
|
||||
}
|
||||
})
|
||||
const loading = ref(false)
|
||||
|
||||
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'harmonicBoot'
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
const tree2List = (list: any, id: any) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
item.uPid = id
|
||||
item.uId = Math.random() * 1000
|
||||
item.comFlag = item.comFlag == null ? 3 : item.comFlag
|
||||
item.assess = item.integrityData == 3.14159 ? 0 : item.integrityData < 60 ? 1 : item.integrityData < 90 ? 2 : 3
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.uId)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
const searchEvent = debounce(() => {
|
||||
const filterVal = XEUtils.toValueString(tableStore.table.params.filterName).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
|
||||
)
|
||||
console.log('🚀 ~ searchEvent ~ rest:', rest)
|
||||
|
||||
tableStore.table.data = rest
|
||||
|
||||
// 搜索之后默认展开所有子节点
|
||||
} else {
|
||||
tableStore.table.data = treeDataCopy.value
|
||||
}
|
||||
nextTick(() => {
|
||||
const $table = tableRef.value.getRef()
|
||||
if ($table) {
|
||||
$table.setAllTreeExpand(true)
|
||||
}
|
||||
})
|
||||
}, 500)
|
||||
const exportEvent = () => {
|
||||
let line = tableRef.value.getRef().getRadioRecord()
|
||||
if (!line) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
|
||||
message: '请选择要导出的数据'
|
||||
})
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
let form = new FormData()
|
||||
form.append('isUrl', false)
|
||||
form.append('lineIndex', line.id)
|
||||
form.append('startTime', TableHeaderRef.value.datePickerRef.timeValue[0])
|
||||
form.append('endTime', TableHeaderRef.value.datePickerRef.timeValue[1])
|
||||
form.append('type', 0)
|
||||
form.append('name', line.name)
|
||||
ElMessage({
|
||||
message: '下载报告中,请稍等.....',
|
||||
duration: 1000
|
||||
})
|
||||
exportModelJB(form)
|
||||
.then(async res => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
||||
})
|
||||
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download =
|
||||
line.name +
|
||||
TableHeaderRef.value.datePickerRef.timeValue[0] +
|
||||
'_' +
|
||||
TableHeaderRef.value.datePickerRef.timeValue[1] // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
637
src/views/pqs/harmonicMonitoring/embed/lntegruty/index_JB.vue
Normal file
637
src/views/pqs/harmonicMonitoring/embed/lntegruty/index_JB.vue
Normal file
@@ -0,0 +1,637 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader date-picker ref="TableHeaderRef" :dateLabel="`数据统计时间`">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="运行状态">
|
||||
<el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
|
||||
<el-option
|
||||
v-for="item in runFlagList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="tableStore.table.params.filterName" placeholder="输入关键字筛选" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" icon="el-icon-Download" @click="onExport">导出</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div class="card-list pt10" v-loading="tableStore.table.loading">
|
||||
<div class="monitoringPoints">
|
||||
<el-card style="height: 200px">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>监测点统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<div class="statistics">
|
||||
<div class="divBox">
|
||||
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
|
||||
<span class="divBox_title">监测点总数</span>
|
||||
<span class="divBox_num text-style" style="color: #57bc6e" @click="totalTable(101, '')">
|
||||
{{ monitoringPoints.runNum }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="divBox" style="width: 200px">
|
||||
<span class="iconfont icon-igw-f-warning-data" style="color: #ff6600"></span>
|
||||
<span class="divBox_title">低于90%监测点数</span>
|
||||
<span
|
||||
class="divBox_num text-style"
|
||||
style="color: #ff6600"
|
||||
@click="totalTable(90, '低于90%监测点_')"
|
||||
>
|
||||
{{ monitoringPoints.abnormalNum }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartTitle">
|
||||
<div>总的数据完整性</div>
|
||||
<div>{{ monitoringPoints.totalOnlineRate }}%</div>
|
||||
</div>
|
||||
<div style="height: 30px">
|
||||
<MyEchart :options="percentage"></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="mt10">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>完整性统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="mb5" style="height: 40px">
|
||||
<el-segmented
|
||||
style="height: 100%"
|
||||
v-model="segmented"
|
||||
:props="props"
|
||||
:options="segmentedList"
|
||||
block
|
||||
@change="tableStore.index()"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<div>{{ scope.item.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-segmented>
|
||||
</div>
|
||||
<div class="header">
|
||||
<span style="width: 110px; text-align: left">
|
||||
{{
|
||||
segmented == 'Power_Network'
|
||||
? '区域'
|
||||
: segmented == 'Manufacturer'
|
||||
? '终端厂家'
|
||||
: '电网标志'
|
||||
}}
|
||||
</span>
|
||||
<span style="width: 90px">监测点总数</span>
|
||||
<span style="flex: 1">低于90%监测点数</span>
|
||||
<span style="width: 80px">完整性(%)</span>
|
||||
</div>
|
||||
<div :style="indicatorHeight" style="overflow-y: auto">
|
||||
<div v-for="o in abnormal" class="abnormal mb10">
|
||||
<span style="width: 110px; height: 24px" class="iconDiv">
|
||||
<div :style="{ backgroundColor: o.citTotalOnlineRate < 90 ? '#FF9100' : '' }"></div>
|
||||
{{ o.citName }}
|
||||
</span>
|
||||
<!-- 监测点总数 -->
|
||||
<span
|
||||
style="width: 90px; color: #388e3c"
|
||||
class="text text-style"
|
||||
@click="renderTable(o.detailList, 101, o.citName + '_')"
|
||||
>
|
||||
{{ o.citTotalNum }}
|
||||
</span>
|
||||
<!-- 低于90%监测点数 -->
|
||||
<span
|
||||
style="flex: 1; color: #ff9100"
|
||||
class="text text-style"
|
||||
@click="renderTable(o.detailList, 90, o.citName + '_低于90%监测点_')"
|
||||
>
|
||||
{{ o.citBelowNum }}
|
||||
</span>
|
||||
<span
|
||||
style="width: 80px; color: #388e3c"
|
||||
:class="` ${o.citTotalOnlineRate < 90 ? 'text-red' : ''}`"
|
||||
class="text"
|
||||
>
|
||||
{{ o.citTotalOnlineRate }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card class="detail ml10" :style="pageHeight">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ title }}完整性详情</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--表格-->
|
||||
|
||||
<div :style="{ height: tableStore.table.height }" v-loading="loading">
|
||||
<vxe-table
|
||||
height="auto"
|
||||
:data="dataList.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
|
||||
v-bind="defaultAttribute"
|
||||
ref="tableRef"
|
||||
:scroll-y="{ enabled: true }"
|
||||
>
|
||||
<vxe-column type="seq" title="序号" width="80px">
|
||||
<template #default="{ rowIndex }">
|
||||
<span>
|
||||
{{
|
||||
(tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize +
|
||||
rowIndex +
|
||||
1
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="cit" title="参数地市" width="110px"></vxe-column>
|
||||
<vxe-column field="company" title="供电公司"></vxe-column>
|
||||
<vxe-column field="subStation" title="变电站"></vxe-column>
|
||||
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
|
||||
<vxe-column field="deviceName" title="终端名称"></vxe-column>
|
||||
<vxe-column field="ip" title="终端IP" :formatter="formatter" width="130px"></vxe-column>
|
||||
<vxe-column field="lineName" title="监测点名称" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="runFlag" title="运行状态" width="90px">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="
|
||||
row.runFlag == '运行'
|
||||
? 'success'
|
||||
: row.runFlag == '停运'
|
||||
? 'danger'
|
||||
: row.runFlag == '检修'
|
||||
? 'warning'
|
||||
: row.runFlag == '调试'
|
||||
? 'warning'
|
||||
: 'danger'
|
||||
"
|
||||
>
|
||||
{{ row.runFlag }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="latestTime" title="最新数据时间" width="150px"></vxe-column>
|
||||
<vxe-column field="integrity" title="完整性(%)" width="90px"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
v-model:currentPage="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100, 200]"
|
||||
background
|
||||
layout="sizes,total, ->, prev, pager, next, jumper"
|
||||
:total="dataList.length"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { onMounted, provide, ref } from 'vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { getMonitorVerifyDay } from '@/api/device-boot/dataVerify'
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/harmonic/getIntegrityData'
|
||||
})
|
||||
|
||||
const dictData = useDictData()
|
||||
//字典获取监督对象类型
|
||||
const pageHeight = mainHeight(97)
|
||||
const indicatorHeight = mainHeight(447)
|
||||
const monitoringPoints = ref({
|
||||
runNum: 0,
|
||||
abnormalNum: 0,
|
||||
totalOnlineRate: 0
|
||||
})
|
||||
const pageSize = ref(20)
|
||||
const pageNum = ref(1)
|
||||
const title = ref('')
|
||||
const loading = ref(false)
|
||||
const dataList = ref([])
|
||||
const tableRef = ref()
|
||||
const percentage = ref({})
|
||||
const TableHeaderRef = ref()
|
||||
const abnormal: any = ref([])
|
||||
const totalData: any = ref([])
|
||||
//定义监测点运行状态下拉框数据
|
||||
const runFlagList = [
|
||||
{ id: 0, name: '运行' },
|
||||
{ id: 1, name: '检修' },
|
||||
{ id: 2, name: '停运' },
|
||||
{ id: 3, name: '调试' },
|
||||
{ id: 4, name: '退运' }
|
||||
]
|
||||
// Statistical_Type
|
||||
|
||||
const segmented = ref('Power_Network')
|
||||
|
||||
const segmentedList = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])
|
||||
const props = {
|
||||
value: 'code',
|
||||
label: 'name'
|
||||
}
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/LineIntegrityData/data',
|
||||
method: 'POST',
|
||||
showPage: false,
|
||||
publicHeight: 145,
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.statisticalType = segmentedList.filter(item => item.code === segmented.value)[0]
|
||||
},
|
||||
loadCallback: () => {
|
||||
// tableStore.table.data
|
||||
monitoringPoints.value.runNum = tableStore.table.data.totalNum
|
||||
monitoringPoints.value.abnormalNum = tableStore.table.data.belowNum
|
||||
monitoringPoints.value.totalOnlineRate = tableStore.table.data.totalOnlineRate - 0
|
||||
abnormal.value = tableStore.table.data.citDetailList
|
||||
// 合并子集数据 并去重
|
||||
totalData.value = Array.from(
|
||||
tableStore.table.data.citDetailList
|
||||
.map((item: any) => item.detailList)
|
||||
.flat()
|
||||
.reduce((map: any, item: any) => {
|
||||
if (!map.has(item.deviceId)) {
|
||||
map.set(item.deviceId, item)
|
||||
}
|
||||
return map
|
||||
}, new Map())
|
||||
.values()
|
||||
)
|
||||
totalTable(101, '')
|
||||
echart()
|
||||
}
|
||||
})
|
||||
|
||||
const echart = () => {
|
||||
percentage.value = {
|
||||
color: ['#FF9100'],
|
||||
options: {
|
||||
dataZoom: null,
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: '0%',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%'
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
data: ['']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '异常总数',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
data: [100],
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#57bc6e' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '异常占比',
|
||||
type: 'bar',
|
||||
barWidth: 13,
|
||||
data: [monitoringPoints.value.totalOnlineRate - 0],
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#FF9100' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FF9100' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
symbolRepeat: 50,
|
||||
// symbolMargin: 300,
|
||||
symbol: 'rect',
|
||||
symbolClip: true,
|
||||
symbolSize: [2, 20],
|
||||
symbolPosition: 'start',
|
||||
symbolOffset: [0, 0],
|
||||
data: [100],
|
||||
z: 1,
|
||||
zlevel: 0
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
barGap: '-110%',
|
||||
data: [100],
|
||||
barWidth: 18,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'transparent',
|
||||
barBorderColor: 'rgb(148,217,249)',
|
||||
barBorderWidth: 1
|
||||
}
|
||||
},
|
||||
z: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.lineRunFlag = ''
|
||||
|
||||
const formatter = (row: any) => {
|
||||
return row.cellValue || '/'
|
||||
}
|
||||
// 渲染总表格
|
||||
const totalTable = (num: number, t: string) => {
|
||||
title.value = t
|
||||
loading.value = true
|
||||
pageNum.value = 1
|
||||
dataList.value = []
|
||||
dataList.value = totalData.value.filter((item: any) => {
|
||||
return item.integrity < num
|
||||
})
|
||||
|
||||
loading.value = false
|
||||
}
|
||||
// 渲染表格
|
||||
const renderTable = (list: any, num: number, t: string) => {
|
||||
title.value = t
|
||||
loading.value = true
|
||||
pageNum.value = 1
|
||||
dataList.value = []
|
||||
dataList.value = list.filter((item: any) => {
|
||||
return item.integrity < num
|
||||
})
|
||||
loading.value = false
|
||||
}
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
tableRef.value?.exportData({
|
||||
filename: title.value + '完整性详情', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: dataList.value, // 数据源 // 过滤那个字段导出
|
||||
columnFilterMethod: function (column: any) {
|
||||
return !(
|
||||
column.column.title === undefined ||
|
||||
column.column.title === '序号' ||
|
||||
column.column.title === '操作'
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
// TableHeaderRef.value.setDatePicker([
|
||||
// { label: '年份', value: 1 },
|
||||
// { label: '季度', value: 2 },
|
||||
// { label: '月份', value: 3 }
|
||||
// ])
|
||||
|
||||
// 加载数据
|
||||
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
tableStore.table.params.name = ''
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
display: flex;
|
||||
.monitoringPoints {
|
||||
width: 440px;
|
||||
position: relative;
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.divBox {
|
||||
width: 200px;
|
||||
height: 70px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
|
||||
.iconfont {
|
||||
font-size: 40px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.divBox_title {
|
||||
font-weight: 550;
|
||||
}
|
||||
.divBox_num {
|
||||
font-size: 20px;
|
||||
font-weight: 550;
|
||||
margin-left: auto;
|
||||
font-family: AlimamaDongFangDaKai;
|
||||
}
|
||||
align-items: center;
|
||||
// text-align: center;
|
||||
border-radius: 5px;
|
||||
&:nth-child(1) {
|
||||
background-color: #eef8f0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
background-color: #fff6ed;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
background-color: #e5f8f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail {
|
||||
flex: 1;
|
||||
}
|
||||
.abnormal {
|
||||
width: 100%;
|
||||
background-color: #f3f6f9;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 0px 5px 10px;
|
||||
.iconDiv {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
div {
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
margin-right: 5px;
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
text-align: center;
|
||||
|
||||
// font-feature-settings: 'tnum';
|
||||
}
|
||||
}
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
|
||||
font-weight: 700;
|
||||
padding: 5px;
|
||||
}
|
||||
:deep(.el-card__header) {
|
||||
padding: 10px;
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
padding: 10px;
|
||||
}
|
||||
.iconFont {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form {
|
||||
position: relative;
|
||||
.form_but {
|
||||
position: absolute;
|
||||
right: -22px;
|
||||
}
|
||||
}
|
||||
.card-header {
|
||||
font-size: 16px;
|
||||
}
|
||||
:deep(.table_name) {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
.echartTitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
div:nth-child(2) {
|
||||
font-size: 16px;
|
||||
color: #ff6600;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-segmented__item-selected, ) {
|
||||
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
|
||||
}
|
||||
:deep(.el-segmented__item, ) {
|
||||
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
|
||||
position: relative;
|
||||
}
|
||||
:deep(.el-segmented) {
|
||||
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
|
||||
}
|
||||
.text-red {
|
||||
color: #ff9100 !important;
|
||||
}
|
||||
.text-style {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.segmentedIcon {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 100px;
|
||||
height: 18px !important;
|
||||
line-height: 19px;
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
background: #ff9100;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.table-pagination {
|
||||
height: 58px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
padding: 13px 15px;
|
||||
border-left: 1px solid #e4e7e9;
|
||||
border-right: 1px solid #e4e7e9;
|
||||
border-bottom: 1px solid #e4e7e9;
|
||||
}
|
||||
</style>
|
||||
@@ -1,291 +1,291 @@
|
||||
<template>
|
||||
<TableHeader area datePicker ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
value-key="id"
|
||||
placeholder="请选择统计类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.scale"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择电压等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择终端厂家"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.loadType"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择干扰源类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in interfereoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<my-echart class="mt10" :style="`height: calc(${tableStore.table.height} - 75px)`" :options="options" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import * as echarts from 'echarts/core'
|
||||
const dictData = useDictData()
|
||||
const options = ref({})
|
||||
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
|
||||
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
column: [],
|
||||
|
||||
loadCallback: () => {
|
||||
// tableStore.table.data.type
|
||||
let code = tableStore.table.params.statisticalType.code
|
||||
let title = '',
|
||||
titleX = ''
|
||||
if (code == 'Power_Network') {
|
||||
title = '区域'
|
||||
titleX = '区域'
|
||||
} else if (code == 'Manufacturer') {
|
||||
title = '终端厂家'
|
||||
titleX = '终端\n厂家'
|
||||
} else if (code == 'Voltage_Level') {
|
||||
title = '电压等级'
|
||||
titleX = '电压\n等级'
|
||||
} else if (code == 'Load_Type') {
|
||||
title = '干扰源类型'
|
||||
titleX = '干扰\n源类型'
|
||||
} else if (code == 'Report_Type') {
|
||||
title = '上报类型'
|
||||
titleX = '上报\n类型'
|
||||
}
|
||||
options.value = {
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var tips = ''
|
||||
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 1) {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '在线率:暂无数据'
|
||||
} else {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '在线率:' + params[i].value.toFixed(2)
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
right: '80px'
|
||||
},
|
||||
xAxis: {
|
||||
name: titleX,
|
||||
data: tableStore.table.data.type
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
max: 100
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '在线率',
|
||||
type: 'bar',
|
||||
data: tableStore.table.data.single,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params: any) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#339966'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFCC33'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value <= 60 && params.value > 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#A52a2a'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value > 0 && params.value <= 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: '#339966'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#339966'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: '#FFCC33'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FFCC33'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: '#A52a2a'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#A52a2a'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'harmonicBoot'
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<template>
|
||||
<TableHeader area datePicker ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
value-key="id"
|
||||
placeholder="请选择统计类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.scale"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择电压等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择终端厂家"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.loadType"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择干扰源类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in interfereoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<my-echart class="mt10" :style="`height: calc(${tableStore.table.height} - 75px)`" :options="options" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import * as echarts from 'echarts/core'
|
||||
const dictData = useDictData()
|
||||
const options = ref({})
|
||||
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
|
||||
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
column: [],
|
||||
|
||||
loadCallback: () => {
|
||||
// tableStore.table.data.type
|
||||
let code = tableStore.table.params.statisticalType.code
|
||||
let title = '',
|
||||
titleX = ''
|
||||
if (code == 'Power_Network') {
|
||||
title = '区域'
|
||||
titleX = '区域'
|
||||
} else if (code == 'Manufacturer') {
|
||||
title = '终端厂家'
|
||||
titleX = '终端\n厂家'
|
||||
} else if (code == 'Voltage_Level') {
|
||||
title = '电压等级'
|
||||
titleX = '电压\n等级'
|
||||
} else if (code == 'Load_Type') {
|
||||
title = '干扰源类型'
|
||||
titleX = '干扰\n源类型'
|
||||
} else if (code == 'Report_Type') {
|
||||
title = '上报类型'
|
||||
titleX = '上报\n类型'
|
||||
}
|
||||
options.value = {
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var tips = ''
|
||||
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '在线率:暂无数据'
|
||||
} else {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '在线率:' + params[i].value.toFixed(2)
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
right: '80px'
|
||||
},
|
||||
xAxis: {
|
||||
name: titleX,
|
||||
data: tableStore.table.data.type
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
max: 100
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '在线率',
|
||||
type: 'bar',
|
||||
data: tableStore.table.data.single,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params: any) {
|
||||
if (params.value == 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#339966'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFCC33'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value <= 60 && params.value > 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#A52a2a'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: '#339966'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#339966'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: '#FFCC33'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FFCC33'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: '#A52a2a'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#A52a2a'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'harmonicBoot'
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
636
src/views/pqs/harmonicMonitoring/embed/onlinerate/index_JB.vue
Normal file
636
src/views/pqs/harmonicMonitoring/embed/onlinerate/index_JB.vue
Normal file
@@ -0,0 +1,636 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader date-picker ref="TableHeaderRef" :dateLabel="`数据统计时间`">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="运行状态">
|
||||
<el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
|
||||
<el-option
|
||||
v-for="item in runFlagList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="tableStore.table.params.filterName" placeholder="输入关键字筛选" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" icon="el-icon-Download" @click="onExport">导出</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div class="card-list pt10" v-loading="tableStore.table.loading">
|
||||
<div class="monitoringPoints">
|
||||
<el-card style="height: 200px">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>终端统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<div class="statistics">
|
||||
<div class="divBox">
|
||||
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
|
||||
<span class="divBox_title">终端总数</span>
|
||||
<span class="divBox_num text-style" style="color: #57bc6e" @click="totalTable(101, '')">
|
||||
{{ monitoringPoints.runNum }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="divBox" style="width: 200px">
|
||||
<span class="iconfont icon-igw-f-warning-data" style="color: #ff6600"></span>
|
||||
<span class="divBox_title">低于90%终端数</span>
|
||||
<span
|
||||
class="divBox_num text-style"
|
||||
style="color: #ff6600"
|
||||
@click="totalTable(90, '低于90%终端_')"
|
||||
>
|
||||
{{ monitoringPoints.abnormalNum }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartTitle">
|
||||
<div>总的数据在线率</div>
|
||||
<div>{{ monitoringPoints.totalOnlineRate }}%</div>
|
||||
</div>
|
||||
<div style="height: 30px">
|
||||
<MyEchart :options="percentage"></MyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="mt10">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>在线率统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="mb5" style="height: 40px">
|
||||
<el-segmented
|
||||
style="height: 100%"
|
||||
v-model="segmented"
|
||||
:props="props"
|
||||
:options="segmentedList"
|
||||
block
|
||||
@change="tableStore.index()"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<div>{{ scope.item.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-segmented>
|
||||
</div>
|
||||
<div class="header">
|
||||
<span style="width: 110px; text-align: left">
|
||||
{{
|
||||
segmented == 'Power_Network'
|
||||
? '区域'
|
||||
: segmented == 'Manufacturer'
|
||||
? '终端厂家'
|
||||
: '电网标志'
|
||||
}}
|
||||
</span>
|
||||
<span style="width: 90px">终端总数</span>
|
||||
<span style="flex: 1">低于90%终端数</span>
|
||||
<span style="width: 80px">在线率(%)</span>
|
||||
</div>
|
||||
<div :style="indicatorHeight" style="overflow-y: auto">
|
||||
<div v-for="o in abnormal" class="abnormal mb10">
|
||||
<span style="width: 110px; height: 24px" class="iconDiv">
|
||||
<div :style="{ backgroundColor: o.citTotalOnlineRate < 90 ? '#FF9100' : '' }"></div>
|
||||
{{ o.citName }}
|
||||
</span>
|
||||
<!-- 终端总数 -->
|
||||
<span
|
||||
style="width: 90px; color: #388e3c"
|
||||
class="text text-style"
|
||||
@click="renderTable(o.detailList, 101, o.citName + '_')"
|
||||
>
|
||||
{{ o.citTotalNum }}
|
||||
</span>
|
||||
<!-- 低于90%终端数 -->
|
||||
<span
|
||||
style="flex: 1; color: #ff9100"
|
||||
class="text text-style"
|
||||
@click="renderTable(o.detailList, 90, o.citName + '_低于90%终端_')"
|
||||
>
|
||||
{{ o.citBelowNum }}
|
||||
</span>
|
||||
<span
|
||||
style="width: 80px; color: #388e3c"
|
||||
:class="` ${o.citTotalOnlineRate < 90 ? 'text-red' : ''}`"
|
||||
class="text"
|
||||
>
|
||||
{{ o.citTotalOnlineRate }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card class="detail ml10" :style="pageHeight">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ title }}在线率详情</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--表格-->
|
||||
|
||||
<div :style="{ height: tableStore.table.height }" v-loading="loading">
|
||||
<vxe-table
|
||||
height="auto"
|
||||
:data="dataList.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
|
||||
v-bind="defaultAttribute"
|
||||
ref="tableRef"
|
||||
:scroll-y="{ enabled: true }"
|
||||
>
|
||||
<vxe-column type="seq" title="序号" width="80px">
|
||||
<template #default="{ rowIndex }">
|
||||
<span>
|
||||
{{
|
||||
(tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize +
|
||||
rowIndex +
|
||||
1
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="cit" title="参数地市" width="110px"></vxe-column>
|
||||
<vxe-column field="company" title="供电公司"></vxe-column>
|
||||
<vxe-column field="subStation" title="变电站"></vxe-column>
|
||||
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
|
||||
<vxe-column field="deviceName" title="终端名称"></vxe-column>
|
||||
<vxe-column field="ip" title="终端IP" :formatter="formatter" width="130px"></vxe-column>
|
||||
<vxe-column field="runFlag" title="运行状态" width="90px">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="
|
||||
row.runFlag == '运行'
|
||||
? 'success'
|
||||
: row.runFlag == '停运'
|
||||
? 'danger'
|
||||
: row.runFlag == '检修'
|
||||
? 'warning'
|
||||
: row.runFlag == '调试'
|
||||
? 'warning'
|
||||
: 'danger'
|
||||
"
|
||||
>
|
||||
{{ row.runFlag }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="onlineRate" title="在线率(%)" width="90px"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
v-model:currentPage="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100, 200]"
|
||||
background
|
||||
layout="sizes,total, ->, prev, pager, next, jumper"
|
||||
:total="dataList.length"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { onMounted, provide, ref } from 'vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { getMonitorVerifyDay } from '@/api/device-boot/dataVerify'
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/harmonic/getIntegrityData'
|
||||
})
|
||||
|
||||
const dictData = useDictData()
|
||||
//字典获取监督对象类型
|
||||
const pageHeight = mainHeight(97)
|
||||
const indicatorHeight = mainHeight(447)
|
||||
const monitoringPoints = ref({
|
||||
runNum: 0,
|
||||
abnormalNum: 0,
|
||||
totalOnlineRate: 0
|
||||
})
|
||||
const pageSize = ref(20)
|
||||
const pageNum = ref(1)
|
||||
const title = ref('')
|
||||
const loading = ref(false)
|
||||
const dataList = ref([])
|
||||
const tableRef = ref()
|
||||
const percentage = ref({})
|
||||
const TableHeaderRef = ref()
|
||||
const abnormal: any = ref([])
|
||||
const totalData: any = ref([])
|
||||
//定义终端运行状态下拉框数据
|
||||
const runFlagList = [
|
||||
{ id: 0, name: '运行' },
|
||||
{ id: 1, name: '检修' },
|
||||
{ id: 2, name: '停运' },
|
||||
{ id: 3, name: '调试' },
|
||||
{ id: 4, name: '退运' }
|
||||
]
|
||||
// Statistical_Type
|
||||
|
||||
const segmented = ref('Power_Network')
|
||||
|
||||
const segmentedList = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])
|
||||
const props = {
|
||||
value: 'code',
|
||||
label: 'name'
|
||||
}
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/onLineRate/deviceOnlineRateInfo',
|
||||
method: 'POST',
|
||||
showPage: false,
|
||||
publicHeight: 145,
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.statisticalType = segmentedList.filter(item => item.code === segmented.value)[0]
|
||||
},
|
||||
loadCallback: () => {
|
||||
// tableStore.table.data
|
||||
monitoringPoints.value.runNum = tableStore.table.data.totalNum
|
||||
monitoringPoints.value.abnormalNum = tableStore.table.data.belowNum
|
||||
monitoringPoints.value.totalOnlineRate = tableStore.table.data.totalOnlineRate - 0
|
||||
abnormal.value = tableStore.table.data.citDetailList
|
||||
// 合并子集数据 并去重
|
||||
totalData.value = Array.from(
|
||||
tableStore.table.data.citDetailList
|
||||
.map((item: any) => item.detailList)
|
||||
.flat()
|
||||
.reduce((map: any, item: any) => {
|
||||
if (!map.has(item.deviceId)) {
|
||||
map.set(item.deviceId, item)
|
||||
}
|
||||
return map
|
||||
}, new Map())
|
||||
.values()
|
||||
)
|
||||
|
||||
totalTable(101, '')
|
||||
echart()
|
||||
}
|
||||
})
|
||||
|
||||
const echart = () => {
|
||||
percentage.value = {
|
||||
color: ['#FF9100'],
|
||||
options: {
|
||||
dataZoom: null,
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: '0%',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%'
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
data: ['']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '异常总数',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
data: [100],
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#57bc6e' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '异常占比',
|
||||
type: 'bar',
|
||||
barWidth: 13,
|
||||
data: [monitoringPoints.value.totalOnlineRate - 0],
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#FF9100' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FF9100' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
symbolRepeat: 50,
|
||||
// symbolMargin: 300,
|
||||
symbol: 'rect',
|
||||
symbolClip: true,
|
||||
symbolSize: [2, 20],
|
||||
symbolPosition: 'start',
|
||||
symbolOffset: [0, 0],
|
||||
data: [100],
|
||||
z: 1,
|
||||
zlevel: 0
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
barGap: '-110%',
|
||||
data: [100],
|
||||
barWidth: 18,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'transparent',
|
||||
barBorderColor: 'rgb(148,217,249)',
|
||||
barBorderWidth: 1
|
||||
}
|
||||
},
|
||||
z: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.lineRunFlag = ''
|
||||
|
||||
const formatter = (row: any) => {
|
||||
return row.cellValue || '/'
|
||||
}
|
||||
// 渲染总表格
|
||||
const totalTable = (num: number, t: string) => {
|
||||
title.value = t
|
||||
loading.value = true
|
||||
pageNum.value = 1
|
||||
dataList.value = []
|
||||
dataList.value = totalData.value.filter((item: any) => {
|
||||
return item.onlineRate < num
|
||||
})
|
||||
|
||||
loading.value = false
|
||||
}
|
||||
// 渲染表格
|
||||
const renderTable = (list: any, num: number, t: string) => {
|
||||
title.value = t
|
||||
loading.value = true
|
||||
pageNum.value = 1
|
||||
dataList.value = []
|
||||
dataList.value = list.filter((item: any) => {
|
||||
return item.onlineRate < num
|
||||
})
|
||||
loading.value = false
|
||||
}
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
tableRef.value?.exportData({
|
||||
filename: title.value + '在线率详情', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: dataList.value, // 数据源 // 过滤那个字段导出
|
||||
columnFilterMethod: function (column: any) {
|
||||
return !(
|
||||
column.column.title === undefined ||
|
||||
column.column.title === '序号' ||
|
||||
column.column.title === '操作'
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
// TableHeaderRef.value.setDatePicker([
|
||||
// { label: '年份', value: 1 },
|
||||
// { label: '季度', value: 2 },
|
||||
// { label: '月份', value: 3 }
|
||||
// ])
|
||||
|
||||
// 加载数据
|
||||
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
tableStore.table.params.name = ''
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
display: flex;
|
||||
.monitoringPoints {
|
||||
width: 440px;
|
||||
position: relative;
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.divBox {
|
||||
width: 200px;
|
||||
height: 70px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
|
||||
.iconfont {
|
||||
font-size: 40px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.divBox_title {
|
||||
font-weight: 550;
|
||||
}
|
||||
.divBox_num {
|
||||
font-size: 20px;
|
||||
font-weight: 550;
|
||||
margin-left: auto;
|
||||
font-family: AlimamaDongFangDaKai;
|
||||
}
|
||||
align-items: center;
|
||||
// text-align: center;
|
||||
border-radius: 5px;
|
||||
&:nth-child(1) {
|
||||
background-color: #eef8f0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
background-color: #fff6ed;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
background-color: #e5f8f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail {
|
||||
flex: 1;
|
||||
}
|
||||
.abnormal {
|
||||
width: 100%;
|
||||
background-color: #f3f6f9;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 0px 5px 10px;
|
||||
.iconDiv {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
div {
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
margin-right: 5px;
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
text-align: center;
|
||||
|
||||
// font-feature-settings: 'tnum';
|
||||
}
|
||||
}
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
|
||||
font-weight: 700;
|
||||
padding: 5px;
|
||||
}
|
||||
:deep(.el-card__header) {
|
||||
padding: 10px;
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
padding: 10px;
|
||||
}
|
||||
.iconFont {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form {
|
||||
position: relative;
|
||||
.form_but {
|
||||
position: absolute;
|
||||
right: -22px;
|
||||
}
|
||||
}
|
||||
.card-header {
|
||||
font-size: 16px;
|
||||
}
|
||||
:deep(.table_name) {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
.echartTitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
div:nth-child(2) {
|
||||
font-size: 16px;
|
||||
color: #ff6600;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-segmented__item-selected, ) {
|
||||
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
|
||||
}
|
||||
:deep(.el-segmented__item, ) {
|
||||
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
|
||||
position: relative;
|
||||
}
|
||||
:deep(.el-segmented) {
|
||||
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
|
||||
}
|
||||
.text-red {
|
||||
color: #ff9100 !important;
|
||||
}
|
||||
.text-style {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.segmentedIcon {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 100px;
|
||||
height: 18px !important;
|
||||
line-height: 19px;
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
background: #ff9100;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.table-pagination {
|
||||
height: 58px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
padding: 13px 15px;
|
||||
border-left: 1px solid #e4e7e9;
|
||||
border-right: 1px solid #e4e7e9;
|
||||
border-bottom: 1px solid #e4e7e9;
|
||||
}
|
||||
</style>
|
||||
@@ -41,6 +41,9 @@
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出excel</el-button>
|
||||
<el-button icon="el-icon-Download" :loading="loading" @click="exportReport" type="primary">
|
||||
下载报告
|
||||
</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div class="box">
|
||||
@@ -58,10 +61,11 @@ import TableStore from '@/utils/tableStore'
|
||||
import PointTree from '@/components/tree/pqs/pointTree.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { exportModelJB } from '@/api/harmonic-boot/harmonic'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
|
||||
import { exportExcel } from '@/views/system/reportForms/export.js'
|
||||
|
||||
import { ElMessage } from 'element-plus'
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/xieboReport'
|
||||
})
|
||||
@@ -113,12 +117,13 @@ const tableStore = new TableStore({
|
||||
showtoolbar: false, // 是否显示工具栏
|
||||
showinfobar: false, // 是否显示顶部信息栏
|
||||
showsheetbar: true, // 是否显示底部sheet按钮
|
||||
allowEdit: false, // 禁止所有编辑操作（必填）
|
||||
allowEdit: false, // 禁止所有编辑操作（必填）
|
||||
data: tableStore.table.data
|
||||
})
|
||||
}, 10)
|
||||
}
|
||||
})
|
||||
const loading = ref(false)
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
@@ -159,6 +164,50 @@ const handleNodeClick = (data: any, node: any) => {
|
||||
const exportEvent = () => {
|
||||
exportExcel(luckysheet.getAllSheets(), '统计报表下载')
|
||||
}
|
||||
const exportReport = () => {
|
||||
if (!line) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
|
||||
message: '请选择要导出的数据'
|
||||
})
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
let form = new FormData()
|
||||
form.append('isUrl', false)
|
||||
form.append('lineIndex', dotList.value.id)
|
||||
form.append('startTime', TableHeaderRef.value.datePickerRef.timeValue[0])
|
||||
form.append('endTime', TableHeaderRef.value.datePickerRef.timeValue[1])
|
||||
form.append('type', 0)
|
||||
form.append('name', dotList.value.name)
|
||||
ElMessage({
|
||||
message: '下载报告中,请稍等.....',
|
||||
duration: 1000
|
||||
})
|
||||
exportModelJB(form)
|
||||
.then(async res => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
||||
})
|
||||
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download =
|
||||
dotList.value.name +
|
||||
TableHeaderRef.value.datePickerRef.timeValue[0] +
|
||||
'_' +
|
||||
TableHeaderRef.value.datePickerRef.timeValue[1] // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
@@ -167,6 +216,5 @@ const exportEvent = () => {
|
||||
|
||||
.box {
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user