BJ_web_developers / lzsandtable

Commit 227ea0fff03c7f78f8c04a05feee049a9e12605b

Authored by Andy
2 parents ae083634 93ff2951

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

Inline Side-by-side
Showing 30 changed files with 1168 additions and 129 deletions
build/utils.js
  View file @227ea0f
@@ -60,7 +60,14 @@ exports.cssLoaders = function (options) { @@ -60,7 +60,14 @@ exports.cssLoaders = function (options) {
60 postcss: generateLoaders(), 60 postcss: generateLoaders(),
61 less: generateLoaders('less'), 61 less: generateLoaders('less'),
62 sass: generateLoaders('sass', { indentedSyntax: true }), 62 sass: generateLoaders('sass', { indentedSyntax: true }),
63 - scss: generateLoaders('sass'), 63 + scss: generateLoaders('sass').concat(
  64 + {
  65 + loader: 'sass-resources-loader',
  66 + options: {
  67 + resources: path.resolve(__dirname, '../src/style/mixin.scss')//引入的scss文件位置
  68 + }
  69 + }
  70 + ),
64 stylus: generateLoaders('stylus'), 71 stylus: generateLoaders('stylus'),
65 styl: generateLoaders('stylus') 72 styl: generateLoaders('stylus')
66 } 73 }
package-lock.json
  View file @227ea0f
@@ -3132,6 +3132,14 @@ @@ -3132,6 +3132,14 @@
3132 "safer-buffer": "^2.1.0" 3132 "safer-buffer": "^2.1.0"
3133 } 3133 }
3134 }, 3134 },
  3135 + "echarts": {
  3136 + "version": "4.1.0",
  3137 + "resolved": "http://registry.npm.taobao.org/echarts/download/echarts-4.1.0.tgz",
  3138 + "integrity": "sha1-1YjJX3PBqZKLnHPVt2l1HDGFvNw=",
  3139 + "requires": {
  3140 + "zrender": "4.0.4"
  3141 + }
  3142 + },
3135 "ee-first": { 3143 "ee-first": {
3136 "version": "1.1.1", 3144 "version": "1.1.1",
3137 "resolved": "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz", 3145 "resolved": "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -10349,6 +10357,45 @@ @@ -10349,6 +10357,45 @@
10349 "semver": "^5.5.0" 10357 "semver": "^5.5.0"
10350 } 10358 }
10351 }, 10359 },
  10360 + "sass-resources-loader": {
  10361 + "version": "2.0.0",
  10362 + "resolved": "http://registry.npm.taobao.org/sass-resources-loader/download/sass-resources-loader-2.0.0.tgz",
  10363 + "integrity": "sha1-iFacVC+/HxjzOmV4t3zFs2xWkR0=",
  10364 + "dev": true,
  10365 + "requires": {
  10366 + "async": "^2.1.4",
  10367 + "chalk": "^1.1.3",
  10368 + "glob": "^7.1.1",
  10369 + "loader-utils": "^1.0.4"
  10370 + },
  10371 + "dependencies": {
  10372 + "ansi-styles": {
  10373 + "version": "2.2.1",
  10374 + "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz",
  10375 + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
  10376 + "dev": true
  10377 + },
  10378 + "chalk": {
  10379 + "version": "1.1.3",
  10380 + "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz",
  10381 + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
  10382 + "dev": true,
  10383 + "requires": {
  10384 + "ansi-styles": "^2.2.1",
  10385 + "escape-string-regexp": "^1.0.2",
  10386 + "has-ansi": "^2.0.0",
  10387 + "strip-ansi": "^3.0.0",
  10388 + "supports-color": "^2.0.0"
  10389 + }
  10390 + },
  10391 + "supports-color": {
  10392 + "version": "2.0.0",
  10393 + "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz",
  10394 + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
  10395 + "dev": true
  10396 + }
  10397 + }
  10398 + },
10352 "sax": { 10399 "sax": {
10353 "version": "1.2.4", 10400 "version": "1.2.4",
10354 "resolved": "http://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz", 10401 "resolved": "http://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
@@ -12660,6 +12707,11 @@ @@ -12660,6 +12707,11 @@
12660 "requires": { 12707 "requires": {
12661 "camelcase": "^3.0.0" 12708 "camelcase": "^3.0.0"
12662 } 12709 }
  12710 + },
  12711 + "zrender": {
  12712 + "version": "4.0.4",
  12713 + "resolved": "http://registry.npm.taobao.org/zrender/download/zrender-4.0.4.tgz",
  12714 + "integrity": "sha1-kQ5g2IjwDJWZBz8jdY3SM0X+SP0="
12663 } 12715 }
12664 } 12716 }
12665 } 12717 }
package.json
  View file @227ea0f
