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

fix:小屏样式优化

Browse Source
This commit is contained in:
刘玉霞 2024-11-08 15:44:06 +08:00
parent 1495adbad9
commit efbc300e35
10 changed files with 335 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/dasadmin/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>Loading...</title> <title>Loading...</title>
</head> </head>
<body> <body>

2
ui/dasadmin/src/layouts/backend/components/logo.vue
View File

@ -49,7 +49,7 @@ const onMenuCollapse = function () {
<style scoped lang="scss"> <style scoped lang="scss">
.layout-logo { .layout-logo {
width: 100%; width: 100%;
height: 60px; height: v-bind('config.headerHeight()');
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

14
ui/dasadmin/src/layouts/backend/components/menus/menuTree.vue
View File

@ -25,10 +25,14 @@ import type { RouteRecordRaw } from 'vue-router'
import { getFirstRoute, onClickMenu } from '/@/utils/router' import { getFirstRoute, onClickMenu } from '/@/utils/router'
import { ElNotification } from 'element-plus' import { ElNotification } from 'element-plus'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { computed } from 'vue'
const { t } = useI18n() const { t } = useI18n()
const config = useConfig() const config = useConfig()
const padding = computed(() => (window.screen.width < 1920 ? '10px' : '20px'))
const height = computed(() => (window.screen.width < 1920 ? '40px' : '56px'))
interface Props { interface Props {
menus: RouteRecordRaw[] menus: RouteRecordRaw[]
extends?: { extends?: {
@ -68,6 +72,16 @@ const onClickSubMenu = (menu: RouteRecordRaw) => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.el-menu-item {
padding: 0 v-bind(padding);
height: v-bind(height);
:deep(.el-menu-tooltip__trigger) {
padding: 0 v-bind(padding);
}
}
:deep(.el-sub-menu__title) {
padding: 0 v-bind(padding);
}
.el-sub-menu .icon, .el-sub-menu .icon,
.el-menu-item .icon { .el-menu-item .icon {
vertical-align: middle; vertical-align: middle;

2
ui/dasadmin/src/layouts/backend/components/menus/menuVertical.vue
View File

@ -30,7 +30,7 @@ const state = reactive({
}) })
const width = computed(() => { const width = computed(() => {
return config.layout.menuCollapse ? '5px' : '20px' return config.layout.menuCollapse ? '5px' : window.screen.width < 1920 ? '10px' : '20px'
}) })
const verticalMenusScrollbarHeight = computed(() => { const verticalMenusScrollbarHeight = computed(() => {

13
ui/dasadmin/src/layouts/backend/components/navBar/classic.vue
View File

@ -15,9 +15,12 @@ import NavTabs from '/@/layouts/backend/components/navBar/tabs.vue'
import { layoutNavTabsRef } from '/@/stores/refs' import { layoutNavTabsRef } from '/@/stores/refs'
import NavMenus from '../navMenus.vue' import NavMenus from '../navMenus.vue'
import { showShade } from '/@/utils/pageShade' import { showShade } from '/@/utils/pageShade'
import { computed } from 'vue'
const config = useConfig() const config = useConfig()
const padding = computed(() => (window.screen.width < 1920 ? '10px' : '20px'))
const height = computed(() => (window.screen.width < 1920 ? '36px' : '48px'))
const onMenuCollapse = () => { const onMenuCollapse = () => {
showShade('ba-aside-menu-shade', () => { showShade('ba-aside-menu-shade', () => {
config.setLayout('menuCollapse', true) config.setLayout('menuCollapse', true)
@ -29,7 +32,7 @@ const onMenuCollapse = () => {
<style scoped lang="scss"> <style scoped lang="scss">
.nav-bar { .nav-bar {
display: flex; display: flex;
height: 60px; height: v-bind('config.headerHeight()');
width: 100%; width: 100%;
background-color: v-bind('config.getColorVal("headerBarBackground")'); background-color: v-bind('config.getColorVal("headerBarBackground")');
:deep(.nav-tabs) { :deep(.nav-tabs) {
@ -75,11 +78,11 @@ const onMenuCollapse = () => {
} }
.nav-route { .nav-route {
display: flex; display: flex;
height: 48px; height: v-bind(height);
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
line-height: 48px; line-height: v-bind(height);
margin: 20px 0px; margin: v-bind(padding) 0px;
:deep(.nav-tabs) { :deep(.nav-tabs) {
display: flex; display: flex;
height: 100%; height: 100%;

14
ui/dasadmin/src/layouts/backend/container/classic.vue
View File

@ -14,6 +14,7 @@
</el-container> </el-container>
<CloseFullScreen v-if="navTabs.state.tabFullScreen" /> <CloseFullScreen v-if="navTabs.state.tabFullScreen" />
</template> </template>
q
<script setup lang="ts"> <script setup lang="ts">
import Aside from '/@/layouts/backend/components/aside.vue' import Aside from '/@/layouts/backend/components/aside.vue'
@ -22,8 +23,15 @@ import Main from '/@/layouts/backend/router-view/main.vue'
import CloseFullScreen from '/@/layouts/backend/components/closeFullScreen.vue' import CloseFullScreen from '/@/layouts/backend/components/closeFullScreen.vue'
import { useNavTabs } from '/@/stores/navTabs' import { useNavTabs } from '/@/stores/navTabs'
import { useSiteConfig } from '/@/stores/siteConfig' import { useSiteConfig } from '/@/stores/siteConfig'
import { useConfig } from '/@/stores/config'
import { computed } from 'vue'
const siteConfig = useSiteConfig() const siteConfig = useSiteConfig()
const navTabs = useNavTabs() const navTabs = useNavTabs()
const config = useConfig()
const padding = computed(() => (window.screen.width < 1920 ? '0px' : '10px'))
const bodyPadding = computed(() => (window.screen.width < 1920 ? '10px' : '20px'))
</script> </script>
<style scoped> <style scoped>
@ -35,16 +43,16 @@ const navTabs = useNavTabs()
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0 20px; padding: 0 v-bind(bodyPadding);
} }
.layout-logo { .layout-logo {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 60px; height: v-bind('config.headerHeight()');
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: v-bind(padding);
background-image: linear-gradient(170deg, #eaf6ff 0%, #fbfdff 94%); background-image: linear-gradient(170deg, #eaf6ff 0%, #fbfdff 94%);
box-shadow: 0px 0px 20px 0px rgba(0, 100, 170, 0.09); box-shadow: 0px 0px 20px 0px rgba(0, 100, 170, 0.09);
} }

13
ui/dasadmin/src/stores/config.ts
View File

@ -31,6 +31,7 @@ export const useConfig = defineStore(
menuTopBarBackground: ['#fcfcfc', '#1d1e1f'], menuTopBarBackground: ['#fcfcfc', '#1d1e1f'],
// 侧边菜单宽度(展开时)，单位px // 侧边菜单宽度(展开时)，单位px
menuWidth: 260, menuWidth: 260,
headerHeight: 60,
// 侧边菜单项默认图标 // 侧边菜单项默认图标
menuDefaultIcon: 'fa fa-circle-o', menuDefaultIcon: 'fa fa-circle-o',
// 是否水平折叠收起菜单 // 是否水平折叠收起菜单
@ -70,9 +71,19 @@ export const useConfig = defineStore(
return layout.menuCollapse ? '0px' : layout.menuWidth + 'px' return layout.menuCollapse ? '0px' : layout.menuWidth + 'px'
} }
// 菜单是否折叠 // 菜单是否折叠
if (window.screen.width < 1920) {
layout.menuWidth = 180
return layout.menuCollapse ? '54px' : layout.menuWidth + 'px'
}
layout.menuWidth = 260
return layout.menuCollapse ? '74px' : layout.menuWidth + 'px' return layout.menuCollapse ? '74px' : layout.menuWidth + 'px'
} }
const headerHeight = function () {
if (window.screen.width < 1920) return '46px'
return layout.headerHeight + 'px'
}
function setLang(val: string) { function setLang(val: string) {
lang.defaultLang = val lang.defaultLang = val
} }
@ -114,7 +125,7 @@ export const useConfig = defineStore(
// } // }
} }
return { layout, lang, menuWidth, setLang, setLayoutMode, setLayout, getColorVal, onSetLayoutColor } return { layout, lang, menuWidth, headerHeight, setLang, setLayoutMode, setLayout, getColorVal, onSetLayoutColor }
}, },
{ {
persist: { persist: {

1
ui/dasadmin/src/stores/interface/index.ts
View File

@ -8,6 +8,7 @@ export interface Layout {
mainAnimation: string mainAnimation: string
isDark: boolean isDark: boolean
menuWidth: number menuWidth: number
headerHeight: number
menuDefaultIcon: string menuDefaultIcon: string
menuCollapse: boolean menuCollapse: boolean
menuUniqueOpened: boolean menuUniqueOpened: boolean

2
ui/dasadmin/src/utils/layout.ts
View File

@ -12,7 +12,7 @@ export function mainHeight(extra = 0): CSSProperties {
let height = extra let height = extra
const adminLayoutMainExtraHeight: anyObj = { const adminLayoutMainExtraHeight: anyObj = {
Default: 70, Default: 70,
Classic: 150, Classic: window.screen.width < 1920 ? 110 : 150,
Streamline: 60, Streamline: 60,
} }
if (isAdminApp()) { if (isAdminApp()) {

322
ui/dasadmin/src/views/backend/dashboard.vue
View File

@ -8,33 +8,41 @@
<el-text class="mx-1 homelabel">风场概览</el-text> <el-text class="mx-1 homelabel">风场概览</el-text>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="12"> <el-col :span="12">
<div :sm="12" :lg="6" class="small-panel" style="margin-bottom: 10px;"> <div :sm="12" :lg="6" class="small-panel" style="margin-bottom: 10px">
<img class="small-panel-pic" src="~assets/dashboard/viewP.png" alt=""> <img class="small-panel-pic" src="~assets/dashboard/viewP.png" alt="" />
<div class="small-base"> <div class="small-base">
<div><span class="content-number">{{realData.attributeMap.windfarmactivepower}}</span> <span>MW</span></div> <div>
<span class="content-number">{{ realData.attributeMap.windfarmactivepower }}</span> <span>MW</span>
</div>
<div>功率</div> <div>功率</div>
</div> </div>
</div> </div>
<div :sm="12" :lg="6" class="small-panel"> <div :sm="12" :lg="6" class="small-panel">
<img class="small-panel-pic" src="~assets/dashboard/viewW.png" alt=""> <img class="small-panel-pic" src="~assets/dashboard/viewW.png" alt="" />
<div class="small-base"> <div class="small-base">
<div><span class="content-number">{{realData.attributeMap.windfarmavgwindspeed}}</span> <span>m/s</span></div> <div>
<span class="content-number">{{ realData.attributeMap.windfarmavgwindspeed }}</span> <span>m/s</span>
</div>
<div>风速</div> <div>风速</div>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div :sm="12" :lg="6" class="small-panel" style="margin-bottom: 10px;"> <div :sm="12" :lg="6" class="small-panel" style="margin-bottom: 10px">
<img class="small-panel-pic" src="~assets/dashboard/viewR.png" alt=""> <img class="small-panel-pic" src="~assets/dashboard/viewR.png" alt="" />
<div class="small-base"> <div class="small-base">
<div><span class="content-number">{{realData.attributeMap.windfarmdayoperationhours}}</span> <span>H</span></div> <div>
<span class="content-number">{{ realData.attributeMap.windfarmdayoperationhours }}</span> <span>H</span>
</div>
<div>日利用小时</div> <div>日利用小时</div>
</div> </div>
</div> </div>
<div :sm="12" :lg="6" class="small-panel"> <div :sm="12" :lg="6" class="small-panel">
<img class="small-panel-pic" src="~assets/dashboard/viewY.png" alt=""> <img class="small-panel-pic" src="~assets/dashboard/viewY.png" alt="" />
<div class="small-base"> <div class="small-base">
<div><span class="content-number">{{realData.attributeMap.windfarmmonthoperationhours}}</span> <span>H</span></div> <div>
<span class="content-number">{{ realData.attributeMap.windfarmmonthoperationhours }}</span> <span>H</span>
</div>
<div>月利用小时</div> <div>月利用小时</div>
</div> </div>
</div> </div>
@ -44,22 +52,26 @@
<!--今日运行状态--> <!--今日运行状态-->
<div class="status panelBg"> <div class="status panelBg">
<el-text class="mx-1 homelabel" style="margin-bottom: 0;">今日运行状态</el-text> <el-text class="mx-1 homelabel" style="margin-bottom: 0">今日运行状态</el-text>
<el-row :gutter="10" class="statusrow"> <el-row :gutter="10" class="statusrow">
<el-col :span="12"> <el-col :span="12">
<div class="status-panel"> <div class="status-panel">
<img class="status-panel-pic" src="~assets/dashboard/status1.png" alt=""> <img class="status-panel-pic" src="~assets/dashboard/status1.png" alt="" />
<div class="status-base-main"> <div class="status-base-main">
<div><span class="content-number">{{currentDayStatus.windTurbineNum}}</span> <span>台</span></div> <div>
<span class="content-number">{{ currentDayStatus.windTurbineNum }}</span> <span>台</span>
</div>
<div>风机台数</div> <div>风机台数</div>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="status-panel"> <div class="status-panel">
<img class="status-panel-pic" src="~assets/dashboard/status2.png" alt=""> <img class="status-panel-pic" src="~assets/dashboard/status2.png" alt="" />
<div class="status-base-main"> <div class="status-base-main">
<div><span class="content-number">{{currentDayStatus.installedCapacity}}</span> <span>MW</span></div> <div>
<span class="content-number">{{ currentDayStatus.installedCapacity }}</span> <span>MW</span>
</div>
<div>装机容量</div> <div>装机容量</div>
</div> </div>
</div> </div>
@ -69,7 +81,7 @@
<el-col :span="12"> <el-col :span="12">
<div class="status-panel status-con"> <div class="status-panel status-con">
<div> <div>
<img class="status-panel-piczt" src="~assets/dashboard/status04.png" alt=""> <img class="status-panel-piczt" src="~assets/dashboard/status04.png" alt="" />
<p>运行</p> <p>运行</p>
</div> </div>
<div class="status-base"> <div class="status-base">
@ -87,7 +99,7 @@
<el-col :span="12"> <el-col :span="12">
<div class="status-panel status-con"> <div class="status-panel status-con">
<div> <div>
<img class="status-panel-piczt" src="~assets/dashboard/status03.png" alt=""> <img class="status-panel-piczt" src="~assets/dashboard/status03.png" alt="" />
<p>启动</p> <p>启动</p>
</div> </div>
<div class="status-base"> <div class="status-base">
@ -107,7 +119,7 @@
<el-col :span="12"> <el-col :span="12">
<div class="status-panel status-con"> <div class="status-panel status-con">
<div> <div>
<img class="status-panel-piczt" src="~assets/dashboard/status01.png" alt=""> <img class="status-panel-piczt" src="~assets/dashboard/status01.png" alt="" />
<p>待机</p> <p>待机</p>
</div> </div>
@ -126,7 +138,7 @@
<el-col :span="12"> <el-col :span="12">
<div class="status-panel status-con"> <div class="status-panel status-con">
<div> <div>
<img class="status-panel-piczt" src="~assets/dashboard/status06.png" alt=""> <img class="status-panel-piczt" src="~assets/dashboard/status06.png" alt="" />
<p>停机</p> <p>停机</p>
</div> </div>
@ -147,7 +159,7 @@
<el-col :span="12"> <el-col :span="12">
<div class="status-panel status-con"> <div class="status-panel status-con">
<div> <div>
<img class="status-panel-piczt" src="~assets/dashboard/status02.png" alt=""> <img class="status-panel-piczt" src="~assets/dashboard/status02.png" alt="" />
<p>离线</p> <p>离线</p>
</div> </div>
@ -166,7 +178,7 @@
<el-col :span="12"> <el-col :span="12">
<div class="status-panel status-con"> <div class="status-panel status-con">
<div> <div>
<img class="status-panel-piczt" src="~assets/dashboard/status05.png" alt=""> <img class="status-panel-piczt" src="~assets/dashboard/status05.png" alt="" />
<p>维修</p> <p>维修</p>
</div> </div>
@ -186,7 +198,7 @@
</div> </div>
<!--功率趋势--> <!--功率趋势-->
<div class="power panelBg" style="margin-bottom: 0;"> <div class="power panelBg" style="margin-bottom: 0">
<el-text class="mx-1 homelabel">功率趋势</el-text> <el-text class="mx-1 homelabel">功率趋势</el-text>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col class="lg-mb-20" :span="24"> <el-col class="lg-mb-20" :span="24">
@ -197,8 +209,7 @@
</div> </div>
</el-col> </el-col>
<el-col :span="12" class="col-center">
<el-col :span="12">
<div class="grid-content ep-bg-purple-light"> <div class="grid-content ep-bg-purple-light">
<!--风机矩阵--> <!--风机矩阵-->
<div class="matrix panelBg"> <div class="matrix panelBg">
@ -223,10 +234,12 @@
<el-col :span="6"> <el-col :span="6">
<div class="summarize-panel"> <div class="summarize-panel">
<div class="summarize-panel-pic"> <div class="summarize-panel-pic">
<img src="~assets/dashboard/fdl1.png" alt=""> <img src="~assets/dashboard/fdl1.png" alt="" />
</div> </div>
<div class="summarize-panel-base"> <div class="summarize-panel-base">
<div><span class="content-number">{{realData.attributeMap.windfarmdayprodenergy}}</span></div> <div>
<span class="content-number">{{ realData.attributeMap.windfarmdayprodenergy }}</span>
</div>
<div><span>kWh</span></div> <div><span>kWh</span></div>
<div><span>日发电量</span></div> <div><span>日发电量</span></div>
</div> </div>
@ -235,10 +248,12 @@
<el-col :span="6"> <el-col :span="6">
<div class="summarize-panel"> <div class="summarize-panel">
<div class="summarize-panel-pic"> <div class="summarize-panel-pic">
<img src="~assets/dashboard/fdl2.png" alt=""> <img src="~assets/dashboard/fdl2.png" alt="" />
</div> </div>
<div class="summarize-panel-base"> <div class="summarize-panel-base">
<div><span class="content-number">{{realData.attributeMap.windfarmmonthprodenergy}}</span></div> <div>
<span class="content-number">{{ realData.attributeMap.windfarmmonthprodenergy }}</span>
</div>
<div><span>kWh</span></div> <div><span>kWh</span></div>
<div><span>月发电量</span></div> <div><span>月发电量</span></div>
</div> </div>
@ -247,10 +262,12 @@
<el-col :span="6"> <el-col :span="6">
<div class="summarize-panel"> <div class="summarize-panel">
<div class="summarize-panel-pic"> <div class="summarize-panel-pic">
<img src="~assets/dashboard/fdl3.png" alt=""> <img src="~assets/dashboard/fdl3.png" alt="" />
</div> </div>
<div class="summarize-panel-base"> <div class="summarize-panel-base">
<div><span class="content-number">{{realData.attributeMap.windfarmyearprodenergy}}</span></div> <div>
<span class="content-number">{{ realData.attributeMap.windfarmyearprodenergy }}</span>
</div>
<div><span>kWh</span></div> <div><span>kWh</span></div>
<div><span>年发电量</span></div> <div><span>年发电量</span></div>
</div> </div>
@ -259,10 +276,12 @@
<el-col :span="6"> <el-col :span="6">
<div class="summarize-panel"> <div class="summarize-panel">
<div class="summarize-panel-pic"> <div class="summarize-panel-pic">
<img src="~assets/dashboard/fdl4.png" alt=""> <img src="~assets/dashboard/fdl4.png" alt="" />
</div> </div>
<div class="summarize-panel-base"> <div class="summarize-panel-base">
<div><span class="content-number">{{realData.attributeMap.windfarmtotalprodenergy}}</span></div> <div>
<span class="content-number">{{ realData.attributeMap.windfarmtotalprodenergy }}</span>
</div>
<div><span>kWh</span></div> <div><span>kWh</span></div>
<div><span>总发电量</span></div> <div><span>总发电量</span></div>
</div> </div>
@ -286,24 +305,26 @@
</div> </div>
<!--实时告警--> <!--实时告警-->
<div class="trend panelBg" style="margin-bottom: 0;"> <div class="trend panelBg" style="margin-bottom: 0">
<el-text class="mx-1 homelabel">实时告警</el-text> <el-text class="mx-1 homelabel">实时告警</el-text>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="24"> <el-col :span="24">
<el-table :data="tableData" <el-table
:data="tableData"
class="tablePart" class="tablePart"
height="250" height="250"
ref="myTable" ref="myTable"
@mouseover.native="clearScroll" @mouseover.native="clearScroll"
@mouseleave.native="createScroll"> @mouseleave.native="createScroll"
>
<el-table-column fixed prop="eventTimeFormate" label="时间" /> <el-table-column fixed prop="eventTimeFormate" label="时间" />
<el-table-column prop="deviceCode" label="风机" /> <el-table-column prop="deviceCode" label="风机" />
<el-table-column prop="eventText" label="告警内容" /> <el-table-column prop="eventText" label="告警内容" />
<el-table-column label="操作"> <el-table-column label="操作">
<template #default="scope"> <template #default="scope">
<div class="tableOperate comfirmed" style="color: #333333;" v-if="scope.row.confirmed">已确认</div> <div class="tableOperate comfirmed" style="color: #333333" v-if="scope.row.confirmed">已确认</div>
<div class="tableOperate" v-else> <div class="tableOperate" v-else>
<a style="color: #0277B3; cursor: pointer;" @click="open(scope.row)">确认</a> <a style="color: #0277b3; cursor: pointer" @click="open(scope.row)">确认</a>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -318,44 +339,37 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {nextTick, onActivated, onMounted, reactive, ref, onBeforeMount, onUnmounted, VNodeRef} from "vue"; import { nextTick, onActivated, onMounted, reactive, ref, onBeforeMount, onUnmounted, VNodeRef } from 'vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { useTemplateRefsList, useEventListener } from '@vueuse/core' import { useTemplateRefsList, useEventListener } from '@vueuse/core'
import {useI18n} from "vue-i18n"; import { useI18n } from 'vue-i18n'
import WindContent from '/@/views/backend/home/windMatrix.vue' import WindContent from '/@/views/backend/home/windMatrix.vue'
import { equipList } from '/@/api/backend/realData/request' import { equipList } from '/@/api/backend/realData/request'
import { import { getWindFarmRealData, getWindTurbineMatrixData, getHistoryData } from '/@/api/backend/dashboard.ts'
getWindFarmRealData, import { dayjs, ElMessage, ElMessageBox, TableInstance } from 'element-plus'
getWindTurbineMatrixData,
getHistoryData
} from "/@/api/backend/dashboard.ts";
import {dayjs, ElMessage, ElMessageBox, TableInstance} from "element-plus";
import { getRealTimeState } from '/@/views/backend/equipment/airBlower/utils.ts' import { getRealTimeState } from '/@/views/backend/equipment/airBlower/utils.ts'
import {useRoute} from "vue-router"; import { useRoute } from 'vue-router'
import { getAlarmListReq, eventComfirm } from '/@/api/backend/alarms/request' import { getAlarmListReq, eventComfirm } from '/@/api/backend/alarms/request'
const route = useRoute() const route = useRoute()
const d = new Date() const d = new Date()
const { t } = useI18n() const { t } = useI18n()
let timer: any = null let timer: any = null
let myTable = ref<TableInstance>() let myTable = ref<TableInstance>()
const realData = ref({ const realData = ref({
windFarmId: '', windFarmId: '',
attributeMap: {} attributeMap: {},
}) })
const formatAttributeValue = (value: any) => { const formatAttributeValue = (value: any) => {
if (value === undefined) { if (value === undefined) {
return '-'; return '-'
} }
if (typeof value !== 'number') { if (typeof value !== 'number') {
throw new Error('Invalid data type for attribute value'); throw new Error('Invalid data type for attribute value')
} }
return value % 1 === 0 ? value : value.toFixed(2); return value % 1 === 0 ? value : value.toFixed(2)
} }
const overviewList = () => { const overviewList = () => {
getWindFarmRealData().then((res) => { getWindFarmRealData().then((res) => {
@ -379,7 +393,7 @@ const overviewList = () => {
windfarmmonthoperationhours: res.data.attributeMap.windfarmmonthoperationhours, windfarmmonthoperationhours: res.data.attributeMap.windfarmmonthoperationhours,
windfarmyearprodenergy: res.data.attributeMap.windfarmyearprodenergy, windfarmyearprodenergy: res.data.attributeMap.windfarmyearprodenergy,
windfarmtotalprodenergy: res.data.attributeMap.windfarmtotalprodenergy, windfarmtotalprodenergy: res.data.attributeMap.windfarmtotalprodenergy,
} },
} }
realData.value = data realData.value = data
@ -389,7 +403,6 @@ const overviewList = () => {
type: 'error', type: 'error',
}) })
} }
}) })
} }
const currentDayStatus = ref({ const currentDayStatus = ref({
@ -406,7 +419,7 @@ const currentDayStatus=ref({
StandCapacityTotal: 0, StandCapacityTotal: 0,
StandNum: 0, StandNum: 0,
StartCapacityTotal: 0, StartCapacityTotal: 0,
StarteNum: 0 StarteNum: 0,
}) })
const deviceCode = ref([]) const deviceCode = ref([])
const FanList = ref([]) const FanList = ref([])
@ -416,52 +429,67 @@ const StatusListData = () => {
currentDayStatus.value.windTurbineNum = res.data.length currentDayStatus.value.windTurbineNum = res.data.length
const data = res.data.map((item, index) => { const data = res.data.map((item, index) => {
const state = getRealTimeState(item.attributeMap) const state = getRealTimeState(item.attributeMap)
item.attributeMap.iwindspeed=item.attributeMap.iwindspeed !== undefined ? (item.attributeMap.iwindspeed % 1 === 0 ? item.attributeMap.iwindspeed : item.attributeMap.iwindspeed.toFixed(2)) : '--' item.attributeMap.iwindspeed =
item.attributeMap.igenpower=item.attributeMap.igenpower !== undefined ? (item.attributeMap.igenpower % 1 === 0 ? item.attributeMap.igenpower : item.attributeMap.igenpower.toFixed(2)) : '--' item.attributeMap.iwindspeed !== undefined
item.attributeMap.ikwhthisday=item.attributeMap.ikwhthisday !== undefined ? (item.attributeMap.ikwhthisday % 1 === 0 ? item.attributeMap.ikwhthisday : item.attributeMap.ikwhthisday.toFixed(2)) : '--' ? 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)
: '--'
// 初始化计数器和累加器 // 初始化计数器和累加器
if (index === 0) { if (index === 0) {
currentDayStatus.value.runNum = 0; currentDayStatus.value.runNum = 0
currentDayStatus.value.standbyNum = 0; currentDayStatus.value.standbyNum = 0
currentDayStatus.value.StandNum = 0; currentDayStatus.value.StandNum = 0
currentDayStatus.value.StarteNum = 0; currentDayStatus.value.StarteNum = 0
currentDayStatus.value.offlineNum = 0; currentDayStatus.value.offlineNum = 0
currentDayStatus.value.faultNum = 0; currentDayStatus.value.faultNum = 0
currentDayStatus.value.runCapacityTotal = 0; currentDayStatus.value.runCapacityTotal = 0
currentDayStatus.value.standbyCapacityTotal = 0; currentDayStatus.value.standbyCapacityTotal = 0
currentDayStatus.value.StandCapacityTotal = 0; currentDayStatus.value.StandCapacityTotal = 0
currentDayStatus.value.StartCapacityTotal = 0; currentDayStatus.value.StartCapacityTotal = 0
currentDayStatus.value.offlineCapacityTotal = 0; currentDayStatus.value.offlineCapacityTotal = 0
currentDayStatus.value.faultCapacityTotal = 0; currentDayStatus.value.faultCapacityTotal = 0
currentDayStatus.value.installedCapacity=0; currentDayStatus.value.installedCapacity = 0
} }
// 更新容量 // 更新容量
if (item.nominalCapacity !== undefined) { if (item.nominalCapacity !== undefined) {
currentDayStatus.value.installedCapacity += item.nominalCapacity; currentDayStatus.value.installedCapacity += item.nominalCapacity
} }
// 根据运行模式更新状态和数量 // 根据运行模式更新状态和数量
//const mode = item.attributeMap.iturbineoperationmode //const mode = item.attributeMap.iturbineoperationmode
if ([7, 8, 17, 18, 19, 20, 21].includes(state)) { if ([7, 8, 17, 18, 19, 20, 21].includes(state)) {
currentDayStatus.value.runCapacityTotal += item.nominalCapacity; currentDayStatus.value.runCapacityTotal += item.nominalCapacity
currentDayStatus.value.runNum += 1; currentDayStatus.value.runNum += 1
} else if ([1, 2, 3, 4, 5, 6].includes(state)) { } else if ([1, 2, 3, 4, 5, 6].includes(state)) {
currentDayStatus.value.standbyCapacityTotal += item.nominalCapacity; currentDayStatus.value.standbyCapacityTotal += item.nominalCapacity
currentDayStatus.value.standbyNum += 1; currentDayStatus.value.standbyNum += 1
} else if ([9, 10, 12, 13, 14, 15].includes(state)) { } else if ([9, 10, 12, 13, 14, 15].includes(state)) {
currentDayStatus.value.StandCapacityTotal += item.nominalCapacity; currentDayStatus.value.StandCapacityTotal += item.nominalCapacity
currentDayStatus.value.StandNum += 1; currentDayStatus.value.StandNum += 1
} else if (state === 16) { } else if (state === 16) {
currentDayStatus.value.StartCapacityTotal += item.nominalCapacity; currentDayStatus.value.StartCapacityTotal += item.nominalCapacity
currentDayStatus.value.StarteNum += 1; currentDayStatus.value.StarteNum += 1
} else if (state === 0) { } else if (state === 0) {
currentDayStatus.value.offlineCapacityTotal += item.nominalCapacity; currentDayStatus.value.offlineCapacityTotal += item.nominalCapacity
currentDayStatus.value.offlineNum += 1; currentDayStatus.value.offlineNum += 1
} else if (state === 11) { } else if (state === 11) {
currentDayStatus.value.faultCapacityTotal += item.nominalCapacity; currentDayStatus.value.faultCapacityTotal += item.nominalCapacity
currentDayStatus.value.faultNum += 1; currentDayStatus.value.faultNum += 1
} }
const propertiesToFormat = [ const propertiesToFormat = [
'runCapacityTotal', 'runCapacityTotal',
@ -470,14 +498,14 @@ const StatusListData = () => {
'StartCapacityTotal', 'StartCapacityTotal',
'offlineCapacityTotal', 'offlineCapacityTotal',
'faultCapacityTotal', 'faultCapacityTotal',
'installedCapacity' 'installedCapacity',
]; ]
propertiesToFormat.forEach(property => { propertiesToFormat.forEach((property) => {
if (currentDayStatus.value[property] !== null && currentDayStatus.value[property] !== undefined) { if (currentDayStatus.value[property] !== null && currentDayStatus.value[property] !== undefined) {
currentDayStatus.value[property] = Number(currentDayStatus.value[property].toFixed(0)); currentDayStatus.value[property] = Number(currentDayStatus.value[property].toFixed(0))
} }
}); })
return { return {
irn: item.irn, irn: item.irn,
name: item.name ?? '-', name: item.name ?? '-',
@ -491,9 +519,9 @@ const StatusListData = () => {
ikwhthisday: item.attributeMap.ikwhthisday, ikwhthisday: item.attributeMap.ikwhthisday,
iturbineoperationmode: state, iturbineoperationmode: state,
locked: item.attributeMap.locked, locked: item.attributeMap.locked,
},
} }
} })
});
FanList.value = data FanList.value = data
} else { } else {
ElMessage.error({ ElMessage.error({
@ -501,12 +529,9 @@ const StatusListData = () => {
type: 'error', type: 'error',
}) })
} }
}) })
} }
const state: { const state: {
charts: { powerChart: any; trendChart: any } charts: { powerChart: any; trendChart: any }
remark: string remark: string
@ -565,8 +590,7 @@ const initpowerChart = () => {
color: '#999999', color: '#999999',
}, },
}, },
data: powerChartData.time.WindFarmAvgWindSpee??powerChartData.time.WindFarmActivePower data: powerChartData.time.WindFarmAvgWindSpee ?? powerChartData.time.WindFarmActivePower,
,
}, },
yAxis: [ yAxis: [
{ {
@ -643,7 +667,7 @@ const initpowerChart = () => {
//barWidth: 10, //barWidth: 10,
itemStyle: { itemStyle: {
color: '#00A7EB', color: '#00A7EB',
barBorderRadius: 2 barBorderRadius: 2,
}, },
data: powerChartData.values?.WindFarmActivePower ?? [], data: powerChartData.values?.WindFarmActivePower ?? [],
}, },
@ -661,9 +685,9 @@ const initpowerChart = () => {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: 'rgba(255,126,0,0.8)' color: 'rgba(255,126,0,0.8)',
} },
]) ]),
}, },
data: powerChartData.values?.WindFarmAvgWindSpeed ?? [], data: powerChartData.values?.WindFarmAvgWindSpeed ?? [],
}, },
@ -673,8 +697,6 @@ const initpowerChart = () => {
state.charts.powerChart = powerChart state.charts.powerChart = powerChart
} }
const trendChartRef = ref<VNodeRef>() const trendChartRef = ref<VNodeRef>()
const TrendDataForDay: { const TrendDataForDay: {
currentPeriod: { currentPeriod: {
@ -825,7 +847,6 @@ const inittrendChart = (type: 'day' | 'month') => {
state.charts.trendChart = trendChart state.charts.trendChart = trendChart
} }
const echartsResize = () => { const echartsResize = () => {
nextTick(() => { nextTick(() => {
const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts> const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
@ -850,15 +871,15 @@ const timestampToTime = (timestamp: any) => {
const tableData = ref() const tableData = ref()
const getTableData = (deviceCode) => { const getTableData = (deviceCode) => {
const today = new Date(); const today = new Date()
const threeDaysAgo = new Date(today); const threeDaysAgo = new Date(today)
threeDaysAgo.setDate(today.getDate() - 3); threeDaysAgo.setDate(today.getDate() - 3)
const startTime = threeDaysAgo.getTime(); const startTime = threeDaysAgo.getTime()
const data: any = { const data: any = {
startTime: startTime, startTime: startTime,
endTime: Date.now(), endTime: Date.now(),
deviceCode: deviceCode, deviceCode: deviceCode,
limit:100 limit: 100,
} }
console.log(JSON.stringify(data)) console.log(JSON.stringify(data))
getAlarmListReq(data).then((res) => { getAlarmListReq(data).then((res) => {
@ -917,7 +938,6 @@ const okSubmit = (val: any) => {
}) })
} }
const clearScroll = () => { const clearScroll = () => {
clearInterval(timer) clearInterval(timer)
timer = null timer = null
@ -983,7 +1003,6 @@ const getChartData = <T extends string = any>(params: {
}) })
resolve({ times, val }) resolve({ times, val })
} }
} }
}) })
}) })
@ -1013,7 +1032,7 @@ const getLastYearChartData = () => {
const start = getLastYearTodayTimestamp() const start = getLastYearTodayTimestamp()
const end = new Date() const end = new Date()
end.setFullYear(end.getFullYear() - 1) end.setFullYear(end.getFullYear() - 1)
end.setMonth(end.getMonth() + 1, 0); // 设置为下个月的第一天，然后减去一天 end.setMonth(end.getMonth() + 1, 0) // 设置为下个月的第一天，然后减去一天
getChartData<'WindFarmDayProdEnergy'>({ getChartData<'WindFarmDayProdEnergy'>({
startTime: start, startTime: start,
@ -1044,24 +1063,23 @@ const getThisDayChartForHourData = () => {
} }
//发电连月 //发电连月
const getLastMonthTodayTimestamp = () => { const getLastMonthTodayTimestamp = () => {
const now = new Date(); // 当前日期 const now = new Date() // 当前日期
const thisYear = now.getFullYear(); // 获取当前年份 const thisYear = now.getFullYear() // 获取当前年份
const lastYear = thisYear - 1; // 计算去年年份 const lastYear = thisYear - 1 // 计算去年年份
const firstDayOfLastYear = new Date(lastYear, 0, 1); // 设置为去年的一月一日 const firstDayOfLastYear = new Date(lastYear, 0, 1) // 设置为去年的一月一日
return firstDayOfLastYear.getTime() return firstDayOfLastYear.getTime()
} }
const getThisMonthTodayTimestamp = () => { const getThisMonthTodayTimestamp = () => {
const now = new Date(); // 当前日期 const now = new Date() // 当前日期
const thisYear = now.getFullYear(); // 获取当前年份 const thisYear = now.getFullYear() // 获取当前年份
const firstDayOfYear = new Date(thisYear, 0, 1); // 设置为今年的一月一日 const firstDayOfYear = new Date(thisYear, 0, 1) // 设置为今年的一月一日
return firstDayOfYear.getTime() return firstDayOfYear.getTime()
} }
const getLastYear = () => { const getLastYear = () => {
const now = new Date(); // 当前日期 const now = new Date() // 当前日期
const thisYear = now.getFullYear(); // 获取当前年份 const thisYear = now.getFullYear() // 获取当前年份
const lastYear = thisYear - 1; // 计算去年年份 const lastYear = thisYear - 1 // 计算去年年份
const lastDayOfLastYear = new Date(lastYear, 11, 0); // 设置为去年12月的最后一天 const lastDayOfLastYear = new Date(lastYear, 11, 0) // 设置为去年12月的最后一天
return lastDayOfLastYear.getTime() return lastDayOfLastYear.getTime()
} }
const getLastMonthChartData = () => { const getLastMonthChartData = () => {
@ -1097,7 +1115,6 @@ const getThisMonthChartForHourData = () => {
}) })
} }
const getAllChartData = (type: ('power' | 'trend')[] = ['power', 'trend']) => { const getAllChartData = (type: ('power' | 'trend')[] = ['power', 'trend']) => {
if (type.includes('power')) { if (type.includes('power')) {
getThisDayChartData().then(() => { getThisDayChartData().then(() => {
@ -1130,7 +1147,7 @@ onMounted(() => {
StatusListData() StatusListData()
autoUpdate() autoUpdate()
equipList({objectType: 10002,}).then((res) => { equipList({ objectType: 10002 }).then((res) => {
res.data.map((item: any) => { res.data.map((item: any) => {
deviceCode.value.push(item.name) deviceCode.value.push(item.name)
}) })
@ -1173,22 +1190,36 @@ onUnmounted(() => {
chartKeys.forEach((key) => { chartKeys.forEach((key) => {
state.charts[key].dispose() state.charts[key].dispose()
}) })
}); })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@media screen and (max-width: 1910px) {
.default-main {
.content-number {
font-size: 16px !important;
}
.homelabel {
font-size: 16px !important;
}
.grid-content {
.panelBg {
padding: 10px !important;
margin-bottom: 10px !important;
}
}
.col-center {
padding: 0px !important;
}
}
}
.default-main { .default-main {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
color: #4E5969; color: #4e5969;
background-color: #F2F3F5; background-color: #f2f3f5;
.content-number { .content-number {
color: #333333; color: #333333;
font-size: 20px; font-size: 20px;
@ -1196,7 +1227,7 @@ onUnmounted(() => {
.homelabel { .homelabel {
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-size: 18px; font-size: 18px;
color: #4E5969; color: #4e5969;
letter-spacing: 0; letter-spacing: 0;
line-height: 18px; line-height: 18px;
font-weight: 600; font-weight: 600;
@ -1215,7 +1246,7 @@ onUnmounted(() => {
.overview { .overview {
.small-panel { .small-panel {
display: flex; display: flex;
border: 1px solid #E1EDF6; border: 1px solid #e1edf6;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
.small-panel-pic { .small-panel-pic {
@ -1234,7 +1265,7 @@ onUnmounted(() => {
} }
.status-con { .status-con {
padding-left: 20px !important; padding-left: 20px !important;
background: #F0F6FF; background: #f0f6ff;
border-radius: 10px; border-radius: 10px;
} }
.status-panel { .status-panel {
@ -1253,7 +1284,7 @@ onUnmounted(() => {
.status-base { .status-base {
margin-left: 10px; margin-left: 10px;
line-height: 23px; line-height: 23px;
padding: 6px 10px 0 10px;; padding: 6px 10px 0 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
@ -1263,7 +1294,6 @@ onUnmounted(() => {
height: 24px; height: 24px;
} }
} }
} }
.power { .power {
.power-chart { .power-chart {
@ -1272,7 +1302,7 @@ onUnmounted(() => {
} }
} }
.matrix { .matrix {
background: url("/@/assets/dashboard/bg1.png") no-repeat #ffffff; background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff;
background-size: 100% 100%; background-size: 100% 100%;
height: 100%; height: 100%;
} }
@ -1282,7 +1312,7 @@ onUnmounted(() => {
justify-content: space-between; justify-content: space-between;
} }
.summarize-panel { .summarize-panel {
background: #F0F6FF; background: #f0f6ff;
border-radius: 10px; border-radius: 10px;
margin: 5px; margin: 5px;
padding: 10px; padding: 10px;
@ -1292,9 +1322,7 @@ onUnmounted(() => {
.summarize-panel-base { .summarize-panel-base {
text-align: center; text-align: center;
} }
} }
} }
.trend { .trend {
height: 350px; height: 350px;
@ -1315,13 +1343,13 @@ onUnmounted(() => {
:deep(.el-tabs__header) { :deep(.el-tabs__header) {
border-bottom: 0; border-bottom: 0;
float: right; float: right;
margin-top:-43px margin-top: -43px;
} }
:deep(.el-tabs__content) { :deep(.el-tabs__content) {
clear: both; clear: both;
} }
:deep(.el-tabs__item.is-active) { :deep(.el-tabs__item.is-active) {
background: rgba(2,119,179,0.20); background: rgba(2, 119, 179, 0.2);
border-radius: 4px; border-radius: 4px;
border: none; border: none;
} }
@ -1331,16 +1359,12 @@ onUnmounted(() => {
:deep(.el-tabs__active-bar) { :deep(.el-tabs__active-bar) {
background: none; background: none;
} }
} }
.trend-chart { .trend-chart {
width: 100%; width: 100%;
height: 260px; height: 260px;
} }
} }
} }
} }
</style> </style>