diff --git a/index.html b/index.html index 3a88b49..d1f4387 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + 监控 diff --git a/package-lock.json b/package-lock.json index 3957ece..67fe34f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10876,6 +10876,11 @@ "resolved": "http://registry.npm.taobao.org/vue/download/vue-2.5.17.tgz", "integrity": "sha1-D4eJrXGL5oyhhyYpgy7VM1icato=" }, + "vue-count-to": { + "version": "1.0.13", + "resolved": "http://registry.npm.taobao.org/vue-count-to/download/vue-count-to-1.0.13.tgz", + "integrity": "sha1-PnVz6m5kwrKXL2TgoqsuI8dZD/M=" + }, "vue-hot-reload-api": { "version": "2.3.1", "resolved": "http://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.1.tgz", @@ -10979,6 +10984,11 @@ "integrity": "sha1-3EJpcTMwLOMBdSQ1amxht7abShg=", "dev": true }, + "vuex": { + "version": "3.1.0", + "resolved": "http://registry.npm.taobao.org/vuex/download/vuex-3.1.0.tgz", + "integrity": "sha1-Y0uBUVzwz+l2vR/+lgF1XlH4Q7k=" + }, "watchpack": { "version": "1.6.0", "resolved": "http://registry.npm.taobao.org/watchpack/download/watchpack-1.6.0.tgz", diff --git a/package.json b/package.json index 55b6df4..74b8eb7 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,9 @@ "ajv": "^6.5.5", "axios": "^0.18.0", "echarts": "^4.2.0-rc.2", - "vue": "^2.5.2" + "vue": "^2.5.2", + "vue-count-to": "^1.0.13", + "vuex": "^3.1.0" }, "devDependencies": { "autoprefixer": "^7.1.2", diff --git a/src/api/api.js b/src/api/api.js index 27b3f5f..0980c80 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -1,40 +1,40 @@ -import request from '@/utils/request' - -export function fetchList() { - return request({ - url: '/article/list', - method: 'get', - }) -} - -export function fetchArticle(id) { - return request({ - url: '/article/detail', - method: 'get', - params: {id} - }) -} - -export function fetchPv(pv) { - return request({ - url: '/article/pv', - method: 'get', - params: {pv} - }) -} - -export function createArticle(data) { - return request({ - url: '/article/create', - method: 'post', - data - }) -} - -export function updateArticle(data) { - return request({ - url: '/article/update', - method: 'post', - data - }) -} + +import { post} from '../utils/request' +//....设备 +export const deviceAddress = p => post('urban/intelligence/device/queryDeviceStatistic',p) + + +//....设备 +export const moneyAddress = p => post('urban/intelligence/income/queryIncomeStaByOrgIds',p) + +//....收费员 +export const tollAddress = p => post('urban/intelligence/employee/queryEmployeeStaByOrgIds',p) + +//....泊位 +export const berthAddress = p => post('urban/intelligence/berth/queryBerthStatisticByOrgIds',p) + +//....周出场 +export const weekAddress = p => post('urban/intelligence/orderPark/queryOrderParkNumForLastWeek',p) + +//....周出场 +export const dayAddress = p => post('urban/intelligence/orderPark/queryOrderParkNumForToday',p) + +//....消息 +export const msgAddress = p => post('urban/intelligence/orderPark/queryLastOrderPark',p) + +//....停车场总数 +export const parkAddress = p => post('urban/intelligence/park/queryParkNumStatisticByOrgIds',p) + +//....用户数 +export const memberAddress = p => post('urban/intelligence/appuser/queryUserPersonStatistic',p) + +//....收入 +export const incomeAddress = p => post('urban/intelligence/income/queryIncomeStaByOrgIds',p) + +//....收入 +export const serviceAddress = p => post('urban/intelligence/park/queryAreaBlocksByOrgId',p) + +//....服务点下的停车场 +export const parkListAddress = p => post('urban/intelligence/park/queryParkingLotListByAreaBlockId',p) + + diff --git a/src/components/allPieChart.vue b/src/components/allPieChart.vue index e3797e4..0994a34 100644 --- a/src/components/allPieChart.vue +++ b/src/components/allPieChart.vue @@ -36,8 +36,10 @@ export default { } }, watch: { - chartData: { - deep: true, + chartData: function () { + this.$nextTick(()=>{ + this.initChart() + }) } }, mounted() { diff --git a/src/components/barChart.vue b/src/components/barChart.vue index 9a73e96..1b2c323 100644 --- a/src/components/barChart.vue +++ b/src/components/barChart.vue @@ -36,12 +36,14 @@ export default { } }, watch: { - chartData: { - deep: true, + chartData:function () { + this.$nextTick(()=>{ + this.initChart() + }) } }, mounted() { - this.initChart() + // this.initChart() if (this.autoResize) { this.__resizeHandler = debounce(() => { if (this.chart) { @@ -112,7 +114,7 @@ export default { left: 10, right: 10, bottom: 10, - top: 10, + top: 20, containLabel: true }, tooltip: { diff --git a/src/components/halfPieChart.vue b/src/components/halfPieChart.vue index 9297aa9..f06835e 100644 --- a/src/components/halfPieChart.vue +++ b/src/components/halfPieChart.vue @@ -38,12 +38,14 @@ export default { } }, watch: { - chartData: { - deep: true, + chartData: function () { + this.$nextTick(()=>{ + this.initChart() + }) } }, mounted() { - this.initChart() + // this.initChart() if (this.autoResize) { this.__resizeHandler = debounce(() => { if (this.chart) { @@ -65,7 +67,8 @@ export default { this.chart = null }, methods: { - setOptions({xData, yData} = {}) { + setOptions({yData} = {}) { + console.log(yData[0]) this.chart.setOption({ tooltip: { trigger: 'item', @@ -86,7 +89,7 @@ export default { }, data: [ { - value: 35, + value: yData[0], name: '空闲', itemStyle: { normal: { @@ -103,7 +106,7 @@ export default { } }, { - value: 55, + value: yData[1], name: '占有', itemStyle: { normal: { @@ -129,7 +132,7 @@ export default { }) }, initChart() { - this.chart = echarts.init(this.$el, 'macarons') + this.chart = echarts.init(this.$el) this.setOptions(this.chartData) } } diff --git a/src/components/lineChart.vue b/src/components/lineChart.vue index 4cf82cb..046c988 100644 --- a/src/components/lineChart.vue +++ b/src/components/lineChart.vue @@ -36,13 +36,13 @@ export default { } }, watch: { - chartData: { - deep: true, + chartData:function () { + this.$nextTick(()=>{ + this.initChart() + }) } }, mounted() { - // console.log(this.chartData) - this.initChart() if (this.autoResize) { this.__resizeHandler = debounce(() => { if (this.chart) { diff --git a/src/main.js b/src/main.js index 0a75ec9..047cb39 100644 --- a/src/main.js +++ b/src/main.js @@ -2,6 +2,7 @@ // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' +import store from './store/store' import './mock/mock' import '@/styles/reset.css'/*引入重置样式*/ // import '@/styles/mixin.scss'/*引入公共样式*/ @@ -9,6 +10,9 @@ import * as filters from './filters/filters' import util from './utils/formatNum' Vue.prototype.$util = util +import _global from './api/variables' +Vue.prototype.GLOBAL = _global + Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }) @@ -18,6 +22,7 @@ Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', + store, components: { App }, template: '' }) diff --git a/src/store/store.js b/src/store/store.js index 8b13789..67d7057 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -1 +1,39 @@ +import Vue from 'vue' +import Vuex from 'vuex' +import createLogger from 'vuex/dist/logger' +Vue.use(Vuex) + +const state = { + orderNum: 0 +} + +const getters = { + getOrderNum: function (state) { + return state.orderNum + } +} + +const mutations = { + changeOrderNum:function (state,str) { + state.orderNum = str + } +} + +const actions = { + transferOrderTotal(context,obj){ + context.commit('changeOrderNum',obj) + } +} + + +const debug = process.env.NODE_ENV !== 'production' + +const store = new Vuex.Store({ + state, + getters, + mutations, + actions, + plugins: debug ? [createLogger()] : [] +}) +export default store; diff --git a/src/styles/reset.css b/src/styles/reset.css index 42a06a8..a62b4d1 100644 --- a/src/styles/reset.css +++ b/src/styles/reset.css @@ -110,12 +110,12 @@ table { } .dislog-wrap{ - width:84px; + width:100px; height: 47px; border-radius:2px; } .dialog-header{ - width: 84px; + width: 100px; height:14px; line-height: 14px; font-size: 12px; @@ -125,11 +125,11 @@ table { white-space: nowrap; text-overflow: ellipsis; color:rgba(255,255,255,1); - background:rgba(68,182,255,.6); + background:rgba(68,182,255,1); } .dislog-body{ display: flex; - background:rgba(1,172,254,.2); + background:rgba(1,172,254,.8); } .dislog-body li{ text-align: center; diff --git a/src/utils/request.js b/src/utils/request.js index 1c19f47..8fc2bff 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -1,73 +1,101 @@ +//引入axios import axios from 'axios' - -// create an axios instance -const service = axios.create({ - // baseURL: process.env.BASE_API, // api 的 base_url - timeout: 5000 // request timeout +//import qs from 'qs' +let cancel +const CancelToken = axios.CancelToken; +//请求拦截器 // 在发送请求之前做些什么 +axios.interceptors.request.use(config => { + //发起请求时，取消掉当前正在进行的相同请求 + config.headers['x-auth-token'] = '07118983-e37f-4503-a3b1-968750ceb195' + config.data = { + ...config.data, + sysCode: '1001' + } + // config.data = qs.stringify(config.data); + return config +}, error => { + return Promise.reject(error) }) -// request interceptor -service.interceptors.request.use( - config => { - // Do something before request is sent - // if (store.getters.token) { - // // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改 - // config.headers['X-Token'] = getToken() - // } - return config - }, - error => { - // Do something with request error - console.log(error) // for debug - Promise.reject(error) - } -) -// response interceptor -service.interceptors.response.use( - response => response, - /** - * 下面的注释为通过在response里，自定义code来标示请求状态 - * 当code返回如下情况则说明权限有问题，登出并返回到登录页 - * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中 - * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除 - */ - // response => { - // 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 - // // import { Message, MessageBox } from 'element-ui' - // MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', { - // confirmButtonText: '重新登录', - // cancelButtonText: '取消', - // type: 'warning' - // }).then(() => { - // store.dispatch('FedLogOut').then(() => { - // location.reload() // 为了重新实例化vue-router对象 避免bug - // }) - // }) - // } - // return Promise.reject('error') - // } else { - // return response.data - // } - // }, - error => { - console.log('err' + error) // for debug - // Message({ - // message: error.message, - // type: 'error', - // duration: 5 * 1000 - // }) - return Promise.reject(error) +//响应拦截器即异常处理,对响应数据做点什么 +axios.interceptors.response.use(response => { + return response +}, err => { + err.messages=''; + if (err && err.response) { + switch (err.response.status) { + case 400: + err.messages = '错误请求' + break; + case 401: + err.messages = '未授权，请重新登录' + break; + case 403: + err.messages = '拒绝访问' + break; + case 404: + err.messages = '请求错误,未找到该资源' + break; + case 405: + err.messages = '请求方法未允许' + break; + case 408: + err.messages = '请求超时' + break; + case 500: + err.messages = '服务器端出错' + break; + case 501: + err.messages = '网络未实现' + break; + case 502: + err.messages = '网络错误' + break; + case 503: + err.messages = '服务不可用' + break; + case 504: + err.messages = '网络超时' + break; + case 505: + err.messages = 'http版本不支持该请求' + break; + default: + err.messages = `连接错误${err.response.status}` + } + } else { + err.messages = "连接到服务器失败"; } -) + //message.err(err.message) + //return Promise.reject(err.response) + return Promise.resolve(err) +}) +//基础url前缀 +//axios.defaults.baseURL = '/api' +axios.defaults.baseURL = 'http://39.98.54.240:8093/'; +//设置默认请求头 +// axios.defaults.withCredentials=true;//让ajax携带cookie + +// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; +axios.defaults.timeout = 10000 + + +function post(url, params) { + return new Promise((resolve,reject) => { + axios({ + method: 'post', + url, + data: params, + cancelToken: new CancelToken(c => { + cancel = c + }) + }).then(res => { + resolve(res) + }) + }) +} + + +export {post} -export default service diff --git a/src/views/berthsection.vue b/src/views/berthsection.vue index c218e81..35d9ecc 100644 --- a/src/views/berthsection.vue +++ b/src/views/berthsection.vue @@ -6,7 +6,7 @@
  • -

    78%

    +

    {{scale}}%

    占有

    • @@ -27,7 +27,7 @@ import titlesection from '../components/titlesection' import totalsection from '../components/total' import halfPieChart from '../components/halfPieChart' -import {fetchList} from '../api/api' +import { berthAddress } from '../api/api' export default { name: 'berthsection', @@ -39,23 +39,37 @@ export default { data() { return { pieChartData: { - yData: [100,200], + yData: [1,1], legendData: ['空余','占有'] }, - totalVal: '21973', - free: '454123', - nofree: '5125' + totalVal: '', + free: '', + nofree: '', + scale: '' } }, created() { + this.getList() }, methods: { getList() { - fetchList() - .then(res => { - console.log(res); - - }); + berthAddress({ + orgIds: this.GLOBAL.paramsvariables + }).then((res)=>{ + let data = res.data.data + console.log(data) + this.totalVal = data.allBerthNum.toString() + this.free = data.freeBerthNum + this.nofree = data.isOccupyBertnNum + this.pieChartData = { + yData: [data.freeBerthNum,data.isOccupyBertnNum], + legendData: ['空余','占有'] + } + // this.pieChartData.yData = [10,20] + // this.pieChartData.yData.push(data.freeBerthNum) + // this.pieChartData.yData.push(data.isOccupyBertnNum) + this.scale = ((data.isOccupyBertnNum/(data.freeBerthNum+data.isOccupyBertnNum))*100).toFixed(0) + }) }, } } diff --git a/src/views/dicisection.vue b/src/views/dicisection.vue index 1024383..bb837d7 100644 --- a/src/views/dicisection.vue +++ b/src/views/dicisection.vue @@ -15,8 +15,7 @@ diff --git a/src/views/outsection.vue b/src/views/outsection.vue index 75a19f4..4f0673d 100644 --- a/src/views/outsection.vue +++ b/src/views/outsection.vue @@ -8,9 +8,8 @@