调取接口

liuqimichale
1 parent b5eb431c
Showing 21 changed files with 637 additions and 411 deletions
index.html
package-lock.json
package.json
src/api/api.js
src/components/allPieChart.vue
src/components/barChart.vue
src/components/halfPieChart.vue
src/components/lineChart.vue
src/main.js
src/store/store.js
src/styles/reset.css
src/utils/request.js
src/views/berthsection.vue
src/views/dicisection.vue
src/views/mapsection.vue
src/views/newssection.vue
src/views/outsection.vue
src/views/pdasection.vue
src/views/sfysection.vue
src/views/vehiclesection.vue
@@ -7,6 +7,7 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=1200">
     <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
+    <meta http-equiv="refresh" content="60">
     <title>监控</title>
     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cuMSxNl5LOY6sf1M3nDGtG6tGXl5a0Bb"></script>
   </head>
@@ -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",
@@ -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",
-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)
+
+
@@ -36,8 +36,10 @@ export default {
     }
   },
   watch: {
-    chartData: {
-      deep: true,
+    chartData: function () {
+      this.$nextTick(()=>{
+        this.initChart()
+      })
     }
   },
   mounted() {
@@ -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: {
@@ -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)
     }
   }
@@ -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) {
@@ -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 &#39;./filters/filters&#39;
 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: '<App/>'
 })
+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;
@@ -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;
+//引入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
@@ -6,7 +6,7 @@
       <li class="pos-rel">
         <halfPieChart :chart-data="pieChartData"></halfPieChart>
         <div class="pos-abs halfPieText">
-          <p>78%</p>
+          <p>{{scale}}%</p>
           <p>占有</p>
         </div>
       </li>
@@ -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)
+      })
     },
   }
 }
@@ -15,8 +15,7 @@
 <script>
 import titlesection from '../components/titlesection'
 import totalsection from '../components/total'
