邓洁: 优化界面
This commit is contained in:
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 |
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user