BJ_web_developers / dyitoc

Commit adf82b696d5ce1bc0c4c0b82338d28db1a52f2b2

Authored by liuqimichale
1 parent b5eb431c

调取接口

Inline Side-by-side
Showing 21 changed files with 637 additions and 411 deletions
index.html
  View file @adf82b6
... ... @@ -7,6 +7,7 @@
7 7 <meta name="renderer" content="webkit">
8 8 <meta name="viewport" content="width=1200">
9 9 <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
  10 + <meta http-equiv="refresh" content="60">
10 11 <title>监控</title>
11 12 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cuMSxNl5LOY6sf1M3nDGtG6tGXl5a0Bb"></script>
12 13 </head>
... ...
package-lock.json
  View file @adf82b6
... ... @@ -10876,6 +10876,11 @@
10876 10876 "resolved": "http://registry.npm.taobao.org/vue/download/vue-2.5.17.tgz",
10877 10877 "integrity": "sha1-D4eJrXGL5oyhhyYpgy7VM1icato="
10878 10878 },
  10879 + "vue-count-to": {
  10880 + "version": "1.0.13",
  10881 + "resolved": "http://registry.npm.taobao.org/vue-count-to/download/vue-count-to-1.0.13.tgz",
  10882 + "integrity": "sha1-PnVz6m5kwrKXL2TgoqsuI8dZD/M="
  10883 + },
10879 10884 "vue-hot-reload-api": {
10880 10885 "version": "2.3.1",
10881 10886 "resolved": "http://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.1.tgz",
... ... @@ -10979,6 +10984,11 @@
10979 10984 "integrity": "sha1-3EJpcTMwLOMBdSQ1amxht7abShg=",
10980 10985 "dev": true
10981 10986 },
  10987 + "vuex": {
  10988 + "version": "3.1.0",
  10989 + "resolved": "http://registry.npm.taobao.org/vuex/download/vuex-3.1.0.tgz",
  10990 + "integrity": "sha1-Y0uBUVzwz+l2vR/+lgF1XlH4Q7k="
  10991 + },
