Commit 62be592c by fengfan

home

parent 419a9626

761 Bytes | W: | H:

917 Bytes | W: | H:

ipadCtr/src/assets/img/icon/0.png
ipadCtr/src/assets/img/icon/0.png
ipadCtr/src/assets/img/icon/0.png
ipadCtr/src/assets/img/icon/0.png
  • 2-up
  • Swipe
  • Onion skin

841 Bytes | W: | H:

747 Bytes | W: | H:

ipadCtr/src/assets/img/icon/1.png
ipadCtr/src/assets/img/icon/1.png
ipadCtr/src/assets/img/icon/1.png
ipadCtr/src/assets/img/icon/1.png
  • 2-up
  • Swipe
  • Onion skin

872 Bytes | W: | H:

600 Bytes | W: | H:

ipadCtr/src/assets/img/icon/2.png
ipadCtr/src/assets/img/icon/2.png
ipadCtr/src/assets/img/icon/2.png
ipadCtr/src/assets/img/icon/2.png
  • 2-up
  • Swipe
  • Onion skin

602 Bytes | W: | H:

554 Bytes | W: | H:

ipadCtr/src/assets/img/icon/3.png
ipadCtr/src/assets/img/icon/3.png
ipadCtr/src/assets/img/icon/3.png
ipadCtr/src/assets/img/icon/3.png
  • 2-up
  • Swipe
  • Onion skin

469 Bytes | W: | H:

808 Bytes | W: | H:

ipadCtr/src/assets/img/icon/4.png
ipadCtr/src/assets/img/icon/4.png
ipadCtr/src/assets/img/icon/4.png
ipadCtr/src/assets/img/icon/4.png
  • 2-up
  • Swipe
  • Onion skin

459 Bytes | W: | H:

578 Bytes | W: | H:

ipadCtr/src/assets/img/icon/5.png
ipadCtr/src/assets/img/icon/5.png
ipadCtr/src/assets/img/icon/5.png
ipadCtr/src/assets/img/icon/5.png
  • 2-up
  • Swipe
  • Onion skin

579 Bytes | W: | H:

518 Bytes | W: | H:

ipadCtr/src/assets/img/icon/6.png
ipadCtr/src/assets/img/icon/6.png
ipadCtr/src/assets/img/icon/6.png
ipadCtr/src/assets/img/icon/6.png
  • 2-up
  • Swipe
  • Onion skin

793 Bytes | W: | H:

652 Bytes | W: | H:

ipadCtr/src/assets/img/icon/7.png
ipadCtr/src/assets/img/icon/7.png
ipadCtr/src/assets/img/icon/7.png
ipadCtr/src/assets/img/icon/7.png
  • 2-up
  • Swipe
  • Onion skin

800 Bytes | W: | H:

725 Bytes | W: | H:

ipadCtr/src/assets/img/icon/8.png
ipadCtr/src/assets/img/icon/8.png
ipadCtr/src/assets/img/icon/8.png
ipadCtr/src/assets/img/icon/8.png
  • 2-up
  • Swipe
  • Onion skin

565 Bytes | W: | H:

628 Bytes | W: | H:

ipadCtr/src/assets/img/icon/9.png
ipadCtr/src/assets/img/icon/9.png
ipadCtr/src/assets/img/icon/9.png
ipadCtr/src/assets/img/icon/9.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -25,16 +25,16 @@ export default { ...@@ -25,16 +25,16 @@ export default {
navList: [ navList: [
{ name: "首页", path: "/home" ,send:'/预警监控'}, { name: "首页", path: "/home" ,send:'/预警监控'},
{ name: "设备/联络人", path: "/equipment" ,send:'/系统监控'}, { name: "设备/联络人", path: "/equipment" ,send:'/系统监控'},
{ name: "中心建设", path: "home" ,send:'/中心建设'}, { name: "中心建设", path: "/center" ,send:'/中心建设'},
{ name: "预警系统", path: "home" ,send:'/预警系统'}, { name: "预警系统", path: "/system" ,send:'/预警系统'},
{ name: "部委信息", path: "/industry" ,send:'/行业聚焦'}, { name: "部委信息", path: "/industry" ,send:'/行业聚焦'},
{ name: "服务效益", path: "/server" ,send:'/服务效益'}, { name: "服务效益", path: "/server" ,send:'/服务效益'},
{ name: "参观场景", path: "home" ,send:'/参观场景'}, { name: "参观场景", path: "/scence" ,send:'/参观场景'},
{ name: "自然灾害", path: "home" ,send:'/自然灾害'}, { name: "自然灾害", path: "/disasters" ,send:'/自然灾害'},
{ name: "事件监控", path: "home" ,send:'/事件监控'}, { name: "事件监控", path: "/event" ,send:'/事件监控'},
{ name: "预警大数据", path: "home" ,send:'/大数据'}, {name:'一带一路',path:'/belt_road',send:'/一带一路'},
{name:'一带一路',path:'home',send:'/一带一路'}, {name:'长江流域',path:'/yangtzeRiver',send:'/长江流域'},
{name:'长江流域',path:'home',send:'/长江流域'}, { name: "预警大数据", path: "/bigdata" ,send:'/大数据'},
] ]
}; };
}, },
...@@ -204,11 +204,10 @@ export default { ...@@ -204,11 +204,10 @@ export default {
} }
.icon10 { .icon10 {
background: url(../assets/img/icon/9.png) no-repeat center; background: url(../assets/img/icon/10.png) no-repeat center;
} }
.icon11 { .icon11 {
background: url(../assets/img/icon/9.png) no-repeat center; background: url(../assets/img/icon/11.png) no-repeat center;
} }
</style> </style>
<template>
<div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div>
</content-box>
</div>
</template>
<script>
import { send } from "@/service/ctrapi";
import contentBox from "../components/contentBox";
import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll";
export default {
components: { contentBox, pageTitle, vuescroll },
data() {
return {
btnlist: [],
titledata: ["24小时", "近一周", "近一月", "近一年"],
msgPathCfg:{
root:'/预警监控',
list1:'/省级',
subtitle:'/时间范围',
},
titleactive: 0,
activearea: {},
subtitle: {},
btnbackshow: false,
ops: {
bar: {
background: "#41c9ff",
keepShow: true
},
rail: {
background: "#3e4a59",
opacity: 0.5
}
}
};
},
mounted() {
this.showP();
},
methods: {
backfn() {
send(`${this.msgPathCfg.root}`, []);
this.showP();
},
showP() {
this.$axios
.get("http://123.56.149.208:8091/external/get/city/all")
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = false;
this.titleactive = 0
this.activearea = this.btnlist[0];
this.subtitle = {};
});
},
showC(item) {
if (this.btnbackshow) {
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
[]
);
} else if (item.name === "全国") {
this.activearea = item;
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
this.$axios
.get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = true;
this.subtitle = item;
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
});
}
},
titleclickfn(i) {
this.titleactive = i;
if (this.btnbackshow && this.activearea == this.subtitle) {
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
} else if (this.activearea.name === "全国") {
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
// send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
}
}
}
};
</script>
<style scoped>
.page {
width: 18.4rem;
height: 13.5rem;
background: url(../assets/img/content.png) no-repeat left top;
background-size: cover;
margin-top: 1.5rem;
margin-left: 2.2rem;
}
.content {
padding-top: 1rem;
padding-left: 1rem;
text-align: left;
}
#scrollbox {
width: 15.5rem;
height: 9rem;
margin-left: 1rem;
margin-top: 0.5rem;
}
.btn {
float: left;
white-space: nowrap;
font-size: 0.3rem;
color: #fff;
text-align: center;
line-height: 0.81rem;
padding: 0 0.1rem;
margin: 0 0.45rem 0.74rem 0;
min-width: 2.59rem;
height: 0.81rem;
background: url(../assets/img/btn-bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.subtitle {
margin: 0.5rem 0 0.5rem 1rem;
color: #fff;
font-size: 0.4rem;
text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
}
.activearea {
font-size: 0.35rem;
}
.activearea::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: -100%;
background: url(../assets/img/btn-light.png) no-repeat;
background-size: 100% 94%;
}
>>> div.title{
background:none;
transform: translateY(-0.2rem);
}
</style>
<template>
<div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div>
</content-box>
</div>
</template>
<script>
import { send } from "@/service/ctrapi";
import contentBox from "../components/contentBox";
import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll";
export default {
components: { contentBox, pageTitle, vuescroll },
data() {
return {
btnlist: [],
titledata: ["24小时", "近一周", "近一月", "近一年"],
msgPathCfg:{
root:'/预警监控',
list1:'/省级',
subtitle:'/时间范围',
},
titleactive: 0,
activearea: {},
subtitle: {},
btnbackshow: false,
ops: {
bar: {
background: "#41c9ff",
keepShow: true
},
rail: {
background: "#3e4a59",
opacity: 0.5
}
}
};
},
mounted() {
this.showP();
},
methods: {
backfn() {
send(`${this.msgPathCfg.root}`, []);
this.showP();
},
showP() {
this.$axios
.get("http://123.56.149.208:8091/external/get/city/all")
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = false;
this.titleactive = 0
this.activearea = this.btnlist[0];
this.subtitle = {};
});
},
showC(item) {
if (this.btnbackshow) {
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
[]
);
} else if (item.name === "全国") {
this.activearea = item;
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
this.$axios
.get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = true;
this.subtitle = item;
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
});
}
},
titleclickfn(i) {
this.titleactive = i;
if (this.btnbackshow && this.activearea == this.subtitle) {
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
} else if (this.activearea.name === "全国") {
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
// send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
}
}
}
};
</script>
<style scoped>
.page {
width: 18.4rem;
height: 13.5rem;
background: url(../assets/img/content.png) no-repeat left top;
background-size: cover;
margin-top: 1.5rem;
margin-left: 2.2rem;
}
.content {
padding-top: 1rem;
padding-left: 1rem;
text-align: left;
}
#scrollbox {
width: 15.5rem;
height: 9rem;
margin-left: 1rem;
margin-top: 0.5rem;
}
.btn {
float: left;
white-space: nowrap;
font-size: 0.3rem;
color: #fff;
text-align: center;
line-height: 0.81rem;
padding: 0 0.1rem;
margin: 0 0.45rem 0.74rem 0;
min-width: 2.59rem;
height: 0.81rem;
background: url(../assets/img/btn-bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.subtitle {
margin: 0.5rem 0 0.5rem 1rem;
color: #fff;
font-size: 0.4rem;
text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
}
.activearea {
font-size: 0.35rem;
}
.activearea::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: -100%;
background: url(../assets/img/btn-light.png) no-repeat;
background-size: 100% 94%;
}
>>> div.title{
background:none;
transform: translateY(-0.2rem);
}
</style>
<template>
<div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div>
</content-box>
</div>
</template>
<script>
import { send } from "@/service/ctrapi";
import contentBox from "../components/contentBox";
import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll";
export default {
components: { contentBox, pageTitle, vuescroll },
data() {
return {
btnlist: [],
titledata: ["24小时", "近一周", "近一月", "近一年"],
msgPathCfg:{
root:'/预警监控',
list1:'/省级',
subtitle:'/时间范围',
},
titleactive: 0,
activearea: {},
subtitle: {},
btnbackshow: false,
ops: {
bar: {
background: "#41c9ff",
keepShow: true
},
rail: {
background: "#3e4a59",
opacity: 0.5
}
}
};
},
mounted() {
this.showP();
},
methods: {
backfn() {
send(`${this.msgPathCfg.root}`, []);
this.showP();
},
showP() {
this.$axios
.get("http://123.56.149.208:8091/external/get/city/all")
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = false;
this.titleactive = 0
this.activearea = this.btnlist[0];
this.subtitle = {};
});
},
showC(item) {
if (this.btnbackshow) {
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
[]
);
} else if (item.name === "全国") {
this.activearea = item;
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
this.$axios
.get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = true;
this.subtitle = item;
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
});
}
},
titleclickfn(i) {
this.titleactive = i;
if (this.btnbackshow && this.activearea == this.subtitle) {
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
} else if (this.activearea.name === "全国") {
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
// send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
}
}
}
};
</script>
<style scoped>
.page {
width: 18.4rem;
height: 13.5rem;
background: url(../assets/img/content.png) no-repeat left top;
background-size: cover;
margin-top: 1.5rem;
margin-left: 2.2rem;
}
.content {
padding-top: 1rem;
padding-left: 1rem;
text-align: left;
}
#scrollbox {
width: 15.5rem;
height: 9rem;
margin-left: 1rem;
margin-top: 0.5rem;
}
.btn {
float: left;
white-space: nowrap;
font-size: 0.3rem;
color: #fff;
text-align: center;
line-height: 0.81rem;
padding: 0 0.1rem;
margin: 0 0.45rem 0.74rem 0;
min-width: 2.59rem;
height: 0.81rem;
background: url(../assets/img/btn-bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.subtitle {
margin: 0.5rem 0 0.5rem 1rem;
color: #fff;
font-size: 0.4rem;
text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
}
.activearea {
font-size: 0.35rem;
}
.activearea::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: -100%;
background: url(../assets/img/btn-light.png) no-repeat;
background-size: 100% 94%;
}
>>> div.title{
background:none;
transform: translateY(-0.2rem);
}
</style>
<template>
<div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div>
</content-box>
</div>
</template>
<script>
import { send } from "@/service/ctrapi";
import contentBox from "../components/contentBox";
import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll";
export default {
components: { contentBox, pageTitle, vuescroll },
data() {
return {
btnlist: [],
titledata: ["24小时", "近一周", "近一月", "近一年"],
msgPathCfg:{
root:'/预警监控',
list1:'/省级',
subtitle:'/时间范围',
},
titleactive: 0,
activearea: {},
subtitle: {},
btnbackshow: false,
ops: {
bar: {
background: "#41c9ff",
keepShow: true
},
rail: {
background: "#3e4a59",
opacity: 0.5
}
}
};
},
mounted() {
this.showP();
},
methods: {
backfn() {
send(`${this.msgPathCfg.root}`, []);
this.showP();
},
showP() {
this.$axios
.get("http://123.56.149.208:8091/external/get/city/all")
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = false;
this.titleactive = 0
this.activearea = this.btnlist[0];
this.subtitle = {};
});
},
showC(item) {
if (this.btnbackshow) {
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
[]
);
} else if (item.name === "全国") {
this.activearea = item;
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
this.$axios
.get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = true;
this.subtitle = item;
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
});
}
},
titleclickfn(i) {
this.titleactive = i;
if (this.btnbackshow && this.activearea == this.subtitle) {
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
} else if (this.activearea.name === "全国") {
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
// send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
}
}
}
};
</script>
<style scoped>
.page {
width: 18.4rem;
height: 13.5rem;
background: url(../assets/img/content.png) no-repeat left top;
background-size: cover;
margin-top: 1.5rem;
margin-left: 2.2rem;
}
.content {
padding-top: 1rem;
padding-left: 1rem;
text-align: left;
}
#scrollbox {
width: 15.5rem;
height: 9rem;
margin-left: 1rem;
margin-top: 0.5rem;
}
.btn {
float: left;
white-space: nowrap;
font-size: 0.3rem;
color: #fff;
text-align: center;
line-height: 0.81rem;
padding: 0 0.1rem;
margin: 0 0.45rem 0.74rem 0;
min-width: 2.59rem;
height: 0.81rem;
background: url(../assets/img/btn-bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.subtitle {
margin: 0.5rem 0 0.5rem 1rem;
color: #fff;
font-size: 0.4rem;
text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
}
.activearea {
font-size: 0.35rem;
}
.activearea::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: -100%;
background: url(../assets/img/btn-light.png) no-repeat;
background-size: 100% 94%;
}
>>> div.title{
background:none;
transform: translateY(-0.2rem);
}
</style>
<template> <template>
<div class="page"> <eq />
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<page-title
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
<div class="subtitle" v-if="btnbackshow">{{subtitle.name}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
</div>
</content-box>
</div>
</template> </template>
<script> <script>
import contentBox from "../components/contentBox"; import home from "./home";
import pageTitle from "../components/pageTitle"; import Vue from "vue";
import vuescroll from "vuescroll"; var myMixin = {
export default {
components: { contentBox, pageTitle, vuescroll },
data() { data() {
return { return {
btnlist: [], btnlist: [],
titledata: ["网络连接", "大喇叭", "显示屏", "北斗", "联络人"], titledata: ["网络连接", "联络人", "北斗", "显示屏", "大喇叭"],
msgPathCfg:{
root:'/系统监控',
list1:'/省级',
subtitle:'/设备',
},
titleactive: 0, titleactive: 0,
activearea:{}, activearea: {},
subtitle:{}, subtitle: {},
btnbackshow: false, btnbackshow: false,
ops: { ops: {
bar: { bar: {
background: '#41c9ff', background: "#41c9ff",
keepShow:true keepShow: true
}, },
rail: { rail: {
background: '#3e4a59', background: "#3e4a59",
opacity: 0.5, opacity: 0.5
}
} }
};
},
mounted() {
this.showP();
},
methods: {
backfn() {
this.showP();
},
showP() {
this.$axios
.get("http://123.56.149.208:8091/external/get/city/all")
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = false;
this.activearea = {}
this.subtitle = {}
});
},
showC(item) {
if(this.btnbackshow){
this.activearea = item
}else{
this.$axios
.get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = true;
this.subtitle= item;
this.activearea = item;
})
} }
}, };
titleclickfn(i) {
this.titleactive = i;
}
} }
}; };
</script> var eq = Vue.extend(home).extend({
mixins: [myMixin],
})
<style scoped> export default {
.page { components: { eq }
width: 18.4rem; };
height: 13.5rem; </script>
background: url(../assets/img/content.png) no-repeat left top;
background-size: cover;
margin-top: 1.5rem;
margin-left: 2.2rem;
}
.content {
padding-top: 1rem;
padding-left: 1rem;
text-align: left;
}
#scrollbox {
width: 15.5rem;
height: 9rem;
margin-left: 1rem;
margin-top: 0.5rem;
}
.btn {
float: left;
white-space: nowrap;
font-size: 0.3rem;
color: #fff;
text-align: center;
line-height: 0.81rem;
/* letter-spacing: 0.07rem; */
padding: 0 0.1rem;
margin: 0 0.45rem 0.74rem 0;
min-width: 2.59rem;
height: 0.81rem;
background: url(../assets/img/btn-bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
/* transition: .3s; */
}
.subtitle {
margin: 0.5rem 0 0.5rem 1rem;
color: #fff;
font-size: 0.4rem;
text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
}
.activearea{
font-size: 0.35rem;
}
.activearea::after{
content:'';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: -100%;
background: url(../assets/img/btn-light.png) no-repeat;
background-size: 100% 94%;
}
</style>
<template>
<div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div>
</content-box>
</div>
</template>
<script>
import { send } from "@/service/ctrapi";
import contentBox from "../components/contentBox";
import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll";
export default {
components: { contentBox, pageTitle, vuescroll },
data() {
return {
btnlist: [],
titledata: ["24小时", "近一周", "近一月", "近一年"],
msgPathCfg:{
root:'/预警监控',
list1:'/省级',
subtitle:'/时间范围',
},
titleactive: 0,
activearea: {},
subtitle: {},
btnbackshow: false,
ops: {
bar: {
background: "#41c9ff",
keepShow: true
},
rail: {
background: "#3e4a59",
opacity: 0.5
}
}
};
},
mounted() {
this.showP();
},
methods: {
backfn() {
send(`${this.msgPathCfg.root}`, []);
this.showP();
},
showP() {
this.$axios
.get("http://123.56.149.208:8091/external/get/city/all")
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = false;
this.titleactive = 0
this.activearea = this.btnlist[0];
this.subtitle = {};
});
},
showC(item) {
if (this.btnbackshow) {
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
[]
);
} else if (item.name === "全国") {
this.activearea = item;
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
this.$axios
.get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = true;
this.subtitle = item;
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
});
}
},
titleclickfn(i) {
this.titleactive = i;
if (this.btnbackshow && this.activearea == this.subtitle) {
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
} else if (this.activearea.name === "全国") {
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
// send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
}
}
}
};
</script>
<style scoped>
.page {
width: 18.4rem;
height: 13.5rem;
background: url(../assets/img/content.png) no-repeat left top;
background-size: cover;
margin-top: 1.5rem;
margin-left: 2.2rem;
}
.content {
padding-top: 1rem;
padding-left: 1rem;
text-align: left;
}
#scrollbox {
width: 15.5rem;
height: 9rem;
margin-left: 1rem;
margin-top: 0.5rem;
}
.btn {
float: left;
white-space: nowrap;
font-size: 0.3rem;
color: #fff;
text-align: center;
line-height: 0.81rem;
padding: 0 0.1rem;
margin: 0 0.45rem 0.74rem 0;
min-width: 2.59rem;
height: 0.81rem;
background: url(../assets/img/btn-bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.subtitle {
margin: 0.5rem 0 0.5rem 1rem;
color: #fff;
font-size: 0.4rem;
text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
}
.activearea {
font-size: 0.35rem;
}
.activearea::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: -100%;
background: url(../assets/img/btn-light.png) no-repeat;
background-size: 100% 94%;
}
>>> div.title{
background:none;
transform: translateY(-0.2rem);
}
</style>
...@@ -2,13 +2,8 @@ ...@@ -2,13 +2,8 @@
<div class="page"> <div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn"> <content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content"> <div class="content">
<page-title
class="titlePosition" <div class="subtitle">{{subtitle.name||'全国'}} :</div>
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
<div class="subtitle" v-if="btnbackshow">{{subtitle.name}} :</div>
<div id="scrollbox"> <div id="scrollbox">
<vuescroll :ops="ops"> <vuescroll :ops="ops">
<div <div
...@@ -20,6 +15,12 @@ ...@@ -20,6 +15,12 @@
>{{item.name}}</div> >{{item.name}}</div>
</vuescroll> </vuescroll>
</div> </div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div> </div>
</content-box> </content-box>
</div> </div>
...@@ -36,20 +37,25 @@ export default { ...@@ -36,20 +37,25 @@ export default {
return { return {
btnlist: [], btnlist: [],
titledata: ["24小时", "近一周", "近一月", "近一年"], titledata: ["24小时", "近一周", "近一月", "近一年"],
msgPathCfg:{
root:'/预警监控',
list1:'/省级',
subtitle:'/时间范围',
},
titleactive: 0, titleactive: 0,
activearea:{}, activearea: {},
subtitle:{}, subtitle: {},
btnbackshow: false, btnbackshow: false,
ops: { ops: {
bar: { bar: {
background: '#41c9ff', background: "#41c9ff",
keepShow:true keepShow: true
}, },
rail: { rail: {
background: '#3e4a59', background: "#3e4a59",
opacity: 0.5, opacity: 0.5
}
} }
}
}; };
}, },
mounted() { mounted() {
...@@ -57,7 +63,7 @@ export default { ...@@ -57,7 +63,7 @@ export default {
}, },
methods: { methods: {
backfn() { backfn() {
send( `/预警监控`, []); send(`${this.msgPathCfg.root}`, []);
this.showP(); this.showP();
}, },
showP() { showP() {
...@@ -66,39 +72,49 @@ export default { ...@@ -66,39 +72,49 @@ export default {
.then(val => { .then(val => {
this.btnlist = val.data.data; this.btnlist = val.data.data;
this.btnbackshow = false; this.btnbackshow = false;
this.activearea = this.btnlist[0] this.titleactive = 0
this.subtitle = {} this.activearea = this.btnlist[0];
this.subtitle = {};
}); });
}, },
showC(item) { showC(item) {
if(this.btnbackshow){ if (this.btnbackshow) {
this.activearea = item this.activearea = item;
send( `/预警监控/省级/${this.subtitle.name}/H5/${this.activearea.name}`, []); send(
}else if(item.name === '全国'){ `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
this.activearea = item []
send( `/预警监控/时间范围/${this.titleactive}`, []); );
}else{ } else if (item.name === "全国") {
this.activearea = item;
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
this.$axios this.$axios
.get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`) .get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
.then(val => { .then(val => {
this.btnlist = val.data.data; this.btnlist = val.data.data;
this.btnbackshow = true; this.btnbackshow = true;
this.subtitle= item; this.subtitle = item;
this.activearea = item; this.activearea = item;
send( `/预警监控/${this.subtitle.name}/${this.titleactive}`, []); send(
}) `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
});
} }
}, },
titleclickfn(i) { titleclickfn(i) {
this.titleactive = i; this.titleactive = i;
if(this.btnbackshow && this.activearea == this.subtitle){ if (this.btnbackshow && this.activearea == this.subtitle) {
send( `/预警监控/省级/${this.subtitle.name}/时间范围/${this.titleactive}`, []); send(
}else if(this.activearea.name === '全国'){ `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
send( `/预警监控/时间范围/${this.titleactive}`, []); []
}else{ );
// send( `/预警监控/省级/${this.subtitle.name}/时间范围/${this.titleactive}`, []); } else if (this.activearea.name === "全国") {
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
// send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} }
}, }
} }
}; };
</script> </script>
...@@ -130,7 +146,6 @@ export default { ...@@ -130,7 +146,6 @@ export default {
color: #fff; color: #fff;
text-align: center; text-align: center;
line-height: 0.81rem; line-height: 0.81rem;
/* letter-spacing: 0.07rem; */
padding: 0 0.1rem; padding: 0 0.1rem;
margin: 0 0.45rem 0.74rem 0; margin: 0 0.45rem 0.74rem 0;
min-width: 2.59rem; min-width: 2.59rem;
...@@ -138,7 +153,6 @@ export default { ...@@ -138,7 +153,6 @@ export default {
background: url(../assets/img/btn-bg.png) no-repeat; background: url(../assets/img/btn-bg.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
/* transition: .3s; */
} }
.subtitle { .subtitle {
margin: 0.5rem 0 0.5rem 1rem; margin: 0.5rem 0 0.5rem 1rem;
...@@ -149,11 +163,11 @@ export default { ...@@ -149,11 +163,11 @@ export default {
0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3), 0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3); 0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
} }
.activearea{ .activearea {
font-size: 0.35rem; font-size: 0.35rem;
} }
.activearea::after{ .activearea::after {
content:''; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
...@@ -162,4 +176,8 @@ export default { ...@@ -162,4 +176,8 @@ export default {
background: url(../assets/img/btn-light.png) no-repeat; background: url(../assets/img/btn-light.png) no-repeat;
background-size: 100% 94%; background-size: 100% 94%;
} }
>>> div.title{
background:none;
transform: translateY(-0.2rem);
}
</style> </style>
<template>
<div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div>
</content-box>
</div>
</template>
<script>
import { send } from "@/service/ctrapi";
import contentBox from "../components/contentBox";
import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll";
export default {
components: { contentBox, pageTitle, vuescroll },
data() {
return {
btnlist: [],
titledata: ["24小时", "近一周", "近一月", "近一年"],
msgPathCfg:{
root:'/预警监控',
list1:'/省级',
subtitle:'/时间范围',
},
titleactive: 0,
activearea: {},
subtitle: {},
btnbackshow: false,
ops: {
bar: {
background: "#41c9ff",
keepShow: true
},
rail: {
background: "#3e4a59",
opacity: 0.5
}
}
};
},
mounted() {
this.showP();
},
methods: {
backfn() {
send(`${this.msgPathCfg.root}`, []);
this.showP();
},
showP() {
this.$axios
.get("http://123.56.149.208:8091/external/get/city/all")
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = false;
this.titleactive = 0
this.activearea = this.btnlist[0];
this.subtitle = {};
});
},
showC(item) {
if (this.btnbackshow) {
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
[]
);
} else if (item.name === "全国") {
this.activearea = item;
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
this.$axios
.get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = true;
this.subtitle = item;
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
});
}
},
titleclickfn(i) {
this.titleactive = i;
if (this.btnbackshow && this.activearea == this.subtitle) {
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
} else if (this.activearea.name === "全国") {
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
// send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
}
}
}
};
</script>
<style scoped>
.page {
width: 18.4rem;
height: 13.5rem;
background: url(../assets/img/content.png) no-repeat left top;
background-size: cover;
margin-top: 1.5rem;
margin-left: 2.2rem;
}
.content {
padding-top: 1rem;
padding-left: 1rem;
text-align: left;
}
#scrollbox {
width: 15.5rem;
height: 9rem;
margin-left: 1rem;
margin-top: 0.5rem;
}
.btn {
float: left;
white-space: nowrap;
font-size: 0.3rem;
color: #fff;
text-align: center;
line-height: 0.81rem;
padding: 0 0.1rem;
margin: 0 0.45rem 0.74rem 0;
min-width: 2.59rem;
height: 0.81rem;
background: url(../assets/img/btn-bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.subtitle {
margin: 0.5rem 0 0.5rem 1rem;
color: #fff;
font-size: 0.4rem;
text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
}
.activearea {
font-size: 0.35rem;
}
.activearea::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: -100%;
background: url(../assets/img/btn-light.png) no-repeat;
background-size: 100% 94%;
}
>>> div.title{
background:none;
transform: translateY(-0.2rem);
}
</style>
<template>
<div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div>
</content-box>
</div>
</template>
<script>
import { send } from "@/service/ctrapi";
import contentBox from "../components/contentBox";
import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll";
export default {
components: { contentBox, pageTitle, vuescroll },
data() {
return {
btnlist: [],
titledata: ["24小时", "近一周", "近一月", "近一年"],
msgPathCfg:{
root:'/预警监控',
list1:'/省级',
subtitle:'/时间范围',
},
titleactive: 0,
activearea: {},
subtitle: {},
btnbackshow: false,
ops: {
bar: {
background: "#41c9ff",
keepShow: true
},
rail: {
background: "#3e4a59",
opacity: 0.5
}
}
};
},
mounted() {
this.showP();
},
methods: {
backfn() {
send(`${this.msgPathCfg.root}`, []);
this.showP();
},
showP() {
this.$axios
.get("http://123.56.149.208:8091/external/get/city/all")
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = false;
this.titleactive = 0
this.activearea = this.btnlist[0];
this.subtitle = {};
});
},
showC(item) {
if (this.btnbackshow) {
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
[]
);
} else if (item.name === "全国") {
this.activearea = item;
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
this.$axios
.get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = true;
this.subtitle = item;
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
});
}
},
titleclickfn(i) {
this.titleactive = i;
if (this.btnbackshow && this.activearea == this.subtitle) {
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
} else if (this.activearea.name === "全国") {
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
// send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
}
}
}
};
</script>
<style scoped>
.page {
width: 18.4rem;
height: 13.5rem;
background: url(../assets/img/content.png) no-repeat left top;
background-size: cover;
margin-top: 1.5rem;
margin-left: 2.2rem;
}
.content {
padding-top: 1rem;
padding-left: 1rem;
text-align: left;
}
#scrollbox {
width: 15.5rem;
height: 9rem;
margin-left: 1rem;
margin-top: 0.5rem;
}
.btn {
float: left;
white-space: nowrap;
font-size: 0.3rem;
color: #fff;
text-align: center;
line-height: 0.81rem;
padding: 0 0.1rem;
margin: 0 0.45rem 0.74rem 0;
min-width: 2.59rem;
height: 0.81rem;
background: url(../assets/img/btn-bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.subtitle {
margin: 0.5rem 0 0.5rem 1rem;
color: #fff;
font-size: 0.4rem;
text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
}
.activearea {
font-size: 0.35rem;
}
.activearea::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: -100%;
background: url(../assets/img/btn-light.png) no-repeat;
background-size: 100% 94%;
}
>>> div.title{
background:none;
transform: translateY(-0.2rem);
}
</style>
<template>
<div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.code == item.code}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
<page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
class="titlePosition"
:titledata="titledata"
:titleactive="titleactive"
@titleclick="titleclickfn"
/>
</div>
</content-box>
</div>
</template>
<script>
import { send } from "@/service/ctrapi";
import contentBox from "../components/contentBox";
import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll";
export default {
components: { contentBox, pageTitle, vuescroll },
data() {
return {
btnlist: [],
titledata: ["24小时", "近一周", "近一月", "近一年"],
msgPathCfg:{
root:'/预警监控',
list1:'/省级',
subtitle:'/时间范围',
},
titleactive: 0,
activearea: {},
subtitle: {},
btnbackshow: false,
ops: {
bar: {
background: "#41c9ff",
keepShow: true
},
rail: {
background: "#3e4a59",
opacity: 0.5
}
}
};
},
mounted() {
this.showP();
},
methods: {
backfn() {
send(`${this.msgPathCfg.root}`, []);
this.showP();
},
showP() {
this.$axios
.get("http://123.56.149.208:8091/external/get/city/all")
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = false;
this.titleactive = 0
this.activearea = this.btnlist[0];
this.subtitle = {};
});
},
showC(item) {
if (this.btnbackshow) {
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
[]
);
} else if (item.name === "全国") {
this.activearea = item;
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
this.$axios
.get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
.then(val => {
this.btnlist = val.data.data;
this.btnbackshow = true;
this.subtitle = item;
this.activearea = item;
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
});
}
},
titleclickfn(i) {
this.titleactive = i;
if (this.btnbackshow && this.activearea == this.subtitle) {
send(
`${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
[]
);
} else if (this.activearea.name === "全国") {
send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
} else {
// send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
}
}
}
};
</script>
<style scoped>
.page {
width: 18.4rem;
height: 13.5rem;
background: url(../assets/img/content.png) no-repeat left top;
background-size: cover;
margin-top: 1.5rem;
margin-left: 2.2rem;
}
.content {
padding-top: 1rem;
padding-left: 1rem;
text-align: left;
}
#scrollbox {
width: 15.5rem;
height: 9rem;
margin-left: 1rem;
margin-top: 0.5rem;
}
.btn {
float: left;
white-space: nowrap;
font-size: 0.3rem;
color: #fff;
text-align: center;
line-height: 0.81rem;
padding: 0 0.1rem;
margin: 0 0.45rem 0.74rem 0;
min-width: 2.59rem;
height: 0.81rem;
background: url(../assets/img/btn-bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.subtitle {
margin: 0.5rem 0 0.5rem 1rem;
color: #fff;
font-size: 0.4rem;
text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
}
.activearea {
font-size: 0.35rem;
}
.activearea::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: -100%;
background: url(../assets/img/btn-light.png) no-repeat;
background-size: 100% 94%;
}
>>> div.title{
background:none;
transform: translateY(-0.2rem);
}
</style>
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import home from '@/pages/home'
import welcome from '@/pages/welcome' import welcome from '@/pages/welcome'
import home from '@/pages/home'
import equipment from '@/pages/equipment' import equipment from '@/pages/equipment'
import industry from '@/pages/industry' import industry from '@/pages/industry'
import server from '@/pages/server' import server from '@/pages/server'
import belt_road from '@/pages/belt_road'
import bigdata from '@/pages/bigdata'
import center from '@/pages/center'
import disasters from '@/pages/disasters'
import event from '@/pages/event'
import scence from '@/pages/scence'
import system from '@/pages/system'
import yangtzeRiver from '@/pages/yangtzeRiver'
Vue.use(Router) Vue.use(Router)
{/* <li> <NavLink to="/home" activeClassName="active"> <span className="icon"></span>首页 </NavLink></li> // {}
<li> <NavLink to="/equipment" activeClassName="active"><span className="icon"></span>设备/联络人 </NavLink></li>
<li> <NavLink to="/informationCenter" activeClassName="active"><span className="icon"></span>中心建设 </NavLink></li>
<li> <NavLink to="/WarmingCenter" activeClassName="active"><span className="icon"></span>预警系统 </NavLink></li>
<li> <NavLink to="/informationCenter" activeClassName="active"><span className="icon"></span>部委信息 </NavLink></li>
<li> <NavLink to="/introductionWarning" activeClassName="active"><span className="icon"></span>服务效益 </NavLink></li>
<li> <NavLink to="/VisitingScene" activeClassName="active"><span className="icon"></span>参观场景 </NavLink></li>
<li> <NavLink to="/ue4" activeClassName="active"><span className="icon"></span>自然灾害 </NavLink></li>
<li> <NavLink to="/eventMonitor" activeClassName="active"><span className="icon"></span>事件监控 </NavLink></li> */}
export default new Router({ export default new Router({
routes: [ routes: [
{ {
...@@ -39,39 +41,51 @@ export default new Router({ ...@@ -39,39 +41,51 @@ export default new Router({
component: industry component: industry
}, },
{ {
path: '/belt_road',
name: 'belt_road',
component: belt_road
},
{
path: '/bigdata',
name: 'bigdata',
component: bigdata
},
{
path: '/center',
name: 'center',
component: center
},
{
path: '/disasters',
name: 'disasters',
component: disasters
},
{
path: '/event',
name: 'event',
component: event
},
{
path: '/scence',
name: 'scence',
component: scence
},
{
path: '/system',
name: 'system',
component: system
},
{
path: '/yangtzeRiver',
name: 'yangtzeRiver',
component: yangtzeRiver
},
{
path: '/server', path: '/server',
name: 'server', name: 'server',
component: server component: server
}, },
// {
// path: '/equipment',
// name: 'equipment',
// component: home
// },
// {
// path: '/equipment',
// name: 'equipment',
// component: home
// },
// {
// path: '/equipment',
// name: 'equipment',
// component: home
// },
// {
// path: '/equipment',
// name: 'equipment',
// component: home
// },
// {
// path: '/equipment',
// name: 'equipment',
// component: home
// },
// {
// path: '/equipment',
// name: 'equipment',
// component: home
// },
] ]
}) })
from flask import Flask, request, jsonify, make_response
from flask_cors import CORS
from utils_log import handler
import random
import socket
import os
import argparse
import json
import logging
from pythonosc import osc_message_builder
from pythonosc import udp_client
# localIP = socket.gethostbyname(socket.gethostname()) # 得到本地ip
localIP = '0.0.0.0'
app = Flask(__name__)
CORS(app, supports_credentials=True)
app.logger.addHandler(handler)
books = [
dict(id=1, isdn=random.randrange(1, 1000), title='a python book', author=dict(
name='l0set', city='hunan'
)),
dict(id=2, isdn=random.randrange(1, 1000), title='a golang book', author=dict(
name='zwhset', city='beijing'
))
]
def getBigUnicode(str):
b = bytes(str,'utf-8').decode().encode('utf-16be')
arr = [[0]*(4+len(b))][0]
arr[0] = 66
arr[1] = 69
arr[2] = 85
arr[3] = 67
for index in range(len(b)):
arr[index+4] = b[index]
return bytes(arr)
def sendMessage(path, message):
parser = argparse.ArgumentParser()
parser.add_argument("--ip", default="127.0.0.1",
help="The ip of the OSC server")
parser.add_argument("--port", type=int, default=7001,
help="The port the OSC server is listening on")
args = parser.parse_args()
client = udp_client.SimpleUDPClient(args.ip, args.port)
print(path, message)
client.send_message(path, message)
# error action
@app.errorhandler(405)
def page_not_found(e):
return jsonify(dict(code=1, message='method error.')), 405
# get all books
@app.route('/api/slider')
def handle_books():
return jsonify(books)
# get a book
@app.route('/api/slider/<int:id>')
def handle_book(id):
for i, book in enumerate(books):
if book['id'] == id:
return jsonify(book)
return jsonify(dict(code=2, message="don't fund the book"))
# create a new book
# 综合页 [{"page":"0"}]
# 丹寨热力 [{"page":"1"}]
# 动线 [{"page":"2"}]
# 客群画像 [{"page":"3"}]
# 客群来源 [{"page":"4"}]
# 丹寨实景 [{"page":"5"}]
# 客流销售 [{"page":"6"}]
# 万达bi [{"page":"bi"}]
# 万达视频 [{"page":"vid"}]
# 自动播放 [{"page":"bi"},{"page":"vid"},{"page":"1"}...]
@app.route('/api/slider', methods=['POST'])
def create_slider():
print(request.json)
result = request.json
if(result['index'] == 0):
sendMessage([{"page": "6"}]) # 客流销售
if(result['index'] == 1):
if (result['type'] == 'slider'):
sendMessage([{"page": "0"}]) # 丹寨综合
if (result['type'] == 'home'):
sendMessage([{"page": "0"}]) # 丹寨综合
if (result['type'] == 'homeSence'):
sendMessage([{"page": "5"}]) # 丹寨场景
if(result['index'] == 2):
sendMessage([{"page": "bi"}]) # BIM
return jsonify(code=0, message='success')
@app.route('/api/route', methods=['POST'])
def create_ctr():
app.logger.info(str(request))
print(request.json['arguments'], len(request.json['arguments']))
# result = request.json
message = [getBigUnicode(request.json['path'])]
if(len(request.json['arguments'])):
for index in range(len(request.json['arguments'])):
message.append(getBigUnicode(request.json['arguments'][index]))
print(message)
# sendMessage('/route',[getBigUnicode(request.json['path']), 0 ,1])
sendMessage('/remote',message)
return jsonify(code=0, message='success', data = request.json)
@app.route('/api/getState', methods=['get'])
def handle_route():
with open('D:/Warning/2020/Data/currentRoute.txt',mode = 'r' , encoding = "UTF-8" ) as f:
str = f.read()
f.close()
return jsonify(code=0, message='success', data = str)
if __name__ == '__main__':
app.run(host=localIP, port=8900)
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