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

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

Browse Source 
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
parent 75929dcb77 5a0f1997e3
commit e1d557aff8
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; //position: absolute;
z-index: 100; z-index: 100;
width: 824px; width: 824px;
border: 2px solid #0f82af;
background: rgba(6, 34, 71, 0.78);
border-radius: 20px;
//height: 400px; //height: 400px;
//top: 1003px; //top: 1003px;
//right: 72px; //right: 72px;
background-image: url(@/assets/images/airInfo/bg.png); //background-image: url(@/assets/images/airInfo/bg.png);
//padding: 25px 20px 1px 21px; //padding: 25px 20px 1px 21px;
.fan-speed { .fan-speed {

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

@@ -3,7 +3,7 @@
<div class="title">风机</div> <div class="title">风机</div>
<div v-if="socketData==null||socketData.length===0" class="showNull "> <div v-if="socketData==null||socketData.length===0" class="showNull ">
<div class="loading" v-if="loading===0"></div> <div class="loading" v-if="loading===0"></div>
{{loading===0?'加载中...':'暂无数据~'}} {{ loading === 0 ? '加载中...' : '暂无数据~' }}
</div> </div>
<div v-else class="fans"> <div v-else class="fans">
<div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId"> <div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
@@ -15,10 +15,10 @@
<!-- 功能 --> <!-- 功能 -->
<div class="option-nav"> <div class="option-nav">
<div> <div>
<div class="state " :class="{ 'blue-state': !item.breakdown }"> <div class="state">
<div :class="{ stopColor: item.breakdown }"> <div class="blue-state" :class="{ stopColor: item.breakdown }">
<div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div> <div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
状态：{{ item.breakdown ? '故障' : '运行' }} 状态：<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span>
</div> </div>
<div class="switch"> <div class="switch">
<div <div
@@ -39,7 +39,7 @@
</div> </div>
<div class="power"> <div class="power">
<div class="check-box"> <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="true">自动</el-radio>
<el-radio :label="false">手动</el-radio> <el-radio :label="false">手动</el-radio>
</el-radio-group> </el-radio-group>
@@ -68,32 +68,33 @@
</div> </div>
</div> </div>
</div> </div>
<div class="current" @click="handleOpenChart(item,index)"> <div class="current" @click="handleOpenChart(item,index)">
<fan-info-item :wp="transducerData[index]" /> <fan-info-item :wp="transducerData[index]"/>
</div> </div>
</div> </div>
</div> </div>
<div class="digital-tunnel"> <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"> :modal="false">
<div class="left-top-icon"></div> <div class="left-top-icon"></div>
<div class="right-top-icon"></div> <div class="right-top-icon"></div>
<div class="loading-block" v-if="showLoading"> <div class="loading-block" v-if="showLoading">
<div class="loading" ></div> <div class="loading"></div>
<span>加载中...</span> <span>加载中...</span>
</div> </div>
<div class="chat-dialog" v-else> <div class="chat-dialog" v-else>
<div id="containerFan"></div> <div id="containerFan"></div>
<div style="width: 1px;"></div> <div style="width: 1px;"></div>
</div> </div>
<!-- <div class="time-select">--> <!-- <div class="time-select">-->
<!-- <time-range-btn--> <!-- <time-range-btn-->
<!-- :buttonList="timeList"--> <!-- :buttonList="timeList"-->
<!-- v-model="selectTimeButton"--> <!-- v-model="selectTimeButton"-->
<!-- @select="timeSelect"--> <!-- @select="timeSelect"-->
<!-- />--> <!-- />-->
<!-- </div>--> <!-- </div>-->
<div class="left-bottom-icon"></div> <div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div> <div class="right-bottom-icon"></div>
</el-dialog> </el-dialog>
@@ -125,7 +126,7 @@ const showLoading = ref(false)
const fanIndex = ref(0) const fanIndex = ref(0)
let myEcharts = reactive({}); let myEcharts = reactive({});
watch(() => props.loading, (now) => { watch(() => props.loading, (now) => {
props.loading=now props.loading = now
}, {deep: true}); }, {deep: true});
watch(() => props.transducerData, (now) => { watch(() => props.transducerData, (now) => {
getTransData(now.frequencyChangerList) getTransData(now.frequencyChangerList)
@@ -162,20 +163,20 @@ watch(() => props.list, (now) => {
}, {deep: true}); }, {deep: true});
const getFanInfo = (equipmentId) => { const getFanInfo = (equipmentId) => {
isVisited.value = true isVisited.value = true
showLoading.value=true showLoading.value = true
getFanEchartsInfo(equipmentId).then(res => { getFanEchartsInfo(equipmentId).then(res => {
if (res?.code === 1000) { if (res?.code === 1000) {
showLoading.value=false showLoading.value = false
nextTick(() => { 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) getFanInfo(item.equipmentId)
fanIndex.value=index+1 fanIndex.value = index + 1
} }
const getTransData = (data) => { const getTransData = (data) => {
let tranObj = {} let tranObj = {}
@@ -313,7 +314,7 @@ const handleOnMounted = () => {
} }
}, },
}, },
max: 1000, max: 50,
splitLine: { splitLine: {
show: false, show: false,
}, },
@@ -364,7 +365,7 @@ const getImageUrl = (name) => {
/** /**
* 初始化echarts实例方法 * 初始化echarts实例方法
*/ */
const initChart = (type, valueA,valueB,valueC) => { const initChart = (type, valueA, valueB, valueC) => {
//3.初始化container容器 //3.初始化container容器
myEcharts = echarts.init(document.getElementById('containerFan')); myEcharts = echarts.init(document.getElementById('containerFan'));
//5.传入数据 //5.传入数据
@@ -462,7 +463,7 @@ const initChart = (type, valueA,valueB,valueC) => {
series: [ 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], // 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, data: valueA,
type: 'line', type: 'line',
smooth: true, smooth: true,
@@ -472,7 +473,7 @@ const initChart = (type, valueA,valueB,valueC) => {
}, },
}, },
{ {
name:'B相电流', name: 'B相电流',
data: valueB, data: valueB,
type: 'line', type: 'line',
smooth: true, smooth: true,
@@ -482,7 +483,7 @@ const initChart = (type, valueA,valueB,valueC) => {
}, },
}, },
{ {
name:'C相电流', name: 'C相电流',
data: valueC, data: valueC,
type: 'line', type: 'line',
smooth: true, smooth: true,
@@ -530,10 +531,17 @@ input::-webkit-inner-spin-button {
input[type="number"] { input[type="number"] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
:deep(.el-radio-group){
.el-radio{
display: flex;
align-items: center;
}
}
:deep( .el-radio__input) { :deep( .el-radio__input) {
width: 24px; width: 28px;
height: 24px; height: 28px;
border: 2px solid #38cafb; border: 2px solid #38cafb;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
@@ -544,7 +552,7 @@ input[type="number"] {
:deep( .el-radio__label) { :deep( .el-radio__label) {
font-size: 28px; font-size: 28px;
color: #38cafb; color: #38cafb;
line-height: 37px; margin-top: -5px;
} }
#fan_info { #fan_info {
@@ -577,7 +585,7 @@ input[type="number"] {
.fan-item { .fan-item {
//height: 33.5%; //height: 33.5%;
height: 50%; height: 50%;
padding-bottom:10px; padding-bottom: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 14px; font-size: 14px;
@@ -631,55 +639,49 @@ input[type="number"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-size: 26px; font-size: 28px;
color: #38cafb; color: #38cafb;
line-height: 35px; line-height: 35px;
gap: 40px; gap: 40px;
.blue-state { .stopColor {
> div:first-child:hover { background-color: red !important;
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 { .blue-state {
display: flex; display: flex;
align-items: center; 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; margin-right: 10px;
} }
.fan-state {
color: #FFFFFF;
}
} }
img {
margin-right: 4px;
transform: translateY(15%);
}
.state-icon {
width: 26px;
height: 26px;
}
.switch { .switch {
display: flex; display: flex;
width: 160px; width: 165px;
height: 40px; height: 45px;
border-radius: 22px; border-radius: 22px;
border: 2px solid #0f82af; border: 2px solid #0f82af;
overflow: hidden; overflow: hidden;
font-weight: bold; font-weight: bold;
color: #127399; color: #127399;
line-height: 35px; line-height: 40px;
& > div { & > div {
flex: 1; flex: 1;
@@ -700,6 +702,13 @@ input[type="number"] {
line-height: 37px; line-height: 37px;
gap: 33px; gap: 33px;
.check-box {
display: flex;
align-items: center;
justify-content: center;
//margin-left: 20px;
}
.edit-power { .edit-power {
margin-top: 10px; margin-top: 10px;
@@ -793,8 +802,9 @@ input[type="number"] {
font-size: 28px; font-size: 28px;
color: #FFFFFF; color: #FFFFFF;
cursor: pointer; cursor: pointer;
&:hover{
background-color: #2E5589; &:hover {
background-color: #2E5589;
border-radius: 6px; border-radius: 6px;
} }
} }
@@ -808,18 +818,15 @@ input[type="number"] {
background: #0f7da9; background: #0f7da9;
} }
.stopColor {
color: red;
}
.stopColor:hover { //.stopColor:hover {
color: #fff; // color: #fff;
width: 180px; // width: 180px;
background: #9B2222; // background: #9B2222;
border-radius: 8px; // border-radius: 8px;
//
> div:first-child { // > div:first-child {
background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important; // background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
} // }
} //}
</style> </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 // this.scene.getObjectByName(wall).visible = false
// } // }
// } // }
console.log(equipmentList); // console.log(equipmentList);
equipmentList.forEach((item) => { equipmentList.forEach((item) => {
this.addEquipment(this.scene.getObjectByName(item.position), 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> <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="content">
<div class="item"> <div class="item">
<div class="container" ref="length"> <div class="container" ref="length">
@@ -19,6 +19,8 @@
<span>当月节省量：{{ monthlySavings }}kwh</span> <span>当月节省量：{{ monthlySavings }}kwh</span>
</div> </div>
</div> </div>
<div class="ele-left-bottom-icon"></div>
<div class="ele-right-bottom-icon"></div>
</div> </div>
<div class="digital-tunnel"> <div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false"> <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
@@ -39,7 +41,7 @@
</div> </div>
</div> </div>
<div class="loading-block" v-if="showLoading"> <div class="loading-block" v-if="showLoading">
<div class="loading" ></div> <div class="loading"></div>
<span>加载中...</span> <span>加载中...</span>
</div> </div>
<div class="chat-dialog" v-else> <div class="chat-dialog" v-else>
@@ -56,6 +58,7 @@
<script setup> <script setup>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import {dateFormat} from "@/utils/date.js"; import {dateFormat} from "@/utils/date.js";
const props = defineProps({ const props = defineProps({
list: Array, list: Array,
eleData: Array eleData: Array
@@ -67,17 +70,17 @@ const electricityConsumptionMonthly = ref(0)
const monthlySavings = ref(4000) const monthlySavings = ref(4000)
const length = ref(null); const length = ref(null);
const valueA = ref(); const valueA = ref();
const month = ref(dateFormat('',true)); const month = ref(dateFormat('', true));
const valueB = ref(monthlySavings.value); const valueB = ref(monthlySavings.value);
const bgImage = computed(() => const bgImage = computed(() =>
isVisited.value isVisited.value
? "bpq_active.png" ? "#2E5589"
: "bg.png" : "rgba(6,34,71,0.78)"
); );
watch(() => props.eleData, (now) => { watch(() => props.eleData, (now) => {
if(now.frequencyChangerList.length===0){ if (now.frequencyChangerList.length === 0) {
electricityConsumptionMonthly.value=0 electricityConsumptionMonthly.value = 0
}else { } else {
getBasicData(now.frequencyChangerList) getBasicData(now.frequencyChangerList)
} }
setValueA() setValueA()
@@ -113,7 +116,7 @@ const setValueB = () => {
valueB.value.style.height = `${width}px`; valueB.value.style.height = `${width}px`;
} }
const getBasicData = (data) => { const getBasicData = (data) => {
electricityConsumptionMonthly.value = data[0].electricityConsumptionMonthly electricityConsumptionMonthly.value = data[0].electricityConsumptionMonthly
} }
const handleOpenChart = () => { const handleOpenChart = () => {
console.log('用电量弹窗') console.log('用电量弹窗')
@@ -238,12 +241,31 @@ const getImageUrl = (name) => {
width: 830px; width: 830px;
//height: 373px; //height: 373px;
color: aliceblue; color: aliceblue;
//position: absolute; border: 2px solid #0f82af;
//top: 1220px; background: rgba(6, 34, 71, 0.78);
//top: 1680px; border-radius: 20px;
//left: 68px;
background-image: url(../../../assets/images/usedEle/bg.png);
padding: 21px 62px 35px 62px; 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 { .title {
width: 96px; width: 96px;
@@ -274,7 +296,7 @@ const getImageUrl = (name) => {
width: 60px; width: 60px;
height: 210px; height: 210px;
border-radius: 31px; border-radius: 31px;
border: 1px solid #0f82af; border: 1px solid rgba(105, 231, 253, 1);
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: 20px;
@@ -283,7 +305,7 @@ const getImageUrl = (name) => {
bottom: 0; bottom: 0;
width: 60px; width: 60px;
height: inherit; height: inherit;
background: #60ddde; background: linear-gradient(180deg, #38CAFB 0%, #2775E7 100%);
border-radius: 31px; border-radius: 31px;
transition: width 0.5s linear 0s; 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; border-radius: 6px;
} }
&:last-child { //&:last-child {
.label { // .label {
span { // span {
margin: 0 5px 0 14px; // margin: 0 5px 0 14px;
} // }
} // }
} //}
.label { .label {
display: flex; display: flex;

2
src/router/index.js
View File

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