@@ -11,6 +11,7 @@ @@ -11,6 +11,7 @@
11 "build": "node build/build.js" 11 "build": "node build/build.js"
12 }, 12 },
13 "dependencies": { 13 "dependencies": {
  14 + "echarts": "^4.1.0",
14 "vue": "^2.5.2" 15 "vue": "^2.5.2"
15 }, 16 },
16 "devDependencies": { 17 "devDependencies": {
@@ -50,6 +51,7 @@ @@ -50,6 +51,7 @@
50 "postcss-url": "^7.2.1", 51 "postcss-url": "^7.2.1",
51 "rimraf": "^2.6.0", 52 "rimraf": "^2.6.0",
52 "sass-loader": "^7.1.0", 53 "sass-loader": "^7.1.0",
  54 + "sass-resources-loader": "^2.0.0",
53 "semver": "^5.3.0", 55 "semver": "^5.3.0",
54 "shelljs": "^0.7.6", 56 "shelljs": "^0.7.6",
55 "style-loader": "^0.23.1", 57 "style-loader": "^0.23.1",
src/components/HelloWorld.vue deleted
View file @ae08363
1 -<template>  
2 - <div class="hello">  
3 - <h1>{{ msg }}</h1>  
4 - <h2>Essential Links</h2>  
5 - <ul>  
6 - <li>  
7 - <a  
8 - href="https://vuejs.org"  
9 - target="_blank"  
10 - >  
11 - Core Docs  
12 - </a>  
13 - </li>  
14 - <li>  
15 - <a  
16 - href="https://forum.vuejs.org"  
17 - target="_blank"  
18 - >  
19 - Forum  
20 - </a>  
21 - </li>  
22 - <li>  
23 - <a  
24 - href="https://chat.vuejs.org"  
25 - target="_blank"  
26 - >  
27 - Community Chat  
28 - </a>  
29 - </li>  
30 - <li>  
31 - <a  
32 - href="https://twitter.com/vuejs"  
33 - target="_blank"  
34 - >  
35 - Twitter  
36 - </a>  
37 - </li>  
38 - <br>  
39 - <li>  
40 - <a  
41 - href="http://vuejs-templates.github.io/webpack/"  
42 - target="_blank"  
43 - >  
44 - Docs for This Template  
45 - </a>  
46 - </li>  
47 - </ul>  
48 - <h2>Ecosystem</h2>  
49 - <ul>  
50 - <li>  
51 - <a  
52 - href="http://router.vuejs.org/"  
53 - target="_blank"  
54 - >  
55 - vue-router  
56 - </a>  
57 - </li>  
58 - <li>  
59 - <a  
60 - href="http://vuex.vuejs.org/"  
61 - target="_blank"  
62 - >  
63 - vuex  
64 - </a>  
65 - </li>  
66 - <li>  
67 - <a  
68 - href="http://vue-loader.vuejs.org/"  
69 - target="_blank"  
70 - >  
71 - vue-loader  
72 - </a>  
73 - </li>  
74 - <li>  
75 - <a  
76 - href="https://github.com/vuejs/awesome-vue"  
77 - target="_blank"  
78 - >  
79 - awesome-vue  
80 - </a>  
81 - </li>  
82 - </ul>  
83 - </div>  
84 -</template>  
85 -  
86 -<script>  
87 -export default {  
88 - name: 'HelloWorld',  
89 - data () {  
90 - return {  
91 - msg: 'Welcome to Your Vue.js App'  
92 - }  
93 - }  
94 -}  
95 -</script>  
96 -  
97 -<!-- Add "scoped" attribute to limit CSS to this component only -->  
98 -<style scoped>  
99 -h1, h2 {  
100 - font-weight: normal;  
101 -}  
102 -ul {  
103 - list-style-type: none;  
104 - padding: 0;  
105 -}  
106 -li {  
107 - display: inline-block;  
108 - margin: 0 10px;  
109 -}  
110 -a {  
111 - color: #42b983;  
112 -}  
113 -</style>  
src/components/VBerth.vue 0 → 100644
  View file @227ea0f
  1 +<template>
  2 + <div class="theme-wrap">
  3 + <card-title> <span>泊位消息</span></card-title>
  4 + <div class="theme-body">
  5 + <account-num>
  6 + <span>总计</span>
  7 + </account-num>
  8 + <ul class="income-echart">
  9 + <li>
  10 + <pie-echart :chart-data="pieChartData"></pie-echart>
  11 + </li>
  12 + <li class="berth-inf">
  13 + <p><span class="free-berth">{{11834|filterTotal}}</span><span>空余</span></p>
  14 + <p><span class="buss-berth">{{4496|filterTotal}}</span><span>占有</span></p>
  15 + </li>
  16 + </ul>
  17 + </div>
  18 + </div>
  19 +</template>
  20 +
  21 +<script>
  22 +import CardTitle from './base/CardTitle'
  23 +import AccountNum from './base/AccountNum'
  24 +import PieEchart from './base/PieEchart'
  25 +export default {
  26 + name: 'VBerth',
  27 + components: {
  28 + CardTitle,
  29 + AccountNum,
  30 + PieEchart
  31 + },
  32 + data() {
  33 + return {
  34 + pieChartData: {
  35 + yData: [1,1],
  36 + legendData: ['空余','占有']
  37 + },
  38 + }
  39 + },
  40 + mounted(){
  41 + //this.drawBar();
  42 + },
  43 + methods: {
  44 +
  45 + }
  46 +}
  47 +</script>
  48 +
  49 +<style scoped lang="scss">
  50 + .theme-wrap {
  51 + height: 100%;
  52 + }
  53 + .theme-body {
  54 + height: calc(100% - 30px);
  55 + margin-left: 20px;
  56 + }
  57 + .income-echart{
  58 + height: 70%;
  59 + display: flex;
  60 + >li{
  61 + flex: 1;
  62 + }
  63 + .berth-inf{
  64 + p{
  65 + height: 50%;
  66 + display: flex;
  67 + align-items: center;
  68 + justify-content: space-between;
  69 + padding-right: 20px;
  70 + }
  71 + .free-berth{
  72 + @include fontStyle(24px);
  73 + background-image: $fontBlue;
  74 + }
  75 + .buss-berth{
  76 + @include fontStyle(24px);
  77 + background-image: $fontOrange;
  78 + }
  79 + }
  80 + }
  81 +
  82 +</style>
src/components/VEquipment.vue 0 → 100644
  View file @227ea0f
  1 +<template>
  2 + <div class="theme-wrap">
  3 + <card-title> <span>设备监控消息</span></card-title>
  4 + <div class="theme-body">
  5 +
  6 + </div>
  7 + </div>
  8 +</template>
  9 +
  10 +<script>
  11 +import CardTitle from './base/CardTitle'
  12 +export default {
  13 + name: 'VEquipment',
  14 + components: {
  15 + CardTitle
  16 + },
  17 + data() {
  18 + return {
  19 +
  20 + }
  21 + },
  22 + mounted(){
  23 + },
  24 + methods: {
  25 +
  26 + }
  27 +}
  28 +</script>
  29 +
  30 +<style scoped lang="scss">
  31 + .theme-wrap {
  32 + height: 100%;
  33 + }
  34 + .theme-body {
  35 + height: calc(100% - 30px);
  36 + margin-left: 20px;
  37 + }
  38 +
  39 +
  40 +</style>
src/components/VIncome.vue 0 → 100644
  View file @227ea0f
  1 +<template>
  2 + <div class="theme-wrap">
  3 + <card-title> <span>收入消息</span></card-title>
  4 + <div class="theme-body">
  5 + <account-num>
  6 + <span>总计</span>
  7 + </account-num>
  8 + <div class="income-echart" id="income-echart">
  9 + <bar-chart :chart-data="pieChartData"></bar-chart>
  10 + </div>
  11 + </div>
  12 + </div>
  13 +</template>
  14 +
  15 +<script>
  16 +import CardTitle from './base/CardTitle'
  17 +import AccountNum from './base/AccountNum'
  18 +import barChart from './base/barChart'
  19 +export default {
  20 + name: 'VIncome',
  21 + components: {
  22 + CardTitle,
  23 + AccountNum,
  24 + barChart
  25 + },
  26 + data() {
  27 + return {
  28 + pieChartData: {
  29 + yData: [1,1],
  30 + legendData: ['空余','占有']
  31 + },
  32 + }
  33 + },
  34 + mounted(){
  35 + //this.drawBar();
  36 + },
  37 + methods: {
  38 +
  39 + }
  40 +}
  41 +</script>
  42 +
  43 +<style scoped lang="scss">
  44 + .theme-wrap {
  45 + height: 100%;
  46 + }
  47 + .theme-body {
  48 + height: calc(100% - 30px);
  49 + margin-left: 20px;
  50 + }
  51 + .income-echart{
  52 + height: 70%;
  53 + }
  54 +
  55 +</style>
src/components/VInout.vue 0 → 100644
  View file @227ea0f
  1 +<template>
  2 + <div class="theme-wrap">
  3 + <card-title> <span>进出场消息</span></card-title>
  4 + <div class="theme-body">
  5 + <div class="access-title">
  6 + <p><span><span class="access-icon"></span>万达停车场 京A243547 进场</span> <span>07:20</span></p>
  7 + </div>
  8 + <div class="access-img" :style="{backgroundImage:'url('+imgUrl+')'}"></div>
  9 + </div>
  10 + </div>
  11 +</template>
  12 +
  13 +<script>
  14 +import CardTitle from './base/CardTitle'
  15 +import AccountNum from './base/AccountNum'
  16 +export default {
  17 + name: 'VInout',
  18 + components: {
  19 + CardTitle,
  20 + AccountNum
  21 + },
  22 + data(){
  23 + return{
  24 + sideNum: 23454,
  25 + closeNum: 23454,
  26 + 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'}
  27 + }
  28 +}
  29 +</script>
  30 +
  31 +<style scoped lang="scss">
  32 + .theme-wrap {
  33 + height: 100%;
  34 + }
  35 + .theme-body {
  36 + height: calc(100% - 30px);
  37 + margin-left: 20px;
  38 + }
  39 + .access-title{
  40 + height: 30% ;
  41 + display: flex;
  42 + align-items: center;
  43 + p {
  44 + width: 99%;
  45 + padding-right: 20px;
  46 + height: 26px;
  47 + line-height: 26px;
  48 + display: flex;
  49 + justify-content: space-between;
  50 + background: linear-gradient(to right, rgba(0, 45, 140, .1) , rgba(0, 45, 140, .7));
  51 +
  52 + }
  53 + .access-icon{
  54 + display: inline-block;
  55 + vertical-align: middle;
  56 + width: 22px;
  57 + height: 26px;
  58 + margin-right: 10px;
  59 + background: url("../images/content/access-icon.png") no-repeat 0 center;
  60 + background-size: 22px 22px;
  61 + }
  62 + }
  63 + .access-img{
  64 + width: 93%;
  65 + height: 60%;
  66 + background-repeat: no-repeat;
  67 + background-size: 100% 100%;
  68 + }
  69 +
  70 +</style>
src/components/VParking.vue 0 → 100644
  View file @227ea0f
  1 +<template>
  2 + <div class="theme-wrap">
  3 + <card-title> <span>停车场消息</span></card-title>
  4 + <div class="theme-body">
  5 + <account-num>
  6 + <span>总计</span>
  7 + </account-num>
  8 + <ul class="theme-container">
  9 + <li class="roadside">
  10 + <p>{{sideNum|filterTotal}}</p>
  11 + <p>路侧</p>
  12 + </li>
  13 + <li class="roadclose">
  14 + <p>{{closeNum|filterTotal}}</p>
  15 + <p>封闭</p>
  16 + </li>
  17 + </ul>
  18 + </div>
  19 + </div>
  20 +</template>
  21 +
  22 +<script>
  23 +import CardTitle from './base/CardTitle'
  24 +import AccountNum from './base/AccountNum'
  25 +export default {
  26 + name: 'VParking',
  27 + components: {
  28 + CardTitle,
  29 + AccountNum
  30 + },
  31 + data(){
  32 + return{
  33 + sideNum: 23454,
  34 + closeNum: 23454
  35 + }
  36 + }
  37 +}
  38 +</script>
  39 +
  40 +<style scoped lang="scss">
  41 + .theme-wrap {
  42 + height: 100%;
  43 + }
  44 + .theme-body {
  45 + height: calc(100% - 30px);
  46 + margin-left: 20px;
  47 + }
  48 + .theme-container{
  49 + height: 70%;
  50 + display: flex;
  51 + align-items: center;
  52 + >li{
  53 + flex: 1;
  54 + height: 57px;
  55 + padding-left: 70px;
  56 + display: flex;
  57 + flex-direction: column;
  58 + justify-content: space-between;
  59 + &:nth-of-type(1){
  60 + p{
  61 + &:first-child{
  62 + @include fontStyle(24px);
  63 + background-image: $fontBlue;
  64 + }
  65 + &:last-child{
  66 + font-size: 14px;
  67 + }
  68 + }
  69 + }
  70 + &:nth-of-type(2){
  71 + p{
  72 + &:first-child{
  73 + @include fontStyle(24px);
  74 + background-image: $fontOrange;
  75 + }
  76 + &:last-child{
  77 + font-size: 14px;
  78 + }
  79 + }
  80 + }
  81 + }
  82 +
  83 + .roadside{
  84 + background: url("../images/content/roadside.png") no-repeat 0 center;
  85 + }
  86 + .roadclose{
  87 + background: url("../images/content/roadclose.png") no-repeat 0 center;
  88 + }
  89 + }
  90 +
  91 +</style>
src/components/VToll.vue 0 → 100644
  View file @227ea0f
  1 +<template>
  2 + <div class="theme-wrap">
  3 + <card-title> <span>收费员消息</span></card-title>
  4 + <div class="theme-body">
  5 + <account-num>
  6 + <span>应签到</span>
  7 + </account-num>
  8 + <ul class="theme-container">
  9 + <li class="roadside">
  10 + <p>{{sideNum|filterTotal}}</p>
  11 + <p>已签到</p>
  12 + </li>
  13 + <li class="roadclose">
  14 + <p>{{closeNum|filterTotal}}</p>
  15 + <p>未签到</p>
  16 + </li>
  17 + </ul>
  18 + </div>
  19 + </div>
  20 +</template>
  21 +
  22 +<script>
  23 +import CardTitle from './base/CardTitle'
  24 +import AccountNum from './base/AccountNum'
  25 +export default {
  26 + name: 'VToll',
  27 + components: {
  28 + CardTitle,
  29 + AccountNum
  30 + },
  31 + data(){
  32 + return{
  33 + sideNum: 23454,
  34 + closeNum: 23454
  35 + }
  36 + }
  37 +}
  38 +</script>
  39 +
  40 +<style scoped lang="scss">
  41 + .theme-wrap {
  42 + height: 100%;
  43 + }
  44 + .theme-body {
  45 + height: calc(100% - 30px);
  46 + margin-left: 20px;
  47 + }
  48 + .theme-container{
  49 + height: 70%;
  50 + display: flex;
  51 + align-items: center;
  52 + >li{
  53 + flex: 1;
  54 + height: 49px;
  55 + padding-left: 70px;
  56 + display: flex;
  57 + flex-direction: column;
  58 + justify-content: space-between;
  59 + &:nth-of-type(1){
  60 + p{
  61 + &:first-child{
  62 + @include fontStyle(24px);
  63 + background-image: $fontBlue;
  64 + }
  65 + &:last-child{
  66 + font-size: 14px;
  67 + }
  68 + }
  69 + }
  70 + &:nth-of-type(2){
  71 + p{
  72 + &:first-child{
  73 + @include fontStyle(24px);
  74 + background-image: $fontOrange;
  75 + }
  76 + &:last-child{
  77 + font-size: 14px;
  78 + }
  79 + }
  80 + }
  81 + }
  82 +
  83 + .roadside{
  84 + background: url("../images/content/sign.png") no-repeat 0 center;
  85 + }
  86 + .roadclose{
  87 + background: url("../images/content/nosign.png") no-repeat 0 center;
  88 + }
  89 + }
  90 +
  91 +</style>
src/components/base/AccountNum.vue 0 → 100644
  View file @227ea0f
  1 +<template>
  2 + <div class="total-wrap">
  3 + <slot></slot>
  4 + <div class="total-main" >
  5 + <div v-for="item in total" :key="item" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" >
  6 + {{item}}
  7 + </div>
  8 + </div>
  9 + </div>
  10 +</template>
  11 +
  12 +<script>
  13 +import { formaterTotal } from '../../utils/formate'
  14 +export default {
  15 + name: 'AccountNum',
  16 + data(){
  17 + return {
  18 + total: formaterTotal(219706)
  19 + }
  20 + }
  21 +}
  22 +</script>
  23 +
  24 +<style scoped lang="scss">
  25 + .total-wrap{
  26 + height: 30%;
  27 + display: flex;
  28 + align-items: center;
  29 + span{
  30 + display: inline-block;
  31 + width: 50px;
  32 + text-align: left;
  33 + }
  34 + .total-main{
  35 + /*margin-left: 10px;*/
  36 + padding: 5px 5px 5px 0;
  37 + background: url("../../images/content/numBorder.svg") no-repeat;
  38 + background-size: 100% 100%;
  39 + }
  40 + .eleNumBg{
  41 + width: 20px;
  42 + height: 30px;
  43 + display: inline-block;
  44 + margin-left: 5px;
  45 + line-height: 30px;
  46 + font-size: 22px;
  47 + font-weight: 600;
  48 + text-align: center;
  49 + background: url("../../images/content/numBg.svg") no-repeat;
  50 + background-size: 100% 100%;
  51 + }
  52 + .noeleNumBg{
  53 + width: 10px;
  54 + height: 30px;
  55 + display: inline-block;
  56 + margin-left: 5px;
  57 + line-height: 30px;
  58 + font-size: 22px;
  59 + font-weight: 600;
  60 + text-align: center;
  61 + }
  62 + }
  63 +</style>
src/components/base/CardTitle.vue 0 → 100644
  View file @227ea0f
  1 +<template>
  2 + <div class="theme-title">
  3 + <slot></slot>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: 'CardTitle'
  10 +}
  11 +</script>
  12 +
  13 +<style scoped lang="scss">
  14 + .theme-title {
  15 + height: 30px;
  16 + line-height: 30px;
  17 + background: url("../../images/content/cardTitleBg.png") no-repeat;
  18 + background-size: 100% 100%;
  19 + }
  20 +
  21 + .theme-title span {
  22 + margin-left: 60px;
  23 + position: relative;
  24 + font-size: 14px;
  25 + }
  26 +
  27 + .theme-title span:before {
  28 + content: '';
  29 + background: url('../../images/content/cardTitleSide.png') no-repeat;
  30 + background-size: 100% 100%;
  31 + position: absolute;
  32 + width: 40px;
  33 + height: 13px;
  34 + top: 3px;
  35 + left: -47px;
  36 + }
  37 +
  38 + .theme-title span:after {
  39 + content: '';
  40 + background: url('../../images/content/cardTitleSide.png') no-repeat;
  41 + background-size: 100% 100%;
  42 + position: absolute;
  43 + width: 40px;
  44 + height: 13px;
  45 + top: 3px;
  46 + right: -50px;
  47 + }
  48 +</style>
src/components/base/PieEchart.vue 0 → 100644
  View file @227ea0f
  1 +<template>
  2 + <div :class="className" :style="{height:height,width:width}"></div>
  3 +</template>
  4 +
  5 +<script>
  6 +import echarts from 'echarts'
  7 +
  8 +require('echarts/theme/macarons') // echarts theme
  9 +import {debounce} from '../../utils/debounce'
  10 +
  11 +export default {
  12 + name: 'PieEchart',
  13 + props: {
  14 + className: {
  15 + type: String,
  16 + default: 'chart'
  17 + },
  18 + width: {
  19 + type: String,
  20 + default: '100%'
  21 + },
  22 + height: {
  23 + type: String,
  24 + default: '100%'
  25 + },
  26 + autoResize: {
  27 + type: Boolean,
  28 + default: true
  29 + },
  30 + chartData: {
  31 + type: Object,
  32 + required: true
  33 + }
  34 + },
  35 + data() {
  36 + return {
  37 + chart: null
  38 + }
  39 + },
  40 + watch: {
  41 + chartData: function () {
  42 + this.$nextTick(()=>{
  43 + this.initChart()
  44 + })
  45 + }
  46 + },
  47 + mounted() {
  48 + this.initChart()
  49 + if (this.autoResize) {
  50 + this.__resizeHandler = debounce(() => {
  51 + if (this.chart) {
  52 + this.chart.resize()
  53 + }
  54 + }, 100)
  55 + window.addEventListener('resize', this.__resizeHandler)
  56 + }
  57 + },
  58 + beforeDestroy() {
  59 + if (!this.chart) {
  60 + return
  61 + }
  62 + if (this.autoResize) {
  63 + window.removeEventListener('resize', this.__resizeHandler)
  64 + }
  65 +
  66 + this.chart.dispose()
  67 + this.chart = null
  68 + },
  69 + methods: {
  70 + setOptions({yData} = {}) {
  71 + this.chart.setOption(
  72 + {
  73 + tooltip: {
  74 + show:false
  75 + },
  76 + series: [
  77 + {
  78 + type: 'pie',
  79 + radius: ['60%', '75%'],
  80 + center: ['50%', '50%'],
  81 + hoverAnimation:false,
  82 + label: {
  83 + show: false
  84 + },
  85 + lableLine: {
  86 + show: false
  87 + },
  88 + data: [
  89 + {
  90 + value: yData[0],
  91 + name: '空余',
  92 + itemStyle: {
  93 + normal: {
  94 + color: {
  95 + colorStops: [{
  96 + offset: 0,
  97 + color: '#00CAFE' // 0% 处的颜色
  98 + }, {
  99 + offset: 1,
  100 + color: '#2772F4' // 100% 处的颜色
  101 + }]
  102 + },
  103 + }
  104 + }
  105 + },
  106 + {
  107 + value: yData[1],
  108 + name: '占有',
  109 +
  110 + itemStyle: {
  111 + normal: {
  112 + color: {
  113 + colorStops: [{
  114 + offset: 0,
  115 + color: '#FFBA00' // 0% 处的颜色
  116 + }, {
  117 + offset: 1,
  118 + color: '#FF8100' // 100% 处的颜色
  119 + }]
  120 + },
  121 + }
  122 + }
  123 + },
  124 +
  125 + ],
  126 + animationType: 'scale',
  127 + animationEasing: 'elasticOut'
  128 + },
  129 + {
  130 + name: '', type: 'pie',
  131 + clockWise: true,hoverAnimation: false,
  132 + radius: ['90%', '90%'],
  133 + label: { normal: { position: 'center' }},
  134 + data: [{
  135 + value: 0,
  136 + label: {
  137 + normal: {
  138 + formatter: '30.5%',//小数点后一位
  139 + textStyle: {
  140 + color: '#fe8b53',
  141 + fontSize: 18,
  142 + fontWeight: 'normal'
  143 + }
  144 + }
  145 + }
  146 + }, {
  147 + tooltip: {show: false},
  148 + label: {
  149 + normal: {
  150 + formatter: '\n占有',
  151 + textStyle: {
  152 + color: '#bbeaf9',fontSize: 12
  153 + }
  154 + }
  155 + }
  156 + }]
  157 + }
  158 +
  159 + ]
  160 + }
  161 + )
  162 + },
  163 + initChart() {
  164 + this.chart = echarts.init(this.$el)
  165 + this.setOptions(this.chartData)
  166 + },
  167 +
  168 + }
  169 +}
  170 +</script>
src/components/base/barChart.vue 0 → 100644
  View file @227ea0f
  1 +<template>
  2 + <div :class="className" :style="{height:height,width:width}"></div>
  3 +</template>
  4 +
  5 +<script>
  6 +import echarts from 'echarts'
  7 +
  8 +require('echarts/theme/macarons') // echarts theme
  9 +import {debounce} from '../../utils/debounce'
  10 +
  11 +export default {
  12 + name: 'barChart',
  13 + props: {
  14 + className: {
  15 + type: String,
  16 + default: 'chart'
  17 + },
  18 + width: {
  19 + type: String,
  20 + default: '100%'
  21 + },
  22 + height: {
  23 + type: String,
  24 + default: '100%'
  25 + },
  26 + autoResize: {
  27 + type: Boolean,
  28 + default: true
  29 + },
  30 + chartData: {
  31 + type: Object,
  32 + required: true
  33 + }
  34 + },
  35 + data() {
  36 + return {
  37 + chart: null
  38 + }
  39 + },
  40 + watch: {
  41 + chartData: function () {
  42 + this.$nextTick(()=>{
  43 + this.initChart()
  44 + })
  45 + }
  46 + },
  47 + mounted() {
  48 + this.initChart()
  49 + if (this.autoResize) {
  50 + this.__resizeHandler = debounce(() => {
  51 + if (this.chart) {
  52 + this.chart.resize()
  53 + }
  54 + }, 100)
  55 + window.addEventListener('resize', this.__resizeHandler)
  56 + }
  57 + },
  58 + beforeDestroy() {
  59 + if (!this.chart) {
  60 + return
  61 + }
  62 + if (this.autoResize) {
  63 + window.removeEventListener('resize', this.__resizeHandler)
  64 + }
  65 +
  66 + this.chart.dispose()
  67 + this.chart = null
  68 + },
  69 + methods: {
  70 + setOptions({yData} = {}) {
  71 + this.chart.setOption(
  72 + {
  73 +
  74 + grid: {
  75 + top: 0,
  76 + left: 0,
  77 + right: '20',
  78 + bottom: -10,
  79 + containLabel: true
  80 + },
  81 + title:{show:false},
  82 + xAxis: {
  83 + show: false,//尽管显示false，但仍然占用空间containLabel为true的话[echarts bug]
  84 + nameGap:0
  85 + },
  86 + yAxis: [{
  87 + show: true,
  88 + nameLocation:'start',
  89 + //data: ['支付宝', '微信', '其它'],
  90 + data: [
  91 + {
  92 + value:'支付宝',
  93 + textStyle:{
  94 + color:'#01AEFE'
  95 + }
  96 + },
  97 + {
  98 + value:'微信',
  99 + textStyle:{
  100 + color:'#06C406'
  101 + }
  102 + },
  103 + {
  104 + value:'其它',
  105 + textStyle:{
  106 + color:'#FFAB00'
  107 + }
  108 + }
  109 + ],//右侧Y轴值
  110 + inverse: true,
  111 + axisLine: {show: false},
  112 + splitLine: {show: false},
  113 + axisTick: {show: false },
  114 + axisLabel: {
  115 + //margin:-20,
  116 + // nameTextStyle:{
  117 + // align:'left'
  118 + // }
  119 + }
  120 + }, {
  121 + show: true,
  122 + inverse: true,
  123 + data: [
  124 + {
  125 + value:1000,
  126 + textStyle:{
  127 + color:'#01AEFE'
  128 + }
  129 + },
  130 + {
  131 + value:200,
  132 + textStyle:{
  133 + color:'#06C406'
  134 + }
  135 + },
  136 + {
  137 + value:300,
  138 + textStyle:{
  139 + color:'#FFAB00'
  140 + }
  141 + }
  142 + ],//右侧Y轴值
  143 + axisLabel: {
  144 + textStyle: {fontSize: 12,},
  145 + },
  146 + axisLine: { show: false },
  147 + splitLine: { show: false},
  148 + axisTick: {show: false},
  149 + }],
  150 + series: [{
  151 + name: '条',
  152 + type: 'bar',
  153 + yAxisIndex: 0,
  154 + data: [1000,200,300],
  155 + data:[
  156 + {
  157 + value:1000,
  158 + itemStyle: {
  159 + normal: {
  160 + color: {
  161 + type: 'linear',
  162 + x: 0,
  163 + x1: 1,
  164 + colorStops: [{
  165 + offset: 0,
  166 + color: '#2772F4'
  167 + }, {
  168 + offset: 1,
  169 + color: '#00CAFE'
  170 + }]
  171 + }
  172 + },
  173 + }
  174 + },
  175 + {
  176 + value:200,
  177 + itemStyle: {
  178 + normal: {
  179 + color: {
  180 + type: 'linear',
  181 + x: 0,
  182 + x1: 1,
  183 + colorStops: [{
  184 + offset: 0,
  185 + color: '#02C202'
  186 + }, {
  187 + offset: 1,
  188 + color: '#51EC51'
  189 + }]
  190 + }
  191 + },
  192 + }
  193 + },
  194 + {
  195 + value:300,
  196 + itemStyle: {
  197 + normal: {
  198 + color: {
  199 + type: 'linear',
  200 + x: 0,
  201 + x1: 1,
  202 + colorStops: [{
  203 + offset: 0,
  204 + color: '#FD8811'
  205 + }, {
  206 + offset: 1,
  207 + color: '#FFAB00'
  208 + }]
  209 + }
  210 + },
  211 + }
  212 + },
  213 +
  214 +
  215 + ],
  216 + barWidth: '40%',
  217 +
  218 + label: {
  219 + normal: {show: false}
  220 + },
  221 + }, {
  222 + name: '框',
  223 + type: 'bar',
  224 + yAxisIndex: 1,
  225 + barGap: '-100%',
  226 + data: [1500,1500,1500],//百分比
  227 + barWidth: '40%',
  228 + itemStyle: {
  229 + normal: {
  230 + color: 'none',
  231 + borderColor: '#157ADB',
  232 + borderWidth: 0.5,
  233 + //barBorderRadius: 15,
  234 + }
  235 + }
  236 + }, ]
  237 + }
  238 + )
  239 + },
  240 + initChart() {
  241 + this.chart = echarts.init(this.$el)
  242 + this.setOptions(this.chartData)
  243 + },
  244 +
  245 + }
  246 +}
  247 +</script>
src/images/content/access-icon.png 0 → 100644
View file @227ea0f

853 Bytes
src/images/content/cardTitleBg.png 0 → 100644
View file @227ea0f

2.18 KB
src/images/content/cardTitleSide.png 0 → 100644
View file @227ea0f

1.5 KB
src/images/content/nosign.png 0 → 100644
View file @227ea0f

2.03 KB
src/images/content/numBg.svg 0 → 100644
  View file @227ea0f
  1 +<?xml version="1.0" encoding="utf-8"?>
  2 +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
  3 +<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"
  4 + viewBox="0 0 20 29" style="enable-background:new 0 0 20 29;" xml:space="preserve">
  5 +<style type="text/css">
  6 + .st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#XMLID_44_);}
  7 +</style>
  8 +<linearGradient id="XMLID_44_" gradientUnits="userSpaceOnUse" x1="10" y1="1.028133e-05" x2="10" y2="29">
  9 + <stop offset="0" style="stop-color:#574DFE"/>
  10 + <stop offset="1" style="stop-color:#4BD3FF"/>
  11 +</linearGradient>
  12 +<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
  13 + c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v9.5L17.5,14H2.5z"/>
  14 +</svg>
src/images/content/numBorder.svg 0 → 100644
  View file @227ea0f
  1 +<?xml version="1.0" encoding="utf-8"?>
  2 +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
  3 +<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"
  4 + viewBox="0 0 155 39" style="enable-background:new 0 0 155 39;" xml:space="preserve">
  5 +<style type="text/css">
  6 + .st0{opacity:0.1;}
  7 + .st1{fill:#157ADB;}
  8 + .st2{opacity:0.5;fill-rule:evenodd;clip-rule:evenodd;fill:#157ADB;}
  9 +</style>
  10 +<g id="XMLID_14_" class="st0">
  11 + <path id="XMLID_77_" class="st1" d="M154,1v37H1V1H154 M155,0H0v39h155V0L155,0z"/>
  12 +</g>
  13 +<path id="XMLID_15_" class="st2" d="M154,39h-4v-1h4v-4h1v4v1H154z M154,1h-4V0h4h1v1v4h-1V1z M0,39v-1v-4h1v4h4v1H1H0z M1,5H0V1V0
  14 + h1h4v1H1V5z"/>
  15 +</svg>
src/images/content/roadclose.png 0 → 100644
View file @227ea0f

1.57 KB
src/images/content/roadside.png 0 → 100644
View file @227ea0f

1.22 KB
src/images/content/sign.png 0 → 100644
View file @227ea0f

2.13 KB
src/main.js
  View file @227ea0f
@@ -3,6 +3,12 @@ @@ -3,6 +3,12 @@
3 import Vue from 'vue' 3 import Vue from 'vue'
4 import App from './App' 4 import App from './App'
5 import './style/reset.css' 5 import './style/reset.css'
  6 +
  7 +import * as filters from './utils/filters'
  8 +Object.keys(filters).forEach(key => {
  9 + Vue.filter(key, filters[key])
  10 +})
  11 +
6 Vue.config.productionTip = false 12 Vue.config.productionTip = false
7 13
8 /* eslint-disable no-new */ 14 /* eslint-disable no-new */
src/style/mixin.scss 0 → 100644
  View file @227ea0f
  1 +@mixin fontStyle($size){
  2 + font-size: $size;
  3 + font-weight:bold;
  4 + -webkit-background-clip: text;
  5 + -webkit-text-fill-color: transparent;
  6 +}
  7 +
  8 +$fontBlue: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0,202,254, 1)), to(rgba(39,114,244, 1)));
  9 +$fontOrange: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255,186,0, 1)), to(rgba(255,129,0, 1)));
