数据方案一级页面联调
This commit is contained in:
zhujiyan
71
src/api/cs-device-boot/planData.ts
Normal file
71
src/api/cs-device-boot/planData.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import createAxios from '@/utils/request'
|
||||
|
||||
// 方案列表
|
||||
export function getSchemeTree() {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/wlRecord/schemeTree',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 根据方案查询测试项信息
|
||||
export function getTestRecordInfo(id:any) {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/wlRecord/getTestRecordById?testRecordId='+id,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
//新增修改方案
|
||||
export function addPlan(data:any) {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/wlRecord/updateSchemeRecord',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//新增测试项
|
||||
export function addRecord(data:any) {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/wlRecord/addRecord',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//新增测试项
|
||||
export function updateRecord(data:any) {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/wlRecord/updateTestRecord',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//删除方案或测试项
|
||||
export function delRecord(data:any) {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/wlRecord/deleteRecord?id='+data.id,
|
||||
method: 'DELETE',
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//查询历史趋势折线图
|
||||
export function getHistoryTrend(data:any) {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/wlRecord/queryCommonStatisticalByTest',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//查询设备列表
|
||||
export function getDeviceList(data:any) {
|
||||
return createAxios({
|
||||
url: '/cs-device-boot/wlRecord/queryPage',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -52,7 +52,7 @@ const initChart = () => {
|
||||
},
|
||||
// textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
fontStyle: '14px',
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
// },
|
||||
@@ -180,9 +180,9 @@ const handlerXAxis = () => {
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
// lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
// }
|
||||
},
|
||||
axisLabel: {
|
||||
// textStyle: {
|
||||
|
||||
@@ -116,7 +116,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { VxeTableInstance } from 'vxe-table'
|
||||
|
||||
import { getDeviceList } from '@/api/cs-device-boot/planData'
|
||||
interface RowVO {
|
||||
id: number
|
||||
name: string
|
||||
@@ -211,7 +211,11 @@ const editRowEvent = (row: RowVO) => {
|
||||
$table.setEditRow(row)
|
||||
}
|
||||
}
|
||||
|
||||
const getList = (id: any) => {
|
||||
getDeviceList({ id: id }).then(res => {
|
||||
console.log(res, '查询列表')
|
||||
})
|
||||
}
|
||||
const saveRowEvent = (row: RowVO) => {
|
||||
// const $table = tableRef.value
|
||||
// if ($table) {
|
||||
@@ -267,9 +271,10 @@ const submit = () => {
|
||||
console.log(6666)
|
||||
}
|
||||
const close = () => {
|
||||
dialogVisible.value = false;
|
||||
dialogVisible.value = false
|
||||
checkTableRef.value.clearCheckboxRow()
|
||||
}
|
||||
defineExpose({ getList })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.table {
|
||||
|
||||
417
src/views/govern/terminal/planData/components/popup.vue
Normal file
417
src/views/govern/terminal/planData/components/popup.vue
Normal file
@@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="cn-operate-dialog device-manage-popup"
|
||||
v-model="dialogVisible"
|
||||
:title="title"
|
||||
draggable
|
||||
:style="{ width: activeFormIndex == 0 || activeFormIndex == 1 ? '500px' : '65%' }"
|
||||
>
|
||||
<el-form
|
||||
:model="form"
|
||||
scroll-to-error
|
||||
:class="activeFormIndex == 0 || activeFormIndex == 1 ? 'form-one' : 'form-two'"
|
||||
label-width="120px"
|
||||
>
|
||||
<!-- 新增方案数据 -->
|
||||
<el-form-item label="方案名称：" v-if="activeFormIndex == 0 || activeFormIndex == 1">
|
||||
<el-input v-model="form.itemName" placeholder="请输入方案名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="方案描述：" v-if="activeFormIndex == 0 || activeFormIndex == 1">
|
||||
<el-input v-model="form.describe" placeholder="请输入方案描述" />
|
||||
</el-form-item>
|
||||
<!-- 新增/修改测试项数据 多个循环处理 -->
|
||||
<div v-if="activeFormIndex == 2 || activeFormIndex == 3">
|
||||
<div class="form-two monitor" v-for="(item, index) in form?.records" :key="index">
|
||||
<div class="monitor_add">
|
||||
<el-button
|
||||
v-if="index == 0 && activeFormIndex == 2"
|
||||
:icon="Plus"
|
||||
circle
|
||||
@click="handleAddMointor"
|
||||
></el-button>
|
||||
<el-button
|
||||
v-if="index != 0 && activeFormIndex == 2"
|
||||
:icon="Minus"
|
||||
circle
|
||||
@click="handleDelMointor(index)"
|
||||
></el-button>
|
||||
</div>
|
||||
<el-divider content-position="left" v-if="activeFormIndex.value == 2">
|
||||
测试项信息{{ index + 1 }}
|
||||
</el-divider>
|
||||
<el-form-item label="测试项名称：">
|
||||
<el-input v-model="item.itemName" placeholder="请输入测试项名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="测量间隔：">
|
||||
<el-input v-model="item.statisticalInterval" placeholder="请输入测量间隔" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电压等级：">
|
||||
<el-select
|
||||
v-model="item.voltageLevel"
|
||||
placeholder="请选择电压等级"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in voltageLevelList"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="接线方式：">
|
||||
<el-select v-model="item.volConType" placeholder="请选择接线方式" clearable style="width: 100%">
|
||||
<el-option
|
||||
v-for="(item, index) in volConTypeList"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="最小短路容量：">
|
||||
<el-input
|
||||
v-model="item.capacitySscmin"
|
||||
oninput="value=value.replace(/[^\-?\d.]/g,'')
|
||||
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
|
||||
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
|
||||
autocomplete="off"
|
||||
placeholder="请选择最小短路容量"
|
||||
>
|
||||
<template #append>MVA</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户协议容量：">
|
||||
<el-input
|
||||
v-model="item.capacitySi"
|
||||
autocomplete="off"
|
||||
oninput="value=value.replace(/[^\-?\d.]/g,'')
|
||||
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
|
||||
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
|
||||
placeholder="请输入用户协议容量"
|
||||
>
|
||||
<template #append>MVA</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="基准短路容量：">
|
||||
<el-input
|
||||
v-model="item.capacitySscb"
|
||||
oninput="value=value.replace(/[^\-?\d.]/g,'')
|
||||
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
|
||||
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
|
||||
placeholder="请输入基准短路容量"
|
||||
>
|
||||
<template #append>MVA</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="供电设备容量：">
|
||||
<el-input
|
||||
v-model="item.capacitySt"
|
||||
oninput="value=value.replace(/[^\-?\d.]/g,'')
|
||||
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
|
||||
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
|
||||
placeholder="请输入供电设备容量"
|
||||
>
|
||||
<template #append>MVA</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="PT变比：" prop="pt">
|
||||
<el-input
|
||||
v-model="item.pt"
|
||||
autocomplete="off"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
placeholder="请输入PT变比"
|
||||
/>
|
||||
<!-- <el-input
|
||||
style="width: 48%"
|
||||
v-model="item.pt1"
|
||||
autocomplete="off"
|
||||
placeholder="请输入PT变比"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
/>
|
||||
<el-input
|
||||
style="width: 48%"
|
||||
v-model="item.pt2"
|
||||
autocomplete="off"
|
||||
placeholder="请输入PT变比"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
/> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="CT变比：" prop="ct">
|
||||
<el-input
|
||||
v-model="item.ct"
|
||||
autocomplete="off"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
placeholder="请输入CT变比"
|
||||
/>
|
||||
<!-- <el-input
|
||||
v-model="item.ct1"
|
||||
style="width: 48%"
|
||||
autocomplete="off"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
placeholder="请输入CT变比"
|
||||
/>
|
||||
<el-input
|
||||
v-model="item.ct2"
|
||||
style="width: 48%"
|
||||
autocomplete="off"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
placeholder="请输入CT变比"
|
||||
/> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="监测位置：">
|
||||
<el-input v-model="item.location" placeholder="请输入监测位置" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<!-- 设备信息列表 -->
|
||||
<div v-show="activeFormIndex == 6" style="height: 400px">
|
||||
<deviceInfo ref="deviceRef" />
|
||||
</div>
|
||||
<template #footer="">
|
||||
<el-button @click="close">取 消</el-button>
|
||||
<el-button type="primary" @click="submit">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject, defineEmits } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus, Minus, Message } from '@element-plus/icons-vue'
|
||||
import deviceInfo from './deviceInfo.vue'
|
||||
import { addPlan, addRecord, updateRecord, getDeviceList } from '@/api/cs-device-boot/planData'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
const dialogVisible = ref(false)
|
||||
const voltageLevelList = dictData.getBasicData('Dev_Voltage')
|
||||
const volConTypeList = dictData.getBasicData('Dev_Connect')
|
||||
const emit = defineEmits(['onSubmit'])
|
||||
const form = ref({})
|
||||
form.value = {
|
||||
index: '',
|
||||
type: '',
|
||||
itemName: '', //方案名称
|
||||
describe: '', //方案描述
|
||||
//测试项数据
|
||||
records: [
|
||||
{
|
||||
itemName: '', //测试项名称
|
||||
statisticalInterval: '', //测量间隔
|
||||
voltageLevel: voltageLevelList[0].id, //电压等级
|
||||
volConType: volConTypeList[0].id, //接线方式
|
||||
capacitySscmin: null, //最小短路容量
|
||||
capacitySi: null, //用户协议容量
|
||||
capacitySscb: null, //基准短路容量
|
||||
capacitySt: null, //供电设备容量
|
||||
// pt1: 1, //pt变比1
|
||||
// pt2: 1, //pt变比2
|
||||
// ct1: 300, //ct变比1
|
||||
// ct2: 5, //ct变比2
|
||||
ct: 1,
|
||||
pt: 1,
|
||||
location: '' //监测位置
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const title: any = ref('')
|
||||
const activeFormIndex: any = ref(null)
|
||||
const planId: any = ref('')
|
||||
const deviceRef: any = ref(null)
|
||||
const details=(val:any)=>{
|
||||
form.value=val
|
||||
}
|
||||
// 0 新增方案 1 修改方案 2 新增测试项 3 修改测试项 4 删除方案 5 删除测试项 6 设备信息
|
||||
const open = (val: any, id: any) => {
|
||||
activeFormIndex.value = val
|
||||
title.value =
|
||||
val == 0
|
||||
? '新增方案'
|
||||
: val == 1
|
||||
? '修改方案'
|
||||
: val == 2
|
||||
? '新增测试项'
|
||||
: val == 3
|
||||
? '修改测试项'
|
||||
: val == 4
|
||||
? '删除方案'
|
||||
: val == 5
|
||||
? '删除测试项'
|
||||
: '设备信息'
|
||||
dialogVisible.value = true
|
||||
planId.value = id
|
||||
//数据回显
|
||||
if (val == 0 || val == 2) {
|
||||
form.value = {
|
||||
itemName: row.itemName, //方案名称
|
||||
describe: row.describe, //方案描述
|
||||
//测试项数据
|
||||
records: [
|
||||
{
|
||||
itemName: '', //测试项名称
|
||||
statisticalInterval: '', //测量间隔
|
||||
voltageLevel: voltageLevelList[0].id, //电压等级
|
||||
volConType: volConTypeList[0].id, //接线方式
|
||||
capacitySscmin: '', //最小短路容量
|
||||
capacitySi: '', //用户协议容量
|
||||
capacitySscb: '', //基准短路容量
|
||||
capacitySt: '', //供电设备容量
|
||||
pt: 1, //pt变比1
|
||||
ct: 1, //pt变比2
|
||||
// pt1: 1, //pt变比1
|
||||
// pt2: 1, //pt变比2
|
||||
// ct1: 300, //ct变比1
|
||||
// ct2: 5, //ct变比2
|
||||
location: '' //监测位置
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
if (val == 1 || val == 3) {
|
||||
|
||||
}
|
||||
if (val == 6) {
|
||||
//1 列表 0树
|
||||
getDeviceList({ id: id ,isTrueFlag:0,pageNum:1,pageSize:200}).then(res => {
|
||||
console.log(res, '查询列表')
|
||||
})
|
||||
}
|
||||
}
|
||||
//添加测试项
|
||||
const handleAddMointor = () => {
|
||||
form.value.records = [
|
||||
{
|
||||
itemName: '', //测试项名称
|
||||
statisticalInterval: '', //测量间隔
|
||||
voltageLevel: voltageLevelList[0].id, //电压等级
|
||||
volConType: volConTypeList[0].id, //接线方式
|
||||
capacitySscmin: '', //最小短路容量
|
||||
capacitySi: '', //用户协议容量
|
||||
capacitySscb: '', //基准短路容量
|
||||
capacitySt: '', //供电设备容量
|
||||
// pt1: 1, //pt变比1
|
||||
// pt2: 1, //pt变比2
|
||||
// ct1: 300, //ct变比1
|
||||
// ct2: 5, //ct变比2
|
||||
ct: 1,
|
||||
pt: 1,
|
||||
location: '' //监测位置
|
||||
},
|
||||
...form.value.records
|
||||
]
|
||||
}
|
||||
//移除测试项
|
||||
const handleDelMointor = index => {
|
||||
form.value.records.splice(index, 1)
|
||||
}
|
||||
//关闭
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
form.value = {
|
||||
index: '',
|
||||
type: '',
|
||||
itemName: '', //方案名称
|
||||
describe: '', //方案描述
|
||||
//测试项数据
|
||||
records: [
|
||||
{
|
||||
itemName: '', //测试项名称
|
||||
statisticalInterval: '', //测量间隔
|
||||
voltageLevel: voltageLevelList[0].id, //电压等级
|
||||
volConType: volConTypeList[0].id, //接线方式
|
||||
capacitySscmin: '', //最小短路容量
|
||||
capacitySi: '', //用户协议容量
|
||||
capacitySscb: '', //基准短路容量
|
||||
capacitySt: '', //供电设备容量
|
||||
pt: 1, //pt变比1
|
||||
ct: 1, //pt变比2
|
||||
// pt1: 1, //pt变比1
|
||||
// pt2: 1, //pt变比2
|
||||
// ct1: 300, //ct变比1
|
||||
// ct2: 5, //ct变比2
|
||||
location: '' //监测位置
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
//提交
|
||||
const submit = () => {
|
||||
//新增方案
|
||||
if (activeFormIndex.value == 0) {
|
||||
const subForm = {
|
||||
itemName: form.value.itemName,
|
||||
describe: form.value.describe
|
||||
}
|
||||
addPlan(subForm).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('新增方案成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
}
|
||||
})
|
||||
}
|
||||
//修改方案
|
||||
if (activeFormIndex.value == 1) {
|
||||
const subForm = {
|
||||
id: planId.value,
|
||||
itemName: form.value.itemName,
|
||||
describe: form.value.describe
|
||||
}
|
||||
addPlan(subForm).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('修改方案成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
}
|
||||
})
|
||||
}
|
||||
//新增测试项
|
||||
if (activeFormIndex.value == 2) {
|
||||
const subForm = form.value
|
||||
subForm.id = planId.value
|
||||
addRecord(subForm).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('新增测试项成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
}
|
||||
})
|
||||
}
|
||||
//修改测试项
|
||||
if (activeFormIndex.value == 3) {
|
||||
const subForm = form.value.records[0]
|
||||
subForm.id = planId.value
|
||||
updateRecord(subForm).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('修改测试项成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
defineExpose({ open ,details})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-form-item__content {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
::v-deep .el-select {
|
||||
width: 100% !important;
|
||||
}
|
||||
.monitor {
|
||||
position: relative;
|
||||
padding: 10px 50px;
|
||||
.monitor_add {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
270
src/views/govern/terminal/planData/components/schemeTree.vue
Normal file
270
src/views/govern/terminal/planData/components/schemeTree.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :style="{ width: menuCollapse ? '40px' : '280px' }" style="transition: all 0.3s; overflow: hidden">
|
||||
<Icon
|
||||
v-show="menuCollapse"
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
class="fold ml10 mt20 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<el-input v-model="filterText" placeholder="请输入内容" clearable>
|
||||
<template #prefix>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
<Icon
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
class="fold ml10 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
v-if="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="add_plan">
|
||||
<el-button size="small" type="primary" @click="handleOpen(0, '')">新增方案</el-button>
|
||||
</div>
|
||||
<el-tree
|
||||
style="flex: 1; overflow: auto"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
v-bind="$attrs"
|
||||
default-expand-all
|
||||
:data="tree"
|
||||
ref="treRef"
|
||||
@node-click="clickNode"
|
||||
:expand-on-click-node="false"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<div class="left">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
/>
|
||||
{{ node.label }}
|
||||
</div>
|
||||
<div class="right">
|
||||
<a :style="{ marginRight: '0.5rem' }" v-if="data.children">
|
||||
<el-icon :style="{ color: '#0000FF' }">
|
||||
<Plus @click="add(node, data)" />
|
||||
</el-icon>
|
||||
</a>
|
||||
<a :style="{ marginRight: '0.5rem' }">
|
||||
<el-icon :style="{ color: '#DA3434' }">
|
||||
<Delete @click="del(node, data)" />
|
||||
</el-icon>
|
||||
</a>
|
||||
<a :style="{ marginRight: '0.5rem' }">
|
||||
<el-icon :style="{ color: '#0000FF' }">
|
||||
<Edit @click="edit(node, data)" />
|
||||
</el-icon>
|
||||
</a>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
<popup ref="dialogRef" @onSubmit="getTreeList"></popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, watch, defineProps, defineEmits, inject, onMounted } from 'vue'
|
||||
import { getSchemeTree } from '@/api/cs-device-boot/planData'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
|
||||
import { delRecord } from '@/api/cs-device-boot/planData'
|
||||
import popup from './popup.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
defineOptions({
|
||||
name: 'govern/schemeTree'
|
||||
})
|
||||
interface Props {
|
||||
width?: string
|
||||
canExpand?: boolean
|
||||
}
|
||||
|
||||
const { proxy } = useCurrentInstance()
|
||||
const menuCollapse = ref(false)
|
||||
const filterText = ref('')
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
watch(filterText, val => {
|
||||
treeRef.value!.filter(val)
|
||||
})
|
||||
const onMenuCollapse = () => {
|
||||
menuCollapse.value = !menuCollapse.value
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
const filterNode = (value: string, data: any) => {
|
||||
if (!value) return true
|
||||
return data.name.includes(value)
|
||||
}
|
||||
|
||||
/** 树形结构数据 */
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
showCheckbox?: boolean
|
||||
defaultCheckedKeys?: any
|
||||
}>(),
|
||||
{
|
||||
showCheckbox: false,
|
||||
defaultCheckedKeys: []
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode'])
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const treRef = ref()
|
||||
//获取方案树形数据
|
||||
const getTreeList = () => {
|
||||
getSchemeTree().then(res => {
|
||||
let arr: any[] = []
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
arr.push(item2)
|
||||
})
|
||||
})
|
||||
tree.value = res.data
|
||||
planId.value = res.data[0]?.id
|
||||
nextTick(() => {
|
||||
if (arr.length) {
|
||||
treRef.value.setCurrentKey(arr[0].id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr[0]
|
||||
})
|
||||
} else {
|
||||
emit('init')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
getTreeList()
|
||||
const dialogRef = ref()
|
||||
|
||||
const handleOpen = (val: any, id: any) => {
|
||||
dialogRef.value.open(val, id)
|
||||
}
|
||||
const planId: any = ref('')
|
||||
const planData: any = ref({})
|
||||
const getPlanData = (row: any) => {
|
||||
planData.value = {}
|
||||
planData.value = JSON.parse(JSON.stringify(row))
|
||||
}
|
||||
// const getPlanId = (id: any) => {
|
||||
// planId.value = id;
|
||||
// }
|
||||
/** 添加树节点 */
|
||||
// 0 新增方案 1 修改方案 2 新增测试项 3 修改测试项 4 删除方案 5 删除测试项 6 设备信息
|
||||
const add = (node: any, data: any) => {
|
||||
planId.value = data.id
|
||||
//添加测试项
|
||||
if (data.children) {
|
||||
handleOpen(2, planId.value)
|
||||
}
|
||||
}
|
||||
/** 编辑树节点 */
|
||||
const edit = async (node: Node, data: any) => {
|
||||
planId.value = data.id
|
||||
//修改方案
|
||||
if (data.children) {
|
||||
await handleOpen(1, planId.value)
|
||||
}
|
||||
//修改测试项
|
||||
else {
|
||||
await handleOpen(3, planId.value)
|
||||
}
|
||||
}
|
||||
/** 删除树节点 */
|
||||
const del = (node: Node, data: any) => {
|
||||
planId.value = data.id
|
||||
//删除方案/测试项
|
||||
delRecord({ id: planId.value }).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('删除成功')
|
||||
getTreeList()
|
||||
}
|
||||
})
|
||||
}
|
||||
const clickNode = (e: anyObj) => {
|
||||
planId.value = e.id
|
||||
emit('nodeChange', e)
|
||||
}
|
||||
watch(
|
||||
() => planData.value,
|
||||
(val, oldVal) => {
|
||||
if (val && dialogRef.value) {
|
||||
dialogRef.value.details(val)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
defineExpose({ treeRef, getPlanData })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.cn-tree {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
:deep(.el-tree) {
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||||
background-color: var(--el-color-primary-light-7);
|
||||
}
|
||||
|
||||
.menu-collapse {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
.ml10 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.add_plan {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.custom-tree-node {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@@ -1,68 +1,83 @@
|
||||
<template>
|
||||
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
|
||||
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
|
||||
<schemeTree @node-click="nodeClick" @init="nodeClick" @node-change="nodeClick" ref="schemeTreeRef"></schemeTree>
|
||||
<div class="device-manage-right" v-if="deviceData">
|
||||
<el-descriptions title="方案信息" class="mb10" :column="4" border>
|
||||
<template #extra>
|
||||
<el-button type="primary" size="small" icon="el-icon-Plus" @click="handleOpen(0)">
|
||||
<!-- <el-button type="primary" size="small" icon="el-icon-Plus" @click="handleOpen(0)">
|
||||
新增方案
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" icon="el-icon-Plus" @click="handleOpen(1)">
|
||||
</el-button> -->
|
||||
<!-- <el-button type="primary" size="small" icon="el-icon-Plus" @click="handleOpen(2)">
|
||||
新增测试项
|
||||
</el-button>
|
||||
</el-button> -->
|
||||
</template>
|
||||
<el-descriptions-item label="方案名称">
|
||||
{{ deviceData[0]?.name }}
|
||||
{{ deviceData.itemName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="方案描述">
|
||||
{{ echoName(deviceData[0]?.devType, devTypeOptions) }}
|
||||
{{ deviceData.describe ? deviceData.describe : '/' }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div class="monitor_info" v-if="deviceData.records && deviceData.records.length != 0">
|
||||
<div class="history_title">
|
||||
<p>测试项信息</p>
|
||||
</div>
|
||||
<el-tabs v-model="activeName" type="border-card">
|
||||
<el-tab-pane v-for="(item, index) in deviceData" :label="item.name+(index+1)" :name="index">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in deviceData.records"
|
||||
:label="item.itemName"
|
||||
:name="item.itemName"
|
||||
:key="index"
|
||||
>
|
||||
<el-descriptions class="mb10" :column="4" border>
|
||||
<el-descriptions-item label="测试项名称">
|
||||
{{ item.name+(index+1) }}
|
||||
<el-descriptions-item label="测试项名称" width="160">
|
||||
{{ item.itemName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="PT变比">
|
||||
{{ echoName(item.devType, devTypeOptions) }}
|
||||
<el-descriptions-item label="PT变比" width="160">
|
||||
{{ item.pt }}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="CT变比">
|
||||
{{ item.devAccessMethod }}
|
||||
<el-descriptions-item label="CT变比" width="160">
|
||||
{{ item.ct }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="统计间隔">
|
||||
{{ item.ndid }}
|
||||
<el-descriptions-item label="统计间隔" width="160">
|
||||
{{ item.statisticalInterval }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级">
|
||||
{{ echoName(item.devModel, devModelOptions) }}
|
||||
<el-descriptions-item label="电压等级" width="160">
|
||||
{{
|
||||
voltageLevelList.find(vv => {
|
||||
return vv.id == item.voltageLevel
|
||||
})?.name
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="接线方式">
|
||||
{{ item.time }}
|
||||
<el-descriptions-item label="接线方式" width="160">
|
||||
{{
|
||||
volConTypeList.find(vv => {
|
||||
return vv.id == item.volConType
|
||||
})?.name
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="起始时间">
|
||||
{{ item.time }}
|
||||
<el-descriptions-item label="起始时间" width="160">
|
||||
{{ item.startTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="结束时间">
|
||||
{{ item.time }}
|
||||
<el-descriptions-item label="结束时间" width="160">
|
||||
{{ item.endTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="安装位置">
|
||||
{{ echoName(item.devModel, devModelOptions) }}
|
||||
<el-descriptions-item label="安装位置" width="160">
|
||||
{{ item.location }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="操作">
|
||||
<el-button type="primary" size="small" icon="el-icon-EditPen" @click="handleOpen(2)">
|
||||
<el-descriptions-item label="操作" width="160">
|
||||
<!-- <el-button type="primary" size="small" icon="el-icon-EditPen" @click="handleOpen(3)">
|
||||
修改
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" icon="el-icon-InfoFilled" @click="handleOpen(3)">
|
||||
</el-button> -->
|
||||
<el-button type="primary" size="small" icon="el-icon-InfoFilled" @click="handleOpen(6)">
|
||||
设备信息
|
||||
</el-button>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<div class="history_title">
|
||||
<p>历史趋势</p>
|
||||
</div>
|
||||
@@ -96,6 +111,9 @@
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="title">
|
||||
10KV 母线_监测点 相电压有效值
|
||||
</div> -->
|
||||
<div class="history_chart">
|
||||
<MyEchart :options="echartsData" v-if="echartsData" />
|
||||
</div>
|
||||
@@ -126,31 +144,34 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import MangePopup from './popup.vue'
|
||||
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
|
||||
import MangePopup from './components/popup.vue'
|
||||
import schemeTree from './components/schemeTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
|
||||
import { getDeviceData } from '@/api/cs-device-boot/EquipmentDelivery'
|
||||
// import { getTargetById } from '@/api/cs-device-boot/csDatalistay'
|
||||
import { getGroup } from '@/api/cs-device-boot/csGroup'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ref, reactive, onMounted,provide } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
|
||||
import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'govern/device/manage'
|
||||
})
|
||||
//电压等级
|
||||
const voltageLevelList = dictData.getBasicData('Dev_Voltage')
|
||||
//接线方式
|
||||
const volConTypeList = dictData.getBasicData('Dev_Connect')
|
||||
//统计指标
|
||||
|
||||
//值类型
|
||||
|
||||
const pageHeight = mainHeight(20)
|
||||
const loading = ref(true)
|
||||
const tableLoading = ref(false)
|
||||
const getGroupLoading = ref(false)
|
||||
const deviceData = ref<any>([])
|
||||
const dataSet = ref('')
|
||||
const devTypeOptions = ref([])
|
||||
const devModelOptions = ref([])
|
||||
const tableData = ref([])
|
||||
const tableHeight = mainHeight(235).height
|
||||
const form = ref({})
|
||||
form.value = {
|
||||
index: '',
|
||||
@@ -171,88 +192,64 @@ const rankOptions = ref([
|
||||
}
|
||||
])
|
||||
const activeName: any = ref()
|
||||
const nodeClick = (e: anyObj) => {
|
||||
if (!e) {
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
if (e.level == 2) {
|
||||
const deviceData: any = ref([])
|
||||
const schemeTreeRef = ref(null)
|
||||
const chartsDataList: any = ref([])
|
||||
const nodeClick = async (e: anyObj) => {
|
||||
// if (!e) {
|
||||
// loading.value = false
|
||||
// return
|
||||
// }
|
||||
// if (e.level == 2) {
|
||||
loading.value = true
|
||||
deviceData.value = []
|
||||
getDeviceData(e.id, 'rt').then((res: any) => {
|
||||
// deviceData.value = res.data
|
||||
// if (e?.id) {
|
||||
|
||||
// }
|
||||
//查询测试项信息
|
||||
try {
|
||||
await getTestRecordInfo(e.id).then(res => {
|
||||
deviceData.value = res.data
|
||||
loading.value = false
|
||||
for (let i = 0; i < 5; i++) {
|
||||
deviceData.value.push(res.data)
|
||||
}
|
||||
console.log(deviceData.value, '0000000')
|
||||
activeName.value=0
|
||||
if (res.data.dataSetList.length === 0) {
|
||||
dataSet.value = ''
|
||||
tableData.value = []
|
||||
} else {
|
||||
dataSet.value = res.data.dataSetList[0].id
|
||||
handleClick()
|
||||
}
|
||||
activeName.value = res.data.records[0]?.itemName
|
||||
schemeTreeRef.value.getPlanData(deviceData.value)
|
||||
})
|
||||
|
||||
const historyData = {
|
||||
devId: e.id,
|
||||
statisticalId: '11aaa206ba82c5b68b7339fe60e22945',
|
||||
valueType: 'avg'
|
||||
}
|
||||
chartsDataList.value = []
|
||||
await getHistoryTrend(historyData).then(res => {
|
||||
chartsDataList.value = res.data
|
||||
init()
|
||||
})
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
}
|
||||
const handleClick = () => {
|
||||
// tableLoading.value = true
|
||||
// tableData.value = []
|
||||
// setTimeout(() => {
|
||||
// getTargetById(dataSet.value).then(res => {
|
||||
// tableData.value = res.data
|
||||
// tableLoading.value = false
|
||||
// })
|
||||
// }, 100)
|
||||
}
|
||||
queryByCode('Device_Type').then(res => {
|
||||
queryCsDictTree(res.data.id).then(res => {
|
||||
devTypeOptions.value = res.data.map((item: any) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
...item
|
||||
}
|
||||
})
|
||||
})
|
||||
queryByid(res.data.id).then(res => {
|
||||
devModelOptions.value = res.data.map((item: any) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
...item
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
const echoName = (value: any, list: any[]) => {
|
||||
return list.find(item => item.value == value)?.label
|
||||
//查询历史趋势
|
||||
}
|
||||
|
||||
const mangePopup = ref()
|
||||
const handleOpen = (val: any) => {
|
||||
mangePopup.value.open(val)
|
||||
mangePopup.value.open(val, deviceData.value.records[0].id)
|
||||
}
|
||||
|
||||
const echartsData = ref<any>(null)
|
||||
//加载echarts图表
|
||||
const init = () => {
|
||||
echartsData.value = null
|
||||
loading.value = true
|
||||
// prettier-ignore
|
||||
const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
|
||||
const dateList = data.map(function (item) {
|
||||
return item[0]
|
||||
})
|
||||
const valueList = data.map(function (item) {
|
||||
return item[1]
|
||||
})
|
||||
//icon图标替换legend图例
|
||||
const iconThree =
|
||||
'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z'
|
||||
const iconDanger =
|
||||
'path://M1001.661867 796.544c48.896 84.906667 7.68 157.013333-87.552 157.013333H110.781867c-97.834667 0-139.050667-69.504-90.112-157.013333l401.664-666.88c48.896-87.552 128.725333-87.552 177.664 0l401.664 666.88zM479.165867 296.533333v341.333334a32 32 0 1 0 64 0v-341.333334a32 32 0 1 0-64 0z m0 469.333334v42.666666a32 32 0 1 0 64 0v-42.666666a32 32 0 1 0-64 0z'
|
||||
|
||||
let xAxis: any[] = []
|
||||
chartsDataList.value.map(item => {
|
||||
xAxis.push(item.time)
|
||||
})
|
||||
echartsData.value = {
|
||||
options: {
|
||||
title: [
|
||||
@@ -298,7 +295,7 @@ const init = () => {
|
||||
// color: 'white',
|
||||
fontSize: 14
|
||||
},
|
||||
top: 10,
|
||||
top: 0,
|
||||
right: 50,
|
||||
itemWidth: 20,
|
||||
itemHeight: 10,
|
||||
@@ -307,8 +304,8 @@ const init = () => {
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '5%',
|
||||
bottom: '2%',
|
||||
top: '10%',
|
||||
bottom: '5%',
|
||||
top: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
@@ -319,7 +316,7 @@ const init = () => {
|
||||
color: '#A9AEB2',
|
||||
fontSize: 12
|
||||
},
|
||||
data: ['01:12', '02:12', '03:12', '04:12', '05:12', '06:12', '07:12', '08:12', '09:12', '10:12'],
|
||||
data: xAxis,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#43485E'
|
||||
@@ -374,7 +371,15 @@ const init = () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [80, 90, 70, 60, 50, 40, 30, 50, 60, 70]
|
||||
data: chartsDataList.value
|
||||
.map(item => {
|
||||
if (item.statisticalName === 'Apf_ThdA_Load') {
|
||||
return item.statisticalData
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
.filter(item => item !== '')
|
||||
},
|
||||
{
|
||||
name: 'B相',
|
||||
@@ -391,7 +396,15 @@ const init = () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [70, 55, 36, 55, 42, 30, 25, 24, 23, 21]
|
||||
data: chartsDataList.value
|
||||
.map(item => {
|
||||
if (item.statisticalName === 'Apf_ThdA_Sys') {
|
||||
return item.statisticalData
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
.filter(item => item !== '')
|
||||
},
|
||||
{
|
||||
name: 'C相',
|
||||
@@ -408,7 +421,15 @@ const init = () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [45, 53, 32, 29, 45, 36, 39, 34, 32, 31]
|
||||
data: chartsDataList.value
|
||||
.map(item => {
|
||||
if (item.statisticalName === 'Apf_RmsI_TolOut') {
|
||||
return item.statisticalData
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
.filter(item => item !== '')
|
||||
},
|
||||
{
|
||||
name: '暂降',
|
||||
@@ -430,6 +451,9 @@ const init = () => {
|
||||
]
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1500)
|
||||
}
|
||||
//搜素
|
||||
const handleSearch = () => {
|
||||
@@ -466,6 +490,8 @@ onMounted(() => {
|
||||
flex: 1 !important;
|
||||
padding: 10px 10px 10px 10px;
|
||||
border: 2px solid #eeeeee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.el-descriptions__header {
|
||||
height: 36px;
|
||||
margin-bottom: 7px;
|
||||
@@ -483,6 +509,9 @@ onMounted(() => {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.monitor_info {
|
||||
width: 100%;
|
||||
}
|
||||
.history_header {
|
||||
display: flex;
|
||||
.history_select {
|
||||
@@ -501,10 +530,11 @@ onMounted(() => {
|
||||
}
|
||||
.history_chart {
|
||||
width: 100%;
|
||||
height: calc(100vh - 530px);
|
||||
min-height: calc(100vh - 580px) !important;
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
}
|
||||
::v-deep .el-select{
|
||||
width:200px !important;
|
||||
}
|
||||
// ::v-deep .el-select {
|
||||
// width: 200px !important;
|
||||
// }
|
||||
</style>
|
||||
|
||||
@@ -1,261 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="cn-operate-dialog device-manage-popup"
|
||||
v-model="dialogVisible"
|
||||
:title="title"
|
||||
draggable
|
||||
:style="{ width: activeFormIndex == 0 ? '500px' : '65%' }"
|
||||
>
|
||||
<el-form
|
||||
:model="form"
|
||||
scroll-to-error
|
||||
:class="activeFormIndex == 0 ? 'form-one' : 'form-two'"
|
||||
label-width="120px"
|
||||
>
|
||||
<!-- 新增方案数据 -->
|
||||
<el-form-item label="统计指标：" v-if="activeFormIndex == 0">
|
||||
<el-select v-model="form.index" placeholder="请选择统计指标" clearable>
|
||||
<el-option
|
||||
v-for="item in rankOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="值类型：" v-if="activeFormIndex == 0">
|
||||
<el-select v-model="form.type" placeholder="请选择值类型" clearable>
|
||||
<el-option
|
||||
v-for="item in rankOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 新增/修改测试项数据 多个循环处理-->
|
||||
<div v-if="activeFormIndex == 1 || activeFormIndex == 2">
|
||||
<div class="form-two monitor" v-for="(item, index) in form?.monitorList" :key="index">
|
||||
<div class="monitor_add">
|
||||
<el-button v-if="index == 0" :icon="Plus" circle @click="handleAddMointor"></el-button>
|
||||
<el-button v-if="index != 0" :icon="Minus" circle @click="handleDelMointor(index)"></el-button>
|
||||
</div>
|
||||
<el-divider content-position="left">测试项信息{{ index + 1 }}</el-divider>
|
||||
<el-form-item label="测试项名称：">
|
||||
<el-input v-model="item.name" placeholder="请输入测试项名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="测量间隔：">
|
||||
<el-input v-model="item.name" placeholder="请输入测量间隔" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电压等级：">
|
||||
<el-select v-model="item.voltageLevel" placeholder="请选择电压等级" clearable>
|
||||
<el-option
|
||||
v-for="item in rankOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="接线方式：">
|
||||
<el-select v-model="item.line" placeholder="请选择接线方式" clearable>
|
||||
<el-option
|
||||
v-for="item in rankOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="最小短路容量：">
|
||||
<el-input
|
||||
v-model="item.minShortCircuitCapacity"
|
||||
oninput="value=value.replace(/[^\-?\d.]/g,'')
|
||||
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
|
||||
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
|
||||
autocomplete="off"
|
||||
placeholder="请选择最小短路容量"
|
||||
>
|
||||
<template #append>MVA</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户协议容量：">
|
||||
<el-input
|
||||
v-model="item.userAgreementCapacity"
|
||||
autocomplete="off"
|
||||
oninput="value=value.replace(/[^\-?\d.]/g,'')
|
||||
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
|
||||
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
|
||||
placeholder="请输入用户协议容量"
|
||||
>
|
||||
<template #append>MVA</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="基准短路容量：">
|
||||
<el-input
|
||||
v-model="item.baseShortCircuitCapacity"
|
||||
oninput="value=value.replace(/[^\-?\d.]/g,'')
|
||||
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
|
||||
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
|
||||
placeholder="请输入基准短路容量"
|
||||
>
|
||||
<template #append>MVA</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="供电设备容量：">
|
||||
<el-input
|
||||
v-model="item.pccEquipmentCapacity"
|
||||
oninput="value=value.replace(/[^\-?\d.]/g,'')
|
||||
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
|
||||
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
|
||||
placeholder="请输入供电设备容量"
|
||||
>
|
||||
<template #append>MVA</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="PT变比：" prop="pt1">
|
||||
<el-input
|
||||
style="width: 48%"
|
||||
v-model="item.pt1"
|
||||
autocomplete="off"
|
||||
placeholder="请输入PT变比"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
/>
|
||||
<el-input
|
||||
style="width: 48%"
|
||||
v-model="item.pt2"
|
||||
autocomplete="off"
|
||||
placeholder="请输入PT变比"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="CT变比：" prop="ct1">
|
||||
<el-input
|
||||
v-model="item.ct1"
|
||||
style="width: 48%"
|
||||
autocomplete="off"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
placeholder="请输入CT变比"
|
||||
/>
|
||||
<el-input
|
||||
v-model="item.ct2"
|
||||
style="width: 48%"
|
||||
autocomplete="off"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
placeholder="请输入CT变比"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="监测位置：">
|
||||
<el-input v-model="item.position" placeholder="请输入监测位置" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<!-- 设备信息列表 -->
|
||||
<div v-if="activeFormIndex == 3" style="height: 400px">
|
||||
<deviceInfo />
|
||||
</div>
|
||||
<template #footer="">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submit">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus, Minus } from '@element-plus/icons-vue'
|
||||
import deviceInfo from './components/deviceInfo.vue'
|
||||
const dialogVisible = ref(false)
|
||||
const form = ref({})
|
||||
form.value = {
|
||||
index: '',
|
||||
type: '',
|
||||
//测试项数据
|
||||
monitorList: [
|
||||
{
|
||||
name: '', //测试项名称
|
||||
interval: '', //测量间隔
|
||||
voltageLevel: '', //电压等级
|
||||
line: '', //接线方式
|
||||
minShortCircuitCapacity: '', //最小短路容量
|
||||
userAgreementCapacity: '', //用户协议容量
|
||||
baseShortCircuitCapacity: '', //基准短路容量
|
||||
pccEquipmentCapacity: '', //供电设备容量
|
||||
pt1: 1, //pt变比1
|
||||
pt2: 1, //pt变比2
|
||||
ct1: 300, //ct变比1
|
||||
ct2: 5, //ct变比2
|
||||
position: '' //监测位置
|
||||
}
|
||||
]
|
||||
}
|
||||
const rankOptions = ref([
|
||||
{
|
||||
value: '1',
|
||||
label: '1级'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '2级'
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '3级'
|
||||
}
|
||||
])
|
||||
const submit = () => {
|
||||
console.log('submit!')
|
||||
}
|
||||
const title: any = ref('')
|
||||
const activeFormIndex: any = ref(null)
|
||||
const open = (val: any) => {
|
||||
activeFormIndex.value = val
|
||||
title.value = val == 0 ? '新增方案' : val == 1 ? '新增测试项' : val == 2 ? '修改' : '设备信息'
|
||||
dialogVisible.value = true
|
||||
}
|
||||
//添加测试项
|
||||
const handleAddMointor = () => {
|
||||
form.value.monitorList = [
|
||||
{
|
||||
name: '', //测试项名称
|
||||
interval: '', //测量间隔
|
||||
voltageLevel: '', //电压等级
|
||||
line: '', //接线方式
|
||||
minShortCircuitCapacity: '', //最小短路容量
|
||||
userAgreementCapacity: '', //用户协议容量
|
||||
baseShortCircuitCapacity: '', //基准短路容量
|
||||
pccEquipmentCapacity: '', //供电设备容量
|
||||
pt1: 1, //pt变比1
|
||||
pt2: 1, //pt变比2
|
||||
ct1: 300, //ct变比1
|
||||
ct2: 5, //ct变比2
|
||||
position: '' //监测位置
|
||||
},
|
||||
...form.value.monitorList
|
||||
]
|
||||
}
|
||||
//移除测试项
|
||||
const handleDelMointor = index => {
|
||||
form.value.monitorList.splice(index, 1)
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-form-item__content {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
.monitor {
|
||||
position: relative;
|
||||
padding: 10px 50px;
|
||||
.monitor_add {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user