Libt
/
multiple-police-situations
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

顶部导航修改

This commit is contained in:
libingtao 2024-08-06 15:35:51 +08:00
parent 0868169ffd
commit 2477faf957
2 changed files with 299 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
src/views/index.vue
View File

@ -2,46 +2,62 @@
<!-- <v-scale-screen width="1185" height="784"> --> <!-- <v-scale-screen width="1185" height="784"> -->
<div class="content" id="app"> <div class="content" id="app">
<div class="community_top" v-if="isshow"> <div class="community_top" v-if="isshow">
<div style="margin-left: 26px"> <div class="lefttit">多元警情融合及预警管控平台</div>
<ul style="display: flex; margin-top: 27px"> <div style="margin-left: 16px">
<ul style="display: flex; margin-top: 14px">
<li> <li>
<router-link active-class="ist2" style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold" to="/index/indexmin">服务总览</router-link>
<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" /> <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
<router-link active-class="ist2"
style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold"
to="/index/indexmin">服务总览</router-link>
</li> </li>
<li> <li>
<router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold" to="/index/index">安保力量</router-link>
<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" /> <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
<router-link active-class="ist"
style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold"
to="/index/index">安保力量</router-link>
</li> </li>
<li> <li>
<router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold" to="/index/command">警情推送</router-link>
<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" /> <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
<router-link active-class="ist"
style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold"
to="/index/command">警情推送</router-link>
</li> </li>
<li> <li>
<router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold" to="/index/system">智能布控</router-link>
<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" /> <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
<router-link active-class="ist"
style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold"
to="/index/system">智能布控</router-link>
</li> </li>
</ul> </ul>
</div> </div>
<div style="margin-right: 100px"> <div style="">
<ul style="display: flex; margin-top: 27px"> <ul style="display: flex; margin-top: 14px">
<li> <li>
<router-link active-class="ist3" style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold" to="/index/histordata">AI预警</router-link>
<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" /> <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
<router-link active-class="ist3"
style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold"
to="/index/histordata">AI预警</router-link>
</li> </li>
<li> <li>
<router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold" to="/index/analysis">统计分析</router-link>
<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" /> <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
<router-link active-class="ist"
style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold"
to="/index/analysis">统计分析</router-link>
</li> </li>
<li> <li>
<router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold" to="/index/information">资源管理</router-link>
<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" /> <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
<router-link active-class="ist"
style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold"
to="/index/information">资源管理</router-link>
</li> </li>
</ul> </ul>
<el-popconfirm title="确定退出吗？" @confirm="confirmEvent"> <el-popconfirm title="确定退出吗？" @confirm="confirmEvent">
<template #reference> <template #reference>
<el-icon :size="20" style="display: inline-block; position: absolute; top: 31px; right: 32px; margin-left: 10px; vertical-align: middle; color: #9a4b48; font-weight: bold"> <el-icon :size="20"
style="display: inline-block; position: absolute; top: 31px; right: 32px; margin-left: 10px; vertical-align: middle; color: #9a4b48; font-weight: bold">
<switch-button /> <switch-button />
<!-- <span style="color:#fff;">{{loginname}}</span> --> <span style="color:#fff;position: absolute;right: 29px;font-weight: 100;font-size: 16px;">{{loginname}}</span>
</el-icon> </el-icon>
</template> </template>
</el-popconfirm> </el-popconfirm>
@ -57,27 +73,27 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useUserStore } from '@/stores/modules/userStore' import { useUserStore } from '@/stores/modules/userStore'
import { useWebSocket } from '@vueuse/core' import { useWebSocket } from '@vueuse/core'
import { wsUrl } from '@/utils/webSocket' import { wsUrl } from '@/utils/webSocket'
import { ref, reactive, watch, onMounted } from 'vue' import { ref, reactive, watch, onMounted } from 'vue'
import api from '@/axios' import api from '@/axios'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
const isshow = ref(true) const isshow = ref(true)
const loginname = localStorage.getItem('loginname') const loginname = localStorage.getItem('loginname')
onMounted(() => { onMounted(() => {
stationWebsocket() stationWebsocket()
setInterval(function () { setInterval(function () {
api.post('/multialarm/client/user/active', {}).then((res) => { api.post('/multialarm/client/user/active', {}).then((res) => {
console.log('token保活', res) console.log('token保活', res)
}) })
}, 180000) }, 180000)
}) })
watch( watch(
() => router.currentRoute.value, () => router.currentRoute.value,
(newValue: any) => { (newValue : any) => {
// console.log('newValue', newValue) // console.log('newValue', newValue)
if (newValue.path == '/index/communitymanage' || newValue.path == '/index/hkplay') { if (newValue.path == '/index/communitymanage' || newValue.path == '/index/hkplay') {
isshow.value = false isshow.value = false
@ -87,9 +103,9 @@ watch(
} }
}, },
{ immediate: true } { immediate: true }
) )
let istab = ref('6') let istab = ref('6')
const sendStationList = (rollCall_websocket: any, stationTempArr: any) => { const sendStationList = (rollCall_websocket : any, stationTempArr : any) => {
var getIot = { var getIot = {
msgcode: 102, msgcode: 102,
msgname: 'station-sensor-list', msgname: 'station-sensor-list',
@ -97,9 +113,9 @@ const sendStationList = (rollCall_websocket: any, stationTempArr: any) => {
} }
var msg = JSON.stringify(getIot) var msg = JSON.stringify(getIot)
rollCall_websocket.send(msg) rollCall_websocket.send(msg)
} }
const stationHashList = ref([]) const stationHashList = ref([])
const stationWebsocket = () => { const stationWebsocket = () => {
//心跳检测 建立链接 断开重连 //心跳检测 建立链接 断开重连
const { data, ws } = useWebSocket(wsUrl('/ClientWebSocket'), { const { data, ws } = useWebSocket(wsUrl('/ClientWebSocket'), {
heartbeat: { heartbeat: {
@ -149,8 +165,8 @@ const stationWebsocket = () => {
break break
} }
} }
} }
const toStudent = (a: any) => { const toStudent = (a : any) => {
istab = a istab = a
switch (a) { switch (a) {
case '1': case '1':
@ -175,8 +191,8 @@ const toStudent = (a: any) => {
router.push('/index/information') router.push('/index/information')
break break
} }
} }
const confirmEvent = () => { const confirmEvent = () => {
console.log('退出') console.log('退出')
localStorage.clear() localStorage.clear()
// router.push('/login') // router.push('/login')
@ -184,11 +200,11 @@ const confirmEvent = () => {
// path: '/login' // path: '/login'
// }) // })
location.reload() location.reload()
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.ist { .ist {
// background-image: url(@/assets/images/nav.png); // background-image: url(@/assets/images/nav.png);
background-image: url(@/views/page/indeximag/dhxz.png); background-image: url(@/views/page/indeximag/dhxz.png);
background-size: 100% 100%; background-size: 100% 100%;
@ -199,30 +215,29 @@ const confirmEvent = () => {
// background-size: 100% 100%; // background-size: 100% 100%;
// background-repeat: no-repeat; // background-repeat: no-repeat;
// background-position: center; // background-position: center;
} }
.ist2 { .ist2 {
background-image: url(@/views/page/indeximag/dhxz.png); background-image: url(@/views/page/indeximag/dhxz.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 10px 18px; padding: 10px 18px;
border-radius: 3px; border-radius: 3px;
color: #fff !important; color: #fff !important;
} }
.ist3 { .ist3 {
background-image: url(@/views/page/indeximag/dhxz.png); background-image: url(@/views/page/indeximag/dhxz.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 10px 18px; padding: 10px 18px;
border-radius: 3px; border-radius: 3px;
color: #fff !important; color: #fff !important;
} }
.active { .active {
color: #fff; color: #fff;
} }
.content { .content {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
@ -236,18 +251,17 @@ const confirmEvent = () => {
.community_top { .community_top {
width: 100%; width: 100%;
height: 77px; height: 60px;
// position: absolute; // position: absolute;
// top: 0; // top: 0;
// background:#4880FF; // background:#4880FF;
background: #07315e; background: #07315e;
background-image: url(@/views/page/imag/titleBg1.png); // background-image: url(@/views/page/imag/titleBg1.png);
background-size: auto 100%; background-size: auto 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-x: 55%; background-position-x: 55%;
display: flex; display: flex;
justify-content: space-between; // justify-content: space-between;
.title { .title {
float: left; float: left;
height: 100%; height: 100%;
@ -262,14 +276,27 @@ const confirmEvent = () => {
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.lefttit{
height: 60px;
line-height: 60px;
font-size: 18px;
font-weight: 600;
letter-spacing: 2px;
color: #ffffff;
background: -webkit-linear-gradient(45deg, #ffffff, #a1d7ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
// background: linear-gradient(to bottom, #ffffff, #a1d7ff);
margin-left: 10px;
}
} }
.community_top > ul:first-child { .community_top>ul:first-child {
left: 44px; left: 44px;
} }
.community_top > ul:first-child, .community_top>ul:first-child,
.community_top > ul:last-child { .community_top>ul:last-child {
width: 524px; width: 524px;
float: left; float: left;
height: 24px; height: 24px;
@ -278,8 +305,8 @@ const confirmEvent = () => {
position: relative; position: relative;
} }
.community_top > ul:first-child > li, .community_top>ul:first-child>li,
.community_top > ul:last-child > li { .community_top>ul:last-child>li {
float: left; float: left;
height: 100%; height: 100%;
width: 80px; width: 80px;
@ -293,19 +320,16 @@ const confirmEvent = () => {
margin-right: 10px; margin-right: 10px;
padding: 2px 0px; padding: 2px 0px;
} }
.community_center { .community_center {
// width: calc(100% - 100px); // width: calc(100% - 100px);
width: 100%; width: 100%;
height: calc(100% - 68px); height: calc(100% - 51px);
overflow: hidden; overflow: hidden;
position: absolute;
// top: 0;
// height: 100%; // height: 100%;
// margin: 10px 50px 30px 50px; // margin: 10px 50px 30px 50px;
// position: absolute; // position: absolute;
// position: relative; // position: relative;
// background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 31, 65, 1)); // background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 31, 65, 1));
} }
} }
</style> </style>

2
src/views/page/indexMim.vue
View File

@ -1102,7 +1102,7 @@
.right_bottm { .right_bottm {
width: 97%; width: 97%;
height: 33%; height: 35%;
padding: 5px; padding: 5px;
} }
} }