Commit 894d3b8e by liuwange1

测试通信

parent 43bbc9bc
<template>
<div class="home">
<header>
<img src="./assets/image/logo.png" alt="" />
<img @click="kc0" src="./assets/image/logo.png" alt="" />
<p>上海滨江中心IOC大屏控制台</p>
</header>
<main>
......@@ -31,7 +31,7 @@
</div>
</div>
</div>
<div class="right" v-if="showRight">
<div class="right">
<router-view />
</div>
</main>
......@@ -126,36 +126,22 @@ export default {
activeIndex: 0,
pageY: 0,
top: "90vh",
showRight: false,
};
},
created() {
this.getBuildListData();
// 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);
// });
// this.getBuildListData();
},
methods: {
// 点击logo触发开场动画
kc0() {
this.$axios.post("/osc/sendInt", {
arg: 0,
name: "/KC",
});
},
getBuildListData() {
this.$axios.get("/building/getBuildingList").then((e) => {
this.$store.commit("setBuildList", e.data);
this.showRight = true;
});
},
getLeftDistance(index) {
......@@ -169,6 +155,18 @@ export default {
},
navClickHandle(index) {
this.activeIndex = index;
// if (index == 0) {
// // 开场动画 1
// this.$axios.post("/osc/sendInt", {
// arg: 1,
// name: "/KC",
// });
// }
// 一级动画
this.$axios.post("/osc/sendInt", {
arg: index,
name: "/YJ",
});
let routerName = this.navList[index].routerName;
if (routerName && routerName != this.$route.name) {
this.$router.push({ name: routerName });
......
......@@ -5,7 +5,501 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
buildList: []
buildList: [
{
title: '全部楼栋',
id: '0',
child: [
{
title: '全部楼层'
}
]
},
{
title: 'MT',
id: '1',
child: [
{
title: 'B2',
id: '0'
},
{
title: 'LG',
id: '1'
},
{
title: 'G',
id: '2'
},
{
title: 'UG',
id: '3'
},
{
title: '2',
id: '4'
},
{
title: '3',
id: '5'
},
{
title: '5',
id: '6'
},
{
title: '6',
id: '7'
},
{
title: '7',
id: '8'
},
{
title: '8',
id: '9'
},
{
title: '9',
id: '10'
},
{
title: '10',
id: '11'
},
{
title: '11',
id: '12'
},
{
title: '12',
id: '13'
},
{
title: '15',
id: '14'
},
{
title: '16',
id: '15'
},
{
title: '17',
id: '16'
},
{
title: '18',
id: '17'
},
{
title: '19',
id: '18'
},
{
title: '20',
id: '19'
},
{
title: '21',
id: '20'
},
{
title: '22',
id: '21'
},
{
title: '23',
id: '22'
},
{
title: 'RF',
id: '23'
},
]
},
{
title: 'N1',
id: '2',
child: [
{
title: 'B2',
id: '0'
},
{
title: 'LG',
id: '1'
},
{
title: 'G',
id: '2'
},
{
title: '2',
id: '3'
},
{
title: '3',
id: '4'
},
{
title: '5',
id: '5'
},
{
title: '6',
id: '6'
},
{
title: '7',
id: '7'
},
{
title: '8',
id: '8'
},
{
title: '9',
id: '9'
},
{
title: 'RF',
id: '10'
},
]
},
{
title: 'N2',
id: '3',
child: [
{
title: 'B2',
id: '0'
},
{
title: 'LG',
id: '1'
},
{
title: 'G',
id: '2'
},
{
title: '2',
id: '3'
},
{
title: '3',
id: '4'
},
{
title: '5',
id: '5'
},
{
title: '6',
id: '6'
},
{
title: '7',
id: '7'
},
{
title: '8',
id: '8'
},
{
title: '9',
id: '9'
},
{
title: 'RF',
id: '10'
},
]
},
{
title: 'N3',
id: '4',
child: [
{
title: 'B2',
id: '0'
},
{
title: 'LG',
id: '1'
},
{
title: 'G',
id: '2'
},
{
title: '2',
id: '3'
},
{
title: '3',
id: '4'
},
{
title: '5',
id: '5'
},
{
title: '6',
id: '6'
},
{
title: '7',
id: '7'
},
{
title: '8',
id: '8'
},
{
title: '9',
id: '9'
},
{
title: 'RF',
id: '10'
},
]
},
{
title: 'N5',
id: '5',
child: [
{
title: 'B2',
id: '0'
},
{
title: 'LG',
id: '1'
},
{
title: 'G',
id: '2'
},
{
title: '2',
id: '3'
},
{
title: '3',
id: '4'
},
{
title: '5',
id: '5'
},
{
title: '6',
id: '6'
},
{
title: '7',
id: '7'
},
{
title: '8',
id: '8'
},
{
title: '9',
id: '9'
},
{
title: 'RF',
id: '10'
},
]
},
{
title: 'S1',
id: '6',
child: [
{
title: 'B2',
id: '0'
},
{
title: 'LG',
id: '1'
},
{
title: 'G',
id: '2'
},
{
title: '2',
id: '3'
},
{
title: '3',
id: '4'
},
{
title: '5',
id: '5'
},
{
title: '6',
id: '6'
},
{
title: '7',
id: '7'
},
{
title: '8',
id: '8'
},
{
title: '9',
id: '9'
},
{
title: '10',
id: '10'
},
{
title: '11',
id: '11'
},
{
title: 'RF',
id: '12'
},
]
},
{
title: 'S2',
id: '7',
child: [
{
title: 'B2',
id: '0'
},
{
title: 'LG',
id: '1'
},
{
title: 'G',
id: '2'
},
{
title: '2',
id: '3'
},
{
title: '3',
id: '4'
},
{
title: '5',
id: '5'
},
{
title: '6',
id: '6'
},
{
title: '7',
id: '7'
},
{
title: '8',
id: '8'
},
{
title: 'RF',
id: '9'
},
]
},
{
title: 'S3',
id: '8',
child: [
{
title: 'B2',
id: '0'
},
{
title: 'LG',
id: '1'
},
{
title: 'G',
id: '2'
},
{
title: '2',
id: '3'
},
{
title: '3',
id: '4'
},
{
title: '5',
id: '5'
},
{
title: '6',
id: '6'
},
{
title: '7',
id: '7'
},
{
title: '8',
id: '8'
},
{
title: '9',
id: '9'
},
{
title: '10',
id: '10'
},
{
title: '11',
id: '11'
},
{
title: '12',
id: '12'
},
{
title: '15',
id: '13'
},
{
title: '16',
id: '14'
},
{
title: '17',
id: '15'
},
{
title: '18',
id: '16'
},
{
title: '19',
id: '17'
},
]
},
]
},
mutations: {
setBuildList(state, data) {
......
......@@ -6,12 +6,33 @@
</div>
<!-- <input type="text" class="input-word" placeholder="请输入文案" /> -->
<div class="submit-box">
<div class="btn1">陆家嘴滨江中心</div>
<div class="btn1" :class="{ active: active }" @click="clickHandler">
陆家嘴滨江中心
</div>
<!-- <div class="btn1 active">开场</div> -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
active: false,
};
},
methods: {
clickHandler() {
this.active = true;
// 开场动画 2
this.$axios.post("/osc/sendInt", {
arg: 2,
name: "/KC",
});
},
},
};
</script>
<style lang="less" scoped>
.welcome {
......
......@@ -16,7 +16,7 @@
:class="{ active: activeIndex == index }"
@click="buildClickHandle(index)"
>
{{ item.buildingName }}
{{ item.title }}
</div>
</gaojing>
</div>
......@@ -27,10 +27,12 @@
<div class="select-options">
<div
class="btn2"
:class="{ active: activeIndex2 == index }"
v-for="(item, index) in listR"
:key="index + 'a'"
@click="buildClickHandle2(index)"
>
{{ item.name }}
{{ item.title }}
</div>
</div>
</div>
......@@ -42,11 +44,15 @@
<div class="style-line"></div>
</div>
<div class="option-box">
<div class="btn3 active">防火门</div>
<div class="btn3">防火卷帘</div>
<div class="btn3">消防水泵</div>
<div class="btn3">感烟探测器</div>
<div class="btn3">感温探测器</div>
<div
class="btn3"
:class="{ active: optionActiveIndex == index }"
v-for="(item, index) in options"
:key="index + 'b'"
@click="changeOption(index)"
>
{{ item }}
</div>
</div>
</div>
</div>
......@@ -73,6 +79,9 @@ export default {
listL: [],
listR: [],
activeIndex: 0,
activeIndex2: 0,
options: ["防火门", "防火卷帘", "消防水泵", "感烟探测器", "感温探测器"],
optionActiveIndex: 0,
};
},
created() {
......@@ -81,23 +90,38 @@ export default {
methods: {
init() {
let buildList = this.$store.state.buildList;
buildList.unshift({
buildingName: "全部楼栋",
});
this.listL = buildList;
this.listR = this.listL[0].child || [];
},
buildClickHandle(index) {
this.activeIndex = index;
this.$axios.post("/osc/sendInt", {
arg: 1,
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.listR[index].id,
name: "/LC",
});
},
changeOption(index) {
this.optionActiveIndex = index;
this.$axios.post("/osc/sendInt", {
arg: index,
name: "/EZ_XF",
});
},
},
watch: {
activeIndex(n) {
console.log(n);
this.listR = this.listL[n].subList || [];
this.listR = this.listL[n].child || [];
this.activeIndex2 = 0;
},
},
};
......@@ -153,8 +177,10 @@ export default {
}
.option-box {
display: flex;
flex-wrap: wrap;
> div {
margin-right: 12px;
margin-bottom: 10px;
}
}
.bottom {
......
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