Skip to content

huarun-binjiang-ipad / ipad

Go to a project
Commit b40b4441 by liuwange1
Options

pd

parent dc2cecee
Showing with 275 additions and 9 deletions
package-lock.json
......@@ -2353,6 +2353,14 @@
"integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
"dev": true
},
"axios": {
"version": "0.21.4",
"resolved": "https://registry.nlark.com/axios/download/axios-0.21.4.tgz",
"integrity": "sha1-xnuQ3AVo5cHPKwuFjEO6KOLtpXU=",
"requires": {
"follow-redirects": "^1.14.0"
}
},
"babel-eslint": {
"version": "10.1.0",
"resolved": "https://registry.nlark.com/babel-eslint/download/babel-eslint-10.1.0.tgz?cache=0&sync_timestamp=1624608034820&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.1.0.tgz",
......@@ -5413,8 +5421,7 @@
"follow-redirects": {
"version": "1.14.2",
"resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.2.tgz?cache=0&sync_timestamp=1629288519293&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.2.tgz",
"integrity": "sha1-zsuCUEfAD15msUL5D+1PUV3seJs=",
"dev": true
"integrity": "sha1-zsuCUEfAD15msUL5D+1PUV3seJs="
},
"for-in": {
"version": "1.0.2",
......
package.json
......@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.4",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
......
public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</body>
</html>
\ No newline at end of file
src/App.vue
......@@ -24,6 +24,10 @@
></div>
</div>
<p>{{ item.label }}</p>
<div class="gaojing" v-if="item.number && item.number > 0">
报警
<span>:{{ item.number }}</span>
</div>
</div>
</div>
</div>
......@@ -31,6 +35,24 @@
<router-view />
</div>
</main>
<div
id="alarmBox"
class="alarm"
@touchstart.stop.prevent="touchStart"
@touchmove.stop.prevent="touchMove"
@touchend.stop.prevent="touchEnd"
:style="{ top: top }"
>
<div class="header">报警信息</div>
<div class="inner-list">
<div class="item" v-for="item in 20" :key="item">
<div class="key">监控</div>
<div class="key">3#12层</div>
<div class="key">12:00</div>
<div class="key">外来人员</div>
</div>
</div>
</div>
</div>
</template>
......@@ -57,6 +79,7 @@ export default {
url: require("./assets/image/icon3.png"),
label: "智慧消防",
routerName: "xiaofang",
number: 2,
},
{
url: require("./assets/image/icon4.png"),
......@@ -72,6 +95,7 @@ export default {
url: require("./assets/image/icon6.png"),
label: "智慧运营",
routerName: "yunying",
number: 5,
},
{
url: require("./assets/image/icon7.png"),
......@@ -100,8 +124,35 @@ export default {
},
],
activeIndex: 0,
pageY: 0,
top: "90vh",
};
},
created() {
this.$axios.get("/smartOperation/workOrderList").then((e) => {
console.log(e);
console.log(JSON.stringify(e.data[0]));
});
// this.$axios.get("/building/getBuildingList").then((e) => {
// console.log(e);
// });
// this.$axios.get("/building/getTreeInfoByType", { type: 1 }).then((e) => {
// console.log(e);
// });
// this.$axios.get("/deviceInfo/getDeviceInfoList").then((e) => {
// console.log(e);
// });
// this.$axios
// .post("/osc/sendString", {
// address: "127.0.0.1",
// arg: "{ket: 'key1', value: 'value1'}",
// name: "/test",
// port: 7000,
// })
// .then((e) => {
// console.log(e);
// });
},
methods: {
getLeftDistance(index) {
if (index <= 2) {
......@@ -119,6 +170,47 @@ export default {
this.$router.push({ name: routerName });
}
},
touchStart(e) {
if (this.pageY == 0) {
this.pageY = e.targetTouches[0].pageY;
}
},
touchMove(e) {
let pageY = e.targetTouches[0].pageY;
this.top = pageY + "px";
},
touchEnd() {
setTimeout(() => {
let pageY = this.top.replace("px", "");
console.log("pageY: ", pageY);
if (pageY <= 690 && pageY >= 540) {
console.log(1);
this.top = 620 + "px";
this.moveToS(pageY, 620);
} else if (pageY > 690) {
console.log(2);
this.moveToS(pageY, 720);
} else if (pageY < 540) {
this.moveToS(pageY, 220);
}
}, 100);
},
moveToS(oldTop, newTop) {
let count = 10;
console.log(111);
// 总时长 300ms
// let time1 = time || 300;
let sp = (newTop - oldTop) / count;
console.log("sp: ", sp);
let timer = setInterval(() => {
console.log(this.top);
this.top = Number(this.top.replace("px", "")) + Number(sp) + "px";
count--;
if (count == 0) {
clearInterval(timer);
}
}, 20);
},
},
};
</script>
......@@ -244,6 +336,20 @@ export default {
}
}
}
.gaojing {
position: absolute;
top: 0px;
right: -5px;
height: 15px;
background: #d1392c;
border-radius: 15px;
text-align: center;
padding: 1px 5px;
font-size: 12px;
line-height: 15px;
font-weight: 400;
color: #ffffff;
}
}
}
.right {
......@@ -260,5 +366,54 @@ export default {
box-sizing: border-box;
}
}
.alarm {
position: fixed;
width: 830px;
height: 500px;
top: 90vh;
right: 40px;
background-color: #f0f0f6;
background: #fff;
border: 1px solid #d0d9e8;
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1),
0px 5px 10px 0px rgba(173, 186, 208, 0.5);
border-radius: 10px;
color: #333;
padding: 40px 30px;
box-sizing: border-box;
overflow: scroll;
.header {
position: absolute;
top: 10px;
left: 390px;
font-size: 15px;
font-weight: 400;
color: #838a99;
}
.inner-list {
background: #f0f0f6;
padding: 10px;
width: 100%;
box-sizing: border-box;
.item {
display: flex;
width: 100%;
height: 45px;
background: #fff;
box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.2);
border-radius: 7px;
line-height: 45px;
margin-bottom: 10px;
.key {
width: 25%;
font-size: 13px;
font-weight: 400;
color: #838a99;
text-align: center;
}
}
}
}
}
</style>
src/components/gaojing.vue 0 → 100644
<template>
<div class="warppar">
<slot></slot>
<div class="gaojing" v-if="number > 0">
{{ type == 1 ? "报警" : "" }}
<span>:2</span>
</div>
</div>
</template>
<script>
export default {
props: {
type: {
type: Number,
default: 1,
},
number: {
type: Number,
default: 0,
},
},
};
</script>
<style lang="less" scoped>
.warppar {
position: relative;
}
.gaojing {
position: absolute;
top: 0px;
right: 5px;
height: 15px;
background: #d1392c;
border-radius: 15px;
text-align: center;
padding: 0 5px;
font-size: 12px;
line-height: 15px;
font-weight: 400;
color: #ffffff;
transform-origin: center;
transform: scale(0.7);
}
</style>
\ No newline at end of file
src/main.js
......@@ -4,7 +4,9 @@ import router from './router'
import store from './store'
import './utils/rem'
import './assets/css/style.css'
import axios from './utils/request'
Vue.prototype.$axios = axios
Vue.config.productionTip = false
new Vue({
......
src/utils/request.js 0 → 100644
// 导入axios
import axios from 'axios';
// 进行一些全局配置
// 公共路由(网络请求地址)
axios.defaults.baseURL = 'http://123.56.242.140:8088';
// 请求响应超时时间
axios.defaults.timeout = 5000;
// 封装自己的get/post方法
export default {
get: function (path = '', data = {}) {
return new Promise(function (resolve, reject) {
axios.get(path, {
params: data
})
.then(function (response) {
// 按需求来，这里我需要的是response.data，所以返回response.data，一般直接返回response
resolve(response.data);
})
.catch(function (error) {
reject(error);
});
});
},
post: function (path = '', data = {}) {
return new Promise(function (resolve, reject) {
axios.post(path, data)
.then(function (response) {
resolve(response.data);
})
.catch(function (error) {
reject(error);
});
});
}
};
\ No newline at end of file
src/views/xiaofang.vue
......@@ -10,7 +10,9 @@
<div class="select-item select-left">
<div class="select-title">楼栋</div>
<div class="select-options">
<div class="btn1" v-for="item in 10" :key="item">{{ item }}</div>
<gaojing v-for="item in 10" :key="item" :number="4">
<div class="btn1">{{ item }}</div>
</gaojing>
</div>
</div>
<img class="dir" src="../assets/image/dirright.png" alt="" />
......@@ -48,8 +50,10 @@
</template>
<script>
import gaojing from "../components/gaojing.vue";
export default {
name: "xiaofang",
components: { gaojing },
data() {
return {};
},
......
vue.config.js 0 → 100644
module.exports = {
publicPath: './'
}
\ No newline at end of file
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