修改用户台账录入页面
This commit is contained in:
132
src/views/pqs/runManage/assessment/components/uese/index.vue
Normal file
132
src/views/pqs/runManage/assessment/components/uese/index.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<TableHeader ref="TableHeaderRef" showExport>
|
||||
<template #select>
|
||||
<el-form-item label="所在地市">
|
||||
<el-select v-model="tableStore.table.params.city" clearable placeholder="请选择所在地市">
|
||||
<el-option
|
||||
v-for="item in areaOptionList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称">
|
||||
<el-input
|
||||
style="width: 200px"
|
||||
placeholder="请输入用户名称"
|
||||
v-model="tableStore.table.params.userName"
|
||||
clearable
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="接入变电站">
|
||||
<el-input
|
||||
style="width: 200px"
|
||||
placeholder="请输入接入变电站"
|
||||
v-model="tableStore.table.params.projectName"
|
||||
clearable
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电站电压等级">
|
||||
<el-select v-model="tableStore.table.params.scale" clearable placeholder="请选择电站电压等级">
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="接入母线">
|
||||
<el-input
|
||||
style="width: 200px"
|
||||
placeholder="请输入接入母线"
|
||||
v-model="tableStore.table.params.projectName"
|
||||
clearable
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Plus" type="primary">新增</el-button>
|
||||
<el-button icon="el-icon-Delete">删除</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox, ElDatePicker } from 'element-plus'
|
||||
const dictData = useDictData()
|
||||
const areaOptionList = dictData.getBasicData('jibei_area')
|
||||
//字典获取电压等级
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/user-boot/user/getAllUserSimpleList',
|
||||
method: 'GET',
|
||||
publicHeight: 65,
|
||||
column: [
|
||||
{ field: 'timerName', title: '所属地市' },
|
||||
{ field: 'timerName', title: '用户名称' },
|
||||
{ field: 'timerName', title: '接入变电站' },
|
||||
{ field: 'timerName', title: '电站电压等级' },
|
||||
{ field: 'timerName', title: '接入母线' },
|
||||
{ field: 'timerName', title: '接入电压等级' },
|
||||
{ field: 'timerName', title: '供电设备容量(MVA)' },
|
||||
{ field: 'timerName', title: '最小短路容量(MVA)' },
|
||||
{ field: 'timerName', title: '用户协议容量(MVA)' },
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
width: '220',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
|
||||
click: async row => {}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '查看',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
|
||||
click: async row => {}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
// 格式化 cron 表达式
|
||||
tableStore.table.data = []
|
||||
}
|
||||
})
|
||||
tableStore.table.params.searchValue = ''
|
||||
tableStore.table.params.searchState = ''
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
17
src/views/pqs/runManage/assessment/index.vue
Normal file
17
src/views/pqs/runManage/assessment/index.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="评估用户维护"><User /></el-tab-pane>
|
||||
<el-tab-pane label="用户二级评估">用户二级评估</el-tab-pane>
|
||||
<el-tab-pane label="参数字典维护">参数字典维护</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'runManage/assessment'
|
||||
})
|
||||
import User from '@/views/pqs/runManage/assessment/components/uese/index.vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
179
src/views/pqs/runManage/cleaning/components/anomalyDetails.vue
Normal file
179
src/views/pqs/runManage/cleaning/components/anomalyDetails.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<el-dialog draggable width="1300px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<div style="display: flex">
|
||||
<el-tabs v-model="activeName" type="border-card" class="mr10" style="width: 450px">
|
||||
<el-tab-pane label="异常监测点详情" name="first">
|
||||
<div :style="height">
|
||||
<vxe-table height="auto" :data="TableData" v-bind="defaultAttribute">
|
||||
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
|
||||
<vxe-column field="time" title="日期">
|
||||
<template #default="{ row }">
|
||||
<span class="time">{{ row.time }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="name" title="监测点名称" width="120px"></vxe-column>
|
||||
<vxe-column field="fz" title="异常时间(分钟)" width="80px"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-tabs v-model="activeName" type="border-card" style="width: 820px">
|
||||
<el-tab-pane :label="`变电站1 > 测试监测点1_异常指标详情`" name="first">
|
||||
<div :style="height">
|
||||
<vxe-table height="auto" :data="TableData1" v-bind="defaultAttribute">
|
||||
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
|
||||
<vxe-column field="time" title="时间" min-width="120px"></vxe-column>
|
||||
<vxe-column field="indexType" title="指标类型" min-width="100px"></vxe-column>
|
||||
<vxe-column field="phase" title="相别" width="60px"></vxe-column>
|
||||
<vxe-column field="range" title="合理范围" min-width="60px"></vxe-column>
|
||||
<vxe-column field="max" title="最大" width="60px"></vxe-column>
|
||||
<vxe-column field="min" title="最小" width="60px"></vxe-column>
|
||||
<vxe-column field="average" title="平均" width="60px"></vxe-column>
|
||||
<vxe-column field="cp95" title="CP95" width="60px"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
const dialogVisible = ref(false)
|
||||
const height = mainHeight(10, 2)
|
||||
const title = ref('')
|
||||
const activeName = 'first'
|
||||
const TableData = ref([
|
||||
{
|
||||
time: '2025-01-01',
|
||||
name: '测试监测点1',
|
||||
fz: 100
|
||||
},
|
||||
{
|
||||
time: '2025-01-01',
|
||||
name: '测试监测点2',
|
||||
fz: 100
|
||||
},
|
||||
{
|
||||
time: '2025-01-01',
|
||||
name: '测试监测点3',
|
||||
fz: 100
|
||||
},
|
||||
{
|
||||
time: '2025-01-01',
|
||||
name: '测试监测点4',
|
||||
fz: 100
|
||||
}
|
||||
])
|
||||
const TableData1 = ref([
|
||||
{
|
||||
num: 1,
|
||||
time: '2025/01/01 11:10:00',
|
||||
indexType: '频率',
|
||||
phase: 'T',
|
||||
range: '42.5~57.5',
|
||||
max: '/',
|
||||
min: '/',
|
||||
average: 60,
|
||||
cp95: '/'
|
||||
},
|
||||
{
|
||||
num: 2,
|
||||
time: '2025/01/01 11:20:00',
|
||||
indexType: '频率',
|
||||
phase: 'T',
|
||||
range: '42.5~57.5',
|
||||
max: '/',
|
||||
min: '/',
|
||||
average: 60,
|
||||
cp95: '/'
|
||||
},
|
||||
{
|
||||
num: 3,
|
||||
time: '2025/01/01 11:30:00',
|
||||
indexType: '频率',
|
||||
phase: 'T',
|
||||
range: '42.5~57.5',
|
||||
max: 65,
|
||||
min: 60,
|
||||
average: 62,
|
||||
cp95: 61
|
||||
},
|
||||
{
|
||||
num: 4,
|
||||
time: '2025/01/01 11:40:00',
|
||||
indexType: '频率',
|
||||
phase: 'T',
|
||||
range: '42.5~57.5',
|
||||
max: 65,
|
||||
min: 60,
|
||||
average: 62,
|
||||
cp95: 61
|
||||
},
|
||||
{
|
||||
num: 5,
|
||||
time: '2025/01/01 11:50:00',
|
||||
indexType: '相电压',
|
||||
phase: 'A',
|
||||
range: '42.5~57.5',
|
||||
max: '/',
|
||||
min: 290,
|
||||
average: '/',
|
||||
cp95: '/'
|
||||
},
|
||||
{
|
||||
num: 6,
|
||||
time: '2025/01/01 12:10:00',
|
||||
indexType: '相电压',
|
||||
phase: 'B',
|
||||
range: '42.5~57.5',
|
||||
max: 220,
|
||||
min: 290,
|
||||
average: 220,
|
||||
cp95: 220
|
||||
},
|
||||
{
|
||||
num: 7,
|
||||
time: '2025/01/01 12:20:00',
|
||||
indexType: '相电压',
|
||||
phase: 'C',
|
||||
range: '42.5~57.5',
|
||||
max: '/',
|
||||
min: 290,
|
||||
average: '/',
|
||||
cp95: '/'
|
||||
},
|
||||
{
|
||||
num: 8,
|
||||
time: '2025/01/01 12:30:00',
|
||||
indexType: '相电压',
|
||||
phase: 'A',
|
||||
range: '42.5~57.5',
|
||||
max: 220,
|
||||
min: 290,
|
||||
average: 220,
|
||||
cp95: 220
|
||||
}
|
||||
])
|
||||
|
||||
const open = (data: anyObj) => {
|
||||
title.value = data.name + '_异常详情展示'
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.time {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
</style>
|
||||
720
src/views/pqs/runManage/cleaning/index.vue
Normal file
720
src/views/pqs/runManage/cleaning/index.vue
Normal file
@@ -0,0 +1,720 @@
|
||||
<!--业务用户管理界面-->
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader date-picker>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="对象类型">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.supvObjType"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
placeholder="请选择对象类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in supvObjTypeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-radio-group v-model="tableStore.table.params.radio">
|
||||
<el-radio-button label="异常数据" value="1" />
|
||||
<el-radio-button label="告警数据" value="2" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-slot:operation></template>
|
||||
</TableHeader>
|
||||
<div class="card-list pd10">
|
||||
<div class="monitoringPoints">
|
||||
<el-card style="height: 140px">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>监测点统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="statistics">
|
||||
<div class="divBox">
|
||||
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
|
||||
<span class="divBox_title">总数</span>
|
||||
<span class="divBox_num" style="color: #57bc6e">400</span>
|
||||
</div>
|
||||
<div class="divBox" style="width: 190px">
|
||||
<span class="iconfont icon-igw-f-warning-data" style="color: #fca955"></span>
|
||||
<span class="divBox_title">异常监测点</span>
|
||||
<span class="divBox_num" style="color: #fca955">200</span>
|
||||
</div>
|
||||
<div class="divBox">
|
||||
<span class="iconfont icon-shouruzhanbi" style="color: #06b6a9"></span>
|
||||
<span class="divBox_title">占比</span>
|
||||
<span class="divBox_num" style="color: #06b6a9">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <MyEchart :options="finish" style="height: 230px"></MyEchart> -->
|
||||
</el-card>
|
||||
<el-card class="mt10">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>异常指标统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="header">
|
||||
<span style="width: 180px; text-align: left">指标名称</span>
|
||||
<span style="flex: 1">合理范围</span>
|
||||
<span style="width: 100px">异常测点</span>
|
||||
</div>
|
||||
<div :style="indicatorHeight" style="overflow-y: auto">
|
||||
<div v-for="o in abnormal" class="abnormal mb10">
|
||||
<span style="width: 180px; height: 24px">
|
||||
<span
|
||||
class="iconFont iconfont icon-yichang"
|
||||
:style="{ color: o.quantity > 0 ? '#ff9800' : '' }"
|
||||
></span>
|
||||
{{ o.name }}
|
||||
</span>
|
||||
<span style="flex: 1; text-align: center">
|
||||
<!-- 合理范围： -->
|
||||
<span style="color: #388e3c" class="text">{{ o.range }}</span>
|
||||
{{ o.unit }}
|
||||
</span>
|
||||
<span style="width: 100px; text-align: center">
|
||||
<span
|
||||
style="color: #ff9800; cursor: pointer; text-decoration: underline"
|
||||
class="text"
|
||||
@click="quantityClick(o)"
|
||||
>
|
||||
{{ o.quantity }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card class="detail ml10" :style="pageHeight">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>异常详情统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height: 350px">
|
||||
<MyEchart :options="options"></MyEchart>
|
||||
</div>
|
||||
<el-form :inline="true" class="form">
|
||||
<el-form-item label="告警持续天数"></el-form-item>
|
||||
<el-form-item label="告警阀值(天)">
|
||||
<el-input-number v-model="tableStore.table.params.alarm" :min="0" :step="1" step-strictly />
|
||||
</el-form-item>
|
||||
<el-form-item label="预警阀值(天)">
|
||||
<el-input-number
|
||||
v-model="tableStore.table.params.earlyWarning"
|
||||
:min="0"
|
||||
:step="1"
|
||||
step-strictly
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="form_but">
|
||||
<el-button type="primary" icon="el-icon-Refresh">更新</el-button>
|
||||
<el-button type="primary" icon="el-icon-Download">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!--表格-->
|
||||
<Table ref="tableRef"></Table>
|
||||
</el-card>
|
||||
</div>
|
||||
<anomalyDetails ref="anomalyDetailsRef" />
|
||||
</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 { deleteDeploy } from '@/api/process-boot/bpm'
|
||||
import { onMounted, provide, ref } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { CaretRight } from '@element-plus/icons-vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import anomalyDetails from './components/anomalyDetails.vue'
|
||||
defineOptions({
|
||||
name: 'runManage/cleaning'
|
||||
})
|
||||
const anomalyDetailsRef = ref()
|
||||
const dictData = useDictData()
|
||||
//字典获取监督对象类型
|
||||
const supvObjTypeList = dictData.getBasicData('supv_obj_type')
|
||||
const pageHeight = mainHeight(105)
|
||||
const indicatorHeight = mainHeight(352)
|
||||
const tableRef = ref()
|
||||
const abnormal = ref([
|
||||
{
|
||||
name: '频率',
|
||||
range: '42.5~57.5',
|
||||
unit: '',
|
||||
quantity: 11
|
||||
},
|
||||
{
|
||||
name: '频率偏差',
|
||||
range: '-7.5~7.5',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '相（线）电压有效值',
|
||||
range: '0~150%U',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压偏差',
|
||||
range: '-20%~20%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电流有效值',
|
||||
range: '大于CT一次变比',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '单相功率因数',
|
||||
range: '-1~1',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '单相基波功率因数',
|
||||
range: '-1~1',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '三相功率因数',
|
||||
range: '-1~1',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '基波功率因数',
|
||||
range: '-1~1',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压总谐波畸变率',
|
||||
range: '0~30%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '相（线）电压基波有效值',
|
||||
range: '0~150%U',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '相（线）电压基波相角',
|
||||
range: '-180~180',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '谐波电压含有率',
|
||||
range: '0~30%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '谐波电压相角',
|
||||
range: '-180~180',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '间谐波电压含有率',
|
||||
range: '0~30%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '正序、负序和零序电压',
|
||||
range: '0~150%U',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '负序电压不平衡度',
|
||||
range: '0~40%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '零序电压不平衡度',
|
||||
range: '0~40%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压波动',
|
||||
range: '0~40%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '短时间闪变值',
|
||||
range: '0~20',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '长时间闪变值',
|
||||
range: '0~20',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压暂降特征幅值',
|
||||
range: '0~90%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
},
|
||||
{
|
||||
name: '电压暂升特征幅值',
|
||||
range: '110%~180%',
|
||||
unit: '',
|
||||
quantity: 0
|
||||
}
|
||||
])
|
||||
const tableStore = new TableStore({
|
||||
url: '/user-boot/user/getAllUserSimpleList',
|
||||
method: 'GET',
|
||||
isWebPaging: true,
|
||||
showPage: false,
|
||||
publicHeight: 480,
|
||||
column: [
|
||||
{ title: '序号', width: 80 },
|
||||
{
|
||||
title: '监测点名称',
|
||||
field: 'name',
|
||||
type: 'html',
|
||||
formatter: (row, column) => {
|
||||
return `<div class="table_name">${row.cellValue}</div>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '所属终端名称',
|
||||
field: 'name1',
|
||||
type: 'html',
|
||||
formatter: (row, column) => {
|
||||
return `<div class="table_name">${row.cellValue}</div>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '所属电站',
|
||||
field: 'name2',
|
||||
type: 'html',
|
||||
formatter: (row, column) => {
|
||||
return `<div class="table_name">${row.cellValue}</div>`
|
||||
}
|
||||
},
|
||||
{ title: '监测对象类型', field: 'name3' },
|
||||
{ title: '监测对象名称', field: 'name4' },
|
||||
{ title: '电压等级', field: 'name5' },
|
||||
{
|
||||
title: '异常天数',
|
||||
field: 'name6',
|
||||
type: 'html',
|
||||
formatter: (row, column) => {
|
||||
return `<div class="table_name">${row.cellValue}</div>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '严重度',
|
||||
field: 'name7',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
1: 'danger'
|
||||
},
|
||||
|
||||
replaceValue: {
|
||||
0: '预警',
|
||||
1: '告警'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '120',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '工单',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: row => {}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
tableStore.table.data = [
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '0'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '1'
|
||||
},
|
||||
{
|
||||
name: '测试监测点1',
|
||||
name1: '025875',
|
||||
name2: '测试变电站',
|
||||
name3: '测试光伏电站',
|
||||
name4: '测试光伏电站',
|
||||
name5: '110',
|
||||
name6: '1',
|
||||
name7: '1'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
var getvalue = 90
|
||||
const options = ref({
|
||||
title: {
|
||||
text: '监测点异常情况(2025-03-01~2025-03-10)'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
name: '时间',
|
||||
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
|
||||
data: ['03-01', '03-02', '03-03', '03-04', '03-05', '03-06', '03-07', '03-08', '03-09', '03-10']
|
||||
},
|
||||
yAxis: {
|
||||
name: '数量' // 给X轴加单位
|
||||
},
|
||||
grid: {},
|
||||
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '告警监测点数量',
|
||||
type: 'bar',
|
||||
|
||||
data: [11, 11, 11, 11, 0, 0, 0, 0, 0, 0]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
const finish = ref({
|
||||
options: {
|
||||
toolbox: null,
|
||||
dataZoom: null,
|
||||
angleAxis: {
|
||||
show: false,
|
||||
max: 155, //-45度到225度，二者偏移值是270度除360度
|
||||
type: 'value',
|
||||
startAngle: 205, //极坐标初始角度
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
radiusAxis: {
|
||||
show: false,
|
||||
type: 'category'
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
//圆环位置和大小
|
||||
polar: {
|
||||
center: ['70%', '60%'],
|
||||
radius: '180%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: [
|
||||
{
|
||||
//上层圆环，显示数据
|
||||
value: getvalue
|
||||
}
|
||||
],
|
||||
barGap: '-100%', //柱间距离,上下两层圆环重合
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true, //顶端圆角
|
||||
z: 3 //圆环层级，同zindex
|
||||
},
|
||||
{
|
||||
//下层圆环，显示最大值
|
||||
type: 'bar',
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#ccc',
|
||||
opacity: 1,
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
],
|
||||
barGap: '-100%',
|
||||
coordinateSystem: 'polar',
|
||||
roundCap: true,
|
||||
z: 1
|
||||
},
|
||||
//仪表盘
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 225, //起始角度，同极坐标
|
||||
endAngle: -45, //终止角度，同极坐标
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
// 分隔线
|
||||
shadowColor: 'auto', //默认透明
|
||||
shadowBlur: 5,
|
||||
length: '50%',
|
||||
width: '2',
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#1598FF',
|
||||
borderColor: '#1598FF',
|
||||
borderWidth: 6
|
||||
},
|
||||
detail: {
|
||||
formatter: function (params) {
|
||||
return `{wcl|占比\n}{number|${getvalue + '%'}}`
|
||||
},
|
||||
rich: {
|
||||
number: {
|
||||
fontSize: 25,
|
||||
textAlign: 'center',
|
||||
color: '#000'
|
||||
},
|
||||
wcl: {
|
||||
fontSize: 16,
|
||||
textAlign: 'center',
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
color: '#000',
|
||||
lineHeight: 30,
|
||||
offsetCenter: ['0', '0']
|
||||
},
|
||||
center: ['70%', '60%'],
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: getvalue
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
tableStore.table.params.radio = '1'
|
||||
tableStore.table.params.alarm = 5
|
||||
tableStore.table.params.earlyWarning = 1
|
||||
|
||||
const quantityClick = (e: any) => {
|
||||
anomalyDetailsRef.value.open(e)
|
||||
}
|
||||
onMounted(() => {
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
tableStore.table.params.name = ''
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
display: flex;
|
||||
.monitoringPoints {
|
||||
width: 560px;
|
||||
position: relative;
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.divBox {
|
||||
margin: 0 10px 10px 0;
|
||||
width: 160px;
|
||||
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;
|
||||
|
||||
.text {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
|
||||
// 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-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user