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 @@ ...@@ -2353,6 +2353,14 @@
"integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=", "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
"dev": true "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": { "babel-eslint": {
"version": "10.1.0", "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", "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 @@ ...@@ -5413,8 +5421,7 @@
"follow-redirects": { "follow-redirects": {
"version": "1.14.2", "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", "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=", "integrity": "sha1-zsuCUEfAD15msUL5D+1PUV3seJs="
"dev": true
}, },
"for-in": { "for-in": {
"version": "1.0.2", "version": "1.0.2",
......
package.json
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"axios": "^0.21.4",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
......
public/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title>
</head> <%= htmlWebpackPlugin.options.title %>
<body> </title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<noscript> <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> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>
\ No newline at end of file
src/App.vue
...@@ -24,6 +24,10 @@ ...@@ -24,6 +24,10 @@
></div> ></div>
</div> </div>
<p>{{ item.label }}</p> <p>{{ item.label }}</p>
<div class="gaojing" v-if="item.number && item.number > 0">
报警
<span>:{{ item.number }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -31,6 +35,24 @@ ...@@ -31,6 +35,24 @@
<router-view /> <router-view />
</div> </div>
</main> </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> </div>
</template> </template>
...@@ -57,6 +79,7 @@ export default { ...@@ -57,6 +79,7 @@ export default {
url: require("./assets/image/icon3.png"), url: require("./assets/image/icon3.png"),
label: "智慧消防", label: "智慧消防",
routerName: "xiaofang", routerName: "xiaofang",
number: 2,
}, },
{ {
url: require("./assets/image/icon4.png"), url: require("./assets/image/icon4.png"),
...@@ -72,6 +95,7 @@ export default { ...@@ -72,6 +95,7 @@ export default {
url: require("./assets/image/icon6.png"), url: require("./assets/image/icon6.png"),
label: "智慧运营", label: "智慧运营",
routerName: "yunying", routerName: "yunying",
number: 5,
}, },
{ {
url: require("./assets/image/icon7.png"), url: require("./assets/image/icon7.png"),
...@@ -100,8 +124,35 @@ export default { ...@@ -100,8 +124,35 @@ export default {
}, },
], ],
activeIndex: 0, 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: { methods: {
getLeftDistance(index) { getLeftDistance(index) {
if (index <= 2) { if (index <= 2) {
...@@ -119,6 +170,47 @@ export default { ...@@ -119,6 +170,47 @@ export default {
this.$router.push({ name: routerName }); 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> </script>
...@@ -244,6 +336,20 @@ export default { ...@@ -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 { .right {
...@@ -260,5 +366,54 @@ export default { ...@@ -260,5 +366,54 @@ export default {
box-sizing: border-box; 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> </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' ...@@ -4,7 +4,9 @@ import router from './router'
import store from './store' import store from './store'
import './utils/rem' import './utils/rem'
import './assets/css/style.css' import './assets/css/style.css'
import axios from './utils/request'
Vue.prototype.$axios = axios
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ 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 @@ ...@@ -10,7 +10,9 @@
<div class="select-item select-left"> <div class="select-item select-left">
<div class="select-title">楼栋</div> <div class="select-title">楼栋</div>
<div class="select-options"> <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>
</div> </div>
<img class="dir" src="../assets/image/dirright.png" alt="" /> <img class="dir" src="../assets/image/dirright.png" alt="" />
...@@ -48,8 +50,10 @@ ...@@ -48,8 +50,10 @@
</template> </template>
<script> <script>
import gaojing from "../components/gaojing.vue";
export default { export default {
name: "xiaofang", name: "xiaofang",
components: { gaojing },
data() { data() {
return {}; 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