Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据方案一级页面联调

Browse Source
This commit is contained in:
zhujiyan
2024-06-18 16:35:53 +08:00
parent 8594659a3f
commit cdc640c4b2
7 changed files with 938 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
src/views/govern/terminal/planData/index.vue
View File

@@ -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="history_title">
<p>测试项信息</p>
<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 class="mb10" :column="4" border>
<el-descriptions-item label="测试项名称" width="160">
{{ item.itemName }}
</el-descriptions-item>
<el-descriptions-item label="PT变比" width="160">
{{ item.pt }}
</el-descriptions-item>
<el-descriptions-item label="CT变比" width="160">
{{ item.ct }}
</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.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="handleOpen(6)">
设备信息
</el-button>
</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
</el-tabs>
</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-descriptions class="mb10" :column="4" border>
<el-descriptions-item label="测试项名称">
{{ item.name+(index+1) }}
</el-descriptions-item>
<el-descriptions-item label="PT变比">
{{ echoName(item.devType, devTypeOptions) }}
</el-descriptions-item>
<el-descriptions-item label="CT变比">
{{ item.devAccessMethod }}
</el-descriptions-item>
<el-descriptions-item label="统计间隔">
{{ item.ndid }}
</el-descriptions-item>
<el-descriptions-item label="电压等级">
{{ echoName(item.devModel, devModelOptions) }}
</el-descriptions-item>
<el-descriptions-item label="接线方式">
{{ item.time }}
</el-descriptions-item>
<el-descriptions-item label="起始时间">
{{ item.time }}
</el-descriptions-item>
<el-descriptions-item label="结束时间">
{{ item.time }}
</el-descriptions-item>
<el-descriptions-item label="安装位置">
{{ echoName(item.devModel, devModelOptions) }}
</el-descriptions-item>
<el-descriptions-item label="操作">
<el-button type="primary" size="small" icon="el-icon-EditPen" @click="handleOpen(2)">
修改
</el-button>
<el-button type="primary" size="small" icon="el-icon-InfoFilled" @click="handleOpen(3)">
设备信息
</el-button>
</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
</el-tabs>
<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) {
loading.value = true
deviceData.value=[]
getDeviceData(e.id, 'rt').then((res: any) => {
// deviceData.value = res.data
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 = []
// 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>