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

Merge pull request 'dev' (#228) from dev into master

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/228
This commit is contained in:
odjbin
2024-01-09 08:46:29 +00:00
parent 2e3605e6f7 e795a9c7be
commit f6f928cf20
14 changed files with 120 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tunnel Cloud</title> <title>地下复杂洞群智能通风控制系统</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

BIN
src/assets/images/login/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

63
src/assets/styles/index.scss
View File

@@ -6,11 +6,11 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
background-position: center; background-position: center;
-moz-user-select: none; /*火狐*/ //-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/ //-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/ //-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/ //-khtml-user-select: none; /*早期浏览器*/
user-select: none; //user-select: none;
font-family: "MicrosoftYaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, font-family: "MicrosoftYaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial,
sans-serif; sans-serif;
} }
@@ -298,6 +298,7 @@ body,
height: 1160px; height: 1160px;
//width: 1300px; //width: 1300px;
} }
#containerFan { #containerFan {
flex: 1; flex: 1;
height: 1160px; height: 1160px;
@@ -452,28 +453,44 @@ body,
.el-overlay-message-box { .el-overlay-message-box {
.el-message-box { .el-message-box {
width: 500px; padding-bottom: 23px;
height: 230px; width: 310px;
//height:190px;
background: rgba(7, 35, 72, 0.79); background: rgba(7, 35, 72, 0.79);
border-radius: 20px; border-radius: 20px;
border: 2px solid #0f82af; border: 2px solid #0f82af;
.el-message-box__header {
display: none;
//padding: 15px;
}
.el-message-box__title { .el-message-box__title {
display: none; display: none;
} }
.el-message-box__close {
display: none;
}
.el-message-box__content { .el-message-box__content {
padding: 18px 15px;
.el-icon { .el-icon {
display: none; display: none;
} }
.el-message-box__message { .el-message-box__message {
display: flex;
align-items: center;
justify-content: center;
//width: 315px; //width: 315px;
height: 80px; height: 80px;
font-size: 32px; //line-height: 80px;
font-size: 22px;
font-weight: bold; font-weight: bold;
color: #08b7b8; color: #08b7b8;
letter-spacing: 3px; letter-spacing: 0.5px;
p { p {
line-height: 40px; line-height: 40px;
@@ -481,16 +498,22 @@ body,
} }
} }
.el-message-box__status + .el-message-box__message {
padding-left: 22px;
padding-right: 12px;
word-break: break-word;
}
.el-message-box__btns { .el-message-box__btns {
margin-top: 20px; padding: 0;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
.el-button { .el-button {
width: 130px; width: 80px;
height: 50px; height: 40px;
border: 2px solid #0f82af; border: 2px solid #0f82af;
font-size: 28px; font-size: 18px;
background-color: #072348; background-color: #072348;
color: #08b7b8; color: #08b7b8;
} }
@@ -506,9 +529,11 @@ body,
.el-dropdown-menu__item:not(.is-disabled):focus { .el-dropdown-menu__item:not(.is-disabled):focus {
background-color: transparent !important; background-color: transparent !important;
} }
.el-popper__arrow::before { .el-popper__arrow::before {
display: none; display: none;
} }
.current-site { .current-site {
.el-select-dropdown { .el-select-dropdown {
@@ -625,8 +650,9 @@ input[type="number"] {
background-color: transparent !important; background-color: transparent !important;
color: #60DDDE !important; color: #60DDDE !important;
} }
.showNull{
font-size:35px; .showNull {
font-size: 35px;
min-height: 350px; min-height: 350px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -635,17 +661,19 @@ input[type="number"] {
color: #2fb0df; color: #2fb0df;
letter-spacing: 3px; letter-spacing: 3px;
} }
//loading //loading
.loading-block{ .loading-block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height:900px; height: 900px;
font-size: 55px; font-size: 55px;
color: #38CAFB; color: #38CAFB;
letter-spacing: 3px; letter-spacing: 3px;
} }
.loading { .loading {
margin-bottom: 20px; margin-bottom: 20px;
width: 100px; width: 100px;
@@ -655,6 +683,7 @@ input[type="number"] {
border-radius: 100%; border-radius: 100%;
animation: circle infinite 0.75s linear; animation: circle infinite 0.75s linear;
} }
// 转转转动画 // 转转转动画
@keyframes circle { @keyframes circle {
0% { 0% {

32
src/components/content/airInfo/childComps/ItemInfo.vue
View File

@@ -41,14 +41,28 @@ const setValue = () => {
value.value.style.width = `${width}px`; value.value.style.width = `${width}px`;
let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max; let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
point.value.style.left = `${flag}px`; point.value.style.left = `${flag}px`;
if (width >= flag) {
value.value.style.background =
"linear-gradient(270deg, #FB3838 0%, #E98526 100%)"; if(params.wp.name=='氧气'){
} else { if (width < flag) {
value.value.style.background = value.value.style.background =
"linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)"; "linear-gradient(270deg, #FB3838 0%, #E98526 100%)";
} else {
value.value.style.background =
"linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
}
isWaring.value = params.wp.value < params.wp.point;
}else {
if (width >= flag) {
value.value.style.background =
"linear-gradient(270deg, #FB3838 0%, #E98526 100%)";
} else {
value.value.style.background =
"linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
}
isWaring.value = params.wp.value >= params.wp.point;
} }
isWaring.value = params.wp.value >= params.wp.point;
} }
// let isWaring = computed(() => { // let isWaring = computed(() => {
// return params.wp.value >= params.wp.point; // return params.wp.value >= params.wp.point;
@@ -114,9 +128,9 @@ const setValue = () => {
position: absolute; position: absolute;
height: 20px; height: 20px;
width: 3px; width: 3px;
background: #92D18F; background: #fff;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 10px #92D18F; box-shadow: 0 0 10px #fff;
top: 1px; top: 1px;
left: 1px; left: 1px;
} }

7
src/components/content/badGasInfo/childComps/GasInfoItem.vue
View File

@@ -135,12 +135,13 @@ function setPoint() {
display: block; display: block;
height: 20px; height: 20px;
width: 2px; width: 2px;
background: #7EDFEC; background: #fff;
position: absolute; position: absolute;
bottom: 2px; bottom: 2.5px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
box-shadow: 0 0 10px #7EDFEC; box-shadow: 0 0 10px #fff;
border-radius: 4px;
} }
.info { .info {
width: 200px; width: 200px;

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

@@ -403,6 +403,11 @@ const initChart = (type, valueA,valueB,valueC) => {
<div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;"> <div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
<div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div> <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
<div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div> <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
<div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[1].name}</div>
<div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
<div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[2].name}</div>
<div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[2].value}</span></div>
</div>`; </div>`;
return content; return content;
}, },

4
src/components/content/fanInfo/FanInfoItem.vue
View File

@@ -168,10 +168,10 @@ let isWaringC = computed(() => {
.point { .point {
position: absolute; position: absolute;
height: 20px; height: 20px;
background: #92D18F; background: #fff;
width: 3px; width: 3px;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 10px #92D18F; box-shadow: 0 0 10px #fff;
top: 1px; top: 1px;
left: 1px; left: 1px;
} }

13
src/components/content/usedEle/UsedEle.vue
View File

@@ -7,7 +7,7 @@
</div> </div>
<div> <div>
<div class="icon"></div> <div class="icon"></div>
<span>当月用电量：{{ electricityConsumptionMonthly }}v</span> <span>当月用电量：{{ electricityConsumptionMonthly }}kwh</span>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
@@ -16,7 +16,7 @@
</div> </div>
<div> <div>
<div class="icon"></div> <div class="icon"></div>
<span>当月节省量：{{ monthlySavings }}v</span> <span>当月节省量：{{ monthlySavings }}kwh</span>
</div> </div>
</div> </div>
</div> </div>
@@ -27,15 +27,15 @@
<div class="top-tag"> <div class="top-tag">
<div class="allUsedEle"> <div class="allUsedEle">
<div class="use-title"> <div class="use-title">
12月总用电量 {{ month }}总用电量
</div> </div>
<div class="value">2345v</div> <div class="value">{{ electricityConsumptionMonthly }}kwh</div>
</div> </div>
<div class="allUsedEle"> <div class="allUsedEle">
<div class="use-title"> <div class="use-title">
当月节省量 当月节省量
</div> </div>
<div class="value">345v</div> <div class="value">{{ monthlySavings }}kwh</div>
</div> </div>
</div> </div>
<div class="loading-block" v-if="showLoading"> <div class="loading-block" v-if="showLoading">
@@ -55,7 +55,7 @@
<script setup> <script setup>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import {dateFormat} from "@/utils/date.js";
const props = defineProps({ const props = defineProps({
list: Array, list: Array,
eleData: Array eleData: Array
@@ -67,6 +67,7 @@ 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 valueB = ref(monthlySavings.value); const valueB = ref(monthlySavings.value);
const bgImage = computed(() => const bgImage = computed(() =>
isVisited.value isVisited.value

10
src/components/content/windPressure/childComps/WindPressureItem.vue
View File

@@ -42,7 +42,7 @@ function setValue() {
value.value.style.width = `${width}px`; value.value.style.width = `${width}px`;
let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max; let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
point.value.style.left = `${flag}px`; point.value.style.left = `${flag}px`;
if (width >= flag) { if (width < flag) {
value.value.style.background = "#F53839"; value.value.style.background = "#F53839";
} else { } else {
value.value.style.background = "#60DDDE"; value.value.style.background = "#60DDDE";
@@ -50,7 +50,7 @@ function setValue() {
} }
let isWaring = computed(() => { let isWaring = computed(() => {
return params.wp.value >= params.wp.point; return params.wp.value < params.wp.point;
}); });
</script> </script>
@@ -123,11 +123,11 @@ let isWaring = computed(() => {
#point { #point {
position: absolute; position: absolute;
height: 20px; height: 20px;
background: #92D18F; background: #fff;
width: 3px; width: 3px;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 10px #92D18F; box-shadow: 0 0 10px #fff;
top: 1px; top: 2px;
left: 1px; left: 1px;
} }
} }

9
src/utils/date.js
View File

@@ -1,9 +1,10 @@
export const dateFormat = (time = new Date().getTime()) => { //YYYY年MM月DD日 星期d export const dateFormat = (time = new Date().getTime(),flag) => { //YYYY年MM月DD日 星期d
const _time = time.toString().length > 10 ? time : time * 1000 const _time = time.toString().length > 10 ? time : time * 1000
const weekList = ["日","一", "二", "三", "四", "五", "六" ]; const weekList = ["日","一", "二", "三", "四", "五", "六" ];
const date = new Date(_time); const date = new Date(_time);
const Y = date.getFullYear(); const Y = date.getFullYear();
const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
const Mm = (date.getMonth() + 1 < 10 ? (date.getMonth() + 1) : date.getMonth() + 1);
const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()); const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()); const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()); const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
@@ -11,7 +12,11 @@ export const dateFormat = (time = new Date().getTime()) => { //YYYY年MM月DD日
let weekDay = new Date().getDay(); let weekDay = new Date().getDay();
const week= weekList[weekDay] const week= weekList[weekDay]
// const strDate = `${Y}/${M}/${D} ${h}:${m}:${s}` // const strDate = `${Y}/${M}/${D} ${h}:${m}:${s}`
return `${Y}年${M}月${D}日 星期${week}`; if(flag){
return `${Mm}月`;
}else {
return `${Y}年${M}月${D}日 星期${week}`;
}
} }
export default { export default {

3
src/utils/request.js
View File

@@ -62,7 +62,8 @@ serveice.interceptors.response.use(response=>{
confirmButtonText: '重新登录', confirmButtonText: '重新登录',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
closeOnClickModal: false closeOnClickModal: false,
customClass:'message-id'
}).then(()=>{ }).then(()=>{
removeToken() removeToken()
window.location = '/login' window.location = '/login'

10
src/views/debug/index.vue
View File

@@ -10,16 +10,16 @@
<el-button type="primary" @click="handleClear" style="float: right">清除</el-button> <el-button type="primary" @click="handleClear" style="float: right">清除</el-button>
<div class="socket-box"> <div class="socket-box">
<div v-for="item in dataList" ref="child"> <div v-for="item in dataList" ref="child">
<div v-if="item.typeCmd == 3"> <div v-if="item.cmdType == 3">
<span style="color: #007bff">server send:</span> <span style="color: #007bff">server send:</span>
<div>{{ item.cmd }}</div> <div>{{ item.cmd }}</div>
</div> </div>
<div v-if="item.typeCmd == 4"> <div v-if="item.cmdType == 4">
<span style="color: #28a745"> server receive:</span> <span style="color: #28a745"> server receive:</span>
<div>{{ item.cmd }}</div> <div>{{ item.cmd }}</div>
</div> </div>
<div v-if="item.typeCmd == 1"> <div v-if="item.cmdType == 1">
<span style="color: red">server send:</span> <span style="color: red">server send:</span>
<div>{{ item.cmd }}</div> <div>{{ item.cmd }}</div>
</div> </div>
@@ -66,7 +66,7 @@ let socket = reactive('')
const handleSend = () => { const handleSend = () => {
let data = { let data = {
type: "send", type: "send",
typeCmd: 1, cmdType: 1,
cmd: number.value cmd: number.value
} }
if (number.value === '') return; if (number.value === '') return;
@@ -75,7 +75,7 @@ const handleSend = () => {
} }
const initWebSocket = () => { const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}` // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}` let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}`
console.log(wsUrl) console.log(wsUrl)
socket = new WebSocket(wsUrl) socket = new WebSocket(wsUrl)
//连接发生错误的回调方法 //连接发生错误的回调方法

17
src/views/login/index.vue
View File

@@ -6,7 +6,7 @@
:rules="rules" :rules="rules"
label-width="65px" label-width="65px"
> >
<h3>Tunnel Cloud</h3> <h3>地下复杂洞群智能通风控制系统</h3>
<el-form-item prop="username" label="账号"> <el-form-item prop="username" label="账号">
<el-input v-model="loginForm.username" :prefix-icon="User"></el-input> <el-input v-model="loginForm.username" :prefix-icon="User"></el-input>
</el-form-item> </el-form-item>
@@ -116,12 +116,13 @@ onBeforeUnmount(() => {
.login-box { .login-box {
height: 100%; height: 100%;
background-color: #4158d0; background-color: #4158d0;
background-image: linear-gradient( //background-image: linear-gradient(
43deg, // 43deg,
#4158d0 0%, // #4158d0 0%,
#c850c0 46%, // #c850c0 46%,
#ffcc70 100% // #ffcc70 100%
); //);
background-image: url("../../assets/images/login/bg.png");
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -130,6 +131,8 @@ onBeforeUnmount(() => {
padding: 12px 15px; padding: 12px 15px;
border-radius: 12px; border-radius: 12px;
width: 25%; width: 25%;
min-width: 407px;
min-height: 300px;
background-color: #fff; background-color: #fff;
h3 { h3 {

3
src/views/user/index.vue
View File

@@ -355,6 +355,9 @@ const handleSelect = async (selection, row) => {
} }
.el-popper { .el-popper {
width: auto;
min-width: auto;
margin-left: 0;
box-sizing: border-box; box-sizing: border-box;
} }