Skip to content

html / MeteorologicalBureau

Go to a project
Commit d05d0d9f by fengfan
Options

event

parent 62be592c
Showing with 88 additions and 118 deletions
ipadCtr/src/main.js
...@@ -17,3 +17,5 @@ new Vue({ ...@@ -17,3 +17,5 @@ new Vue({
components: { App }, components: { App },
template: '<App/>' template: '<App/>'
}) })
//http://123.56.149.208:8091/swagger-ui.html#!/3371921462228063709625968254542716922359/getEarlyWarnEquipmentTwoUsingGET
ipadCtr/src/pages/event.vue
<template> <template>
<div class="page"> <div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn"> <div class="title">当前事件 : {{eventList[activeIndex].name}}</div>
<div class="content"> <div class="subtitle">历史事件 :</div>
<div class="subtitle">{{subtitle.name||'全国'}} :</div>
<div id="scrollbox"> <div id="scrollbox">
<vuescroll :ops="ops"> <vuescroll :ops="ops">
<div <div
class="btn" class="item"
:class="{activearea:activearea.code == item.code}" :class="{active:index===activeIndex}"
v-for="(item,index) in btnlist" v-for="(item,index) in eventList"
:key="index" :key="index"
@click="showC(item)" @click="go(index)"
>{{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>
</content-box>
</div> </div>
</template> </template>
<script> <script>
import { send } from "@/service/ctrapi"; import { send } from "@/service/ctrapi";
import contentBox from "../components/contentBox";
import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll"; import vuescroll from "vuescroll";
export default { export default {
components: { contentBox, pageTitle, vuescroll }, components: { vuescroll },
data() { data() {
return { return {
btnlist: [], eventList: [{}],
titledata: ["24小时", "近一周", "近一月", "近一年"], activeIndex: 0,
msgPathCfg:{
root:'/预警监控',
list1:'/省级',
subtitle:'/时间范围',
},
titleactive: 0,
activearea: {},
subtitle: {},
btnbackshow: false,
ops: { ops: {
bar: { bar: {
background: "#41c9ff", background: "#41c9ff",
...@@ -59,61 +38,16 @@ export default { ...@@ -59,61 +38,16 @@ export default {
}; };
}, },
mounted() { mounted() {
this.showP();
},
methods: {
backfn() {
send(`${this.msgPathCfg.root}`, []);
this.showP();
},
showP() {
this.$axios this.$axios
.get("http://123.56.149.208:8091/external/get/city/all") .get(`http://123.56.149.208:8091/external/get/all/event`)
.then(val => { .then(val => {
this.btnlist = val.data.data; this.eventList = val.data.data;
this.btnbackshow = false;
this.titleactive = 0
this.activearea = this.btnlist[0];
this.subtitle = {};
}); });
}, },
showC(item) { methods: {
if (this.btnbackshow) { go(index){
this.activearea = item; this.activeIndex=index
send( send(`/事件监控/事件名称/${this.eventList[index].name}`,[])
`${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}`, []);
}
} }
} }
}; };
...@@ -127,57 +61,85 @@ export default { ...@@ -127,57 +61,85 @@ export default {
background-size: cover; background-size: cover;
margin-top: 1.5rem; margin-top: 1.5rem;
margin-left: 2.2rem; margin-left: 2.2rem;
}
.content {
padding-top: 1rem;
padding-left: 1rem;
text-align: left; text-align: left;
color: #fff;
font-size: 0.4rem;
letter-spacing: 0.04em;
}
.title {
position: relative;
margin-left: 2.9rem;
padding-top: 2.5rem;
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);
}
.title::after {
content: "";
display: block;
position: absolute;
width: 0.1rem;
height: 0.1rem;
border-radius: 50%;
left: -0.3rem;
background: #fff;
z-index: 1;
bottom: 0.1rem;
}
.subtitle {
width: 15rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
margin-left: 2.5rem;
padding-top: 0.5rem;
padding-bottom: 0.2rem;
font-size: 0.3rem;
} }
#scrollbox { #scrollbox {
width: 15.5rem; width: 15rem;
height: 9rem; height: 8rem;
margin-left: 1rem; margin-left: 2.5rem;
margin-top: 0.5rem; margin-top: 0.1rem;
} }
.btn { .item {
float: left; color: #ced0d2;
white-space: nowrap; margin: 0.2rem 0 0.2rem 0.5rem;
font-size: 0.3rem; font-size: 0.3rem;
color: #fff; line-height: 0.6rem;
text-align: center; height: 0.6rem;
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; position: relative;
} }
.subtitle { .item.active {
margin: 0.5rem 0 0.5rem 1rem;
color: #fff; color: #fff;
font-size: 0.4rem;
text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3), text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-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),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3); 0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
} }
.activearea { .item::after {
font-size: 0.35rem; content: "";
display: block;
position: absolute;
width: 0.1rem;
height: 0.1rem;
border-radius: 50%;
left: -0.4rem;
top: 0.25rem;
background: rgba(255, 255, 255, 0.3);
z-index: 1;
} }
.activearea::after { .item::before {
content: ""; content: "";
display: block;
position: absolute; position: absolute;
left: 0; width: 1px;
right: 0; height: 0.7rem;
top: 0; left: -0.36rem;
bottom: -100%; top: 0.35rem;
background: url(../assets/img/btn-light.png) no-repeat; background: rgba(255, 255, 255, 0.3);
background-size: 100% 94%; z-index: 1;
} }
>>> div.title{ .item:last-child::before {
background:none; display: none;
transform: translateY(-0.2rem);
} }
</style> </style>
ipadCtr/src/pages/industry.vue
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
import contentBox from "../components/contentBox"; import contentBox from "../components/contentBox";
import pageTitle from "../components/pageTitle"; import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll"; import vuescroll from "vuescroll";
import { send } from "@/service/ctrapi";
export default { export default {
components: { contentBox, pageTitle, vuescroll }, components: { contentBox, pageTitle, vuescroll },
data() { data() {
...@@ -51,7 +52,7 @@ export default { ...@@ -51,7 +52,7 @@ export default {
}, },
showP() { showP() {
this.$axios this.$axios
.get("http://123.56.149.208:8091/external/get/all/bw") .get("http://123.56.149.208:8091/external/get/city/all")
.then(val => { .then(val => {
this.btnlist = val.data.data; this.btnlist = val.data.data;
this.activearea = this.btnlist[0] this.activearea = this.btnlist[0]
...@@ -59,6 +60,11 @@ export default { ...@@ -59,6 +60,11 @@ export default {
}, },
showC(item) { showC(item) {
this.activearea = item this.activearea = item
if(item.name === '全国'){
send(`/行业聚焦`, []);
}else{
send(`/行业聚焦/省级/${item.name}`, []);
}
}, },
titleclickfn(i) { titleclickfn(i) {
this.titleactive = i; this.titleactive = i;
...@@ -77,7 +83,7 @@ export default { ...@@ -77,7 +83,7 @@ export default {
margin-left: 2.2rem; margin-left: 2.2rem;
} }
.content { .content {
padding-top: 1rem; padding-top: 2rem;
padding-left: 1rem; padding-left: 1rem;
text-align: left; text-align: left;
} }
......
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