src/style/reset.css
  View file @227ea0f
@@ -61,7 +61,7 @@ body{ @@ -61,7 +61,7 @@ body{
61 background: url("../images/bg.jpg") no-repeat; 61 background: url("../images/bg.jpg") no-repeat;
62 background-size: 100% 100%; 62 background-size: 100% 100%;
63 overflow: hidden; 63 overflow: hidden;
64 - /*background-size:100% 100%;*/ 64 + font-size: 14px;
65 /*默认颜色*/ 65 /*默认颜色*/
66 } 66 }
67 67
src/utils/debounce.js 0 → 100644
  View file @227ea0f
  1 +export function debounce(func, wait, immediate) {
  2 + let timeout, args, context, timestamp, result
  3 +
  4 + const later = function() {
  5 + // 据上一次触发时间间隔
  6 + const last = +new Date() - timestamp
  7 +
  8 + // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
  9 + if (last < wait && last > 0) {
  10 + timeout = setTimeout(later, wait - last)
  11 + } else {
  12 + timeout = null
  13 + // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
  14 + if (!immediate) {
  15 + result = func.apply(context, args)
  16 + if (!timeout) context = args = null
  17 + }
  18 + }
  19 + }
  20 +
  21 + return function(...args) {
  22 + context = this
  23 + timestamp = +new Date()
  24 + const callNow = immediate && !timeout
  25 + // 如果延时不存在，重新设定延时
  26 + if (!timeout) timeout = setTimeout(later, wait)
  27 + if (callNow) {
  28 + result = func.apply(context, args)
  29 + context = args = null
  30 + }
  31 +
  32 + return result
  33 + }
  34 +}
