Commit 299cfaae by hanjixin

flask + axios

parent a94ead50
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>aaa</title>
<title>ipad</title>
</head>
<body>
<div id="app"></div>
......
......@@ -10,6 +10,7 @@
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.19.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
......
<template>
<div id="app">
<Header/>
<Nav/>
<router-view/>
</div>
</template>
<script>
import Header from "./components/head"
import Nav from "./components/nav"
export default {
name: 'App'
name: 'App',
components:{Header,Nav}
}
</script>
......@@ -17,6 +22,11 @@ export default {
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
</style>
html{
background: url('img/bg-home.jpg');
background-repeat: no-repeat;
background-size: cover;
}
\ No newline at end of file
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
box-sizing:border-box;
}
body {
line-height:1;
}
:focus {
outline: 1;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
<template>
<div class="layout-content">
<slot></slot>
<div class="common-btn-back"></div>
</div>
</template>
<script>
export default {
data() {
return {
msg: ""
};
}
};
// background: url('../assets/img/nav.png') no-repeat top;
</script>
<style scoped>
.common-btn-back {
width: 1.9rem;
height: 1.5rem;
background: url(../assets/img/back.png) no-repeat left top;
background-size: cover;
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 10;
}
</style>
<template>
<div class="hello">
home
<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>
</template>
<script>
export default {
data () {
data() {
return {
msg: ''
}
msg: ""
};
}
}
};
</script>
<style scoped>
.layout-nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 1.55rem;
line-height: 1.55rem;
background: #000;
color: white;
align-items: center;
background: url('../assets/img/nav.png') no-repeat top;
background-size: 100%;
}
.light {
position: absolute;
left: 0;
top: 0;
width: 7.8rem;
}
.time {
color: white;
position: absolute;
top: 0;
right: .3rem;
font-size: .3rem;
}
</style>
<template>
<div class="hello">
home
<div class="layout-sidebar">
<ul>
<li v-for="(item, index) in navList" :key="index">
<div
:class="{ active: active == index }"
:style="{ paddingLeft: itempadding(index) }"
aria-current="page"
@click="go(index)"
>
<span class="icon" :class="'icon' + index"></span>{{ item.name }}
</div>
</li>
</ul>
</div>
</template>
<script>
import { send,getState } from "@/service/ctrapi";
export default {
data () {
data() {
return {
msg: ''
active: 0,
navList: [
{ name: "首页", path: "home" ,send:'/首页'},
{ name: "设备/联络人", path: "equipment" ,send:'/首页/全国'},
{ name: "首页", path: "home" ,send:'/首页'},
{ name: "首页", path: "home" ,send:'/首页'},
{ name: "首页", path: "home" ,send:'/首页'},
{ name: "首页", path: "home" ,send:'/首页'},
{ name: "首页", path: "home" ,send:'/首页'},
// {name:'首页',path:'home'},
// {name:'首页',path:'home'},
]
};
},
mounted(){
getState().then((res)=>{
console.log(JSON.parse(res.data));
var router = JSON.parse(res.data).route
if(router=='/首页/全国/预警信息综合监控平台'){
this.pagego(1)
}
if(router=='/首页'){
this.pagego(0)
}
})
setInterval(() => {
getState().then((res)=>{
console.log(JSON.parse(res.data));
var router = JSON.parse(res.data).route
if(router=='/首页/全国/预警信息综合监控平台'){
this.pagego(1)
}
if(router=='/首页'){
this.pagego(0)
}
})
}, 2000);
},
methods: {
pagego(index){
this.active = index;
this.$router.push(this.navList[this.active].path);
},
go(index) {
send(this.navList[index].send, []);
// getState()
// send("/首页", []);
// send("/首页/全国", []);
},
itempadding(index) {
return (
0.4 *
(this.navList.length / 2 -
Math.abs(index - (this.navList.length - 1) / 2)) +
"rem"
);
}
}
}
</script>
};
// background: url('../assets/img/nav.png') no-repeat top;
</script>
<style scoped>
.layout-sidebar {
width: 4rem;
height: calc(100% - 1.5rem);
background: url(../assets/img/sidebar.png) no-repeat left;
background-size: 100%;
position: absolute;
top: 1.5rem;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.layout-sidebar ul {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-sizing: content-box;
box-sizing: content-box;
padding: 2rem 0;
}
.layout-sidebar ul,
.layout-sidebar li {
list-style: none;
}
.layout-sidebar li {
height: 0.9rem;
line-height: 0.9rem;
border-radius: 0.4rem;
text-align: center;
white-space: nowrap;
cursor: pointer;
color: #ced0d2;
margin: 0.2rem 0 0.3rem;
}
.layout-sidebar li div.active {
background: url(../assets/img/select.png) no-repeat left top;
background-size: contain;
background-position: 0px 0;
color: white;
font-weight: bolder;
font-size: 0.36rem;
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);
}
.layout-sidebar li div {
display: block;
height: 100%;
text-decoration: none;
color: #ced0d2;
font-size: 0.3rem;
text-align: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 0.5rem;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.layout-sidebar li div.active .icon {
background-size: 110%;
}
.layout-sidebar li div .icon {
width: 0.7rem;
height: 0.7rem;
display: inline-block;
}
.icon0 {
background: url(../assets/img/icon/1.png) no-repeat center;
background-size: 90%;
}
.icon1 {
background: url(../assets/img/icon/2.png) no-repeat center;
background-size: 90%;
}
.icon2 {
background: url(../assets/img/icon/3.png) no-repeat center;
background-size: 90%;
}
.icon3 {
background: url(../assets/img/icon/4.png) no-repeat center;
background-size: 90%;
}
.icon4 {
background: url(../assets/img/icon/5.png) no-repeat center;
background-size: 90%;
}
.icon5 {
background: url(../assets/img/icon/6.png) no-repeat center;
background-size: 90%;
}
.icon6 {
background: url(../assets/img/icon/7.png) no-repeat center;
background-size: 90%;
}
</style>
......@@ -3,6 +3,9 @@
import Vue from 'vue'
import App from './App'
import router from './router'
import '@/service/rem.js'
import './assets/reset.css'
import './assets/index.css'
Vue.config.productionTip = false
......
<template>
<div class="hello">
equipment
<div class="page">
<content-box>
<div>
设备
</div>
</content-box>
</div>
</template>
<script>
import contentBox from "../components/contentBox";
export default {
data () {
components: { contentBox },
data() {
return {
msg: ''
}
msg: "",
};
}
}
};
</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;
}
</style>
<template>
<div class="hello">
home
<div class="page">
<content-box>
<div>
home
</div>
</content-box>
</div>
</template>
<script>
import contentBox from "../components/contentBox";
export default {
data () {
components: { contentBox },
data() {
return {
msg: ''
}
msg: "",
};
}
}
};
</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;
}
</style>
<template>
<div class="hello">
welcome
<div class="page">
<content-box>
<div>
</div>
</content-box>
</div>
</template>
<script>
import contentBox from "../components/contentBox";
export default {
data () {
components: { contentBox },
data() {
return {
msg: ''
}
msg: "",
};
}
}
};
</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;
}
</style>
import request from '@/utils/axiosRequest';
var baseUrl = 'http://172.16.1.249:8900'
export function send(path, agr) {
console.log(path, 'path', window.sessionStorage.getItem('isUse'))
window.sessionStorage.setItem('sendObj', JSON.stringify({path, agr}))
if(window.sessionStorage.getItem('isUse')) {
console.log('取消发送')
return Promise.reject('失败')
}
return request(baseUrl + '/api/route', {
data: {
path,
arguments: agr,
},
method: 'post'
});
}
export function getState() {
return request(baseUrl + '/api/getState', {
// headers: new Headers({
// 'Content-Type': 'application/json'
// }),
method: 'get'
});
}
import request from '../utils/axiosRequest';
// 获取省信息
export function getProvince() {
return request({
url: '/area/get/province',
method: 'get'
})
}
// 根据code 获取子集
export function getChildrenInfo(parentCode) {
return request({
url: `/area/get/info/${parentCode}`,
method: 'get'
})
}
export function getVideoList() {
return request({
method: 'get',
url: '/interior/get/promotional/list',
params: {
p: 1,
c: 1000
}
})
}
export function getBenefitList() {
return request({
method: 'get',
url: '/interior/get/benefit',
params: {
p: 1,
c: 1000
}
})
}
\ No newline at end of file
import axios from 'axios'
// 创建axios实例
const service = axios.create({
// baseURL: localStorage.getItem('API_URL') ? localStorage.getItem('API_URL') : process.env.API_URL, // api 的 base_url
timeout: 10 * 1000 // 请求超时时间, 10秒
})
// request拦截器
service.interceptors.request.use(
config => {
// if (store.getters.token) {
// config.headers['userToken'] = store.state.user.token // 让每个请求携带自定义token 请根据实际情况自行修改
// }
return config
},
error => {
// Do something with request error
return Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
return response.data
},
/**
* 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
*/
// const res = response.data;
// if (res.code !== 20000) {
// Message({
// message: res.message,
// type: 'error',
// duration: 5 * 1000
// });
// // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
// confirmButtonText: '重新登录',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// store.dispatch('FedLogOut').then(() => {
// location.reload();// 为了重新实例化vue-router对象 避免bug
// });
// })
// }
// return Promise.reject('error');
// } else {
// return response.data;
// }
err => {
console.dir(err);
if (err && err.response) {
// eslint-disable-next-line default-case
switch (err.response.status) {
case 400:
err.message = `${err.response.data.message}`
break
case 401:
//重新登录
err.message = `${err.response.data.message}`
break
case 403: //没有权限
err.message = `${err.response.data.message}`
break
case 404:
if (err.response.data.message) {
err.message = `${err.response.data.message},请检查!`;
} else {
err.message = `请求地址出错: ${err.response.config.url}`
}
break
case 405:
err.message = `方法错误: ${err.response.data.message}`
break
case 406: //请求格式错误
err.message = '请求超时'
break
case 408:
err.message = '请求超时'
break
case 410:
//用户请求的资源被永久删除,且不会再得到的
err.message = '请求超时'
break
case 422:
//当创建一个对象时,发生一个验证错误。
err.message = '请求超时'
break
case 500:
err.message = `${err.response.data.message}`
break
case 501:
err.message = '服务未实现'
break
case 502:
err.message = '网关错误'
break
case 503:
err.message = '服务不可用'
break
case 504:
err.message = '网关超时'
break
case 505:
err.message = 'HTTP版本不受支持'
break
}
}
console.log(err.message)
return Promise.reject(err.response)
}
)
export default service
export default {
API_URL: localStorage.getItem('API_URL') ? localStorage.getItem('API_URL') : process.env.API_URL,
CTR_URL: localStorage.getItem('CTR_URL') ? localStorage.getItem('CTR_URL') : process.env.CTR_URL
}
\ No newline at end of file
import { getState } from '../services/ctr'
import routerConfig from '@/router/connfig'
// var filterRouter = {}
function generateRouter(maps, Routes = []) {
// const Routes = []
(maps.map(item => {
Routes.push(item)
if (item.children && item.children.length) {
// generateRouter(item.children, Routes)
}
return item.children && item.children.length ? generateRouter(item.children, Routes) : (
item)
}))
return Routes
}
function filterRouter(path) {
var routes = generateRouter(routerConfig);
var filterRouter = null
// eslint-disable-next-line array-callback-return
routes.map((item) => {
if (item.meta.vPath === path) {
filterRouter = item
}
return item
})
console.log(filterRouter, 'filterRouter')
return filterRouter
}
export function checkState(history) { // 检查路由状态 与大屏保持同步
window._getState && clearInterval(window._getState)
window._getState = setInterval(() => {
getState().then(res => {
let data = JSON.parse(res.data.data)
let sendObj = window.sessionStorage.getItem('sendObj');
sendObj ? sendObj = JSON.parse(sendObj) : (sendObj = {})
// console.log(data, sendObj)
// window.sessionStorage.setItem('isUse', 'true')
if (data.route === sendObj.path || (data.route === '/首页/全国/预警信息综合监控平台' && sendObj.path.indexOf('/首页/全国') !== -1)) {
// console.log('路由重复')
// window.sessionStorage.setItem('isUse', 'true')
} else {
const result = filterRouter(data.route)
window.sessionStorage.removeItem('isUse')
if (result && window.location.hash.replace('#', '') !== result.path) {
history.replace(result.path)
}
}
})
}, 500)
}
\ No newline at end of file
import fetch from 'dva/fetch';
const baseUrl = localStorage.getItem('CTR_URL') ? localStorage.getItem('CTR_URL') : process.env.CTR_URL
function parseJSON(response) {
return response.json();
}
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
// return Promise.reject(error)
throw error;
}
/**
* Requests a URL, returning a promise.
*
* @param {string} url The URL we want to request
* @param {object} [options] The options we want to pass to "fetch"
* @return {object} An object containing either "data" or "err"
*/
export default function request(url, options) {
return fetch(baseUrl + url, options)
.then(checkStatus)
.then(parseJSON)
.then(data => ({ data }))
// .catch(err => ({ err }));
}
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