终端管理-数据方案页面

This commit is contained in:
zhujiyan
2024-06-14 16:00:23 +08:00
parent 730512468a
commit 2ce6656e0b
6 changed files with 381 additions and 120 deletions

View File

@@ -2,49 +2,67 @@
<div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
<div class="device-manage-right" v-if="deviceData">
<el-descriptions title="测试项信息" class="mb10" :column="4" border>
<el-descriptions title="方案信息" class="mb10" :column="4" border>
<template #extra>
<el-button type="primary" icon="el-icon-Plus" @click="handleOpen(0)">新增方案</el-button>
<el-button type="primary" icon="el-icon-Plus" @click="handleOpen(1)">
<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>
</template>
<el-descriptions-item label="测试项名称">
{{ deviceData.name }}
<el-descriptions-item label="方案名称">
{{ deviceData[0]?.name }}
</el-descriptions-item>
<el-descriptions-item label="PT变比">
{{ echoName(deviceData.devType, devTypeOptions) }}
</el-descriptions-item>
<el-descriptions-item label="CT变比">
{{ deviceData.devAccessMethod }}
</el-descriptions-item>
<el-descriptions-item label="统计间隔">
{{ deviceData.ndid }}
</el-descriptions-item>
<el-descriptions-item label="电压等级">
{{ echoName(deviceData.devModel, devModelOptions) }}
</el-descriptions-item>
<el-descriptions-item label="接线方式">
{{ deviceData.time }}
</el-descriptions-item>
<el-descriptions-item label="起始时间">
{{ deviceData.time }}
</el-descriptions-item>
<el-descriptions-item label="结束时间">
{{ deviceData.time }}
</el-descriptions-item>
<el-descriptions-item label="安装位置">
{{ echoName(deviceData.devModel, devModelOptions) }}
</el-descriptions-item>
<el-descriptions-item label="操作">
<el-button type="primary" icon="el-icon-EditPen" @click="handleOpen(2)">修改</el-button>
<el-button type="primary" icon="el-icon-InfoFilled" @click="handleOpen(3)">
设备信息
</el-button>
<el-descriptions-item label="方案描述">
{{ echoName(deviceData[0]?.devType, devTypeOptions) }}
</el-descriptions-item>
</el-descriptions>
<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-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>
@@ -72,8 +90,10 @@
</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" icon="el-icon-Download" @click="handleExport">报表导出</el-button>
<el-button type="primary" size="small" 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="history_chart">
@@ -125,7 +145,7 @@ const pageHeight = mainHeight(20)
const loading = ref(true)
const tableLoading = ref(false)
const getGroupLoading = ref(false)
const deviceData = ref<any>(null)
const deviceData = ref<any>([])
const dataSet = ref('')
const devTypeOptions = ref([])
const devModelOptions = ref([])
@@ -150,6 +170,7 @@ const rankOptions = ref([
label: '3级'
}
])
const activeName: any = ref()
const nodeClick = (e: anyObj) => {
if (!e) {
loading.value = false
@@ -157,9 +178,15 @@ const nodeClick = (e: anyObj) => {
}
if (e.level == 2) {
loading.value = true
deviceData.value=[]
getDeviceData(e.id, 'rt').then((res: any) => {
deviceData.value = res.data
// 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 = []
@@ -171,14 +198,14 @@ const nodeClick = (e: anyObj) => {
}
}
const handleClick = () => {
tableLoading.value = true
tableData.value = []
setTimeout(() => {
// getTargetById(dataSet.value).then(res => {
// tableData.value = res.data
// tableLoading.value = false
// })
}, 100)
// 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 => {
@@ -331,31 +358,6 @@ const init = () => {
}
}
],
dataZoom: [
{
type: 'inside',
show: true,
realtime: true,
start: 0,
end: 100
},
{
type: 'slider',
realtime: true,
start: 0,
end: 100,
textStyle: {
// color: 'white'
},
bottom: 0,
borderColor: '#0e2038',
dataBackground: {
areaStyle: {
// color: 'white'
}
}
}
],
series: [
{
name: 'A相',
@@ -462,7 +464,8 @@ onMounted(() => {
.device-manage-right {
overflow: hidden;
flex: 1 !important;
padding: 10px 10px 10px 0;
padding: 10px 10px 10px 10px;
border: 2px solid #eeeeee;
.el-descriptions__header {
height: 36px;
margin-bottom: 7px;
@@ -498,7 +501,10 @@ onMounted(() => {
}
.history_chart {
width: 100%;
height: calc(100vh - 400px);
height: calc(100vh - 530px);
margin-top: 10px;
}
::v-deep .el-select{
width:200px !important;
}
</style>