src/utils/filters.js 0 → 100644
  View file @227ea0f
  1 +export function filterTotal(val) {
  2 + let str = val.toString()
  3 + let newStr = ''
  4 + let count = 0
  5 + for(let i=str.length-1;i>=0;i--){
  6 + if(count % 3 == 0 && count!= 0){
  7 + newStr = str.charAt(i)+","+newStr
  8 + }else{
  9 + newStr = str.charAt(i)+newStr
  10 + }
  11 + count++
  12 + }
  13 + return newStr
  14 +}
src/utils/formate.js
  View file @227ea0f
@@ -3,7 +3,7 @@ function formateday() { @@ -3,7 +3,7 @@ function formateday() {
3 let str = '' 3 let str = ''
4 let year = date.getFullYear() 4 let year = date.getFullYear()
5 let month = date.getMonth()+1<10? "0"+ (date.getMonth()+1) : date.getMonth()+1 5 let month = date.getMonth()+1<10? "0"+ (date.getMonth()+1) : date.getMonth()+1
6 - let day = date.getDate()<10 ? "0"+date.getDate() : date.getDate 6 + let day = date.getDate()<10 ? "0"+date.getDate() : date.getDate()
7 str = year +"-"+ month +"-"+ day 7 str = year +"-"+ month +"-"+ day
8 return str 8 return str
9 } 9 }
@@ -19,4 +19,19 @@ function formateTime() { @@ -19,4 +19,19 @@ function formateTime() {
19 return str 19 return str
20 } 20 }
21 21
22 -export { formateday, formateTime } 22 +function formaterTotal(val) {
  23 + let str = val.toString()
  24 + let newStr = ''
  25 + let count = 0
  26 + for(let i=str.length-1;i>=0;i--){
  27 + if(count % 3 == 0 && count!= 0){
  28 + newStr = str.charAt(i)+","+newStr
  29 + }else{
  30 + newStr = str.charAt(i)+newStr
  31 + }
  32 + count++
  33 + }
  34 + return newStr.split("")
  35 +}
  36 +
  37 +export { formateday, formateTime, formaterTotal }
