修改 bug
This commit is contained in:
@@ -1,29 +1,22 @@
|
||||
<!-- 谐波频谱 -->
|
||||
<template>
|
||||
<div class="harmonic">
|
||||
<div class="harmonic" :style="heightTop">
|
||||
<div class="harmonic_select">
|
||||
<el-form :model="searchForm" class="history_select" id="history_select">
|
||||
<el-form :model="searchForm" id="history_select">
|
||||
<el-form-item label="稳态指标">
|
||||
<el-select
|
||||
multiple
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
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 multiple collapse-tags collapse-tags-tooltip 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-button type="primary" :loading="loading" @click="init">查询</el-button>
|
||||
</el-form>
|
||||
<el-button type="primary" :loading="loading" @click="init">查询</el-button>
|
||||
|
||||
</div>
|
||||
<div class="harmonic_body" v-loading="loading">
|
||||
<div class="harmonic_body_charts" v-for="(item, index) in chartsList" :key="index">
|
||||
<div class="harmonic_body_charts" :style="{ height: height }" v-for="(item, index) in chartsList"
|
||||
:key="index">
|
||||
<p class="charts_title">
|
||||
{{
|
||||
indexOptions.find((item: any) => {
|
||||
@@ -42,6 +35,7 @@ import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictT
|
||||
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { getDeviceHarmonicSpectrumData, getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery.ts'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
const searchForm: any = ref({})
|
||||
searchForm.value = {
|
||||
index: []
|
||||
@@ -58,6 +52,8 @@ queryByCode('portable-harmonic').then(res => {
|
||||
legendDictList.value = vv.data
|
||||
})
|
||||
})
|
||||
const heightTop = mainHeight(275)
|
||||
let height: any = mainHeight(275).height
|
||||
//谐波频谱参数
|
||||
const params: any = ref({})
|
||||
const getHarmonicSpectrumParams = (val: any) => {
|
||||
@@ -79,6 +75,7 @@ const init = () => {
|
||||
})
|
||||
//查询谐波频谱
|
||||
getDeviceHarmonicSpectrumData(params.value).then(res => {
|
||||
res.data.length > 3 ? height = mainHeight(275, 3 ).height : height = mainHeight(275, res.data.length ).height
|
||||
chartsList.value = res.data
|
||||
//数据根据相别组装成新数组
|
||||
chartsList.value.map((item: any) => {
|
||||
@@ -98,6 +95,8 @@ const init = () => {
|
||||
return
|
||||
})
|
||||
|
||||
|
||||
|
||||
//循环渲染图表
|
||||
chartsList.value &&
|
||||
chartsList.value.map((item: any, index: any) => {
|
||||
@@ -112,12 +111,12 @@ const init = () => {
|
||||
// text: item.showName
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: '16%',
|
||||
bottom: '15%', //也可设置left和right设置距离来控制图表的大小
|
||||
left: '3%',
|
||||
right: '4%'
|
||||
},
|
||||
// grid: {
|
||||
// top: '16%',
|
||||
// bottom: '15%', //也可设置left和right设置距离来控制图表的大小
|
||||
// left: '3%',
|
||||
// right: '4%'
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@@ -225,37 +224,42 @@ watch(
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
onMounted(() => {})
|
||||
onMounted(() => { })
|
||||
defineExpose({ getHarmonicSpectrumParams })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.harmonic {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.harmonic_select {
|
||||
width: 50%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
top: -32px;
|
||||
left: 0;
|
||||
justify-content: flex-start;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.harmonic_body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 200px;
|
||||
|
||||
// padding-bottom: 200px;
|
||||
.harmonic_body_charts {
|
||||
height: 200px;
|
||||
margin: 15px 0;
|
||||
|
||||
// margin: 15px 0;
|
||||
border: 1px solid #eee;
|
||||
position: relative;
|
||||
|
||||
.charts_title {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<!-- 实时数据 - 实时趋势 -->
|
||||
<template>
|
||||
<div class="realtrend">
|
||||
qwww
|
||||
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
|
||||
<div v-loading="loading">
|
||||
@@ -13,7 +12,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table" >
|
||||
<ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
|
||||
<span v-for="(key, keys) in table">
|
||||
<li v-if="keys != 0">
|
||||
@@ -151,6 +150,7 @@ const findRealTrendDataByGroupId = (obj: any) => {
|
||||
item.unshift({ value: myColumns.value[index].title, count: '' })
|
||||
})
|
||||
newTableList.value = list
|
||||
console.log("🚀 ~ getDeviceTrendData ~ newTableList.value:", newTableList.value)
|
||||
loading.value = false
|
||||
init()
|
||||
})
|
||||
@@ -209,19 +209,22 @@ const init = () => {
|
||||
// backgroundColor: '#0f375f',
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
type: 'inside',
|
||||
height: 13,
|
||||
start: 0,
|
||||
bottom: '20px',
|
||||
end: 20
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 20
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: '14%',
|
||||
bottom: '22%', //也可设置left和right设置距离来控制图表的大小
|
||||
bottom: '70px', //也可设置left和right设置距离来控制图表的大小
|
||||
left: '3%',
|
||||
right: '5%'
|
||||
},
|
||||
@@ -327,19 +330,21 @@ const handleClick = (tab: any, event: any) => {
|
||||
findRealTrendDataByGroupId(params.value)
|
||||
init()
|
||||
}
|
||||
onMounted(() => {})
|
||||
onMounted(() => { })
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.realtrend {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.realtrend_top {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.thead {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
@@ -349,6 +354,7 @@ defineExpose({ open })
|
||||
width: auto;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
|
||||
li {
|
||||
flex: none;
|
||||
width: 100px;
|
||||
@@ -357,18 +363,25 @@ defineExpose({ open })
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li:nth-child(1) {
|
||||
flex: none;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul:nth-child(1) {
|
||||
li {
|
||||
font-weight: 800;
|
||||
background: #f4f6f9;
|
||||
}
|
||||
}
|
||||
ul:nth-child(4) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
flex: 1;
|
||||
// min-height: 80px;
|
||||
@@ -379,10 +392,12 @@ defineExpose({ open })
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
width: auto;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
|
||||
li {
|
||||
flex: none;
|
||||
width: 100px;
|
||||
@@ -392,6 +407,7 @@ defineExpose({ open })
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul:nth-child(1) {
|
||||
li {
|
||||
font-weight: 800;
|
||||
@@ -399,35 +415,40 @@ defineExpose({ open })
|
||||
}
|
||||
}
|
||||
}
|
||||
.table::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// .table::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.reverse-table .vxe-body--row .vxe-body--column:first-child {
|
||||
background-color: #f8f8f9;
|
||||
}
|
||||
|
||||
::v-deep .vxe-table--render-wrapper {
|
||||
height: 90px !important;
|
||||
max-height: 90px !important;
|
||||
overflow-x: auto !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .body--wrapper {
|
||||
height: 90px !important;
|
||||
max-height: 90px !important;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
.tab_info {
|
||||
width: 100%;
|
||||
height: calc(100vh - 450px);
|
||||
|
||||
// overflow: auto;
|
||||
// padding-bottom: 20px;
|
||||
.charts {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
height: calc(100vh - 550px);
|
||||
height: calc(100vh - 600px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user