方案数据统计指标选择后谐波次数下拉框问题修改

This commit is contained in:
zhujiyan
2024-09-23 13:48:00 +08:00
parent e0745fb66f
commit 8a91d86646
3 changed files with 79 additions and 611 deletions

View File

@@ -3,9 +3,9 @@
<!-- @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>
<el-descriptions size="small" title="方案信息" class="mb10" :column="2" border>
<template #extra>
<el-button type="primary" @click="handleOpen(0, '')">新增方案</el-button>
<el-button type="primary" icon="el-icon-Plus" @click="handleOpen(0, '')">新增方案</el-button>
<el-button type="primary" icon="el-icon-Download" @click="handleExport">数据导出</el-button>
</template>
<el-descriptions-item label="方案名称" width="60">
@@ -19,14 +19,20 @@
<div class="history_title">
<p>测试项信息</p>
</div>
<el-tabs v-model="activeName" type="border-card">
<el-tabs v-model="activeName" type="border-card" @click="init()">
<el-tab-pane
v-for="(item, index) in deviceData.records"
:label="item.itemName"
:name="item.id"
:key="index"
>
<el-descriptions value="small" class="mb10" :column="6" border>
<template #label>
<span class="custom-tabs-label">
<el-icon><TrendCharts /></el-icon>
<span>{{ item.itemName }}</span>
</span>
</template>
<el-descriptions size="small" class="mb10" width="180" :column="4" border>
<el-descriptions-item label="测试项名称" width="160">
{{ item.itemName }}
</el-descriptions-item>
@@ -103,6 +109,7 @@
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
@change="init()"
>
<el-option
v-for="item in indexOptions"
@@ -112,18 +119,17 @@
></el-option>
</el-select>
</el-form-item>
<!-- {{ countData }} -->
<div v-for="(item, index) in countData" :key="index">
<el-form-item
:label="item.name + '谐波次数'"
v-if="item.countOptions.length != 0"
label-width="180px"
>
<!-- :label="item.name + '谐波次数'" label-width="180px"-->
<el-form-item label="谐波次数" v-if="item.countOptions.length != 0">
<!-- multiple -->
<el-select
v-model="item.count"
collapse-tags
collapse-tags-tooltip
placeholder="请选择谐波次数"
style="width: 100px"
>
<el-option
v-for="vv in item.countOptions"
@@ -149,8 +155,8 @@
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
</div>
</div>
<div class="history_chart" v-loading="loading" v-show="echartsData">
<MyEchart ref="historyChart" :isExport="true" :options="echartsData" />
<div class="history_chart" v-loading="loading">
<MyEchart ref="historyChart" v-show="echartsData" :isExport="true" :options="echartsData" />
</div>
</div>
<el-empty v-else description="请选择设备" class="device-manage-right" />
@@ -169,9 +175,7 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData'
import { useDictData } from '@/stores/dictData'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import * as echarts from 'echarts'
import { isNonNullChain } from 'typescript'
import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
import { TrendCharts, Plus } from '@element-plus/icons-vue'
const dictData = useDictData()
defineOptions({
name: 'govern/device/manage'
@@ -222,6 +226,7 @@ queryByCode('portable-harmonic').then(res => {
})
queryStatistical(res.data.id).then(vv => {
legendDictList.value = vv.data
console.log(legendDictList.value, '2362636236636366263636', vv)
})
})
const activeName: any = ref()
@@ -237,7 +242,7 @@ const nodeClick = async (e: anyObj) => {
let id = e.pid ? e.pid : e.id
//查询测试项信息
try {
await getTestRecordInfo(id).then(res => {
getTestRecordInfo(id).then(res => {
deviceData.value = res.data
loading.value = false
if (res.data.records.length == 1) {
@@ -256,7 +261,7 @@ const nodeClick = async (e: anyObj) => {
} catch (error) {
loading.value = false
}
init()
await init()
}
const dialogRef = ref()
const handleOpen = (val: any, id: any) => {
@@ -273,20 +278,8 @@ const refreshTree = () => {
const range = (start: any, end: any, step: any) => {
return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
}
const init = async () => {
// 选择指标的时候切换legend内容和data数据
const init = () => {
let list: any = []
legendDictList.value?.selectedList?.map((item: any) => {
// searchForm.value.index.map((vv: any) => {
// if (item.dataType == vv) {
// list.push(item.eleEpdPqdVOS)
// }
// })
if (item.dataType == searchForm.value.index) {
list.push(item.eleEpdPqdVOS)
}
})
//颜色数组
const colorList = [
'#DAA521',
@@ -302,7 +295,14 @@ const init = async () => {
'#1DD0CE',
'cadetblue'
]
if (historyDevId.value) {
if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
// 选择指标的时候切换legend内容和data数据
legendDictList.value?.selectedList?.map((item: any) => {
if (item.dataType == searchForm.value.index) {
list.push(item.eleEpdPqdVOS)
}
})
console.log(legendDictList.value, '2362636236636366263636')
//选择的指标使用方法处理
initSearchFormIndexAndCount([searchForm.value.index])
//查询历史趋势
@@ -322,8 +322,8 @@ const init = async () => {
} else {
middleTitle = ''
}
let indexList=[]
indexList=[searchForm.value.index]
let indexList = []
indexList = [searchForm.value.index]
chartTitle.value = deviceData.value.itemName + '_' + middleTitle + '_'
indexList.map((item: any, indexs: any) => {
indexOptions.value.map((vv: any) => {
@@ -346,8 +346,8 @@ const init = async () => {
valueType: searchForm.value.type
}
try {
await getHistoryTrend(obj)
.then(res => {
getHistoryTrend(obj)
.then((res: any) => {
if (res.code == 'A0000') {
historyDataList.value = res.data
echartsData.value = null
@@ -358,15 +358,14 @@ const init = async () => {
'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 = [],
timeList: any = []
let unitList: any = []
timeList: any = [],
unitList: any = []
historyDataList.value.map((item: any) => {
timeList.push(item.time)
if (unitList.indexOf(item.unit) == -1) {
unitList.push(item.unit)
}
})
console.log(timeList, '+++++++++++')
xAxis = timeList.sort((a: any, b: any) => {
return (
a.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') -
@@ -437,7 +436,7 @@ const init = async () => {
left: '3%',
right: '3%',
bottom: '10%',
top: '5%',
top: '8%',
containLabel: true
},
xAxis: [
@@ -758,30 +757,34 @@ const initSearchFormIndexAndCount = (list: any) => {
if (kk.harmStart && kk.harmEnd) {
range(0, 0, 0)
countData.value[index].countOptions = range(kk.harmStart, kk.harmEnd, 1)
countData.value[index].count = countData.value[index].countOptions[0]
}
})
}
})
})
console.log(countData.value, '66666666', legendDictList.value)
}
}
watch(
() => [searchForm.value.index],
() => searchForm.value.index,
(val: any, oldval: any) => {
if (val) {
initSearchFormIndexAndCount(val)
if (val == 0) {
countData.value = []
}
let list = [val]
// initSearchFormIndexAndCount(list)
// if (val == 0) {
// countData.value = []
// }
countData.value.map((item: any, key: any) => {
if (
val.findIndex((vv: any) => {
list.findIndex((vv: any) => {
return vv == item.index
}) == -1
) {
countData.value.splice(key, 1)
}
})
init()
}
},
{
@@ -790,6 +793,13 @@ watch(
}
)
onMounted(() => {
loading.value = true
setTimeout(() => {
init()
loading.value = false
}, 1500)
// initSearchFormIndexAndCount([searchForm.value.index])
})
</script>
@@ -829,15 +839,14 @@ onMounted(() => {
}
}
}
.history_title {
width: 100%;
p {
height: 32px;
line-height: 32px;
font-size: 16px;
font-size: 14px;
font-weight: bold;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
}
}
@@ -846,7 +855,7 @@ onMounted(() => {
.el-tabs__content {
padding: 0 !important;
max-height: 160px !important;
max-height: 130px !important;
}
}
.history_header {
@@ -856,12 +865,15 @@ onMounted(() => {
width: 95%;
display: flex;
justify-content: flex-start;
overflow: auto;
height: 45px;
// overflow-x: auto;
// height: 45px;
// padding-top: 18px;
// flex-wrap: wrap;
.el-form-item {
flex: none;
max-width: 380px !important;
display: flex;
align-items: center;
}
.el-select {
margin-right: 10px;
@@ -884,6 +896,6 @@ onMounted(() => {
}
::v-deep .el-select {
width: 200px !important;
width: 120px !important;
}
</style>