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

单风机页面跳转添加adminPath

Browse Source 
单风机：页面ui调整
This commit is contained in:
高云鹏 2024-11-08 17:51:17 +08:00
parent 805f0d1906
commit a9163d3156
4 changed files with 553 additions and 566 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,4 @@
<template>
<div class="default-main">
<el-dialog v-model="visible" :title="subSystemName" width="1020" :before-close="handleClose" :show-close="false">
<div class="radioItem">
<el-radio-group v-model="dialogradioactiveName">
@ -25,82 +24,78 @@
</template>
</el-dialog>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content ep-bg-purple">
<!--实时预览-->
<div class="overview panelBg">
<el-text class="mx-1 homelabel">实时预览</el-text>
<div class="windBlower" ref="windBlower">
<el-row :gutter="10">
<div class="realScroll" ref="listContainer">
<div class="realPart">
<el-col :span="6">
<div class="cardContentLeft">
<!--实时预览-->
<div class="overview">
<div class="cardLabel">实时预览</div>
<div class="overviewDataSection" ref="listContainer">
<div class="overviewDataSectionItem">
<span class="realLeft">网侧A相电压：</span>
<span class="reafRight">{{ overviewData.iul1_690v }}</span>
</div>
<div class="realPart">
<div class="overviewDataSectionItem">
<span class="realLeft">网侧B相电压：</span>
<span class="reafRight">{{ overviewData.iul2_690v }}</span>
</div>
<div class="realPart">
<div class="overviewDataSectionItem">
<span class="realLeft">网侧C相电压：</span>
<span class="reafRight">{{ overviewData.iul3_690v }}</span>
</div>
<div class="realPart">
<div class="overviewDataSectionItem">
<span class="realLeft">有功功率：</span>
<span class="reafRight">{{ overviewData.igenpower }}</span>
</div>
<div class="realPart">
<div class="overviewDataSectionItem">
<span class="realLeft">无功功率：</span>
<span class="reafRight">{{ overviewData.ireactivepower }}</span>
</div>
<div class="realPart">
<div class="overviewDataSectionItem">
<span class="realLeft">功率因素：</span>
<span class="reafRight">{{ overviewData.icosphi }}</span>
</div>
<div class="realPart">
<div class="overviewDataSectionItem">
<span class="realLeft">主轴承温度A：</span>
<span class="reafRight">{{ overviewData.itemprotorbeara_1sec }}</span>
</div>
<div class="realPart">
<div class="overviewDataSectionItem">
<span class="realLeft">主轴承温度B：</span>
<span class="reafRight">{{ overviewData.itemprotorbeara_1sec }}</span>
</div>
<div class="realPart">
<div class="overviewDataSectionItem">
<span class="realLeft">总扭缆角度：</span>
<span class="reafRight">{{ overviewData.icabletwisttotal }}</span>
</div>
<div class="realPart">
<div class="overviewDataSectionItem">
<span class="realLeft">发动机驱动侧轴承温度：</span>
<span class="reafRight">{{ overviewData.itempgenbearde_1sec }}</span>
</div>
<div class="realPart">
<div class="overviewDataSectionItem">
<span class="realLeft">发动机非驱动侧轴承温度：</span>
<span class="reafRight">{{ overviewData.itempgenbearnde_1sec }}</span>
</div>
</div>
<div class="ralIcon" @click="handleClick">
<el-icon :size="20" color="#0064AA" @click="() => (overviewSlotData.visible = true)"><DArrowRight /></el-icon>
<div class="overviewDataBtn">
<el-icon color="#0064AA" @click="() => (overviewSlotData.visible = true)"><DArrowRight /></el-icon>
</div>
</el-row>
</div>
<!--功率趋势-->
<div class="power panelBg" style="margin-bottom: 0">
<el-text class="mx-1 homelabel">功率趋势</el-text>
<el-row :gutter="10">
<el-col class="lg-mb-20" :span="24">
<div class="power">
<div class="cardLabel">功率趋势</div>
<div class="chartBox">
<div class="power-chart" ref="powerChartRef"></div>
</el-col>
</el-row>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content ep-bg-purple-light">
<div class="cardContentCenter">
<!--风机控制-->
<div class="matrix panelBg">
<div class="Fan-control">
<div class="controlBackgroundImg">
<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>
@ -139,7 +134,6 @@
<div @click="openSubSystem(6)" class="dot index-6"></div>
</el-tooltip>
</div>
<div class="Parameters">
<div class="Parameters-item">
<img src="~assets/WindBlower/power.png" />
@ -183,17 +177,13 @@
</div>
</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content ep-bg-purple">
<div class="cardContentRight">
<!--发电量概况-->
<div class="summarize panelBg">
<div class="summarize-title">
<el-text class="mx-1 homelabel">发电量概况</el-text>
</div>
<el-row :gutter="5">
<el-col :span="6">
<div class="summarize">
<div class="cardLabel">发电量概况</div>
<div class="summarize-panel-list">
<div class="summarize-panel">
<div class="summarize-panel-pic">
<img src="~assets/dashboard/fdl1.png" alt="" />
@ -202,12 +192,10 @@
<div>
<span class="content-number">{{ realTimeDataForSingle.ikwhthisday }}</span>
</div>
<div><span>kWh</span></div>
<div><span>日发电量</span></div>
<div>kWh</div>
<div>日发电量</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="summarize-panel">
<div class="summarize-panel-pic">
<img src="~assets/dashboard/fdl2.png" alt="" />
@ -216,12 +204,10 @@
<div>
<span class="content-number">{{ realTimeDataForSingle.monthprodenergy }}</span>
</div>
<div><span>万kWh</span></div>
<div><span>月发电量</span></div>
<div>万kWh</div>
<div>月发电量</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="summarize-panel">
<div class="summarize-panel-pic">
<img src="~assets/dashboard/fdl3.png" alt="" />
@ -230,12 +216,10 @@
<div>
<span class="content-number">{{ realTimeDataForSingle.yearprodenergy }}</span>
</div>
<div><span>万kWh</span></div>
<div><span>年发电量</span></div>
<div>万kWh</div>
<div>年发电量</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="summarize-panel">
<div class="summarize-panel-pic">
<img src="~assets/dashboard/fdl4.png" alt="" />
@ -244,52 +228,37 @@
<div>
<span class="content-number">{{ realTimeDataForSingle.ikwhoverall }}</span>
</div>
<div><span>万kWh</span></div>
<div><span>总发电量</span></div>
<div>万kWh</div>
<div>总发电量</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<!--发电量趋势-->
<div class="trend panelBg">
<el-text class="mx-1 homelabel">发电量趋势</el-text>
<el-row :gutter="10">
<el-col :span="24">
<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">
<div class="cardLabel">发电量趋势</div>
<el-radio-group class="trendTabs" v-model="trendChartType" @change="tabhandleClick">
<el-radio-button label="日" value="day" />
<el-radio-button label="月" value="month" />
</el-radio-group>
<div class="trend-chart" ref="trendChartRef"></div>
</el-col>
</el-row>
</div>
<!--实时告警-->
<div class="trend panelBg" style="margin-bottom: 0">
<el-text class="mx-1 homelabel">实时告警</el-text>
<el-row :gutter="10">
<el-col :span="24">
<div class="alarm" style="margin-bottom: 0">
<div class="cardLabel">实时告警</div>
<el-table
:data="tableData"
class="tablePart"
height="250"
height="calc(100% - 38px)"
ref="myTable"
@mouseover.native="clearScroll"
@mouseleave.native="createScroll"
>
<el-table-column fixed prop="time" label="时间" />
<!-- <el-table-column prop="name" label="风机" />-->
<el-table-column prop="alertcontent" label="告警信息" />
<!-- <el-table-column label="操作">
<template #default="scope">
<a @click="">确认</a>
</template>
</el-table-column>-->
</el-table>
</el-col>
</el-row>
</div>
</div>
</el-col>
@ -332,6 +301,21 @@ const enumStore = useEnumStore()
const route = useRoute()
const { t } = useI18n()
const windBlower = ref()
const computedHeight = reactive({
powerHeight: '305px',
centerHeight: '1100px',
alarmHeight: '360px',
})
const sizeChange = () => {
const rect = windBlower.value?.getBoundingClientRect()
if (!rect) return
computedHeight.powerHeight = rect.height - 626 + 'px'
computedHeight.alarmHeight = rect.height - 570 + 'px'
computedHeight.centerHeight = rect.height - 20 + 'px'
}
let timer: any = null
let myTable = ref<TableInstance>()
@ -348,10 +332,6 @@ const overviewData = reactive({
itempgenbearde_1sec: '-',
itempgenbearnde_1sec: '-',
})
const handleClick = () => {
// debugger
// visible.value = true
}
const realTimeDataForSingle = ref<any>({
ikwhthisday: '-',
@ -1392,6 +1372,8 @@ const getAlarmList = () => {
}
getAlarmList()
onMounted(() => {
window.addEventListener('resize', sizeChange)
sizeChange()
getAllChartData()
createScroll()
useEventListener(window, 'resize', echartsResize)
@ -1399,6 +1381,7 @@ onMounted(() => {
})
onUnmounted(() => {
window.removeEventListener('resize', sizeChange)
autoUpdateForSecondTimer && clearInterval(autoUpdateForSecondTimer)
autoUpdateTimerForHourTimer && clearInterval(autoUpdateTimerForHourTimer)
autoUpdateTimerForMinuteTimer && clearInterval(autoUpdateTimerForMinuteTimer)
@ -1410,50 +1393,96 @@ onUnmounted(() => {
</script>
<style scoped lang="scss">
.default-main {
padding: 0;
margin: 0;
$marginNum: 10px;
$labelHeight: 38px;
@mixin cardDefaultStyle {
margin-top: $marginNum;
margin-bottom: $marginNum;
padding: 10px;
border-radius: 10px;
background-color: #fff;
}
@mixin cardlabel {
.cardLabel {
width: 100%;
height: $labelHeight;
font-size: 18px;
line-height: 18px;
font-weight: 600;
color: #4e5969;
background-color: #f2f3f5;
font-family: PingFangSC-Medium;
.radioItem {
}
}
.radioItem {
margin-top: -43px;
float: right;
}
.dialogContent {
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
.PitchPart {
.Pitchitem {
border: 1px solid #e1edf6;
display: flex;
justify-content: space-between;
margin-left: 15px;
width: 480px;
.PitchitemLeft {
display: flex;
align-items: center;
width: 325px;
min-height: 50px;
background: #f7f9fc;
padding-left: 20px;
font-size: 14px;
color: #4e5969;
letter-spacing: 0;
font-weight: 500;
word-break: break-all;
}
.content-number {
color: #333333;
font-size: 20px;
.PitchitemRight {
/*width: 180px;*/
height: 25px;
line-height: 50px;
padding-right: 20px;
font-size: 14px;
color: #4e5969;
letter-spacing: 0;
font-weight: 500;
}
.dialog-footer {
}
}
}
.dialog-footer {
text-align: center;
.el-button {
width: 120px;
height: 40px;
}
}
.overviewSlot {
display: flex;
.radioForOverviewType {
margin-left: auto;
}
.homelabel {
font-size: 18px;
color: #4e5969;
letter-spacing: 0;
line-height: 18px;
font-weight: 600;
margin-bottom: 20px;
display: block;
}
.grid-content {
height: 100%;
.panelBg {
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
margin-bottom: 20px;
}
.overview {
height: 580px;
.realScroll {
}
.windBlower {
width: 100%;
height: 450px;
.realPart {
height: 100%;
min-height: 920px;
background-color: #f2f3f5;
// overflow: hidden;
.cardContentLeft {
width: 100%;
.overview {
width: 100%;
@include cardDefaultStyle;
@include cardlabel;
.overviewDataSection {
width: 100%;
min-height: 495px;
.overviewDataSectionItem {
font-size: 14px;
color: #333333;
display: flex;
@ -1461,65 +1490,59 @@ onUnmounted(() => {
background: #f0f6ff;
border-radius: 4px;
width: 100%;
height: 40px;
min-height: 40px;
line-height: 40px;
margin-bottom: 5px;
padding: 0 10px;
}
}
.ralIcon {
.overviewDataBtn {
display: flex;
justify-content: center;
align-items: end;
width: 100%;
text-align: center;
height: 40px;
font-size: 22px;
.el-icon {
transform: rotate(90deg);
margin-top: 44px;
}
:hover {
cursor: pointer;
}
}
}
.status {
.statusrow {
margin-bottom: 10px;
}
.status-con {
padding-left: 20px !important;
background: #f0f6ff;
border-radius: 10px;
}
.status-panel {
display: flex;
padding: 10px;
font-size: 12px;
.status-panel-pic {
width: 60px;
height: 60px;
}
.status-base {
margin-left: 10px;
line-height: 23px;
padding-top: 6px;
}
.status-panel-piczt {
width: 36px;
height: 36px;
}
}
}
.power {
@include cardDefaultStyle;
@include cardlabel;
width: 100%;
min-height: 285px;
height: v-bind('computedHeight.powerHeight');
.chartBox {
width: 100%;
height: calc(100% - $labelHeight);
.power-chart {
width: 100%;
height: 300px;
}
}
.matrix {
//background: url("/@/assets/dashboard/bg1.png") no-repeat #ffffff;
background-size: 100% 100%;
height: 100%;
.Fan-control {
height: 480px;
background: url('/@/assets/WindBlower/bg.png') no-repeat #ffffff;
}
}
}
}
.cardContentCenter {
@include cardDefaultStyle;
display: flex;
padding-bottom: 20px;
flex-direction: column;
justify-content: space-around;
width: 100%;
min-height: 900px;
height: v-bind('computedHeight.centerHeight');
.controlBackgroundImg {
position: relative;
background-size: 100% 100%;
width: 100%;
// height: 450px;
aspect-ratio: 43 / 24;
background: url('/@/assets/WindBlower/bg.png') no-repeat;
background-size: contain;
.control-type {
width: 100%;
display: flex;
@ -1595,21 +1618,17 @@ onUnmounted(() => {
}
}
.Parameters {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
width: 100%;
display: flex;
.Parameters-item {
width: 145px;
margin: 5px;
width: 20%;
height: 160px;
background: #f0f6ff;
border-radius: 8px;
text-align: center;
color: #4e5969;
/*img{
width: 80px;
height: 80px;
}*/
.Parameters-font {
font-size: 20px;
color: #333333;
@ -1617,134 +1636,96 @@ onUnmounted(() => {
}
}
.chartPart {
align-items: center;
margin-top: 10px;
margin-top: auto;
width: 100%;
min-height: 220px;
flex-shrink: 1;
display: flex;
justify-content: space-between;
.chartPart-item {
width: 145px;
height: 250px;
margin: 5px;
width: 23%;
height: 100%;
background: #f0f6ff;
border-radius: 8px;
text-align: center;
color: #4e5969;
.chartParm {
width: 100%;
height: 250px;
height: 100%;
min-height: 220px;
}
.frequencyChart {
width: 100%;
height: 250px;
height: 100%;
}
}
.item_bar {
width: 299px;
height: 250px;
width: 31%;
}
}
}
.cardContentRight {
width: 100%;
height: 100%;
// min-height: 920px;
.summarize {
.summarize-title {
width: 100%;
@include cardDefaultStyle;
@include cardlabel;
.summarize-panel-list {
width: 100%;
display: flex;
justify-content: space-between;
}
.summarize-panel {
background: #f0f6ff;
border-radius: 10px;
margin: 5px;
padding: 10px;
.summarize-panel-pic {
text-align: center;
}
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f6ff;
border-radius: 10px;
.summarize-panel-base {
text-align: center;
width: 100%;
flex-direction: column;
align-items: center;
div {
display: flex;
justify-content: center;
font-size: 14px;
color: rgb(78, 89, 105);
.content-number {
color: #333333;
font-size: 20px;
}
}
}
}
}
.trend {
height: 350px;
overflow: hidden;
.trend-tabs {
:deep(.el-tabs__item) {
border: none;
text-align: center;
width: 40px;
padding: 0;
line-height: 24px;
height: 24px;
}
:deep(.el-tabs__header .el-tabs__nav) {
border-radius: 0;
border: none;
}
:deep(.el-tabs__header) {
border-bottom: 0;
float: right;
margin-top: -43px;
}
:deep(.el-tabs__content) {
clear: both;
}
:deep(.el-tabs__item.is-active) {
background: rgba(2, 119, 179, 0.2);
border-radius: 4px;
border: none;
}
:deep(.el-tabs__nav-wrap:after) {
background: none;
}
:deep(.el-tabs__active-bar) {
background: none;
}
position: relative;
width: 100%;
height: 360px;
@include cardDefaultStyle;
@include cardlabel;
.trendTabs {
position: absolute;
right: 10px;
top: 5px;
}
.trend-chart {
width: 100%;
height: 260px;
height: calc(100% - $labelHeight);
}
}
.alarm {
width: 100%;
min-height: 350px;
height: v-bind('computedHeight.alarmHeight');
@include cardDefaultStyle;
@include cardlabel;
}
.PitchPart {
.Pitchitem {
border: 1px solid #e1edf6;
display: flex;
justify-content: space-between;
margin-left: 15px;
width: 480px;
.PitchitemLeft {
display: flex;
align-items: center;
width: 325px;
min-height: 50px;
background: #f7f9fc;
padding-left: 20px;
font-size: 14px;
color: #4e5969;
letter-spacing: 0;
font-weight: 500;
word-break: break-all;
}
.PitchitemRight {
/*width: 180px;*/
height: 25px;
line-height: 50px;
padding-right: 20px;
font-size: 14px;
color: #4e5969;
letter-spacing: 0;
font-weight: 500;
}
}
}
}
.dialogContent {
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
}
.overviewSlot {
display: flex;
.radioForOverviewType {
margin-left: auto;
}
}
</style>

7
ui/dasadmin/src/views/backend/equipment/airBlower/index.vue
View File

@ -163,7 +163,7 @@
<script setup lang="ts">
import { SelectTypeObjType, SelectTypeKeyUnionType, TableDataObjType, TableColumnType } from './type'
import { onUnmounted, reactive, ref, watch, nextTick } from 'vue'
import { onUnmounted, reactive, ref, watch, nextTick, KeepAlive } from 'vue'
import { useI18n } from 'vue-i18n'
import { getAirBlowerListReq, getBelongLineListReq, runAirBlowerReq } from '/@/api/backend/airBlower/request'
import { CircleCheck, CircleClose, Loading } from '@element-plus/icons-vue'
@ -171,6 +171,7 @@ import { ElMessage, TableInstance, ElPopconfirm } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { getRealTimeState } from './utils'
import { sendCommandReq } from '/@/api/backend/control/request'
import { adminBaseRoutePath } from '/@/router/static/adminBase'
const router = useRouter()
@ -533,11 +534,11 @@ watch(autoUpdate, (newVal: boolean) => {
const openWindTurbine = (row: TableDataObjType) => {
if (!router.hasRoute('windTurbine')) {
router.addRoute('admin', {
path: '/windTurbine',
path: adminBaseRoutePath + '/windTurbine',
name: 'windTurbine',
component: () => import('/@/views/backend/WindBlower/index.vue'),
meta: {
title: '单风机详情',
title: 'WindBlower',
menuDesc: '单风机详情',
addtab: true,
},

3
ui/dasadmin/src/views/backend/equipment/equipmentManagement/measurement.vue
View File

@ -15,11 +15,14 @@
<div class="realTimeValueText">{{ scope.row.realTimeValue }}</div>
</div>
<div v-if="item.prop === 'operate'" @click="openLineChart(scope.row)" class="operate">
<template v-if="!enumStore.keys.includes(scope.row.attributeCode)">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="20px" height="20px" viewBox="0 0 1024 1024" version="1.1">
{{ scope.row }}
<path
d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64zM247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z"
/>
</svg>
</template>
</div>
</template>
</el-table-column>

4
ui/dasadmin/src/views/backend/home/windMatrix.vue
View File

@ -70,6 +70,8 @@
<script setup lang="ts">
import {reactive,defineProps, defineEmits} from 'vue'
import { useRouter } from 'vue-router'
import { adminBaseRoutePath } from '/@/router/static/adminBase'
const router = useRouter()
const props = defineProps({
parentData: {
@ -85,7 +87,7 @@ const animationDuration=reactive({
const handleDoubleClick = (row) => {
if (!router.hasRoute('windTurbine')) {
router.addRoute('admin', {
path: '/windTurbine',
path: adminBaseRoutePath+'/windTurbine',
name: 'windTurbine',
component: () => import('/@/views/backend/WindBlower/index.vue'),
meta: {