Skip to content

huarun-binjiang-ipad / ipad

Go to a project
Commit 83fad1db by liuwange1
Options

zanshi

parent 4675fca8
Showing with 431 additions and 164 deletions
src/App.vue
......@@ -2,7 +2,7 @@
<div class="home">
<header>
<img @click="kc0" src="./assets/image/logo.png" alt="" />
<p>上海滨江中心IOC大屏控制台</p>
<p @click="mockPost">上海滨江中心IOC大屏控制台</p>
</header>
<main>
<div class="left-nav">
......@@ -41,11 +41,18 @@
<img src="./assets/image/close.png" alt="" />
</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
class="item"
:class="{ 'new-alarm': item.isNew }"
v-for="(item, index) in alarmList"
:key="index"
>
<div class="key">{{ item.deviceName }}</div>
<div class="key">{{ item.devicePosition }}</div>
<div class="key">
{{ item.alarmTime.substring(item.alarmTime.length - 9) }}
</div>
<div class="key">{{ item.alarmType }}</div>
</div>
</div>
</div>
......@@ -139,10 +146,12 @@ export default {
showPop: false,
showProjectList: false,
isShowClose: false,
alarmList: [],
};
},
created() {
// this.getBuildListData();
this.initSocket();
},
methods: {
getBuildListData() {
......@@ -230,6 +239,11 @@ export default {
closeHandle() {
this.isShowClose = false;
this.moveToS(190, 695);
// GJTC_MSG_CLOSE
// this.$axios.post("/osc/sendInt", {
// arg: 1,
// name: "/KC",
// });
},
goup() {
if (this.isShowClose) return;
......@@ -265,6 +279,63 @@ export default {
name: "/KC",
});
},
mockPost() {
this.$axios
.post("/ws/sendAlarmMsg", {
alarmLevel: "102",
alarmType: "10004",
content:
"您有一条报警消息。 2021-11-19 03:43:13 2_1区/N1\\A/地上2层/强电 照明回路报警，请尽快处理！",
devCode: "0230102001011701010040047",
id: "MSG-01",
paramJson: "[object Object]",
projectCode: "023",
receivedTime: "2021-11-28 10:40:00",
sender: "mock",
title: "能源报警",
})
.then((e) => {
console.log("e: ", e);
});
},
initSocket() {
const _this = this;
let websocket = null;
if ("WebSocket" in window) {
websocket = new WebSocket("ws://123.56.242.140:8089/ws/pad");
} else {
alert("该浏览器不支持websocket!");
}
websocket.onopen = function (event) {
console.log("建立连接", event);
};
websocket.onclose = function (event) {
console.log("连接关闭", event);
};
websocket.onmessage = function (event) {
console.log("收到消息:" + event.data);
try {
let data = JSON.parse(event.data);
data.data.isNew = true;
_this.alarmList.push(data.data);
_this.goup();
} catch (e) {
console.log(e);
}
//所要执行的操作
};
websocket.onerror = function () {
alert("websocket通信发生错误！");
};
window.onbeforeunload = function () {
websocket.close();
};
},
},
};
</script>
......@@ -280,6 +351,18 @@ body {
}
</style>
<style lang="less" scoped>
@keyframes bganimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
background: #fff;
}
}
.home {
width: 100vw;
height: 100vh;
......@@ -475,17 +558,31 @@ body {
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;
overflow: hidden;
&.new-alarm {
background-image: linear-gradient(125deg, #f44336, #e91e63, #fff);
background-size: 400%;
animation: bganimation 1s;
animation-delay: 0.3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.key {
width: 25%;
font-size: 13px;
font-weight: 400;
color: #838a99;
text-align: center;
&:first-of-type {
width: 30%;
}
&:nth-of-type(3) {
width: 20%;
}
}
}
}
......
src/components/buildList.vue
......@@ -71,6 +71,10 @@ export default {
return;
}
this.activeIndex2 = index;
this.$emit("change", {
ldID: this.listL[this.activeIndex].id,
lcID: this.listR[index].id,
});
this.$axios
.post("/osc/sendInt", {
arg: this.osc,
......
src/views/homepage.vue
<template>
<div class="homepage">
<div class="title-box">
<!-- <div class="title-box">
<div class="title">数值更改</div>
<div class="style-line"></div>
</div>
......@@ -12,7 +12,7 @@
/>
<div class="submit-box">
<div class="btn1 active" @click="setPM">提交</div>
</div>
</div> -->
<!-- <div class="submit-box">
<div
class="btn1"
......
src/views/huanjing.vue
......@@ -6,7 +6,7 @@
<div class="title">模型楼栋楼层控制</div>
<div class="style-line"></div>
</div>
<buildList :osc="osc"></buildList>
<buildList :osc="osc" @change="buildListChange"></buildList>
</div>
<div class="right">
<div class="title-box">
......@@ -21,7 +21,7 @@
:key="index + 'b'"
@click="changeOption(index)"
>
{{ item }}
{{ item.label }}
</div>
</div>
</div>
......@@ -31,9 +31,16 @@
<div class="title">设备列表</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active2">MJ2332</div>
<div class="btn3">MJ2334</div>
<div class="option-box2">
<div
class="btn2"
:class="{ active: activeIndex == index }"
v-for="(item, index) in equipmentList"
@click="equipmentClickHandle(index)"
:key="item.deviceStandCode"
>
{{ item.deviceName }}
</div>
</div>
</div>
</div>
......@@ -47,8 +54,24 @@ export default {
data() {
return {
osc: 16,
options: ["温湿度传感器", "一氧化碳传感器", "二氧化碳传感器"],
optionActiveIndex: 0,
options: [
{
label: "温湿度传感器",
key: "ENV_TEMPERATURE",
},
{
label: "一氧化碳传感器",
key: "ENV_CO",
},
// {
// label: "二氧化碳传感器",
// key: "",
// },
],
optionActiveIndex: -1,
ids: "",
equipmentList: [],
activeIndex: -1,
};
},
methods: {
......@@ -65,6 +88,28 @@ export default {
name: "/EZ_HJ",
});
});
this.getEquipmentList();
},
buildListChange(e) {
this.ids = e;
this.getEquipmentList();
},
getEquipmentList() {
if (this.optionActiveIndex == -1) return;
// 请求设备列表
this.$axios
.get("/deviceInfo/padByTypeBuildFloor", {
buildCode: this.ids.ldID,
floorCode: this.ids.lcID,
deviceType: this.options[this.optionActiveIndex].key,
})
.then((e) => {
this.equipmentList = e.data;
});
},
equipmentClickHandle(index) {
this.activeIndex = index;
},
},
};
......@@ -128,6 +173,23 @@ export default {
padding-left: 8px;
}
}
.option-box2 {
display: flex;
flex-wrap: wrap;
height: 140px;
overflow-y: scroll;
&:after {
content: "";
width: 110px;
display: block;
height: 0;
/*只需要添加父元素的after伪元素中 高度0 ，宽度与item的宽一样*/
}
> div {
margin-right: 12px;
margin-bottom: 10px;
}
}
.bottom {
margin-top: 30px;
}
......
src/views/tingche.vue
<template>
<div class="xiaofang">
<!-- <div class="top">
<div class="top-item left">
<div class="title-box">
<div class="title">模型楼栋楼层控制</div>
<div class="style-line"></div>
</div>
<div class="select-box">
<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>
</div>
</div>
<img class="dir" src="../assets/image/dirright.png" alt="" />
<div class="select-item select-right">
<div class="select-title">楼层</div>
<div class="select-options">
<div class="btn2" v-for="item in 10" :key="item">{{ item }}</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="title-box">
<div class="title">设备分类</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active">闸机</div>
<div class="btn3">监控</div>
</div>
</div>
</div>
<div class="bottom">
<div class="title-box">
<div class="title">设备型号</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active2">MJ2332</div>
<div class="btn3">MJ2334</div>
</div>
</div> -->
<div class="bottom">
<div class="title-box">
<div class="title">车辆查询</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<input type="text" class="input-word" placeholder="请输入文案" />
<div class="btn1 active">查询</div>
<div class="btn1">取消</div>
<input
type="text"
v-model="value"
class="input-word"
placeholder="请输入文案"
/>
<div class="btn1 active" @click="search">查询</div>
<div class="btn1" @click="value = ''">取消</div>
</div>
</div>
<section>
......@@ -63,7 +25,7 @@
<div
class="btn1"
:class="{ active: index == activeIndex }"
@click="activeIndex = index"
@click="LCchange(index)"
v-for="(item, index) in btnList"
:key="index"
>
......@@ -71,7 +33,7 @@
</div>
</div>
</section>
<section>
<!-- <section>
<div class="title-box">
<div class="title">车位列表</div>
<div class="style-line"></div>
......@@ -80,7 +42,7 @@
<div class="btn3 active2">MJ2332</div>
<div class="btn3">MJ2334</div>
</div>
</section>
</section> -->
</div>
</template>
......@@ -89,10 +51,45 @@ export default {
name: "xiaofang",
data() {
return {
value: "",
activeIndex: 0,
btnList: ["LG", "B2"],
};
},
methods: {
search() {
if (!this.value) {
alert("请输入车牌号");
return;
}
this.$axios
.get("/smartParking/getSpaceByPlate", {
plateNum: this.value,
})
.then((res) => {
if (res.code == 0) {
// alert("操作成功");
this.$axios
.post("/osc/sendString", {
arg: JSON.stringify(res.data),
name: "/FXXC_OSC",
})
.then(() => {});
} else {
alert("没有该车辆");
}
});
},
LCchange(index) {
this.activeIndex = index;
this.$axios
.post("/osc/sendInt", {
arg: index,
name: "/LC",
})
.then(() => {});
},
},
};
</script>
......
src/views/tongxing.vue
......@@ -6,7 +6,7 @@
<div class="title">模型楼栋楼层控制</div>
<div class="style-line"></div>
</div>
<buildList :osc="osc"></buildList>
<buildList :osc="osc" @change="buildListChange"></buildList>
</div>
<div class="right">
<div class="title-box">
......@@ -21,7 +21,7 @@
:key="index + 'b'"
@click="changeOption(index)"
>
{{ item }}
{{ item.label }}
</div>
</div>
</div>
......@@ -31,9 +31,16 @@
<div class="title">设备列表</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active2">MJ2332</div>
<div class="btn3">MJ2334</div>
<div class="option-box2">
<div
class="btn2"
:class="{ active: activeIndex == index }"
v-for="(item, index) in equipmentList"
@click="equipmentClickHandle(index)"
:key="item.deviceStandCode"
>
{{ item.deviceName }}
</div>
</div>
</div>
</div>
......@@ -47,8 +54,20 @@ export default {
data() {
return {
osc: 15,
options: ["门禁", "访客闸机"],
optionActiveIndex: 0,
options: [
{
label: "门禁",
key: "ACCESS_CARD_READER",
},
{
label: "访客闸机",
key: "ACCESS_MACHINE",
},
],
optionActiveIndex: -1,
ids: "",
equipmentList: [],
activeIndex: -1,
};
},
created() {},
......@@ -66,6 +85,28 @@ export default {
name: "/EZ_TX",
});
});
// 请求设备列表
this.getEquipmentList();
},
buildListChange(e) {
this.ids = e;
this.getEquipmentList();
},
getEquipmentList() {
// 请求设备列表
this.$axios
.get("/deviceInfo/padByTypeBuildFloor", {
buildCode: this.ids.ldID,
floorCode: this.ids.lcID,
deviceType: this.options[this.optionActiveIndex].key,
})
.then((e) => {
this.equipmentList = e.data;
});
},
equipmentClickHandle(index) {
this.activeIndex = index;
},
},
};
......@@ -121,8 +162,22 @@ export default {
}
.option-box {
display: flex;
flex-wrap: wrap;
> div {
margin-right: 12px;
margin-bottom: 10px;
}
}
.option-box2 {
display: flex;
flex-wrap: wrap;
height: 140px;
overflow-y: scroll;
> div {
margin-right: 12px;
margin-bottom: 10px;
width: 170px;
font-size: 12px;
}
}
.bottom {
......
src/views/xiaofang.vue
......@@ -6,7 +6,7 @@
<div class="title">模型楼栋楼层控制</div>
<div class="style-line"></div>
</div>
<buildList :osc="osc"></buildList>
<buildList :osc="osc" @change="buildListChange"></buildList>
</div>
<div class="right">
<div class="title-box">
......@@ -21,7 +21,7 @@
:key="index + 'b'"
@click="changeOption(index)"
>
{{ item }}
{{ item.label }}
</div>
</div>
</div>
......@@ -31,9 +31,16 @@
<div class="title">设备列表</div>
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active2">MJ2332</div>
<div class="btn3">MJ2334</div>
<div class="option-box2">
<div
class="btn2 ww"
:class="{ active: activeIndex == index }"
v-for="(item, index) in equipmentList"
@click="equipmentClickHandle(index)"
:key="item.deviceStandCode"
>
{{ item.deviceName }}
</div>
</div>
</div>
</div>
......@@ -48,45 +55,47 @@ export default {
data() {
return {
osc: 11,
options: ["防火门", "防火卷帘", "消防水泵", "感烟探测器", "感温探测器"],
optionActiveIndex: 0,
options: [
{
label: "防火门",
key: "FIRE_DOUBLE_DOOR",
},
{
label: "防火卷帘",
key: "FIRE_ROLLER_BLIND",
},
{
label: "消防水泵",
key: "FIRE_HYDRANT_PUMP_UNIT",
},
{
label: "感烟探测器",
key: "FIRE_SMOKE",
},
{
label: "感温探测器",
key: "FIRE_WARM",
},
],
optionActiveIndex: -1,
ids: "",
equipmentList: [],
activeIndex: -1,
};
},
created() {
this.init();
},
methods: {
init() {
let buildList = this.$store.state.buildList;
this.listL = buildList;
this.listR = this.listL[0].child || [];
},
buildClickHandle(index) {
this.activeIndex = index;
this.$axios.post("/osc/sendInt", {
arg: this.listL[index].id,
name: "/LY",
});
},
buildClickHandle2(index) {
if (this.activeIndex == 0 && this.activeIndex2 == 0) {
return;
}
this.activeIndex2 = index;
this.$axios
.post("/osc/sendInt", {
arg: this.osc,
name: "/YJ",
})
.then(() => {
this.$axios.post("/osc/sendInt", {
arg: this.listR[index].id,
name: "/LC",
});
});
init() {},
buildListChange(e) {
this.ids = e;
this.getEquipmentList();
},
changeOption(index) {
this.optionActiveIndex = index;
this.activeIndex = -1;
// osc
this.$axios
.post("/osc/sendInt", {
arg: 10,
......@@ -98,12 +107,25 @@ export default {
name: "/EZ_XF",
});
});
// 请求设备列表
this.getEquipmentList();
},
},
watch: {
activeIndex(n) {
this.listR = this.listL[n].child || [];
this.activeIndex2 = 0;
getEquipmentList() {
if (this.optionActiveIndex == -1) return;
// 请求设备列表
this.$axios
.get("/deviceInfo/padByTypeBuildFloor", {
buildCode: this.ids.ldID,
floorCode: this.ids.lcID,
deviceType: this.options[this.optionActiveIndex].key,
})
.then((e) => {
this.equipmentList = e.data;
});
},
equipmentClickHandle(index) {
this.activeIndex = index;
},
},
};
......@@ -165,6 +187,29 @@ export default {
margin-bottom: 10px;
}
}
.option-box2 {
display: flex;
flex-wrap: wrap;
height: 140px;
overflow-y: scroll;
&:after {
content: "";
width: 150px;
display: block;
height: 0;
/*只需要添加父元素的after伪元素中 高度0 ，宽度与item的宽一样*/
}
> div {
margin-right: 12px;
margin-bottom: 10px;
&.ww {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.bottom {
margin-top: 30px;
}
......
src/views/yunying.vue
......@@ -23,9 +23,9 @@
<div class="style-line"></div>
</div>
<div class="submit-box">
<div class="btn3 active2">JK-021</div>
<div class="btn3">JK-022</div>
<div class="btn3">JK-023</div>
<div class="btn2" v-for="(item, index) in roomList" :key="index">
{{ item.equipmentRoomName }}
</div>
</div>
</section>
<section v-if="activeIndex == 1">
......@@ -41,48 +41,11 @@
<div class="cell">状态</div>
</div>
<div class="tbody">
<div class="tb" v-for="item in 10" :key="item">
<div class="cell">巡检</div>
<div class="cell">B3空调不冷B3空调</div>
<div class="cell">17:00</div>
<div class="cell">待定</div>
</div>
</div>
</div>
</section>
<section v-if="activeIndex == 2">
<div class="title-box">
<div class="title">结构对比</div>
<div class="style-line"></div>
</div>
<div class="select-box">
<div class="select-item select-left">
<div class="select-title">楼栋</div>
<div class="select-options">
<gaojing v-for="(item, index) in listL" :key="index">
<div
class="btn1"
:class="{ active: buildActiveIndex == index }"
@click="buildClickHandle(index)"
>
{{ item.title }}
</div>
</gaojing>
</div>
</div>
<img class="dir" src="../assets/image/dirright.png" alt="" />
<div class="select-item select-right">
<div class="select-title">楼层</div>
<div class="select-options">
<div
class="btn2"
:class="{ active: buildActiveIndex2 == index }"
v-for="(item, index) in listR"
:key="index + 'a'"
@click="buildClickHandle2(index)"
>
{{ item.title }}
</div>
<div class="tb" v-for="item in cellList" :key="item.workOrderId">
<div class="cell">{{ item.workOrderTypeName }}</div>
<div class="cell">{{ item.description }}</div>
<div class="cell">{{ item.workTime }}</div>
<div class="cell">{{ item.taskState }}</div>
</div>
</div>
</div>
......@@ -91,23 +54,25 @@
</template>
<script>
import gaojing from "../components/gaojing.vue";
export default {
name: "yunying",
components: { gaojing },
data() {
return {
activeIndex: 0,
btnList: ["设备房", "工单详情", "结构对比"],
btnList: ["设备房", "工单详情"],
// 设备房，工单详情，暂缺。结构对比就展示楼栋/楼层列表
listL: [],
listR: [],
buildActiveIndex: 0,
buildActiveIndex2: 0,
cellList: [],
roomList: [],
};
},
created() {
this.init();
this.getGD();
this.getSBF();
},
methods: {
init() {
......@@ -115,6 +80,16 @@ export default {
this.listL = buildList;
this.listR = this.listL[0].child || [];
},
getSBF() {
this.$axios.get("/smartOperation/equipmentRoomMonitor").then((e) => {
this.roomList = e.data;
});
},
getGD() {
this.$axios.get("/smartOperation/workOrderList").then((e) => {
this.cellList = e.data;
});
},
buildClickHandle(index) {
this.buildActiveIndex = index;
// this.$axios.post("/osc/sendInt", {
......@@ -171,8 +146,10 @@ export default {
.submit-box {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
> div {
margin-right: 20px;
margin-bottom: 10px;
}
}
.table-box {
......
src/views/zhaoming.vue
......@@ -6,7 +6,7 @@
<div class="title">模型楼栋楼层控制</div>
<div class="style-line"></div>
</div>
<buildList :osc="osc"></buildList>
<buildList :osc="osc" @change="buildListChange"></buildList>
</div>
<div class="right">
<section>
......@@ -26,8 +26,15 @@
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active2">MJ2332</div>
<div class="btn3">MJ2334</div>
<div
class="btn2"
:class="{ active: activeIndex == index }"
v-for="(item, index) in equipmentList"
@click="equipmentClickHandle(index)"
:key="item.deviceStandCode"
>
{{ item.deviceName }}
</div>
</div>
</div>
</div>
......@@ -41,6 +48,8 @@ export default {
data() {
return {
osc: 14,
equipmentList: [],
activeIndex: -1,
};
},
methods: {
......@@ -58,6 +67,21 @@ export default {
});
});
},
equipmentClickHandle(index) {
this.activeIndex = index;
},
buildListChange(e) {
// 请求设备列表
this.$axios
.get("/deviceInfo/padByTypeBuildFloor", {
buildCode: e.ldID,
floorCode: e.lcID,
deviceType: "LIGHT_LOOP",
})
.then((e) => {
this.equipmentList = e.data;
});
},
},
};
</script>
......@@ -115,8 +139,14 @@ export default {
}
.option-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 140px;
overflow-y: scroll;
> div {
margin-right: 12px;
margin-bottom: 10px;
width: 150px;
}
}
.bottom {
......
vue.config.js
......@@ -4,7 +4,7 @@ module.exports = {
// disableHostCheck: true,
proxy: {
'/api': {
target: 'http://123.56.242.140:8088',
target: 'http://123.56.242.140:8089',
changeOrigin: true,
ws: true,
pathRewrite: {
......
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