Skip to content

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

update

上级 d9959d1e
隐藏空白字符变更
内嵌 并排
正在显示 包含 181 行增加 和 128 行删除
src/views/ZMOverView/components/fourSuppress/components/allElement/index.vue
浏览文件 @ 42469404
......@@ -9,18 +9,13 @@
</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="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>
......@@ -37,12 +32,8 @@
<div class="title">{{ "最新动态" }}</div>
</div>
<div class="box1-main">
<div
class="box1-item"
v-for="(item, index) in box1DataList"
:key="index"
@click="handleToDecreeDetail(item)"
>
<div class="box1-item" v-for="(item, index) in box1DataList" :key="index"
@click="handleToDecreeDetail(item)">
<div class="box1-item-left">{{ index + 1 }}</div>
<div class="box1-item-right">
<div class="title">{{ item.name }}</div>
......@@ -53,18 +44,13 @@
<div class="box1-item-right-footer">
<div class="time">{{ item.postDate }}</div>
<div class="area-box">
<div
class="area"
:class="{
area1: vall.status === '1',
area2: vall.status === '2',
area3: vall.status === '3',
area4: vall.status === '4',
area5: vall.status === '5'
}"
v-for="(vall, idxx) in item.areaList"
:key="idxx"
>
<div class="area" :class="{
area1: vall.status === '1',
area2: vall.status === '2',
area3: vall.status === '3',
area4: vall.status === '4',
area5: vall.status === '5'
}" v-for="(vall, idxx) in item.areaList" :key="idxx">
{{ vall.industryName }}
</div>
</div>
......@@ -85,57 +71,47 @@
<div class="box2-main">
<div class="inner-box1">
<div class="left">
<div class="left-main">
<div
class="left-item"
:class="{ leftItemActive: box2LeftActiveIndex === index }"
v-for="(item, index) in box2DataList"
:key="index"
@click="handleClickBox2Item(index)"
>
<el-empty v-if="box2DataList.length === 0" style="padding-top: 80px" description="暂无数据"
:image-size="100" />
<div class="left-item" :class="{ leftItemActive: box2LeftActiveIndex === index }"
v-for="(item, index) in box2DataList" :key="index" @click="handleClickBox2Item(index)">
<div class="id">{{ index + 1 }}</div>
<div class="text">{{ item.name }}</div>
</div>
</div>
<div class="left-footer">
<el-pagination
background
layout="prev, pager, next"
:total="box2Total"
:page-size="box2PageSize"
v-model:current-page="box2CurrentPage"
@current-change="handleGetBox2DataList"
size="small"
:pager-count="4"
/>
<div class="left-footer" v-if="box2DataList.length !== 0">
<el-pagination background layout="prev, pager, next" :total="box2Total" :page-size="box2PageSize"
v-model:current-page="box2CurrentPage" @current-change="handleGetBox2DataList" size="small"
:pager-count="4" />
</div>
</div>
<div class="right" @click="handleToDecreeDetail(box2DetailInfo)">
<div class="title">{{ box2DetailInfo.name }}</div>
<div class="tag-box">
<div class="tag" v-for="(item, index) in box2DetailInfo.elemetList" :key="index">
{{ item }}
<el-empty v-if="box2DataList.length === 0 || !isShowBox2Info" style="padding-top: 80px"
description="暂无数据" :image-size="100" />
<div v-else>
<div class="title">{{ box2DetailInfo?.name }}</div>
<div class="tag-box">
<div class="tag" v-for="(item, index) in box2DetailInfo.elemetList" :key="index">
{{ item }}
</div>
</div>
</div>
<div class="content">{{ box2DetailInfo.describe }}</div>
<div class="area-box">
<div
class="area"
:class="{
<div class="content">{{ box2DetailInfo?.describe }}</div>
<div class="area-box">
<div class="area" :class="{
area1: item.status === '1',
area2: item.status === '2',
area3: item.status === '3',
area4: item.status === '4',
area5: item.status === '5'
}"
v-for="(item, index) in box2DetailInfo.areaList"
:key="index"
>
{{ item.industryName }}
}" v-for="(item, index) in box2DetailInfo.areaList" :key="index">
{{ item.industryName }}
</div>
</div>
<div class="footer" v-show="box2DetailInfo?.postDate || box2DetailInfo?.orgNameList">
{{ `${box2DetailInfo?.postDate} · ${box2DetailInfo?.orgNameList?.toString()} · 行政令` }}
</div>
</div>
<div class="footer">
{{ `${box2DetailInfo?.postDate} · ${box2DetailInfo?.orgNameList?.toString()} · 行政令` }}
</div>
</div>
</div>
......@@ -156,78 +132,51 @@
<div class="inner-box1">
<div class="left">
<div class="left-main">
<el-empty
v-if="box3DataList.length === 0"
style="padding-top: 80px"
description="暂无数据"
:image-size="100"
/>
<div
class="left-item"
:class="{ leftItemActive: box3LeftActiveIndex === index }"
v-for="(item, index) in box3DataList"
:key="index"
@click="handleClickBox3Item(index)"
>
<el-empty v-if="box3DataList.length === 0" style="padding-top: 80px" description="暂无数据"
:image-size="100" />
<div class="left-item" :class="{ leftItemActive: box3LeftActiveIndex === index }"
v-for="(item, index) in box3DataList" :key="index" @click="handleClickBox3Item(index)">
<div class="id">{{ index + 1 }}</div>
<div class="text">{{ item.name }}</div>
</div>
</div>
<div class="left-footer">
<el-pagination
background
layout="prev, pager, next"
:total="box3Total"
:page-size="box3PageSize"
v-model:current-page="box3CurrentPage"
@current-change="handleGetBox3DataList"
size="small"
:pager-count="4"
/>
<div class="left-footer" v-if="box3DataList.length">
<el-pagination background layout="prev, pager, next" :total="box3Total" :page-size="box3PageSize"
v-model:current-page="box3CurrentPage" @current-change="handleGetBox3DataList" size="small"
:pager-count="4" />
</div>
</div>
<div class="right" @click="handleToDecreeDetail(box3DetailInfo)">
<el-empty
v-if="box3DataList.length === 0"
style="padding-top: 80px"
description="暂无数据"
:image-size="100"
/>
<div class="title">{{ box3DetailInfo?.name }}</div>
<div class="tag-box">
<div class="tag" v-for="(item, index) in box3DetailInfo?.elemetList" :key="index">
{{ item }}
<el-empty v-if="box3DataList.length === 0 || !isShowBox3Info" style="padding-top: 80px"
description="暂无数据" :image-size="100" />
<div v-else>
<div class="title">{{ box3DetailInfo?.name }}</div>
<div class="tag-box">
<div class="tag" v-for="(item, index) in box3DetailInfo?.elemetList" :key="index">
{{ item }}
</div>
</div>
</div>
<div class="content">{{ box3DetailInfo?.describe }}</div>
<div class="area-box">
<div
class="area"
:class="{
<div class="content">{{ box3DetailInfo?.describe }}</div>
<div class="area-box">
<div class="area" :class="{
area1: item.status === '1',
area2: item.status === '2',
area3: item.status === '3',
area4: item.status === '4',
area5: item.status === '5'
}"
v-for="(item, index) in box3DetailInfo?.areaList"
:key="index"
>
{{ item.industryName }}
}" v-for="(item, index) in box3DetailInfo?.areaList" :key="index">
{{ item.industryName }}
</div>
</div>
<div class="footer" v-if="box3DetailInfo?.postDate || box3DetailInfo?.orgNameList">
{{ `${box3DetailInfo?.postDate} · ${box3DetailInfo?.orgNameList?.toString()} · 行政令` }}
</div>
</div>
<div class="footer" v-if="box3DetailInfo?.postDate || box3DetailInfo?.orgNameList">
{{ `${box3DetailInfo?.postDate} · ${box3DetailInfo?.orgNameList?.toString()} · 行政令` }}
</div>
</div>
</div>
<div class="inner-box2">
<el-empty
v-if="box3ChartData.length === 0"
style="padding-top: 80px"
description="暂无数据"
:image-size="100"
/>
<el-empty v-if="box3ChartData.length === 0" style="padding-top: 80px" description="暂无数据"
:image-size="100" />
<div class="chart-header">{{ "关键词云" }}</div>
<div class="box3Chart" id="box3Chart"></div>
</div>
......@@ -255,6 +204,10 @@ import {
const activeDate = inject("activeDate");
const isShowBox2Info = ref(true)
const isShowBox3Info = ref(true)
const getCalculatedDate = type => {
const now = new Date();
const endDate = new Date();
......@@ -303,7 +256,7 @@ const handleGetHeaderList = async () => {
if (res.code === 200 && res.data) {
headerList.value = res.data;
}
} catch (error) {}
} catch (error) { }
};
// 最新动态
......@@ -330,7 +283,7 @@ const handleGetBox1Data = async () => {
if (res.code === 200 && res.data) {
box1DataList.value = res.data;
}
} catch (error) {}
} catch (error) { }
};
const box2DataList = ref([]);
......@@ -350,8 +303,12 @@ const handleGetOrderInfo = async id => {
console.log("根据id获取政令详细信息1", res);
if (res.code === 200 && res.data) {
box2DetailInfo.value = res.data;
} else {
isShowBox2Info.value = false
}
} catch (error) {}
} catch (error) {
isShowBox2Info.value = false
}
};
const handleGetBox2DataList = async () => {
......@@ -369,7 +326,7 @@ const handleGetBox2DataList = async () => {
box2Total.value = res.data.totalElements;
handleGetOrderInfo(box2DataList.value[box2LeftActiveIndex.value].id);
}
} catch (error) {}
} catch (error) { }
};
const handleClickBox2Item = index => {
......@@ -394,7 +351,7 @@ const handleGetBox2ChartData = async () => {
};
});
}
} catch (error) {}
} catch (error) { }
};
const handleBox2Chart = async () => {
await handleGetBox2ChartData();
......@@ -420,8 +377,12 @@ const handleGetOrderInfo1 = async id => {
console.log("根据id获取政令详细信息1", res);
if (res.code === 200 && res.data) {
box3DetailInfo.value = res.data;
} else {
isShowBox3Info.value = false
}
} catch (error) {}
} catch (error) {
isShowBox3Info.value = false
}
};
const handleGetBox3DataList = async () => {
......@@ -446,7 +407,7 @@ const handleGetBox3DataList = async () => {
} else {
box3DetailInfo.value = {};
}
} catch (error) {}
} catch (error) { }
};
const handleClickBox3Item = index => {
......@@ -472,7 +433,7 @@ const handleGetBox3ChartData = async () => {
};
});
}
} catch (error) {}
} catch (error) { }
};
const handleBox3Chart = async () => {
await handleGetBox3ChartData();
......@@ -559,6 +520,7 @@ onUnmounted(() => {
<style lang="scss" scoped>
.content-wrapper {
width: 1600px;
// height: 2132px;
.header {
width: 1600px;
......@@ -569,6 +531,7 @@ onUnmounted(() => {
gap: 16px;
margin: 0 auto;
position: relative;
.header-arrow-left {
position: absolute;
left: -33px;
......@@ -576,11 +539,13 @@ onUnmounted(() => {
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.header-arrow-right {
position: absolute;
right: -33px;
......@@ -588,6 +553,7 @@ onUnmounted(() => {
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
......@@ -612,6 +578,7 @@ onUnmounted(() => {
gap: 16px;
padding: 0;
transition: transform 0.5s ease; // 平滑过渡动画
.header-item {
width: 307px;
height: 178px;
......@@ -631,6 +598,7 @@ onUnmounted(() => {
letter-spacing: 0px;
text-align: left;
}
.num {
margin-top: -8px;
margin-left: 112px;
......@@ -646,23 +614,29 @@ onUnmounted(() => {
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");
}
}
}
.main {
width: 1598px;
height: 884px;
......@@ -670,6 +644,7 @@ onUnmounted(() => {
margin-top: 14px;
display: flex;
justify-content: space-between;
.box {
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
......@@ -677,28 +652,34 @@ onUnmounted(() => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
}
.left {
width: 472px;
.box1 {
width: 472px;
height: 884px;
overflow: hidden;
.box1-header {
height: 48px;
display: flex;
box-sizing: border-box;
border-bottom: 1px solid rgba(255, 255, 255, 1);
background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
.icon {
width: 22px;
height: 18px;
margin-top: 15px;
margin-left: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 89px;
height: 31px;
......@@ -714,10 +695,12 @@ onUnmounted(() => {
text-align: left;
}
}
.box1-main {
height: 836px;
overflow: hidden;
background: rgba(255, 255, 255, 0.65);
.box1-item {
width: 430px;
height: 167px;
......@@ -728,6 +711,7 @@ onUnmounted(() => {
margin: 0 auto;
display: flex;
cursor: pointer;
.box1-item-left {
width: 30px;
height: 30px;
......@@ -743,9 +727,11 @@ onUnmounted(() => {
line-height: 30px;
letter-spacing: 0px;
}
.box1-item-right {
width: 388px;
margin-left: 12px;
.title {
height: 30px;
color: rgba(59, 65, 75, 1);
......@@ -760,6 +746,7 @@ onUnmounted(() => {
text-overflow: ellipsis;
white-space: nowrap;
}
.content {
height: 48px;
color: rgba(95, 101, 108, 1);
......@@ -776,12 +763,14 @@ onUnmounted(() => {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.tag-box {
margin-top: 4px;
height: 28px;
display: flex;
flex-wrap: wrap;
gap: 8px;
.tag {
width: 80px;
height: 28px;
......@@ -797,12 +786,14 @@ onUnmounted(() => {
letter-spacing: 0px;
}
}
.box1-item-right-footer {
height: 30px;
margin-top: 4px;
display: flex;
justify-content: space-between;
align-items: center;
.time {
width: 124px;
height: 30px;
......@@ -815,11 +806,13 @@ onUnmounted(() => {
letter-spacing: 0px;
text-align: left;
}
.area-box {
height: 24px;
display: flex;
gap: 8px;
justify-content: flex-end;
.area {
height: 24px;
padding: 0 8px;
......@@ -847,27 +840,33 @@ onUnmounted(() => {
}
}
}
.right {
width: 1110px;
.box2 {
width: 1110px;
height: 434px;
.box2-header {
height: 48px;
box-sizing: border-box;
border-bottom: 1px solid rgba(255, 255, 255, 1);
background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
display: flex;
.icon {
width: 17px;
height: 16.5px;
margin-left: 19px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-top: 8px;
margin-left: 13px;
......@@ -883,12 +882,14 @@ onUnmounted(() => {
text-align: left;
}
}
.box2-main {
height: 386px;
background: rgba(255, 255, 255, 0.65);
display: flex;
justify-content: center;
gap: 16px;
.inner-box1 {
width: 640px;
height: 368px;
......@@ -897,21 +898,27 @@ onUnmounted(() => {
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
display: flex;
.left {
width: 320px;
border-right: 1px solid rgba(234, 236, 238, 1);
.left-main {
margin-top: 9px;
height: 270px;
.left-item {
height: 54px;
border: 1px solid transparent;
display: flex;
align-items: center;
&:hover {
background: rgba(246, 250, 255, 1);
}
cursor: pointer;
.id {
margin-left: 16px;
width: 24px;
......@@ -927,6 +934,7 @@ onUnmounted(() => {
letter-spacing: 0px;
text-align: center;
}
.text {
width: 260px;
height: 30px;
......@@ -944,6 +952,7 @@ onUnmounted(() => {
white-space: nowrap;
}
}
.leftItemActive {
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
......@@ -951,6 +960,7 @@ onUnmounted(() => {
background: rgba(246, 250, 255, 1);
}
}
.left-footer {
margin-top: 30px;
height: 60px;
......@@ -959,12 +969,14 @@ onUnmounted(() => {
align-items: center;
}
}
.right {
width: 320px;
height: 368px;
overflow: hidden;
overflow-y: auto;
cursor: pointer;
.title {
width: 283px;
min-height: 24px;
......@@ -980,6 +992,7 @@ onUnmounted(() => {
letter-spacing: 0px;
text-align: justify;
}
.tag-box {
width: 283px;
margin: 0 auto;
......@@ -987,6 +1000,7 @@ onUnmounted(() => {
display: flex;
flex-wrap: wrap;
gap: 8px;
.tag {
height: 28px;
padding: 0 8px;
......@@ -1003,6 +1017,7 @@ onUnmounted(() => {
letter-spacing: 0px;
}
}
.content {
margin: 0 auto;
margin-top: 8px;
......@@ -1022,6 +1037,7 @@ onUnmounted(() => {
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
.area-box {
width: 283px;
margin: 0 auto;
......@@ -1031,6 +1047,7 @@ onUnmounted(() => {
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
.area {
height: 24px;
padding: 0 8px;
......@@ -1048,6 +1065,7 @@ onUnmounted(() => {
color: rgba(245, 34, 45, 1);
}
}
.footer {
width: 283px;
margin: 0 auto;
......@@ -1064,6 +1082,7 @@ onUnmounted(() => {
}
}
}
.inner-box2 {
width: 412px;
height: 368px;
......@@ -1072,6 +1091,7 @@ onUnmounted(() => {
border-radius: 10px;
overflow: hidden;
position: relative;
.chart-header {
position: absolute;
top: 14px;
......@@ -1090,6 +1110,7 @@ onUnmounted(() => {
line-height: 26px;
letter-spacing: 0px;
}
.box2Chart {
width: 412px;
height: 368px;
......@@ -1097,26 +1118,31 @@ onUnmounted(() => {
}
}
}
.box3 {
margin-top: 16px;
width: 1110px;
height: 434px;
.box3-header {
height: 48px;
box-sizing: border-box;
border-bottom: 1px solid rgba(255, 255, 255, 1);
background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
display: flex;
.icon {
width: 17px;
height: 16.5px;
margin-left: 19px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-top: 8px;
margin-left: 13px;
......@@ -1132,12 +1158,14 @@ onUnmounted(() => {
text-align: left;
}
}
.box3-main {
height: 386px;
background: rgba(255, 255, 255, 0.65);
display: flex;
justify-content: center;
gap: 16px;
.inner-box1 {
width: 640px;
height: 368px;
......@@ -1146,21 +1174,27 @@ onUnmounted(() => {
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
display: flex;
.left {
width: 320px;
border-right: 1px solid rgba(234, 236, 238, 1);
.left-main {
margin-top: 9px;
height: 270px;
.left-item {
height: 54px;
border: 1px solid transparent;
display: flex;
align-items: center;
&:hover {
background: rgba(246, 250, 255, 1);
}
cursor: pointer;
.id {
margin-left: 16px;
width: 24px;
......@@ -1176,6 +1210,7 @@ onUnmounted(() => {
letter-spacing: 0px;
text-align: center;
}
.text {
width: 260px;
height: 30px;
......@@ -1193,6 +1228,7 @@ onUnmounted(() => {
white-space: nowrap;
}
}
.leftItemActive {
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
......@@ -1200,6 +1236,7 @@ onUnmounted(() => {
background: rgba(246, 250, 255, 1);
}
}
.left-footer {
margin-top: 30px;
height: 60px;
......@@ -1208,12 +1245,14 @@ onUnmounted(() => {
align-items: center;
}
}
.right {
width: 320px;
height: 368px;
overflow: hidden;
overflow-y: auto;
cursor: pointer;
.title {
width: 283px;
min-height: 24px;
......@@ -1229,6 +1268,7 @@ onUnmounted(() => {
letter-spacing: 0px;
text-align: justify;
}
.tag-box {
width: 283px;
margin: 0 auto;
......@@ -1236,6 +1276,7 @@ onUnmounted(() => {
display: flex;
flex-wrap: wrap;
gap: 8px;
.tag {
height: 28px;
padding: 0 8px;
......@@ -1252,6 +1293,7 @@ onUnmounted(() => {
letter-spacing: 0px;
}
}
.content {
margin: 0 auto;
margin-top: 8px;
......@@ -1271,6 +1313,7 @@ onUnmounted(() => {
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
.area-box {
width: 283px;
margin: 0 auto;
......@@ -1280,6 +1323,7 @@ onUnmounted(() => {
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
.area {
height: 24px;
padding: 0 8px;
......@@ -1297,6 +1341,7 @@ onUnmounted(() => {
color: rgba(245, 34, 45, 1);
}
}
.footer {
width: 283px;
margin: 0 auto;
......@@ -1313,6 +1358,7 @@ onUnmounted(() => {
}
}
}
.inner-box2 {
width: 412px;
height: 368px;
......@@ -1321,6 +1367,7 @@ onUnmounted(() => {
border-radius: 10px;
overflow: hidden;
position: relative;
.chart-header {
position: absolute;
top: 14px;
......@@ -1339,6 +1386,7 @@ onUnmounted(() => {
line-height: 26px;
letter-spacing: 0px;
}
.box3Chart {
width: 412px;
height: 368px;
......@@ -1349,26 +1397,31 @@ onUnmounted(() => {
}
}
}
.area1 {
border: 1px solid rgba(217, 247, 190, 1) !important;
background: rgba(246, 255, 237, 1) !important;
color: rgba(56, 158, 13, 1) !important;
}
.area2 {
border: 1px solid rgba(135, 232, 222, 1) !important;
background: rgba(230, 255, 251, 1) !important;
color: rgba(19, 168, 168, 1) !important;
}
.area3 {
border: 1px solid rgba(145, 202, 255, 1) !important;
background: rgba(230, 244, 255, 1) !important;
color: rgba(22, 119, 255, 1) !important;
}
.area4 {
border: 1px solid rgba(173, 198, 255, 1) !important;
background: rgba(240, 245, 255, 1) !important;
color: rgba(47, 84, 235, 1) !important;
}
.area5 {
border: 1px solid rgba(211, 173, 247, 1) !important;
background: rgba(249, 240, 255, 1) !important;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论