|
|
@@ -1,15 +1,16 @@
|
|
|
<template>
|
|
|
<div class="navbar">
|
|
|
- <div class="left-title">重卡换电智能站控系统</div>
|
|
|
- <div class="stationNo">No.{{stationNo || '—'}}</div>
|
|
|
+ <!-- <div class="left-title">重卡换电智能站控系统</div>
|
|
|
+ <div class="stationNo">No.{{ stationNo || '—' }}</div> -->
|
|
|
+ <img src="./assets/logo_title.png" class="logo">
|
|
|
<div class="left-menu">
|
|
|
<div v-for="(item, index) in PermissionList" :key="index">
|
|
|
<router-link :to="item.path">
|
|
|
- <span>{{item.children[0].meta.title}}</span>
|
|
|
+ <span>{{ item.children[0].meta.title }}</span>
|
|
|
</router-link>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<div class="date-time">
|
|
|
<div class="warn" @mouseover="getWarnList" @mouseout="LostWarn" @click="goToAlarm">
|
|
|
<div class="is-warn">
|
|
|
@@ -21,11 +22,11 @@
|
|
|
</div>
|
|
|
<div class="link">
|
|
|
<div class="is-warn">
|
|
|
- <img :src='isLink?require("./assets/link.png"):require("./assets/close.png")'>
|
|
|
+ <img :src='isLink ? require("./assets/link.png") : require("./assets/close.png")'>
|
|
|
</div>
|
|
|
- <div>{{isLink?'已连接':'断开'}}</div>
|
|
|
+ <div>{{ isLink ? '已连接' : '断开' }}</div>
|
|
|
</div>
|
|
|
- <div class="safedays">安全运营 {{days}} 天</div>
|
|
|
+ <div class="safedays">安全运营 {{ days }} 天</div>
|
|
|
<div class="time-value">
|
|
|
{{ dateTime.hours }}:{{ dateTime.minutes }}:{{ dateTime.seconds }}
|
|
|
</div>
|
|
|
@@ -65,16 +66,17 @@
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
- <div class="setFile"><router-link to="/control-config/setFile"><img src="./assets/set.png" width="26" height="26"></router-link></div>
|
|
|
+ <div class="setFile"><router-link to="/control-config/setFile"><img src="./assets/set.png" width="26"
|
|
|
+ height="26"></router-link></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapGetters } from "vuex";
|
|
|
-import { getStateList,setBusiness,cloudState,getStationCode } from "@/api/statistics";
|
|
|
+import { getStateList, setBusiness, cloudState, getStationCode } from "@/api/statistics";
|
|
|
export default {
|
|
|
components: {},
|
|
|
- props:['warnNum'],
|
|
|
+ props: ['warnNum'],
|
|
|
data() {
|
|
|
return {
|
|
|
PermissionList: [],
|
|
|
@@ -87,20 +89,20 @@ export default {
|
|
|
minutes: "",
|
|
|
seconds: "",
|
|
|
},
|
|
|
- days:0,
|
|
|
- isLink:undefined,
|
|
|
- isBusiness:true,
|
|
|
- stationNo:null,
|
|
|
+ days: 0,
|
|
|
+ isLink: undefined,
|
|
|
+ isBusiness: true,
|
|
|
+ stationNo: null,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters(["name", "permission_routes"]),
|
|
|
},
|
|
|
mounted() {
|
|
|
- setInterval(()=>{
|
|
|
+ setInterval(() => {
|
|
|
this.timer()
|
|
|
}, 1000);
|
|
|
- setInterval(()=>{
|
|
|
+ setInterval(() => {
|
|
|
this.getCloudState()
|
|
|
}, 2000);
|
|
|
this.menuList()
|
|
|
@@ -108,60 +110,60 @@ export default {
|
|
|
this.getStationCode()
|
|
|
},
|
|
|
methods: {
|
|
|
- goToAlarm(){
|
|
|
+ goToAlarm() {
|
|
|
// this.$router.push({path:"/permission/now-alarm"})
|
|
|
},
|
|
|
//获取换电站编号
|
|
|
- getStationCode(){
|
|
|
+ getStationCode() {
|
|
|
getStationCode().then(res => {
|
|
|
- this.stationNo=res.data
|
|
|
+ this.stationNo = res.data
|
|
|
})
|
|
|
},
|
|
|
//修改营业状态
|
|
|
- HandleBusiness(flag){
|
|
|
+ HandleBusiness(flag) {
|
|
|
this.$confirm('确认修改营业状态?', '确认操作', {
|
|
|
confirmButtonText: '确认',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning'
|
|
|
})
|
|
|
- .then(async() => {
|
|
|
- const data=await setBusiness(flag)
|
|
|
+ .then(async () => {
|
|
|
+ const data = await setBusiness(flag)
|
|
|
this.$message({
|
|
|
type: 'success',
|
|
|
message: '操作成功！'
|
|
|
})
|
|
|
// this.getUserlist()
|
|
|
console.log(data);
|
|
|
- this.isBusiness=this.isBusiness?0:1
|
|
|
+ this.isBusiness = this.isBusiness ? 0 : 1
|
|
|
})
|
|
|
.catch(err => { console.error(err) })
|
|
|
},
|
|
|
- getCloudState(){
|
|
|
- cloudState().then(res=>{
|
|
|
- this.isLink=res.data
|
|
|
+ getCloudState() {
|
|
|
+ cloudState().then(res => {
|
|
|
+ this.isLink = res.data
|
|
|
})
|
|
|
},
|
|
|
//安全运行天数
|
|
|
- getSafeDay(){
|
|
|
+ getSafeDay() {
|
|
|
getStateList(1).then(res => {
|
|
|
- this.days=res.data.content
|
|
|
+ this.days = res.data.content
|
|
|
})
|
|
|
// getStateList(2).then(res => {
|
|
|
// this.isBusiness=res.data.content==1?1:0
|
|
|
// })
|
|
|
},
|
|
|
- getWarnList(){
|
|
|
+ getWarnList() {
|
|
|
this.$emit('ShowWarn');
|
|
|
},
|
|
|
- LostWarn(){
|
|
|
+ LostWarn() {
|
|
|
this.$emit('CloseWarn');
|
|
|
},
|
|
|
//菜单路由
|
|
|
- menuList(){
|
|
|
-
|
|
|
+ menuList() {
|
|
|
+
|
|
|
// this.PermissionList = this.permission_routes.slice(5, 11);
|
|
|
- this.PermissionList = this.permission_routes.slice(5,11);
|
|
|
- console.log(this.PermissionList,'999999');
|
|
|
+ this.PermissionList = this.permission_routes.slice(5, 11);
|
|
|
+ console.log(this.PermissionList, '999999');
|
|
|
},
|
|
|
//当前时间
|
|
|
timer() {
|
|
|
@@ -198,36 +200,47 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.el-submenu__icon-arrow{
|
|
|
+.el-submenu__icon-arrow {
|
|
|
right: -18px;
|
|
|
- top:30%;
|
|
|
+ top: 30%;
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
transform: rotate(180deg);
|
|
|
}
|
|
|
.navbar {
|
|
|
- height: 65px;
|
|
|
+ height: 54px;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
color: white;
|
|
|
- padding-top: 25px;
|
|
|
+ padding-top: 10px;
|
|
|
+ // margin-top: 20px;
|
|
|
justify-content: space-between;
|
|
|
- border-bottom: 1px solid #2f343e;
|
|
|
- .stationNo{
|
|
|
+ // border-bottom: 1px solid #2f343e;
|
|
|
+ background-color: #1E1F25;
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ margin-left: 20px;
|
|
|
+ padding-left: 15px;
|
|
|
+ .logo{
|
|
|
+ width: 447px;
|
|
|
+ height: 34px;
|
|
|
+ margin-right: 80px;
|
|
|
+ }
|
|
|
+ .stationNo {
|
|
|
padding: 0px 15px;
|
|
|
height: 32px;
|
|
|
background: #1C263A;
|
|
|
border: 1px solid #26334C;
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
- color: rgba(153,174,197,0.65);
|
|
|
- text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
|
|
|
- line-height:32px;
|
|
|
+ color: rgba(153, 174, 197, 0.65);
|
|
|
+ text-shadow: 0px 0px 4px rgba(39, 69, 201, 0.5);
|
|
|
+ line-height: 32px;
|
|
|
text-align: center;
|
|
|
margin-right: 32px;
|
|
|
}
|
|
|
+
|
|
|
.left-title {
|
|
|
font-size: 26px;
|
|
|
text-align: center;
|
|
|
@@ -236,6 +249,7 @@ export default {
|
|
|
padding-left: 20px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
+
|
|
|
.left-menu {
|
|
|
flex: 1;
|
|
|
height: 100%;
|
|
|
@@ -243,73 +257,87 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: flex-start;
|
|
|
- .iconacive{
|
|
|
+ color: #757B8C;
|
|
|
+
|
|
|
+ .iconacive {
|
|
|
display: none;
|
|
|
}
|
|
|
- div{
|
|
|
+
|
|
|
+ div {
|
|
|
margin-right: 35px;
|
|
|
height: 39px;
|
|
|
}
|
|
|
- @media screen and (max-width: 1024px){
|
|
|
- div{
|
|
|
+
|
|
|
+ @media screen and (max-width: 1024px) {
|
|
|
+ div {
|
|
|
margin-right: 22px;
|
|
|
}
|
|
|
- .date-time .warn{
|
|
|
+
|
|
|
+ .date-time .warn {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
- .safedays{
|
|
|
+
|
|
|
+ .safedays {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
- .routerlink{
|
|
|
+
|
|
|
+ .routerlink {
|
|
|
position: relative;
|
|
|
}
|
|
|
- .router-link-active{
|
|
|
- color: #91fdb9;
|
|
|
+
|
|
|
+ .router-link-active {
|
|
|
+ color: #fff;
|
|
|
position: relative;
|
|
|
- text-shadow: 0px 0px 8px rgba(34,123,255,0.8);
|
|
|
- .iconacive{
|
|
|
+ // text-shadow: 0px 0px 8px rgba(34, 123, 255, 0.8);
|
|
|
+
|
|
|
+ .iconacive {
|
|
|
display: inline;
|
|
|
}
|
|
|
- svg:first-child{
|
|
|
+
|
|
|
+ svg:first-child {
|
|
|
display: none;
|
|
|
}
|
|
|
- .el-submenu__icon-arrow{
|
|
|
+
|
|
|
+ .el-submenu__icon-arrow {
|
|
|
right: -20px !important;
|
|
|
position: absolute;
|
|
|
transform: rotate(360deg);
|
|
|
color: #91fdb9;
|
|
|
}
|
|
|
- .el-icon-arrow-down:before{
|
|
|
+
|
|
|
+ .el-icon-arrow-down:before {
|
|
|
content: "";
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- span{
|
|
|
+
|
|
|
+ span {
|
|
|
font-size: 20px;
|
|
|
font-weight: 600;
|
|
|
padding-left: 6px;
|
|
|
}
|
|
|
- .router-link-active::after{
|
|
|
- content: '';
|
|
|
+
|
|
|
+ .router-link-active::after {
|
|
|
+ content: "";
|
|
|
display: inline-block;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border: 6px solid transparent;
|
|
|
- border-top: 6px solid #91fdb9;
|
|
|
+ width: 100%;
|
|
|
+ height: 2px;
|
|
|
+ background: #246CF9;
|
|
|
position: absolute;
|
|
|
- bottom: -15px;
|
|
|
- left: 54%;
|
|
|
+ bottom: -16px;
|
|
|
+ left: 3px;
|
|
|
z-index: 0;
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
- .safedays{
|
|
|
+
|
|
|
+ .safedays {
|
|
|
font-size: 18px;
|
|
|
font-weight: 600;
|
|
|
line-height: 40px;
|
|
|
text-align: right;
|
|
|
padding-right: 15px;
|
|
|
}
|
|
|
+
|
|
|
.date-time {
|
|
|
color: white;
|
|
|
display: flex;
|
|
|
@@ -317,8 +345,8 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
padding-right: 5px;
|
|
|
-
|
|
|
- .warn{
|
|
|
+
|
|
|
+ .warn {
|
|
|
width: 92px;
|
|
|
display: flex;
|
|
|
font-size: 16px;
|
|
|
@@ -330,12 +358,14 @@ export default {
|
|
|
line-height: 24px;
|
|
|
cursor: pointer;
|
|
|
height: 39px;
|
|
|
- img{
|
|
|
+
|
|
|
+ img {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
}
|
|
|
}
|
|
|
- .link{
|
|
|
+
|
|
|
+ .link {
|
|
|
width: 86px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -344,73 +374,85 @@ export default {
|
|
|
line-height: 24px;
|
|
|
height: 39px;
|
|
|
margin-top: 3px;
|
|
|
- justify-content:flex-start;
|
|
|
- img{
|
|
|
- margin-right: 3px;
|
|
|
- vertical-align: middle;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-right: 3px;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
}
|
|
|
}
|
|
|
- .date-value{
|
|
|
- width: 80px;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- .day-value {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- font-family: "微软雅黑";
|
|
|
- }
|
|
|
|
|
|
- @media screen and (max-width: 1152px){
|
|
|
- .date-value{
|
|
|
- width: 112px;
|
|
|
+ .date-value {
|
|
|
+ width: 80px;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
- .warn{
|
|
|
- width: 110px;
|
|
|
+
|
|
|
+ .day-value {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-family: "微软雅黑";
|
|
|
}
|
|
|
- .time-value{
|
|
|
- width: 98px !important;
|
|
|
+
|
|
|
+ @media screen and (max-width: 1152px) {
|
|
|
+ .date-value {
|
|
|
+ width: 112px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warn {
|
|
|
+ width: 110px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-value {
|
|
|
+ width: 98px !important;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
- @media screen and (max-width: 1440px) {
|
|
|
- .date-value{
|
|
|
- padding-bottom: 8px;
|
|
|
+
|
|
|
+ @media screen and (max-width: 1440px) {
|
|
|
+ .date-value {
|
|
|
+ padding-bottom: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // @media screen and (min-width: 1281px) and (max-width: 1366px) {
|
|
|
+ // .date-value{
|
|
|
+ // width: 96px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // @media screen and (min-width: 1400px) and (max-width: 1600px) {
|
|
|
+ // .date-value{
|
|
|
+ // width: 92px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ .time-value {
|
|
|
+ font-size: 18px;
|
|
|
+ width: 82px;
|
|
|
+ text-align: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .week-value {
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
- // @media screen and (min-width: 1281px) and (max-width: 1366px) {
|
|
|
- // .date-value{
|
|
|
- // width: 96px;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // @media screen and (min-width: 1400px) and (max-width: 1600px) {
|
|
|
- // .date-value{
|
|
|
- // width: 92px;
|
|
|
- // }
|
|
|
- // }
|
|
|
- .time-value {
|
|
|
- font-size: 18px;
|
|
|
- width: 82px;
|
|
|
- text-align: left;
|
|
|
- box-sizing: border-box;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .week-value {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
.right-menu {
|
|
|
height: 100%;
|
|
|
line-height: 34px;
|
|
|
- .el-dropdown{
|
|
|
+
|
|
|
+ .el-dropdown {
|
|
|
font-size: 16px;
|
|
|
font-weight: 400;
|
|
|
color: #FFFFFF;
|
|
|
- text-shadow: 0px 0px 11px rgba(34,123,255,0.8);
|
|
|
- .el-icon-arrow-down:before{
|
|
|
+ text-shadow: 0px 0px 11px rgba(34, 123, 255, 0.8);
|
|
|
+
|
|
|
+ .el-icon-arrow-down:before {
|
|
|
bottom: -4px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&:focus {
|
|
|
outline: none;
|
|
|
}
|
|
|
@@ -426,40 +468,45 @@ export default {
|
|
|
&.hover-effect {
|
|
|
cursor: pointer;
|
|
|
transition: background 0.3s;
|
|
|
+
|
|
|
&:hover {
|
|
|
background: rgba(0, 0, 0, 0.025);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .dobusiness{
|
|
|
+
|
|
|
+ .dobusiness {
|
|
|
margin: 0 5px;
|
|
|
- .el-dropdown{
|
|
|
+
|
|
|
+ .el-dropdown {
|
|
|
font-size: 18px;
|
|
|
- text-shadow: 0px 0px 11px rgba(34,123,255,0.8);
|
|
|
+ text-shadow: 0px 0px 11px rgba(34, 123, 255, 0.8);
|
|
|
font-weight: 400;
|
|
|
color: #9D9FA4;
|
|
|
line-height: 38px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
- .setFile{
|
|
|
+
|
|
|
+ .setFile {
|
|
|
padding-right: 20px;
|
|
|
padding-top: 4px;
|
|
|
width: 26px;
|
|
|
height: 26px;
|
|
|
box-sizing: content-box;
|
|
|
- img{
|
|
|
+
|
|
|
+ img {
|
|
|
width: 26px;
|
|
|
height: 26px;
|
|
|
}
|
|
|
}
|
|
|
- .cutApart{
|
|
|
+
|
|
|
+ .cutApart {
|
|
|
width: 1px;
|
|
|
height: 32px;
|
|
|
background: #54616D;
|
|
|
opacity: 1;
|
|
|
margin: 0 5px;
|
|
|
}
|
|
|
-}
|
|
|
-</style>
|
|
|
+}</style>
|
