dt-admin-pc-v2/src/views/military/modules/Home.vue

<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)">
                  <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)">
                  <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 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 = '/defence/ElectronicMap/flyto/config'
      break
    case 4:
      routePath = '/device/MsDeviceInfoList'
      break
    case 5:
      // routePath = '/device/PerimeterAlarmView'
      routePath = '/camera/cameraSet'
      break
    case 6:
      routePath = '/statistics/warnList'
      break
  }

  router.push({ path: routePath })
  /* index == 2
    ? window.open(this.$router.resolve({ path: routePath }).href, '_blank')
    : this.$router.push({
        path: routePath, // 要跳转的组件名称
        query: {}, // 路由携带参数
      }) */
}



</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>