Skip to content

html / MeteorologicalBureau

Go to a project
Commit 419a9626 by fengfan
Options

home osc

parent 68a87b2e
Showing with 614 additions and 82 deletions
ipadCtr/package.json
......@@ -11,8 +11,10 @@
},
"dependencies": {
"axios": "^0.19.2",
"moment": "^2.27.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
"vue-router": "^3.0.1",
"vuescroll": "^4.16.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
......
ipadCtr/src/components/contentBox.vue
<template>
<div class="layout-content">
<slot></slot>
<div class="common-btn-back"></div>
<div class="common-btn-back" v-show="btnbackshow" @click="$emit('btnbackclick')"></div>
</div>
</template>
<script>
export default {
props:['btnbackshow'],
data() {
return {
msg: ""
......
ipadCtr/src/components/head.vue
<template>
<div class="layout-nav">
<img class="light" src="@/assets/img/nav-light.png" alt="guang" />
<div class="time">2020/4/24 下午4:08:28</div>
<div class="time">{{time}}</div>
</div>
</template>
<script>
import moment from 'moment'
import 'moment/locale/zh-cn'
export default {
data() {
return {
msg: ""
time: moment().format('MMMM Do YYYY, h:mm:ss a')
};
},
mounted(){
setInterval(this.setNow,1000)
},
methods:{
setNow(){
this.time = moment().format('L a LTS')
}
}
};
</script>
......
ipadCtr/src/components/nav.vue
......@@ -4,7 +4,7 @@
<li v-for="(item, index) in navList" :key="index">
<div
:class="{ active: active == index }"
:style="{ paddingLeft: itempadding(index) }"
:style="{ paddingLeft: itempadding(index),backgroundPosition : backgroundPosition(index)}"
aria-current="page"
@click="go(index)"
>
......@@ -27,8 +27,8 @@ export default {
{ name: "设备/联络人", path: "/equipment" ,send:'/系统监控'},
{ name: "中心建设", path: "home" ,send:'/中心建设'},
{ name: "预警系统", path: "home" ,send:'/预警系统'},
{ name: "部委信息", path: "home" ,send:'/行业聚焦'},
{ name: "服务效益", path: "home" ,send:'/服务效益'},
{ name: "部委信息", path: "/industry" ,send:'/行业聚焦'},
{ name: "服务效益", path: "/server" ,send:'/服务效益'},
{ name: "参观场景", path: "home" ,send:'/参观场景'},
{ name: "自然灾害", path: "home" ,send:'/自然灾害'},
{ name: "事件监控", path: "home" ,send:'/事件监控'},
......@@ -39,14 +39,14 @@ export default {
};
},
mounted(){
getState().then((res)=>{
this.pagego(this.findIndexByRouteName(res.data))
})
setInterval(() => {
getState().then((res)=>{
this.pagego(this.findIndexByRouteName(res.data))
})
}, 1000);
// getState().then((res)=>{
// this.pagego(this.findIndexByRouteName(res.data))
// })
// setInterval(() => {
// getState().then((res)=>{
// this.pagego(this.findIndexByRouteName(res.data))
// })
// }, 1000);
},
methods: {
findIndexByRouteName(route){
......@@ -60,7 +60,7 @@ export default {
},
go(index) {
if(index<0)return false;
// this.pagego(index)
this.pagego(index)
send(this.navList[index].send, []);
},
itempadding(index) {
......@@ -70,6 +70,14 @@ export default {
Math.abs(index - (this.navList.length - 1) / 2)) +
"rem"
);
},
backgroundPosition(index) {
return (
0.2 *
(this.navList.length / 2 -
Math.abs(index - (this.navList.length - 1) / 2))- 0.3 +
"rem 0"
);
}
}
};
......@@ -128,6 +136,7 @@ export default {
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
}
.layout-sidebar li div {
transition: 0.3s;
display: block;
height: 100%;
text-decoration: none;
......@@ -143,59 +152,63 @@ export default {
align-items: center;
}
.layout-sidebar li div.active .icon {
background-size: 110%;
transform: scale(1.3);
}
.layout-sidebar li div .icon {
width: 0.7rem;
height: 0.7rem;
transition: 0.3s;
transform: scale(1.0);
width: 0.4rem;
height: 0.4rem;
display: inline-block;
background-size: contain;
margin-right: .2rem;
}
.icon0 {
background: url(../assets/img/icon/1.png) no-repeat center;
background-size: 90%;
background: url(../assets/img/icon/0.png) no-repeat center;
}
.icon1 {
background: url(../assets/img/icon/2.png) no-repeat center;
background-size: 90%;
background: url(../assets/img/icon/1.png) no-repeat center;
}
.icon2 {
background: url(../assets/img/icon/3.png) no-repeat center;
background-size: 90%;
background: url(../assets/img/icon/2.png) no-repeat center;
}
.icon3 {
background: url(../assets/img/icon/4.png) no-repeat center;
background-size: 90%;
background: url(../assets/img/icon/3.png) no-repeat center;
}
.icon4 {
background: url(../assets/img/icon/5.png) no-repeat center;
background-size: 90%;
background: url(../assets/img/icon/4.png) no-repeat center;
}
.icon5 {
background: url(../assets/img/icon/6.png) no-repeat center;
background-size: 90%;
background: url(../assets/img/icon/5.png) no-repeat center;
}
.icon6 {
background: url(../assets/img/icon/7.png) no-repeat center;
background-size: 90%;
background: url(../assets/img/icon/6.png) no-repeat center;
}
.icon7 {
background: url(../assets/img/icon/7.png) no-repeat center;
background-size: 90%;
}
.icon8 {
background: url(../assets/img/icon/7.png) no-repeat center;
background-size: 90%;
background: url(../assets/img/icon/8.png) no-repeat center;
}
.icon9 {
background: url(../assets/img/icon/7.png) no-repeat center;
background-size: 90%;
background: url(../assets/img/icon/9.png) no-repeat center;
}
.icon10 {
background: url(../assets/img/icon/7.png) no-repeat center;
background-size: 90%;
background: url(../assets/img/icon/9.png) no-repeat center;
}
.icon11 {
background: url(../assets/img/icon/7.png) no-repeat center;
background-size: 90%;
background: url(../assets/img/icon/9.png) no-repeat center;
}
</style>
ipadCtr/src/components/pageTitle.vue
<template>
<div class="title">
<span
v-for="(item, index) in list"
v-for="(item, index) in titledata"
:key="index"
:class="{active:index==active}"
:class="{active:index==titleactive}"
class='span'
@click="active=index"
><span>{{item.des}}</span></span>
@click="$emit('titleclick',index)"
><span>{{item}}</span></span>
</div>
</template>
<script>
export default {
data() {
return {
active: 0,
list: [
{
des: "大asdasd喇叭"
},
{
des: "大asdasd喇叭"
},
]
};
}
props:['titledata','titleactive']
};
</script>
<style scoped>
......
ipadCtr/src/main.js
......@@ -6,7 +6,8 @@ import router from './router'
import '@/service/rem.js'
import './assets/reset.css'
import './assets/index.css'
import axios from 'axios'
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
......
ipadCtr/src/pages/equipment.vue
<template>
<div class="page">
<content-box>
<div>
设备
<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>
......@@ -10,13 +27,64 @@
<script>
import contentBox from "../components/contentBox";
import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll";
export default {
components: { contentBox },
components: { contentBox, pageTitle, vuescroll },
data() {
return {
msg: "",
btnlist: [],
titledata: ["网络连接", "大喇叭", "显示屏", "北斗", "联络人"],
titleactive: 0,
activearea:{},
subtitle:{},
btnbackshow: false,
ops: {
bar: {
background: '#41c9ff',
keepShow:true
},
rail: {
background: '#3e4a59',
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>
......@@ -30,4 +98,54 @@ export default {
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>
ipadCtr/src/pages/home.vue
<template>
<div class="page">
<content-box>
<div class="content" >
<page-title class="titlePosition" />
<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>
<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 },
components: { contentBox, pageTitle, vuescroll },
data() {
return {
msg: "",
btnlist: [],
titledata: ["24小时", "近一周", "近一月", "近一年"],
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.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.btnlist[0]
this.subtitle = {}
});
},
showC(item) {
if(this.btnbackshow){
this.activearea = item
send( `/预警监控/省级/${this.subtitle.name}/H5/${this.activearea.name}`, []);
}else if(item.name === '全国'){
this.activearea = item
send( `/预警监控/时间范围/${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.subtitle.name}/${this.titleactive}`, []);
})
}
},
titleclickfn(i) {
this.titleactive = i;
if(this.btnbackshow && this.activearea == this.subtitle){
send( `/预警监控/省级/${this.subtitle.name}/时间范围/${this.titleactive}`, []);
}else if(this.activearea.name === '全国'){
send( `/预警监控/时间范围/${this.titleactive}`, []);
}else{
// send( `/预警监控/省级/${this.subtitle.name}/时间范围/${this.titleactive}`, []);
}
},
}
};
</script>
......@@ -33,9 +112,54 @@ export default {
margin-top: 1.5rem;
margin-left: 2.2rem;
}
.content{
padding-top:1rem;
padding-left:1rem;
.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>
ipadCtr/src/pages/industry.vue 0 → 100644
<template>
<div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.name == item.name}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
</div>
</content-box>
</div>
</template>
<script>
import contentBox from "../components/contentBox";
import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll";
export default {
components: { contentBox, pageTitle, vuescroll },
data() {
return {
btnlist: [],
activearea:{},
subtitle:{},
btnbackshow: false,
ops: {
bar: {
background: '#41c9ff',
keepShow:true
},
rail: {
background: '#3e4a59',
opacity: 0.5,
}
}
};
},
mounted() {
this.showP();
},
methods: {
backfn() {
this.showP();
},
showP() {
this.$axios
.get("http://123.56.149.208:8091/external/get/all/bw")
.then(val => {
this.btnlist = val.data.data;
this.activearea = this.btnlist[0]
});
},
showC(item) {
this.activearea = item
},
titleclickfn(i) {
this.titleactive = i;
}
}
};
</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;
/* 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>
ipadCtr/src/pages/server.vue 0 → 100644
<template>
<div class="page">
<content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
<div class="content">
<div id="scrollbox">
<vuescroll :ops="ops">
<div
class="btn"
:class="{activearea:activearea.name == item.name}"
v-for="(item,index) in btnlist"
:key="index"
@click="showC(item)"
>{{item.name}}</div>
</vuescroll>
</div>
</div>
</content-box>
</div>
</template>
<script>
import contentBox from "../components/contentBox";
import pageTitle from "../components/pageTitle";
import vuescroll from "vuescroll";
export default {
components: { contentBox, pageTitle, vuescroll },
data() {
return {
btnlist: [{ name: "test1" }, { name: "test2" }, { name: "test3" }],
activearea: {},
subtitle: {},
btnbackshow: false,
ops: {
bar: {
background: "#41c9ff",
keepShow: true
},
rail: {
background: "#3e4a59",
opacity: 0.5
}
}
};
},
mounted() {
this.showP();
},
methods: {
backfn() {
this.showP();
},
showP() {
this.$axios
.get("http://123.56.149.208:8091/external/get/all/fw")
.then(val => {
// this.btnlist = val.data.data;
this.activearea = this.btnlist[0];
});
},
showC(item) {
this.activearea = item;
},
titleclickfn(i) {
this.titleactive = i;
}
}
};
</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.92rem;
/* letter-spacing: 0.07rem; */
padding: 0 0.1rem;
margin: 0 0.45rem 0.74rem 0;
min-width: 4.2rem;
height: 0.92rem;
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>
ipadCtr/src/router/index.js
......@@ -3,6 +3,8 @@ import Router from 'vue-router'
import home from '@/pages/home'
import welcome from '@/pages/welcome'
import equipment from '@/pages/equipment'
import industry from '@/pages/industry'
import server from '@/pages/server'
Vue.use(Router)
{/* <li> <NavLink to="/home" activeClassName="active"> <span className="icon"></span>首页 </NavLink></li>
......@@ -31,11 +33,16 @@ export default new Router({
name: 'equipment',
component: equipment
},
// {
// path: '/equipment',
// name: 'equipment',
// component: home
// },
{
path: '/industry',
name: 'industry',
component: industry
},
{
path: '/server',
name: 'server',
component: server
},
// {
// path: '/equipment',
// name: 'equipment',
......
ipadCtr/yarn.lock
......@@ -3999,6 +3999,11 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
dependencies:
minimist "^1.2.5"
moment@^2.27.0:
version "2.27.0"
resolved "https://registry.npm.taobao.org/moment/download/moment-2.27.0.tgz?cache=0&sync_timestamp=1592516084857&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d"
integrity sha1-i/9OPiaiNiIN/j423nVrbrqgEF0=
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
......@@ -6712,6 +6717,11 @@ vue@^2.5.2:
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
vuescroll@^4.16.0:
version "4.16.0"
resolved "https://registry.npm.taobao.org/vuescroll/download/vuescroll-4.16.0.tgz#e0eca820f3757d298e9128c07916fcb9bc56b14b"
integrity sha1-4OyoIPN1fSmOkSjAeRb8ubxWsUs=
watchpack@^1.4.0:
version "1.6.1"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"
......
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