-import {fetchList} from '../api/api'
-
+import { deviceAddress } from '../api/api'
 export default {
   name: 'dicisection',
   components: {
@@ -25,35 +24,22 @@ export default {
   },
   data() {
     return {
-      totalVal: '219734',
-      diciList:[
-        {
-          name: '正常',
-          count: '23454',
-          percentage: '80%'
-        },
-        {
-          name: '异常',
-          count: '12192',
-          percentage: '60%'
-        },
-        {
-          name: '正常',
-          count: '6235',
-          percentage: '40%'
-        }
-      ]
+      totalVal: '',
+      diciList:[]
     }
   },
   created() {
+    this.getList()
   },
   methods: {
     getList() {
-      fetchList()
-      .then(res => {
-        console.log(res);
-
-      });
+      deviceAddress({
+        orgIds: this.GLOBAL.paramsvariables
+      }).then((response)=>{
+        const data = response.data.data
+        this.totalVal = data[1].num.toString()
+        this.diciList = data[1].dicList
+      })
     },
   }
 }
@@ -4,28 +4,28 @@
         <li>
           <img src="../assets/img/parkingtotal.svg">
           <div>
-            <p>{{parkingtotal|formatNum}}</p>
+            <p> <countTo :startVal='startVal' :endVal='parkingtotal' :duration='durationTime'></countTo></p>
             <p>停车场总数</p>
           </div>
         </li>
         <li>
           <img src="../assets/img/membertotal.svg">
           <div>
-            <p>{{membertotal|formatNum}}</p>
+            <p><countTo :startVal='startVal' :endVal='membertotal' :duration='durationTime'></countTo></p>
             <p>会员总数</p>
           </div>
         </li>
         <li>
           <img src="../assets/img/incometotal.svg">
           <div>
-            <p>{{incometotal|formatNum}}</p>
+            <p><countTo :startVal='startVal' :endVal='incometotal' :duration='durationTime'></countTo></p>
             <p>今日收入总数</p>
           </div>
         </li>
         <li>
           <img src="../assets/img/ordertotal.svg">
           <div>
-            <p>{{ordertotal|formatNum}}</p>
+            <p>{{getOrderNum|formatNum}}</p>
             <p>今日订单数</p>
           </div>
         </li>
@@ -38,7 +38,7 @@
       </ul>
       <div class="park-wrap" ref="parkwrap">
           <ul class="content" ref="">
-            <li v-for="(item, index) in parkList" :key="index" :title="item.name" :class="{'current-active':index===currentIndex}" @click="currentPark(item, index)">{{ item.name }}</li>
+            <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>
           </ul>
       </div>
       <div class="flexfm" ></div>
@@ -50,35 +50,58 @@ import BScroll from &#39;better-scroll&#39;
 import busyCar from '../assets/img/busy-status.png'; //以import的方式导入图片文件
 import normalCar from '../assets/img/normal-status.png'; //以import的方式导入图片文件
 import idleCar from '../assets/img/idle-status.png'; //以import的方式导入图片文件
+import countTo from 'vue-count-to'
+import { parkAddress, memberAddress, incomeAddress, serviceAddress, parkListAddress } from '../api/api'
+import { mapGetters } from 'vuex'
 export default {
   name: 'mapsection',
+  components: { countTo },
   data() {
     return {
-      parkingtotal: '7338',
-      membertotal: '738',
-      incometotal: '1156738',
+      durationTime:3000,
+      startVal: 0,
+      parkingtotal: 0,
+      membertotal: 0,
+      incometotal: 0,
       ordertotal: '6738',
-      parkList: [
-        {name:'西局街道办事处12321312312312',id:'1'},
-        {name:'西局街道办事处',id:'2'},
-        {name:'西局街道办事处',id:'3'},
-        {name:'西局街道办事处',id:'4'},
-        {name:'西局街道办事处',id:'5'},
-        {name:'西局街道办事处',id:'6'},
-        {name:'西局街道办事处',id:'7'},
-        {name:'西局街道办事处',id:'8'},
-        {name:'西局街道办事处',id:'9'},
-        {name:'西局街道办事处',id:'10'},
-        {name:'西局街道办事处',id:'11'},
-        {name:'西局街道办事处',id:'12'},
-
-      ],
-      currentIndex:0
+      parkList: [],
+      currentIndex:0,
+      firstItem:''
     }
   },
+  computed: {
+    ...mapGetters(['getOrderNum'])
+  },
   created() {
-
+    parkAddress({
+      orgIds: this.GLOBAL.paramsvariables
+    }).then((response)=>{
+      const data = response.data.data
+      this.parkingtotal = data
+    })
+    memberAddress({
+      orgIds: this.GLOBAL.paramsvariables
+    }).then((response)=>{
+      const data = response.data.data
+      this.membertotal = data.registerNum
+    })
+    incomeAddress({
+      orgIds: this.GLOBAL.paramsvariables
+    }).then((response)=>{
+      const data = response.data.data
+      this.incometotal = data.totalPay
+    })
+    serviceAddress({
+      orgId: '10003'
+    }).then((response)=>{
+      const data = response.data.data
+      console.log(data)
+      this.parkList = data
+      console.log(data)
+      this.firstItem = data[0].id
+      this.currentPark(this.firstItem,0)
+    })
   },
   mounted() {
     this.$nextTick(() => {
@@ -88,110 +111,132 @@ export default {
         bounce:true,//取消达到边界的缓冲效果
       })
     })
-    let data = {
-      nurseryInfo: [
-        {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:0,free:30,total:1000},
-        {Name:'万达停车场2',MapPointX:'111.622579',MapPointY:'40.878675',status:1,free:40,total:800},
-        {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.778675',status:2,free:300,total:500}
-      ]
-    }
-    this.baiduMap(data)
+    // let data = {
+    //   nurseryInfo: [
+    //     {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:0,free:30,total:1000},
+    //     {Name:'万达停车场2',MapPointX:'111.622579',MapPointY:'40.878675',status:1,free:40,total:800},
+    //     {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.778675',status:2,free:300,total:500}
+    //   ]
+    // }
+    // this.baiduMap(data)
   },
   methods: {
     currentPark(item, index) {
-      console.log(item)
       this.currentIndex = index
-      let data = {
-        nurseryInfo: [
-          {Name:'万达停车场11111',MapPointX:'111.742579',MapPointY:'40.818675',status:2,free:300,total:500},
-          {Name:'万达停车场22222',MapPointX:'111.622579',MapPointY:'40.878675',status:0,free:30,total:1000},
-          {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.818675',status:1,free:40,total:800}
-        ]
-      }
-      this.baiduMap(data)
+      let nurseryInfo = []
+
+      parkListAddress({
+        blockIds: [item]
+      }).then((response)=>{
+        const data = response.data.data
+        console.log(response)
+        nurseryInfo = data
+        this.baiduMap(nurseryInfo)
+      })
+
+
+
     },
     baiduMap (data) {
-      var map = new BMap.Map('allmap', {enableMapClick: false})
-      var point = new BMap.Point(111.742579, 40.818675)
-      map.centerAndZoom(point, 12)
-      var mapStyle={  style : "midnight" }
-      map.setMapStyle(mapStyle);
-      // var marker = new BMap.Marker(point)  // 创建标注
-      // map.addOverlay(marker)              // 将标注添加到地图中
+      console.log(data.length)
+      if(data.length === 0){
+        var map = new BMap.Map('allmap', {enableMapClick: false})
+        var point = new BMap.Point(111.742579, 40.878675)
+        map.centerAndZoom(point, 14)
+        var mapStyle={  style : "midnight" }
+        map.enableScrollWheelZoom(true);
+        map.setMapStyle(mapStyle);
+        // var marker = new BMap.Marker(point)  // 创建标注
+        // map.addOverlay(marker)              // 将标注添加到地图中
+        map.clearOverlays();
-      map.clearOverlays();
-      var i = 0;
-      var points = [];
-      for (var item in data.nurseryInfo) {
-        (function (x) {
-          var itemthat = item;
-          //创建标注
-          var pt = new BMap.Point(data.nurseryInfo[item].MapPointX, data.nurseryInfo[item].MapPointY);
-          points[i] = pt;
-          if(data.nurseryInfo[item].status === 0){
+      }else{
+        var map = new BMap.Map('allmap', {enableMapClick: false})
+        var point = new BMap.Point(data[0].lonId, data[0].latId)
+        map.centerAndZoom(point, 17)
+        var mapStyle={  style : "midnight" }
+        map.enableScrollWheelZoom(true);
+        map.setMapStyle(mapStyle);
+        // var marker = new BMap.Marker(point)  // 创建标注
+        // map.addOverlay(marker)              // 将标注添加到地图中
+
+        map.clearOverlays();
+        var i = 0;
+        var points = [];
+        for (var item in data) {
+          (function (x) {
+            var itemthat = item;
+            //创建标注
+            var pt = new BMap.Point(data[item].lonId, data[item].latId);
+            points[i] = pt;
+            if(data[item].freeBrethNum/data[item].plBerthNum == 0){
+              var myIcon = new BMap.Icon(busyCar,
+                new BMap.Size(29, 40), {
+                  offset: new BMap.Size(10, 40),
+                  textColor: '#fff'
+                });
+              var marker = new BMap.Marker(pt,{icon:myIcon});
+            } else if(data[item].freeBrethNum/data[item].plBerthNum <= 0.3){
+              var myIcon = new BMap.Icon(normalCar,
+                new BMap.Size(29, 40), {
+                  offset: new BMap.Size(10, 40),
+                  textColor: '#fff'
+                });
+              var marker = new BMap.Marker(pt,{icon:myIcon});
+            } else {
+              var myIcon = new BMap.Icon(idleCar,
+                new BMap.Size(29, 40), {
+                  offset: new BMap.Size(10, 40),
+                  textColor: '#fff'
+                });
+              var marker = new BMap.Marker(pt,{icon:myIcon});
+            }
             var myIcon = new BMap.Icon(busyCar,
               new BMap.Size(29, 40), {
                 offset: new BMap.Size(10, 40),
                 textColor: '#fff'
               });
-            var marker = new BMap.Marker(pt,{icon:myIcon});
-          } else if(data.nurseryInfo[item].status === 1){
-            var myIcon = new BMap.Icon(normalCar,
-              new BMap.Size(29, 40), {
-                offset: new BMap.Size(10, 40),
-                textColor: '#fff'
-              });
-            var marker = new BMap.Marker(pt,{icon:myIcon});
-          } else {
-            var myIcon = new BMap.Icon(idleCar,
-              new BMap.Size(29, 40), {
-                offset: new BMap.Size(10, 40),
-                textColor: '#fff'
-              });
-            var marker = new BMap.Marker(pt,{icon:myIcon});
-          }
-          console.log(data)
-          marker.setTop(true,27000000);
-          map.addOverlay(marker);
-          var myLabel;
-          marker.addEventListener("mouseover", (e)=> {
-            var that = this;
-            console.log(e)
+            marker.setTop(true,27000000);
+            map.addOverlay(marker);
+            var myLabel;
+
+            marker.addEventListener("mouseover", (e)=> {
+              var that = this;
               myLabel = new BMap.Label(
                 `<div class="dislog-wrap">
-                  <div class="dialog-header" title="${data.nurseryInfo[itemthat].Name}">${data.nurseryInfo[itemthat].Name}</div>
-                  <ul class="dislog-body">
-                    <li><div>${data.nurseryInfo[itemthat].free}</div><div>空闲</div></li>
-                    <li><div>/</div><div></div></li>
-                    <li><div>${data.nurseryInfo[itemthat].total}</div><div>总数</div></li>
-                  </ul>
-                </div>`,
-              {
-                offset: new BMap.Size(25, -35),   //label的偏移量，为了让label的中心显示在点上
-                position: pt
-              });
+                <div class="dialog-header" title="${data[itemthat].plAddress}">${data[itemthat].plAddress}</div>
+                <ul class="dislog-body">
+                  <li><div>${data[itemthat].freeBrethNum}</div><div>空闲</div></li>
+                  <li><div>/</div><div></div></li>
+                  <li><div>${data[itemthat].plBerthNum}</div><div>总数</div></li>
+                </ul>
+              </div>`,
+                {
+                  offset: new BMap.Size(25, -35),   //label的偏移量，为了让label的中心显示在点上
+                  position: pt
+                });
+              myLabel.setStyle({
+                  // color: "#0f0",
+                  // fontSize: "12px",
+                  padding: "0",
+                  // whiteSpace: "normal",
+                  backgroundColor: "",
+                  border: "0px",
+                  zIndex: "1000"
+                }
+              );
+              marker.setLabel(myLabel)
+              marker.setTop(true,27000000);
-            myLabel.setStyle({
-                // color: "#0f0",
-                // fontSize: "12px",
-                padding: "0",
-                // whiteSpace: "normal",
-                backgroundColor: "",
-                border: "0px",
-                zIndex: "1000"
-              }
-            );
-            marker.setLabel(myLabel)
-            marker.setTop(true,27000000);
-
-          });
+            });
+            marker.addEventListener("mouseout", function (e) {
+              map.removeOverlay(myLabel);
+            });
+            i++;
+          })(i);
+        }
-          marker.addEventListener("mouseout", function (e) {
-            map.removeOverlay(myLabel);
-          });
-          i++;
-        })(i);
       }
     }
@@ -215,7 +260,7 @@ export default {
     display: flex;
     padding-top: 17px;
     padding-bottom: 18px;
-    background:rgba(0,45,140,.6);
+    background:rgba(0,45,140,.9);
       li{
       flex: 1;
       height: 45px;
 <template>
   <div >
     <titlesection title="消息"></titlesection>
-      <div class="nwwest-roll flexfm news-wrap" id="nwwest-roll">
-        <ul id="roll-ul">  
-          <li v-for="item in list" ref="rollul" :class="{anim:animate==true}">
-              <div class="noticetype1" v-if="item.type===1"></div>
-              <div class="noticetype2" v-else-if="item.type===2"></div>
-              <div class="errortype1" v-else-if="item.type===3"></div>
-              <div class="errortype2" v-else></div>
-              <div class="text" :title="item.site">{{item.site}}</div>
-              <div class="time">{{item.gsmc}}</div>
+    <div class="content">
+      <ul class="news-wrap">
+        <li class="orderNum">订单编号</li>
+        <li class="orderPark">停车场</li>
+        <li class="orderMoney">收费金额</li>
+      </ul>
+      <div class="nwwest-roll  news-wrap" id="nwwest-roll">
+        <ul id="roll-ul" class="roll-ul" :style="{ top }">
+          <li v-for="(item,index) in list" ref="rollul"  :key="index">
+            <div :title="item.orderId">{{item.orderId}}</div>
+            <div :title="item.plName">{{item.plName}}</div>
+            <div :title="item.orderActFee">{{item.orderActFee|formatMoney}}</div>
           </li>
         </ul>
       </div>
+    </div>
   </div>
 </template>
 <script>
 import titlesection from '../components/titlesection'
+import { msgAddress } from '../api/api'
 export default {
   name: 'newssection',
@@ -26,26 +31,38 @@ export default {
   },
   data() {
     return {
-      animate: true,
-      list: [
-        {"type":1, "name": "于先生1", "site": "北京门头沟区1北京门头沟区1北京门头沟区1", "gsmc": "10-02" },
-        {"type":2, "name": "于先生2", "site": "北京门头沟区2", "gsmc": "10-02" },
-        {"type":3, "name": "于先生3", "site": "北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3", "gsmc": "10-02" },
-        {"type":4, "name": "于先生4", "site": "北京门头沟区4", "gsmc": "10-02" },
-        {"type":1, "name": "于先生5", "site": "北京门头沟区5", "gsmc": "10-02" },
-        {"type":2, "name": "于先生6", "site": "北京门头北京门头沟区6北京门头沟区6北京门头沟区6北京门头沟区6沟区6", "gsmc": "10-02" },
-        {"type":3, "name": "于先生7", "site": "北京门头沟区7", "gsmc": "10-02" },
-        {"type":4, "name": "于先生8", "site": "北京门头沟区8", "gsmc": "10-02" },
-        {"type":1, "name": "于先生9", "site": "北京门头北京门头沟区9北京门头沟区9北京门头沟区9沟区9", "gsmc": "10-02" },
-        {"type":2, "name": "于先生10", "site": "北京门头沟区10", "gsmc": "10-02" },
-        {"type":3, "name": "于先生11", "site": "北京门北京门头沟区11北京门头沟区11北京门头沟区11头沟区11", "gsmc": "10-02" }
-      ]
+      orderList:"",//公告列表
+      //marqueeHeight: '100%',
+      name: '订单公告',
+      activeIndex: 0,
+      intnum: undefined,
+      list: []
+    }
+  },
+  computed: {
+    top() {
+      return - this.activeIndex * 36 + 'px';
     }
   },
   created() {
-    setInterval(this.scroll, 2000)
+    this.onLoad()
   },
   methods: {
+    onLoad() {
+      msgAddress({
+        orgIds: this.GLOBAL.paramsvariables
+      }).then((response)=>{
+        let  data = response.data.data
+        this.list = data;
+        var that = this
+        this.intnum = setInterval(_ => {
+          that.list.push(that.list[this.activeIndex]);
+          this.activeIndex += 1;
+        }, 1000);
+      }).catch((response)=>{
+        console.log(response);
+      })
+    },
     scroll() {
       this.animate = !this.animate;
       var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
@@ -55,59 +72,92 @@ export default {
         that.animate = !that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
       }, 0)
     }
+  },
+  filters:{
+    formatMoney: function (value) {
+      return (value/100).toFixed(2)+' 元'
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
-    @mixin newsType($img){
-      margin-left: 23px;
-      margin-right: 23px;
-      width: 26px;
-      height: 26px;
-      background-image: url($img);
-      background-repeat:no-repeat ;
-      background-position: center center ;
+    .content{
+      height: calc(100% - 30px);
+    }
+    .theme-card{
+      height: 100%;
     }
+    .news-wrap{
+      height: 40px;
+      line-height: 40px;
+      font-size: 14px;
+      .roll-ul{
+        height: 100%;
+        position: relative;
+        transition: top 0.5s;
+      }
+      li{
+        height: 40px;
+        float: left;
+        padding-left: 0;
+        padding-left: 30px;
+        background-size: 14px 14px;
+        background-position: 10px center;
+        background-repeat: no-repeat;
+        list-style: none;
+        overflow: hidden;
+        color: #fff;
+      }
+      .orderNum{
+        width: 110px;
+        background-image: url(../assets/img/orderNum.svg) ;
+      }
+      .orderMoney{
+        width: 80px;
+        background-image: url(../assets/img/orderMoney.svg) ;
+      }
+      .orderPark{
+        width: calc(100% - 230px);
+        background-image: url(../assets/img/orderPark.svg) ;
+      }
+
+    }
+
     .nwwest-roll {
       width: 100%;
-      height: 210px;
+      height: calc(100% - 60px);
       overflow: hidden;
       transition: all 0.5s;
       li{
+        width: 100%;
         height: 26px;
         line-height: 26px;
         font-size: 12px;
+        padding-left: 10px;
         color: #fff;
-        display: flex;
         background:rgba(255,255,255,.1);
         margin-bottom: 10px;
-        .noticetype1{
-          @include newsType("../assets/img/noticetype1.png");
-        }
-        .noticetype2{
-          @include newsType("../assets/img/noticetype2.png");
-        }
-        .errortype1{
-          @include newsType("../assets/img/errortype1.png");
-        }
-        .errortype2{
-          @include newsType("../assets/img/errortype1.png");
-        }
-        .text{
-          flex: 1;
-          overflow:hidden;
-          text-overflow:ellipsis;
-        }
-        .time{
-          padding-left: 23px;
-          padding-right: 23px;
-          width: 81px;
+        div{
+          float: left;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          &:nth-of-type(1){
+            width: 110px;
+          }
+          &:nth-of-type(2){
+            width: calc(100% - 220px);
+          }
+          &:nth-of-type(3){
+            width: 80px;
+          }
+
         }
       }
     }
-    .anim {
-       transition: all 0.5s;
+  .anim {
+     transition: all 0.5s;
-    }
+  }
 </style>
@@ -8,9 +8,8 @@
 <script>
 import titlesection from '../components/titlesection'
-import {fetchList} from '../api/api'
 import lineChart from '../components/lineChart'
-
+import { weekAddress } from '../api/api'
 export default {
   name: 'outsection',
   components: {
@@ -19,27 +18,35 @@ export default {
   },
   data() {
     return {
-      lineChartData: {
-        xData: ['周一','周二','周三','周四','周五','周六','周日'],
-        yData: {
-          indata:[120, 132, 101, 134, 90, 230, 210],
-          outdata:[220, 182, 191, 234, 290, 330, 310],
-        },
-        legendData: ['出场','进场']
-      },
-      dzNum: '23454',
-      ydpNum: '4454'
+      lineChartData: {},
     }
   },
   created() {
+    this.getList()
   },
   methods: {
     getList() {
-      fetchList()
-      .then(res => {
-        console.log(res);
-
-      });
+      weekAddress({
+        orgIds: this.GLOBAL.paramsvariables
+      }).then((response)=>{
+        const data = response.data.data
+        let xData = [], indata = [], outdata = [], lastInNum;
+        for (let i=0;i<data.length;i++){
+          xData.push(data[i].queryDate)
+          indata.push(data[i].inNum)
+          outdata.push(data[i].outNum)
+          lastInNum = data[data.length-1].inNum
+        }
+        this.$store.dispatch('transferOrderTotal',lastInNum)
+        this.lineChartData = {
+          xData: xData,
+          yData: {
+            indata:indata,
+            outdata:outdata,
+          },
+          legendData: ['出场','进场']
+        }
+      })
     },
   }
 }
@@ -10,14 +10,7 @@
 import titlesection from '../components/titlesection'
 import totalsection from '../components/total'
 import barChart from '../components/barChart'
-import {fetchList} from '../api/api'
-
-const barChartData = {
-  data: {
-    yData: [100, 80, 21],
-    xData: ['正常', '异常', '故障']
-  }
-}
+import { deviceAddress } from '../api/api'
 export default {
   name: 'pdasection',
@@ -28,8 +21,11 @@ export default {
   },
   data() {
     return {
-      totalVal: '213734',
-      barChartData: barChartData.data
+      totalVal: '',
+      barChartData: {
+        // yData: [100,200,300],
+        // xData: ['正常', '异常', '故障']
+      }
     }
   },
   created() {
@@ -37,11 +33,18 @@ export default {
   },
   methods: {
     getList() {
-      fetchList()
-        .then(res => {
-          console.log(res);
-
-        });
+      deviceAddress({
+        orgIds: this.GLOBAL.paramsvariables
+      }).then((response)=>{
+        const data = response.data.data
+        this.totalVal = data[0].num.toString()
+        let Xdata = data[0].xData.split(',')
+        let Ydata = data[0].yData.split(',')
+        this.barChartData = {
+          yData: Ydata,
+          xData: Xdata
+        }
+      })
     },
   }
 }
@@ -22,7 +22,7 @@
 <script>
 import titlesection from '../components/titlesection'
 import totalsection from '../components/total'
-import {fetchList} from '../api/api'
+import { tollAddress } from '../api/api'
 export default {
   name: 'sfysection',
@@ -32,20 +32,24 @@ export default {
   },
   data() {
     return {
-      totalVal: '219734',
-      signNum: '454',
-      nosignNum: '5125'
+      totalVal: '',
+      signNum: '',
+      nosignNum: ''
     }
   },
   created() {
+    this.getList()
   },
   methods: {
     getList() {
-      fetchList()
-      .then(res => {
-        console.log(res);
-
-      });
+      tollAddress({
+        orgIds: this.GLOBAL.paramsvariables
+      }).then((response)=>{
+        let data = response.data.data
+        this.totalVal = (data.allTollCollector).toString()
+        this.signNum = data.signInTollCollector
+        this.nosignNum = data.unSignInTollCollector
+      })
     },
   }
 }
@@ -8,10 +8,8 @@
 <script>
 import titlesection from '../components/titlesection'
-import {fetchList} from '../api/api'
 import lineChart from '../components/lineChart'
-
-
+import { dayAddress } from '../api/api'
 export default {
   name: 'vehiclesection',
@@ -21,27 +19,35 @@ export default {
   },
   data() {
     return {
-      lineChartData: {
-        xData: ['周一','周二','周三','周四','周五','周六','周日'],
-        yData: {
-          indata:[120, 132, 101, 134, 90, 230, 210],
-          outdata:[220, 182, 191, 234, 290, 330, 310],
-        },
-        legendData: ['出场1','进场']
-      },
+      lineChartData: {},
       dzNum: '23454',
       ydpNum: '4454'
     }
   },
   created() {
+    this.getList()
   },
   methods: {
     getList() {
-      fetchList()
-      .then(res => {
-        console.log(res);
-
-      });
+      dayAddress({
+        orgIds: this.GLOBAL.paramsvariables
+      }).then((response)=>{
+        const data = response.data.data
+        let xData = [], indata = [], outdata = []
+        for (let i=0;i<data.length;i++){
+          xData.push(data[i].queryDate)
+          indata.push(data[i].inNum)
+          outdata.push(data[i].outNum)
+        }
+        this.lineChartData = {
+          xData: xData,
+          yData: {
+            indata:indata,
+            outdata:outdata,
+          },
+          legendData: ['出场','进场']
+        }
+      })
     },
   }
 }
 <template>
   <div>
-    <titlesection title="道闸/诱导屏"></titlesection>
+    <titlesection title="支付方式"></titlesection>
     <ul class="flexfm ydp-dz-wrap">
       <li>
         <div>
           <div class="bg-wrap">
-            <p class="dznum-total">{{ dzNum|formatNum }}</p>
-            <p class="name">道闸</p>
+            <p class="dznum-total">{{ wxNum|formatNum }}</p>
+            <p class="name">微信</p>
           </div>
         </div>
         <div>
           <div class="bg-wrap">
-            <p class="ydpnum-total">{{ ydpNum|formatNum }}</p>
-            <p class="name">诱导屏</p>
+            <p class="ydpnum-total">{{ zfbNum|formatNum }}</p>
+            <p class="name">支付宝</p>
           </div>
         </div>
       </li>
       <li>
-        <allPieChart :chart-data="pieChartData"/>
+        <div>
+          <div class="bg-wrap">
+            <p class="dznum-total">{{ xjNum|formatNum }}</p>
+            <p class="name">现金</p>
+          </div>
+        </div>
+        <div>
+          <div class="bg-wrap">
+            <p class="ydpnum-total">{{ qtNum|formatNum }}</p>
+            <p class="name">其他</p>
+          </div>
+        </div>
       </li>
     </ul>
   </div>
@@ -26,8 +37,7 @@
 <script>
 import titlesection from '../components/titlesection'
 import allPieChart from '../components/allPieChart'
-import {fetchList} from '../api/api'
-
+import { moneyAddress } from '../api/api'
 export default {
   name: 'youdaopingsection',
@@ -37,20 +47,30 @@ export default {
   },
   data() {
     return {
-      pieChartData:  [35, 55],
-      dzNum: '23454',
-      ydpNum: '4454'
+      pieChartData:  [],
+      wxNum: '',
+      zfbNum: '',
+      xjNum: '',
+      qtNum: '',
     }
   },
   created() {
+    this.getList()
   },
   methods: {
     getList() {
-      fetchList()
-      .then(res => {
-        console.log(res);
-
-      });
+      moneyAddress({
+        orgIds: this.GLOBAL.paramsvariables
+      }).then((response)=>{
+        const data = response.data.data
+        this.wxNum = data.wxPay
+        this.zfbNum = data.aliPay
+        this.qtNum = data.otherPay
+        this.xjNum = data.totalPay - data.aliPay - data.wxPay - data.otherPay
+        // this.dzNum = data[3].num
+        // this.ydpNum = data[2].num
+        // this.pieChartData = [data[3].num,data[2].num]
+      })
     },
   }
 }
@@ -63,8 +83,8 @@ export default {
     padding: 0 23px;
     li{
       height: 100%;
-      flex: 1;
-      &:nth-of-type(1)>div{
+      width: 50%;
+      >div{
         height: 50%;
         .bg-wrap{
           width: 115px;