<template>
|
<div class="relative">
|
<HeaderBox />
|
<div
|
id="container"
|
style="width: 1920px; height: 995px; background-color: #001635"
|
></div>
|
<!-- 类型切换tab -->
|
<div
|
class="flex a-center absolute postion-center top--109 br--16 c-fff fs--14 bgcolor4 SSHR"
|
>
|
<div @click="activeTab = 1" class="lh--32 px--20 cursor-pointer z-10">
|
在建工程
|
</div>
|
<div @click="activeTab = 2" class="lh--32 px--20 cursor-pointer z-10">
|
固定资产
|
</div>
|
<div class="activeBox" :class="activeTab == 2 && 'activeBox2'">
|
占位盒子
|
</div>
|
</div>
|
<!-- 左下角隐患 -->
|
<div class="flex a-center absolute left--14 bottom--14">
|
<img
|
src="../../assets/img/home/Group@2x (4).png"
|
class="w--110 h--110 mr--9 shrink0"
|
/>
|
<div @click="toHiddenDanger" class="bgimg4 pt--10 c-fff cursor-pointer">
|
<div class="flex a-center ml--14">
|
<div class="ripple">
|
<div class="ripple-wave wave-1"></div>
|
<div class="ripple-wave wave-2"></div>
|
<div class="ripple-wave wave-3"></div>
|
</div>
|
<div class="fs--15 lh--15 ml--10">重大隐患数</div>
|
<div class="color5 ml--13 fs--30 lh--30 zh_tr">16</div>
|
</div>
|
<div class="flex a-center j-center gap--52 mt--11">
|
<div class="flex a-center">
|
<div class="fs--14 lh--14 ml--10">未整改</div>
|
<div class="color6 ml--13 fs--20 lh--24 zh_tr">14</div>
|
</div>
|
<div class="flex a-center">
|
<div class="fs--14 lh--14 ml--10">已整改</div>
|
<div class="color7 ml--13 fs--20 lh--24 zh_tr">2</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 地图legend -->
|
<div
|
class="absolute bottom--30 h--120 w--250 py--29 px--37 bgimg5"
|
style="right: 505px"
|
>
|
<div class="flex a-center j-between fs--12 SHSR c-fff">
|
<div
|
class="flex a-center gap--14 cursor-pointer"
|
@click="toggleCategory('municipal')"
|
>
|
<img
|
v-if="categoryFilter.municipal"
|
src="../../assets/img/home/Combined Shape@2x.png"
|
class="w--16 h--16 shrink0"
|
/>
|
<img
|
v-else
|
src="../../assets/img/home/11Combined Shape@2x.png"
|
class="w--16 h--16 shrink0"
|
/>
|
<div :class="!categoryFilter.municipal && 'gray-text'">市政</div>
|
</div>
|
<div
|
class="flex a-center gap--14 cursor-pointer"
|
@click="toggleCategory('house')"
|
>
|
<img
|
v-if="categoryFilter.house"
|
src="../../assets/img/home/Shape@2x (4).png"
|
class="w--18 h--16 shrink0"
|
/>
|
<img
|
v-else
|
src="../../assets/img/home/11Shape@2x.png"
|
class="w--18 h--16 shrink0"
|
/>
|
<div :class="!categoryFilter.house && 'gray-text'">房建</div>
|
</div>
|
</div>
|
<div class="flex a-center j-between gap--23 px--13 fs--12 SHSR mt--26">
|
<div
|
class="flex a-center flex-column cursor-pointer"
|
@click="toggleLevel('A')"
|
>
|
<div
|
class="w--8 h--8 mb--5 br50"
|
:class="levelFilter.A ? 'bgcolor8' : 'gray-bg'"
|
></div>
|
<div :class="levelFilter.A ? 'color8' : 'gray-text'">A类</div>
|
</div>
|
<div
|
class="flex a-center flex-column cursor-pointer"
|
@click="toggleLevel('B')"
|
>
|
<div
|
class="w--8 h--8 mb--5 br50"
|
:class="levelFilter.B ? 'bgcolor9' : 'gray-bg'"
|
></div>
|
<div :class="levelFilter.B ? 'color9' : 'gray-text'">B类</div>
|
</div>
|
<div
|
class="flex a-center flex-column cursor-pointer"
|
@click="toggleLevel('C')"
|
>
|
<div
|
class="w--8 h--8 mb--5 br50"
|
:class="levelFilter.C ? 'bgcolor10' : 'gray-bg'"
|
></div>
|
<div :class="levelFilter.C ? 'color10' : 'gray-text'">C类</div>
|
</div>
|
</div>
|
</div>
|
<div class="leftBox">
|
<div
|
@click="handleClick"
|
class="flex a-center j-between w100 px--20 h--40 relative bgcolor1 picker"
|
>
|
<el-date-picker
|
v-model="dateRange"
|
ref="datePicker"
|
type="daterange"
|
range-separator=""
|
start-placeholder=""
|
end-placeholder=""
|
>
|
</el-date-picker>
|
<div
|
class="absolute w100 h100 flex a-center c-fff fs--14 SHS"
|
style="width: calc(100% - 20px)"
|
>
|
{{ dateTxt }}
|
</div>
|
<img
|
src="../../assets/img/home/Shape@2x (6).png"
|
class="w--13 h--13 shrink0"
|
/>
|
</div>
|
<div
|
class="flex a-center j-between w100 pl--20 mt--13 h--40 relative bgcolor1 searchBox"
|
>
|
<el-select filterable v-model="projectId" placeholder="请输入项目名称">
|
<el-option
|
v-for="item in [1, 2]"
|
:key="item"
|
:label="item"
|
:value="item"
|
>
|
</el-option>
|
</el-select>
|
<div class="btn">搜索</div>
|
</div>
|
<div class="mt--33 relative">
|
<TitleBox>
|
<template #title> 项目数据总览 </template>
|
<template #content>
|
<div class="flex px--20 mt--17 pb--16">
|
<div class="flex flex-column a-center mt--17">
|
<div class="bgImg1 flex a-center flex-column j-end">
|
<div class="mb--23 c-fff SHSBold lh--18 fs--18 txts1">
|
项目总数
|
</div>
|
</div>
|
<div
|
class="color1 fs--34 lh--39 txts2 ff54-"
|
style="margin-top: -20px"
|
>
|
99
|
</div>
|
</div>
|
<div class="ml--18">
|
<div
|
@click="toPorjectList"
|
class="flex a-center pl--11 pr--13 py--6 bgimg2 cursor-pointer thisBox relative"
|
>
|
<div class="c-fff fs--14 SHSR mr--29 lh--14 shrink0">
|
本月检查情况
|
</div>
|
<img
|
src="../../assets/img/home/Shape@2x.png"
|
class="w--14 h--14 shrink0"
|
/>
|
<div
|
@click="toPorjectList"
|
class="hoverBox pt--20 px--20 pb--26"
|
>
|
<div class="c-fff SHSBold fs--15 lh--15">本月检查情况</div>
|
<div class="flex a-center j-between mt--20">
|
<div class="px--13 py--13 bsh1">
|
<div class="c-fff fs---14 lh--14 SHSH">已检查数：</div>
|
<div class="fs--45 lh--45 ff54- color8">36</div>
|
<div class="mt--20 c-fff SHSR fs--13 lh--25">
|
<div>塔式起重机：30</div>
|
<div>施工升降机：6</div>
|
</div>
|
</div>
|
<div class="px--13 py--13 bsh2">
|
<div class="c-fff fs---14 lh--14 SHSH">未1检查数：</div>
|
<div class="fs--45 lh--45 ff54- color6">36</div>
|
<div class="mt--20 c-fff SHSR fs--13 lh--25">
|
<div>塔式起重机：30</div>
|
<div>施工升降机：6</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="mt--13 flex bgcolor2 pl--9 pb--5 pt--4 pr--10">
|
<div class="flex mt--7 shrink0">
|
<img
|
src="../../assets/img/home/Shape@2x (5).png"
|
class="w--31 h--30 shrink0"
|
/>
|
<div class="ml--7 SHSR">
|
<div class="color2 fs--14 lh--14">房建</div>
|
<div class="mt--9 fs--8 lh--8 color3">本月检查覆盖率</div>
|
</div>
|
</div>
|
<div class="ml--11">
|
<div class="c-fff fs--22 lh--22 SHSBold">62</div>
|
<div class="mt--9 fs--10 lh--12 color4 SHSM">50%</div>
|
</div>
|
</div>
|
<div class="mt--10 flex bgcolor2 pl--9 pb--5 pt--4 pr--10">
|
<div class="flex mt--7 shrink0">
|
<img
|
src="../../assets/img/home/Combined Shape@2x (4).png"
|
class="w--30 h--30 shrink0"
|
/>
|
<div class="ml--7 SHSR">
|
<div class="color2 fs--14 lh--14">市政</div>
|
<div class="mt--9 fs--8 lh--8 color3">本月检查覆盖率</div>
|
</div>
|
</div>
|
<div class="ml--11">
|
<div class="c-fff fs--22 lh--22 SHSBold">62</div>
|
<div class="mt--9 fs--10 lh--12 color4 SHSM">50%</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
</TitleBox>
|
</div>
|
<div class="mt--25" v-if="activeTab == 1">
|
<TitleBox>
|
<template #title> 设备数据总览 </template>
|
<template #content>
|
<div class="flex j-end mt--8">
|
<div
|
@click="toEquipmentList"
|
class="flex a-center pl--11 pr--13 py--6 bgimg2 cursor-pointer"
|
>
|
<div class="c-fff fs--14 SHSR mr--29 lh--14 shrink0">
|
本月检查情况
|
</div>
|
<img
|
src="../../assets/img/home/Shape@2x.png"
|
class="w--14 h--14 shrink0"
|
/>
|
</div>
|
</div>
|
<div
|
class="flex a-center j-center gap--40 mt--14 mx--20 br--10 py--14 bgcolor3"
|
>
|
<img
|
src="../../assets/img/home/15@2x.png"
|
class="w--72 h--77 shrink0"
|
/>
|
<div>
|
<div class="fs--34 lh--39 color1 txts2 ff54-">6829</div>
|
<div class="c-fff fs--16 lh--16 SHSBold mt--10">
|
大型机械设备数
|
</div>
|
</div>
|
</div>
|
<div class="mt--14 mx--20 pb--10 rowItem">
|
<div v-for="item in 10" :key="item">
|
<div class="bgimg3">
|
<div class="c-fff fs--22 lh--33 SHSBold txt-center">54</div>
|
</div>
|
<div class="fs--12 lh--12 color5 nameTxt">塔式起重机</div>
|
</div>
|
</div>
|
</template>
|
</TitleBox>
|
</div>
|
</div>
|
<div class="rightBox">
|
<div class="mt--33">
|
<TitleBox>
|
<template #title> 事故简讯 </template>
|
<template #right>
|
<div
|
@click="toAccidentCaseList"
|
class="flex a-center py--6 pl--10 pr--8 br--4 bgcolor5 cursor-pointer"
|
>
|
<div class="fs--12 lh--12 c-fff mr--4 SHSR">详情</div>
|
<img
|
src="../../assets/img/home/13@2x.png"
|
class="w--14 h--14 shrink0"
|
/>
|
</div>
|
</template>
|
<template #content>
|
<div
|
ref="scrollContainer"
|
class="scroll-container"
|
style="height: 408px"
|
@mouseenter="handleMouseEnter"
|
@mouseleave="handleMouseLeave"
|
@wheel="handleWheel"
|
>
|
<div>
|
<div
|
@click="toAccidentCaseDetail(item)"
|
v-for="(item, index) in scrollData"
|
:key="`${item.id}-${index}`"
|
:class="(index + 1) % 2 === 0 ? 'bgcolor7' : ''"
|
class="relative py--20 pl--20 pr--32 c-fff"
|
>
|
<div
|
class="absolute lh--20 fs--12 SHSBold bgcolor6 px--6 top0 right0"
|
>
|
{{ item.type }}
|
</div>
|
<div class="fs--16 lh--16 SHSBold">
|
{{ item.title }}
|
</div>
|
<div class="flex a-center mt--14">
|
<img
|
src="../../assets/img/home/Shape@2x (2).png"
|
class="w--8 h--10 shrink0 mr--7"
|
/>
|
<div class="SHSN fs--12 lh--12">{{ item.location }}</div>
|
</div>
|
<div class="flex a-center j-between mt--8 pr--76">
|
<div class="flex a-center">
|
<img
|
src="../../assets/img/home/Shape@2x (3).png"
|
class="w--10 h--9 shrink0 mr--7"
|
/>
|
<div class="SHSN fs--12 lh--12">{{ item.date }}</div>
|
</div>
|
<div class="flex a-center">
|
<img
|
src="../../assets/img/home/Shape@2x (1).png"
|
class="w--9 h--10 shrink0 mr--7"
|
/>
|
<div class="SHSN fs--12 lh--12">
|
伤亡：造成
|
<span class="SHSBold fs--12">{{
|
item.casualties
|
}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
</TitleBox>
|
</div>
|
<div class="mt--33">
|
<TitleBox>
|
<template #title> 工作展示 </template>
|
<template #right>
|
<div
|
@click="toWorkList"
|
class="flex a-center py--6 pl--10 pr--8 br--4 bgcolor5 cursor-pointer"
|
>
|
<div class="fs--12 lh--12 c-fff mr--4 SHSR">详情</div>
|
<img
|
src="../../assets/img/home/13@2x.png"
|
class="w--14 h--14 shrink0"
|
/>
|
</div>
|
</template>
|
<template #content>
|
<div class="px--19 pt--16 pb--9">
|
<el-carousel
|
height="366px"
|
indicator-position="none"
|
:interval="5000"
|
arrow="never"
|
ref="carousel"
|
@change="handleChangeCarousel"
|
>
|
<el-carousel-item v-for="(item, index) in 4" :key="index">
|
<div @click="toWorkDetail(item)" class="cursor-pointer">
|
<img
|
src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/1bcd9db5-c909-4edc-a3d2-61cc33c54462.jpg"
|
class="w100 h--290"
|
/>
|
<div
|
class="fs--18 lh--24 SHSBold py--10 pl--20 pr--14 c-fff"
|
>
|
德国模德机床中国总部及研发生产基地项目落户成都东部新区
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
<div class="flex a-center justify-center mt--9">
|
<div class="flex a-center gap--3">
|
<img
|
v-for="(item, index) in 4"
|
:key="index"
|
:src="
|
activeIndex === index
|
? require('../../assets/img/home/Rectangle@2x.png')
|
: require('../../assets/img/home/Rectangle@2x (1).png')
|
"
|
class="w--18 h--4 shrink0 cursor-pointer"
|
@click="changeActiveIndex(index)"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
</TitleBox>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import HeaderBox from "../header/index.vue";
|
import moment from "moment";
|
import s1 from "../../assets/img/home/s1.png";
|
import s2 from "../../assets/img/home/s2.png";
|
import s3 from "../../assets/img/home/s3.png";
|
import f1 from "../../assets/img/home/f1.png";
|
import f2 from "../../assets/img/home/f2.png";
|
import f3 from "../../assets/img/home/f3.png";
|
export default {
|
components: {
|
HeaderBox,
|
},
|
data() {
|
return {
|
mapView: null,
|
mapPromise: null,
|
dateRange: [moment().startOf("month"), moment().endOf("month")], //默认本月
|
dateTxt: "",
|
activeTab: 1,
|
scrollData: [], // 存储滚动数据
|
scrollTimer: null, // 滚动定时器
|
scrollContainer: null, // 滚动容器引用
|
activeIndex: 0, // 当前活动索引
|
projectId: null,
|
categoryFilter: {
|
municipal: true,
|
house: true,
|
},
|
levelFilter: {
|
A: true,
|
B: true,
|
C: true,
|
},
|
markers: [],
|
};
|
},
|
watch: {
|
dateRange: {
|
handler(newVal, oldVal) {
|
if (newVal.length > 0) {
|
this.dateTxt =
|
moment(newVal[0]).format("YYYY年MM月DD日") +
|
" ~ " +
|
moment(newVal[1]).format("YYYY年MM月DD日");
|
}
|
},
|
immediate: true,
|
},
|
},
|
created() {
|
this.mapPromise = AMapLoader.load({
|
key: "232929db1cb31f26d42b3645a7456154",
|
version: "2.0",
|
});
|
},
|
mounted() {
|
this.setMapload();
|
this.$nextTick(() => {
|
this.scrollContainer = this.$refs.scrollContainer;
|
this.initScrollData();
|
});
|
},
|
beforeDestroy() {
|
this.stopAutoScroll();
|
},
|
methods: {
|
toAccidentCaseDetail(item) {
|
this.$router.push({
|
path: "/accidentCase/detail",
|
query: {
|
id: item.id,
|
},
|
});
|
},
|
toAccidentCaseList() {
|
this.$router.push("/accidentCase");
|
},
|
toWorkDetail(item) {
|
this.$router.push({
|
path: "/workList/detail",
|
query: {
|
id: item.id,
|
},
|
});
|
},
|
toWorkList() {
|
this.$router.push("/workList");
|
},
|
toPorjectList() {
|
this.$router.push("/projectList");
|
},
|
toEquipmentList() {
|
this.$router.push("/equipmentList");
|
},
|
toHiddenDanger() {
|
this.$router.push("/hiddenDanger");
|
},
|
// 切换活动索引
|
changeActiveIndex(index) {
|
this.activeIndex = index;
|
this.$refs.carousel.setActiveItem(index);
|
},
|
// 切换活动索引
|
handleChangeCarousel(index) {
|
this.activeIndex = index;
|
},
|
handleClick() {
|
this.$refs.datePicker.focus();
|
},
|
// 初始化滚动数据
|
initScrollData() {
|
// 创建示例数据，模拟真实的事故简讯数据
|
const sampleData = [
|
{
|
id: 1,
|
type: "塔吊倒塌",
|
title: "秦皇岛市钢铁厂发生塔吊倒塌事故",
|
location: "河北省秦皇岛市昌黎县",
|
date: "2025年11月10日",
|
casualties: "造成 1 人死亡",
|
},
|
{
|
id: 2,
|
type: "脚手架坍塌",
|
title: "广州市某工地脚手架坍塌事故",
|
location: "广东省广州市白云区",
|
date: "2025年11月9日",
|
casualties: "造成 2 人受伤",
|
},
|
{
|
id: 3,
|
type: "高处坠落",
|
title: "深圳市某建筑工地工人高处坠落",
|
location: "广东省深圳市南山区",
|
date: "2025年11月8日",
|
casualties: "造成 1 人死亡，1 人重伤",
|
},
|
{
|
id: 4,
|
type: "物体打击",
|
title: "成都市某工地发生物体打击事故",
|
location: "四川省成都市武侯区",
|
date: "2025年11月7日",
|
casualties: "造成 1 人轻伤",
|
},
|
{
|
id: 5,
|
type: "触电事故",
|
title: "杭州市某工地发生触电事故",
|
location: "浙江省杭州市西湖区",
|
date: "2025年11月6日",
|
casualties: "造成 1 人死亡",
|
},
|
{
|
id: 6,
|
type: "机械伤害",
|
title: "南京市某工地发生机械伤害事故",
|
location: "江苏省南京市江宁区",
|
date: "2025年11月5日",
|
casualties: "造成 1 人重伤",
|
},
|
{
|
id: 7,
|
type: "坍塌事故",
|
title: "武汉市某工地发生局部坍塌事故",
|
location: "湖北省武汉市汉阳区",
|
date: "2025年11月4日",
|
casualties: "造成 1 人死亡，2 人受伤",
|
},
|
];
|
|
// 为了实现无缝滚动，复制2份数据
|
this.scrollData = [...sampleData, ...sampleData];
|
|
// 开始滚动
|
this.startAutoScroll();
|
},
|
|
// 开始自动滚动
|
startAutoScroll() {
|
this.stopAutoScroll();
|
|
if (!this.scrollContainer) return;
|
|
const originalDataLength = this.scrollData.length / 2;
|
const itemHeight = 102; // 每个项目高度
|
|
// 判断是否需要跳转的标志
|
let shouldJump = false;
|
|
const scroll = () => {
|
let currentScrollTop = this.scrollContainer.scrollTop;
|
|
// 当滚动到第二份的末尾时
|
if (currentScrollTop >= originalDataLength * itemHeight) {
|
// 计算当前滚动位置相对于第二份数据开始的偏移量
|
const offset = currentScrollTop - originalDataLength * itemHeight;
|
// 直接跳到第一份数据相同偏移量的位置
|
this.scrollContainer.scrollTop = offset;
|
// 设置标志表示刚刚进行过跳转
|
shouldJump = true;
|
} else {
|
// 如果在跳转后，并且位置重置到了0附近，重置标志
|
if (shouldJump && currentScrollTop < 2) {
|
shouldJump = false;
|
}
|
}
|
|
// 只有在不处于跳转状态时才继续滚动
|
if (!shouldJump) {
|
this.scrollContainer.scrollTop += 1;
|
}
|
|
this.scrollTimer = requestAnimationFrame(scroll);
|
};
|
|
// 开始滚动
|
this.scrollTimer = requestAnimationFrame(scroll);
|
},
|
|
// 停止自动滚动
|
stopAutoScroll() {
|
if (this.scrollTimer) {
|
cancelAnimationFrame(this.scrollTimer);
|
this.scrollTimer = null;
|
}
|
},
|
|
// 鼠标进入容器时暂停滚动
|
handleMouseEnter() {
|
this.stopAutoScroll();
|
},
|
|
// 鼠标离开容器时恢复滚动
|
handleMouseLeave() {
|
this.startAutoScroll();
|
},
|
|
// 处理滚轮事件
|
handleWheel(event) {
|
event.preventDefault();
|
this.scrollContainer.scrollTop += event.deltaY;
|
},
|
|
setMapload() {
|
if (!this.mapPromise) {
|
this.mapPromise = AMapLoader.load({
|
key: "232929db1cb31f26d42b3645a7456154",
|
version: "2.0",
|
});
|
}
|
this.mapPromise
|
.then((AMap) => {
|
// 微信建筑图层
|
let satellite = new AMap.TileLayer.Satellite();
|
//创建路网图层
|
let roadNet = new AMap.TileLayer.RoadNet();
|
this.mapView = new AMap.Map("container", {
|
zoom: 13,
|
center: [104.065617, 30.656952], // 初始化地图中心点
|
mapStyle: "amap://styles/darkblue",
|
// layers: [satellite],
|
});
|
this.initCategoryMarkers(AMap);
|
})
|
.catch((e) => {
|
console.error(e); //加载错误提示
|
});
|
},
|
initCategoryMarkers(AMap) {
|
if (!this.mapView) {
|
return;
|
}
|
const points = [
|
{
|
position: [104.05, 30.65],
|
category: "municipal",
|
level: "A",
|
},
|
{
|
position: [104.051, 30.651],
|
category: "municipal",
|
level: "B",
|
},
|
{
|
position: [104.052, 30.652],
|
category: "municipal",
|
level: "C",
|
},
|
{
|
position: [104.037471, 30.658643],
|
category: "house",
|
level: "A",
|
},
|
{
|
position: [104.067471, 30.658643],
|
category: "house",
|
level: "B",
|
},
|
{
|
position: [104.057471, 30.658643],
|
category: "house",
|
level: "C",
|
},
|
];
|
const markers = [];
|
points.forEach((item) => {
|
const marker = this.createCategoryMarker(AMap, item);
|
if (marker) {
|
this.mapView.add(marker);
|
markers.push(marker);
|
}
|
});
|
this.markers = markers;
|
this.updateMarkerVisibility();
|
},
|
createCategoryMarker(AMap, item) {
|
if (!item || !item.position) {
|
return null;
|
}
|
let image = null;
|
if (item.category === "municipal") {
|
if (item.level === "A") {
|
image = s1;
|
} else if (item.level === "B") {
|
image = s2;
|
} else if (item.level === "C") {
|
image = s3;
|
}
|
} else if (item.category === "house") {
|
if (item.level === "A") {
|
image = f1;
|
} else if (item.level === "B") {
|
image = f2;
|
} else if (item.level === "C") {
|
image = f3;
|
}
|
}
|
if (!image) {
|
return null;
|
}
|
const icon = new AMap.Icon({
|
image,
|
size: new AMap.Size(30, 30),
|
imageSize: new AMap.Size(30, 30),
|
});
|
const marker = new AMap.Marker({
|
position: item.position,
|
icon,
|
offset: new AMap.Pixel(-12, -12),
|
extData: {
|
category: item.category,
|
level: item.level,
|
},
|
});
|
return marker;
|
},
|
updateMarkerVisibility() {
|
if (!this.markers || !this.markers.length) {
|
return;
|
}
|
this.markers.forEach((marker) => {
|
if (!marker) {
|
return;
|
}
|
const data = marker.getExtData ? marker.getExtData() : null;
|
if (!data) {
|
return;
|
}
|
const categoryVisible = this.categoryFilter[data.category];
|
const levelVisible = this.levelFilter[data.level];
|
if (categoryVisible && levelVisible) {
|
marker.show();
|
} else {
|
marker.hide();
|
}
|
});
|
},
|
toggleCategory(type) {
|
if (!this.categoryFilter.hasOwnProperty(type)) {
|
return;
|
}
|
this.categoryFilter[type] = !this.categoryFilter[type];
|
this.updateMarkerVisibility();
|
},
|
toggleLevel(level) {
|
if (!this.levelFilter.hasOwnProperty(level)) {
|
return;
|
}
|
this.levelFilter[level] = !this.levelFilter[level];
|
this.updateMarkerVisibility();
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.bsh1 {
|
box-shadow: inset 0px 0px 22px 0px rgba(11, 220, 140, 0.35);
|
}
|
|
.bsh2 {
|
box-shadow: inset 0px 0px 22px 0px rgba(254, 219, 101, 0.3);
|
}
|
|
.bgimg4 {
|
background-image: url("../../assets/img/home/Group 24 Copy@2x.png");
|
background-size: 100% 100%;
|
width: 300px;
|
height: 94px;
|
}
|
|
.bgimg5 {
|
background-image: url("../../assets/img/home/25@2x.png");
|
background-size: 100% 100%;
|
}
|
|
.gray-text {
|
color: rgba(255, 255, 255, 0.5) !important;
|
}
|
|
.gray-bg {
|
background: rgba(255, 255, 255, 0.5) !important;
|
}
|
|
.color5 {
|
color: #ff4d04;
|
}
|
|
.color6 {
|
color: #fedb65;
|
}
|
|
.color7 {
|
color: #47a1ff;
|
}
|
|
.color8 {
|
color: #00ffd2;
|
}
|
|
.color9 {
|
color: #ff4d4f;
|
}
|
|
.color10 {
|
color: #ffc53d;
|
}
|
|
.bgcolor4 {
|
background: #06175b;
|
border-radius: 16px;
|
border: 1px solid #204fb3;
|
}
|
|
.bgcolor5 {
|
background: rgba(14, 93, 251, 0.5);
|
}
|
|
.bgcolor6 {
|
background: linear-gradient(180deg, #ff4d4f 0%, #e5484d 100%);
|
border-radius: 2px 0px 0px 10px;
|
border: 1px solid #e5484d;
|
}
|
|
.bgcolor7 {
|
background: rgba(14, 95, 255, 0.2);
|
}
|
|
.bgcolor8 {
|
background: #00ffd2;
|
}
|
|
.bgcolor9 {
|
background: #ff4d4f;
|
}
|
|
.bgcolor10 {
|
background: #ffc53d;
|
}
|
|
.activeBox {
|
position: absolute;
|
top: 0;
|
left: 0;
|
padding: 0 20px;
|
height: 32px;
|
background: #0600e4;
|
color: transparent;
|
box-shadow: inset 0px 0px 20px 0px rgba(102, 255, 255, 0.52);
|
border-radius: 20px;
|
border: 1px solid rgba(50, 197, 255, 0.22);
|
transition: all 0.3s ease-in-out;
|
}
|
|
.activeBox2 {
|
left: 95px;
|
}
|
|
.leftBox {
|
width: 380px;
|
position: absolute;
|
top: 109px;
|
left: 23px;
|
|
.bgImg1 {
|
background-image: url("../../assets/img/home/Group@2x (3).png");
|
background-size: 100% 100%;
|
width: 171px;
|
height: 120px;
|
}
|
|
.bgimg2 {
|
background-image: url("../../assets/img/home/Group@2x (2).png");
|
background-size: 100% 100%;
|
}
|
|
.bgimg3 {
|
background-image: url("../../assets/img/home/@3x@2x.png");
|
background-size: 100% 100%;
|
width: 45px;
|
height: 49px;
|
}
|
|
.txts1 {
|
text-shadow: 0px 0px 7px #132c5a;
|
}
|
|
.txts2 {
|
text-shadow: 0px 0px 12px #1068f7;
|
}
|
|
.bgcolor1 {
|
background: rgba(2, 0, 77, 0.8);
|
box-shadow: inset 0px 0px 34px 0px rgba(17, 40, 255, 0.66);
|
border: 2px solid #0d53b7;
|
}
|
|
.bgcolor2 {
|
background: rgba(0, 113, 251, 0.1);
|
}
|
|
.bgcolor3 {
|
box-shadow: inset 0px 0px 22px 0px #2548b1;
|
border: 1px solid #3341b6;
|
}
|
|
.color1 {
|
color: #66ffff;
|
}
|
|
.color2 {
|
color: #cce0f8;
|
}
|
|
.color3 {
|
color: #7cc1ff;
|
}
|
|
.color4 {
|
color: #fedb65;
|
}
|
|
.color5 {
|
color: rgba(204, 224, 248, 0.7);
|
}
|
|
.hoverBox {
|
background-image: url("../../assets/img/home/444Group 24 Copy@2x.png");
|
background-size: 100% 100%;
|
width: 358px;
|
}
|
|
.picker {
|
::v-deep .el-input__icon {
|
display: none;
|
}
|
|
::v-deep .el-range-separator {
|
display: none;
|
}
|
|
::v-deep .el-input__inner {
|
background: transparent;
|
border: none;
|
color: transparent;
|
}
|
|
::v-deep .el-range-input {
|
background: transparent;
|
border: none;
|
color: transparent;
|
}
|
}
|
|
.searchBox {
|
::v-deep .el-input__inner {
|
background: transparent;
|
border: none;
|
color: #fff;
|
padding: 0;
|
}
|
|
::v-deep .el-input__suffix {
|
display: none;
|
}
|
|
.btn {
|
position: absolute;
|
top: -2px;
|
right: -2px;
|
background: linear-gradient(
|
90deg,
|
#3467d0 0%,
|
#0d226a 50.35%,
|
#376fe0 100%
|
);
|
line-height: 38px;
|
font-size: 14px;
|
color: #ffffff;
|
font-family: "Source Han Sans CN Heavy";
|
padding: 0 26px;
|
border: 1px solid #307ad9;
|
box-sizing: border-box;
|
cursor: pointer;
|
}
|
}
|
|
.rowItem {
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 14px 33px;
|
|
.nameTxt {
|
width: 5em;
|
overflow: hidden;
|
max-height: 2em;
|
text-align: center;
|
}
|
}
|
}
|
|
.ripple {
|
position: relative;
|
width: 14px;
|
height: 14px;
|
margin-right: 14px;
|
}
|
|
.ripple-wave {
|
position: absolute;
|
border-radius: 50%;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
}
|
|
.wave-1 {
|
width: 14px;
|
height: 14px;
|
background-color: rgba(255, 77, 4, 1);
|
}
|
|
.wave-2 {
|
width: 20px;
|
height: 20px;
|
background-color: rgba(255, 77, 4, 0.6);
|
animation: ripple-effect 2s ease-out infinite;
|
}
|
|
.wave-3 {
|
width: 24px;
|
height: 24px;
|
background-color: rgba(255, 77, 4, 0.4);
|
animation: ripple-effect 2s ease-out infinite 1s;
|
}
|
|
@keyframes ripple-effect {
|
0% {
|
transform: translate(-50%, -50%) scale(0.7);
|
opacity: 0;
|
}
|
20% {
|
opacity: 1;
|
opacity: 1;
|
}
|
100% {
|
-webkit-transform: translate(-50%, -50%) scale(1.4);
|
opacity: 0;
|
}
|
}
|
|
.rightBox {
|
width: 462px;
|
position: absolute;
|
top: 85px;
|
right: 20px;
|
}
|
|
/* 无缝滚动容器 */
|
.scroll-container {
|
overflow-y: auto;
|
overflow-x: hidden;
|
scrollbar-width: thin;
|
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
|
-ms-overflow-style: none;
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar {
|
width: 6px;
|
}
|
|
&::-webkit-scrollbar-track {
|
background: transparent;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
background-color: rgba(255, 255, 255, 0.3);
|
border-radius: 3px;
|
}
|
|
&::-webkit-scrollbar-thumb:hover {
|
background-color: rgba(255, 255, 255, 0.5);
|
}
|
}
|
|
.thisBox .hoverBox {
|
position: absolute;
|
left: 100%;
|
margin-left: 40px;
|
top: -60px;
|
display: none;
|
z-index: 100;
|
|
&::before {
|
content: "";
|
position: absolute;
|
top: 0;
|
left: -40px;
|
width: 40px;
|
height: 100%;
|
background: transparent;
|
}
|
}
|
|
.thisBox:hover .hoverBox {
|
display: block;
|
}
|
</style>
|