10982 10992 "watchpack": {
10983 10993 "version": "1.6.0",
10984 10994 "resolved": "http://registry.npm.taobao.org/watchpack/download/watchpack-1.6.0.tgz",
... ...
package.json
  View file @adf82b6
... ... @@ -13,7 +13,9 @@
13 13 "ajv": "^6.5.5",
14 14 "axios": "^0.18.0",
15 15 "echarts": "^4.2.0-rc.2",
16   - "vue": "^2.5.2"
  16 + "vue": "^2.5.2",
  17 + "vue-count-to": "^1.0.13",
  18 + "vuex": "^3.1.0"
17 19 },
18 20 "devDependencies": {
19 21 "autoprefixer": "^7.1.2",
... ...
src/api/api.js
  View file @adf82b6
1   -import request from '@/utils/request'
2   -
3   -export function fetchList() {
4   - return request({
5   - url: '/article/list',
6   - method: 'get',
7   - })
8   -}
9   -
10   -export function fetchArticle(id) {
11   - return request({
12   - url: '/article/detail',
13   - method: 'get',
14   - params: {id}
15   - })
16   -}
17   -
18   -export function fetchPv(pv) {
19   - return request({
20   - url: '/article/pv',
21   - method: 'get',
22   - params: {pv}
23   - })
24   -}
25   -
26   -export function createArticle(data) {
27   - return request({
28   - url: '/article/create',
29   - method: 'post',
30   - data
31   - })
32   -}
33   -
34   -export function updateArticle(data) {
35   - return request({
36   - url: '/article/update',
37   - method: 'post',
38   - data
39   - })
40   -}
  1 +
  2 +import { post} from '../utils/request'
  3 +//....设备
  4 +export const deviceAddress = p => post('urban/intelligence/device/queryDeviceStatistic',p)
  5 +
  6 +
  7 +//....设备
  8 +export const moneyAddress = p => post('urban/intelligence/income/queryIncomeStaByOrgIds',p)
  9 +
  10 +//....收费员
  11 +export const tollAddress = p => post('urban/intelligence/employee/queryEmployeeStaByOrgIds',p)
  12 +
  13 +//....泊位
  14 +export const berthAddress = p => post('urban/intelligence/berth/queryBerthStatisticByOrgIds',p)
  15 +
  16 +//....周出场
  17 +export const weekAddress = p => post('urban/intelligence/orderPark/queryOrderParkNumForLastWeek',p)
  18 +
  19 +//....周出场
  20 +export const dayAddress = p => post('urban/intelligence/orderPark/queryOrderParkNumForToday',p)
  21 +
  22 +//....消息
  23 +export const msgAddress = p => post('urban/intelligence/orderPark/queryLastOrderPark',p)
  24 +
  25 +//....停车场总数
  26 +export const parkAddress = p => post('urban/intelligence/park/queryParkNumStatisticByOrgIds',p)
  27 +
  28 +//....用户数
  29 +export const memberAddress = p => post('urban/intelligence/appuser/queryUserPersonStatistic',p)
  30 +
  31 +//....收入
  32 +export const incomeAddress = p => post('urban/intelligence/income/queryIncomeStaByOrgIds',p)
  33 +
  34 +//....收入
  35 +export const serviceAddress = p => post('urban/intelligence/park/queryAreaBlocksByOrgId',p)
  36 +
  37 +//....服务点下的停车场
  38 +export const parkListAddress = p => post('urban/intelligence/park/queryParkingLotListByAreaBlockId',p)
  39 +
  40 +
... ...
src/components/allPieChart.vue
  View file @adf82b6
... ... @@ -36,8 +36,10 @@ export default {
36 36 }
37 37 },
38 38 watch: {
39   - chartData: {
40   - deep: true,
  39 + chartData: function () {
  40 + this.$nextTick(()=>{
  41 + this.initChart()
  42 + })
41 43 }
42 44 },
43 45 mounted() {
... ...
src/components/barChart.vue
  View file @adf82b6
... ... @@ -36,12 +36,14 @@ export default {
36 36 }
37 37 },
38 38 watch: {
39   - chartData: {
40   - deep: true,
  39 + chartData:function () {
  40 + this.$nextTick(()=>{
  41 + this.initChart()
  42 + })
41 43 }
42 44 },
43 45 mounted() {
44   - this.initChart()
  46 + // this.initChart()
45 47 if (this.autoResize) {
46 48 this.__resizeHandler = debounce(() => {
47 49 if (this.chart) {
... ... @@ -112,7 +114,7 @@ export default {
112 114 left: 10,
113 115 right: 10,
114 116 bottom: 10,
115   - top: 10,
  117 + top: 20,
116 118 containLabel: true
117 119 },
118 120 tooltip: {
... ...
src/components/halfPieChart.vue
  View file @adf82b6
... ... @@ -38,12 +38,14 @@ export default {
38 38 }
39 39 },
40 40 watch: {
41   - chartData: {
42   - deep: true,
  41 + chartData: function () {
  42 + this.$nextTick(()=>{
  43 + this.initChart()
  44 + })
43 45 }
44 46 },
45 47 mounted() {
46   - this.initChart()
  48 + // this.initChart()
47 49 if (this.autoResize) {
48 50 this.__resizeHandler = debounce(() => {
49 51 if (this.chart) {
... ... @@ -65,7 +67,8 @@ export default {
65 67 this.chart = null
66 68 },
67 69 methods: {
68   - setOptions({xData, yData} = {}) {
  70 + setOptions({yData} = {}) {
  71 + console.log(yData[0])
69 72 this.chart.setOption({
70 73 tooltip: {
71 74 trigger: 'item',
... ... @@ -86,7 +89,7 @@ export default {
86 89 },
87 90 data: [
88 91 {
89   - value: 35,
  92 + value: yData[0],
90 93 name: '空闲',
91 94 itemStyle: {
92 95 normal: {
... ... @@ -103,7 +106,7 @@ export default {
103 106 }
104 107 },
105 108 {
106   - value: 55,
  109 + value: yData[1],
107 110 name: '占有',
108 111 itemStyle: {
109 112 normal: {
... ... @@ -129,7 +132,7 @@ export default {
129 132 })
130 133 },
131 134 initChart() {
132   - this.chart = echarts.init(this.$el, 'macarons')
  135 + this.chart = echarts.init(this.$el)
133 136 this.setOptions(this.chartData)
134 137 }
135 138 }
... ...
src/components/lineChart.vue
  View file @adf82b6
... ... @@ -36,13 +36,13 @@ export default {
36 36 }
37 37 },
38 38 watch: {
39   - chartData: {
40   - deep: true,
  39 + chartData:function () {
  40 + this.$nextTick(()=>{
  41 + this.initChart()
  42 + })
41 43 }
42 44 },
43 45 mounted() {
44   - // console.log(this.chartData)
45   - this.initChart()
46 46 if (this.autoResize) {
47 47 this.__resizeHandler = debounce(() => {
48 48 if (this.chart) {
... ...
src/main.js
  View file @adf82b6
... ... @@ -2,6 +2,7 @@
2 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 3 import Vue from 'vue'
4 4 import App from './App'
  5 +import store from './store/store'
5 6 import './mock/mock'
6 7 import '@/styles/reset.css'/*引入重置样式*/
7 8 // import '@/styles/mixin.scss'/*引入公共样式*/
... ... @@ -9,6 +10,9 @@ import * as filters from &#39;./filters/filters&#39;
9 10 import util from './utils/formatNum'
10 11 Vue.prototype.$util = util
11 12  
  13 +import _global from './api/variables'
  14 +Vue.prototype.GLOBAL = _global
  15 +
12 16 Object.keys(filters).forEach(key => {
13 17 Vue.filter(key, filters[key])
14 18 })
... ... @@ -18,6 +22,7 @@ Vue.config.productionTip = false
18 22 /* eslint-disable no-new */
19 23 new Vue({
20 24 el: '#app',
  25 + store,
21 26 components: { App },
22 27 template: '<App/>'
23 28 })
... ...
src/store/store.js
  View file @adf82b6
  1 +import Vue from 'vue'
  2 +import Vuex from 'vuex'
  3 +import createLogger from 'vuex/dist/logger'
1 4  
  5 +Vue.use(Vuex)
  6 +
  7 +const state = {
  8 + orderNum: 0
  9 +}
  10 +
  11 +const getters = {
  12 + getOrderNum: function (state) {
  13 + return state.orderNum
  14 + }
  15 +}
  16 +
  17 +const mutations = {
  18 + changeOrderNum:function (state,str) {
  19 + state.orderNum = str
  20 + }
  21 +}
  22 +
  23 +const actions = {
  24 + transferOrderTotal(context,obj){
  25 + context.commit('changeOrderNum',obj)
  26 + }
  27 +}
  28 +
  29 +
  30 +const debug = process.env.NODE_ENV !== 'production'
  31 +
  32 +const store = new Vuex.Store({
  33 + state,
  34 + getters,
  35 + mutations,
  36 + actions,
  37 + plugins: debug ? [createLogger()] : []
  38 +})
  39 +export default store;
... ...
src/styles/reset.css
  View file @adf82b6
... ... @@ -110,12 +110,12 @@ table {
110 110 }
111 111  
112 112 .dislog-wrap{
113   - width:84px;
  113 + width:100px;
114 114 height: 47px;
115 115 border-radius:2px;
116 116 }
117 117 .dialog-header{
118   - width: 84px;
  118 + width: 100px;
119 119 height:14px;
120 120 line-height: 14px;
121 121 font-size: 12px;
... ... @@ -125,11 +125,11 @@ table {
125 125 white-space: nowrap;
126 126 text-overflow: ellipsis;
127 127 color:rgba(255,255,255,1);
128   - background:rgba(68,182,255,.6);
  128 + background:rgba(68,182,255,1);
129 129 }
130 130 .dislog-body{
131 131 display: flex;
132   - background:rgba(1,172,254,.2);
  132 + background:rgba(1,172,254,.8);
133 133 }
134 134 .dislog-body li{
135 135 text-align: center;
... ...
src/utils/request.js
  View file @adf82b6
  1 +//引入axios
1 2 import axios from 'axios'
2   -
3   -// create an axios instance
4   -const service = axios.create({
5   - // baseURL: process.env.BASE_API, // api 的 base_url
6   - timeout: 5000 // request timeout
  3 +//import qs from 'qs'
  4 +let cancel
  5 +const CancelToken = axios.CancelToken;
  6 +//请求拦截器 // 在发送请求之前做些什么
  7 +axios.interceptors.request.use(config => {
  8 + //发起请求时，取消掉当前正在进行的相同请求
  9 + config.headers['x-auth-token'] = '07118983-e37f-4503-a3b1-968750ceb195'
  10 + config.data = {
  11 + ...config.data,
  12 + sysCode: '1001'
  13 + }
  14 + // config.data = qs.stringify(config.data);
  15 + return config
  16 +}, error => {
  17 + return Promise.reject(error)
7 18 })
8 19  
9   -// request interceptor
10   -service.interceptors.request.use(
11   - config => {
12   - // Do something before request is sent
13   - // if (store.getters.token) {
14   - // // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
15   - // config.headers['X-Token'] = getToken()
16   - // }
17   - return config
18   - },
19   - error => {
20   - // Do something with request error
21   - console.log(error) // for debug
22   - Promise.reject(error)
23   - }
24   -)
25 20  
26   -// response interceptor
27   -service.interceptors.response.use(
28   - response => response,
29   - /**
30   - * 下面的注释为通过在response里，自定义code来标示请求状态
31   - * 当code返回如下情况则说明权限有问题，登出并返回到登录页
32   - * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
33   - * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
34   - */
35   - // response => {
36   - // const res = response.data
37   - // if (res.code !== 20000) {
38   - // Message({
39   - // message: res.message,
40   - // type: 'error',
41   - // duration: 5 * 1000
42   - // })
43   - // // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
44   - // if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
45   - // // 请自行在引入 MessageBox
46   - // // import { Message, MessageBox } from 'element-ui'
47   - // MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
48   - // confirmButtonText: '重新登录',
49   - // cancelButtonText: '取消',
50   - // type: 'warning'
51   - // }).then(() => {
52   - // store.dispatch('FedLogOut').then(() => {
53   - // location.reload() // 为了重新实例化vue-router对象 避免bug
54   - // })
55   - // })
56   - // }
57   - // return Promise.reject('error')
58   - // } else {
59   - // return response.data
60   - // }
61   - // },
62   - error => {
63   - console.log('err' + error) // for debug
64   - // Message({
65   - // message: error.message,
66   - // type: 'error',
67   - // duration: 5 * 1000
68   - // })
69   - return Promise.reject(error)
  21 +//响应拦截器即异常处理,对响应数据做点什么
  22 +axios.interceptors.response.use(response => {
  23 + return response
  24 +}, err => {
  25 + err.messages='';
  26 + if (err && err.response) {
  27 + switch (err.response.status) {
  28 + case 400:
  29 + err.messages = '错误请求'
  30 + break;
  31 + case 401:
  32 + err.messages = '未授权，请重新登录'
  33 + break;
  34 + case 403:
  35 + err.messages = '拒绝访问'
  36 + break;
  37 + case 404:
  38 + err.messages = '请求错误,未找到该资源'
  39 + break;
  40 + case 405:
  41 + err.messages = '请求方法未允许'
  42 + break;
  43 + case 408:
  44 + err.messages = '请求超时'
  45 + break;
  46 + case 500:
  47 + err.messages = '服务器端出错'
  48 + break;
  49 + case 501:
  50 + err.messages = '网络未实现'
  51 + break;
  52 + case 502:
  53 + err.messages = '网络错误'
  54 + break;
  55 + case 503:
  56 + err.messages = '服务不可用'
  57 + break;
  58 + case 504:
  59 + err.messages = '网络超时'
  60 + break;
  61 + case 505:
  62 + err.messages = 'http版本不支持该请求'
  63 + break;
  64 + default:
  65 + err.messages = `连接错误${err.response.status}`
  66 + }
  67 + } else {
  68 + err.messages = "连接到服务器失败";
70 69 }
71   -)
  70 + //message.err(err.message)
  71 + //return Promise.reject(err.response)
  72 + return Promise.resolve(err)
  73 +})
  74 +//基础url前缀
  75 +//axios.defaults.baseURL = '/api'
  76 +axios.defaults.baseURL = 'http://39.98.54.240:8093/';
  77 +//设置默认请求头
  78 +// axios.defaults.withCredentials=true;//让ajax携带cookie
  79 +
  80 +// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
  81 +axios.defaults.timeout = 10000
  82 +
  83 +
  84 +function post(url, params) {
  85 + return new Promise((resolve,reject) => {
  86 + axios({
  87 + method: 'post',
  88 + url,
  89 + data: params,
  90 + cancelToken: new CancelToken(c => {
  91 + cancel = c
  92 + })
  93 + }).then(res => {
  94 + resolve(res)
  95 + })
  96 + })
  97 +}
  98 +
  99 +
  100 +export {post}
72 101  
73   -export default service
... ...
src/views/berthsection.vue
  View file @adf82b6
... ... @@ -6,7 +6,7 @@
6 6 <li class="pos-rel">
7 7 <halfPieChart :chart-data="pieChartData"></halfPieChart>
8 8 <div class="pos-abs halfPieText">
9   - <p>78%</p>
  9 + <p>{{scale}}%</p>
10 10 <p>占有</p>
11 11 </div>
12 12 </li>
... ... @@ -27,7 +27,7 @@
27 27 import titlesection from '../components/titlesection'
28 28 import totalsection from '../components/total'
29 29 import halfPieChart from '../components/halfPieChart'
30   -import {fetchList} from '../api/api'
  30 +import { berthAddress } from '../api/api'
31 31  
32 32 export default {
33 33 name: 'berthsection',
... ... @@ -39,23 +39,37 @@ export default {
39 39 data() {
40 40 return {
41 41 pieChartData: {
42   - yData: [100,200],
  42 + yData: [1,1],
43 43 legendData: ['空余','占有']
44 44 },
45   - totalVal: '21973',
46   - free: '454123',
47   - nofree: '5125'
  45 + totalVal: '',
  46 + free: '',
  47 + nofree: '',
  48 + scale: ''
48 49 }
49 50 },
50 51 created() {
  52 + this.getList()
51 53 },
52 54 methods: {
53 55 getList() {
54   - fetchList()
55   - .then(res => {
56   - console.log(res);
57   -
58   - });
  56 + berthAddress({
  57 + orgIds: this.GLOBAL.paramsvariables
  58 + }).then((res)=>{
  59 + let data = res.data.data
  60 + console.log(data)
  61 + this.totalVal = data.allBerthNum.toString()
  62 + this.free = data.freeBerthNum
  63 + this.nofree = data.isOccupyBertnNum
  64 + this.pieChartData = {
  65 + yData: [data.freeBerthNum,data.isOccupyBertnNum],
  66 + legendData: ['空余','占有']
  67 + }
  68 + // this.pieChartData.yData = [10,20]
  69 + // this.pieChartData.yData.push(data.freeBerthNum)
  70 + // this.pieChartData.yData.push(data.isOccupyBertnNum)
  71 + this.scale = ((data.isOccupyBertnNum/(data.freeBerthNum+data.isOccupyBertnNum))*100).toFixed(0)
  72 + })
59 73 },
60 74 }
61 75 }
... ...
src/views/dicisection.vue
  View file @adf82b6
... ... @@ -15,8 +15,7 @@
15 15 <script>
16 16 import titlesection from '../components/titlesection'
17 17 import totalsection from '../components/total'
18   -import {fetchList} from '../api/api'
19   -
  18 +import { deviceAddress } from '../api/api'
20 19 export default {
21 20 name: 'dicisection',
22 21 components: {
... ... @@ -25,35 +24,22 @@ export default {
25 24 },
26 25 data() {
27 26 return {
28   - totalVal: '219734',
29   - diciList:[
30   - {
31   - name: '正常',
32   - count: '23454',
33   - percentage: '80%'
34   - },
35   - {
36   - name: '异常',
37   - count: '12192',
38   - percentage: '60%'
39   - },
40   - {
41   - name: '正常',
42   - count: '6235',
43   - percentage: '40%'
44   - }
45   - ]
  27 + totalVal: '',
  28 + diciList:[]
46 29 }
47 30 },
48 31 created() {
  32 + this.getList()
49 33 },
50 34 methods: {
51 35 getList() {
52   - fetchList()
53   - .then(res => {
54   - console.log(res);
55   -
56   - });
  36 + deviceAddress({
  37 + orgIds: this.GLOBAL.paramsvariables
  38 + }).then((response)=>{
  39 + const data = response.data.data
  40 + this.totalVal = data[1].num.toString()
  41 + this.diciList = data[1].dicList
  42 + })
57 43 },
58 44 }
59 45 }
... ...
src/views/mapsection.vue
  View file @adf82b6
... ... @@ -4,28 +4,28 @@
4 4 <li>
5 5 <img src="../assets/img/parkingtotal.svg">
6 6 <div>
7   - <p>{{parkingtotal|formatNum}}</p>
  7 + <p> <countTo :startVal='startVal' :endVal='parkingtotal' :duration='durationTime'></countTo></p>
8 8 <p>停车场总数</p>
9 9 </div>
10 10 </li>
11 11 <li>
12 12 <img src="../assets/img/membertotal.svg">
13 13 <div>
14   - <p>{{membertotal|formatNum}}</p>
  14 + <p><countTo :startVal='startVal' :endVal='membertotal' :duration='durationTime'></countTo></p>
15 15 <p>会员总数</p>
16 16 </div>
17 17 </li>
18 18 <li>
19 19 <img src="../assets/img/incometotal.svg">
20 20 <div>
21   - <p>{{incometotal|formatNum}}</p>
  21 + <p><countTo :startVal='startVal' :endVal='incometotal' :duration='durationTime'></countTo></p>
22 22 <p>今日收入总数</p>
23 23 </div>
24 24 </li>
25 25 <li>
26 26 <img src="../assets/img/ordertotal.svg">
27 27 <div>
28   - <p>{{ordertotal|formatNum}}</p>
  28 + <p>{{getOrderNum|formatNum}}</p>
29 29 <p>今日订单数</p>
30 30 </div>
31 31 </li>
... ... @@ -38,7 +38,7 @@
38 38 </ul>
39 39 <div class="park-wrap" ref="parkwrap">
40 40 <ul class="content" ref="">
41   - <li v-for="(item, index) in parkList" :key="index" :title="item.name" :class="{'current-active':index===currentIndex}" @click="currentPark(item, index)">{{ item.name }}</li>
  41 + <li v-for="(item, index) in parkList" :key="index" :title="item.areaName" :class="{'current-active':index===currentIndex}" @click="currentPark(item.id, index)">{{ item.areaName }}</li>
42 42 </ul>
43 43 </div>
44 44 <div class="flexfm" ></div>
... ... @@ -50,35 +50,58 @@ import BScroll from &#39;better-scroll&#39;
50 50 import busyCar from '../assets/img/busy-status.png'; //以import的方式导入图片文件
51 51 import normalCar from '../assets/img/normal-status.png'; //以import的方式导入图片文件
52 52 import idleCar from '../assets/img/idle-status.png'; //以import的方式导入图片文件
  53 +import countTo from 'vue-count-to'
  54 +import { parkAddress, memberAddress, incomeAddress, serviceAddress, parkListAddress } from '../api/api'
  55 +import { mapGetters } from 'vuex'
53 56  
54 57 export default {
55 58 name: 'mapsection',
  59 + components: { countTo },
56 60 data() {
57 61 return {
58   - parkingtotal: '7338',
59   - membertotal: '738',
60   - incometotal: '1156738',
  62 + durationTime:3000,
  63 + startVal: 0,
  64 + parkingtotal: 0,
  65 + membertotal: 0,
  66 + incometotal: 0,
61 67 ordertotal: '6738',
62   - parkList: [
63   - {name:'西局街道办事处12321312312312',id:'1'},
64   - {name:'西局街道办事处',id:'2'},
65   - {name:'西局街道办事处',id:'3'},
66   - {name:'西局街道办事处',id:'4'},
67   - {name:'西局街道办事处',id:'5'},
68   - {name:'西局街道办事处',id:'6'},
69   - {name:'西局街道办事处',id:'7'},
70   - {name:'西局街道办事处',id:'8'},
71   - {name:'西局街道办事处',id:'9'},
72   - {name:'西局街道办事处',id:'10'},
73   - {name:'西局街道办事处',id:'11'},
74   - {name:'西局街道办事处',id:'12'},
75   -
76   - ],
77   - currentIndex:0
  68 + parkList: [],
  69 + currentIndex:0,
  70 + firstItem:''
78 71 }
79 72 },
  73 + computed: {
  74 + ...mapGetters(['getOrderNum'])
  75 + },
80 76 created() {
81   -
  77 + parkAddress({
  78 + orgIds: this.GLOBAL.paramsvariables
  79 + }).then((response)=>{
  80 + const data = response.data.data
  81 + this.parkingtotal = data
  82 + })
  83 + memberAddress({
  84 + orgIds: this.GLOBAL.paramsvariables
  85 + }).then((response)=>{
  86 + const data = response.data.data
  87 + this.membertotal = data.registerNum
  88 + })
  89 + incomeAddress({
  90 + orgIds: this.GLOBAL.paramsvariables
  91 + }).then((response)=>{
  92 + const data = response.data.data
  93 + this.incometotal = data.totalPay
  94 + })
  95 + serviceAddress({
  96 + orgId: '10003'
  97 + }).then((response)=>{
  98 + const data = response.data.data
  99 + console.log(data)
  100 + this.parkList = data
  101 + console.log(data)
  102 + this.firstItem = data[0].id
  103 + this.currentPark(this.firstItem,0)
  104 + })
82 105 },
83 106 mounted() {
84 107 this.$nextTick(() => {
... ... @@ -88,110 +111,132 @@ export default {
88 111 bounce:true,//取消达到边界的缓冲效果
89 112 })
90 113 })
91   - let data = {
92   - nurseryInfo: [
93   - {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:0,free:30,total:1000},
94   - {Name:'万达停车场2',MapPointX:'111.622579',MapPointY:'40.878675',status:1,free:40,total:800},
95   - {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.778675',status:2,free:300,total:500}
96   - ]
97   - }
98   - this.baiduMap(data)
  114 + // let data = {
  115 + // nurseryInfo: [
  116 + // {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:0,free:30,total:1000},
  117 + // {Name:'万达停车场2',MapPointX:'111.622579',MapPointY:'40.878675',status:1,free:40,total:800},
  118 + // {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.778675',status:2,free:300,total:500}
  119 + // ]
  120 + // }
  121 + // this.baiduMap(data)
99 122 },
100 123 methods: {
101 124 currentPark(item, index) {
102   - console.log(item)
103 125 this.currentIndex = index
104   - let data = {
105   - nurseryInfo: [
106   - {Name:'万达停车场11111',MapPointX:'111.742579',MapPointY:'40.818675',status:2,free:300,total:500},
107   - {Name:'万达停车场22222',MapPointX:'111.622579',MapPointY:'40.878675',status:0,free:30,total:1000},
108   - {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.818675',status:1,free:40,total:800}
109   - ]
110   - }
111   - this.baiduMap(data)
  126 + let nurseryInfo = []
  127 +
  128 + parkListAddress({
  129 + blockIds: [item]
  130 + }).then((response)=>{
  131 + const data = response.data.data
  132 + console.log(response)
  133 + nurseryInfo = data
  134 + this.baiduMap(nurseryInfo)
  135 + })
  136 +
  137 +
  138 +
112 139 },
113 140 baiduMap (data) {
114   - var map = new BMap.Map('allmap', {enableMapClick: false})
115   - var point = new BMap.Point(111.742579, 40.818675)
116   - map.centerAndZoom(point, 12)
117   - var mapStyle={ style : "midnight" }
118   - map.setMapStyle(mapStyle);
119   - // var marker = new BMap.Marker(point) // 创建标注
120   - // map.addOverlay(marker) // 将标注添加到地图中
  141 + console.log(data.length)
  142 + if(data.length === 0){
  143 + var map = new BMap.Map('allmap', {enableMapClick: false})
  144 + var point = new BMap.Point(111.742579, 40.878675)
  145 + map.centerAndZoom(point, 14)
  146 + var mapStyle={ style : "midnight" }
  147 + map.enableScrollWheelZoom(true);
  148 + map.setMapStyle(mapStyle);
  149 + // var marker = new BMap.Marker(point) // 创建标注
  150 + // map.addOverlay(marker) // 将标注添加到地图中
  151 + map.clearOverlays();
121 152  
122   - map.clearOverlays();
123   - var i = 0;
124   - var points = [];
125   - for (var item in data.nurseryInfo) {
126   - (function (x) {
127   - var itemthat = item;
128   - //创建标注
129   - var pt = new BMap.Point(data.nurseryInfo[item].MapPointX, data.nurseryInfo[item].MapPointY);
130   - points[i] = pt;
131   - if(data.nurseryInfo[item].status === 0){
  153 + }else{
  154 + var map = new BMap.Map('allmap', {enableMapClick: false})
  155 + var point = new BMap.Point(data[0].lonId, data[0].latId)
  156 + map.centerAndZoom(point, 17)
  157 + var mapStyle={ style : "midnight" }
  158 + map.enableScrollWheelZoom(true);
  159 + map.setMapStyle(mapStyle);
  160 + // var marker = new BMap.Marker(point) // 创建标注
  161 + // map.addOverlay(marker) // 将标注添加到地图中
  162 +
  163 + map.clearOverlays();
  164 + var i = 0;
  165 + var points = [];
  166 + for (var item in data) {
  167 + (function (x) {
  168 + var itemthat = item;
  169 + //创建标注
  170 + var pt = new BMap.Point(data[item].lonId, data[item].latId);
  171 + points[i] = pt;
  172 + if(data[item].freeBrethNum/data[item].plBerthNum == 0){
  173 + var myIcon = new BMap.Icon(busyCar,
  174 + new BMap.Size(29, 40), {
  175 + offset: new BMap.Size(10, 40),
  176 + textColor: '#fff'
  177 + });
  178 + var marker = new BMap.Marker(pt,{icon:myIcon});
  179 + } else if(data[item].freeBrethNum/data[item].plBerthNum <= 0.3){
  180 + var myIcon = new BMap.Icon(normalCar,
  181 + new BMap.Size(29, 40), {
  182 + offset: new BMap.Size(10, 40),
  183 + textColor: '#fff'
  184 + });
  185 + var marker = new BMap.Marker(pt,{icon:myIcon});
  186 + } else {
  187 + var myIcon = new BMap.Icon(idleCar,
  188 + new BMap.Size(29, 40), {
  189 + offset: new BMap.Size(10, 40),
  190 + textColor: '#fff'
  191 + });
  192 + var marker = new BMap.Marker(pt,{icon:myIcon});
  193 + }
132 194 var myIcon = new BMap.Icon(busyCar,
133 195 new BMap.Size(29, 40), {
134 196 offset: new BMap.Size(10, 40),
135 197 textColor: '#fff'
136 198 });
137   - var marker = new BMap.Marker(pt,{icon:myIcon});
138   - } else if(data.nurseryInfo[item].status === 1){
139   - var myIcon = new BMap.Icon(normalCar,
140   - new BMap.Size(29, 40), {
141   - offset: new BMap.Size(10, 40),
142   - textColor: '#fff'
143   - });
144   - var marker = new BMap.Marker(pt,{icon:myIcon});
145   - } else {
146   - var myIcon = new BMap.Icon(idleCar,
147   - new BMap.Size(29, 40), {
148   - offset: new BMap.Size(10, 40),
149   - textColor: '#fff'
150   - });
151   - var marker = new BMap.Marker(pt,{icon:myIcon});
152   - }
153   - console.log(data)
154   - marker.setTop(true,27000000);
155   - map.addOverlay(marker);
156   - var myLabel;
157 199  
158   - marker.addEventListener("mouseover", (e)=> {
159   - var that = this;
160   - console.log(e)
  200 + marker.setTop(true,27000000);
  201 + map.addOverlay(marker);
  202 + var myLabel;
  203 +
  204 + marker.addEventListener("mouseover", (e)=> {
  205 + var that = this;
161 206 myLabel = new BMap.Label(
162 207 `<div class="dislog-wrap">
163   - <div class="dialog-header" title="${data.nurseryInfo[itemthat].Name}">${data.nurseryInfo[itemthat].Name}</div>
164   - <ul class="dislog-body">
165   - <li><div>${data.nurseryInfo[itemthat].free}</div><div>空闲</div></li>
166   - <li><div>/</div><div></div></li>
167   - <li><div>${data.nurseryInfo[itemthat].total}</div><div>总数</div></li>
168   - </ul>
169   - </div>`,
170   - {
171   - offset: new BMap.Size(25, -35), //label的偏移量，为了让label的中心显示在点上
172   - position: pt
173   - });
  208 + <div class="dialog-header" title="${data[itemthat].plAddress}">${data[itemthat].plAddress}</div>
  209 + <ul class="dislog-body">
  210 + <li><div>${data[itemthat].freeBrethNum}</div><div>空闲</div></li>
  211 + <li><div>/</div><div></div></li>
  212 + <li><div>${data[itemthat].plBerthNum}</div><div>总数</div></li>
  213 + </ul>
  214 + </div>`,
  215 + {
  216 + offset: new BMap.Size(25, -35), //label的偏移量，为了让label的中心显示在点上
  217 + position: pt
  218 + });
  219 + myLabel.setStyle({
  220 + // color: "#0f0",
  221 + // fontSize: "12px",
  222 + padding: "0",
  223 + // whiteSpace: "normal",
  224 + backgroundColor: "",
  225 + border: "0px",
  226 + zIndex: "1000"
  227 + }
  228 + );
  229 + marker.setLabel(myLabel)
  230 + marker.setTop(true,27000000);
174 231  
175   - myLabel.setStyle({
176   - // color: "#0f0",
177   - // fontSize: "12px",
178   - padding: "0",
179   - // whiteSpace: "normal",
180   - backgroundColor: "",
181   - border: "0px",
182   - zIndex: "1000"
183   - }
184   - );
185   - marker.setLabel(myLabel)
186   - marker.setTop(true,27000000);
187   -
188   - });
  232 + });
  233 + marker.addEventListener("mouseout", function (e) {
  234 + map.removeOverlay(myLabel);
  235 + });
  236 + i++;
  237 + })(i);
  238 + }
189 239  
190   - marker.addEventListener("mouseout", function (e) {
191   - map.removeOverlay(myLabel);
192   - });
193   - i++;
194   - })(i);
195 240 }
196 241  
197 242 }
... ... @@ -215,7 +260,7 @@ export default {
215 260 display: flex;
216 261 padding-top: 17px;
217 262 padding-bottom: 18px;
218   - background:rgba(0,45,140,.6);
  263 + background:rgba(0,45,140,.9);
219 264 li{
220 265 flex: 1;
221 266 height: 45px;
... ...
src/views/newssection.vue
  View file @adf82b6
1 1 <template>
2 2 <div >
3 3 <titlesection title="消息"></titlesection>
4   - <div class="nwwest-roll flexfm news-wrap" id="nwwest-roll">
5   - <ul id="roll-ul">  
6   - <li v-for="item in list" ref="rollul" :class="{anim:animate==true}">
7   -              <div class="noticetype1" v-if="item.type===1"></div>
8   - <div class="noticetype2" v-else-if="item.type===2"></div>
9   - <div class="errortype1" v-else-if="item.type===3"></div>
10   - <div class="errortype2" v-else></div>
11   -              <div class="text" :title="item.site">{{item.site}}</div>
12   -              <div class="time">{{item.gsmc}}</div>
  4 + <div class="content">
  5 + <ul class="news-wrap">
  6 + <li class="orderNum">订单编号</li>
  7 + <li class="orderPark">停车场</li>
  8 + <li class="orderMoney">收费金额</li>
  9 + </ul>
  10 + <div class="nwwest-roll news-wrap" id="nwwest-roll">
  11 + <ul id="roll-ul" class="roll-ul" :style="{ top }">
  12 + <li v-for="(item,index) in list" ref="rollul" :key="index">
  13 + <div :title="item.orderId">{{item.orderId}}</div>
  14 + <div :title="item.plName">{{item.plName}}</div>
  15 + <div :title="item.orderActFee">{{item.orderActFee|formatMoney}}</div>
13 16 </li>
14 17 </ul>
15 18 </div>
  19 + </div>
16 20 </div>
17 21 </template>
18 22  
19 23 <script>
20 24 import titlesection from '../components/titlesection'
  25 +import { msgAddress } from '../api/api'
21 26  
22 27 export default {
23 28 name: 'newssection',
... ... @@ -26,26 +31,38 @@ export default {
26 31 },
27 32 data() {
28 33 return {
29   - animate: true,
30   - list: [
31   - {"type":1, "name": "于先生1", "site": "北京门头沟区1北京门头沟区1北京门头沟区1", "gsmc": "10-02" },
32   - {"type":2, "name": "于先生2", "site": "北京门头沟区2", "gsmc": "10-02" },
33   - {"type":3, "name": "于先生3", "site": "北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3", "gsmc": "10-02" },
34   - {"type":4, "name": "于先生4", "site": "北京门头沟区4", "gsmc": "10-02" },
35   - {"type":1, "name": "于先生5", "site": "北京门头沟区5", "gsmc": "10-02" },
36   - {"type":2, "name": "于先生6", "site": "北京门头北京门头沟区6北京门头沟区6北京门头沟区6北京门头沟区6沟区6", "gsmc": "10-02" },
37   - {"type":3, "name": "于先生7", "site": "北京门头沟区7", "gsmc": "10-02" },
38   - {"type":4, "name": "于先生8", "site": "北京门头沟区8", "gsmc": "10-02" },
39   - {"type":1, "name": "于先生9", "site": "北京门头北京门头沟区9北京门头沟区9北京门头沟区9沟区9", "gsmc": "10-02" },
40   - {"type":2, "name": "于先生10", "site": "北京门头沟区10", "gsmc": "10-02" },
41   - {"type":3, "name": "于先生11", "site": "北京门北京门头沟区11北京门头沟区11北京门头沟区11头沟区11", "gsmc": "10-02" }
42   - ]
  34 + orderList:"",//公告列表
  35 + //marqueeHeight: '100%',
  36 + name: '订单公告',
  37 + activeIndex: 0,
  38 + intnum: undefined,
  39 + list: []
  40 + }
  41 + },
  42 + computed: {
  43 + top() {
  44 + return - this.activeIndex * 36 + 'px';
43 45 }
44 46 },
45 47 created() {
46   - setInterval(this.scroll, 2000)
  48 + this.onLoad()
47 49 },
48 50 methods: {
  51 + onLoad() {
  52 + msgAddress({
  53 + orgIds: this.GLOBAL.paramsvariables
  54 + }).then((response)=>{
  55 + let data = response.data.data
  56 + this.list = data;
  57 + var that = this
  58 + this.intnum = setInterval(_ => {
  59 + that.list.push(that.list[this.activeIndex]);
  60 + this.activeIndex += 1;
  61 + }, 1000);
  62 + }).catch((response)=>{
  63 + console.log(response);
  64 + })
  65 + },
49 66 scroll() {
50 67 this.animate = !this.animate;
51 68 var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
... ... @@ -55,59 +72,92 @@ export default {
55 72 that.animate = !that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
56 73 }, 0)
57 74 }
  75 + },
  76 + filters:{
  77 + formatMoney: function (value) {
  78 + return (value/100).toFixed(2)+' 元'
  79 + }
58 80 }
59 81 }
60 82 </script>
61 83  
62 84 <style lang="scss" scoped>
63   - @mixin newsType($img){
64   - margin-left: 23px;
65   - margin-right: 23px;
66   - width: 26px;
67   - height: 26px;
68   - background-image: url($img);
69   - background-repeat:no-repeat ;
70   - background-position: center center ;
  85 + .content{
  86 + height: calc(100% - 30px);
  87 + }
  88 + .theme-card{
  89 + height: 100%;
71 90 }
  91 + .news-wrap{
  92 + height: 40px;
  93 + line-height: 40px;
  94 + font-size: 14px;
  95 + .roll-ul{
  96 + height: 100%;
  97 + position: relative;
  98 + transition: top 0.5s;
  99 + }
  100 + li{
  101 + height: 40px;
  102 + float: left;
  103 + padding-left: 0;
  104 + padding-left: 30px;
  105 + background-size: 14px 14px;
  106 + background-position: 10px center;
  107 + background-repeat: no-repeat;
  108 + list-style: none;
  109 + overflow: hidden;
  110 + color: #fff;
  111 + }
  112 + .orderNum{
  113 + width: 110px;
  114 + background-image: url(../assets/img/orderNum.svg) ;
  115 + }
  116 + .orderMoney{
  117 + width: 80px;
  118 + background-image: url(../assets/img/orderMoney.svg) ;
  119 + }
  120 + .orderPark{
  121 + width: calc(100% - 230px);
  122 + background-image: url(../assets/img/orderPark.svg) ;
  123 + }
  124 +
  125 + }
  126 +
72 127 .nwwest-roll {
73 128 width: 100%;
74   - height: 210px;
  129 + height: calc(100% - 60px);
75 130 overflow: hidden;
76 131 transition: all 0.5s;
77 132 li{
  133 + width: 100%;
78 134 height: 26px;
79 135 line-height: 26px;
80 136 font-size: 12px;
  137 + padding-left: 10px;
81 138 color: #fff;
82   - display: flex;
83 139 background:rgba(255,255,255,.1);
84 140 margin-bottom: 10px;
85   - .noticetype1{
86   - @include newsType("../assets/img/noticetype1.png");
87   - }
88   - .noticetype2{
89   - @include newsType("../assets/img/noticetype2.png");
90   - }
91   - .errortype1{
92   - @include newsType("../assets/img/errortype1.png");
93   - }
94   - .errortype2{
95   - @include newsType("../assets/img/errortype1.png");
96   - }
97   - .text{
98   - flex: 1;
99   - overflow:hidden;
100   - text-overflow:ellipsis;
101   - }
102   - .time{
103   - padding-left: 23px;
104   - padding-right: 23px;
105   - width: 81px;
  141 + div{
  142 + float: left;
  143 + overflow: hidden;
  144 + white-space: nowrap;
  145 + text-overflow: ellipsis;
  146 + &:nth-of-type(1){
  147 + width: 110px;
  148 + }
  149 + &:nth-of-type(2){
  150 + width: calc(100% - 220px);
  151 + }
  152 + &:nth-of-type(3){
  153 + width: 80px;
  154 + }
  155 +
106 156 }
107 157 }
108 158 }
109   - .anim {
110   -  transition: all 0.5s;
  159 + .anim {
  160 +  transition: all 0.5s;
111 161  
112   - }
  162 + }
113 163 </style>
... ...
src/views/outsection.vue
  View file @adf82b6
... ... @@ -8,9 +8,8 @@
8 8  
9 9 <script>
10 10 import titlesection from '../components/titlesection'
11   -import {fetchList} from '../api/api'
12 11 import lineChart from '../components/lineChart'
13   -
  12 +import { weekAddress } from '../api/api'
14 13 export default {
15 14 name: 'outsection',
16 15 components: {
... ... @@ -19,27 +18,35 @@ export default {
19 18 },
20 19 data() {
21 20 return {
22   - lineChartData: {
23   - xData: ['周一','周二','周三','周四','周五','周六','周日'],
24   - yData: {
25   - indata:[120, 132, 101, 134, 90, 230, 210],
26   - outdata:[220, 182, 191, 234, 290, 330, 310],
27   - },
28   - legendData: ['出场','进场']
29   - },
30   - dzNum: '23454',
31   - ydpNum: '4454'
  21 + lineChartData: {},
32 22 }
33 23 },
34 24 created() {
  25 + this.getList()
35 26 },
36 27 methods: {
37 28 getList() {
38   - fetchList()
39   - .then(res => {
40   - console.log(res);
41   -
42   - });
  29 + weekAddress({
  30 + orgIds: this.GLOBAL.paramsvariables
  31 + }).then((response)=>{
  32 + const data = response.data.data
  33 + let xData = [], indata = [], outdata = [], lastInNum;
  34 + for (let i=0;i<data.length;i++){
  35 + xData.push(data[i].queryDate)
  36 + indata.push(data[i].inNum)
  37 + outdata.push(data[i].outNum)
  38 + lastInNum = data[data.length-1].inNum
  39 + }
  40 + this.$store.dispatch('transferOrderTotal',lastInNum)
  41 + this.lineChartData = {
  42 + xData: xData,
  43 + yData: {
  44 + indata:indata,
  45 + outdata:outdata,
  46 + },
  47 + legendData: ['出场','进场']
  48 + }
  49 + })
43 50 },
44 51 }
45 52 }
... ...
src/views/pdasection.vue
  View file @adf82b6
... ... @@ -10,14 +10,7 @@
10 10 import titlesection from '../components/titlesection'
11 11 import totalsection from '../components/total'
12 12 import barChart from '../components/barChart'
13   -import {fetchList} from '../api/api'
14   -
15   -const barChartData = {
16   - data: {
17   - yData: [100, 80, 21],
18   - xData: ['正常', '异常', '故障']
19   - }
20   -}
  13 +import { deviceAddress } from '../api/api'
21 14  
22 15 export default {
23 16 name: 'pdasection',
... ... @@ -28,8 +21,11 @@ export default {
28 21 },
29 22 data() {
30 23 return {
31   - totalVal: '213734',
32   - barChartData: barChartData.data
  24 + totalVal: '',
  25 + barChartData: {
  26 + // yData: [100,200,300],
  27 + // xData: ['正常', '异常', '故障']
  28 + }
33 29 }
34 30 },
35 31 created() {
... ... @@ -37,11 +33,18 @@ export default {
37 33 },
38 34 methods: {
39 35 getList() {
40   - fetchList()
41   - .then(res => {
42   - console.log(res);
43   -
44   - });
  36 + deviceAddress({
  37 + orgIds: this.GLOBAL.paramsvariables
  38 + }).then((response)=>{
  39 + const data = response.data.data
  40 + this.totalVal = data[0].num.toString()
  41 + let Xdata = data[0].xData.split(',')
  42 + let Ydata = data[0].yData.split(',')
  43 + this.barChartData = {
  44 + yData: Ydata,
  45 + xData: Xdata
  46 + }
  47 + })
45 48 },
46 49 }
47 50 }
... ...
src/views/sfysection.vue
  View file @adf82b6
... ... @@ -22,7 +22,7 @@
22 22 <script>
23 23 import titlesection from '../components/titlesection'
24 24 import totalsection from '../components/total'
25   -import {fetchList} from '../api/api'
  25 +import { tollAddress } from '../api/api'
26 26  
27 27 export default {
28 28 name: 'sfysection',
... ... @@ -32,20 +32,24 @@ export default {
32 32 },
33 33 data() {
34 34 return {
35   - totalVal: '219734',
36   - signNum: '454',
37   - nosignNum: '5125'
  35 + totalVal: '',
  36 + signNum: '',
  37 + nosignNum: ''
38 38 }
39 39 },
40 40 created() {
  41 + this.getList()
41 42 },
42 43 methods: {
43 44 getList() {
44   - fetchList()
45   - .then(res => {
46   - console.log(res);
47   -
48   - });
  45 + tollAddress({
  46 + orgIds: this.GLOBAL.paramsvariables
  47 + }).then((response)=>{
  48 + let data = response.data.data
  49 + this.totalVal = (data.allTollCollector).toString()
  50 + this.signNum = data.signInTollCollector
  51 + this.nosignNum = data.unSignInTollCollector
  52 + })
49 53 },
50 54 }
51 55 }
... ...
src/views/vehiclesection.vue
  View file @adf82b6
... ... @@ -8,10 +8,8 @@
8 8  
9 9 <script>
10 10 import titlesection from '../components/titlesection'
11   -import {fetchList} from '../api/api'
12 11 import lineChart from '../components/lineChart'
13   -
14   -
  12 +import { dayAddress } from '../api/api'
15 13  
16 14 export default {
17 15 name: 'vehiclesection',
... ... @@ -21,27 +19,35 @@ export default {
21 19 },
22 20 data() {
23 21 return {
24   - lineChartData: {
25   - xData: ['周一','周二','周三','周四','周五','周六','周日'],
26   - yData: {
27   - indata:[120, 132, 101, 134, 90, 230, 210],
28   - outdata:[220, 182, 191, 234, 290, 330, 310],
29   - },
30   - legendData: ['出场1','进场']
31   - },
  22 + lineChartData: {},
32 23 dzNum: '23454',
33 24 ydpNum: '4454'
34 25 }
35 26 },
36 27 created() {
  28 + this.getList()
37 29 },
38 30 methods: {
39 31 getList() {
40   - fetchList()
41   - .then(res => {
42   - console.log(res);
43   -
44   - });
  32 + dayAddress({
  33 + orgIds: this.GLOBAL.paramsvariables
  34 + }).then((response)=>{
  35 + const data = response.data.data
  36 + let xData = [], indata = [], outdata = []
  37 + for (let i=0;i<data.length;i++){
  38 + xData.push(data[i].queryDate)
  39 + indata.push(data[i].inNum)
  40 + outdata.push(data[i].outNum)
  41 + }
  42 + this.lineChartData = {
  43 + xData: xData,
  44 + yData: {
  45 + indata:indata,
  46 + outdata:outdata,
  47 + },
  48 + legendData: ['出场','进场']
  49 + }
  50 + })
45 51 },
46 52 }
47 53 }
... ...
src/views/youdaopingsection.vue
  View file @adf82b6
1 1 <template>
2 2 <div>
3   - <titlesection title="道闸/诱导屏"></titlesection>
  3 + <titlesection title="支付方式"></titlesection>
4 4 <ul class="flexfm ydp-dz-wrap">
5 5 <li>
6 6 <div>
7 7 <div class="bg-wrap">
8   - <p class="dznum-total">{{ dzNum|formatNum }}</p>
9   - <p class="name">道闸</p>
  8 + <p class="dznum-total">{{ wxNum|formatNum }}</p>
  9 + <p class="name">微信</p>
10 10 </div>
11 11 </div>
12 12 <div>
13 13 <div class="bg-wrap">
14   - <p class="ydpnum-total">{{ ydpNum|formatNum }}</p>
15   - <p class="name">诱导屏</p>
  14 + <p class="ydpnum-total">{{ zfbNum|formatNum }}</p>
  15 + <p class="name">支付宝</p>
16 16 </div>
17 17 </div>
18 18 </li>
19 19 <li>
20   - <allPieChart :chart-data="pieChartData"/>
  20 + <div>
  21 + <div class="bg-wrap">
  22 + <p class="dznum-total">{{ xjNum|formatNum }}</p>
  23 + <p class="name">现金</p>
  24 + </div>
  25 + </div>
  26 + <div>
  27 + <div class="bg-wrap">
  28 + <p class="ydpnum-total">{{ qtNum|formatNum }}</p>
  29 + <p class="name">其他</p>
  30 + </div>
  31 + </div>
21 32 </li>
22 33 </ul>
23 34 </div>
... ... @@ -26,8 +37,7 @@
26 37 <script>
27 38 import titlesection from '../components/titlesection'
28 39 import allPieChart from '../components/allPieChart'
29   -import {fetchList} from '../api/api'
30   -
  40 +import { moneyAddress } from '../api/api'
31 41  
32 42 export default {
33 43 name: 'youdaopingsection',
... ... @@ -37,20 +47,30 @@ export default {
37 47 },
38 48 data() {
39 49 return {
40   - pieChartData: [35, 55],
41   - dzNum: '23454',
42   - ydpNum: '4454'
  50 + pieChartData: [],
  51 + wxNum: '',
  52 + zfbNum: '',
  53 + xjNum: '',
  54 + qtNum: '',
43 55 }
44 56 },
45 57 created() {
  58 + this.getList()
46 59 },
47 60 methods: {
48 61 getList() {
49   - fetchList()
50   - .then(res => {
51   - console.log(res);
52   -
53   - });
  62 + moneyAddress({
  63 + orgIds: this.GLOBAL.paramsvariables
  64 + }).then((response)=>{
  65 + const data = response.data.data
  66 + this.wxNum = data.wxPay
  67 + this.zfbNum = data.aliPay
  68 + this.qtNum = data.otherPay
  69 + this.xjNum = data.totalPay - data.aliPay - data.wxPay - data.otherPay
  70 + // this.dzNum = data[3].num
  71 + // this.ydpNum = data[2].num
  72 + // this.pieChartData = [data[3].num,data[2].num]
  73 + })
54 74 },
55 75 }
56 76 }
... ... @@ -63,8 +83,8 @@ export default {
63 83 padding: 0 23px;
64 84 li{
65 85 height: 100%;
66   - flex: 1;
67   - &:nth-of-type(1)>div{
  86 + width: 50%;
  87 + >div{
68 88 height: 50%;
69 89 .bg-wrap{
70 90 width: 115px;
... ...