指标越限程度取值修改
This commit is contained in:
@@ -15,13 +15,13 @@ import { mainHeight } from '@/utils/layout'
|
|||||||
import { limitExtentDayData } from '@/api/harmonic-boot/cockpit/cockpit'
|
import { limitExtentDayData } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
|
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
width: { type: [String, Number]},
|
width: { type: [String, Number] },
|
||||||
height: { type: [String, Number]},
|
height: { type: [String, Number] },
|
||||||
timeKey: { type: [String, Number]},
|
timeKey: { type: [String, Number] },
|
||||||
timeValue: { type: Object }
|
timeValue: { type: Object }
|
||||||
})
|
})
|
||||||
|
|
||||||
const pageHeight = ref(mainHeight(332))
|
const pageHeight = mainHeight(0, 2)
|
||||||
|
|
||||||
const dialogVisible: any = ref(false)
|
const dialogVisible: any = ref(false)
|
||||||
|
|
||||||
@@ -36,35 +36,26 @@ const echartList = ref()
|
|||||||
const init = () => {
|
const init = () => {
|
||||||
echartList.value = {
|
echartList.value = {
|
||||||
title: {
|
title: {
|
||||||
text: dialogText.value,
|
text: dialogText.value
|
||||||
textStyle: {
|
|
||||||
fontSize: 14,
|
|
||||||
rich: {
|
|
||||||
lineName: {
|
|
||||||
color: '#333',
|
|
||||||
fontSize: 14
|
|
||||||
},
|
},
|
||||||
timeLabel: {
|
legend: {
|
||||||
color: '#333',
|
itemWidth: 20,
|
||||||
fontSize: 14,
|
itemHeight: 20,
|
||||||
padding: [0, 0, 0, 10]
|
itemStyle: { opacity: 0 }, //去圆点
|
||||||
},
|
right: 70
|
||||||
name: {
|
|
||||||
color: '#333',
|
|
||||||
fontSize: 14,
|
|
||||||
padding: [0, 0, 0, 10]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'time',
|
||||||
data: []
|
axisLabel: {
|
||||||
},
|
formatter: {
|
||||||
yAxis: {
|
day: '{MM}-{dd}',
|
||||||
type: 'value',
|
month: '{MM}',
|
||||||
name: '数值'
|
year: '{yyyy}'
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
yAxis: [{}, {}],
|
||||||
grid: {
|
grid: {
|
||||||
left: '1%',
|
left: '1%',
|
||||||
right: '45px',
|
right: '45px',
|
||||||
@@ -112,12 +103,17 @@ const initData = async (row: any) => {
|
|||||||
|
|
||||||
// 处理每条相位数据
|
// 处理每条相位数据
|
||||||
const seriesData = res.data.map((item: any) => {
|
const seriesData = res.data.map((item: any) => {
|
||||||
const values = item.value.split(',').map((v: string) => parseFloat(v) || 0)
|
const values = xAxisData.map((time: string, index: number) => {
|
||||||
|
// 将传入的日期与时间拼接成完整的时间字符串
|
||||||
|
const fullTime = `${row.time} ${time}`
|
||||||
|
const value = parseFloat(item.value.split(',')[index]) || 0
|
||||||
|
return [fullTime, value]
|
||||||
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name: `${item.phasic}相`,
|
name: `${item.phasic}相`,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
showSymbol: true,
|
showSymbol: false,
|
||||||
smooth: true,
|
smooth: true,
|
||||||
data: values,
|
data: values,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
@@ -130,18 +126,17 @@ const initData = async (row: any) => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// 更新图表配置
|
// 更新图表配置
|
||||||
echartList.value.xAxis.data = xAxisData
|
|
||||||
echartList.value.options.series = seriesData
|
echartList.value.options.series = seriesData
|
||||||
|
// 注意:使用时间轴时不需要设置 xAxis.data
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {})
|
onMounted(() => {})
|
||||||
|
|
||||||
const open = async (row: any) => {
|
const open = async (row: any) => {
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
dialogTitle.value = row.name + '日趋势图'
|
dialogTitle.value = row.name + '日趋势图'
|
||||||
dialogText.value = `{lineName|${row.lineName}}{timeLabel|${row.time}}{name|${row.name}日趋势图}`
|
dialogText.value = `监测点:${row.lineName} 时间:${row.time} 指标:${row.name}`
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
initData(row)
|
initData(row)
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
isGroup
|
isGroup
|
||||||
></Table>
|
></Table>
|
||||||
<!-- 指标日趋势图 -->
|
<!-- 指标日趋势图 -->
|
||||||
<DailyTrendChart ref="dailyTrendChartRef" />
|
<DailyTrendChart v-if="dialogTrendChart" ref="dailyTrendChartRef" @close="dialogTrendChart = false" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -39,8 +39,7 @@ const prop = defineProps({
|
|||||||
|
|
||||||
const headerHeight = ref(57)
|
const headerHeight = ref(57)
|
||||||
|
|
||||||
const route = useRoute()
|
const dialogTrendChart = ref(false)
|
||||||
const timeCacheStore = useTimeCacheStore()
|
|
||||||
|
|
||||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||||
headerHeight.value = height
|
headerHeight.value = height
|
||||||
@@ -200,8 +199,11 @@ provide('tableStore', tableStore)
|
|||||||
|
|
||||||
// 点击行
|
// 点击行
|
||||||
const cellClickEvent = ({ row, column }: any) => {
|
const cellClickEvent = ({ row, column }: any) => {
|
||||||
|
dialogTrendChart.value = true
|
||||||
if (column.field == 'maxValue' && row.lineId) {
|
if (column.field == 'maxValue' && row.lineId) {
|
||||||
|
nextTick(() => {
|
||||||
dailyTrendChartRef.value.open(row)
|
dailyTrendChartRef.value.open(row)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<div
|
<div
|
||||||
:style="{
|
:style="{
|
||||||
height: `calc((${prop.height} - 57px) / 5) `,
|
height: `calc(${prop.height} / 5 ) `,
|
||||||
overflow: 'auto'
|
overflow: 'auto'
|
||||||
}"
|
}"
|
||||||
v-html="getTextForDate(data.day)"
|
v-html="getTextForDate(data.day)"
|
||||||
|
|||||||
@@ -157,7 +157,7 @@ const countOptions: any = ref([])
|
|||||||
const legendDictList: any = ref([])
|
const legendDictList: any = ref([])
|
||||||
|
|
||||||
const initCode = (field: string, title: string) => {
|
const initCode = (field: string, title: string) => {
|
||||||
queryByCode('steady_state_power_quality').then(res => {
|
queryByCode('steady_state_limit_trend').then(res => {
|
||||||
queryCsDictTree(res.data.id).then(item => {
|
queryCsDictTree(res.data.id).then(item => {
|
||||||
//排序
|
//排序
|
||||||
indexOptions.value = item.data.sort((a: any, b: any) => {
|
indexOptions.value = item.data.sort((a: any, b: any) => {
|
||||||
|
|||||||
@@ -157,7 +157,7 @@ const countOptions: any = ref([])
|
|||||||
const legendDictList: any = ref([])
|
const legendDictList: any = ref([])
|
||||||
|
|
||||||
const initCode = (field: string, title: string) => {
|
const initCode = (field: string, title: string) => {
|
||||||
queryByCode('steady_state_power_quality').then(res => {
|
queryByCode('steady_state_limit_trend').then(res => {
|
||||||
queryCsDictTree(res.data.id).then(item => {
|
queryCsDictTree(res.data.id).then(item => {
|
||||||
//排序
|
//排序
|
||||||
indexOptions.value = item.data.sort((a: any, b: any) => {
|
indexOptions.value = item.data.sort((a: any, b: any) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user