|
@@ -6,12 +6,13 @@ import { formatd } from '@/utils/ruoyi'
|
|
|
import { Setting } from '@/utils/tdInstruction'
|
|
|
import { getWeather } from '@/api/weather'
|
|
|
import { ArrowDown } from '@element-plus/icons-vue'
|
|
|
+import { getLunar } from 'chinese-lunar-calendar'
|
|
|
|
|
|
const route = useRoute()
|
|
|
const router = useRouter()
|
|
|
|
|
|
let navbarBackgroundImage = new URL('@/assets/images/layout/header-background.png', import.meta.url).href
|
|
|
-let navbarTitleImage = ref(new URL('@/assets/images/layout/header-title3.png', import.meta.url).href)
|
|
|
+let navbarTitleImage = ref(new URL('@/assets/images/layout/header-zh.png', import.meta.url).href)
|
|
|
let menuLeftImage = ref(new URL('@/assets/images/layout/menu-left.png', import.meta.url).href)
|
|
|
let menuRightImage = ref(new URL('@/assets/images/layout/menu-right.png', import.meta.url).href)
|
|
|
const navbarBackgroundStyle = computed(() => {
|
|
@@ -20,54 +21,33 @@ const navbarBackgroundStyle = computed(() => {
|
|
|
const showMenu = computed(() => route.path !== '/index')
|
|
|
const leftMenu = computed(() => {
|
|
|
return [
|
|
|
- { name: '总 览', path: '/index', type: 'left', style: {} },
|
|
|
+ { name: '概况总览', path: '/index', type: 'left', style: {} },
|
|
|
{ name: '态势感知', path: '/situational/' + route.params.stcd, type: 'left', style: {} }
|
|
|
]
|
|
|
})
|
|
|
const rightMenu = computed(() => {
|
|
|
return [
|
|
|
- { name: '智慧运维', type: 'right', style: {},secMenu:[
|
|
|
- {
|
|
|
- name:"智慧运维",path:'/intelloper/' + route.params.stcd
|
|
|
- },{
|
|
|
- name:"设备清单",path:'/sw/' + route.params.stcd+"/shebei"
|
|
|
- },
|
|
|
+ {
|
|
|
+ name: '智慧运维', type: 'right', style: {}, secMenu: [
|
|
|
{
|
|
|
- name:"备品备件",path:'/sw/' + route.params.stcd+"/shebei"
|
|
|
- },{
|
|
|
- name:"维护任务",path:'/sw/' + route.params.stcd+"/shebei"
|
|
|
- },
|
|
|
- {
|
|
|
- name:"运维记录",path:'/sw/' + route.params.stcd+"/jilu"
|
|
|
- },{
|
|
|
- name:"故障报警",path:'/sw/' + route.params.stcd+"/bj"
|
|
|
- },{
|
|
|
- name:"告警记录",path:'/sw/' + route.params.stcd+"/gj"
|
|
|
- }] },
|
|
|
- { name: '业务管理', path: '/index', type: 'right', style: {} ,secMenu:[{
|
|
|
- name:"实时水位",path:'/sw/' + route.params.stcd+"/sw"
|
|
|
- },{
|
|
|
- name:"实时流量",path:'/sw/' + route.params.stcd+"/flow"
|
|
|
- },{
|
|
|
- name:"实时雨量",path:'/sw/' + route.params.stcd+"/flow"
|
|
|
- },{
|
|
|
- name:"实时水质",path:'/sw/' + route.params.stcd+"/flow"
|
|
|
- },{
|
|
|
- name:"多站水情对比分析",path:'/sw/' + route.params.stcd+"/dzll"
|
|
|
- },{
|
|
|
- name:"多站雨情对比分析",path:'/sw/' + route.params.stcd+"/dzll"
|
|
|
- },{
|
|
|
- name:"多站流量对比分析",path:'/sw/' + route.params.stcd+"/dzll"
|
|
|
- },{
|
|
|
- name:"多站水质对比分析",path:'/sw/' + route.params.stcd+"/dzll"
|
|
|
- },{
|
|
|
- name:"站点管理",path:""
|
|
|
- }] }
|
|
|
+ name: '智慧运维', path: '/intelloper/' + route.params.stcd
|
|
|
+ }, {
|
|
|
+ name: '测站运维', path: '/sw/' + route.params.stcd + '/shebei'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '业务管理', path: '/index', type: 'right', style: {}, secMenu: [{
|
|
|
+ name: '实时监测', path: '/sw/' + route.params.stcd + '/sw'
|
|
|
+ }, {
|
|
|
+ name: '查询分析', path: '/sw/' + route.params.stcd + '/flow'
|
|
|
+ }]
|
|
|
+ }
|
|
|
]
|
|
|
})
|
|
|
|
|
|
const date = ref('')
|
|
|
const time = ref('')
|
|
|
+const lunarDay = ref('')
|
|
|
let tm = null
|
|
|
const weather = ref('')
|
|
|
const location = ref('')
|
|
@@ -78,15 +58,25 @@ function titleChange(path) {
|
|
|
if (path.indexOf('63304700') > -1) {
|
|
|
navbarTitleImage.value = new URL('@/assets/images/layout/header-title-tsq.png', import.meta.url).href
|
|
|
} else {
|
|
|
- navbarTitleImage.value = new URL('@/assets/images/layout/header-title3.png', import.meta.url).href
|
|
|
+ navbarTitleImage.value = new URL('@/assets/images/layout/header-zh.png', import.meta.url).href
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function getDateTime() {
|
|
|
- const datetime = formatd(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
|
|
+ const curdate = new Date()
|
|
|
+
|
|
|
+ const datetime = formatd(curdate, 'yyyy-MM-dd hh:mm:ss')
|
|
|
date.value = datetime.split(' ')[0]
|
|
|
time.value = datetime.split(' ')[1]
|
|
|
|
|
|
+ // 农历
|
|
|
+ // 初始化日历
|
|
|
+ const curYear = curdate.getFullYear() // 当前年份
|
|
|
+ const curMonth = curdate.getMonth() + 1 // 当前月份
|
|
|
+ const curDay = curdate.getDate() // 当前日期
|
|
|
+ const lunarDate = getLunar(curYear, curMonth, curDay)
|
|
|
+ lunarDay.value = lunarDate.lunarYear + lunarDate.dateStr
|
|
|
+
|
|
|
if (tm !== time.value.substring(0, 5)) {
|
|
|
tm = time.value.substring(0, 5)
|
|
|
// Setting.setTime(tm)
|
|
@@ -146,23 +136,24 @@ onUnmounted(() => {
|
|
|
<arrow-down />
|
|
|
</el-icon>
|
|
|
</span>
|
|
|
- <template #dropdown>
|
|
|
+ <template #dropdown>
|
|
|
<el-dropdown-menu>
|
|
|
- <el-dropdown-item v-for="i in item.secMenu" @click="jumpPage(i.path)">{{i.name}}</el-dropdown-item>
|
|
|
+ <el-dropdown-item v-for="i in item.secMenu" @click="jumpPage(i.path)">{{ i.name }}</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
- </template>
|
|
|
+ </template>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="weather-and-time">
|
|
|
- <div class="weather-and-loc">
|
|
|
- <div class="weather">{{ weather }}</div>
|
|
|
- <div class="loc">{{ location }}</div>
|
|
|
- </div>
|
|
|
- <div class="datetime">
|
|
|
- <div class="time">{{ time }}</div>
|
|
|
- <div class="date">{{ date }}</div>
|
|
|
+ <div class="weather-and-loc">
|
|
|
+ <div class="weather">{{ weather }}</div>
|
|
|
+ <div class="loc">{{ location }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="date-and-time">
|
|
|
+ <div class="time">{{ time }}</div>
|
|
|
+ <div class="date">
|
|
|
+ <div>{{ date }}</div>
|
|
|
+ <div>{{ lunarDay }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -205,13 +196,16 @@ onUnmounted(() => {
|
|
|
.right-menu-list {
|
|
|
margin-left: 16%;
|
|
|
}
|
|
|
+
|
|
|
.right-menu-list .el-dropdown-link {
|
|
|
color: #fff;
|
|
|
font-size: 1.2rem;
|
|
|
}
|
|
|
+
|
|
|
:deep(.el-tooltip__trigger:focus-visible) {
|
|
|
outline: unset;
|
|
|
}
|
|
|
+
|
|
|
.menu-item {
|
|
|
width: 15rem;
|
|
|
height: 3rem;
|
|
@@ -230,7 +224,26 @@ onUnmounted(() => {
|
|
|
|
|
|
}
|
|
|
|
|
|
- .weather-and-time {
|
|
|
+ .weather-and-loc {
|
|
|
+ position: fixed;
|
|
|
+ top: 2vh;
|
|
|
+ left: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ line-height: 1.2rem;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ .loc {
|
|
|
+ text-align: right;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .date-and-time {
|
|
|
position: fixed;
|
|
|
top: 2vh;
|
|
|
right: 0;
|
|
@@ -240,24 +253,16 @@ onUnmounted(() => {
|
|
|
font-size: 1.2rem;
|
|
|
line-height: 1.2rem;
|
|
|
|
|
|
- .weather-and-loc {
|
|
|
+ .time {
|
|
|
padding: 0 10px;
|
|
|
border-right: 2px solid #fff;
|
|
|
|
|
|
- .loc {
|
|
|
- text-align: right;
|
|
|
- font-size: 0.8rem;
|
|
|
- }
|
|
|
-
|
|
|
}
|
|
|
|
|
|
- .datetime {
|
|
|
+ .date {
|
|
|
+ text-align: center;
|
|
|
padding: 0 10px;
|
|
|
-
|
|
|
- .date {
|
|
|
- font-size: 0.8rem;
|
|
|
- }
|
|
|
-
|
|
|
+ font-size: 0.8rem;
|
|
|
}
|
|
|
|
|
|
}
|