|
|
@@ -0,0 +1,172 @@
|
|
|
+<template>
|
|
|
+ <Dialog custom-show title="风险趋势分析" width="1271px" @confirm="handleConfirm">
|
|
|
+ <div style="position: relative; height: 264px;">
|
|
|
+ <div class="swiper-button-prev"></div>
|
|
|
+ <swiper
|
|
|
+ ref="mySwiper"
|
|
|
+ :modules="modules"
|
|
|
+ :slides-per-view="3"
|
|
|
+ :space-between="15"
|
|
|
+ :navigation="navigation"
|
|
|
+ class="custom-swiper"
|
|
|
+ @swiper="onSwiper"
|
|
|
+ @slide-change="onSlideChange"
|
|
|
+ >
|
|
|
+ <swiper-slide v-for="(item, index) in slides" :key="index">
|
|
|
+ <div :class="activeIndex === index ? 'swiper-slide-content active' : 'swiper-slide-content'" @click="handleClick(index)">
|
|
|
+ <img class="img" :src="item.img" alt="" />
|
|
|
+ <div class="text-box">
|
|
|
+ <div class="text">{{ index === 0 ? '今天' + item.title : item.title }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ </swiper>
|
|
|
+ <div class="swiper-button-next"></div>
|
|
|
+ </div>
|
|
|
+ </Dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup name="RiskTrendAnalysis">
|
|
|
+import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
|
+import { Navigation } from 'swiper/modules';
|
|
|
+import mapImg from '@/assets/images/censusDataAnalysis/map.png';
|
|
|
+// Import Swiper styles
|
|
|
+import 'swiper/css';
|
|
|
+import 'swiper/css/navigation';
|
|
|
+const props = defineProps({
|
|
|
+ modelValue: Boolean
|
|
|
+});
|
|
|
+const emits = defineEmits(['update:modelValue', 'confirm']);
|
|
|
+let modules = ref([Navigation]);
|
|
|
+const navigation = reactive({
|
|
|
+ enabled: true,
|
|
|
+ nextEl: '.swiper-button-next',
|
|
|
+ prevEl: '.swiper-button-prev'
|
|
|
+});
|
|
|
+const slides = ref([]);
|
|
|
+let mySwiper = ref(null);
|
|
|
+let activeIndex = ref(-1);
|
|
|
+const getDatesWithCurrentHour = (n) => {
|
|
|
+ const dates = [];
|
|
|
+ const now = new Date();
|
|
|
+ const currentHour = now.getHours();
|
|
|
+
|
|
|
+ for (let i = 0; i < n; i++) {
|
|
|
+ // 创建一个新的日期对象，设置为当前日期减去 i 天
|
|
|
+ let date = new Date(now);
|
|
|
+ date.setDate(date.getDate() - i);
|
|
|
+
|
|
|
+ // 设置小时、分钟、秒和毫秒为当前小时的值
|
|
|
+ date.setHours(currentHour, 0, 0, 0);
|
|
|
+
|
|
|
+ // 格式化日期为字符串
|
|
|
+ let formattedDate = `${date.getFullYear()}年${('0' + (date.getMonth() + 1)).slice(-2)}月${('0' + date.getDate()).slice(-2)}日 ${('0' + date.getHours()).slice(-2)}时`;
|
|
|
+
|
|
|
+ // // 检查是否是今天，并添加“今天”字样
|
|
|
+ // if (date.toDateString() === now.toDateString()) {
|
|
|
+ // formattedDate = `今天 ${formattedDate}`;
|
|
|
+ // }
|
|
|
+ // 将格式化后的日期添加到数组中
|
|
|
+ dates.push(formattedDate);
|
|
|
+ }
|
|
|
+
|
|
|
+ return dates;
|
|
|
+};
|
|
|
+const handleClick = (index) => {
|
|
|
+ activeIndex.value = index;
|
|
|
+};
|
|
|
+const initData = () => {
|
|
|
+ const dates = getDatesWithCurrentHour(10);
|
|
|
+ let data = [];
|
|
|
+ dates.forEach((date) => {
|
|
|
+ data.push({
|
|
|
+ img: mapImg,
|
|
|
+ title: date
|
|
|
+ });
|
|
|
+ });
|
|
|
+ slides.value = data;
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ initData();
|
|
|
+});
|
|
|
+const onSwiper = (swiper) => {
|
|
|
+ console.log(swiper);
|
|
|
+};
|
|
|
+const onSlideChange = () => {
|
|
|
+ console.log('slide change');
|
|
|
+};
|
|
|
+const handleConfirm = () => {
|
|
|
+ let data = slides.value[activeIndex.value];
|
|
|
+ emits('confirm', data);
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.custom-swiper {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.swiper-slide-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 264px;
|
|
|
+ background: url('@/assets/images/censusDataAnalysis/box4.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ .img {
|
|
|
+ width: 370px;
|
|
|
+ height: 244px;
|
|
|
+ }
|
|
|
+ .text-box {
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+}
|
|
|
+.active {
|
|
|
+ position: relative;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ right: 15px;
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ background: url('@/assets/images/censusDataAnalysis/checked2.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.dialog-content) {
|
|
|
+ overflow: auto;
|
|
|
+ padding: 0 22px !important;
|
|
|
+}
|
|
|
+.swiper-button-prev,
|
|
|
+.swiper-button-next {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ border: none;
|
|
|
+ padding: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 10;
|
|
|
+ width: 33px;
|
|
|
+ height: 33px;
|
|
|
+}
|
|
|
+.swiper-button-prev {
|
|
|
+ left: -22px;
|
|
|
+ background: url('@/assets/images/censusDataAnalysis/left.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+.swiper-button-next {
|
|
|
+ right: -22px;
|
|
|
+ background: url('@/assets/images/censusDataAnalysis/right.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
