969 lines
25 KiB
Vue
969 lines
25 KiB
Vue
|
||
<template>
|
||
<div class="navbar" @mouseleave="mouseovernav">
|
||
<div class="header-nav">
|
||
<div class="nav-box">
|
||
<div style="margin-right: 20px;">
|
||
<div class="header-left-title">
|
||
变电站远程智能巡视系统
|
||
</div>
|
||
<div class="header-left-time" style="padding-bottom: 10px;">
|
||
当前时间：{{ dates }} {{ times }}
|
||
</div>
|
||
</div>
|
||
<div title="首页" class="homeImgBox" @mousemove="mousemoveNav(navlist[0], 0)" :class="{'homeImgActive':activeIndex == 0}" @click="navClick(navlist[0], 0)"></div>
|
||
<div class="nav-list" v-for="(item, index) in navlist" v-show="index != 0"
|
||
:class="{ 'nav-active': activeIndex == index }" @click.stop="navClick(item, index)">
|
||
<div class="nav-imgleft"></div>
|
||
<div class="nav-imgtitle">{{ item.name }}</div>
|
||
<div class="nav-imgright"></div>
|
||
<div class="nav-sonbox" v-if="item.children != undefined && item.hide == true">
|
||
<div class="nav-son-list" v-for="(items, indexs) in item.children" @click.stop="navSonClick(item, index, items)"
|
||
>{{ items.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav-right-box">
|
||
<div class="nav-right-text" style="margin-right: 20px;">
|
||
<div class="header-left-time" style="padding: 0;">用户名：{{ userStore.username }}</div>
|
||
<div class="header-left-time" style="padding-top: 10px;">变电站：{{ userStore.regionName }}</div>
|
||
</div>
|
||
<!-- <div v-for="(item, index) in navlist" v-show="item.name == '系统管理'"
|
||
@click.stop="navClick(item, index)" @mousemove="mousemoveNav(item, index)">
|
||
<img title="系统菜单" v-if="activeIndex != index" src="@/assets/newimg/top_xtgl.png" style="width:20px ;margin-right: 10px;cursor: pointer" >
|
||
<img title="系统菜单" v-else src="@/assets/header/top_xtgl.png" style="width:20px ;margin-right: 10px;cursor: pointer" >
|
||
</div> -->
|
||
<img title="告警信息" src="@/assets/newimg/top_gj.png" style="margin-right: 10px;cursor: pointer"
|
||
@click="alarmInfoClick">
|
||
<div style="position:relative ;" class="versionbox">
|
||
<img title="查看版本" src="@/assets/newimg/top_bb.png" style="margin-right: 10px;cursor: pointer">
|
||
<div class="versionsonbox">
|
||
<div class="stationintroducebox">
|
||
<div class="introduceboxtext1">变电站远程智能巡视系统</div>
|
||
<div class="introduceboxtext2">{{ systemInfo.version }}</div>
|
||
<div style="display: flex;align-items: center;padding-bottom: 8px;">
|
||
<div class="introduceboxline"></div>
|
||
<div class="introduceboxtext3">系统功能介绍</div>
|
||
</div>
|
||
<div class="introduceboxtext4 lineclamp">{{ systemInfo.sysdesc }}</div>
|
||
<div style="display: flex;align-items: center;padding-bottom: 8px;">
|
||
<div class="introduceboxline"></div>
|
||
<div class="introduceboxtext3">系统更新说明</div>
|
||
</div>
|
||
<div class="introduceboxtext4 lineclamp" style="height:60px; ">{{ systemInfo.custom1 }}</div>
|
||
<div class="texthover" @click="leadingOut">下载系统操作手册</div>
|
||
<div style="display: flex;align-items: center;padding-bottom: 8px;">
|
||
<div class="introduceboxline"></div>
|
||
<div class="introduceboxtext3">更新时间</div>
|
||
</div>
|
||
<div class="introduceboxtext4" style="padding-bottom: 0;">{{ dateFormat(systemInfo.lastmodifydate) }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<img src="@/assets/newimg/top_qp.png" @click="toggle" v-if="!isFullscreen" style="margin-right: 10px;cursor: pointer">
|
||
<img src="@/assets/header/top_qp1.png" @click="toggle" v-if="isFullscreen" style="margin-right: 10px;cursor: pointer">
|
||
<img src="@/assets/newimg/top_tc.png" style="margin-right: 5px;cursor: pointer" @click="logout">
|
||
</div>
|
||
</div>
|
||
<!-- <div class="header2-nav" v-if="navlist[activeIndex] != null && navlist[activeIndex].children != null && navlist[activeIndex].children.length != 0&& navlist[activeIndex].children.length != 1">
|
||
<div class="header2-navlist" :class="{ 'nav-active': activeSonIndex == indexs }"
|
||
v-for="(items, indexs) in navlist[activeIndex].children" @click.stop="navSonClick(navOneInfo, activeIndex, items,indexs)"
|
||
@mousemove="mousemoveSonNav(navOneInfo, activeIndex, items,indexs)">
|
||
<div class="header2-imgleft"></div>
|
||
<div class="header2-imgtitle">{{ items.name }}</div>
|
||
<div class="header2-imgright"></div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
||
import { useUserStore } from '@/store/modules/user';
|
||
import { getOneById,downloadConfigFile} from "@/api/versionVersioning";
|
||
import Cookies from 'js-cookie';
|
||
import { gettableData} from '@/api/dept';
|
||
import { encrypt} from '@/utils/sm4';
|
||
import { updatePersonalInfo, updateEncryptPassword, updateAvatar} from '@/api/user';
|
||
import { ElMessageBox, ElMessage, FormInstance} from 'element-plus';
|
||
import { useRoute,} from 'vue-router';
|
||
import router from '@/router';
|
||
import { useTagsViewStore} from '@/store/modules/tagsView';
|
||
import { getNotCheckAlarmCount} from '@/api/home';
|
||
import { constantRoutes} from '@/router';
|
||
import { useFullscreen} from '@vueuse/core';
|
||
import { downloadFile } from '@/utils/index';
|
||
const props = defineProps({
|
||
CloseNav: {
|
||
required: false,
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
});
|
||
const tagsViewStore = useTagsViewStore();
|
||
const userStore = useUserStore();
|
||
const url = userStore.webApiBaseUrl;
|
||
const news = ref()
|
||
const dates = ref("")
|
||
const times = ref("")
|
||
const weeks = ref("")
|
||
const navlist: any = ref([])
|
||
const titleData: any = ref([])
|
||
const activeIndex = ref(0) // 一级导航索引
|
||
const activeSonIndex = ref(-1) // 二级导航索引
|
||
const activeTempInfo:any = ref({}) // 选中二级菜单焦点
|
||
const alarmCount = ref(0)
|
||
const {
|
||
isFullscreen,
|
||
toggle
|
||
} = useFullscreen();
|
||
navlist.value = [{
|
||
name: '站端首页',
|
||
opturl: '/dashboard',
|
||
hide: false,
|
||
}]
|
||
window.addEventListener('keydown', function (e) {
|
||
e = e || window.event
|
||
if (e.keyCode===122) {
|
||
useFullscreen().toggle()
|
||
e.preventDefault()
|
||
}
|
||
})
|
||
const isElicon: any = ref(true)
|
||
function dateFormat(row: any) {
|
||
const daterc = row;
|
||
if (daterc != null) {
|
||
var date = new Date(daterc);
|
||
var year = date.getFullYear();
|
||
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
|
||
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
||
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
||
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
||
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||
// 拼接
|
||
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
||
}
|
||
}
|
||
function alarmInfoClick() {
|
||
router.push(`/task/alarmInfo/index`)
|
||
let item ={
|
||
name:"告警核认",
|
||
opturl:"/task/alarmInfo/index"
|
||
}
|
||
activeSonIndex.value = 2
|
||
navSonClick(navlist.value[2], 2, item)
|
||
}
|
||
function navSonClick(row: any, index: any, item: any) {
|
||
isElicon.value = true
|
||
activeIndex.value = index
|
||
row.hide = false
|
||
if (item.opturl != undefined) {
|
||
router.push(item.opturl)
|
||
}
|
||
|
||
}
|
||
function mousemoveSonNav(row: any, index: any, item: any,indexs:any){
|
||
activeSonIndex.value = indexs
|
||
isElicon.value = true
|
||
activeIndex.value = index
|
||
}
|
||
const navOneInfo :any = ref({})
|
||
function navClick(row: any, index: any) {
|
||
isElicon.value = true
|
||
if (row.hide == true) {
|
||
row.hide = false
|
||
return
|
||
}
|
||
for (let i = 0; i < navlist.value.length; i++) {
|
||
navlist.value[i].hide = false
|
||
}
|
||
if (row.children == undefined) {
|
||
activeIndex.value = index
|
||
router.push(row.opturl)
|
||
} else {
|
||
row.hide = true
|
||
}
|
||
}
|
||
|
||
function mousemoveNav(row: any, index: any){ //鼠标移入
|
||
activeSonIndex.value = -1
|
||
activeIndex.value = index
|
||
isElicon.value = true
|
||
for (let i = 0; i < navlist.value.length; i++) {
|
||
navlist.value[i].hide = false
|
||
}
|
||
if (row.children == undefined) {
|
||
activeSonIndex.value = -1
|
||
} else {
|
||
row.children.forEach((element:any) => {
|
||
if(element.name == activeTempInfo.value.name ){
|
||
activeSonIndex.value = activeTempInfo.value.index
|
||
}
|
||
});
|
||
row.hide = true
|
||
}
|
||
|
||
|
||
}
|
||
function mouseovernav(){
|
||
for (let i = 0; i < navlist.value.length; i++) {
|
||
if (navlist.value[i].opturl == routers.path) {
|
||
activeIndex.value = i
|
||
return
|
||
}
|
||
if (navlist.value[i].children != undefined) {
|
||
for (let j = 0; j < navlist.value[i].children.length; j++) {
|
||
if (navlist.value[i].children[j].opturl == routers.path) {
|
||
activeIndex.value = i
|
||
activeSonIndex.value = j
|
||
activeTempInfo.value = {
|
||
name:navlist.value[i].children[j].name,
|
||
index:j
|
||
}
|
||
return
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
const clearTime:any = ref(null)
|
||
function getTimes() { // 获取当前日期
|
||
let date = new Date()
|
||
let year: any = date.getFullYear() //获取年
|
||
let month: any = date.getMonth() + 1 //获取月
|
||
let day: any = date.getDate() //获取日
|
||
let hours: any = date.getHours() //获取时
|
||
let minutes: any = date.getMinutes() //获取分
|
||
let seconds: any = date.getSeconds() //获取秒
|
||
month = month > 9 ? month : "0" + month
|
||
day = day > 9 ? day : "0" + day
|
||
hours = hours > 9 ? hours : "0" + hours
|
||
minutes = minutes > 9 ? minutes : "0" + minutes
|
||
seconds = seconds > 9 ? seconds : "0" + seconds //数据不大于9时在数据前方拼接一个“0”
|
||
|
||
let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
|
||
weeks.value = arr[date.getDay()]
|
||
times.value = hours + ":" + minutes + ":" + seconds
|
||
dates.value = year + " 年 " + month + " 月 " + day + " 日 "
|
||
clearInterval(clearTime.value)
|
||
clearTime.value = setInterval(()=>{
|
||
getHmsTimes()
|
||
},1000)
|
||
}
|
||
function getHmsTimes() { // 获取当前时间
|
||
let date = new Date()
|
||
let hours: any = date.getHours() //获取时
|
||
let minutes: any = date.getMinutes() //获取分
|
||
let seconds: any = date.getSeconds() //获取秒
|
||
hours = hours > 9 ? hours : "0" + hours
|
||
minutes = minutes > 9 ? minutes : "0" + minutes
|
||
seconds = seconds > 9 ? seconds : "0" + seconds //数据不大于9时在数据前方拼接一个“0”
|
||
|
||
let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
|
||
weeks.value = arr[date.getDay()]
|
||
times.value = hours + ":" + minutes + ":" + seconds
|
||
|
||
}
|
||
|
||
|
||
const systemInfo: any = ref({
|
||
version: ""
|
||
})
|
||
function getData() {
|
||
getOneById().then((res: any) => {
|
||
systemInfo.value = res
|
||
// if (info.value.version) {
|
||
// versionNum.value = info.value.version
|
||
// versionnum.value.majorVersion = info.value.version.split('.')[0]
|
||
// versionnum.value.subNumber = info.value.version.split('.')[1]
|
||
// versionnum.value.stageNumber = info.value.version.split('.')[2]
|
||
// info.value.version.split('.')[3].split('_')
|
||
// versionnum.value.dateNumber = info.value.version.split('.')[3].split('_')[0]
|
||
// versionnum.value.greekNumber = info.value.version.split('.')[3].split('_')[1]
|
||
// }
|
||
|
||
})
|
||
}
|
||
const routers = useRoute();
|
||
onMounted(() => {
|
||
getData()
|
||
getTimes()
|
||
titleData.value = []
|
||
if (userStore.stationData.length > 1) {
|
||
titleData.value = [{
|
||
type: '1',
|
||
stationName: userStore.regionName,
|
||
stationCode: userStore.regionId,
|
||
stationId: userStore.regionId
|
||
}]
|
||
}
|
||
for (let j = 0; j < userStore.stationData.length; j++) {
|
||
titleData.value.push(userStore.stationData[j])
|
||
}
|
||
|
||
if (userStore.stationId != undefined && userStore.stationId != "") {
|
||
getNotCheckAlarmCount({
|
||
stationId: userStore.stationId
|
||
}).then((res: any) => {
|
||
alarmCount.value = res.data.count
|
||
userStore.alarmCount = res.data.count
|
||
})
|
||
}
|
||
|
||
navlist.value = navlist.value.concat(userStore.menuArr)
|
||
|
||
for (let i = 0; i < navlist.value.length; i++) {
|
||
if (navlist.value[i].opturl == routers.path) {
|
||
activeIndex.value = i
|
||
return
|
||
}
|
||
if (navlist.value[i].children != undefined) {
|
||
for (let j = 0; j < navlist.value[i].children.length; j++) {
|
||
if (navlist.value[i].children[j].opturl == routers.path) {
|
||
activeIndex.value = i
|
||
activeSonIndex.value = j
|
||
activeTempInfo.value = {
|
||
name:navlist.value[i].children[j].name,
|
||
index:j
|
||
}
|
||
return
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
})
|
||
function logout() {
|
||
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
userStore.logout().then(() => {
|
||
tagsViewStore.delAllViews();
|
||
}).then(() => {
|
||
Cookies.set('stationIds', '');
|
||
router.push(`/login`);
|
||
});
|
||
});
|
||
}
|
||
function leadingOut() {// 下载系统操作手册
|
||
const params ={
|
||
fileName:systemInfo.value.custom2
|
||
}
|
||
downloadConfigFile(params).then((response: any) => {
|
||
downloadFile(response, '系统操作手册', 'pdf')
|
||
}).catch(() => {
|
||
});
|
||
}
|
||
watch(() => props.CloseNav, (newValue, oldValue) => {
|
||
// debugger
|
||
for (let i = 0; i < navlist.value.length; i++) {
|
||
navlist.value[i].hide = false
|
||
}
|
||
}, {
|
||
deep: true
|
||
})
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
.navbar {
|
||
|
||
padding:0 15px;
|
||
padding-top: 9px;
|
||
width: 100%;
|
||
position: relative;
|
||
background-color: rgb(19, 26, 37);
|
||
// display: -webkit-flex;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// -webkit-align-items: center;
|
||
// justify-content: space-between;
|
||
// -webkit-justify-content: space-between;
|
||
// box-shadow: 0px 0px 10px rgb(219 225 236);
|
||
// z-index: 98;
|
||
}
|
||
.header-box {
|
||
position: relative;
|
||
z-index: 1002;
|
||
height: 90px;
|
||
width: 100%;
|
||
display: flex;
|
||
}
|
||
|
||
.texthover {
|
||
color: #fff;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.texthover:hover {
|
||
color: #409eff;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.header-img-box {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 73px;
|
||
}
|
||
|
||
.header-left {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 630px;
|
||
height: 75px;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.header-left-title {
|
||
position: relative;
|
||
font-size: 24px;
|
||
// background-image: linear-gradient(#ffffff 20%, rgb(0, 249, 162));
|
||
background: #fff;
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
/*需要文字透明*/
|
||
font-family: "汉仪综艺体简";
|
||
font-weight: bold;
|
||
}
|
||
.header-left-time{
|
||
padding-top: 5px;
|
||
font-family: "MicrosoftYaHei Regular", MicrosoftYaHei;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
color: rgb(181, 215, 255);
|
||
line-height: 9px;
|
||
font-kerning: normal;
|
||
}
|
||
.header-nav {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
// padding-top: 20px;
|
||
// align-items: center;
|
||
background-image:url(@/assets/newimg/top_bj.png);
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
height: 81px;
|
||
// padding-left: 11px;
|
||
|
||
|
||
.times {
|
||
font-family: '微软雅黑';
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.dates {
|
||
font-family: '微软雅黑';
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
padding-top: 4px;
|
||
// font-family: '微软雅黑';
|
||
// font-weight: 400;
|
||
// font-style: normal;
|
||
// font-size: 12px;
|
||
// color: #FFFFFF;
|
||
}
|
||
|
||
.nav-box {
|
||
display: flex;
|
||
align-items: center;
|
||
// padding-left: 20px;
|
||
|
||
.nav-list {
|
||
display: flex;
|
||
/* align-items: center; */
|
||
position: relative;
|
||
height: 37px;
|
||
line-height: 40px;
|
||
font-family: "Arial Normal", "Arial";
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #B5D7FF;
|
||
text-align: center;
|
||
margin-right: 18px;
|
||
cursor: pointer;
|
||
// background: url(@/assets/newimg/nav.png);
|
||
}
|
||
.nav-imgleft{
|
||
width: 9px;
|
||
height: 37px;
|
||
background: url(@/assets/header/cd_zuo.png);
|
||
}
|
||
.nav-imgright{
|
||
width: 26px;
|
||
height: 37px;
|
||
background: url(@/assets/header/cd_yuo.png);
|
||
}
|
||
.nav-sonbox {
|
||
width: 120px;
|
||
background-image: linear-gradient(#001f5a 1%, #001f5b 90%, transparent);
|
||
border: 1px solid red;
|
||
border-image: linear-gradient(to bottom, #0082df 20%, transparent) 1;
|
||
border-bottom: 0;
|
||
padding-top: 10px;
|
||
padding-bottom: 20px;
|
||
// margin-top: 12px;
|
||
margin-left: -12px;
|
||
position: absolute;
|
||
top:40px ;
|
||
|
||
.nav-son-list {
|
||
width: 100%;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
color: rgb(255, 255, 255);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav-son-list:hover {
|
||
color: #00FFFF;
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
}
|
||
.nav-imgtitle{
|
||
height: 34px;
|
||
line-height: 34px;
|
||
padding-left: 12px;
|
||
background: rgba(152, 224, 255, 0.2);
|
||
border-top: 1px solid rgba(181, 215, 255, 0.3);
|
||
border-bottom: 1px solid rgba(181, 215, 255, 0.3);
|
||
margin-top: 3px;
|
||
cursor: pointer;
|
||
}
|
||
.nav-active .nav-imgleft{
|
||
background: url(@/assets/header/cd_zuo.png);
|
||
background: url(@/assets/header/cd_zuo1.png);
|
||
}
|
||
.nav-active .nav-imgright{
|
||
background: url(@/assets/header/cd_yuo.png);
|
||
background: url(@/assets/header/cd_yuo1.png);
|
||
|
||
}
|
||
.nav-active .nav-imgtitle{
|
||
background:rgba(21, 69, 119,0.8) ;
|
||
}
|
||
.nav-list:hover {
|
||
color: rgb(255, 255, 255);
|
||
}
|
||
|
||
.nav-active {
|
||
// font-weight: bold;
|
||
color: rgb(255, 255, 255);
|
||
// background: url(@/assets/newimg/navactive.png) !important;
|
||
// background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
.header2-nav{
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
.header2-navlist{
|
||
display: flex;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
margin: 0;
|
||
margin-right: 16px;
|
||
font-family: "Arial Normal", Arial;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
// border-width: 1px;
|
||
// border-style: solid;
|
||
// border-color: rgb(181, 215, 255);
|
||
color: rgb(181, 215, 255);
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
.header2-imgleft{
|
||
width: 4px;
|
||
height: 30px;
|
||
background: url(@/assets/header/cd_er_zuo.png);
|
||
}
|
||
.header2-imgright{
|
||
width: 4px;
|
||
height: 30px;
|
||
background: url(@/assets/header/cd_er_you.png);
|
||
}
|
||
.header2-imgtitle{
|
||
height: 30px;
|
||
line-height: 30px;
|
||
padding:0 12px;
|
||
background: rgba(152, 224, 255, 0.2);
|
||
border-top: 1px solid rgba(181, 215, 255, 0.2);
|
||
border-bottom: 1px solid rgb(181, 215, 255, 0.2);
|
||
}
|
||
.nav-active .header2-imgleft{
|
||
background: url(@/assets/header/cd_er_zuo1.png);
|
||
}
|
||
.nav-active .header2-imgright{
|
||
background: url(@/assets/header/cd_er_you1.png);
|
||
}
|
||
.nav-active .header2-imgtitle{
|
||
background:rgba(21, 69, 119,0.8) ;
|
||
}
|
||
.nav-active {
|
||
background-color: rgb(21, 69, 119);
|
||
color: #fff;
|
||
}
|
||
}
|
||
.header-right {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 70px;
|
||
padding-right: 25px;
|
||
|
||
.header-information {
|
||
cursor: pointer;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 25px;
|
||
width: 30px;
|
||
height: 30px;
|
||
background: url(@/assets/monitorsystem/top_gj.png);
|
||
|
||
.header-informationImg {
|
||
width: 18px;
|
||
height: 18px;
|
||
background: url(@/assets/monitorsystem/top_gj1.png);
|
||
}
|
||
|
||
.header-informationDian {
|
||
position: absolute;
|
||
top: 5px;
|
||
left: 15px;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: red;
|
||
|
||
}
|
||
}
|
||
|
||
.header-information1 {
|
||
cursor: pointer;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 25px;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
|
||
:deep(.el-badge__content.is-fixed) {
|
||
// top: -14px;
|
||
background: red;
|
||
border: 1px solid red;
|
||
}
|
||
|
||
.stationBox {
|
||
position: absolute;
|
||
top: 40px;
|
||
background-color: #0a2420 !important;
|
||
border: 1px solid rgb(12, 65, 52) !important;
|
||
box-shadow: rgb(0 249 162 / 30%) 0px 0px 5px !important;
|
||
}
|
||
|
||
@media (max-width: 1795px) {
|
||
.header-nav .dates {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1643px) {
|
||
.header-left {
|
||
width: 400px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1419px) {
|
||
.header-nav .nav-box {
|
||
padding-left: 0px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1370px) {
|
||
.header-nav .nav-box .nav-list {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.homeactive {
|
||
background-color: rgba(0, 249, 162, 0.2) !important;
|
||
}
|
||
.versionsonbox{
|
||
display: none;
|
||
position: absolute;
|
||
top: 10px;
|
||
right: -80px;
|
||
}
|
||
.stationintroducebox {
|
||
position:relative;
|
||
top: 10px;
|
||
width: 430px;
|
||
height: 437px;
|
||
background: url(@/assets/header/banben.png);
|
||
padding: 45px 30px 0;
|
||
|
||
.introduceboxtext1 {
|
||
font-family: 'Arial Normal', 'Arial';
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
color: #FFFFFF;
|
||
font-size: 24px;
|
||
text-align: left;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.introduceboxtext2 {
|
||
font-family: 'Arial Normal', 'Arial';
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.introduceboxline {
|
||
width: 4px;
|
||
height: 10px;
|
||
background: inherit;
|
||
background-color: #409eff;
|
||
border: none;
|
||
border-radius: 0px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.introduceboxtext3 {
|
||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #409eff;
|
||
}
|
||
|
||
.introduceboxtext4 {
|
||
font-family: 'Arial Normal', 'Arial';
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
line-height: 20px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.lineclamp {
|
||
height: 80px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 4;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
|
||
.versionbox:hover .versionsonbox {
|
||
display: block;
|
||
}
|
||
|
||
.el-overlay {
|
||
position: fixed;
|
||
z-index: 2023;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 2000;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
overflow: auto;
|
||
|
||
.examinationboxline {
|
||
width: 4px;
|
||
height: 10px;
|
||
background: inherit;
|
||
background-color: #409eff;
|
||
border: none;
|
||
border-radius: 0px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.examinationboxtext {
|
||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #409eff;
|
||
}
|
||
|
||
.notification {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
// margin: auto;
|
||
/* background: url(/src/assets/monitorsystem/xsri_yltu.png); */
|
||
background-size: 100% 100%;
|
||
|
||
.notification-title {
|
||
text-align: center;
|
||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 18px;
|
||
color: #FFFFFF;
|
||
height: 40px;
|
||
line-height: 38px;
|
||
}
|
||
|
||
.notification-body {
|
||
position: absolute;
|
||
bottom: 15px;
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.examination {
|
||
width: 900px;
|
||
height: 590px;
|
||
position: absolute;
|
||
top: 0px;
|
||
right: 0px;
|
||
left: 0px;
|
||
bottom: 0px;
|
||
margin: auto;
|
||
background: url(@/assets/monitorsystem/ejectbg/xsri_xz.png);
|
||
background-size: 100% 100%;
|
||
|
||
.examination-title {
|
||
text-align: center;
|
||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 18px;
|
||
color: #FFFFFF;
|
||
height: 40px;
|
||
line-height: 38px;
|
||
}
|
||
|
||
.examination-body {
|
||
position: absolute;
|
||
bottom: 15px;
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.justifycenter {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
|
||
.justifycentername {
|
||
font-family: 'Arial Normal', 'Arial';
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
text-align: right;
|
||
width: 80px;
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.readonlybox {
|
||
:deep(.el-input__wrapper) {
|
||
background: rgb(12, 65, 50);
|
||
box-shadow: 0 0 0 1px rgb(8 100 70) inset;
|
||
}
|
||
|
||
:deep(.is-focus.el-input__wrapper) {
|
||
background: rgb(12, 65, 50);
|
||
box-shadow: 0 0 0 1px rgb(8 100 70) inset !important;
|
||
}
|
||
}
|
||
|
||
.input-box {
|
||
|
||
:deep(.el-input__wrapper) {
|
||
background: transparent;
|
||
box-shadow: 0 0 0 1px rgba(8, 100, 70, 1) inset;
|
||
border-radius: 1px;
|
||
}
|
||
|
||
:deep(.el-input__wrapper:hover) {
|
||
box-shadow: 0 0 0 1px rgba(8, 100, 70, 1) inset;
|
||
}
|
||
|
||
:deep(.el-input__wrapper .el-input__icon) {
|
||
color: rgb(7, 168, 114);
|
||
}
|
||
}
|
||
|
||
:deep(.el-form-item__label) {
|
||
font-family: "Arial Normal", "Arial";
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
text-align: right;
|
||
}
|
||
|
||
:deep(.el-input__inner) {
|
||
color: #fff;
|
||
}
|
||
.homeImgBox{
|
||
width: 34px;
|
||
height: 34px;
|
||
background: url(@/assets/newimg/top_sy.png);
|
||
background-size: 100% 100%;
|
||
margin-right: 20px;
|
||
cursor: pointer;
|
||
}
|
||
.homeImgActive{
|
||
background: url(@/assets/header/home.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
.nav-right-box{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.iscursorinitial{
|
||
cursor: initial !important;
|
||
}
|
||
</style>
|