Merge branch 'test' of http://gitlab.renniting.cn/web_developers/lzsandtable into test

Andy
2 parents ae083634 93ff2951
Showing 30 changed files with 1168 additions and 129 deletions
build/utils.js
package-lock.json
package.json
src/components/HelloWorld.vue
src/components/VBerth.vue
src/components/VEquipment.vue
src/components/VIncome.vue
src/components/VInout.vue
src/components/VParking.vue
src/components/VToll.vue
src/components/base/AccountNum.vue
src/components/base/CardTitle.vue
src/components/base/PieEchart.vue
src/components/base/barChart.vue
src/images/content/access-icon.png
src/images/content/cardTitleBg.png
src/images/content/cardTitleSide.png
src/images/content/nosign.png
src/images/content/numBg.svg
src/images/content/numBorder.svg
@@ -60,7 +60,14 @@ exports.cssLoaders = function (options) {
     postcss: generateLoaders(),
     less: generateLoaders('less'),
     sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
+    scss: generateLoaders('sass').concat(
+      {
+        loader: 'sass-resources-loader',
+        options: {
+          resources: path.resolve(__dirname, '../src/style/mixin.scss')//引入的scss文件位置
+        }
+      }
+    ),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
   }
@@ -3132,6 +3132,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.1.0",
+      "resolved": "http://registry.npm.taobao.org/echarts/download/echarts-4.1.0.tgz",
+      "integrity": "sha1-1YjJX3PBqZKLnHPVt2l1HDGFvNw=",
+      "requires": {
+        "zrender": "4.0.4"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -10349,6 +10357,45 @@
         "semver": "^5.5.0"
       }
     },
+    "sass-resources-loader": {
+      "version": "2.0.0",
+      "resolved": "http://registry.npm.taobao.org/sass-resources-loader/download/sass-resources-loader-2.0.0.tgz",
+      "integrity": "sha1-iFacVC+/HxjzOmV4t3zFs2xWkR0=",
+      "dev": true,
+      "requires": {
+        "async": "^2.1.4",
+        "chalk": "^1.1.3",
+        "glob": "^7.1.1",
+        "loader-utils": "^1.0.4"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "http://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
@@ -12660,6 +12707,11 @@
       "requires": {
         "camelcase": "^3.0.0"
       }
+    },
+    "zrender": {
+      "version": "4.0.4",
+      "resolved": "http://registry.npm.taobao.org/zrender/download/zrender-4.0.4.tgz",
+      "integrity": "sha1-kQ5g2IjwDJWZBz8jdY3SM0X+SP0="
     }
   }
 }
