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-10-16 16:57:04 +08:00
parent 1f41ad6c2d
commit 10b8710832
6 changed files with 522 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/views/govern/device/control/tabs/trend.vue
View File

@@ -9,20 +9,43 @@
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="统计指标" label-width="80px">
<el-select multiple :multiple-limit="3" collapse-tags collapse-tags-tooltip
v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)">
<el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
<el-select
multiple
:multiple-limit="3"
collapse-tags
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
@change="onIndexChange($event)"
>
<el-option
v-for="item in indexOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<div v-for="(item, index) in countData" :key="index">
<el-form-item :label="item.name + '谐波次数'" v-if="item.countOptions.length != 0"
label-width="180px">
<el-select v-model="item.count" multiple collapse-tags collapse-tags-tooltip
@change="onCountChange($event, index)" placeholder="请选择谐波次数">
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
:value="vv"></el-option>
<el-form-item
:label="item.name + '谐波次数'"
v-if="item.countOptions.length != 0"
label-width="180px"
>
<el-select
v-model="item.count"
multiple
collapse-tags
collapse-tags-tooltip
@change="onCountChange($event, index)"
placeholder="请选择谐波次数"
>
<el-option
v-for="vv in item.countOptions"
:key="vv"
:label="vv"
:value="vv"
></el-option>
</el-select>
</el-form-item>
</div>
@@ -32,7 +55,6 @@
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
</template>
</TableHeader>
</div>
<div class="history_chart" :style="pageHeight" v-loading="loading">
<MyEchart ref="historyChart" :options="echartsData" />
@@ -192,14 +214,14 @@ const init = async () => {
let unitList: any = []
let groupedData = chartsList.reduce((acc, item) => {
let key = item.anotherName;
let key = item.anotherName
if (!acc[key]) {
acc[key] = [];
acc[key] = []
}
acc[key].push(item);
return acc;
acc[key].push(item)
return acc
}, {})
let result = Object.values(groupedData);
let result = Object.values(groupedData)
if (chartsList.length > 0) {
unitList = result.map((item: any) => {
return item[0].unit
@@ -208,7 +230,6 @@ const init = async () => {
echartsData.value = {
legend: {
itemWidth: 20,
itemHeight: 10,
itemGap: 15,
@@ -236,18 +257,15 @@ const init = async () => {
backgroundColor: 'rgba(0,0,0,0.35)',
borderWidth: 0,
formatter(params) {
const xname = params[0].value[0];
let str = `${xname}<br>`;
const xname = params[0].value[0]
let str = `${xname}<br>`
params.forEach((el, index) => {
str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value[1]}${el.value[2]}<br>`;
});
return str;
},
str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value[1]}${
el.value[2]
}<br>`
})
return str
}
},
color: ['#FFCC00', '#009900', '#CC0000', ...color],
xAxis: {
@@ -260,14 +278,10 @@ const init = async () => {
}
}
},
yAxis: [{
}],
yAxis: [{}],
options: {
series: [
]
series: []
}
}
if (chartsList.length > 0) {
@@ -275,7 +289,7 @@ const init = async () => {
unitList.forEach((item: any, index: any) => {
let right = {
position: 'right',
offset: (index - 1) * 80,
offset: (index - 1) * 80
}
echartsData.value.yAxis.push({
name: item,
@@ -283,8 +297,7 @@ const init = async () => {
splitNumber: 5,
minInterval: 1,
splitLine: {
show: false,
show: false
},
...(index > 0 ? right : null)
})
@@ -293,26 +306,26 @@ const init = async () => {
result.forEach((item: any, index: any) => {
let yMethodList: any = []
let ABCList = Object.values(item.reduce((acc, item) => {
let key = item.phase;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(item);
return acc;
}, {}));
ABCList.forEach((kk: any,) => {
let ABCList = Object.values(
item.reduce((acc, item) => {
let key = item.phase
if (!acc[key]) {
acc[key] = []
}
acc[key].push(item)
return acc
}, {})
)
ABCList.forEach((kk: any) => {
let seriesList: any = []
kk.forEach((cc: any) => {
if (cc.statisticalData) {
yMethodList.push(cc.statisticalData?.toFixed(2) - 0)
}
seriesList.push([cc.time, cc.statisticalData?.toFixed(2),cc.unit])
seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit])
})
echartsData.value.options.series.push({
name: kk[0].phase + '相' + item[0].anotherName,
type: 'line',
@@ -320,17 +333,11 @@ const init = async () => {
symbol: 'none',
data: seriesList,
yAxisIndex: index
})
})
let [min, max] = yMethod(yMethodList)
echartsData.value.yAxis[index].min = min
echartsData.value.yAxis[index].max = max
})
}
loading.value = false
@@ -350,7 +357,6 @@ const selectChange = (flag: boolean) => {
} else {
pageHeight.value = mainHeight(290)
}
}
//导出
const historyChart = ref()
@@ -521,7 +527,7 @@ const onCountChange = (val: any, index: any) => {
countData.value[index].count = [countData.value[index].countOptions[0]]
}
}
const onIndexChange = (val: any,) => {
const onIndexChange = (val: any) => {
if (val.length == 0) {
searchForm.value.index = [indexOptions.value[0].id]
}
@@ -551,7 +557,7 @@ watch(
}
)
// watch(
// () => trendRequestData.value,
// () => trendRequestData.value,
// (val: any, oldval: any) => {
// if (val) {
// init()