sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

单风机:页面调整,恢复风频图

Browse Source 
能量管理:添加标签页
This commit is contained in:
高云鹏 2024-12-19 16:46:51 +08:00
parent 9b41321295
commit 1b280f9cd4
2 changed files with 270 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
ui/dasadmin/src/views/backend/WindBlower/index.vue
View File

@ -138,16 +138,19 @@
</el-tooltip> </el-tooltip>
</div> </div>
<!-- 温度 --> <!-- 温度 -->
<div class="chartPart" @click="openTemperature"> <div class="chartPart">
<div class="chartPart-item"> <div class="chartPart-item" @click="openTemperature">
<div class="chartParm" ref="temperatureChartRef1"></div> <div class="chartParm" ref="temperatureChartRef1"></div>
</div> </div>
<div class="chartPart-item"> <div class="chartPart-item" @click="openTemperature">
<div class="chartParm" ref="temperatureChartRef2"></div> <div class="chartParm" ref="temperatureChartRef2"></div>
</div> </div>
<div class="chartPart-item"> <div class="chartPart-item" @click="openTemperature">
<div class="chartParm" ref="temperatureChartRef3"></div> <div class="chartParm" ref="temperatureChartRef3"></div>
</div> </div>
<div class="chartPart-item item_bar">
<div class="frequencyChart" ref="frequencyChartRef"></div>
</div>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -350,7 +353,7 @@ const realTimeDataForSingleUnit = reactive({
}) })
const state: { const state: {
charts: { powerChart: any; temperatureChart1: any; temperatureChart2: any; temperatureChart3: any } charts: { powerChart: any; temperatureChart1: any; temperatureChart2: any; temperatureChart3: any; frequencyChart: any }
remark: string remark: string
workingTimeFormat: string workingTimeFormat: string
pauseWork: boolean pauseWork: boolean
@ -360,7 +363,7 @@ const state: {
temperatureChart1: null, temperatureChart1: null,
temperatureChart2: null, temperatureChart2: null,
temperatureChart3: null, temperatureChart3: null,
// frequencyChart: null, frequencyChart: null,
// trendChart: null, // trendChart: null,
}, },
remark: 'dashboard.Loading', remark: 'dashboard.Loading',
@ -749,13 +752,13 @@ const initTemperatureChart = () => {
color: '#048bd2', color: '#048bd2',
borderRadius: [0, 0, 4, 4], borderRadius: [0, 0, 4, 4],
}, },
barWidth: 40, barWidth: 20,
}, },
{ {
show: true, show: true,
type: 'bar', type: 'bar',
barGap: '-100%', barGap: '-100%',
barWidth: 40, // 统计条宽度 barWidth: 20, // 统计条宽度
itemStyle: { itemStyle: {
normal: { normal: {
color: '#048bd2', color: '#048bd2',
@ -816,95 +819,95 @@ var frequencyData: {
value: [], value: [],
} }
// const frequencyChartRef = ref() const frequencyChartRef = ref()
// const initFrequencyChart = () => { const initFrequencyChart = () => {
// const frequencyChart = state.charts.frequencyChart ?? echarts.init(frequencyChartRef.value as unknown as HTMLElement) const frequencyChart = state.charts.frequencyChart ?? echarts.init(frequencyChartRef.value as unknown as HTMLElement)
// // const seriesdata: any = frequencyData.map((item) => item.value) // const seriesdata: any = frequencyData.map((item) => item.value)
// const option = { const option = {
// title: [ title: [
// { {
// text: '风频图', text: '风频图',
// textStyle: { textStyle: {
// color: '#4E5969', color: '#4E5969',
// fontSize: 14, fontSize: 14,
// fontFamily: 'PingFangSC-Semibold', fontFamily: 'PingFangSC-Semibold',
// }, },
// padding: 15, padding: 15,
// }, },
// ], ],
// polar: { polar: {
// radius: [0, '70%'], radius: [0, '70%'],
// }, },
// radiusAxis: { radiusAxis: {
// axisLine: { axisLine: {
// show: true, show: true,
// lineStyle: { lineStyle: {
// color: '#dadada', color: '#dadada',
// }, },
// }, },
// axisLabel: { axisLabel: {
// show: true, show: true,
// color: 'rgba(0,0,0,0.45)', color: 'rgba(0,0,0,0.45)',
// fontSize: 10, fontSize: 10,
// }, },
// axisTick: { axisTick: {
// show: true, show: true,
// lineStyle: { lineStyle: {
// color: '#dadada', color: '#dadada',
// }, },
// }, },
// max: 100, max: 100,
// }, },
// angleAxis: { angleAxis: {
// min: 0, min: 0,
// interval: 22.5, interval: 22.5,
// startAngle: 90, startAngle: 90,
// type: 'category', type: 'category',
// axisLine: { axisLine: {
// show: true, show: true,
// lineStyle: { lineStyle: {
// color: '#dadada', color: '#dadada',
// }, },
// }, },
// axisLabel: { axisLabel: {
// show: true, show: true,
// color: 'rgba(0,0,0,0.45)', color: 'rgba(0,0,0,0.45)',
// fontSize: 10, fontSize: 10,
// boundaryGap: false, boundaryGap: false,
// formatter: function (value: string) { formatter: function (value: string) {
// const reg = /.*(?=\~)/ const reg = /.*(?=\~)/
// return value.match(reg)![0] return value.match(reg)![0]
// }, },
// }, },
// axisTick: { axisTick: {
// show: false, show: false,
// lineStyle: { lineStyle: {
// color: '#dadada', color: '#dadada',
// }, },
// }, },
// data: frequencyData.name, data: frequencyData.name,
// //startAngle: 75 //startAngle: 75
// }, },
// tooltip: {}, tooltip: {},
// series: { series: {
// type: 'bar', type: 'bar',
// data: frequencyData.value, data: frequencyData.value,
// coordinateSystem: 'polar', coordinateSystem: 'polar',
// itemStyle: { itemStyle: {
// color: '#0277B3', color: '#0277B3',
// }, },
// // label: { // label: {
// // show: true, // show: true,
// // position: 'middle', // position: 'middle',
// // formatter: '{b}: {c}', // formatter: '{b}: {c}',
// // }, // },
// }, },
// animation: false, animation: false,
// } }
// frequencyChart.setOption(option) frequencyChart.setOption(option)
// state.charts.frequencyChart = frequencyChart state.charts.frequencyChart = frequencyChart
// } }
const echartsResize = () => { const echartsResize = () => {
nextTick(() => { nextTick(() => {
@ -1211,27 +1214,27 @@ const getThisDayChartData = () => {
// }) // })
// } // }
// const getThisDayChartDataForMinute = () => { const getThisDayChartDataForMinute = () => {
// return new Promise((resolve) => { return new Promise((resolve) => {
// getChartData<'iWindDirection'>({ getChartData<'iWindDirection'>({
// startTime: new Date(new Date().toLocaleDateString()).getTime(), startTime: new Date(new Date().toLocaleDateString()).getTime(),
// endTime: Date.now(), endTime: Date.now(),
// attr: ['iWindDirection'], attr: ['iWindDirection'],
// interval: '1m', interval: '1m',
// }).then(({ val }) => { }).then(({ val }) => {
// const len = val.iWindDirection.length const len = val.iWindDirection.length
// const result: number[] = new Array(16).fill(0) const result: number[] = new Array(16).fill(0)
// val.iWindDirection.forEach((item: number) => { val.iWindDirection.forEach((item: number) => {
// item = item < 0 ? 360 + item : item > 360 ? 360 : item item = item < 0 ? 360 + item : item > 360 ? 360 : item
// const divisor = Math.ceil(item / 22.5) - 1 const divisor = Math.ceil(item / 22.5) - 1
// result[divisor] += 1 result[divisor] += 1
// }) })
// const percent = result.map((item) => Math.floor((item / len) * 100000) / 1000) const percent = result.map((item) => Math.floor((item / len) * 100000) / 1000)
// frequencyData.value = percent frequencyData.value = percent
// resolve(true) resolve(true)
// }) })
// }) })
// } }
const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', 'trend', 'frequency']) => { const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', 'trend', 'frequency']) => {
if (type.includes('power')) { if (type.includes('power')) {
@ -1247,11 +1250,11 @@ const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', '
// initTrendChart(trendChartType.value) // initTrendChart(trendChartType.value)
// }) // })
// } // }
// if (type.includes('frequency')) { if (type.includes('frequency')) {
// getThisDayChartDataForMinute().then((res) => { getThisDayChartDataForMinute().then((res) => {
// initFrequencyChart() initFrequencyChart()
// }) })
// } }
} }
const sendCommand = (type: 'setTurbineFastStart' | 'setTurbineStop' | 'setTurbineResetStatusCode') => { const sendCommand = (type: 'setTurbineFastStart' | 'setTurbineStop' | 'setTurbineResetStatusCode') => {
@ -1841,7 +1844,7 @@ $labelHeight: 24px;
} }
.chartPart-item { .chartPart-item {
margin: 5px; margin: 5px;
width: 33%; width: 25%;
height: 100%; height: 100%;
background: #f0f6ff; background: #f0f6ff;
border-radius: 8px; border-radius: 8px;
@ -1857,7 +1860,7 @@ $labelHeight: 24px;
} }
} }
.item_bar { .item_bar {
width: 31%; width: 40%;
} }
} }
} }

227
ui/dasadmin/src/views/backend/energyManage/index.vue
View File

@ -2,78 +2,124 @@
<div class="energyManage"> <div class="energyManage">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :md="24" :lg="{ span: 14, push: 5 }"> <el-col :md="24" :lg="{ span: 14, push: 5 }">
<div class="centerContainer"> <el-tabs v-model="activeName" @tab-change="handleClick">
<div class="airBlowerList"> <el-tab-pane label="风机列表" name="list">
<div class="title">风机列表</div> <div class="centerContainer">
<el-table class="table" :data="tableData"> <div class="airBlowerList">
<el-table-column <!-- <div class="title">风机列表</div> -->
v-for="item in tableColumn" <el-table class="table" :data="tableData">
:key="item.prop" <el-table-column
:prop="item.prop" v-for="item in tableColumn"
:label="item.label" :key="item.prop"
align="center" :prop="item.prop"
:width="item.width" :label="item.label"
> align="center"
<template #default="scope"> :width="item.width"
<div v-if="item.prop === 'processedoperationmode'"> >
<el-tag v-if="scope.row.locked === 1" color="rgba(254,55,49,0.20)" style="color: #fe3731">已锁定</el-tag> <template #default="scope">
<el-tag v-if="scope.row.processedoperationmode === 20" color="rgba(0,100,170,0.20)" style="color: #0064aa" <div v-if="item.prop === 'processedoperationmode'">
>并网</el-tag <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.processedoperationmode === 10" color="rgba(0,160,150,0.20)" style="color: #00a096" >
>维护</el-tag <el-tag
> v-if="scope.row.processedoperationmode === 20"
<el-tag v-if="scope.row.processedoperationmode === 8" color="rgba(255,126,0,0.20)" style="color: #ff7e00" color="rgba(0,100,170,0.20)"
>限功率运行</el-tag style="color: #0064aa"
> >并网</el-tag
<el-tag v-if="scope.row.processedoperationmode === 0" color="rgba(153,153,153,0.20)" style="color: #666666" >
>离线</el-tag <el-tag
> v-if="scope.row.processedoperationmode === 10"
<el-tag v-if="scope.row.processedoperationmode === 16" color="rgba(6,180,41,0.20)" style="color: #06b429" color="rgba(0,160,150,0.20)"
>启动</el-tag style="color: #00a096"
> >维护</el-tag
<el-tag v-if="scope.row.processedoperationmode === 6" color="rgba(254,55,49,0.20)" style="color: #fe3731" >
>正常停机</el-tag <el-tag
> v-if="scope.row.processedoperationmode === 8"
<el-tag v-if="scope.row.processedoperationmode === 1" color="rgba(254,55,49,0.20)" style="color: #fe3731" color="rgba(255,126,0,0.20)"
>外部因素导致停机</el-tag style="color: #ff7e00"
> >限功率运行</el-tag
<el-tag v-if="scope.row.processedoperationmode === 2" color="rgba(254,55,49,0.20)" style="color: #fe3731" >
>停机</el-tag <el-tag
> v-if="scope.row.processedoperationmode === 0"
<el-tag v-if="scope.row.processedoperationmode === 11" color="rgba(255,182,0,0.20)" style="color: #ffb600" color="rgba(153,153,153,0.20)"
>待机</el-tag style="color: #666666"
> >离线</el-tag
<el-tag v-if="scope.row.processedoperationmode === 1110" color="rgba(153,153,153,0.20)" style="color: #666666" >
>解缆状态</el-tag <el-tag
> v-if="scope.row.processedoperationmode === 16"
<el-tag v-if="scope.row.processedoperationmode === 1111" color="rgba(254,55,49,0.20)" style="color: #fe3731" color="rgba(6,180,41,0.20)"
>电网故障停机</el-tag style="color: #06b429"
> >启动</el-tag
<el-tag v-if="scope.row.processedoperationmode === 33" color="rgba(153, 153, 153, 0.2)" style="color: #999999" >
>通讯中断</el-tag <el-tag
> v-if="scope.row.processedoperationmode === 6"
</div> color="rgba(254,55,49,0.20)"
</template> style="color: #fe3731"
</el-table-column> >正常停机</el-tag
</el-table> >
</div> <el-tag
<div class="chartPart"> v-if="scope.row.processedoperationmode === 1"
<div class="title"> color="rgba(254,55,49,0.20)"
<span> 自动更新 </span> style="color: #fe3731"
<el-switch v-model="autoUpdateChartSwitch" @change="changeUpdateChart"></el-switch> >外部因素导致停机</el-tag
</div> >
<div class="lineChart"> <el-tag
<div class="chart" ref="chartRef"></div> v-if="scope.row.processedoperationmode === 2"
</div> color="rgba(254,55,49,0.20)"
<div class="info"> style="color: #fe3731"
<div class="infoItem" v-for="item in infoList" :key="item.label"> >停机</el-tag
<div class="label">{{ item.label }}</div> >
<div class="val">{{ item.value }}</div> <el-tag
v-if="scope.row.processedoperationmode === 11"
color="rgba(255,182,0,0.20)"
style="color: #ffb600"
>待机</el-tag
>
<el-tag
v-if="scope.row.processedoperationmode === 1110"
color="rgba(153,153,153,0.20)"
style="color: #666666"
>解缆状态</el-tag
>
<el-tag
v-if="scope.row.processedoperationmode === 1111"
color="rgba(254,55,49,0.20)"
style="color: #fe3731"
>电网故障停机</el-tag
>
<el-tag
v-if="scope.row.processedoperationmode === 33"
color="rgba(153, 153, 153, 0.2)"
style="color: #999999"
>通讯中断</el-tag
>
</div>
</template>
</el-table-column>
</el-table>
</div> </div>
</div> </div>
</div> </el-tab-pane>
</div> <el-tab-pane label="风机曲线" name="chart">
<div class="centerContainer">
<div class="chartPart">
<div class="title">
<span> 自动更新 </span>
<el-switch v-model="autoUpdateChartSwitch" @change="changeUpdateChart"></el-switch>
</div>
<div class="lineChart">
<div class="chart" ref="chartRef"></div>
</div>
<div class="info">
<div class="infoItem" v-for="item in infoList" :key="item.label">
<div class="label">{{ item.label }}</div>
<div class="val">{{ item.value }}</div>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</el-col> </el-col>
<el-col :md="12" :lg="{ span: 5, pull: 14 }"> <el-col :md="12" :lg="{ span: 5, pull: 14 }">
<div class="leftContainer"> <div class="leftContainer">
@ -792,6 +838,20 @@ const infoList = ref([
}, },
]) ])
const activeName = ref('list')
const handleClick = (tabName: any) => {
if (tabName === 'chart') {
console.log(tabName);
stopAutoUpdate()
nextTick(() => {
createChart()
})
}else if( tabName === 'list'){
autoUpdateAirBlower()
}
}
const containerHeight = ref('900px') const containerHeight = ref('900px')
const getContainerHeight = () => { const getContainerHeight = () => {
const container = document.querySelector('.leftContainer') const container = document.querySelector('.leftContainer')
@ -807,17 +867,18 @@ const resizeFn = () => {
resizeChart() resizeChart()
getContainerHeight() getContainerHeight()
} }
const stopAutoUpdate = () => {
timer && clearInterval(timer)
timer = null
}
onMounted(() => { onMounted(() => {
getContainerHeight() getContainerHeight()
autoUpdateAirBlower() autoUpdateAirBlower()
nextTick(() => {
createChart()
})
window.addEventListener('resize', resizeFn) window.addEventListener('resize', resizeFn)
}) })
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', resizeFn) window.removeEventListener('resize', resizeFn)
timer && clearInterval(timer) stopAutoUpdate()
}) })
</script> </script>
@ -1027,29 +1088,27 @@ onUnmounted(() => {
@include record; @include record;
} }
.centerContainer { .centerContainer {
margin-bottom: 20px;
height: v-bind('containerHeight'); height: v-bind('containerHeight');
color: #4e5969; color: #4e5969;
.airBlowerList { .airBlowerList {
padding: 20px; padding: 20px;
width: 100%; width: 100%;
height: calc(50% - 10px); height: calc(100% - 10px - 40px);
background-color: #fff; background-color: #fff;
border-radius: 6px; border-radius: 6px;
.title { // .title {
height: 38px; // height: 38px;
font-size: 18px; // font-size: 18px;
font-weight: 600; // font-weight: 600;
} // }
.table { .table {
height: calc(100% - 38px); height: 100%;
} }
} }
.chartPart { .chartPart {
margin: 20px 0;
padding: 20px; padding: 20px;
width: 100%; width: 100%;
height: calc(50% - 10px); height: calc(100% - 10px - 40px);
background-color: #fff; background-color: #fff;
border-radius: 6px; border-radius: 6px;
.title { .title {