Merge pull request '邓洁: 优化界面' (#237) from dengjie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/237
This commit is contained in:
odjbin
2024-01-16 08:03:33 +00:00
11 changed files with 132 additions and 102 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -403,10 +403,13 @@ const initAirChart = (type, values) => {
//position: absolute;
z-index: 100;
width: 824px;
border: 2px solid #0f82af;
background: rgba(6, 34, 71, 0.78);
border-radius: 20px;
//height: 400px;
//top: 1003px;
//right: 72px;
background-image: url(@/assets/images/airInfo/bg.png);
//background-image: url(@/assets/images/airInfo/bg.png);
//padding: 25px 20px 1px 21px;
.fan-speed {

View File

@@ -15,10 +15,10 @@
<!-- 功能 -->
<div class="option-nav">
<div>
<div class="state " :class="{ 'blue-state': !item.breakdown }">
<div :class="{ stopColor: item.breakdown }">
<div class="state">
<div class="blue-state" :class="{ stopColor: item.breakdown }">
<div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
状态{{ item.breakdown ? '故障' : '运行' }}
状态<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span>
</div>
<div class="switch">
<div
@@ -39,7 +39,7 @@
</div>
<div class="power">
<div class="check-box">
<el-radio-group v-model="item.autoMode" class="radio-group">
<el-radio-group v-model="item.autoMode">
<el-radio :label="true">自动</el-radio>
<el-radio :label="false">手动</el-radio>
</el-radio-group>
@@ -75,7 +75,8 @@
</div>
<div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isVisited" :title="changeNum(fanIndex)+'号风机电流监控数据'" width="2175px"
<el-dialog :close-on-click-modal="false" v-model="isVisited" :title="changeNum(fanIndex)+'号风机电流监控数据'"
width="2175px"
:modal="false">
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
@@ -313,7 +314,7 @@ const handleOnMounted = () => {
}
},
},
max: 1000,
max: 50,
splitLine: {
show: false,
},
@@ -530,10 +531,17 @@ input::-webkit-inner-spin-button {
input[type="number"] {
-moz-appearance: textfield;
}
:deep(.el-radio-group){
.el-radio{
display: flex;
align-items: center;
}
}
:deep( .el-radio__input) {
width: 24px;
height: 24px;
width: 28px;
height: 28px;
border: 2px solid #38cafb;
border-radius: 50%;
display: flex;
@@ -544,7 +552,7 @@ input[type="number"] {
:deep( .el-radio__label) {
font-size: 28px;
color: #38cafb;
line-height: 37px;
margin-top: -5px;
}
#fan_info {
@@ -631,55 +639,49 @@ input[type="number"] {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 26px;
font-size: 28px;
color: #38cafb;
line-height: 35px;
gap: 40px;
.stopColor {
background-color: red !important;
}
.blue-state {
> div:first-child:hover {
color: #fff;
background-color: #127399;
width: 180px;
padding-left: 5px;
border-radius: 8px;
> div:first-child {
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
}
}
}
> div:first-child {
display: flex;
align-items: center;
padding-left: 5px;
> div {
margin-right: 10px;
}
}
img {
margin-right: 4px;
transform: translateY(15%);
}
height: 45px;
margin-right: 15px;
color: #fff;
background-color: #127399;
padding-left: 10px;
border-radius: 8px;
margin-left: -5px;
.state-icon {
width: 26px;
height: 26px;
width: 28px;
height: 28px;
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
margin-right: 10px;
}
.fan-state {
color: #FFFFFF;
}
}
.switch {
display: flex;
width: 160px;
height: 40px;
width: 165px;
height: 45px;
border-radius: 22px;
border: 2px solid #0f82af;
overflow: hidden;
font-weight: bold;
color: #127399;
line-height: 35px;
line-height: 40px;
& > div {
flex: 1;
@@ -700,6 +702,13 @@ input[type="number"] {
line-height: 37px;
gap: 33px;
.check-box {
display: flex;
align-items: center;
justify-content: center;
//margin-left: 20px;
}
.edit-power {
margin-top: 10px;
@@ -793,6 +802,7 @@ input[type="number"] {
font-size: 28px;
color: #FFFFFF;
cursor: pointer;
&:hover {
background-color: #2E5589;
border-radius: 6px;
@@ -808,18 +818,15 @@ input[type="number"] {
background: #0f7da9;
}
.stopColor {
color: red;
}
.stopColor:hover {
color: #fff;
width: 180px;
background: #9B2222;
border-radius: 8px;
> div:first-child {
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
}
}
//.stopColor:hover {
// color: #fff;
// width: 180px;
// background: #9B2222;
// border-radius: 8px;
//
// > div:first-child {
// background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
// }
//}
</style>

View File

@@ -10,7 +10,7 @@ export default function previewtunnelModeInit(equipmentList) {
// this.scene.getObjectByName(wall).visible = false
// }
// }
console.log(equipmentList);
// console.log(equipmentList);
equipmentList.forEach((item) => {
this.addEquipment(this.scene.getObjectByName(item.position), item);

View File

@@ -1,5 +1,5 @@
<template>
<div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }" @click="handleOpenChart">
<div id="used-ele" :style="{ backgroundColor: bgImage }" @click="handleOpenChart">
<div class="content">
<div class="item">
<div class="container" ref="length">
@@ -19,6 +19,8 @@
<span>当月节省量{{ monthlySavings }}kwh</span>
</div>
</div>
<div class="ele-left-bottom-icon"></div>
<div class="ele-right-bottom-icon"></div>
</div>
<div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
@@ -56,6 +58,7 @@
<script setup>
import * as echarts from 'echarts';
import {dateFormat} from "@/utils/date.js";
const props = defineProps({
list: Array,
eleData: Array
@@ -71,8 +74,8 @@ const month = ref(dateFormat('',true));
const valueB = ref(monthlySavings.value);
const bgImage = computed(() =>
isVisited.value
? "bpq_active.png"
: "bg.png"
? "#2E5589"
: "rgba(6,34,71,0.78)"
);
watch(() => props.eleData, (now) => {
if (now.frequencyChangerList.length === 0) {
@@ -238,12 +241,31 @@ const getImageUrl = (name) => {
width: 830px;
//height: 373px;
color: aliceblue;
//position: absolute;
//top: 1220px;
//top: 1680px;
//left: 68px;
background-image: url(../../../assets/images/usedEle/bg.png);
border: 2px solid #0f82af;
background: rgba(6, 34, 71, 0.78);
border-radius: 20px;
padding: 21px 62px 35px 62px;
position: relative;
.ele-left-bottom-icon {
position: absolute;
bottom: -3px;
left: -3px;
width: 41px;
height: 41px;
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
transform: rotate(-90deg);
}
.ele-right-bottom-icon {
position: absolute;
bottom: -3px;
right: -3px;
width: 41px;
height: 41px;
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
transform: rotate(180deg);
}
.title {
width: 96px;
@@ -274,7 +296,7 @@ const getImageUrl = (name) => {
width: 60px;
height: 210px;
border-radius: 31px;
border: 1px solid #0f82af;
border: 1px solid rgba(105, 231, 253, 1);
position: relative;
margin-bottom: 20px;
@@ -283,7 +305,7 @@ const getImageUrl = (name) => {
bottom: 0;
width: 60px;
height: inherit;
background: #60ddde;
background: linear-gradient(180deg, #38CAFB 0%, #2775E7 100%);
border-radius: 31px;
transition: width 0.5s linear 0s;
}

View File

@@ -76,13 +76,13 @@ let isWaring = computed(() => {
border-radius: 6px;
}
&:last-child {
.label {
span {
margin: 0 5px 0 14px;
}
}
}
//&:last-child {
// .label {
// span {
// margin: 0 5px 0 14px;
// }
// }
//}
.label {
display: flex;

View File

@@ -94,7 +94,6 @@ const router = createRouter({
});
router.beforeEach((to, form, next) => {
NProgress.start()
console.log('token-----',getToken())
if (!getToken()) {
if (to.path === '/login') {
next()
@@ -103,7 +102,6 @@ router.beforeEach((to, form, next) => {
next({ path: '/login' })
}
} else {
console.log('有token')
// if (to.path === '/login') {
// next('/')
// NProgress.done()