diff --git a/build/utils.js b/build/utils.js index e534fb0..8fd92ab 100644 --- a/build/utils.js +++ b/build/utils.js @@ -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') } diff --git a/package-lock.json b/package-lock.json index 506e75f..02594d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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=" } } } diff --git a/package.json b/package.json index 35424ad..24c2ad9 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 1c19f2a..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - diff --git a/src/components/VBerth.vue b/src/components/VBerth.vue new file mode 100644 index 0000000..9fd58ec --- /dev/null +++ b/src/components/VBerth.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/src/components/VEquipment.vue b/src/components/VEquipment.vue new file mode 100644 index 0000000..d833ca6 --- /dev/null +++ b/src/components/VEquipment.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/src/components/VIncome.vue b/src/components/VIncome.vue new file mode 100644 index 0000000..8d3aa91 --- /dev/null +++ b/src/components/VIncome.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/src/components/VInout.vue b/src/components/VInout.vue new file mode 100644 index 0000000..10f99d5 --- /dev/null +++ b/src/components/VInout.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/src/components/VParking.vue b/src/components/VParking.vue new file mode 100644 index 0000000..e0df19c --- /dev/null +++ b/src/components/VParking.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/src/components/VToll.vue b/src/components/VToll.vue new file mode 100644 index 0000000..8df7d82 --- /dev/null +++ b/src/components/VToll.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/src/components/base/AccountNum.vue b/src/components/base/AccountNum.vue new file mode 100644 index 0000000..c94013d --- /dev/null +++ b/src/components/base/AccountNum.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/src/components/base/CardTitle.vue b/src/components/base/CardTitle.vue new file mode 100644 index 0000000..d15f1bc --- /dev/null +++ b/src/components/base/CardTitle.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/src/components/base/PieEchart.vue b/src/components/base/PieEchart.vue new file mode 100644 index 0000000..bfccf62 --- /dev/null +++ b/src/components/base/PieEchart.vue @@ -0,0 +1,170 @@ + + + diff --git a/src/components/base/barChart.vue b/src/components/base/barChart.vue new file mode 100644 index 0000000..9fa503a --- /dev/null +++ b/src/components/base/barChart.vue @@ -0,0 +1,247 @@ + + + diff --git a/src/images/content/access-icon.png b/src/images/content/access-icon.png new file mode 100644 index 0000000..a6ee7f8 --- /dev/null +++ b/src/images/content/access-icon.png diff --git a/src/images/content/cardTitleBg.png b/src/images/content/cardTitleBg.png new file mode 100644 index 0000000..2d69514 --- /dev/null +++ b/src/images/content/cardTitleBg.png diff --git a/src/images/content/cardTitleSide.png b/src/images/content/cardTitleSide.png new file mode 100644 index 0000000..2a668c9 --- /dev/null +++ b/src/images/content/cardTitleSide.png diff --git a/src/images/content/nosign.png b/src/images/content/nosign.png new file mode 100644 index 0000000..ae48249 --- /dev/null +++ b/src/images/content/nosign.png diff --git a/src/images/content/numBg.svg b/src/images/content/numBg.svg new file mode 100644 index 0000000..4a1f384 --- /dev/null +++ b/src/images/content/numBg.svg @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/src/images/content/numBorder.svg b/src/images/content/numBorder.svg new file mode 100644 index 0000000..7e9c516 --- /dev/null +++ b/src/images/content/numBorder.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/src/images/content/roadclose.png b/src/images/content/roadclose.png new file mode 100644 index 0000000..34720f6 --- /dev/null +++ b/src/images/content/roadclose.png diff --git a/src/images/content/roadside.png b/src/images/content/roadside.png new file mode 100644 index 0000000..0ac1b07 --- /dev/null +++ b/src/images/content/roadside.png diff --git a/src/images/content/sign.png b/src/images/content/sign.png new file mode 100644 index 0000000..a40bbae --- /dev/null +++ b/src/images/content/sign.png diff --git a/src/main.js b/src/main.js index edf2c04..7f4e7b0 100644 --- a/src/main.js +++ b/src/main.js @@ -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 */ diff --git a/src/style/mixin.scss b/src/style/mixin.scss new file mode 100644 index 0000000..35af260 --- /dev/null +++ b/src/style/mixin.scss @@ -0,0 +1,9 @@ +@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))); diff --git a/src/style/reset.css b/src/style/reset.css index b1b6b63..2eeb531 100644 --- a/src/style/reset.css +++ b/src/style/reset.css @@ -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; /*默认颜色*/ } diff --git a/src/utils/debounce.js b/src/utils/debounce.js new file mode 100644 index 0000000..31af964 --- /dev/null +++ b/src/utils/debounce.js @@ -0,0 +1,34 @@ +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 + } +} diff --git a/src/utils/filters.js b/src/utils/filters.js new file mode 100644 index 0000000..1eee9c7 --- /dev/null +++ b/src/utils/filters.js @@ -0,0 +1,14 @@ +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 +} diff --git a/src/utils/formate.js b/src/utils/formate.js index efcce3d..3eed038 100644 --- a/src/utils/formate.js +++ b/src/utils/formate.js @@ -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 } diff --git a/src/view/VHome.vue b/src/view/VHome.vue index 36d4297..93bec17 100644 --- a/src/view/VHome.vue +++ b/src/view/VHome.vue @@ -3,17 +3,29 @@ @@ -22,11 +34,23 @@ @@ -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;*/ }