首页取消当日发电量
This commit is contained in:
fengrong
parent
86cb2fd092
commit
3946db15ba
@ -190,7 +190,7 @@
|
||||
<el-text class="mx-1 homelabel">功率趋势</el-text>
|
||||
<el-row :gutter="10">
|
||||
<el-col class="lg-mb-20" :span="24">
|
||||
<div class="power-chart" :ref="chartRefs.set"></div>
|
||||
<div class="power-chart" ref="powerChartRef"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -213,11 +213,11 @@
|
||||
<div class="summarize panelBg">
|
||||
<div class="summarize-title">
|
||||
<el-text class="mx-1 homelabel">发电量概况</el-text>
|
||||
<el-text class="mx-1" style="margin-bottom: 20px;">
|
||||
<!-- <el-text class="mx-1" style="margin-bottom: 20px;">
|
||||
当日发电量
|
||||
<span class="content-number" style="color: #0277B3;">{{realData.attributeMap.windfarmdayprodenergy}}</span>
|
||||
kWh
|
||||
</el-text>
|
||||
</el-text>-->
|
||||
</div>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="6">
|
||||
@ -276,14 +276,11 @@
|
||||
<el-text class="mx-1 homelabel">发电量趋势</el-text>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="24">
|
||||
<el-tabs v-model="activeName" class="demo-tabs trend-tabs" @tab-click="tabhandleClick" ref="userTab">
|
||||
<el-tab-pane label="日" name="first">
|
||||
<div class="trend-chart" :ref="chartRefs.set"></div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="月" name="second">
|
||||
<div class="trend-chart" :ref="chartRefs.set"></div>
|
||||
</el-tab-pane>
|
||||
<el-tabs v-model="trendChartType" class="demo-tabs trend-tabs" @tab-click="tabhandleClick" ref="userTab">
|
||||
<el-tab-pane label="日" name="day"> </el-tab-pane>
|
||||
<el-tab-pane label="月" name="month"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="trend-chart" ref="trendChartRef"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -318,38 +315,50 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {nextTick, onActivated, onMounted, reactive, ref, onBeforeMount, onUnmounted} from "vue";
|
||||
import {nextTick, onActivated, onMounted, reactive, ref, onBeforeMount, onUnmounted, VNodeRef} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { useTemplateRefsList,useEventListener } from '@vueuse/core'
|
||||
import {useI18n} from "vue-i18n";
|
||||
import WindContent from '/@/views/backend/home/windMatrix.vue'
|
||||
import {getWindFarmRealData,getWindTurbineMatrixData} from "/@/api/backend/dashboard.ts";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {getWindFarmRealData,getWindTurbineMatrixData,getRealValueRangeReq} from "/@/api/backend/dashboard.ts";
|
||||
import {dayjs, ElMessage, TableInstance} from "element-plus";
|
||||
import { getRealTimeState } from '/@/views/backend/equipment/airBlower/utils.ts'
|
||||
import {useRoute} from "vue-router";
|
||||
const route = useRoute()
|
||||
|
||||
|
||||
|
||||
const d = new Date()
|
||||
const { t } = useI18n()
|
||||
let timer = null
|
||||
let myTable = ref(null)
|
||||
let timer:any = null
|
||||
let myTable = ref<TableInstance>()
|
||||
|
||||
|
||||
const realData=ref({
|
||||
windFarmId: '',
|
||||
attributeMap: {}
|
||||
})
|
||||
|
||||
const formatAttributeValue=(value:any) => {
|
||||
if (value === undefined) {
|
||||
return '-';
|
||||
}
|
||||
if (typeof value !== 'number') {
|
||||
throw new Error('Invalid data type for attribute value');
|
||||
}
|
||||
return value % 1 === 0 ? value : value.toFixed(2);
|
||||
}
|
||||
const overviewList = () => {
|
||||
getWindFarmRealData().then((res) => {
|
||||
if (res.code == 200) {
|
||||
res.data.attributeMap.windfarmdayprodenergy= res.data.attributeMap.windfarmdayprodenergy !== undefined ? ( res.data.attributeMap.windfarmdayprodenergy % 1 === 0 ? res.data.attributeMap.windfarmdayprodenergy : res.data.attributeMap.windfarmdayprodenergy.toFixed(2)) : '-'
|
||||
res.data.attributeMap.windfarmmonthprodenergy=res.data.attributeMap.windfarmmonthprodenergy !== undefined ? ( res.data.attributeMap.windfarmmonthprodenergy % 1 === 0 ? res.data.attributeMap.windfarmmonthprodenergy : res.data.attributeMap.windfarmmonthprodenergy.toFixed(2)) : '-'
|
||||
res.data.attributeMap.windfarmactivepower= res.data.attributeMap.windfarmactivepower !== undefined ? ( res.data.attributeMap.windfarmactivepower % 1 === 0 ? res.data.attributeMap.windfarmactivepower : res.data.attributeMap.windfarmactivepower.toFixed(2)) : '-'
|
||||
res.data.attributeMap.windfarmavgwindspeed=res.data.attributeMap.windfarmavgwindspeed !== undefined ? ( res.data.attributeMap.windfarmavgwindspeed % 1 === 0 ? res.data.attributeMap.windfarmavgwindspeed : res.data.attributeMap.windfarmavgwindspeed.toFixed(2)) : '-'
|
||||
res.data.attributeMap.windfarmdayoperationhours=res.data.attributeMap.windfarmdayoperationhours !== undefined ? ( res.data.attributeMap.windfarmdayoperationhours % 1 === 0 ? res.data.attributeMap.windfarmdayoperationhours : res.data.attributeMap.windfarmdayoperationhours.toFixed(2)) : '-'
|
||||
res.data.attributeMap.windfarmmonthoperationhours=res.data.attributeMap.windfarmmonthoperationhours !== undefined ? ( res.data.attributeMap.windfarmmonthoperationhours % 1 === 0 ? res.data.attributeMap.windfarmmonthoperationhours : res.data.attributeMap.windfarmmonthoperationhours.toFixed(2)) : '-'
|
||||
res.data.attributeMap.windfarmyearprodenergy=res.data.attributeMap.windfarmyearprodenergy !== undefined ? ( res.data.attributeMap.windfarmyearprodenergy % 1 === 0 ? res.data.attributeMap.windfarmyearprodenergy : res.data.attributeMap.windfarmyearprodenergy.toFixed(2)) : '-'
|
||||
res.data.attributeMap.windfarmtotalprodenergy=res.data.attributeMap.windfarmtotalprodenergy !== undefined ? ( res.data.attributeMap.windfarmtotalprodenergy % 1 === 0 ? res.data.attributeMap.windfarmtotalprodenergy : res.data.attributeMap.windfarmtotalprodenergy.toFixed(2)) : '-'
|
||||
res.data.attributeMap.windfarmdayprodenergy= formatAttributeValue(res.data.attributeMap.windfarmdayprodenergy)
|
||||
res.data.attributeMap.windfarmmonthprodenergy=formatAttributeValue(res.data.attributeMap.windfarmmonthprodenergy)
|
||||
res.data.attributeMap.windfarmactivepower= formatAttributeValue(res.data.attributeMap.windfarmactivepower)
|
||||
res.data.attributeMap.windfarmavgwindspeed=formatAttributeValue(res.data.attributeMap.windfarmavgwindspeed)
|
||||
res.data.attributeMap.windfarmdayoperationhours=formatAttributeValue(res.data.attributeMap.windfarmdayoperationhours)
|
||||
res.data.attributeMap.windfarmmonthoperationhours=formatAttributeValue(res.data.attributeMap.windfarmmonthoperationhours)
|
||||
res.data.attributeMap.windfarmyearprodenergy=formatAttributeValue(res.data.attributeMap.windfarmyearprodenergy)
|
||||
res.data.attributeMap.windfarmtotalprodenergy=formatAttributeValue(res.data.attributeMap.windfarmtotalprodenergy)
|
||||
const data:any = {
|
||||
windFarmId: res.data.windFarmId,
|
||||
attributeMap: {
|
||||
@ -400,7 +409,6 @@ const StatusListData = () => {
|
||||
item.attributeMap.iwindspeed=item.attributeMap.iwindspeed !== undefined ? (item.attributeMap.iwindspeed % 1 === 0 ? item.attributeMap.iwindspeed : item.attributeMap.iwindspeed.toFixed(2)) : '--'
|
||||
item.attributeMap.igenpower=item.attributeMap.igenpower !== undefined ? (item.attributeMap.igenpower % 1 === 0 ? item.attributeMap.igenpower : item.attributeMap.igenpower.toFixed(2)) : '--'
|
||||
item.attributeMap.ikwhthisday=item.attributeMap.ikwhthisday !== undefined ? (item.attributeMap.ikwhthisday % 1 === 0 ? item.attributeMap.ikwhthisday : item.attributeMap.ikwhthisday.toFixed(2)) : '--'
|
||||
//item.attributeMap.nominalCapacity=item.attributeMap.nominalCapacity.toFixed(0)
|
||||
// 初始化计数器和累加器
|
||||
if (index === 0) {
|
||||
currentDayStatus.value.runNum = 0;
|
||||
@ -458,8 +466,6 @@ const StatusListData = () => {
|
||||
propertiesToFormat.forEach(property => {
|
||||
if (currentDayStatus.value[property] !== null && currentDayStatus.value[property] !== undefined) {
|
||||
currentDayStatus.value[property] = Number(currentDayStatus.value[property].toFixed(0));
|
||||
} else {
|
||||
console.warn(`Property ${property} is null or undefined`);
|
||||
}
|
||||
});
|
||||
return {
|
||||
@ -489,149 +495,147 @@ const StatusListData = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const chartRefs = useTemplateRefsList<HTMLDivElement>()
|
||||
const state: {
|
||||
charts: any[]
|
||||
charts: { powerChart: any; trendChart: any }
|
||||
remark: string
|
||||
workingTimeFormat: string
|
||||
pauseWork: boolean
|
||||
} = reactive({
|
||||
charts: [],
|
||||
charts: { powerChart: null, trendChart: null },
|
||||
remark: 'dashboard.Loading',
|
||||
workingTimeFormat: '',
|
||||
pauseWork: false,
|
||||
})
|
||||
const powerChartData = [
|
||||
{
|
||||
"power": 12.6,
|
||||
"windSpeed": 56.3,
|
||||
"dataTime": "2024-10-17 00:00:00"
|
||||
const powerChartRef = ref()
|
||||
/*const powerChartData: { time: any; values: any } = {
|
||||
time: {},
|
||||
values: {},
|
||||
}*/
|
||||
const powerChartData = {
|
||||
time: {
|
||||
iGenPower:['00:00','00:05','00:10','00:15'],
|
||||
iTheoreticalPower:['00:00','00:05','00:10','00:15'],
|
||||
iWindSpeed:['00:00','00:05','00:10','00:15']
|
||||
},
|
||||
{
|
||||
"power": 10.6,
|
||||
"windSpeed": 16.3,
|
||||
"dataTime": "2024-10-17 00:05:00"
|
||||
}
|
||||
]
|
||||
values: {
|
||||
iGenPower:[0,5,2,7],
|
||||
iTheoreticalPower:[0,0,0,0],
|
||||
iWindSpeed:[3,8,9,1]
|
||||
},
|
||||
}
|
||||
const initpowerChart = () => {
|
||||
const initpowerChart = echarts.init(chartRefs.value[0] as HTMLElement)
|
||||
const xAxisdata=[];
|
||||
const powerData=[];
|
||||
const windSpeedData=[]
|
||||
powerChartData.forEach((item, index) => {
|
||||
const dataTime=item.dataTime
|
||||
const dataTimearr=dataTime.split(' ')
|
||||
xAxisdata.push(dataTimearr[1])
|
||||
powerData.push(item.power)
|
||||
windSpeedData.push(item.windSpeed)
|
||||
const powerChart = state.charts.powerChart ?? echarts.init(powerChartRef.value as unknown as HTMLElement)
|
||||
const option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
left: 10,
|
||||
containLabel:true
|
||||
right: 23,
|
||||
bottom: 10,
|
||||
left: 18,
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine:{
|
||||
show:true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#dadada',
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
type: 'solid',
|
||||
},
|
||||
axisLabel: {//x轴文字的配置
|
||||
},
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
interval: 0,
|
||||
interval: 'auto',
|
||||
//rotate: 45
|
||||
},
|
||||
splitLine: {//分割线配置
|
||||
show:false,
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#999999',
|
||||
}
|
||||
},
|
||||
data: xAxisdata,
|
||||
},
|
||||
data: powerChartData.time.iTheoreticalPower,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '功率MW',
|
||||
nameTextStyle:{
|
||||
nameTextStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
axisLine:{
|
||||
show:false,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#dadada",
|
||||
color: '#dadada',
|
||||
width: 0,
|
||||
type: "solid"
|
||||
}
|
||||
type: 'solid',
|
||||
},
|
||||
axisLabel: {//x轴文字的配置
|
||||
},
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
}
|
||||
},
|
||||
axisTick:{show:false},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
interval: 50,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#dadada',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '风速m/s',
|
||||
nameTextStyle:{
|
||||
nameTextStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
axisLine:{
|
||||
show:false,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#dadada",
|
||||
color: '#dadada',
|
||||
width: 0,
|
||||
type: "solid"
|
||||
}
|
||||
type: 'solid',
|
||||
},
|
||||
axisLabel: {//x轴文字的配置
|
||||
},
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
}
|
||||
},
|
||||
axisTick:{show:false},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
interval: 50,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#dadada',
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
data: ['功率','风速'],
|
||||
data: ['功率', '风速'],
|
||||
textStyle: {
|
||||
color: '#73767a'
|
||||
color: '#73767a',
|
||||
},
|
||||
},
|
||||
series:[
|
||||
series: [
|
||||
{
|
||||
name: '功率',
|
||||
type: 'bar',
|
||||
@ -640,16 +644,18 @@ const initpowerChart = () => {
|
||||
color: '#00A7EB',
|
||||
barBorderRadius: 2
|
||||
},
|
||||
data: powerData
|
||||
|
||||
},{
|
||||
data: powerChartData.values?.iGenPower ?? [],
|
||||
},
|
||||
{
|
||||
name: '风速',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: '#FF7E00',
|
||||
barBorderRadius: 2
|
||||
barBorderRadius: 2,
|
||||
},
|
||||
smooth: 0.6,
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
@ -658,82 +664,96 @@ const initpowerChart = () => {
|
||||
}
|
||||
])
|
||||
},
|
||||
data: windSpeedData
|
||||
data: powerChartData.values?.iWindSpeed ?? [],
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
}
|
||||
initpowerChart.setOption(option)
|
||||
state.charts.push(initpowerChart)
|
||||
});
|
||||
|
||||
powerChart.setOption(option)
|
||||
state.charts.powerChart = powerChart
|
||||
}
|
||||
|
||||
const TrendData=[
|
||||
|
||||
|
||||
const trendChartRef = ref<VNodeRef>()
|
||||
const TrendDataForDay = [
|
||||
{
|
||||
"currentPeriod": 56.3,
|
||||
"samePeriod": 63.5,
|
||||
"generationTime": "2024-10-01"
|
||||
currentPeriod: 86.3,
|
||||
samePeriod: 63.5,
|
||||
generationTime: '2024-10-01',
|
||||
},
|
||||
{
|
||||
"currentPeriod": 66.3,
|
||||
"samePeriod": 73.5,
|
||||
"generationTime": "2024-10-02"
|
||||
currentPeriod: 86.3,
|
||||
samePeriod: 53.5,
|
||||
generationTime: '2024-10-02',
|
||||
},
|
||||
{
|
||||
"currentPeriod": 66.3,
|
||||
"samePeriod": 73.5,
|
||||
"generationTime": "2024-10-03"
|
||||
}
|
||||
currentPeriod: 86.3,
|
||||
samePeriod: 43.5,
|
||||
generationTime: '2024-10-03',
|
||||
},
|
||||
]
|
||||
const TrendDataForMonth = [
|
||||
{
|
||||
currentPeriod: 26.3,
|
||||
samePeriod: 53.5,
|
||||
generationTime: '2024-10-01',
|
||||
},
|
||||
{
|
||||
currentPeriod: 36.3,
|
||||
samePeriod: 53.5,
|
||||
generationTime: '2024-10-02',
|
||||
},
|
||||
{
|
||||
currentPeriod: 46.3,
|
||||
samePeriod: 53.5,
|
||||
generationTime: '2024-10-03',
|
||||
},
|
||||
]
|
||||
const timeType="日"
|
||||
|
||||
const inittrendChart = (t,u) => {
|
||||
const currentPeriod=[];
|
||||
const samePeriod=[]
|
||||
const xAxisdata=[]
|
||||
TrendData.forEach((item, index) => {
|
||||
const generationTime=item.generationTime
|
||||
const generationTimearr=generationTime.split('-')
|
||||
xAxisdata.push(generationTimearr[2])
|
||||
currentPeriod.push(item.currentPeriod)
|
||||
samePeriod.push(item.samePeriod)
|
||||
const inittrendChart = (type: 'day' | 'month') => {
|
||||
const currentPeriod: any =
|
||||
type === 'day' ? TrendDataForDay.map((item) => item.currentPeriod) : TrendDataForMonth.map((item) => item.currentPeriod)
|
||||
const samePeriod: any = type === 'day' ? TrendDataForDay.map((item) => item.samePeriod) : TrendDataForMonth.map((item) => item.samePeriod)
|
||||
const xAxisdata: any = type === 'day' ? TrendDataForDay.map((item) => item.generationTime) : TrendDataForMonth.map((item) => item.generationTime)
|
||||
const trendChart = state.charts?.trendChart ?? echarts.init(trendChartRef.value as unknown as HTMLElement)
|
||||
|
||||
const inittrendChart = echarts.init(chartRefs.value[u] as HTMLElement)
|
||||
const option = {
|
||||
grid: {
|
||||
top: 30,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
left: 25,
|
||||
borderColor:'#dadada'
|
||||
borderColor: '#dadada',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine:{
|
||||
show:true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#dadada',
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
type: 'solid',
|
||||
},
|
||||
axisLabel: {//x轴文字的配置
|
||||
},
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
}
|
||||
},
|
||||
splitLine: {//分割线配置
|
||||
show:false,
|
||||
},
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#999999',
|
||||
}
|
||||
},
|
||||
},
|
||||
data: xAxisdata,
|
||||
},
|
||||
@ -741,73 +761,72 @@ const inittrendChart = (t,u) => {
|
||||
{
|
||||
type: 'value',
|
||||
name: 'kWh',
|
||||
nameTextStyle:{
|
||||
nameTextStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
axisLine:{
|
||||
show:false,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#dadada",
|
||||
color: '#dadada',
|
||||
width: 0,
|
||||
type: "solid"
|
||||
}
|
||||
type: 'solid',
|
||||
},
|
||||
axisLabel: {//x轴文字的配置
|
||||
},
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
}
|
||||
},
|
||||
axisTick:{show:false},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
interval: 50,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#dadada',
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
data: ['本期','同期'],
|
||||
data: ['本期', '同期'],
|
||||
textStyle: {
|
||||
color: '#73767a',
|
||||
},
|
||||
},
|
||||
series:
|
||||
[
|
||||
series: [
|
||||
{
|
||||
name: '本期',
|
||||
data: currentPeriod,
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: '#0277B3'
|
||||
}
|
||||
},{
|
||||
color: '#0277B3',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '同期',
|
||||
data: samePeriod,
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: '#00A096'
|
||||
}
|
||||
color: '#00A096',
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
}
|
||||
inittrendChart.setOption(option)
|
||||
state.charts.push(inittrendChart)
|
||||
})
|
||||
trendChart.setOption(option)
|
||||
state.charts.trendChart = trendChart
|
||||
}
|
||||
|
||||
|
||||
const echartsResize = () => {
|
||||
nextTick(() => {
|
||||
for (const key in state.charts) {
|
||||
const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
|
||||
chartKeys.forEach((key) => {
|
||||
state.charts[key].resize()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
onActivated(() => {
|
||||
@ -876,9 +895,69 @@ const createScroll = () => {
|
||||
}, 30)
|
||||
}
|
||||
|
||||
const getChartData = () => {
|
||||
powerChartData.time = {
|
||||
iGenPower:['00:00','00:05','00:10','00:15'],
|
||||
iTheoreticalPowe:['00:00','00:05','00:10','00:15'],
|
||||
iWindSpeed:['00:00','00:05','00:10','00:15']
|
||||
}
|
||||
powerChartData.values = {
|
||||
iGenPower:[0,5,2,7],
|
||||
iTheoreticalPowe:[0,0,0,0],
|
||||
iWindSpeed:[3,8,9,1]
|
||||
}
|
||||
/*return new Promise((resolve) => {
|
||||
const data = {
|
||||
startTime: new Date(new Date().toLocaleDateString()).getTime(),
|
||||
endTime: Date.now(),
|
||||
devices: [
|
||||
{
|
||||
//deviceId: route.query.irn as string,
|
||||
deviceId: '1846101273013739522',
|
||||
attributes: ['iGenPower', 'iTheoreticalPower', 'iWindSpeed'],
|
||||
},
|
||||
],
|
||||
interval: '5m',
|
||||
}
|
||||
getRealValueRangeReq(data).then((res) => {
|
||||
console.log(res)
|
||||
if (res.success) {
|
||||
//const data = res.data[route.query.irn as string]
|
||||
const data = res.data['1846101273013739522']
|
||||
const rangeKeys = Object.keys(data)
|
||||
const times: any = {}
|
||||
const val: any = {}
|
||||
rangeKeys.forEach((key) => {
|
||||
times[key] = []
|
||||
val[key] = []
|
||||
data[key].times.forEach((item: number, index: number) => {
|
||||
times[key].push(dayjs(item).format('HH:mm'))
|
||||
})
|
||||
data[key].values.forEach((item: number) => {
|
||||
val[key].push(item)
|
||||
})
|
||||
})
|
||||
powerChartData.time = times
|
||||
powerChartData.values = val
|
||||
resolve(true)
|
||||
}
|
||||
})
|
||||
})*/
|
||||
}
|
||||
|
||||
const trendChartType = ref<'day' | 'month'>('day')
|
||||
const tabhandleClick = () => {
|
||||
state.charts.trendChart.clear()
|
||||
nextTick(() => {
|
||||
inittrendChart(trendChartType.value)
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
inittrendChart('日','1')
|
||||
|
||||
/* getChartData().then(() => {
|
||||
initpowerChart()
|
||||
})*/
|
||||
inittrendChart(trendChartType.value)
|
||||
initpowerChart()
|
||||
createScroll()
|
||||
overviewList()
|
||||
@ -886,24 +965,12 @@ onMounted(() => {
|
||||
autoUpdate()
|
||||
useEventListener(window, 'resize', echartsResize)
|
||||
})
|
||||
onBeforeMount(() => {
|
||||
/*onBeforeMount(() => {
|
||||
for (const key in state.charts) {
|
||||
state.charts[key].dispose()
|
||||
}
|
||||
})
|
||||
})*/
|
||||
const activeName = ref('first')
|
||||
const tabhandleClick = (tabName) => {
|
||||
setTimeout(() => {
|
||||
echartsResize()
|
||||
}, 10)
|
||||
debugger
|
||||
if(tabName.props.label=="日"){
|
||||
inittrendChart('日','1')
|
||||
}else if(tabName.props.label=="月"){
|
||||
inittrendChart('月','2')
|
||||
}
|
||||
|
||||
}
|
||||
let autoUpdateTimer: any = null
|
||||
const autoUpdate = () => {
|
||||
if (!autoUpdateTimer) {
|
||||
@ -916,6 +983,10 @@ const autoUpdate = () => {
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
autoUpdateTimer && clearInterval(autoUpdateTimer)
|
||||
const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
|
||||
chartKeys.forEach((key) => {
|
||||
state.charts[key].dispose()
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user