Skip to content

R
risk-monitor
提交 a33109ba authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

update

上级 489ba4b7
隐藏空白字符变更
内嵌 并排
正在显示 包含 176 行增加 和 88 行删除
src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue
浏览文件 @ a33109ba
......@@ -1021,6 +1021,7 @@ const currentIndex = ref(0);
let autoTimer = null;
const startAutoPlay = () => {
currentIndex.value = 0;
stopAutoPlay();
if (buttonsData.value.length > 5) {
autoTimer = setInterval(() => {
......
src/views/ZMOverView/components/fourSuppress/components/allElement/index.vue
浏览文件 @ a33109ba
<template>
<div class="content-wrapper">
<div class="header">
<div class="header-arrow-left">
<div class="header" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
<div class="header-arrow-left" @click="prev">
<img src="../../assets/left-btn.png" alt="" />
</div>
<div class="header-arrow-right">
<div class="header-arrow-right" @click="next">
<img src="../../assets/right-btn.png" alt="" />
</div>
<div
class="header-item"
:class="{
headerItem1: index === 0,
headerItem2: index === 1,
headerItem3: index === 2,
headerItem4: index === 3,
headerItem5: index === 4
}"
v-for="(item, index) in headerList"
:key="index"
>
<div class="name">{{ item.elementName }}</div>
<div class="num">{{ item.num }}</div>
<div class="cards-mask">
<div class="item-box" :style="{ transform: `translateX(-${currentIndex * (307 + 16)}px)` }">
<div
class="header-item"
:class="{
headerItem1: index % 5 === 0,
headerItem2: index % 5 === 1,
headerItem3: index % 5 === 2,
headerItem4: index % 5 === 3,
headerItem5: index % 5 === 4
}"
v-for="(item, index) in headerList"
:key="index"
>
<div class="name">{{ item.elementName }}</div>
<div class="num">{{ item.num }}</div>
</div>
</div>
</div>
</div>
<div class="main">
......@@ -158,7 +162,7 @@
<div class="text">{{ item.name }}</div>
</div>
</div>
<div class="left-footer">
<div class="left-footer" v-if="box3DataList.length">
<el-pagination
background
layout="prev, pager, next"
......@@ -172,13 +176,13 @@
</div>
</div>
<div class="right">
<div class="title">{{ box3DetailInfo.name }}</div>
<div class="title">{{ box3DetailInfo?.name }}</div>
<div class="tag-box">
<div class="tag" v-for="(item, index) in box3DetailInfo.elemetList" :key="index">
<div class="tag" v-for="(item, index) in box3DetailInfo?.elemetList" :key="index">
{{ item }}
</div>
</div>
<div class="content">{{ box3DetailInfo.describe }}</div>
<div class="content">{{ box3DetailInfo?.describe }}</div>
<div class="area-box">
<div
class="area"
......@@ -189,14 +193,14 @@
area4: item.status === '4',
area5: item.status === '5'
}"
v-for="(item, index) in box3DetailInfo.areaList"
v-for="(item, index) in box3DetailInfo?.areaList"
:key="index"
>
{{ item.industryName }}
</div>
</div>
<div class="footer">
{{ `${box3DetailInfo.postDate} · ${box3DetailInfo.orgNameList?.toString()} · 行政令` }}
<div class="footer" v-if="box3DetailInfo?.postDate || box3DetailInfo?.orgNameList">
{{ `${box3DetailInfo?.postDate} · ${box3DetailInfo?.orgNameList?.toString()} · 行政令` }}
</div>
</div>
</div>
......@@ -212,7 +216,7 @@
</template>
<script setup>
import { onMounted, ref, computed, inject, watch } from "vue";
import { onMounted, ref, computed, inject, watch, onUnmounted } from "vue";
import setChart from "@/utils/setChart";
import getWordCloudChart from "./uitls/worldCloudChart";
import {
......@@ -410,7 +414,13 @@ const handleGetBox3DataList = async () => {
if (res.code === 200 && res.data) {
box3DataList.value = res.data.content;
box3Total.value = res.data.totalElements;
handleGetOrderInfo1(box3DataList.value[box3LeftActiveIndex.value].id);
if (res.data.content.length) {
handleGetOrderInfo1(box3DataList.value[box3LeftActiveIndex.value].id);
} else {
box3DetailInfo.value = {};
}
} else {
box3DetailInfo.value = {};
}
} catch (error) {}
};
......@@ -446,21 +456,67 @@ const handleBox3Chart = async () => {
setChart(box3Chart, "box3Chart");
};
watch(activeDate, () => {
handleGetHeaderList(); // 全要素统计
const currentIndex = ref(0);
let autoTimer = null;
const startAutoPlay = () => {
currentIndex.value = 0
stopAutoPlay();
if (headerList.value.length >= 5) {
autoTimer = setInterval(() => {
next();
}, 3000);
}
};
const stopAutoPlay = () => {
if (autoTimer) {
clearInterval(autoTimer);
autoTimer = null;
}
};
const next = () => {
let arr = [...headerList.value];
if (currentIndex.value < headerList.value.length - 5) {
currentIndex.value++;
} else {
// currentIndex.value = 0;
headerList.value = [...headerList.value, ...arr];
currentIndex.value++;
}
};
const prev = () => {
if (currentIndex.value > 0) {
currentIndex.value--;
} else {
currentIndex.value = Math.max(0, headerList.value.length - 5);
}
};
watch(activeDate, async () => {
// currentIndex.value = 0
handleGetBox2DataList(); // 美对我要素打压情况
handleGetBox3DataList(); // 美自身要素发展情况
handleBox2Chart(); // 关键词云-上
handleBox3Chart(); // 关键词云-下
await handleGetHeaderList(); // 全要素统计
startAutoPlay();
});
onMounted(() => {
handleGetHeaderList(); // 全要素统计
onMounted(async () => {
handleGetBox1Data(); // 最新动态
handleGetBox2DataList(); // 美对我要素打压情况
handleGetBox3DataList(); // 美自身要素发展情况
handleBox2Chart(); // 关键词云-上
handleBox3Chart(); // 关键词云-下
await handleGetHeaderList(); // 全要素统计
startAutoPlay();
});
onUnmounted(() => {
stopAutoPlay();
});
</script>
......@@ -502,54 +558,73 @@ onMounted(() => {
}
}
.header-item {
width: 307px;
.cards-mask {
width: 100%;
overflow: hidden; // 仅在这里隐藏超出部分，不影响外层的按钮
}
.item-box {
width: 100%;
width: max-content;
height: 178px;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
padding: 0;
transition: transform 0.5s ease; // 平滑过渡动画
.header-item {
width: 307px;
height: 178px;
border-radius: 10px;
.name {
margin-top: 53px;
margin-left: 112px;
width: 174px;
height: 39px;
color: rgba(255, 255, 255, 1);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 30px;
font-weight: 400;
line-height: 39px;
letter-spacing: 0px;
text-align: left;
.name {
margin-top: 53px;
margin-left: 112px;
width: 174px;
height: 39px;
color: rgba(255, 255, 255, 1);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 30px;
font-weight: 400;
line-height: 39px;
letter-spacing: 0px;
text-align: left;
}
.num {
margin-top: -8px;
margin-left: 112px;
width: 174px;
height: 39px;
color: rgba(255, 255, 255, 1);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 30px;
font-weight: 400;
line-height: 39px;
letter-spacing: 0px;
text-align: left;
}
}
.num {
margin-top: -8px;
margin-left: 112px;
width: 174px;
height: 39px;
color: rgba(255, 255, 255, 1);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 30px;
font-weight: 400;
line-height: 39px;
letter-spacing: 0px;
text-align: left;
.headerItem1 {
background: url("./assets/images/bg1.png");
}
.headerItem2 {
background: url("./assets/images/bg2.png");
}
.headerItem3 {
background: url("./assets/images/bg3.png");
}
.headerItem4 {
background: url("./assets/images/bg4.png");
}
.headerItem5 {
background: url("./assets/images/bg5.png");
}
}
.headerItem1 {
background: url("./assets/images/bg1.png");
}
.headerItem2 {
background: url("./assets/images/bg2.png");
}
.headerItem3 {
background: url("./assets/images/bg3.png");
}
.headerItem4 {
background: url("./assets/images/bg4.png");
}
.headerItem5 {
background: url("./assets/images/bg5.png");
}
}
.main {
......
src/views/ZMOverView/components/fourSuppress/components/allGovernment/index.vue
浏览文件 @ a33109ba
......@@ -628,6 +628,7 @@ const currentIndex = ref(0);
let autoTimer = null;
const startAutoPlay = () => {
currentIndex.value = 0;
stopAutoPlay();
if (cardList.value.length > 5) {
autoTimer = setInterval(() => {
......
src/views/ZMOverView/components/fourSuppress/components/allUnion/index.vue
浏览文件 @ a33109ba
......@@ -114,7 +114,7 @@
<img
:src="ele.image || defaultImg"
:class="{ img1: index !== 0 }"
@error="e => e.target.src = defaultImg"
@error="e => (e.target.src = defaultImg)"
alt
v-for="(ele, index) in item.countryList"
/>
......@@ -173,6 +173,7 @@ const activeDate = inject("activeDate", ref("week"));
let autoTimer = null;
const startAutoPlay = () => {
startIndex.value = 0;
stopAutoPlay();
if (carouselList.value.length > 5) {
autoTimer = setInterval(() => {
......@@ -306,10 +307,13 @@ const countryNameMap = {
};
const next = () => {
let arr = [...carouselList.value];
if (startIndex.value < carouselList.value.length - 5) {
startIndex.value++;
} else {
startIndex.value = 0; // 循环播放
// startIndex.value = 0; // 循环播放
carouselList.value = [...carouselList.value, ...arr];
startIndex.value++;
}
};
......@@ -339,7 +343,7 @@ const prev = () => {
// };
//打压遏制手段分布
const getColorName = (tag) => {
const getColorName = tag => {
const tagColorMap = {
航空航天: "blue",
生物科技: "blue",
......@@ -1033,16 +1037,16 @@ watch(activeDate, async () => {
width: calc(100% - 22px);
height: 25px;
.type-item {
display: inline-block;
border-radius: 4px;
padding: 2px 8px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
margin-left: 8px;
margin-bottom: 8px;
box-sizing: border-box;
}
display: inline-block;
border-radius: 4px;
padding: 2px 8px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
margin-left: 8px;
margin-bottom: 8px;
box-sizing: border-box;
}
}
}
}
......
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ a33109ba
......@@ -82,7 +82,7 @@
</div>
</div>
<div class="btn-box">
<div v-for="(value, index) in btnList" :key="index" class="btn-item disabled" :style="{
<div v-for="(value, index) in btnList" :key="index" class="btn-item" aria-disabled="true" :style="{
background: value.background
}">
<img :src="value.img" style="width: 22px; height: 19px; margin: 0 22px" />
......@@ -654,4 +654,11 @@ const btnList = ref([
:deep(.el-table th) {
padding: 12px 0;
}
.btn-item[aria-disabled="true"] {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论