Skip to content

huarun-binjiang-ipad / ipad

Go to a project
Commit 5b42825d by liuwange1
Options

xiugai

parent 49d5b67b
Showing with 159 additions and 40 deletions
src/App.vue
...@@ -38,12 +38,12 @@ ...@@ -38,12 +38,12 @@
<div <div
id="alarmBox" id="alarmBox"
class="alarm" class="alarm"
@touchstart.stop.prevent="touchStart" @touchstart.stop="touchStart"
@touchmove.stop.prevent="touchMove" @touchmove.stop="touchMove"
@touchend.stop.prevent="touchEnd" @touchend.stop="touchEnd"
:style="{ top: top }" :style="{ top: top }"
> >
<div class="header">报警信息</div> <div class="header" @click="goup">报警信息</div>
<div class="inner-list"> <div class="inner-list">
<div class="item" v-for="item in 20" :key="item"> <div class="item" v-for="item in 20" :key="item">
<div class="key">监控</div> <div class="key">监控</div>
...@@ -53,6 +53,18 @@ ...@@ -53,6 +53,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="pop" v-if="showPop">
<img
v-if="!showProjectList"
@click="kc1"
src="./assets/image/logo2.png"
alt=""
/>
<div class="poject-list" v-else>
<div class="title1">项目选择</div>
<div class="btn1" @click="kc2">陆家嘴滨江中心</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -65,11 +77,11 @@ export default { ...@@ -65,11 +77,11 @@ export default {
data() { data() {
return { return {
navList: [ navList: [
{ // {
url: require("./assets/image/icon1.png"), // url: require("./assets/image/icon1.png"),
label: "欢迎页", // label: "欢迎页",
routerName: "welcome", // routerName: "welcome",
}, // },
{ {
url: require("./assets/image/icon2.png"), url: require("./assets/image/icon2.png"),
label: "首页", label: "首页",
...@@ -125,20 +137,17 @@ export default { ...@@ -125,20 +137,17 @@ export default {
], ],
activeIndex: 0, activeIndex: 0,
pageY: 0, pageY: 0,
top: "90vh", top: "720px",
startPageY: "",
endPageY: "",
showPop: false,
showProjectList: false,
}; };
}, },
created() { created() {
// this.getBuildListData(); // this.getBuildListData();
}, },
methods: { methods: {
// 点击logo触发开场动画
kc0() {
this.$axios.post("/osc/sendInt", {
arg: 0,
name: "/KC",
});
},
getBuildListData() { getBuildListData() {
this.$axios.get("/building/getBuildingList").then((e) => { this.$axios.get("/building/getBuildingList").then((e) => {
this.$store.commit("setBuildList", e.data); this.$store.commit("setBuildList", e.data);
...@@ -155,25 +164,33 @@ export default { ...@@ -155,25 +164,33 @@ export default {
}, },
navClickHandle(index) { navClickHandle(index) {
this.activeIndex = index; this.activeIndex = index;
if (index == 0) { // if (index == 0) {
// 开场动画 1 // // 开场动画 1
this.$axios.post("/osc/sendInt", { // this.$axios.post("/osc/sendInt", {
arg: 1, // arg: 1,
name: "/KC", // name: "/KC",
// });
// } else {
// // 一级动画
// }
this.$axios
.post("/osc/sendInt", {
arg: 0,
name: "/LY",
})
.then(() => {
this.$axios.post("/osc/sendInt", {
arg: index,
name: "/YJ",
});
}); });
} else {
// 一级动画
this.$axios.post("/osc/sendInt", {
arg: index - 1,
name: "/YJ",
});
}
let routerName = this.navList[index].routerName; let routerName = this.navList[index].routerName;
if (routerName && routerName != this.$route.name) { if (routerName && routerName != this.$route.name) {
this.$router.push({ name: routerName }); this.$router.push({ name: routerName });
} }
}, },
touchStart(e) { touchStart(e) {
this.startPageY = e.targetTouches[0].pageY;
if (this.pageY == 0) { if (this.pageY == 0) {
this.pageY = e.targetTouches[0].pageY; this.pageY = e.targetTouches[0].pageY;
} }
...@@ -181,17 +198,17 @@ export default { ...@@ -181,17 +198,17 @@ export default {
touchMove(e) { touchMove(e) {
let pageY = e.targetTouches[0].pageY; let pageY = e.targetTouches[0].pageY;
this.top = pageY + "px"; this.top = pageY + "px";
this.endPageY = e.targetTouches[0].pageY;
}, },
touchEnd() { touchEnd() {
if (!this.endPageY) return;
if (this.startPageY < 760 && this.startPageY > 730) return;
setTimeout(() => { setTimeout(() => {
let pageY = this.top.replace("px", ""); let pageY = this.top.replace("px", "");
console.log("pageY: ", pageY);
if (pageY <= 690 && pageY >= 540) { if (pageY <= 690 && pageY >= 540) {
console.log(1); // this.top = 620 + "px";
this.top = 620 + "px";
this.moveToS(pageY, 620); this.moveToS(pageY, 620);
} else if (pageY > 690) { } else if (pageY > 690) {
console.log(2);
this.moveToS(pageY, 720); this.moveToS(pageY, 720);
} else if (pageY < 540) { } else if (pageY < 540) {
this.moveToS(pageY, 220); this.moveToS(pageY, 220);
...@@ -200,9 +217,9 @@ export default { ...@@ -200,9 +217,9 @@ export default {
}, },
moveToS(oldTop, newTop) { moveToS(oldTop, newTop) {
let count = 10; let count = 10;
console.log(111);
// 总时长 300ms // 总时长 300ms
// let time1 = time || 300; // let time1 = time || 300;
this.top = oldTop + "px";
let sp = (newTop - oldTop) / count; let sp = (newTop - oldTop) / count;
let timer = setInterval(() => { let timer = setInterval(() => {
this.top = Number(this.top.replace("px", "")) + Number(sp) + "px"; this.top = Number(this.top.replace("px", "")) + Number(sp) + "px";
...@@ -212,6 +229,38 @@ export default { ...@@ -212,6 +229,38 @@ export default {
} }
}, 20); }, 20);
}, },
goup() {
if (this.startPageY < 760 && this.startPageY > 730) {
this.moveToS(695, 220);
}
},
// 点击logo触发开场动画
kc0() {
this.$axios
.post("/osc/sendInt", {
arg: 0,
name: "/KC",
})
.then(() => {
console.log("showPop");
this.showPop = true;
});
},
kc1() {
this.showProjectList = true;
this.$axios.post("/osc/sendInt", {
arg: 1,
name: "/KC",
});
},
kc2() {
this.showPop = false;
this.showProjectList = false;
this.$axios.post("/osc/sendInt", {
arg: 2,
name: "/KC",
});
},
}, },
}; };
</script> </script>
...@@ -382,15 +431,18 @@ export default { ...@@ -382,15 +431,18 @@ export default {
border-radius: 10px; border-radius: 10px;
color: #333; color: #333;
padding: 40px 30px; padding: 40px 30px;
padding-top: 0;
box-sizing: border-box; box-sizing: border-box;
overflow: scroll; overflow: scroll;
.header { .header {
position: absolute; position: static;
top: 10px; height: 40px;
left: 390px; line-height: 40px;
text-align: center;
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
color: #838a99; color: #838a99;
z-index: 9;
} }
.inner-list { .inner-list {
background: #f0f0f6; background: #f0f0f6;
...@@ -416,5 +468,51 @@ export default { ...@@ -416,5 +468,51 @@ export default {
} }
} }
} }
@keyframes scaleDraw {
/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0% {
transform: scale(1); /*开始为原始大小*/
}
50% {
transform: scale(0.96); /*放大1.1倍*/
}
100% {
transform: scale(1);
}
}
.pop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
img {
animation-name: scaleDraw; /*关键帧名称*/
animation-timing-function: ease-in-out; /*动画的速度曲线*/
animation-iteration-count: infinite; /*动画播放的次数*/
animation-duration: 4s; /*动画所花费的时间*/
}
.poject-list {
// background: #fff;
margin-top: -130px;
.title1 {
color: #737780;
font-size: 28px;
text-align: center;
margin-bottom: 40px;
}
.btn1 {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.5);
}
}
}
} }
</style> </style>
src/views/anfang.vue
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
</div> </div>
<div class="bottom"> <div class="bottom">
<div class="title-box"> <div class="title-box">
<div class="title">设备型号</div> <div class="title">设备列表</div>
<div class="style-line"></div> <div class="style-line"></div>
</div> </div>
<div class="option-box"> <div class="option-box">
...@@ -144,6 +144,14 @@ export default { ...@@ -144,6 +144,14 @@ export default {
}, },
created() { created() {
this.init(); this.init();
this.$axios
.get("/smartSecurity/getInspectionLine", { lineId: 1 })
.then((e) => {
console.log(e);
});
this.$axios.get("/smartSecurity/getInspectionLineList").then((e) => {
console.log(e);
});
}, },
methods: { methods: {
init() { init() {
......
src/views/homepage.vue
<template> <template>
<div class="homepage"> <div class="homepage">
<div class="title-box"> <div class="title-box">
<div class="title">展示类型</div> <div class="title">数值更改</div>
<div class="style-line"></div> <div class="style-line"></div>
</div> </div>
<input type="text" class="input-word" placeholder="请输入PM2.5值" />
<div class="submit-box"> <div class="submit-box">
<div class="btn1 active">提交</div>
</div>
<!-- <div class="submit-box">
<div <div
class="btn1" class="btn1"
:class="{ active: index == activeIndex }" :class="{ active: index == activeIndex }"
...@@ -14,7 +18,7 @@ ...@@ -14,7 +18,7 @@
> >
{{ item }} {{ item }}
</div> </div>
</div> </div> -->
</div> </div>
</template> </template>
...@@ -33,6 +37,15 @@ export default { ...@@ -33,6 +37,15 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.homepage { .homepage {
.input-word {
width: 746px;
height: 40px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid #adbad0;
opacity: 0.6;
box-sizing: border-box;
padding-left: 12px;
}
.submit-box { .submit-box {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment