方案数据-修复问题
This commit is contained in:
zhujiyan
268
src/views/govern/device/planData/components/device.vue
Normal file
268
src/views/govern/device/planData/components/device.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="cn-operate-dialog device-manage-popup"
|
||||
v-model="dialogVisible"
|
||||
:title="!addFlag ? '数据绑定' : '数据选择'"
|
||||
draggable
|
||||
:append-to-body="true"
|
||||
width="80%"
|
||||
>
|
||||
<el-button type="primary" @click="addFlag = true" v-if="!addFlag">新增</el-button>
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="#626AEF"
|
||||
width="200"
|
||||
title="是否确认删除所选数据？"
|
||||
@confirm="handleDelete('')"
|
||||
@cancel="cancelDelete"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="danger" :disabled="checkedList.length == 0" v-if="!addFlag">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
|
||||
<div class="device-manage" v-show="addFlag" v-loading="loading">
|
||||
<deviceInfoTree
|
||||
:showCheckbox="true"
|
||||
:default-checked-keys="defaultCheckedKeys"
|
||||
@checkChange="checkChange"
|
||||
ref="deviceInfoTreeRef"
|
||||
></deviceInfoTree>
|
||||
<div class="device-manage-right">
|
||||
<TableHeader datePicker ref="TableHeaderRef"></TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-manage" v-show="!addFlag" v-loading="loading">
|
||||
<div class="device-manage-right">
|
||||
<!-- <datePicker ref="datePickerRef"></datePicker>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button> -->
|
||||
<vxe-table
|
||||
v-bind="defaultAttribute"
|
||||
:data="tableData"
|
||||
height="420"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
ref="checkedTableRef"
|
||||
@checkbox-all="selectChangeEvent"
|
||||
@checkbox-change="selectChangeEvent"
|
||||
>
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column field="devName" title="设备名称"></vxe-column>
|
||||
<vxe-column field="devMac" title="设备MAC"></vxe-column>
|
||||
<vxe-column field="devNdId" title="网络识别码"></vxe-column>
|
||||
<vxe-column field="lineName" title="线路号"></vxe-column>
|
||||
<vxe-column field="startTime" title="开始时间"></vxe-column>
|
||||
<vxe-column field="endTime" title="结束时间"></vxe-column>
|
||||
<vxe-column title="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-popconfirm
|
||||
width="150"
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="#626AEF"
|
||||
title="是否确认删除？"
|
||||
@confirm="handleDelete(row)"
|
||||
@cancel="cancelDelete"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="danger" text size="small">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer="">
|
||||
<el-button @click="close">取 消</el-button>
|
||||
<el-button type="primary" @click="submit" v-if="addFlag">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import deviceInfoTree from '@/components/tree/govern/deviceInfoTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { ref, onMounted, provide, watch } from 'vue'
|
||||
import { getDeviceList, addDevice, delDevice } from '@/api/cs-device-boot/planData'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
const pageHeight = mainHeight(-20)
|
||||
const loading = ref(false)
|
||||
const defaultCheckedKeys: any = ref([])
|
||||
const tableData = ref([])
|
||||
defineOptions({
|
||||
name: 'govern/tourist/index'
|
||||
})
|
||||
const treeIds: any = ref(['-1'])
|
||||
//树节点选择变化的时候处理树节点选中数据
|
||||
const checkChange = async (data: any) => {
|
||||
if (data.checked) {
|
||||
defaultCheckedKeys.value.push(data.data.id)
|
||||
data.data.children?.map((item: any) => {
|
||||
treeIds.value.push(item.id)
|
||||
})
|
||||
} else {
|
||||
defaultCheckedKeys.value.splice(defaultCheckedKeys.value.indexOf(data.data.id), 1)
|
||||
data.data.children?.map((item: any) => {
|
||||
treeIds.value.splice(defaultCheckedKeys.value.indexOf(item.id), 1)
|
||||
})
|
||||
}
|
||||
// await tableStore.index()
|
||||
}
|
||||
const datePickerRef = ref()
|
||||
const handleSearch = () => {
|
||||
console.log(datePickerRef.value.timeValue)
|
||||
}
|
||||
const dialogVisible = ref(false)
|
||||
const deviceInfoTreeRef = ref()
|
||||
//判断是否显示新增页面 false显示详情页面和删除按钮隐藏确定按钮 true显示新增页面与确定按钮隐藏删除按钮
|
||||
const addFlag = ref(false)
|
||||
const selectId: any = ref('')
|
||||
//查绑定测试项列表
|
||||
const getSelectedTable = (id: any) => {
|
||||
//新增传0已绑定传1
|
||||
getDeviceList({ id: id, isTrueFlag: 1, pageNum: 1, pageSize: 1000 }).then(res => {
|
||||
tableData.value = res.data.records
|
||||
})
|
||||
}
|
||||
//新增设备列表
|
||||
const tableStore = new TableStore({
|
||||
url: '/cs-device-boot/wlRecord/queryPage',
|
||||
publicHeight: 210,
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ width: '60', type: 'checkbox', fixed: 'left' },
|
||||
{ title: '序号', type: 'seq', width: 80 },
|
||||
{ field: 'devName', title: '设备名称', minWidth: 170 },
|
||||
{ field: 'lineName', title: '线路号', minWidth: 170 },
|
||||
{ field: 'startTime', title: '开始时间', minWidth: 170 },
|
||||
{ field: 'endTime', title: '结束时间', minWidth: 170 }
|
||||
],
|
||||
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.id = selectId.value
|
||||
//新增传0已绑定传1
|
||||
tableStore.table.params.isTrueFlag = 0
|
||||
tableStore.table.params.treeIds = treeIds.value
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
//弹框打开处理
|
||||
const open = (id: any) => {
|
||||
dialogVisible.value = true
|
||||
selectId.value = id
|
||||
//1 列表 0树
|
||||
//获取树形数据
|
||||
getDeviceList({ id: id, isTrueFlag: 0 }).then(res => {
|
||||
deviceInfoTreeRef.value.getTreeList(res.data)
|
||||
})
|
||||
//查绑定测试项列表
|
||||
getSelectedTable(id)
|
||||
//查新增列表
|
||||
tableStore.index()
|
||||
}
|
||||
const tableRef = ref()
|
||||
//添加设备
|
||||
const submit = () => {
|
||||
//选择的数据
|
||||
let deviceIds = []
|
||||
//新增的时候执行的逻辑
|
||||
if (addFlag.value) {
|
||||
if (tableStore.table.selection.length != 0) {
|
||||
tableStore.table.selection.map(item => {
|
||||
deviceIds.push(item.id)
|
||||
})
|
||||
const addForm = {
|
||||
id: selectId.value,
|
||||
list: deviceIds
|
||||
}
|
||||
addDevice(addForm).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('添加成功')
|
||||
getSelectedTable(selectId.value)
|
||||
//清除树节点选择状态
|
||||
defaultCheckedKeys.value = []
|
||||
//刷新新增列表状态
|
||||
tableStore.index()
|
||||
addFlag.value = false
|
||||
}
|
||||
})
|
||||
} else {
|
||||
ElMessage.warning('请选择设备信息')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
if (addFlag.value) {
|
||||
addFlag.value = false
|
||||
checkedList.value = []
|
||||
checkedTableRef.value.clearCheckboxRow()
|
||||
} else {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
}
|
||||
//删除设备
|
||||
const checkedTableRef = ref()
|
||||
//判断是否选择了设备数据
|
||||
const checkedList: any = ref([])
|
||||
/*
|
||||
* 记录选择的项
|
||||
*/
|
||||
const selectChangeEvent = (checked: any) => {
|
||||
checkedList.value = checkedTableRef.value.getCheckboxRecords()
|
||||
}
|
||||
|
||||
const handleDelete = (row: any) => {
|
||||
let list = []
|
||||
//单选删除
|
||||
if (row) {
|
||||
list.push(row.id)
|
||||
}
|
||||
//批量删除
|
||||
else {
|
||||
checkedTableRef.value.getCheckboxRecords().length != 0
|
||||
? checkedTableRef.value.getCheckboxRecords().map((item: any) => {
|
||||
list.push(item.id)
|
||||
})
|
||||
: (list = [])
|
||||
}
|
||||
if (list.length != 0) {
|
||||
delDevice({ id: selectId.value, list: list }).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('删除成功')
|
||||
getSelectedTable(selectId.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const cancelDelete = () => {
|
||||
console.log('取消')
|
||||
}
|
||||
onMounted(() => {})
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.device-manage {
|
||||
display: flex;
|
||||
|
||||
&-right {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
padding: 10px 10px 10px 0;
|
||||
.el-descriptions__header {
|
||||
height: 36px;
|
||||
margin-bottom: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
// ::v-deep .el-
|
||||
</style>
|
||||
907
src/views/govern/device/planData/components/popup.vue
Normal file
907
src/views/govern/device/planData/components/popup.vue
Normal file
@@ -0,0 +1,907 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="cn-operate-dialog device-manage-popup"
|
||||
v-model="dialogVisible"
|
||||
:title="title"
|
||||
draggable
|
||||
:style="{ width: activeFormIndex == 0 || activeFormIndex == 1 ? '500px' : '85%' }"
|
||||
>
|
||||
<el-form
|
||||
:model="form"
|
||||
scroll-to-error
|
||||
class="form-one"
|
||||
label-width="140px"
|
||||
:rules="rules1"
|
||||
ref="ruleFormRef1"
|
||||
v-if="activeFormIndex == 0 || activeFormIndex == 1"
|
||||
>
|
||||
<!-- 新增方案数据 -->
|
||||
<div class="form-one">
|
||||
<el-form-item label="方案名称：" prop="itemName">
|
||||
<el-input v-model="form.itemName" placeholder="请输入方案名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="方案描述：" prop="describe">
|
||||
<el-input type="textarea" v-model="form.describe" placeholder="请输入方案描述" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<!-- <el-collapse accordion v-model="activeTab" v-show="activeFormIndex != 0" style="width: 100%"> -->
|
||||
<!-- <el-collapse-item title="测试项信息" :name="0">
|
||||
<div v-if="activeFormIndex != 0">
|
||||
<div class="form-two monitor" v-for="(item, index) in form?.records" :key="index">
|
||||
<el-form :model="form" scroll-to-error class="form-one" label-width="120px">
|
||||
<el-form-item label="测试项名称：">
|
||||
<el-input v-model="item.itemName" placeholder="请输入测试项名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="测量间隔：">
|
||||
<el-select
|
||||
v-model="item.statisticalInterval"
|
||||
placeholder="请选择测量间隔"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in statisticalIntervalList"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</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
|
||||
style="width: 48%"
|
||||
v-model="item.pt"
|
||||
autocomplete="off"
|
||||
placeholder="请输入PT变比"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
/>
|
||||
<el-input
|
||||
style="width: 48%"
|
||||
v-model="item.pt1"
|
||||
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"
|
||||
style="width: 48%"
|
||||
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-form-item>
|
||||
<el-form-item label="监测位置：" style="width: 100%">
|
||||
<el-input type="textarea" v-model="item.location" placeholder="请输入监测位置" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item> -->
|
||||
<!-- <el-collapse-item title="数据绑定" :name="1"> -->
|
||||
<el-tabs type="border-card" v-model="activeName" v-if="activeFormIndex != 0 && activeFormIndex != 1">
|
||||
<el-tab-pane label="测试项信息" :name="0">
|
||||
<!-- <div class="form-two monitor" v-for="(item, index) in form?.records" :key="index"> -->
|
||||
<el-form
|
||||
:model="form1"
|
||||
ref="ruleFormRef2"
|
||||
scroll-to-error
|
||||
class="form-two"
|
||||
label-width="140px"
|
||||
:rules="rules2"
|
||||
>
|
||||
<el-form-item label="测试项名称：" prop="itemName">
|
||||
<el-input v-model="form1.itemName" placeholder="请输入测试项名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="测量间隔：" prop="statisticalInterval">
|
||||
<el-select
|
||||
v-model="form1.statisticalInterval"
|
||||
placeholder="请选择测量间隔"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in statisticalIntervalList"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电压等级：" prop="voltageLevel">
|
||||
<el-select
|
||||
v-model="form1.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="接线方式：" prop="volConType">
|
||||
<el-select
|
||||
v-model="form1.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="最小短路容量：" prop="capacitySscmin">
|
||||
<el-input
|
||||
v-model="form1.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="用户协议容量：" prop="capacitySi">
|
||||
<el-input
|
||||
v-model="form1.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="基准短路容量：" prop="capacitySscb">
|
||||
<el-input
|
||||
v-model="form1.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="供电设备容量：" prop="capacitySt">
|
||||
<el-input
|
||||
v-model="form1.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
|
||||
style="width: 48%"
|
||||
v-model="form1.pt"
|
||||
autocomplete="off"
|
||||
placeholder="请输入PT变比"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
/>
|
||||
<el-input
|
||||
style="width: 48%"
|
||||
v-model="form1.pt1"
|
||||
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="form1.ct"
|
||||
style="width: 48%"
|
||||
autocomplete="off"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
placeholder="请输入CT变比"
|
||||
/>
|
||||
<el-input
|
||||
v-model="form1.ct1"
|
||||
style="width: 48%"
|
||||
autocomplete="off"
|
||||
oninput="value=value.replace(/[^0-9.]/g,'')"
|
||||
placeholder="请输入CT变比"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="监测位置：" prop="location" style="width: 100%">
|
||||
<el-input type="textarea" v-model="form1.location" placeholder="请输入监测位置" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- </div> -->
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="已绑定数据" :name="1" v-if="tableData && tableData.length != 0">
|
||||
<div class="device_info" style="width: 100%">
|
||||
<!-- <el-button type="primary" @click="addFlag = true" v-if="!addFlag">新增</el-button> -->
|
||||
<div class="button_info">
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="#626AEF"
|
||||
width="200"
|
||||
title="是否确认移除所选数据？"
|
||||
@confirm="handleDelete('')"
|
||||
@cancel="cancelDelete"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="danger" :disabled="checkedList.length == 0" v-if="!addFlag">
|
||||
移除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<div class="device-manage" v-loading="loading">
|
||||
<vxe-table
|
||||
v-bind="defaultAttribute"
|
||||
:data="tableData"
|
||||
height="420"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
ref="checkedTableRef"
|
||||
@checkbox-all="selectChangeEvent"
|
||||
@checkbox-change="selectChangeEvent"
|
||||
>
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column type="seq" width="40"></vxe-column>
|
||||
<vxe-column field="devName" title="设备名称"></vxe-column>
|
||||
<vxe-column field="devMac" title="设备MAC"></vxe-column>
|
||||
<vxe-column field="devNdId" title="网络识别码"></vxe-column>
|
||||
<vxe-column field="lineName" title="线路号"></vxe-column>
|
||||
<vxe-column field="startTime" title="开始时间"></vxe-column>
|
||||
<vxe-column field="endTime" title="结束时间"></vxe-column>
|
||||
<vxe-column title="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-popconfirm
|
||||
width="150"
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="#626AEF"
|
||||
title="是否确认移除？"
|
||||
@confirm="handleDelete(row)"
|
||||
@cancel="cancelDelete"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="danger" text size="small">移除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="数据绑定" :name="2">
|
||||
<div class="button_info">
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="#626AEF"
|
||||
width="200"
|
||||
title="是否确认绑定所选数据？"
|
||||
@confirm="addDeviceData"
|
||||
@cancel="cancelDelete"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="primary" :disabled="tableStore.table.selection.length == 0">
|
||||
数据绑定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
|
||||
<div class="device_info add_device" style="width: 100%">
|
||||
<div class="device-manage" v-loading="loading">
|
||||
<deviceInfoTree
|
||||
:showCheckbox="true"
|
||||
:default-checked-keys="defaultCheckedKeys"
|
||||
@checkChange="checkChange"
|
||||
ref="deviceInfoTreeRef"
|
||||
></deviceInfoTree>
|
||||
<div class="device-manage-right">
|
||||
<TableHeader datePicker ref="TableHeaderRef"></TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- </el-collapse-item> -->
|
||||
<!-- </el-collapse> -->
|
||||
<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, provide, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus, Minus, Message } from '@element-plus/icons-vue'
|
||||
import { addPlan, addRecord, updateRecord, getDeviceList, addDevice, delDevice } from '@/api/cs-device-boot/planData'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import deviceInfoTree from '@/components/tree/govern/deviceInfoTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
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({})
|
||||
//测试项数据
|
||||
const form1 = ref({})
|
||||
//折叠面板初始值
|
||||
const activeTab = ref(0)
|
||||
//tab初始值
|
||||
const activeName = ref(0)
|
||||
//测量间隔数据
|
||||
const statisticalIntervalList = [
|
||||
{
|
||||
id: 1,
|
||||
name: '1分钟'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '3分钟'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '5分钟'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: '10分钟'
|
||||
}
|
||||
]
|
||||
//初始化form
|
||||
const initForm = () => {
|
||||
//方案数据
|
||||
form.value = {
|
||||
itemName: '', //方案名称
|
||||
describe: '' //方案描述
|
||||
//测试项数据
|
||||
// records: [
|
||||
// ]
|
||||
}
|
||||
//测试项数据
|
||||
form1.value = {
|
||||
itemName: '', //测试项名称
|
||||
statisticalInterval: statisticalIntervalList[0].id, //测量间隔
|
||||
voltageLevel: voltageLevelList[0].id, //电压等级
|
||||
volConType: volConTypeList[0].id, //接线方式
|
||||
capacitySscmin: 10, //最小短路容量
|
||||
capacitySi: 10, //用户协议容量
|
||||
capacitySscb: 10, //基准短路容量
|
||||
capacitySt: 10, //供电设备容量
|
||||
pt: 1, //pt变比1
|
||||
pt1: 1, //pt变比2
|
||||
ct: 300, //ct变比1
|
||||
ct1: 5, //ct变比2
|
||||
location: '' //监测位置
|
||||
}
|
||||
}
|
||||
initForm()
|
||||
//方案校验规则
|
||||
const rules1 = ref({
|
||||
//方案名称
|
||||
itemName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入方案名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
//方案名称
|
||||
describe: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入方案描述',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
//测试项校验规则
|
||||
const rules2 = ref({
|
||||
//测试项名称
|
||||
itemName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入测试项名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
describe: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择测量间隔',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
voltageLevel: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择电压等级',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
volConType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择接线方式',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
capacitySscmin: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入最小短路容量',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
capacitySi: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户协议容量',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
capacitySscb: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入基准短路容量',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
capacitySt: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入供电设备容量',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
pt: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入PT变比',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
ct: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入CT变比',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
location: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入监测位置',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
//弹框标题
|
||||
const title: any = ref('')
|
||||
//判断页面显示条件
|
||||
const activeFormIndex: any = ref(null)
|
||||
//方案/测试项id
|
||||
const planId: any = ref('')
|
||||
//回显方案、测试项操作
|
||||
const details = (val: any) => {
|
||||
//修改方案回显
|
||||
if (activeFormIndex.value == 1) {
|
||||
form.value = JSON.parse(JSON.stringify(val))
|
||||
}
|
||||
//修改测试项回显
|
||||
if (activeFormIndex.value == 3) {
|
||||
console.log(val, '66666666777777755555')
|
||||
form1.value = val.records[0]
|
||||
}
|
||||
if (activeFormIndex.value != 1 && activeFormIndex.value != 3) {
|
||||
initForm()
|
||||
}
|
||||
}
|
||||
//0 新增方案 1 修改方案 2 新增测试项 3 修改测试项 4 设备信息
|
||||
const open = (val: any, id: any) => {
|
||||
console.log(id, '8888888')
|
||||
activeFormIndex.value = val
|
||||
title.value = val == 0 ? '新增方案' : val == 1 ? '修改方案' : val == 2 ? '新增测试项' : '修改测试项'
|
||||
dialogVisible.value = true
|
||||
planId.value = id
|
||||
//新增方案或者测试项数据
|
||||
if (val == 0 || val == 2) {
|
||||
initForm()
|
||||
}
|
||||
if (val != 0 && val != 1) {
|
||||
//1 列表 0树
|
||||
// getDeviceList({ id: id, isTrueFlag: 0, pageNum: 1, pageSize: 200 }).then(res => {})
|
||||
dialogVisible.value = true
|
||||
selectId.value = id
|
||||
//1 列表 0树
|
||||
//获取树形数据
|
||||
getDeviceList({ id: id, isTrueFlag: 0 }).then(res => {
|
||||
deviceInfoTreeRef.value.getTreeList(res.data)
|
||||
})
|
||||
//查绑定测试项列表
|
||||
getSelectedTable(id)
|
||||
//查新增列表
|
||||
tableStore.index()
|
||||
}
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const defaultCheckedKeys: any = ref([])
|
||||
const tableData = ref([])
|
||||
defineOptions({
|
||||
name: 'govern/tourist/index'
|
||||
})
|
||||
const treeIds: any = ref(['-1'])
|
||||
//树节点选择变化的时候处理树节点选中数据
|
||||
const checkChange = async (data: any) => {
|
||||
if (data.checked) {
|
||||
defaultCheckedKeys.value.push(data.data.id)
|
||||
data.data.children?.map((item: any) => {
|
||||
treeIds.value.push(item.id)
|
||||
})
|
||||
} else {
|
||||
defaultCheckedKeys.value.splice(defaultCheckedKeys.value.indexOf(data.data.id), 1)
|
||||
data.data.children?.map((item: any) => {
|
||||
treeIds.value.splice(defaultCheckedKeys.value.indexOf(item.id), 1)
|
||||
})
|
||||
}
|
||||
await tableStore.index()
|
||||
}
|
||||
const deviceInfoTreeRef = ref()
|
||||
//判断是否显示新增页面 false显示详情页面和删除按钮隐藏确定按钮 true显示新增页面与确定按钮隐藏删除按钮
|
||||
const addFlag = ref(false)
|
||||
const selectId: any = ref('')
|
||||
//查绑定测试项列表
|
||||
const getSelectedTable = async (id: any) => {
|
||||
//新增传0已绑定传1
|
||||
await getDeviceList({ id: id, isTrueFlag: 1, pageNum: 1, pageSize: 1000 }).then(res => {
|
||||
tableData.value = res.data.records
|
||||
activeName.value = tableData.value.length == 0 ? 0 : 2
|
||||
})
|
||||
}
|
||||
//新增设备列表
|
||||
const tableStore = new TableStore({
|
||||
url: '/cs-device-boot/wlRecord/queryPage',
|
||||
publicHeight: 260,
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ width: '40', type: 'checkbox', fixed: 'left' },
|
||||
{ title: '序号', type: 'seq', width: 60 },
|
||||
{ field: 'devName', title: '设备名称', minWidth: 170 },
|
||||
{ field: 'lineName', title: '线路号', minWidth: 170 },
|
||||
{ field: 'startTime', title: '开始时间', minWidth: 170 },
|
||||
{ field: 'endTime', title: '结束时间', minWidth: 170 }
|
||||
],
|
||||
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.id = selectId.value
|
||||
//新增传0已绑定传1
|
||||
tableStore.table.params.isTrueFlag = 0
|
||||
tableStore.table.params.treeIds = treeIds.value
|
||||
}
|
||||
})
|
||||
tableStore.table.params.treeIds = ['-1']
|
||||
provide('tableStore', tableStore)
|
||||
const tableRef = ref()
|
||||
//删除设备
|
||||
const checkedTableRef = ref()
|
||||
//判断是否选择了设备数据
|
||||
const checkedList: any = ref([])
|
||||
/*
|
||||
* 记录选择的项
|
||||
*/
|
||||
const selectChangeEvent = (checked: any) => {
|
||||
checkedList.value = checkedTableRef.value.getCheckboxRecords()
|
||||
}
|
||||
//添加绑定设备
|
||||
const addDeviceData = async () => {
|
||||
//选择的数据
|
||||
let deviceIds = []
|
||||
if (tableStore.table.selection.length != 0) {
|
||||
tableStore.table.selection.map(item => {
|
||||
deviceIds.push(item.id)
|
||||
})
|
||||
const addForm = {
|
||||
id: selectId.value,
|
||||
list: deviceIds
|
||||
}
|
||||
await addDevice(addForm).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('绑定成功')
|
||||
getSelectedTable(selectId.value)
|
||||
//清除树节点选择状态
|
||||
defaultCheckedKeys.value = []
|
||||
//刷新新增列表状态
|
||||
tableStore.index()
|
||||
addFlag.value = false
|
||||
}
|
||||
})
|
||||
} else {
|
||||
ElMessage.warning('请选择设备信息')
|
||||
}
|
||||
}
|
||||
//移除绑定的设备
|
||||
const handleDelete = (row: any) => {
|
||||
let list = []
|
||||
//单选删除
|
||||
if (row) {
|
||||
list.push(row.id)
|
||||
}
|
||||
//批量删除
|
||||
else {
|
||||
checkedTableRef.value.getCheckboxRecords().length != 0
|
||||
? checkedTableRef.value.getCheckboxRecords().map((item: any) => {
|
||||
list.push(item.id)
|
||||
})
|
||||
: (list = [])
|
||||
}
|
||||
if (list.length != 0) {
|
||||
delDevice({ id: selectId.value, list: list }).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('移除成功')
|
||||
getSelectedTable(selectId.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const cancelDelete = () => {
|
||||
console.log('取消')
|
||||
}
|
||||
//关闭
|
||||
const ruleFormRef1 = ref()
|
||||
const ruleFormRef2 = ref()
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
//折叠面板
|
||||
activeTab.value = 0
|
||||
if (addFlag.value) {
|
||||
addFlag.value = false
|
||||
checkedList.value = []
|
||||
checkedTableRef.value.clearCheckboxRow()
|
||||
} else {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
//取消表单校验状态
|
||||
if (activeFormIndex.value == 0 || activeFormIndex.value == 1) {
|
||||
ruleFormRef1.value && ruleFormRef1.value.resetFields()
|
||||
} else {
|
||||
ruleFormRef2.value && ruleFormRef2.value?.resetFields()
|
||||
}
|
||||
//tabs
|
||||
activeName.value = 0
|
||||
initForm()
|
||||
}
|
||||
//提交
|
||||
const submit = () => {
|
||||
//新增方案
|
||||
if (activeFormIndex.value == 0) {
|
||||
ruleFormRef1.value.validate(valid => {
|
||||
if (valid) {
|
||||
const subForm = {
|
||||
itemName: form.value.itemName,
|
||||
describe: form.value.describe
|
||||
}
|
||||
addPlan(subForm).then(res => {
|
||||
ElMessage.success('新增方案成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
})
|
||||
} else {
|
||||
console.log('表单验证失败')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
//修改方案
|
||||
if (activeFormIndex.value == 1) {
|
||||
ruleFormRef1.value.validate(valid => {
|
||||
if (valid) {
|
||||
const subForm = {
|
||||
id: planId.value,
|
||||
itemName: form.value.itemName,
|
||||
describe: form.value.describe
|
||||
}
|
||||
addPlan(subForm).then(res => {
|
||||
ElMessage.success('修改方案成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
//新增测试项
|
||||
if (activeFormIndex.value == 2) {
|
||||
ruleFormRef2.value.validate(valid => {
|
||||
if (valid) {
|
||||
const subForm = {
|
||||
id: planId.value,
|
||||
records: [form1.value]
|
||||
}
|
||||
subForm.list = tableData.value.map(item => {
|
||||
return item.id
|
||||
})
|
||||
addRecord(subForm).then(res => {
|
||||
ElMessage.success('新增测试项成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
//修改测试项
|
||||
if (activeFormIndex.value == 3) {
|
||||
console.log(66666, ruleFormRef2.value.validate)
|
||||
ruleFormRef2.value.validate((valid: any) => {
|
||||
console.log(valid, '------')
|
||||
if (valid) {
|
||||
// const subForm = {
|
||||
// id: planId.value,
|
||||
// ...form1.value
|
||||
// }
|
||||
let subForm = form1.value
|
||||
subForm.list = tableData.value.map(item => {
|
||||
return item.id
|
||||
})
|
||||
updateRecord(subForm).then(res => {
|
||||
ElMessage.success('修改测试项成功')
|
||||
emit('onSubmit')
|
||||
close()
|
||||
})
|
||||
} else {
|
||||
console.log('校验不通过')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
defineExpose({ open, details })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-form-item__content {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
::v-deep .form-two {
|
||||
.el-select {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.monitor {
|
||||
position: relative;
|
||||
padding: 10px 50px;
|
||||
.monitor_add {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
.button_info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.add_device {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
}
|
||||
.device-manage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.device-manage-right {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
309
src/views/govern/device/planData/components/schemeTree.vue
Normal file
309
src/views/govern/device/planData/components/schemeTree.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:style="{ width: menuCollapse ? '40px' : '280px' }"
|
||||
style="transition: all 0.3s; overflow: hidden; height: 100%"
|
||||
>
|
||||
<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>
|
||||
<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"
|
||||
/>
|
||||
<span>{{ node.label }}</span>
|
||||
</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, ElMessageBox } 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 => {
|
||||
treRef.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', 'getChart'])
|
||||
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-Menu'
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-Document'
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
arr.push(item2)
|
||||
})
|
||||
})
|
||||
tree.value = res.data
|
||||
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)
|
||||
}
|
||||
//方案id
|
||||
const planId: any = ref('')
|
||||
//测试项id
|
||||
const monitorId: any = ref('')
|
||||
const planData: any = ref({})
|
||||
const getPlanData = (row: any) => {
|
||||
planData.value = {}
|
||||
planData.value = JSON.parse(JSON.stringify(row))
|
||||
}
|
||||
/** 添加树节点 */
|
||||
// 0 新增方案 1 修改方案 2 新增测试项 3 修改测试项 4 设备信息
|
||||
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 {
|
||||
monitorId.value = data.id
|
||||
await handleOpen(3, planId.value)
|
||||
}
|
||||
}
|
||||
/** 删除树节点 */
|
||||
const del = (node: Node, data: any) => {
|
||||
planId.value = data.id
|
||||
//删除方案/测试项
|
||||
ElMessageBox.confirm('是否确认删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
delRecord({ id: data.id }).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
ElMessage.success('删除成功')
|
||||
getTreeList()
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '已取消'
|
||||
})
|
||||
})
|
||||
}
|
||||
//取消删除
|
||||
const cancelDel = () => {}
|
||||
const clickNode = (e: anyObj) => {
|
||||
e.children ? (planId.value = e.id) : (planId.value = e.pid)
|
||||
emit('nodeChange', e)
|
||||
}
|
||||
watch(
|
||||
() => planData.value,
|
||||
(val, oldVal) => {
|
||||
if (val && dialogRef.value) {
|
||||
const obj = JSON.parse(JSON.stringify(val))
|
||||
console.log(obj,"88888888888");
|
||||
obj.records = [
|
||||
val.records.find(item => {
|
||||
return item.id == monitorId.value
|
||||
})
|
||||
]
|
||||
dialogRef.value.details(obj)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
defineExpose({ treeRef, getPlanData, getTreeList })
|
||||
</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;
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.left{
|
||||
span{
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
a{
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
649
src/views/govern/device/planData/index.vue
Normal file
649
src/views/govern/device/planData/index.vue
Normal file
@@ -0,0 +1,649 @@
|
||||
<template>
|
||||
<div class="default-main device-manage" :style="{ height: pageHeight.height }">
|
||||
<!-- @node-change="nodeClick" -->
|
||||
<schemeTree @node-click="nodeClick" @init="nodeClick" ref="schemeTreeRef"></schemeTree>
|
||||
<div class="device-manage-right" v-if="deviceData">
|
||||
<el-descriptions value="small" title="方案信息" class="mb10" :column="2" border>
|
||||
<template #extra>
|
||||
<el-button size="small" type="primary" @click="handleOpen(0, '')">新增方案</el-button>
|
||||
</template>
|
||||
<el-descriptions-item label="方案名称" width="60">
|
||||
{{ deviceData.itemName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="方案描述" width="60">
|
||||
{{ 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.records"
|
||||
:label="item.itemName"
|
||||
:name="item.itemName"
|
||||
:key="index"
|
||||
>
|
||||
<el-descriptions value="small" class="mb10" :column="4" border>
|
||||
<el-descriptions-item label="测试项名称" width="160">
|
||||
{{ item.itemName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="测量间隔" width="160">
|
||||
{{ item.statisticalInterval }}分钟
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级" width="160">
|
||||
{{
|
||||
voltageLevelList.find(vv => {
|
||||
return vv.id == item.voltageLevel
|
||||
})?.name
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="接线方式" width="160">
|
||||
{{
|
||||
volConTypeList.find(vv => {
|
||||
return vv.id == item.volConType
|
||||
})?.name
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="最小短路容量" width="160">
|
||||
{{ item.capacitySscmin }}MVA
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="用户协议容量" width="160">
|
||||
{{ item.capacitySi }}MVA
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="基准短路容量" width="160">
|
||||
{{ item.capacitySscb }}MVA
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="供电设备容量" width="160">
|
||||
{{ item.capacitySt }}MVA
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="PT变比" width="160">
|
||||
{{ item.pt && item.pt1 ? item.pt / item.pt1 : item.pt }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="CT变比" width="160">
|
||||
{{ item.ct && item.ct1 ? item.ct / item.ct1 : item.ct }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="起始时间" width="160">
|
||||
{{ item.startTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="结束时间" width="160">
|
||||
{{ item.endTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="监测位置" width="160">
|
||||
{{ item.location }}
|
||||
</el-descriptions-item>
|
||||
<!-- <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="openDevice">
|
||||
数据绑定
|
||||
</el-button> -->
|
||||
<!-- </el-descriptions-item> -->
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div class="history_title">
|
||||
<p>历史趋势</p>
|
||||
</div>
|
||||
<div class="history_header">
|
||||
<el-form :model="searchForm" class="history_select">
|
||||
<el-form-item label="统计指标">
|
||||
<el-select @change="init" v-model="searchForm.index" placeholder="请选择统计指标">
|
||||
<el-option
|
||||
v-for="item in indexOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="值类型">
|
||||
<el-select @change="init" v-model="searchForm.type" placeholder="请选择值类型">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="history_searchBtn">
|
||||
<!-- <el-button type="primary" icon="el-icon-Search" @click="handleSearch">查询</el-button> -->
|
||||
<!-- <el-button type="primary" size="small" icon="el-icon-Download" @click="handleExport">
|
||||
导出
|
||||
</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="title">
|
||||
10KV 母线_监测点 相电压有效值
|
||||
</div> -->
|
||||
<div class="history_chart" v-loading="loading" v-show="echartsData">
|
||||
<MyEchart ref="historyChart" :isExport="true" :options="echartsData" />
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="请选择设备" class="device-manage-right" />
|
||||
<popup ref="dialogRef" @onSubmit="refreshTree" />
|
||||
<!-- <device ref="deviceRef"></device> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import popup 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 { ref, reactive, onMounted, provide, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import device from './components/device.vue'
|
||||
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
||||
import * as echarts from 'echarts'
|
||||
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 searchForm = ref({})
|
||||
const typeOptions = [
|
||||
{
|
||||
name: '平均值',
|
||||
id: 'avg'
|
||||
},
|
||||
{
|
||||
name: '最大值',
|
||||
id: 'max'
|
||||
},
|
||||
{
|
||||
name: '最小值',
|
||||
id: 'min'
|
||||
},
|
||||
{
|
||||
name: 'CP95值',
|
||||
id: 'cp95'
|
||||
}
|
||||
]
|
||||
searchForm.value = {
|
||||
index: '',
|
||||
type: typeOptions[0].id
|
||||
}
|
||||
//统计指标
|
||||
const indexOptions: any = ref([])
|
||||
// Harmonic_Type
|
||||
// portable-harmonic
|
||||
const legendDictList: any = ref([])
|
||||
queryByCode('portable-harmonic').then(res => {
|
||||
queryCsDictTree(res.data.id).then(item => {
|
||||
indexOptions.value = item.data
|
||||
searchForm.value.index = indexOptions.value[0].id
|
||||
})
|
||||
queryStatistical(res.data.id).then(vv => {
|
||||
legendDictList.value = vv.data
|
||||
})
|
||||
})
|
||||
const activeName: any = ref()
|
||||
const deviceData: any = ref([])
|
||||
const schemeTreeRef = ref()
|
||||
const nodeId: any = ref('')
|
||||
const chartTitle: any = ref('')
|
||||
const nodeClick = async (e: anyObj) => {
|
||||
loading.value = true
|
||||
deviceData.value = []
|
||||
nodeId.value = e.id
|
||||
let id = e.pid ? e.pid : e.id
|
||||
//查询测试项信息
|
||||
try {
|
||||
await getTestRecordInfo(id).then(res => {
|
||||
deviceData.value = res.data
|
||||
loading.value = false
|
||||
res.data.records.map(item => {
|
||||
if (item.id == e.id) {
|
||||
activeName.value = item.itemName
|
||||
}
|
||||
})
|
||||
schemeTreeRef.value.getPlanData(deviceData.value)
|
||||
})
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
}
|
||||
init()
|
||||
}
|
||||
// const deviceRef = ref()
|
||||
// const openDevice = () => {
|
||||
// deviceRef.value.open(deviceData.value.records[0].id)
|
||||
// }
|
||||
const dialogRef = ref()
|
||||
const handleOpen = (val: any, id: any) => {
|
||||
// deviceData.value.records[0].id
|
||||
dialogRef.value.open(val, '')
|
||||
}
|
||||
const echartsData = ref<any>(null)
|
||||
//加载echarts图表
|
||||
//历史趋势数据
|
||||
const historyDataList: any = ref([])
|
||||
const refreshTree = () => {
|
||||
schemeTreeRef.value.getTreeList()
|
||||
}
|
||||
const isDel = ref(false)
|
||||
const init = async () => {
|
||||
if (nodeId.value) {
|
||||
try {
|
||||
//查询历史趋势
|
||||
historyDataList.value = []
|
||||
loading.value = true
|
||||
chartTitle.value =
|
||||
deviceData.value.itemName +
|
||||
' ' +
|
||||
deviceData.value.records[0]?.itemName +
|
||||
' ' +
|
||||
indexOptions.value.find(item => {
|
||||
return item.id == searchForm.value.index
|
||||
})?.name
|
||||
await getHistoryTrend({
|
||||
devId: nodeId.value,
|
||||
statisticalId: searchForm.value.index,
|
||||
valueType: searchForm.value.type
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
historyDataList.value = res.data
|
||||
echartsData.value = null
|
||||
//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[] = []
|
||||
historyDataList.value.map(item => {
|
||||
xAxis.push(item.time)
|
||||
})
|
||||
echartsData.value = {
|
||||
options: {
|
||||
title: [
|
||||
{
|
||||
left: 'center',
|
||||
text: chartTitle.value
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
title: '保存'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
//legend使用iconfont图标
|
||||
// data: [
|
||||
// {
|
||||
// name: list[0]?.name,
|
||||
// icon: iconThree
|
||||
// },
|
||||
// {
|
||||
// name: list[1]?.name,
|
||||
// icon: iconThree
|
||||
// },
|
||||
// {
|
||||
// name: list[2]?.name,
|
||||
// icon: iconThree
|
||||
// },
|
||||
// {
|
||||
// name: list[3]?.name,
|
||||
// icon: iconDanger
|
||||
// }
|
||||
// ],
|
||||
// x: 'right',
|
||||
// textStyle: {
|
||||
// // color: 'white',
|
||||
// fontSize: 14
|
||||
// },
|
||||
top: 5,
|
||||
right: 80,
|
||||
itemWidth: 20,
|
||||
itemHeight: 10,
|
||||
itemGap: 15
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
top: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
name: '时间',
|
||||
axisLabel: {
|
||||
color: '#A9AEB2',
|
||||
fontSize: 12
|
||||
},
|
||||
data: xAxis,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#43485E'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: 'KV',
|
||||
axisLabel: {
|
||||
color: '#A9AEB2',
|
||||
fontSize: 12
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// color: 'white'
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#A9AEB2',
|
||||
fontSize: '12'
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: ['#43485E'],
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
// series: [
|
||||
// {
|
||||
// name: list[0]?.name,
|
||||
// type: 'line',
|
||||
// smooth: true,
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: '#DAA521',
|
||||
// lineStyle: {
|
||||
// color: '#DAA521'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: historyDataList.value
|
||||
// .map(item => {
|
||||
// if (item.statisticalName === 'Apf_ThdA_Load') {
|
||||
// return item.statisticalData
|
||||
// } else {
|
||||
// return ''
|
||||
// }
|
||||
// })
|
||||
// .filter(item => item !== '')
|
||||
// },
|
||||
// {
|
||||
// name: list[1]?.name,
|
||||
// type: 'line',
|
||||
// smooth: true,
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: '#2E8B58',
|
||||
// lineStyle: {
|
||||
// color: '#2E8B58'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: historyDataList.value
|
||||
// .map(item => {
|
||||
// if (item.statisticalName === 'Apf_ThdA_Sys') {
|
||||
// return item.statisticalData
|
||||
// } else {
|
||||
// return ''
|
||||
// }
|
||||
// })
|
||||
// .filter(item => item !== '')
|
||||
// },
|
||||
// {
|
||||
// name: list[2]?.name,
|
||||
// type: 'line',
|
||||
// smooth: true,
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: '#A5292A',
|
||||
// lineStyle: {
|
||||
// color: '#A5292A'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: historyDataList.value
|
||||
// .map(item => {
|
||||
// if (item.statisticalName === 'Apf_RmsI_TolOut') {
|
||||
// return item.statisticalData
|
||||
// } else {
|
||||
// return ''
|
||||
// }
|
||||
// })
|
||||
// .filter(item => item !== '')
|
||||
// },
|
||||
// {
|
||||
// name: list[3]?.name,
|
||||
// type: 'line',
|
||||
// smooth: true,
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: '#d81e06',
|
||||
// lineStyle: {
|
||||
// color: '#d81e06'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: []
|
||||
// }
|
||||
// ]
|
||||
}
|
||||
}
|
||||
//选择指标的时候切换legend内容和data数据
|
||||
let list = []
|
||||
//颜色数组
|
||||
const colorList = ['#DAA521', '#2E8B58', '#A5292A', '#d81e06']
|
||||
legendDictList.value?.selectedList?.map(item => {
|
||||
if (item.dataType == searchForm.value.index) {
|
||||
list.push(item.eleEpdPqdVOS)
|
||||
}
|
||||
})
|
||||
list.map((item, index) => {
|
||||
echartsData.value.options.legend.data.push({
|
||||
name: item.showName,
|
||||
icon: iconThree
|
||||
})
|
||||
echartsData.value.options.series.push({
|
||||
name: item.showName,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: colorList[index],
|
||||
lineStyle: {
|
||||
color: colorList[index]
|
||||
}
|
||||
}
|
||||
},
|
||||
data: historyDataList.value
|
||||
.map(vv => {
|
||||
if (vv.statisticalName === item.name) {
|
||||
return vv.statisticalData
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
.filter(vv => vv !== '')
|
||||
})
|
||||
})
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
loading.value = false
|
||||
})
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
//搜素
|
||||
const handleSearch = () => {
|
||||
console.log(searchForm.value, '搜索')
|
||||
init()
|
||||
}
|
||||
//导出
|
||||
const historyChart = ref()
|
||||
// const chart: any = ref(null)
|
||||
// chart.value = echarts.init(historyChart.value)
|
||||
const handleExport = () => {
|
||||
// 使用ECharts的getOption方法获取当前图表的配置
|
||||
const option = chart.value.getOption()
|
||||
console.log(option.series, '00000000000')
|
||||
return
|
||||
const seriesData = option.series[0].data // 假设我们只导出第一个系列的数据
|
||||
|
||||
// 转换为CSV格式
|
||||
let csvContent = 'data1,data2\n'
|
||||
seriesData.forEach(item => {
|
||||
csvContent += `${item.name},${item.value}\n`
|
||||
})
|
||||
|
||||
// 创建Blob对象，并使用a标签下载
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
|
||||
const link = document.createElement('a')
|
||||
if (link.download !== undefined) {
|
||||
// 支持下载属性
|
||||
const url = URL.createObjectURL(blob)
|
||||
link.setAttribute('href', url)
|
||||
link.setAttribute('download', 'data.csv')
|
||||
link.style.visibility = 'hidden'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.device-manage {
|
||||
display: flex;
|
||||
height: calc(100vh - 100px);
|
||||
|
||||
// overflow-y: auto;
|
||||
&-right {
|
||||
// overflow: auto;
|
||||
flex: 1;
|
||||
padding: 10px 10px 10px 0;
|
||||
|
||||
.el-descriptions__header {
|
||||
height: 36px;
|
||||
margin-bottom: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.device-manage-right {
|
||||
overflow: hidden;
|
||||
flex: 1 !important;
|
||||
height: calc(100vh - 135px);
|
||||
padding: 10px 10px 10px 10px;
|
||||
border: 2px solid #eeeeee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.el-descriptions__header {
|
||||
height: 36px;
|
||||
margin-bottom: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history_title {
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.monitor_info {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.history_header {
|
||||
display: flex;
|
||||
|
||||
.history_select {
|
||||
width: 65%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.el-select {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.history_searchBtn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.history_chart {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 600px) !important;
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
// ::v-deep .el-select {
|
||||
// width: 200px !important;
|
||||
// }
|
||||
</style>
|
||||
Reference in New Issue
Block a user