odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

邓洁: 优化界面

Browse Source
This commit is contained in:
邓洁
2024-01-16 16:03:01 +08:00
parent 75929dcb77
commit 5a0f1997e3
11 changed files with 132 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/usedEle/bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.0 KiB

BIN
src/assets/images/usedEle/bpq_active.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/assets/images/usedEle/icon-all.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/usedEle/icon-day.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/usedEle/icon-month.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

5
src/components/content/airInfo/AirInfo.vue
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 {

155
src/components/content/fanInfo/FanInfo.vue
View File

@@ -3,7 +3,7 @@
<div class="title">风机</div>
<div v-if="socketData==null||socketData.length===0" class="showNull ">
<div class="loading" v-if="loading===0"></div>
{{loading===0?'加载中...':'暂无数据~'}}
{{ loading === 0 ? '加载中...' : '暂无数据~' }}
</div>
<div v-else class="fans">
<div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
@@ -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>
@@ -68,32 +68,33 @@
</div>
</div>
</div>
<div class="current" @click="handleOpenChart(item,index)">
<fan-info-item :wp="transducerData[index]" />
<div class="current" @click="handleOpenChart(item,index)">
<fan-info-item :wp="transducerData[index]"/>
</div>
</div>
</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>
<div class="loading-block" v-if="showLoading">
<div class="loading" ></div>
<div class="loading"></div>
<span>加载中...</span>
</div>
<div class="chat-dialog" v-else>
<div id="containerFan"></div>
<div style="width: 1px;"></div>
</div>
<!-- <div class="time-select">-->
<!-- <time-range-btn-->
<!-- :buttonList="timeList"-->
<!-- v-model="selectTimeButton"-->
<!-- @select="timeSelect"-->
<!-- />-->
<!-- </div>-->
<!-- <div class="time-select">-->
<!-- <time-range-btn-->
<!-- :buttonList="timeList"-->
<!-- v-model="selectTimeButton"-->
<!-- @select="timeSelect"-->
<!-- />-->
<!-- </div>-->
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
@@ -125,7 +126,7 @@ const showLoading = ref(false)
const fanIndex = ref(0)
let myEcharts = reactive({});
watch(() => props.loading, (now) => {
props.loading=now
props.loading = now
}, {deep: true});
watch(() => props.transducerData, (now) => {
getTransData(now.frequencyChangerList)
@@ -162,20 +163,20 @@ watch(() => props.list, (now) => {
}, {deep: true});
const getFanInfo = (equipmentId) => {
isVisited.value = true
showLoading.value=true
showLoading.value = true
getFanEchartsInfo(equipmentId).then(res => {
if (res?.code === 1000) {
showLoading.value=false
showLoading.value = false
nextTick(() => {
initChart(res.data.dates, res.data.currentsA,res.data.currentsB,res.data.currentsC)
initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC)
})
}
})
}
const handleOpenChart = (item,index) => {
const handleOpenChart = (item, index) => {
getFanInfo(item.equipmentId)
fanIndex.value=index+1
fanIndex.value = index + 1
}
const getTransData = (data) => {
let tranObj = {}
@@ -313,7 +314,7 @@ const handleOnMounted = () => {
}
},
},
max: 1000,
max: 50,
splitLine: {
show: false,
},
@@ -364,7 +365,7 @@ const getImageUrl = (name) => {
/**
* 初始化echarts实例方法
*/
const initChart = (type, valueA,valueB,valueC) => {
const initChart = (type, valueA, valueB, valueC) => {
//3.初始化container容器
myEcharts = echarts.init(document.getElementById('containerFan'));
//5.传入数据
@@ -462,7 +463,7 @@ const initChart = (type, valueA,valueB,valueC) => {
series: [
{
// data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
name:'A相电流',
name: 'A相电流',
data: valueA,
type: 'line',
smooth: true,
@@ -472,7 +473,7 @@ const initChart = (type, valueA,valueB,valueC) => {
},
},
{
name:'B相电流',
name: 'B相电流',
data: valueB,
type: 'line',
smooth: true,
@@ -482,7 +483,7 @@ const initChart = (type, valueA,valueB,valueC) => {
},
},
{
name:'C相电流',
name: 'C相电流',
data: valueC,
type: 'line',
smooth: true,
@@ -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 {
@@ -577,7 +585,7 @@ input[type="number"] {
.fan-item {
//height: 33.5%;
height: 50%;
padding-bottom:10px;
padding-bottom: 10px;
display: flex;
flex-direction: column;
font-size: 14px;
@@ -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;
.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;
}
}
.stopColor {
background-color: red !important;
}
> div:first-child {
.blue-state {
display: flex;
align-items: center;
padding-left: 5px;
height: 45px;
margin-right: 15px;
color: #fff;
background-color: #127399;
padding-left: 10px;
border-radius: 8px;
margin-left: -5px;
> div {
.state-icon {
width: 28px;
height: 28px;
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
margin-right: 10px;
}
.fan-state {
color: #FFFFFF;
}
}
img {
margin-right: 4px;
transform: translateY(15%);
}
.state-icon {
width: 26px;
height: 26px;
}
.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,8 +802,9 @@ input[type="number"] {
font-size: 28px;
color: #FFFFFF;
cursor: pointer;
&:hover{
background-color: #2E5589;
&: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>

4
src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js
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);
@@ -26,4 +26,4 @@ export default function previewtunnelModeInit(equipmentList) {
}
})
}
}
}

54
src/components/content/usedEle/UsedEle.vue
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">
@@ -39,7 +41,7 @@
</div>
</div>
<div class="loading-block" v-if="showLoading">
<div class="loading" ></div>
<div class="loading"></div>
<span>加载中...</span>
</div>
<div class="chat-dialog" v-else>
@@ -56,6 +58,7 @@
<script setup>
import * as echarts from 'echarts';
import {dateFormat} from "@/utils/date.js";
const props = defineProps({
list: Array,
eleData: Array
@@ -67,17 +70,17 @@ const electricityConsumptionMonthly = ref(0)
const monthlySavings = ref(4000)
const length = ref(null);
const valueA = ref();
const month = ref(dateFormat('',true));
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){
electricityConsumptionMonthly.value=0
}else {
if (now.frequencyChangerList.length === 0) {
electricityConsumptionMonthly.value = 0
} else {
getBasicData(now.frequencyChangerList)
}
setValueA()
@@ -113,7 +116,7 @@ const setValueB = () => {
valueB.value.style.height = `${width}px`;
}
const getBasicData = (data) => {
electricityConsumptionMonthly.value = data[0].electricityConsumptionMonthly
electricityConsumptionMonthly.value = data[0].electricityConsumptionMonthly
}
const handleOpenChart = () => {
console.log('用电量弹窗')
@@ -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;
}

14
src/components/content/windPressure/childComps/WindPressureItem.vue
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;

2
src/router/index.js
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()