1.html
<template>
<div id="gateway">
<div id="gatewayCentent">
<transition name="fade1">
<div class="l-content">
<div class="CententsL">
<div class="Cententstop">
<div class="titles">
2<span class="bags">大排水体系</span>
</div>
<div class="cons">
<div
class="consitems"
v-for="(item, index) in list.item1"
:key="index"
>
<img class="imgs" :src="item.img" alt="" />
<div class="name">{{ item.name }}</div>
</div>
</div>
</div>
<div class="Cententsbottom">
<div class="titles">
5<span class="bags">大项目目标</span>
</div>
<div class="cons">
<div
class="consitems"
v-for="(item2, index) in list.item2"
:key="index"
>
<img class="imgs" :src="item2.img" alt="" />
<div class="name">{{ item2.name }}</div>
</div>
</div>
</div>
</div>
</div>
</transition>
<div class="CententsC">
<img
class="leftImg"
src="@/assets/imgs/gateway/SZXZleft.png"
@click="leftMove('prev')"
alt=""
/>
<img
class="rightImg"
src="@/assets/imgs/gateway/SZXZright.png"
@click="leftMove('next')"
alt=""
/>
<div
class="jz btn1Move"
@click="handleClicks(item)"
v-for="item in MenuData"
:class="item.className"
:key="item.id"
>
<img class="btnimg" :src="item.src" alt="" />
<div class="name">{{ item.label }}</div>
</div>
</div>
<transition name="fade2">
<div class="r-content">
<div class="CententsR">
<div class="CententsRtop">
<div class="titles">
3<span class="bags">大系统理念</span>
</div>
<div class="cons">
<div
class="consitems"
v-for="(item3, index) in list.item3"
:key="index"
>
<img class="imgs" :src="item3.img" alt="" />
<div class="name">{{ item3.name }}</div>
</div>
</div>
</div>
<div class="CententsRbottom">
<div class="titles">
4<span class="bags">大核心功能</span>
</div>
<div class="cons">
<div
class="consitems"
v-for="(item4, index) in list.item4"
:key="index"
>
<img class="imgs" :src="item4.img" alt="" />
<div class="name">{{ item4.name }}</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
</template>
2.js
export default {
name: "gateway",
components: {
ndropdown,
},
setup() {
const store = useStore();
const AllData = reactive({
list: {
item1: [
{
img: getImageUrlForCity("ystx"),
name: "雨水体系",
},
{
img: getImageUrlForCity("wstx"),
name: "污水体系",
},
],
item2: [
{
img: getImageUrlForCity("gzjxh"),
name: "感知精细化",
},
{
img: getImageUrlForCity("xxksh"),
name: "信息可视化",
},
{
img: getImageUrlForCity("yjssh"),
name: "预警实时化",
},
{
img: getImageUrlForCity("glwlh"),
name: "管理网络化",
},
{
img: getImageUrlForCity("jckxh"),
name: "决策科学化",
},
],
item3: [
{
img: getImageUrlForCity("dtgz"),
name: "动态感知",
},
{
img: getImageUrlForCity("zhjc"),
name: "智慧决策",
},
{
img: getImageUrlForCity("jxgl"),
name: "精细管理",
},
],
item4: [
{
img: getImageUrlForCity("ssjc"),
name: "实时监测",
},
{
img: getImageUrlForCity("ybyj"),
name: "预报预警",
},
{
img: getImageUrlForCity("znfx"),
name: "智能分析",
},
{
img: getImageUrlForCity("ycjg"),
name: "远程监管",
},
],
},
wslists: [],
waterlist: [],
citylist: [],
username: "",
imgvideo: "/video/mp4/1660035469.mp4",
time: "",
timer: null,
week: "",
date: "",
WeatherData: "",
Stacking: false, //是否开启堆叠模式
overdueTimer: null,
jjlist: [],
czyhLists: [],
isShow: false,
MenuData: [],
});
const toDemo = () => {
router.push({
path: "/gisPipeNet",
});
};
const handleClicks = (item) => {
let type = item.label;
if (item.isOperation != 1) return;
AllData.maskpop = true;
if (type == "综合一张图") {
router.push({
path: "/leaderControlRoom",
});
} else {
router.push({
path: "/sewage",
});
localStorage.setItem("type", type);
}
};
const router = useRouter();
const getTime = () => {
let date = new Date();
let year = date.getFullYear(); // 年
let month = date.getMonth() + 1; // 月
let day = date.getDate(); // 日
let hour = date.getHours(); // 时
hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
let minute = date.getMinutes(); // 分
minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
let second = date.getSeconds(); // 秒
second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
let week = new Array(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"
); //星期
week = week[date.getDay()];
AllData.date = `${year}/${month}/${day}`;
AllData.time = `${hour}:${minute}:${second}`;
AllData.week = `${week}`;
};
const currentTime = () => {
clearInterval(AllData.timer);
AllData.timer = setInterval(() => {
getTime();
}, 500);
};
// 获取天气
const GetWeather = async () => {
let pramas = `?day=0`;
let res = await getGaofenWeather(pramas);
if (res && res.code == 200 && res.data.length > 0) {
AllData.WeatherData = res.data[0];
AllData.WeatherData.coDeday = res.data[0].code_day;
let A = getImageUrlForWeather(res.data[0].code_day);
AllData.WeatherData.code_day = A;
sessionStorage.setItem(
"WeatherData",
JSON.stringify(AllData.WeatherData)
);
}
};
// 获取菜单数据
const GetMenuData = async () => {
let obj = {};
let Menulist = sessionStorage.getItem("firstMenulist");
let getallMenulists =
JSON.parse(Menulist) || store.getters.allMenulist;
if (getallMenulists.length != 0) {
obj = getallMenulists.filter(
(item) => item.label == "配置中心"
)[0];
sessionStorage.setItem(
"showSet",
JSON.stringify(obj.isOperation)
);
} else {
let res = await menuUserFirstMenu();
if (res && res.code == 200) {
sessionStorage.setItem(
"firstMenulist",
JSON.stringify(res.data)
);
obj = res.data.filter(
(item) => item.label == "配置中心"
)[0];
getallMenulists = res.data;
sessionStorage.setItem(
"showSet",
JSON.stringify(obj.isOperation)
);
}
}
getallMenulists.map((item) => {
switch (item.label) {
case "城市排水防涝":
item.src =
item.isOperation == 1
? getGatewayImg("csplfl")
: getGatewayImg("csplfl_hui");
item.className = "btn3";
break;
case "污水提质增效":
item.src =
item.isOperation == 1
? getGatewayImg("wstzzx")
: getGatewayImg("wstzzx_hui");
item.className = "btn2";
break;
case "智慧运维":
item.src =
item.isOperation == 1
? getGatewayImg("zhyw")
: getGatewayImg("zhyw_hui");
item.className = "btn4";
break;
case "GIS管网":
item.src =
item.isOperation == 1
? getGatewayImg("gis")
: getGatewayImg("gis_hui");
item.className = "btn1";
break;
case "水质水量监测":
item.src =
item.isOperation == 1
? getGatewayImg("szsl")
: getGatewayImg("szsl_hui");
item.className = "btn5";
break;
case "数据中心":
// item.label = "数据中心";
item.className = "btn7";
item.src =
item.isOperation == 1
? getGatewayImg("sjzx")
: getGatewayImg("sjzx_hui");
break;
case "配置中心":
item.className = "btn6";
item.label = "综合一张图";
item.src = getGatewayImg("zhyzt");
break;
default:
break;
}
});
AllData.MenuData = getallMenulists;
};
onBeforeMount(() => {
window.addEventListener(
"click",
() => {
sessionStorage.setItem(
"loginFirstTime",
new Date().getTime()
);
},
true
);
});
const leftMove = (type) => {
if (type == "prev") {
AllData.MenuData.forEach((i) => {
let str = i.className.charAt(i.className.length - 1);
if (parseInt(str) == 7) {
i.className = "btn1";
} else {
i.className = "btn" + (parseInt(str) + 1);
console.log(i.className);
}
});
} else {
AllData.MenuData.forEach((i) => {
let str = i.className.charAt(i.className.length - 1);
i.className =
"btn" +
(parseInt(str) - 1 == 0 ? 7 : parseInt(str) - 1);
console.log(i.className);
});
}
};
// 获取菜单的分为7个菜单位置的坐标
const getPosition = () => {
const rect = document.getElementsByClassName("CententsC");
debugger;
const rectWidth = rect[0].offsetWidth;
const rectHeight = rect[0].offsetHeight;
const radius = Math.min(rectWidth, rectHeight) / 2;
const centerX = rectWidth / 2;
const centerY = rectHeight / 2;
const numberOfCircles = 6; // 要分布的圆的个数
const stepAngle = 360 / numberOfCircles; // 每个圆的角度
const circles = [];
AllData.MenuData;
for (let i = 0; i < numberOfCircles; i++) {
let num = i + 1;
const rect = document.getElementsByClassName("btn" + num);
console.log(rect[0], 11111);
const angle = i * stepAngle;
const radians = (angle * Math.PI) / 180;
const x = centerX + radius * Math.cos(radians);
const y = centerY + radius * Math.sin(radians);
rect[0].style.left = x + "px";
rect[0].style.top = y + "px";
circles.push({ x, y });
}
};
function getMaxRadius(width, height) {
return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) / 2;
}
onMounted(() => {
currentTime();
AllData.WeatherData = JSON.parse(
sessionStorage.getItem("WeatherData")
);
if (AllData.WeatherData == "" || AllData.WeatherData == null) {
GetWeather();
}
nextTick(function () {
AllData.isShow = true;
});
GetMenuData();
});
onBeforeUnmount(() => {
clearInterval(AllData.overdueTimer);
localStorage.removeItem("menlist");
window.addEventListener("click", () => {}, true);
});
return {
...toRefs(AllData),
handleClicks,
canvass,
getImageUrlForGis,
toDemo,
leftMove,
};
},
};
3.css
<style lang="less" scoped>
::deep .n-progress {
width: 182px;
}
#gateway {
width: 100%;
height: 100vh;
position: relative;
background: url("/src/assets/imgs/gateway/bg_img.png") no-repeat center;
background-size: 100% 100%;
#gatewayCentent {
top: 102px;
width: 100%;
height: calc(100% - 100px);
z-index: 10;
position: relative;
left: 0;
color: #4597ff;
font-size: 24px;
font-family: PingFang SC;
cursor: pointer;
// overflow: scroll;
.titles {
padding-top: 5px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: bold;
font-style: italic;
color: #ffffff;
.bags {
position: relative;
margin-left: 3px;
&::after {
content: "";
position: absolute;
width: 104px;
height: 6px;
background: linear-gradient(
90deg,
#ffe557 0%,
rgba(255, 229, 87, 0) 100%
);
left: 0;
bottom: 0;
}
}
}
.cons {
width: 100%;
width: 185px;
margin-left: 17px;
.consitems {
width: 100%;
margin-top: 18px;
padding-left: 14px;
display: flex;
justify-content: flex-start;
align-items: center;
height: 63px;
border: 2px solid #67d2ff;
border-radius: 8px;
.imgs {
width: 42px;
height: 42px;
}
.name {
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #9ee9ff;
margin-left: 9px;
}
}
}
.l-content {
perspective: 180px;
perspective-origin: 50% 50%;
position: absolute;
left: 0;
width: 362px;
top: 50%;
transform: translate(0, -50%);
height: calc(100% - 100px);
}
.CententsL {
position: absolute;
left: 66px;
width: 262px;
top: 50%;
// transform: translate(0, -50%);
transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1)
rotateX(0deg) rotateY(2deg) rotateZ(0deg) skewX(0deg)
skewY(0deg) translateY(-50%);
.Cententstop {
width: 100%;
height: 235px;
padding-left: 20px;
background: linear-gradient(
0deg,
rgba(0, 90, 255, 0.4) 0%,
rgba(0, 90, 255, 0.1) 100%
);
border-radius: 4px;
// transform: rotateX(10deg) rotatey(10deg);
}
.Cententsbottom {
margin-top: 30px;
width: 100%;
height: 484px;
padding-left: 20px;
background: linear-gradient(
0deg,
rgba(0, 90, 255, 0.4) 0%,
rgba(0, 90, 255, 0.1) 100%
);
border-radius: 4px;
// transform: rotateX(10deg) rotatey(10deg);
.CententsLname {
font-size: 26px;
font-family: Arial, Helvetica, sans-serif;
color: #c4e2ff;
text-align: right;
padding-top: 30px;
margin-right: 35px;
}
}
}
.CententsC {
position: absolute;
height: 100%;
width: calc(100% - 810px);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.btnimg {
width: 213px;
height: 189px;
transition: all 0.5s;
background-size: cover;
}
.btnimg:hover {
transform: scale(1.2);
}
.name {
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #ffffff;
}
.jz {
text-align: center;
}
.btn1 {
position: absolute;
top: 20%;
left: 0;
}
.btn1Move {
transition: all 1s;
}
.btn2 {
position: absolute;
left: 26%;
top: 10%;
}
.btn3 {
position: absolute;
left: 56%;
top: 10%;
}
.btn4 {
position: absolute;
left: 80%;
top: 20%;
}
.btn5 {
position: absolute;
top: 50%;
left: 77%;
}
.btn6 {
position: absolute;
top: 60%;
left: 45%;
// transform: translate(-50%, -50%);
}
.btn7 {
position: absolute;
top: 50%;
left: 10%;
}
}
.r-content {
perspective: 180px;
perspective-origin: 50% 50%;
position: absolute;
right: 0;
width: 362px;
top: 50%;
transform: translate(0, -50%);
height: calc(100% - 100px);
.CententsR {
position: absolute;
width: 262px;
top: 50%;
right: 66px;
transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1)
rotateX(0deg) rotateY(-2deg) rotateZ(0deg) skewX(0deg)
skewY(0deg) translateY(-50%);
.CententsRtop {
width: 100%;
height: 315px;
padding-left: 20px;
background: linear-gradient(
0deg,
rgba(0, 90, 255, 0.4) 0%,
rgba(0, 90, 255, 0.1) 100%
);
border-radius: 4px;
// transform: rotateX(10deg) rotatey(-10deg);
}
.CententsRbottom {
margin-top: 30px;
width: 100%;
height: 408px;
padding-left: 20px;
background: linear-gradient(
0deg,
rgba(0, 90, 255, 0.4) 0%,
rgba(0, 90, 255, 0.1) 100%
);
border-radius: 4px;
.CententsLname {
font-size: 26px;
font-family: Arial, Helvetica, sans-serif;
color: #c4e2ff;
text-align: left;
padding-top: 25px;
margin-left: 35px;
}
}
}
}
}
/* 设置持续时间和动画函数 */
}
.rightImg {
position: absolute;
top: 50%;
right: -3%;
}
.leftImg {
position: absolute;
top: 50%;
left: -3%;
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
