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