风机列表：添加已锁定状态
设备清单：修改设备时禁止修改物模型 单风机：重构图表初始化，添加风频图、添加趋势图、添加已锁定状态与解锁按钮
This commit is contained in:
高云鹏
parent
d6c387bd05
commit
8a70c54c3d
@ -102,13 +102,15 @@
|
||||
<div class="matrix panelBg">
|
||||
<div class="Fan-control">
|
||||
<div class="control-type">
|
||||
<el-tag v-if="realTimeData.locked === 1" class="control-tag control-tag-left" type="primary">已锁定</el-tag>
|
||||
<el-tag class="control-tag" type="primary">{{ realTimeDataState }}</el-tag>
|
||||
</div>
|
||||
<div class="btnLeft">
|
||||
<el-button class="control-btn" type="primary">启动</el-button>
|
||||
<el-button class="control-btn" type="primary">停机</el-button>
|
||||
<el-button v-if="realTimeData.iturbineoperationmode !== 16" class="control-btn" type="primary">启动</el-button>
|
||||
<el-button v-else class="control-btn" type="primary">停机</el-button>
|
||||
<el-button class="control-btn" type="primary">复位</el-button>
|
||||
<el-button class="control-btn" type="primary">锁定</el-button>
|
||||
<el-button v-if="realTimeData.locked !== 1" class="control-btn" type="primary">锁定</el-button>
|
||||
<el-button v-else class="control-btn" type="primary">解锁</el-button>
|
||||
</div>
|
||||
<el-tooltip content="变桨/轮毂系统">
|
||||
<div @click="openSubSystem(1)" class="dot index-1"></div>
|
||||
@ -204,7 +206,7 @@
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div>
|
||||
<span class="content-number">{{ realTimeDataForSingle?.monthGeneration ?? '-' }}</span>
|
||||
<span class="content-number">{{ realTimeDataForSingle.windfarmmonthprodenergy }}</span>
|
||||
</div>
|
||||
<div><span>万kWh</span></div>
|
||||
<div><span>月发电量</span></div>
|
||||
@ -218,7 +220,7 @@
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div>
|
||||
<span class="content-number">{{ realTimeDataForSingle?.yearGeneration ?? '-' }}</span>
|
||||
<span class="content-number">{{ realTimeDataForSingle.windfarmyearprodenergy }}</span>
|
||||
</div>
|
||||
<div><span>万kWh</span></div>
|
||||
<div><span>年发电量</span></div>
|
||||
@ -314,6 +316,7 @@ import Overview from './overview.vue'
|
||||
import { TableInstance } from 'element-plus'
|
||||
import { dayjs } from 'element-plus'
|
||||
import { getRealTimeState, getCutDecimalsValue } from '/@/views/backend/equipment/airBlower/utils'
|
||||
import { get } from 'sortablejs'
|
||||
const route = useRoute()
|
||||
|
||||
const d = new Date()
|
||||
@ -323,17 +326,17 @@ let myTable = ref<TableInstance>()
|
||||
const radioactiveName = ref('1')
|
||||
|
||||
const overviewData = reactive({
|
||||
iul1_690v: '',
|
||||
iul2_690v: '',
|
||||
iul3_690v: '',
|
||||
igenpower: '',
|
||||
ireactivepower: '',
|
||||
icosphi: '',
|
||||
itemprotorbeara_1sec: '',
|
||||
itemprotorbearb_1sec: '',
|
||||
icabletwisttotal: '',
|
||||
itempgenbearde_1sec: '',
|
||||
itempgenbearnde_1sec: '',
|
||||
iul1_690v: '-',
|
||||
iul2_690v: '-',
|
||||
iul3_690v: '-',
|
||||
igenpower: '-',
|
||||
ireactivepower: '-',
|
||||
icosphi: '-',
|
||||
itemprotorbeara_1sec: '-',
|
||||
itemprotorbearb_1sec: '-',
|
||||
icabletwisttotal: '-',
|
||||
itempgenbearde_1sec: '-',
|
||||
itempgenbearnde_1sec: '-',
|
||||
})
|
||||
const handleClick = () => {
|
||||
// debugger
|
||||
@ -341,13 +344,15 @@ const handleClick = () => {
|
||||
}
|
||||
|
||||
const realTimeDataForSingle = ref<any>({
|
||||
ikwhthisday: '',
|
||||
ikwhoverall: '',
|
||||
igenpower: '',
|
||||
igenspeed: '',
|
||||
ikwhthisday: '-',
|
||||
ikwhoverall: '-',
|
||||
igenpower: '-',
|
||||
igenspeed: '-',
|
||||
ipitchangle: '',
|
||||
iwindspeed: '',
|
||||
iwinddirection: '',
|
||||
iwindspeed: '-',
|
||||
iwinddirection: '-',
|
||||
windfarmmonthprodenergy: '-',
|
||||
windfarmyearprodenergy: '-',
|
||||
})
|
||||
|
||||
const state: {
|
||||
@ -531,23 +536,26 @@ const initpowerChart = () => {
|
||||
state.charts.powerChart = powerChart
|
||||
}
|
||||
|
||||
const TrendDataForDay = [
|
||||
{
|
||||
currentPeriod: 86.3,
|
||||
samePeriod: 63.5,
|
||||
generationTime: '2024-10-01',
|
||||
const TrendDataForDay: {
|
||||
currentPeriod: {
|
||||
time: string[]
|
||||
value: number[]
|
||||
}
|
||||
samePeriod: {
|
||||
time: string[]
|
||||
value: number[]
|
||||
}
|
||||
} = {
|
||||
currentPeriod: {
|
||||
time: [],
|
||||
value: [],
|
||||
},
|
||||
{
|
||||
currentPeriod: 86.3,
|
||||
samePeriod: 53.5,
|
||||
generationTime: '2024-10-02',
|
||||
samePeriod: {
|
||||
time: [],
|
||||
value: [],
|
||||
},
|
||||
{
|
||||
currentPeriod: 86.3,
|
||||
samePeriod: 43.5,
|
||||
generationTime: '2024-10-03',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
const TrendDataForMonth = [
|
||||
{
|
||||
currentPeriod: 26.3,
|
||||
@ -567,11 +575,18 @@ const TrendDataForMonth = [
|
||||
]
|
||||
const trendChartRef = ref<VNodeRef>()
|
||||
|
||||
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 trendChartType = ref<'day' | 'month'>('day')
|
||||
const tabhandleClick = () => {
|
||||
state.charts.trendChart.clear()
|
||||
nextTick(() => {
|
||||
initTrendChart(trendChartType.value)
|
||||
})
|
||||
}
|
||||
|
||||
const initTrendChart = (type: 'day' | 'month') => {
|
||||
const currentPeriod: number[] = type === 'day' ? TrendDataForDay.currentPeriod.value : TrendDataForMonth.map((item) => item.currentPeriod)
|
||||
const samePeriod: number[] = type === 'day' ? TrendDataForDay.samePeriod.value : TrendDataForMonth.map((item) => item.samePeriod)
|
||||
const xAxisdata: string[] = type === 'day' ? TrendDataForDay.currentPeriod.time : TrendDataForMonth.map((item) => item.generationTime)
|
||||
const trendChart = state.charts?.trendChart ?? echarts.init(trendChartRef.value as unknown as HTMLElement)
|
||||
|
||||
const option = {
|
||||
@ -783,62 +798,35 @@ const initTemperatureChart = () => {
|
||||
state.charts.temperatureChart3 = temperatureChart3
|
||||
}
|
||||
|
||||
var frequencydata = [
|
||||
{
|
||||
name: '1',
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
name: '3',
|
||||
value: 33,
|
||||
},
|
||||
{
|
||||
name: '4',
|
||||
value: 41,
|
||||
},
|
||||
{
|
||||
name: '5',
|
||||
value: 50,
|
||||
},
|
||||
{
|
||||
name: '6',
|
||||
value: 16,
|
||||
},
|
||||
{
|
||||
name: '7',
|
||||
value: 27,
|
||||
},
|
||||
{
|
||||
name: '8',
|
||||
value: 18,
|
||||
},
|
||||
{
|
||||
name: '9',
|
||||
value: 39,
|
||||
},
|
||||
{
|
||||
name: '10',
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
name: '11',
|
||||
value: 15,
|
||||
},
|
||||
{
|
||||
name: '12',
|
||||
value: 12,
|
||||
},
|
||||
]
|
||||
var frequencyData: {
|
||||
name: string[]
|
||||
value: number[]
|
||||
} = {
|
||||
name: [
|
||||
'0~22.5',
|
||||
'22.5~45',
|
||||
'45~67.5',
|
||||
'67.5~90',
|
||||
'90~112.5',
|
||||
'112.5~135',
|
||||
'135~157.5',
|
||||
'157.5~180',
|
||||
'180~202.5',
|
||||
'202.5~225',
|
||||
'225~247.5',
|
||||
'247.5~270',
|
||||
'270~292.5',
|
||||
'292.5~315',
|
||||
'315~337.5',
|
||||
'337.5~360',
|
||||
],
|
||||
value: [],
|
||||
}
|
||||
|
||||
const frequencyChartRef = ref()
|
||||
const initFrequencyChart = () => {
|
||||
const frequencyChart = state.charts.frequencyChart ?? echarts.init(frequencyChartRef.value as unknown as HTMLElement)
|
||||
const yAxisdata: any = frequencydata.map((item) => item.name)
|
||||
const seriesdata: any = frequencydata.map((item) => item.value)
|
||||
// const seriesdata: any = frequencyData.map((item) => item.value)
|
||||
|
||||
const option = {
|
||||
title: [
|
||||
@ -873,9 +861,12 @@ const initFrequencyChart = () => {
|
||||
color: '#dadada',
|
||||
},
|
||||
},
|
||||
//max: 4
|
||||
max: 100,
|
||||
},
|
||||
angleAxis: {
|
||||
min: 0,
|
||||
interval: 22.5,
|
||||
startAngle: 90,
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -887,6 +878,11 @@ const initFrequencyChart = () => {
|
||||
show: true,
|
||||
color: 'rgba(0,0,0,0.45)',
|
||||
fontSize: 10,
|
||||
boundaryGap: false,
|
||||
formatter: function (value: string) {
|
||||
const reg = /.*(?=\~)/
|
||||
return value.match(reg)![0]
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
@ -894,22 +890,22 @@ const initFrequencyChart = () => {
|
||||
color: '#dadada',
|
||||
},
|
||||
},
|
||||
data: yAxisdata,
|
||||
data: frequencyData.name,
|
||||
//startAngle: 75
|
||||
},
|
||||
tooltip: {},
|
||||
series: {
|
||||
type: 'bar',
|
||||
data: seriesdata,
|
||||
data: frequencyData.value,
|
||||
coordinateSystem: 'polar',
|
||||
itemStyle: {
|
||||
color: '#0277B3',
|
||||
},
|
||||
/*label: {
|
||||
show: true,
|
||||
position: 'middle',
|
||||
formatter: '{b}: {c}'
|
||||
}*/
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'middle',
|
||||
// formatter: '{b}: {c}',
|
||||
// },
|
||||
},
|
||||
animation: false,
|
||||
}
|
||||
@ -991,6 +987,7 @@ const createScroll = () => {
|
||||
|
||||
const realTimeData = ref<any>({
|
||||
iturbineoperationmode: 1111,
|
||||
locked: 0,
|
||||
})
|
||||
|
||||
const realTimeDataState = computed(() => {
|
||||
@ -1139,7 +1136,6 @@ const createRealTimeData = async () => {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
createRealTimeData()
|
||||
|
||||
const subSystemName = ref('')
|
||||
|
||||
@ -1193,16 +1189,6 @@ const openSubSystem = (type: number) => {
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
const trendChartType = ref<'day' | 'month'>('day')
|
||||
const tabhandleClick = () => {
|
||||
state.charts.trendChart.clear()
|
||||
nextTick(() => {
|
||||
console.log(trendChartType.value)
|
||||
|
||||
inittrendChart(trendChartType.value)
|
||||
})
|
||||
}
|
||||
|
||||
const overviewSlotData = reactive<{ visible: boolean; type: '138' | '140'; type138: any[]; type140: any[] }>({
|
||||
visible: false,
|
||||
type: '138',
|
||||
@ -1210,31 +1196,49 @@ const overviewSlotData = reactive<{ visible: boolean; type: '138' | '140'; type1
|
||||
type140: [],
|
||||
})
|
||||
|
||||
let autoUpdateTimer: any = null
|
||||
let autoUpdateForSecondTimer: any = null
|
||||
let autoUpdateTimerForMinuteTimer: any = null
|
||||
let autoUpdateTimerForHourTimer: any = null
|
||||
const autoUpdate = () => {
|
||||
if (!autoUpdateTimer) {
|
||||
autoUpdateTimer = setInterval(() => {
|
||||
createRealTimeData()
|
||||
initTemperatureChart()
|
||||
if (!autoUpdateForSecondTimer) {
|
||||
autoUpdateForSecondTimer = setInterval(() => {
|
||||
createRealTimeData()
|
||||
initTemperatureChart()
|
||||
}, 2000)
|
||||
}
|
||||
if (!autoUpdateTimerForMinuteTimer) {
|
||||
autoUpdateTimerForMinuteTimer = setInterval(() => {
|
||||
getAllChartData(['power', 'frequency'])
|
||||
}, 60000)
|
||||
}
|
||||
if (!autoUpdateTimerForHourTimer) {
|
||||
autoUpdateTimerForHourTimer = setInterval(() => {
|
||||
getAllChartData(['trend'])
|
||||
}, 60000 * 30)
|
||||
}
|
||||
}
|
||||
|
||||
const getChartData = () => {
|
||||
const getChartData = <T extends string = any>(params: {
|
||||
startTime: number
|
||||
endTime: number
|
||||
attr: T[]
|
||||
interval: string
|
||||
}): Promise<{ times: { [K in T]: string[] }; val: { [K in T]: number[] } }> => {
|
||||
return new Promise((resolve) => {
|
||||
const data = {
|
||||
startTime: new Date(new Date().toLocaleDateString()).getTime(),
|
||||
endTime: Date.now(),
|
||||
startTime: params.startTime,
|
||||
endTime: params.endTime,
|
||||
devices: [
|
||||
{
|
||||
deviceId: route.query.irn as string,
|
||||
attributes: ['iGenPower', 'iTheoreticalPower', 'iWindSpeed'],
|
||||
attributes: params.attr,
|
||||
},
|
||||
],
|
||||
interval: '5m',
|
||||
interval: params.interval,
|
||||
}
|
||||
getRealValueRangeReq(data).then((res) => {
|
||||
console.log(res)
|
||||
if (res.success) {
|
||||
const data = res.data[route.query.irn as string]
|
||||
const rangeKeys = Object.keys(data)
|
||||
@ -1243,44 +1247,132 @@ const getChartData = () => {
|
||||
rangeKeys.forEach((key) => {
|
||||
times[key] = []
|
||||
val[key] = []
|
||||
data[key].times.forEach((item: number, index: number) => {
|
||||
data[key].times.forEach((item: 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)
|
||||
resolve({ times, val })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
inittrendChart(trendChartType.value)
|
||||
getChartData().then(() => {
|
||||
const getThisDayChartData = () => {
|
||||
return new Promise((resolve) => {
|
||||
getChartData<'iGenPower' | 'iTheoreticalPower' | 'iWindSpeed'>({
|
||||
startTime: new Date(new Date().toLocaleDateString()).getTime(),
|
||||
endTime: Date.now(),
|
||||
attr: ['iGenPower', 'iTheoreticalPower', 'iWindSpeed'],
|
||||
interval: '5m',
|
||||
}).then(({ times, val }) => {
|
||||
powerChartData.time = { iGenPower: times.iGenPower, iTheoreticalPower: times.iTheoreticalPower, iWindSpeed: times.iWindSpeed }
|
||||
powerChartData.values = { iGenPower: val.iGenPower, iTheoreticalPower: val.iTheoreticalPower, iWindSpeed: val.iWindSpeed }
|
||||
resolve(true)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getLastYearTodayTimestamp = () => {
|
||||
const now = new Date()
|
||||
const lastYear = now.getFullYear() - 1
|
||||
const lastYearToday = new Date(lastYear, now.getMonth(), now.getDate())
|
||||
return lastYearToday.getTime()
|
||||
}
|
||||
|
||||
const getLastYearChartData = () => {
|
||||
return new Promise((resolve) => {
|
||||
const start = getLastYearTodayTimestamp()
|
||||
const end = new Date()
|
||||
end.setFullYear(end.getFullYear() - 1)
|
||||
|
||||
getChartData<'iKWhThisDay'>({
|
||||
startTime: start,
|
||||
endTime: end.getTime(),
|
||||
attr: ['iKWhThisDay'],
|
||||
interval: '1h',
|
||||
}).then(({ times, val }) => {
|
||||
TrendDataForDay.samePeriod.time = times.iKWhThisDay
|
||||
TrendDataForDay.samePeriod.value = val.iKWhThisDay
|
||||
resolve(true)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getThisDayChartForHourData = () => {
|
||||
return new Promise((resolve) => {
|
||||
getChartData<'iKWhThisDay'>({
|
||||
startTime: new Date(new Date().toLocaleDateString()).getTime(),
|
||||
endTime: Date.now(),
|
||||
attr: ['iKWhThisDay'],
|
||||
interval: '1h',
|
||||
}).then(({ times, val }) => {
|
||||
TrendDataForDay.currentPeriod.time = times.iKWhThisDay
|
||||
TrendDataForDay.currentPeriod.value = val.iKWhThisDay
|
||||
resolve(true)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getThisDayChartDataForMinute = () => {
|
||||
return new Promise((resolve) => {
|
||||
getChartData<'iWindDirection'>({
|
||||
startTime: new Date(new Date().toLocaleDateString()).getTime(),
|
||||
endTime: Date.now(),
|
||||
attr: ['iWindDirection'],
|
||||
interval: '1m',
|
||||
}).then(({ val }) => {
|
||||
const len = val.iWindDirection.length
|
||||
const result: number[] = new Array(16).fill(0)
|
||||
val.iWindDirection.forEach((item: number) => {
|
||||
item = item < 0 ? 360 + item : item > 360 ? 360 : item
|
||||
const divisor = Math.ceil(item / 22.5) - 1
|
||||
result[divisor] += 1
|
||||
})
|
||||
const percent = result.map((item) => Math.floor((item / len) * 100000) / 1000)
|
||||
frequencyData.value = percent
|
||||
resolve(true)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', 'trend', 'frequency']) => {
|
||||
if (type.includes('power')) {
|
||||
getThisDayChartData().then(() => {
|
||||
initpowerChart()
|
||||
initTemperatureChart()
|
||||
})
|
||||
createScroll()
|
||||
}
|
||||
if (type.includes('trend')) {
|
||||
const trendDataForLastYear = getLastYearChartData()
|
||||
const trendDataForThisDay = getThisDayChartForHourData()
|
||||
Promise.all([trendDataForLastYear, trendDataForThisDay]).then(() => {
|
||||
initTrendChart(trendChartType.value)
|
||||
})
|
||||
}
|
||||
if (type.includes('frequency')) {
|
||||
getThisDayChartDataForMinute().then((res) => {
|
||||
initFrequencyChart()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getAllChartData()
|
||||
createScroll()
|
||||
useEventListener(window, 'resize', echartsResize)
|
||||
autoUpdate()
|
||||
})
|
||||
// onBeforeMount(() => {
|
||||
// const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
|
||||
// chartKeys.forEach((key) => {
|
||||
// state.charts[key].dispose()
|
||||
// })
|
||||
// })
|
||||
|
||||
onUnmounted(() => {
|
||||
autoUpdateTimer && clearInterval(autoUpdateTimer)
|
||||
autoUpdateForSecondTimer && clearInterval(autoUpdateForSecondTimer)
|
||||
autoUpdateTimerForHourTimer && clearInterval(autoUpdateTimerForHourTimer)
|
||||
autoUpdateTimerForMinuteTimer && clearInterval(autoUpdateTimerForMinuteTimer)
|
||||
const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
|
||||
chartKeys.forEach((key) => {
|
||||
state.charts[key].dispose()
|
||||
state.charts[key] && state.charts[key].dispose()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1399,7 +1491,6 @@ onUnmounted(() => {
|
||||
.control-type {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
.control-tag {
|
||||
background: #0064aa;
|
||||
border-radius: 0 8px 0 0;
|
||||
@ -1408,6 +1499,11 @@ onUnmounted(() => {
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
.control-tag-left {
|
||||
margin-left: 0;
|
||||
border-radius: 8px 0 0 0;
|
||||
}
|
||||
}
|
||||
.btnLeft {
|
||||
|
||||
@ -68,6 +68,9 @@
|
||||
<el-table-column v-else :label="item.label" :align="item.align" :width="item.width">
|
||||
<template v-if="item.custom === 'default'" #default="scope">
|
||||
<div v-if="item.prop === 'iturbineoperationmode'">
|
||||
<el-tag v-if="scope.row.locked === 1" color="rgba(254,55,49,0.20)" style="color: #fe3731"
|
||||
>已锁定</el-tag
|
||||
>
|
||||
<el-tag v-if="scope.row.iturbineoperationmode === 20" color="rgba(0,100,170,0.20)" style="color: #0064aa"
|
||||
>并网</el-tag
|
||||
>
|
||||
|
||||
@ -92,7 +92,7 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="物模型:">
|
||||
<el-select v-model="editDeviceData.iotModelId" placeholder="请选择物模型" style="width: 200px">
|
||||
<el-select :disabled="editDeviceData.iotModelId" v-model="editDeviceData.iotModelId" placeholder="请选择物模型" style="width: 200px">
|
||||
<el-option v-for="item in equipModeData" :key="item.id" :label="item.iotModelName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user