src/view/VHome.vue
  View file @227ea0f
@@ -3,17 +3,29 @@ @@ -3,17 +3,29 @@
3 <v-header></v-header> 3 <v-header></v-header>
4 <ul class="main-wrap"> 4 <ul class="main-wrap">
5 <li class="main-left"> 5 <li class="main-left">
6 - <div class="frame-wrap"></div>  
7 - <div class="frame-wrap frame-wrap-center"></div>  
8 - <div class="frame-wrap"></div> 6 + <div class="frame-wrap">
  7 + <v-parking></v-parking>
  8 + </div>
  9 + <div class="frame-wrap frame-wrap-center">
  10 + <v-toll></v-toll>
  11 + </div>
  12 + <div class="frame-wrap">
  13 + <v-inout></v-inout>
  14 + </div>
9 </li> 15 </li>
10 <li class="main-center"> 16 <li class="main-center">
11 <v-map></v-map> 17 <v-map></v-map>
12 </li> 18 </li>
13 <li class="main-right"> 19 <li class="main-right">
14 - <div class="frame-wrap"></div>  
15 - <div class="frame-wrap frame-wrap-center"></div>  
16 - <div class="frame-wrap"></div> 20 + <div class="frame-wrap">
  21 + <v-income></v-income>
  22 + </div>
  23 + <div class="frame-wrap frame-wrap-center">
  24 + <v-berth></v-berth>
  25 + </div>
  26 + <div class="frame-wrap">
  27 + <v-equipment></v-equipment>
  28 + </div>
