From 83dd5278723c81bf9a95b947e0363006910f4a44 Mon Sep 17 00:00:00 2001 From: j1ack <1209452658@qq.com> Date: Wed, 17 Aug 2022 11:40:27 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=94=B6=E8=B4=B9top5?= =?UTF-8?q?=EF=BC=8C=E5=8A=A0=E5=88=86=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 70 ++- package.json | 2 + src/App.vue | 86 ++++ src/api/form.js | 22 + src/api/request.js | 1 + src/assets/styles/common.scss | 84 ++-- src/components/Pagination/index.vue | 101 +++++ src/components/dynamicList/index.vue | 201 +++++---- src/components/index.js | 3 + src/components/ringPie/index.vue | 10 +- src/components/seamless/index.vue | 20 +- src/components/seamlessRank/index.vue | 614 ++++++++++++++++++++++++++ src/main.js | 9 +- src/router/index.js | 42 +- src/utils/scroll-to.js | 58 +++ src/views/Brand.vue | 303 +++++++++++-- 16 files changed, 1448 insertions(+), 178 deletions(-) create mode 100644 src/components/Pagination/index.vue create mode 100644 src/components/seamlessRank/index.vue create mode 100644 src/utils/scroll-to.js diff --git a/package-lock.json b/package-lock.json index ed40091..bdaaad5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1905,6 +1905,11 @@ "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==", "dev": true }, + "amfe-flexible": { + "version": "2.2.1", + "resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz", + "integrity": "sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw==" + }, "ansi-colors": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", @@ -2150,6 +2155,14 @@ "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==", "dev": true }, + "async-validator": { + "version": "1.8.5", + "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz", + "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==", + "requires": { + "babel-runtime": "6.x" + } + }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz", @@ -2228,6 +2241,11 @@ "resolve": "^1.12.0" } }, + "babel-helper-vue-jsx-merge-props": { + "version": "2.0.3", + "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz", + "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==" + }, "babel-loader": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz", @@ -2250,6 +2268,27 @@ "object.assign": "^4.1.0" } }, + "babel-runtime": { + "version": "6.26.0", + "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz", + "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==", + "requires": { + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" + }, + "dependencies": { + "core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==" + }, + "regenerator-runtime": { + "version": "0.11.1", + "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" + } + } + }, "balanced-match": { "version": "1.0.0", "resolved": "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz", @@ -4403,8 +4442,7 @@ "deepmerge": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz", - "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==", - "dev": true + "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==" }, "default-gateway": { "version": "5.0.5", @@ -4864,6 +4902,19 @@ "integrity": "sha512-i2QrQtHes5fK/F9QGG5XacM5WKEuR322fxTYF9e8O9Gu0mc0WmjjwGpV8c7Htso6Zf2Di18lc3SIPxmMeRFBug==", "dev": true }, + "element-ui": { + "version": "2.15.9", + "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.9.tgz", + "integrity": "sha512-dx45nQLt4Hn87/Z9eRr3ex6KFZbxlFAwEU3QoW3wA5EsYftvHTyL9Pq7VnXXD7hu1Eiaup2jcs6kp+/VSFmXuA==", + "requires": { + "async-validator": "~1.8.1", + "babel-helper-vue-jsx-merge-props": "^2.0.0", + "deepmerge": "^1.2.0", + "normalize-wheel": "^1.0.1", + "resize-observer-polyfill": "^1.5.0", + "throttle-debounce": "^1.0.1" + } + }, "elliptic": { "version": "6.5.2", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz", @@ -8184,6 +8235,11 @@ "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==", "dev": true }, + "normalize-wheel": { + "version": "1.0.1", + "resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz", + "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==" + }, "npm-run-path": { "version": "2.0.2", "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz", @@ -10047,6 +10103,11 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.17.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz", @@ -11417,6 +11478,11 @@ "neo-async": "^2.6.0" } }, + "throttle-debounce": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz", + "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==" + }, "through": { "version": "2.3.8", "resolved": "http://registry.npm.taobao.org/through/download/through-2.3.8.tgz", diff --git a/package.json b/package.json index af4e0f4..259deb1 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,12 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "amfe-flexible": "^2.2.1", "axios": "^0.27.2", "core-js": "^3.6.4", "dayjs": "^1.11.4", "echarts": "^5.3.3", + "element-ui": "^2.15.9", "loading-view-vue": "^1.0.3", "screenfull": "^5.0.2", "vue": "^2.6.11", diff --git a/src/App.vue b/src/App.vue index 0d2caaf..174f1b6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -11,6 +11,92 @@ export default { diff --git a/src/components/dynamicList/index.vue b/src/components/dynamicList/index.vue index cf0d3ed..bbbdfe6 100644 --- a/src/components/dynamicList/index.vue +++ b/src/components/dynamicList/index.vue @@ -1,11 +1,10 @@ @@ -126,53 +129,75 @@ export default { components: { countTo }, + props: { + chartData: { + required: true, + }, + }, data() { return { startVal: 0 } }, + watch: { + chartData: { + handler: function (val) { + val.freeCarNum = parseInt(val.freeCarNum) + val.greenCarNum = parseInt(val.greenCarNum) + val.temporaryCarNum = parseInt(val.temporaryCarNum) + val.yueZuCheNum = parseInt(val.yueZuCheNum) + }, + deep: true + } + }, mounted() { - + setTimeout(() => { + + + }, 800); + }, methods: { - + }, beforeDestroy() { - + } }; diff --git a/src/components/index.js b/src/components/index.js index ea1490c..f1ca62e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -3,6 +3,8 @@ import bgAnimation from './bgAnimation' // 登录界面背景图动画 import modal from './modal' // 自定义全局模态框 import sinan from './sinan' // 司南排名图 import seamless from './seamless' // 新闻无缝滚动 +import seamlessRank from './seamlessRank' // 新闻无缝滚动 + import pyramid from './pyramid' // 金字塔动画 import scrollArc from './scrollArc' // 滚动弧形线 import szBar from './szBar' // 双轴柱状图 @@ -39,6 +41,7 @@ const components = { modal, sinan, seamless, + seamlessRank, pyramid, scrollArc, szBar, diff --git a/src/components/ringPie/index.vue b/src/components/ringPie/index.vue index d3afc3c..826251e 100644 --- a/src/components/ringPie/index.vue +++ b/src/components/ringPie/index.vue @@ -48,8 +48,12 @@ export default { this.chartData.parkingPlaceUseNums=0 this.chartData.parkingPlaceTotalNums=1 } - this.dataRate=this.chartData.parkingPlaceUseNums/this.chartData.parkingPlaceTotalNums - this.dataRate=Math.round(this.dataRate*100) + if(!this.chartData.parkingPlaceTurnover){ + this.chartData.parkingPlaceTurnover=0 + } + // this.dataRate=this.chartData.parkingPlaceUseNums/this.chartData.parkingPlaceTotalNums + // this.dataRate=Math.round(this.dataRate*100) + this.dataRate=this.chartData.parkingPlaceTurnover this.shenRate=100-this.dataRate this.getEchart(); }, 800); @@ -58,6 +62,8 @@ export default { chartData: { deep: true, handler: function () { + this.dataRate=this.chartData.parkingPlaceTurnover + this.shenRate=100-this.dataRate this.getEchart() } } diff --git a/src/components/seamless/index.vue b/src/components/seamless/index.vue index 6e8821e..26f8ac6 100644 --- a/src/components/seamless/index.vue +++ b/src/components/seamless/index.vue @@ -5,7 +5,7 @@
时间 停车场 - 出入口 + 通道 车辆类型 车牌号 收费金额 @@ -15,8 +15,12 @@
{{ item.createTime }} - {{ item.parkName }} - {{ item.entranceChannel }} + + {{ item.parkName }} + + + {{ item.entranceChannel }} + {{ item.carType }} {{ item.plateNumber }} {{ item.orderRealPaidAmout }}元 @@ -67,6 +71,12 @@ export default { diff --git a/src/main.js b/src/main.js index 28074a7..fc62218 100644 --- a/src/main.js +++ b/src/main.js @@ -8,7 +8,7 @@ import Toast from './components/toast' import axios from 'axios' import dayjs from 'dayjs' - +import Pagination from "@/components/Pagination"; import '@/assets/styles/base.scss' @@ -16,14 +16,17 @@ import '@/assets/styles/common.scss' import '@/assets/iconfont/iconfont.css' // import loadingViewerVue from 'loading-view-vue' // Vue.use(loadingViewerVue) +import ElementUI from "element-ui"; +import "element-ui/lib/theme-chalk/index.css"; +Vue.use(ElementUI); Vue.use(vueParticles) Vue.use(Vcomp) Vue.config.productionTip = false Vue.prototype.axios = axios Vue.prototype.dayjs = dayjs Vue.prototype.$Toast = Toast - - +// 全局组件挂载 +Vue.component('Pagination', Pagination) router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title; diff --git a/src/router/index.js b/src/router/index.js index 10fb05b..1525f9b 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -9,29 +9,29 @@ const routes = [ name: 'Brand', component: () => import('@/views/Brand.vue'), meta: { - title: '智慧云停车大数据平台' + title: '乐趴智慧云大数据平台' + } + }, + { + path: '/login', + redirect: '/' + }, + { + path: '/home', + name: 'Home', + component: () => import('@/views/Home.vue'), + meta: { + title: '酷屏首页统计图' + } + }, + { + path: '/login', + name: 'Login', + component: () => import('@/views/Login.vue'), + meta: { + title: '登录界面' } }, - // { - // path: '/login', - // redirect: '/' - // }, - // { - // path: '/home', - // name: 'Home', - // component: () => import('@/views/Home.vue'), - // meta: { - // title: '酷屏首页统计图' - // } - // }, - // { - // path: '/login', - // name: 'Login', - // component: () => import('@/views/Login.vue'), - // meta: { - // title: '登录界面' - // } - // }, { path:'/404', name:'404', diff --git a/src/utils/scroll-to.js b/src/utils/scroll-to.js new file mode 100644 index 0000000..c5d8e04 --- /dev/null +++ b/src/utils/scroll-to.js @@ -0,0 +1,58 @@ +Math.easeInOutQuad = function(t, b, c, d) { + t /= d / 2 + if (t < 1) { + return c / 2 * t * t + b + } + t-- + return -c / 2 * (t * (t - 2) - 1) + b +} + +// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts +var requestAnimFrame = (function() { + return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) } +})() + +/** + * Because it's so fucking difficult to detect the scrolling element, just move them all + * @param {number} amount + */ +function move(amount) { + document.documentElement.scrollTop = amount + document.body.parentNode.scrollTop = amount + document.body.scrollTop = amount +} + +function position() { + return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop +} + +/** + * @param {number} to + * @param {number} duration + * @param {Function} callback + */ +export function scrollTo(to, duration, callback) { + const start = position() + const change = to - start + const increment = 20 + let currentTime = 0 + duration = (typeof (duration) === 'undefined') ? 500 : duration + var animateScroll = function() { + // increment the time + currentTime += increment + // find the value with the quadratic in-out easing function + var val = Math.easeInOutQuad(currentTime, start, change, duration) + // move the document.body + move(val) + // do the animation unless its over + if (currentTime < duration) { + requestAnimFrame(animateScroll) + } else { + if (callback && typeof (callback) === 'function') { + // the animation is done so lets callback + callback() + } + } + } + animateScroll() +} diff --git a/src/views/Brand.vue b/src/views/Brand.vue index fcdf63d..30e585c 100644 --- a/src/views/Brand.vue +++ b/src/views/Brand.vue @@ -5,13 +5,43 @@
选择显示车场
查看全部
+
+ + + + + + + + + + + + + + + + + + + + 搜索 + 重置 + + +
- {{ item.label }} + :key="index" @click="parkingInfoId = item.pkParkingInfoId; showBi()"> + {{ item.parkingInfoName }}
+ + +
@@ -22,7 +52,7 @@ {{ week }}
-

智慧云停车大数据平台

+

乐趴智慧云大数据平台

@@ -31,12 +61,11 @@
- -
+
+ +
+
@@ -70,7 +99,9 @@
收费车辆统计
- + + +
@@ -120,9 +151,10 @@

周转率

-

{{ parseInt(useCarCon.parkingPlaceTurnover - * 100) - }}% +

+ {{ + useCarCon.parkingPlaceTurnover + }}% 0%

@@ -157,10 +189,12 @@