@@ -11,6 +11,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "echarts": "^4.1.0",
     "vue": "^2.5.2"
   },
   "devDependencies": {
@@ -50,6 +51,7 @@
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
     "sass-loader": "^7.1.0",
+    "sass-resources-loader": "^2.0.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "style-loader": "^0.23.1",
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
+<template>
+    <div class="theme-wrap">
+        <card-title> <span>泊位消息</span></card-title>
+        <div class="theme-body">
+            <account-num>
+                <span>总计</span>
+            </account-num>
+            <ul class="income-echart">
+               <li>
+                   <pie-echart :chart-data="pieChartData"></pie-echart>
+               </li>
+               <li class="berth-inf">
+                   <p><span class="free-berth">{{11834|filterTotal}}</span><span>空余</span></p>
+                   <p><span class="buss-berth">{{4496|filterTotal}}</span><span>占有</span></p>
+               </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import CardTitle from './base/CardTitle'
+import AccountNum from './base/AccountNum'
+import PieEchart from './base/PieEchart'
+export default {
+  name: 'VBerth',
+  components: {
+    CardTitle,
+    AccountNum,
+    PieEchart
+  },
+  data() {
+    return {
+      pieChartData: {
+        yData: [1,1],
+        legendData: ['空余','占有']
+      },
+    }
+  },
+  mounted(){
+    //this.drawBar();
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .theme-wrap {
+        height: 100%;
+    }
+    .theme-body {
+        height: calc(100% - 30px);
+        margin-left: 20px;
+    }
+    .income-echart{
+        height: 70%;
+        display: flex;
+        >li{
+            flex: 1;
+        }
+        .berth-inf{
+            p{
+                height: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding-right: 20px;
+            }
+            .free-berth{
+                @include fontStyle(24px);
+                background-image: $fontBlue;
+            }
+            .buss-berth{
+                @include fontStyle(24px);
+                background-image: $fontOrange;
+            }
+        }
+    }
+
+</style>
+<template>
+    <div class="theme-wrap">
+        <card-title> <span>设备监控消息</span></card-title>
+        <div class="theme-body">
+
+        </div>
+    </div>
+</template>
+
+<script>
+import CardTitle from './base/CardTitle'
+export default {
+  name: 'VEquipment',
+  components: {
+    CardTitle
+  },
+  data() {
+    return {
+
+    }
+  },
+  mounted(){
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .theme-wrap {
+        height: 100%;
+    }
+    .theme-body {
+        height: calc(100% - 30px);
+        margin-left: 20px;
+    }
+
+
+</style>
+<template>
+    <div class="theme-wrap">
+        <card-title> <span>收入消息</span></card-title>
+        <div class="theme-body">
+            <account-num>
+                <span>总计</span>
+            </account-num>
+            <div class="income-echart" id="income-echart">
+                <bar-chart :chart-data="pieChartData"></bar-chart>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import CardTitle from './base/CardTitle'
+import AccountNum from './base/AccountNum'
+import barChart from './base/barChart'
+export default {
+  name: 'VIncome',
+  components: {
+    CardTitle,
+    AccountNum,
+    barChart
+  },
+  data() {
+    return {
+      pieChartData: {
+        yData: [1,1],
+        legendData: ['空余','占有']
+      },
+    }
+  },
+  mounted(){
+    //this.drawBar();
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .theme-wrap {
+        height: 100%;
+    }
+    .theme-body {
+        height: calc(100% - 30px);
+        margin-left: 20px;
+    }
+    .income-echart{
+        height: 70%;
+    }
+
+</style>
+<template>
+    <div class="theme-wrap">
+        <card-title> <span>进出场消息</span></card-title>
+        <div class="theme-body">
+            <div class="access-title">
+                <p><span><span class="access-icon"></span>万达停车场  京A243547 进场</span> <span>07:20</span></p>
+            </div>
+            <div class="access-img" :style="{backgroundImage:'url('+imgUrl+')'}"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+import CardTitle from './base/CardTitle'
+import AccountNum from './base/AccountNum'
+export default {
+  name: 'VInout',
+  components: {
+    CardTitle,
+    AccountNum
+  },
+  data(){
+    return{
+      sideNum: 23454,
+      closeNum: 23454,
+      imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552297151876&di=fcc094f43d6caaf4b9526dabbefd1243&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190124%2F1fc9d7e14be54986b9e2e055a2b5ccc1.jpeg'}
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .theme-wrap {
+        height: 100%;
+    }
+    .theme-body {
+        height: calc(100% - 30px);
+        margin-left: 20px;
+    }
+    .access-title{
+        height: 30% ;
+        display: flex;
+        align-items: center;
+        p {
+            width: 99%;
+            padding-right: 20px;
+            height: 26px;
+            line-height: 26px;
+            display: flex;
+            justify-content: space-between;
+            background: linear-gradient(to right, rgba(0, 45, 140, .1) , rgba(0, 45, 140, .7));
+
+        }
+        .access-icon{
+            display: inline-block;
+            vertical-align: middle;
+            width: 22px;
+            height: 26px;
+            margin-right: 10px;
+            background: url("../images/content/access-icon.png") no-repeat 0 center;
+            background-size: 22px 22px;
+        }
+    }
+    .access-img{
+        width: 93%;
+        height: 60%;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+    }
+
+</style>
+<template>
+    <div class="theme-wrap">
+        <card-title> <span>停车场消息</span></card-title>
+        <div class="theme-body">
+            <account-num>
+                <span>总计</span>
+            </account-num>
+            <ul class="theme-container">
+                <li class="roadside">
+                    <p>{{sideNum|filterTotal}}</p>
+                    <p>路侧</p>
+                </li>
+                <li class="roadclose">
+                    <p>{{closeNum|filterTotal}}</p>
+                    <p>封闭</p>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import CardTitle from './base/CardTitle'
+import AccountNum from './base/AccountNum'
+export default {
+  name: 'VParking',
+  components: {
+    CardTitle,
+    AccountNum
+  },
+  data(){
+    return{
+      sideNum: 23454,
+      closeNum: 23454
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .theme-wrap {
+        height: 100%;
+    }
+    .theme-body {
+        height: calc(100% - 30px);
+        margin-left: 20px;
+    }
+    .theme-container{
+        height: 70%;
+        display: flex;
+        align-items: center;
+        >li{
+            flex: 1;
+            height: 57px;
+            padding-left: 70px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            &:nth-of-type(1){
+                p{
+                    &:first-child{
+                        @include fontStyle(24px);
+                        background-image: $fontBlue;
+                    }
+                    &:last-child{
+                        font-size: 14px;
+                    }
+                }
+            }
+            &:nth-of-type(2){
+                p{
+                    &:first-child{
+                        @include fontStyle(24px);
+                        background-image: $fontOrange;
+                    }
+                    &:last-child{
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+
+        .roadside{
+            background: url("../images/content/roadside.png") no-repeat 0 center;
+        }
+        .roadclose{
+            background: url("../images/content/roadclose.png") no-repeat 0 center;
+        }
+    }
+
+</style>
+<template>
+    <div class="theme-wrap">
+        <card-title> <span>收费员消息</span></card-title>
+        <div class="theme-body">
+            <account-num>
+                <span>应签到</span>
+            </account-num>
+            <ul class="theme-container">
+                <li class="roadside">
+                    <p>{{sideNum|filterTotal}}</p>
+                    <p>已签到</p>
+                </li>
+                <li class="roadclose">
+                    <p>{{closeNum|filterTotal}}</p>
+                    <p>未签到</p>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import CardTitle from './base/CardTitle'
+import AccountNum from './base/AccountNum'
+export default {
+  name: 'VToll',
+  components: {
+    CardTitle,
+    AccountNum
+  },
+  data(){
+    return{
+      sideNum: 23454,
+      closeNum: 23454
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .theme-wrap {
+        height: 100%;
+    }
+    .theme-body {
+        height: calc(100% - 30px);
+        margin-left: 20px;
+    }
+    .theme-container{
+        height: 70%;
+        display: flex;
+        align-items: center;
+        >li{
+            flex: 1;
+            height: 49px;
+            padding-left: 70px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            &:nth-of-type(1){
+                p{
+                    &:first-child{
+                        @include fontStyle(24px);
+                        background-image: $fontBlue;
+                    }
+                    &:last-child{
+                        font-size: 14px;
+                    }
+                }
+            }
+            &:nth-of-type(2){
+                p{
+                    &:first-child{
+                        @include fontStyle(24px);
+                        background-image: $fontOrange;
+                    }
+                    &:last-child{
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+
+        .roadside{
+            background: url("../images/content/sign.png") no-repeat 0 center;
+        }
+        .roadclose{
+            background: url("../images/content/nosign.png") no-repeat 0 center;
+        }
+    }
+
+</style>
+<template>
+    <div class="total-wrap">
+        <slot></slot>
+        <div class="total-main" >
+            <div  v-for="item in total" :key="item" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" >
+                {{item}}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { formaterTotal } from '../../utils/formate'
+export default {
+  name: 'AccountNum',
+  data(){
+    return {
+      total: formaterTotal(219706)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .total-wrap{
+        height: 30%;
+        display: flex;
+        align-items: center;
+        span{
+            display: inline-block;
+            width: 50px;
+            text-align: left;
+        }
+        .total-main{
+            /*margin-left: 10px;*/
+            padding: 5px 5px 5px 0;
+            background: url("../../images/content/numBorder.svg") no-repeat;
+            background-size: 100% 100%;
+        }
+        .eleNumBg{
+            width: 20px;
+            height: 30px;
+            display: inline-block;
+            margin-left: 5px;
+            line-height: 30px;
+            font-size: 22px;
+            font-weight: 600;
+            text-align: center;
+            background: url("../../images/content/numBg.svg") no-repeat;
+            background-size: 100% 100%;
+        }
+        .noeleNumBg{
+            width: 10px;
+            height: 30px;
+            display: inline-block;
+            margin-left: 5px;
+            line-height: 30px;
+            font-size: 22px;
+            font-weight: 600;
+            text-align: center;
+        }
+    }
+</style>
+<template>
+    <div class="theme-title">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'CardTitle'
+}
+</script>
+
+<style scoped lang="scss">
+    .theme-title {
+        height: 30px;
+        line-height: 30px;
+        background: url("../../images/content/cardTitleBg.png") no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .theme-title span {
+        margin-left: 60px;
+        position: relative;
+        font-size: 14px;
+    }
+
+    .theme-title span:before {
+        content: '';
+        background: url('../../images/content/cardTitleSide.png') no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        width: 40px;
+        height: 13px;
+        top: 3px;
+        left: -47px;
+    }
+
+    .theme-title span:after {
+        content: '';
+        background: url('../../images/content/cardTitleSide.png') no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        width: 40px;
+        height: 13px;
+        top: 3px;
+        right: -50px;
+    }
+</style>
+<template>
+    <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+require('echarts/theme/macarons') // echarts theme
+import {debounce} from '../../utils/debounce'
+
+export default {
+  name: 'PieEchart',
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.$nextTick(()=>{
+        this.initChart()
+      })
+    }
+  },
+  mounted() {
+    this.initChart()
+    if (this.autoResize) {
+      this.__resizeHandler = debounce(() => {
+        if (this.chart) {
+          this.chart.resize()
+        }
+      }, 100)
+      window.addEventListener('resize', this.__resizeHandler)
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    if (this.autoResize) {
+      window.removeEventListener('resize', this.__resizeHandler)
+    }
+
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    setOptions({yData} = {}) {
+      this.chart.setOption(
+        {
+          tooltip: {
+            show:false
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: ['60%', '75%'],
+              center: ['50%', '50%'],
+              hoverAnimation:false,
+              label: {
+                show: false
+              },
+              lableLine: {
+                show: false
+              },
+              data: [
+                {
+                  value: yData[0],
+                  name: '空余',
+                  itemStyle: {
+                    normal: {
+                      color: {
+                        colorStops: [{
+                          offset: 0,
+                          color: '#00CAFE' // 0% 处的颜色
+                        }, {
+                          offset: 1,
+                          color: '#2772F4' // 100% 处的颜色
+                        }]
+                      },
+                    }
+                  }
+                },
+                {
+                  value: yData[1],
+                  name: '占有',
+
+                  itemStyle: {
+                    normal: {
+                      color: {
+                        colorStops: [{
+                          offset: 0,
+                          color: '#FFBA00' // 0% 处的颜色
+                        }, {
+                          offset: 1,
+                          color: '#FF8100' // 100% 处的颜色
+                        }]
+                      },
+                    }
+                  }
+                },
+
+              ],
+              animationType: 'scale',
+              animationEasing: 'elasticOut'
+            },
+            {
+              name: '', type: 'pie',
+              clockWise: true,hoverAnimation: false,
+              radius: ['90%', '90%'],
+              label: { normal: { position: 'center' }},
+              data: [{
+                value: 0,
+                label: {
+                  normal: {
+                    formatter:  '30.5%',//小数点后一位
+                    textStyle: {
+                      color: '#fe8b53',
+                      fontSize: 18,
+                      fontWeight: 'normal'
+                    }
+                  }
+                }
+              }, {
+                tooltip: {show: false},
+                label: {
+                  normal: {
+                    formatter: '\n占有',
+                    textStyle: {
+                      color: '#bbeaf9',fontSize: 12
+                    }
+                  }
+                }
+              }]
+            }
+
+          ]
+        }
+      )
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el)
+      this.setOptions(this.chartData)
+    },
+
+  }
+}
+</script>
+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+require('echarts/theme/macarons') // echarts theme
+import {debounce} from '../../utils/debounce'
+
+export default {
+  name: 'barChart',
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: function () {
+      this.$nextTick(()=>{
+        this.initChart()
+      })
+    }
+  },
+  mounted() {
+    this.initChart()
+    if (this.autoResize) {
+      this.__resizeHandler = debounce(() => {
+        if (this.chart) {
+          this.chart.resize()
+        }
+      }, 100)
+      window.addEventListener('resize', this.__resizeHandler)
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    if (this.autoResize) {
+      window.removeEventListener('resize', this.__resizeHandler)
+    }
+
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    setOptions({yData} = {}) {
+      this.chart.setOption(
+        {
+
+          grid: {
+            top: 0,
+            left: 0,
+            right: '20',
+            bottom: -10,
+            containLabel: true
+          },
+          title:{show:false},
+          xAxis: {
+            show: false,//尽管显示false，但仍然占用空间containLabel为true的话[echarts bug]
+            nameGap:0
+          },
+          yAxis: [{
+            show: true,
+            nameLocation:'start',
+            //data: ['支付宝', '微信', '其它'],
+            data: [
+              {
+                value:'支付宝',
+                textStyle:{
+                  color:'#01AEFE'
+                }
+              },
+              {
+                value:'微信',
+                textStyle:{
+                  color:'#06C406'
+                }
+              },
+              {
+                value:'其它',
+                textStyle:{
+                  color:'#FFAB00'
+                }
+              }
+            ],//右侧Y轴值
+            inverse: true,
+            axisLine: {show: false},
+            splitLine: {show: false},
+            axisTick: {show: false },
+            axisLabel: {
+              //margin:-20,
+              // nameTextStyle:{
+              //   align:'left'
+              // }
+            }
+          }, {
+            show: true,
+            inverse: true,
+            data: [
+                    {
+                      value:1000,
+                      textStyle:{
+                        color:'#01AEFE'
+                      }
+                    },
+                    {
+                      value:200,
+                      textStyle:{
+                        color:'#06C406'
+                      }
+                    },
+                    {
+                      value:300,
+                      textStyle:{
+                        color:'#FFAB00'
+                      }
+                    }
+                    ],//右侧Y轴值
+            axisLabel: {
+              textStyle: {fontSize: 12,},
+            },
+            axisLine: { show: false },
+            splitLine: { show: false},
+            axisTick: {show: false},
+          }],
+          series: [{
+            name: '条',
+            type: 'bar',
+            yAxisIndex: 0,
+            data: [1000,200,300],
+            data:[
+                  {
+                    value:1000,
+                    itemStyle: {
+                      normal: {
+                        color: {
+                          type: 'linear',
+                          x: 0,
+                          x1: 1,
+                          colorStops: [{
+                            offset: 0,
+                            color: '#2772F4'
+                          }, {
+                            offset: 1,
+                            color: '#00CAFE'
+                          }]
+                        }
+                      },
+                    }
+                  },
+                  {
+                    value:200,
+                    itemStyle: {
+                      normal: {
+                        color: {
+                          type: 'linear',
+                          x: 0,
+                          x1: 1,
+                          colorStops: [{
+                            offset: 0,
+                            color: '#02C202'
+                          }, {
+                            offset: 1,
+                            color: '#51EC51'
+                          }]
+                        }
+                      },
+                    }
+                  },
+                {
+                  value:300,
+                  itemStyle: {
+                    normal: {
+                      color: {
+                        type: 'linear',
+                        x: 0,
+                        x1: 1,
+                        colorStops: [{
+                          offset: 0,
+                          color: '#FD8811'
+                        }, {
+                          offset: 1,
+                          color: '#FFAB00'
+                        }]
+                      }
+                    },
+                  }
+                },
+
+
+              ],
+            barWidth: '40%',
+
+            label: {
+              normal: {show: false}
+            },
+          }, {
+            name: '框',
+            type: 'bar',
+            yAxisIndex: 1,
+            barGap: '-100%',
+            data: [1500,1500,1500],//百分比
+            barWidth: '40%',
+            itemStyle: {
+              normal: {
+                color: 'none',
+                borderColor: '#157ADB',
+                borderWidth: 0.5,
+                //barBorderRadius: 15,
+              }
+            }
+          }, ]
+        }
+      )
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el)
+      this.setOptions(this.chartData)
+    },
+
+  }
+}
+</script>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 29" style="enable-background:new 0 0 20 29;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#XMLID_44_);}
+</style>
+<linearGradient id="XMLID_44_" gradientUnits="userSpaceOnUse" x1="10" y1="1.028133e-05" x2="10" y2="29">
+	<stop  offset="0" style="stop-color:#574DFE"/>
+	<stop  offset="1" style="stop-color:#4BD3FF"/>
+</linearGradient>
+<path id="XMLID_2_" class="st0" d="M18,29H2c-1.1,0-2-0.9-2-2v-9.5L2.5,15h14.9l2.5,2.5V27C20,28.1,19.1,29,18,29z M2.5,14L0,11.5V2
+	c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v9.5L17.5,14H2.5z"/>
+</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 155 39" style="enable-background:new 0 0 155 39;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;}
+	.st1{fill:#157ADB;}
+	.st2{opacity:0.5;fill-rule:evenodd;clip-rule:evenodd;fill:#157ADB;}
+</style>
+<g id="XMLID_14_" class="st0">
+	<path id="XMLID_77_" class="st1" d="M154,1v37H1V1H154 M155,0H0v39h155V0L155,0z"/>
+</g>
+<path id="XMLID_15_" class="st2" d="M154,39h-4v-1h4v-4h1v4v1H154z M154,1h-4V0h4h1v1v4h-1V1z M0,39v-1v-4h1v4h4v1H1H0z M1,5H0V1V0
+	h1h4v1H1V5z"/>
+</svg>
@@ -3,6 +3,12 @@
 import Vue from 'vue'
 import App from './App'
 import './style/reset.css'
+
+import * as filters from './utils/filters'
+Object.keys(filters).forEach(key => {
+  Vue.filter(key, filters[key])
+})
+
 Vue.config.productionTip = false
  
 /* eslint-disable no-new */
+@mixin fontStyle($size){
+  font-size: $size;
+  font-weight:bold;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+$fontBlue: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0,202,254, 1)), to(rgba(39,114,244, 1)));
+$fontOrange: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255,186,0, 1)), to(rgba(255,129,0, 1)));
@@ -61,7 +61,7 @@ body{
     background: url("../images/bg.jpg") no-repeat;
     background-size: 100% 100%;
     overflow: hidden;
-    /*background-size:100% 100%;*/
+    font-size: 14px;
     /*默认颜色*/
 }
  
+export function debounce(func, wait, immediate) {
+  let timeout, args, context, timestamp, result
+
+  const later = function() {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp
+
+    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
+    }
+  }
+
+  return function(...args) {
+    context = this
+    timestamp = +new Date()
+    const callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      context = args = null
+    }
+
+    return result
+  }
+}
+export  function filterTotal(val) {
+  let str = val.toString()
+  let newStr = ''
+  let count = 0
+  for(let i=str.length-1;i>=0;i--){
+    if(count % 3 == 0 && count!= 0){
+      newStr = str.charAt(i)+","+newStr
+    }else{
+      newStr = str.charAt(i)+newStr
+    }
+    count++
+  }
+  return newStr
+}
@@ -3,7 +3,7 @@ function formateday() {
   let str = ''
   let year = date.getFullYear()
   let month = date.getMonth()+1<10? "0"+ (date.getMonth()+1) : date.getMonth()+1
-  let day = date.getDate()<10 ? "0"+date.getDate() : date.getDate
+  let day = date.getDate()<10 ? "0"+date.getDate() : date.getDate()
   str = year +"-"+ month +"-"+ day
   return str
 }
@@ -19,4 +19,19 @@ function formateTime() {
   return str
 }
  
-export  { formateday, formateTime }
+function formaterTotal(val) {
+  let str = val.toString()
+  let newStr = ''
+  let count = 0
+  for(let i=str.length-1;i>=0;i--){
+    if(count % 3 == 0 && count!= 0){
+      newStr = str.charAt(i)+","+newStr
+    }else{
+      newStr = str.charAt(i)+newStr
+    }
+    count++
+  }
+  return newStr.split("")
+}
+
+export  { formateday, formateTime, formaterTotal }
@@ -3,17 +3,29 @@
     <v-header></v-header>
     <ul class="main-wrap">
       <li class="main-left">
-        <div class="frame-wrap"></div>
-        <div class="frame-wrap frame-wrap-center"></div>
-        <div class="frame-wrap"></div>
+        <div class="frame-wrap">
+          <v-parking></v-parking>
+        </div>
+        <div class="frame-wrap frame-wrap-center">
+          <v-toll></v-toll>
+        </div>
+        <div class="frame-wrap">
+          <v-inout></v-inout>
+        </div>
       </li>
       <li class="main-center">
         <v-map></v-map>
       </li>
       <li class="main-right">
-        <div class="frame-wrap"></div>
-        <div class="frame-wrap frame-wrap-center"></div>
-        <div class="frame-wrap"></div>
+        <div class="frame-wrap">
+          <v-income></v-income>
+        </div>
+        <div class="frame-wrap frame-wrap-center">
+          <v-berth></v-berth>
+        </div>
+        <div class="frame-wrap">
+          <v-equipment></v-equipment>
+        </div>
       </li>
     </ul>
   </div>
@@ -22,11 +34,23 @@
 <script>
 import VHeader from '../components/VHeader'
 import VMap from '../components/VMap'
+import VParking from '../components/VParking'
+import VToll from '../components/VToll'
+import VInout from '../components/VInout'
+import VIncome from '../components/VIncome'
+import VBerth from '../components/VBerth'
+import VEquipment from '../components/VEquipment'
 export default {
   name: 'VHome',
   components: {
     VHeader,
-    VMap
+    VMap,
+    VParking,
+    VToll,
+    VInout,
+    VIncome,
+    VBerth,
+    VEquipment
   }
 }
 </script>
@@ -57,11 +81,14 @@ export default {
   }
   .frame-wrap{
     height: calc((100% - 20px)/3);
-    border-image-source: url("../images/content/frame-wrap.png");
-    border-image-slice: 10 16 15 10 fill;
-    border-width: 10px 16px 15px 10px;
-    border-style: solid;
-    background-clip: border-box;
+    background: url("../images/content/frame-wrap.png");
+    background-size: 100% 100%;
+    overflow: hidden;
+    /*border-image-source: url("../images/content/frame-wrap.png");*/
+    /*border-image-slice: 3 16 11 3 fill;*/
+    /*border-width: 3px 18px 11px 3px;*/
+    /*border-style: solid;*/
+    /*background-clip: border-box;*/
   }
  
 </style>