17 </li> 29 </li>
18 </ul> 30 </ul>
19 </div> 31 </div>
@@ -22,11 +34,23 @@ @@ -22,11 +34,23 @@
22 <script> 34 <script>
23 import VHeader from '../components/VHeader' 35 import VHeader from '../components/VHeader'
24 import VMap from '../components/VMap' 36 import VMap from '../components/VMap'
  37 +import VParking from '../components/VParking'
  38 +import VToll from '../components/VToll'
  39 +import VInout from '../components/VInout'
  40 +import VIncome from '../components/VIncome'
  41 +import VBerth from '../components/VBerth'
  42 +import VEquipment from '../components/VEquipment'
25 export default { 43 export default {
26 name: 'VHome', 44 name: 'VHome',
27 components: { 45 components: {
28 VHeader, 46 VHeader,
29 - VMap 47 + VMap,
  48 + VParking,
  49 + VToll,
  50 + VInout,
  51 + VIncome,
  52 + VBerth,
  53 + VEquipment
30 } 54 }
31 } 55 }
32 </script> 56 </script>
@@ -57,11 +81,14 @@ export default { @@ -57,11 +81,14 @@ export default {
57 } 81 }
58 .frame-wrap{ 82 .frame-wrap{
59 height: calc((100% - 20px)/3); 83 height: calc((100% - 20px)/3);
60 - border-image-source: url("../images/content/frame-wrap.png");  
61 - border-image-slice: 10 16 15 10 fill;  
62 - border-width: 10px 16px 15px 10px;  
63 - border-style: solid;  
64 - background-clip: border-box; 84 + background: url("../images/content/frame-wrap.png");
  85 + background-size: 100% 100%;
  86 + overflow: hidden;
  87 + /*border-image-source: url("../images/content/frame-wrap.png");*/
  88 + /*border-image-slice: 3 16 11 3 fill;*/
  89 + /*border-width: 3px 18px 11px 3px;*/
  90 + /*border-style: solid;*/
  91 + /*background-clip: border-box;*/
65 } 92 }
66 93
67 </style> 94 </style>