顶部图标 图片完整展示

顶部图标 图片完整展示
This commit is contained in:
TimSpan 2024-08-02 10:16:06 +08:00
parent 11e52b490a
commit 75084dc667
4 changed files with 313 additions and 292 deletions

27
package-lock.json generated
View File

@ -15,6 +15,7 @@
"@codemirror/lang-json": "^6.0.1", "@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-sql": "^6.5.4", "@codemirror/lang-sql": "^6.5.4",
"@codemirror/theme-one-dark": "^6.1.2", "@codemirror/theme-one-dark": "^6.1.2",
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"@jiaminghi/data-view": "^2.10.0", "@jiaminghi/data-view": "^2.10.0",
"@kjgl77/datav-vue3": "^1.7.2", "@kjgl77/datav-vue3": "^1.7.2",
@ -669,6 +670,27 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/@dataview/datav-vue3": {
"version": "0.0.0-test.1672506674342",
"resolved": "https://registry.npmmirror.com/@dataview/datav-vue3/-/datav-vue3-0.0.0-test.1672506674342.tgz",
"integrity": "sha512-d0oT/msAi592CTvWmQl0umkLpHgMwtTN2+peyo0L2GHNG7b4cKeO9meEF5o28DgFzRwOLeNQW73vKCF4JC+ihw==",
"dependencies": {
"@jiaminghi/color": "^0.1.1",
"classnames": "^2.3.2",
"lodash-es": "^4.17.21"
},
"peerDependencies": {
"vue": ">=3.2.0"
}
},
"node_modules/@dataview/datav-vue3/node_modules/@jiaminghi/color": {
"version": "0.1.1",
"resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
"integrity": "sha512-M09+Sb5HGqVim0zo+nG5gU1v+6gXT8ptr0BZR6dMGt83XmCJgnZtO8s7llTW4hLFFFM5co6geZvTekqLpSPAAQ==",
"dependencies": {
"@babel/runtime": "^7.5.5"
}
},
"node_modules/@element-plus/icons-vue": { "node_modules/@element-plus/icons-vue": {
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz", "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
@ -2102,6 +2124,11 @@
"fsevents": "~2.3.2" "fsevents": "~2.3.2"
} }
}, },
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
},
"node_modules/claygl": { "node_modules/claygl": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz", "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",

View File

@ -23,6 +23,7 @@
"@codemirror/lang-json": "^6.0.1", "@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-sql": "^6.5.4", "@codemirror/lang-sql": "^6.5.4",
"@codemirror/theme-one-dark": "^6.1.2", "@codemirror/theme-one-dark": "^6.1.2",
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"@jiaminghi/data-view": "^2.10.0", "@jiaminghi/data-view": "^2.10.0",
"@kjgl77/datav-vue3": "^1.7.2", "@kjgl77/datav-vue3": "^1.7.2",

View File

@ -1,311 +1,301 @@
<template> <template>
<!-- <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 style="margin-left: 26px">
<ul style="display: flex;margin-top:27px;"> <ul style="display: flex; margin-top: 27px">
<li><router-link active-class="ist2" <li>
style="color:#B2B6C3;padding: 10px 18px;vertical-align: middle;font-weight: bold;" <router-link active-class="ist2" style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold" to="/index/indexmin">服务总览</router-link>
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=""> </li>
</li> <li>
<li><router-link active-class="ist" <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>
style="color:#B2B6C3;padding: 10px 18px;margin-left:10px;vertical-align: middle;font-weight: bold;" <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
to="/index/index">安保力量</router-link> </li>
<img style="vertical-align: middle;" src="@/views/page/indeximag/ddh.png" alt=""> <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>
<li><router-link active-class="ist" <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
style="color:#B2B6C3;padding: 10px 18px;margin-left:10px;vertical-align: middle;font-weight: bold;" </li>
to="/index/command">警情推送</router-link> <li>
<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> <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
<li><router-link active-class="ist" </li>
style="color:#B2B6C3;padding: 10px 18px;margin-left:10px;vertical-align: middle;font-weight: bold;" </ul>
to="/index/system">智能布控</router-link> </div>
<img style="vertical-align: middle;" src="@/views/page/indeximag/ddh.png" alt=""> <div style="margin-right: 100px">
</li> <ul style="display: flex; margin-top: 27px">
</ul> <li>
</div> <router-link active-class="ist3" style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold" to="/index/histordata">AI预警</router-link>
<div style="margin-right: 100px;"> <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
<ul style="display: flex;margin-top:27px;"> </li>
<li><router-link active-class="ist3" <li>
style="color:#B2B6C3;padding: 10px 18px;vertical-align: middle;font-weight: bold;" <router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold" to="/index/analysis">统计分析</router-link>
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=""> </li>
</li> <li>
<li><router-link active-class="ist" <router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold" to="/index/information">资源管理</router-link>
style="color:#B2B6C3;padding: 10px 18px;vertical-align: middle;font-weight: bold;" <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
to="/index/analysis">统计分析</router-link> </li>
<img style="vertical-align: middle;" src="@/views/page/indeximag/ddh.png" alt=""> </ul>
</li> <el-popconfirm title="确定退出吗?" @confirm="confirmEvent">
<li><router-link active-class="ist" <template #reference>
style="color:#B2B6C3;padding: 10px 18px;vertical-align: middle;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">
to="/index/information">资源管理</router-link> <switch-button />
<img style="vertical-align: middle;" src="@/views/page/indeximag/ddh.png" alt=""> <!-- <span style="color:#fff;">{{loginname}}</span> -->
</li> </el-icon>
</ul> </template>
<el-popconfirm title="确定退出吗?" @confirm="confirmEvent"> </el-popconfirm>
<template #reference> </div>
<el-icon :size="20" </div>
style="display: inline-block;position: absolute;top:31px;right:32px;margin-left:10px;vertical-align:middle;color:#9A4B48;font-weight: bold;"> <div class="community_center" v-if="isshow">
<switch-button /> <router-view></router-view>
<!-- <span style="color:#fff;">{{loginname}}</span> --> </div>
</el-icon>
</template>
</el-popconfirm>
</div>
</div>
<div class="community_center" v-if="isshow">
<router-view></router-view>
</div>
<router-view v-if="!isshow"></router-view> <router-view v-if="!isshow"></router-view>
</div> </div>
<!-- </v-scale-screen> --> <!-- </v-scale-screen> -->
</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', { api.post('/multialarm/client/user/active', {}).then((res) => {
}).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
} }
}, },
{ immediate: true } { immediate: true }
) )
let istab = ref('6'); let istab = ref('6')
const sendStationList = (rollCall_websocket, stationTempArr) => { const sendStationList = (rollCall_websocket: any, stationTempArr: any) => {
var getIot = { var getIot = {
"msgcode": 102, msgcode: 102,
"msgname": "station-sensor-list", msgname: 'station-sensor-list',
"message": stationTempArr message: stationTempArr,
} }
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: {
message: 'ping', message: 'ping',
interval: 1000 * 10, interval: 1000 * 10,
pongTimeout: 1000 * 10, pongTimeout: 1000 * 10,
}, },
autoReconnect: true, autoReconnect: true,
}); })
ws.value.onopen = () => { ws.value.onopen = () => {
console.log('链接打开') console.log('链接打开')
var messageObj = { var messageObj = {
"msgcode": 100, msgcode: 100,
"msgname": "session", msgname: 'session',
"message": useUserStore().getToken message: useUserStore().getToken,
} }
var msg = JSON.stringify(messageObj); var msg = JSON.stringify(messageObj)
ws.value.send(msg); ws.value.send(msg)
var stationTempArr = []; var stationTempArr = []
for (var i in stationHashList.value) { for (var i in stationHashList.value) {
stationTempArr.push(i); stationTempArr.push(i)
if (stationTempArr.length >= 500) { if (stationTempArr.length >= 500) {
sendStationList(ws.value, stationTempArr); sendStationList(ws.value, stationTempArr)
stationTempArr = []; stationTempArr = []
} }
} }
sendStationList(ws.value, stationTempArr); sendStationList(ws.value, stationTempArr)
}; }
ws.value.onclose = () => { ws.value.onclose = () => {
// console.log('') // console.log('')
// //
// stationWebsocket(); // stationWebsocket();
}; }
ws.value.onmessage = function (evt) { ws.value.onmessage = function (evt) {
var data = JSON.parse(evt.data); var data = JSON.parse(evt.data)
var msgcode = data["msgcode"]; var msgcode = data['msgcode']
var message = data["message"]; var message = data['message']
switch (msgcode) { switch (msgcode) {
case 1035:// case 1035: //
// jinbao.value.push(message[0]) // jinbao.value.push(message[0])
useUserStore().setwebsoketdata(message[0]) useUserStore().setwebsoketdata(message[0])
break; break
case 1020:// case 1020: //
// kickout(message); // kickout(message);
break; break
default: default:
break; break
} }
} }
}
}; const toStudent = (a: any) => {
const toStudent = (a) => { istab = a
istab = a; switch (a) {
switch (a) { case '1':
case "1": router.push('/index/index')
router.push('/index/index') break
break; case '2':
case "2": router.push('/index/histordata')
router.push('/index/histordata') break
break; case '3':
case "3": router.push('/index/system')
router.push('/index/system') break
break; case '4':
case "4": router.push('/index/command')
router.push('/index/command') break
break; case '5':
case "5": // router.push('/index/command')
// router.push('/index/command') break
break; case '6':
case "6": router.push('/index/indexmin')
router.push('/index/indexmin') break
break; case '7':
case "7": 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') // router.push({
// router.push({ // 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%;
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;
// 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;
// background: #142738; // background: #142738;
background: #fff; background: #fff;
color: #fff; color: #fff;
// background-image: url(@/assets/images/community_container.jpg); // background-image: url(@/assets/images/community_container.jpg);
// background-size: 100% 100%; // background-size: 100% 100%;
// background-repeat: no-repeat; // background-repeat: no-repeat;
.community_top { .community_top {
width: 100%; width: 100%;
height: 68px; height: 77px;
// 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: 68% 100%; background-size: auto 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-x: 63%; 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%;
width: 400px; width: 400px;
line-height: 80px; line-height: 80px;
text-align: center; text-align: center;
font-size: 29px; font-size: 29px;
font-family: pmzd; font-family: pmzd;
font-weight: 550; font-weight: 550;
background: #fff; background: #fff;
// background: linear-gradient(to bottom, #fff, #9cd7ff); // background: linear-gradient(to bottom, #fff, #9cd7ff);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
} }
.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;
margin-top: 23px; margin-top: 23px;
padding: 0 20px; padding: 0 20px;
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;
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
line-height: 24px; line-height: 24px;
font-size: 14px; font-size: 14px;
font-family: ysbth; font-family: ysbth;
font-weight: 600; font-weight: 600;
background: #1F1757; background: #1f1757;
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% - 68px);
// height: 100%; // height: 100%;
// margin: 10px 50px 30px 50px; // margin: 10px 50px 30px 50px;
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>

View File

@ -620,6 +620,9 @@ const onSearch = () => {
console.log('Expanded Keys:', Array.from(keysToExpand)) console.log('Expanded Keys:', Array.from(keysToExpand))
console.log('Selected Keys:', keysToSelect) console.log('Selected Keys:', keysToSelect)
if (keysToSelect.length === 0) {
ElMessage.warning(`未搜索到${searchValue.value}`)
}
expandedKeys.value = [...new Set(keysToExpand)] expandedKeys.value = [...new Set(keysToExpand)]
selectedKeys.value = keysToSelect selectedKeys.value = keysToSelect