You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
376 lines
9.9 KiB
376 lines
9.9 KiB
<template>
|
|
<a-layout-content>
|
|
<div :style="{ background: '#fff', padding: '24px', minHeight: '500px', height: '100%' }">
|
|
<div class="homeBG">
|
|
<div>
|
|
<a-row :gutter="24" :style="{ padding: '30px 140px' }">
|
|
<a-col :span="8">
|
|
<!-- <router-link target="_blank" :to="{ name: 'VideoMonitor' }"> -->
|
|
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 1)" @mouseleave="mouseLeave($event, 1)" @click="jumpTo('videoMonitor')">
|
|
<template #cover><img slot="cover" alt="example" src="@/assets/earthMap/photoelectricity.png"
|
|
class="cardImg" ref="photoelectricImg" /></template>
|
|
<span class="a-card-title" ref="cardTitle">视频监控</span>
|
|
</a-card>
|
|
<!-- </router-link> -->
|
|
</a-col>
|
|
|
|
<a-col :span="8">
|
|
<!-- <router-link target="_blank" :to="{ name: 'ElectronicMap' }"> -->
|
|
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 2)" @mouseleave="mouseLeave($event, 2)" @click="jumpTo('electronicMap')">
|
|
<template #cover>
|
|
<img slot="cover" alt="example" src="@/assets/earthMap/map.png" class="cardImg" ref="cardImg" />
|
|
</template>
|
|
|
|
<span class="a-card-title" ref="cardTitle">电子地图</span>
|
|
</a-card>
|
|
<!-- </router-link> -->
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 3)" @mouseleave="mouseLeave($event, 3)"
|
|
@click="openPage(3)">
|
|
<template #cover> <img slot="cover" alt="example" src="@/assets/earthMap/scene.png" class="cardImg"
|
|
ref="cardImg" /></template>
|
|
|
|
<span class="a-card-title" ref="cardTitle">区域配置</span>
|
|
</a-card>
|
|
</a-col>
|
|
|
|
</a-row>
|
|
<a-row :gutter="24" :style="{ padding: '30px 140px' }">
|
|
<a-col :span="8">
|
|
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 4)" @mouseleave="mouseLeave($event, 4)"
|
|
@click="openPage(4)">
|
|
<template #cover> <img slot="cover" alt="example" src="@/assets/earthMap/configMan.png" class="cardImg"
|
|
ref="configManImg" /></template>
|
|
|
|
<span class="a-card-title" ref="cardTitle">设备管理</span>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 5)" @mouseleave="mouseLeave($event, 5)"
|
|
@click="openPage(5)">
|
|
<template #cover><img slot="cover" alt="example" src="@/assets/earthMap/camera_management.png"
|
|
class="cardImg" ref="cardImg" /></template>
|
|
|
|
<span class="a-card-title" ref="cardTitle">相机管理</span>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 6)" @mouseleave="mouseLeave($event, 6)"
|
|
@click="openPage(6)">
|
|
<template #cover><img slot="cover" alt="example" src="@/assets/earthMap/warnInfo.png" class="cardImg"
|
|
ref="warnInfoImg" /></template>
|
|
|
|
<span class="a-card-title" ref="cardTitle">警示信息</span>
|
|
</a-card>
|
|
</a-col>
|
|
|
|
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-layout-content>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { defHttp } from '/@/utils/http/axios';
|
|
import photoelectricity_hover from "@/assets/earthMap/photoelectricity_hover.png"
|
|
import map_hover from "@/assets/earthMap/map_hover.png"
|
|
import scene_hover from "@/assets/earthMap/scene_hover.png"
|
|
import configMan from "@/assets/earthMap/configMan.png"
|
|
import camera_management_hover from "@/assets/earthMap/camera_management_hover.png"
|
|
import warnInfo_hover from "@/assets/earthMap/warnInfo_hover.png"
|
|
|
|
import photoelectricity from "@/assets/earthMap/photoelectricity.png"
|
|
import map from "@/assets/earthMap/map.png"
|
|
import scene from "@/assets/earthMap/scene.png"
|
|
// import configMan from "@/assets/earthMap/configMan.png"
|
|
import camera_management from "@/assets/earthMap/camera_management.png"
|
|
import warnInfo from "@/assets/earthMap/warnInfo.png"
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
const { ipcRenderer } = require('electron');
|
|
// 当前路由
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
|
|
const msg = ref('')
|
|
|
|
function hello() {
|
|
var url = '/mapTile/test'
|
|
var param = { count: 1 }
|
|
defHttp.get({
|
|
url: url,
|
|
params: param
|
|
}, { isTransformResponse: false })
|
|
// getAction(url, param)
|
|
.then((res) => {
|
|
console.log('res', res)
|
|
if (res.success) {
|
|
msg.value = res.message
|
|
}
|
|
})
|
|
}
|
|
|
|
function mouseOver(e, index) {
|
|
let imgSrc = ''
|
|
switch (index) {
|
|
case 1:
|
|
// imgSrc = require('@/assets/earthMap/photoelectricity_hover.png')
|
|
imgSrc = photoelectricity_hover
|
|
break
|
|
case 2:
|
|
imgSrc = map_hover
|
|
break
|
|
case 3:
|
|
imgSrc = scene_hover
|
|
break
|
|
case 4:
|
|
imgSrc = configMan
|
|
break
|
|
case 5:
|
|
imgSrc = camera_management_hover
|
|
break
|
|
case 6:
|
|
imgSrc = warnInfo_hover
|
|
break
|
|
}
|
|
e.currentTarget.children[0].children[0].src = imgSrc
|
|
e.currentTarget.children[1].children[0].style.color = '#13C2C2'
|
|
}
|
|
|
|
|
|
function mouseLeave(e, index) {
|
|
let imgSrc = ''
|
|
switch (index) {
|
|
case 1:
|
|
imgSrc = photoelectricity
|
|
break
|
|
case 2:
|
|
imgSrc = map
|
|
break
|
|
case 3:
|
|
imgSrc = scene
|
|
break
|
|
case 4:
|
|
imgSrc = configMan
|
|
break
|
|
case 5:
|
|
imgSrc = camera_management
|
|
break
|
|
case 6:
|
|
imgSrc = warnInfo
|
|
break
|
|
}
|
|
e.currentTarget.children[0].children[0].src = imgSrc
|
|
e.currentTarget.children[1].children[0].style.color = '#707070'
|
|
}
|
|
|
|
function openPage(index) {
|
|
let routePath = ''
|
|
switch (index) {
|
|
case 1:
|
|
routePath = '/device/PhotoelectricView'
|
|
break
|
|
case 2:
|
|
routePath = '/device/RadarDetectionView'
|
|
break
|
|
case 3:
|
|
// routePath = '/device/SiteView'
|
|
routePath = '/scene/manage'
|
|
break
|
|
case 4:
|
|
routePath = '/device/info'
|
|
break
|
|
case 5:
|
|
// routePath = '/device/PerimeterAlarmView'
|
|
routePath = '/cameraManage'
|
|
break
|
|
case 6:
|
|
routePath = '/prewarn/manage'
|
|
break
|
|
}
|
|
|
|
router.push({ path: routePath })
|
|
/* index == 2
|
|
? window.open(this.$router.resolve({ path: routePath }).href, '_blank')
|
|
: this.$router.push({
|
|
path: routePath, // 要跳转的组件名称
|
|
query: {}, // 路由携带参数
|
|
}) */
|
|
}
|
|
|
|
//跳转地址
|
|
function jumpTo(pathName){
|
|
let url = ''
|
|
switch (pathName) {
|
|
case "videoMonitor":
|
|
url = "http://192.168.1.50:3122/"
|
|
break;
|
|
case "electronicMap":
|
|
url = "http://192.168.1.50:3500/"
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
// // let path=window.location.protocol+'//'+url
|
|
// // window.location.href=path
|
|
// window.open(url,'_blank')
|
|
ipcRenderer.send('jumpTo',url)
|
|
}
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.homeBG {
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
text-align: center;
|
|
/* 设置子元素居中 */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
|
|
.markdown a:hover,
|
|
.markdown u,
|
|
a:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.cardImg {
|
|
width: 64px;
|
|
}
|
|
|
|
.ant-card-cover {
|
|
text-align: -webkit-center;
|
|
padding: 15% 15% 10% 15%;
|
|
}
|
|
|
|
.ant-card-meta-title {
|
|
color: #707070 !important;
|
|
}
|
|
|
|
.a-card {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 5% !important;
|
|
color: #fff;
|
|
}
|
|
|
|
.a-card:hover {
|
|
-webkit-animation-name: move;
|
|
animation-name: move;
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.a-card-title {
|
|
overflow: hidden;
|
|
color: #707070;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.a-card-title:hover {
|
|
color: #f30d0d;
|
|
}
|
|
|
|
@-webkit-keyframes move {
|
|
|
|
from,
|
|
11.1%,
|
|
to {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
|
|
22.2% {
|
|
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
|
|
transform: skewX(-12.5deg) skewY(-12.5deg);
|
|
}
|
|
|
|
33.3% {
|
|
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
|
|
transform: skewX(6.25deg) skewY(6.25deg);
|
|
}
|
|
|
|
44.4% {
|
|
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
|
|
transform: skewX(-3.125deg) skewY(-3.125deg);
|
|
}
|
|
|
|
55.5% {
|
|
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
|
|
transform: skewX(1.5625deg) skewY(1.5625deg);
|
|
}
|
|
|
|
66.6% {
|
|
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
|
transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
|
}
|
|
|
|
77.7% {
|
|
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
|
|
transform: skewX(0.390625deg) skewY(0.390625deg);
|
|
}
|
|
|
|
88.8% {
|
|
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
|
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
|
}
|
|
}
|
|
|
|
@keyframes move {
|
|
|
|
from,
|
|
11.1%,
|
|
to {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
|
|
22.2% {
|
|
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
|
|
transform: skewX(-12.5deg) skewY(-12.5deg);
|
|
}
|
|
|
|
33.3% {
|
|
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
|
|
transform: skewX(6.25deg) skewY(6.25deg);
|
|
}
|
|
|
|
44.4% {
|
|
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
|
|
transform: skewX(-3.125deg) skewY(-3.125deg);
|
|
}
|
|
|
|
55.5% {
|
|
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
|
|
transform: skewX(1.5625deg) skewY(1.5625deg);
|
|
}
|
|
|
|
66.6% {
|
|
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
|
transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
|
}
|
|
|
|
77.7% {
|
|
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
|
|
transform: skewX(0.390625deg) skewY(0.390625deg);
|
|
}
|
|
|
|
88.8% {
|
|
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
|
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
|
}
|
|
}
|
|
</style>
|