From 3147bada164f7e2cca016d8e14c942ad9a69a753 Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Tue, 2 Jan 2024 16:23:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=89=E5=86=9C=E5=A4=A7=E5=8F=AF=E8=A7=86?= =?UTF-8?q?=E5=8C=96=E5=8F=8A=E6=B8=85=E9=99=A4=E7=BC=93=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 1 + public/index.html | 3 + src/pages/screenShow/geoProducts.json | 207 ++++ src/pages/screenShow/index.vue | 294 ++--- src/pages/screenShow/indexPro.vue | 1568 +++++++++++++++++++++++++ src/router/modules/screenShowPro.js | 6 + src/router/permission.js | 2 +- src/setting.js | 2 +- src/styles/page/screenShowPro.scss | 443 +++++++ vue.config.js | 17 +- 10 files changed, 2398 insertions(+), 145 deletions(-) create mode 100644 .env create mode 100644 src/pages/screenShow/indexPro.vue create mode 100644 src/router/modules/screenShowPro.js create mode 100644 src/styles/page/screenShowPro.scss diff --git a/.env b/.env new file mode 100644 index 0000000..93bad5f --- /dev/null +++ b/.env @@ -0,0 +1 @@ +VUE_APP_VERSION=2.3.4 \ No newline at end of file diff --git a/public/index.html b/public/index.html index 0b1b861..392a951 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,9 @@ + + + +
+ + + +
+
+
安徽农业大学
+
+
+ + +
+
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + 全国分地区有效用标绿色食用单位与产品数 +
+
    +
  • {{ item.name }}
    • +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + 全国分地区绿色食品当年获证单位与产品数 +
+
    +
  • {{ item.name }}
    • +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + 全国农产品地理标志产品登记数 +
+ +
+ + + + + + + + + + + + +
省（区、市）2016年2017年2018年2019年2020年2021年
+
+
+ + + + + + + + + + + + +
{{ item.province }}{{ item.year2016 }}{{ item.year2017 }}{{ item.year2018 }}{{ item.year2019 }}{{ item.year2020 }}{{ item.year2021 }}
+
+
+
+
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+
+
+
+ + 绿色食品十大产业图谱 +
+ + +
+ +
+ + + +
+
+
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + 2022年安徽省绿色食品十大产业全产业链产值 +
+
+
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + 2013-2021年安徽省绿色食品有效用标单位数和产品数 +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + 2016-2021年安徽省农产品地理标志产品登记数 +
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/src/router/modules/screenShowPro.js b/src/router/modules/screenShowPro.js new file mode 100644 index 0000000..eeb053e --- /dev/null +++ b/src/router/modules/screenShowPro.js @@ -0,0 +1,6 @@ +export default { + path: `/screenShowPro`, + name: 'screenShowPro', + component: () => import('@/pages/screenShow/indexPro'), + meta: { title: '数据看板' } +} \ No newline at end of file diff --git a/src/router/permission.js b/src/router/permission.js index daee2fa..3b5182e 100644 --- a/src/router/permission.js +++ b/src/router/permission.js @@ -4,7 +4,7 @@ import util from "@/libs/util"; const whiteList = Setting.whiteList // 白名单 router.beforeEach((to, from, next) => { - document.title = to.path === '/screenShow' ? '安农大数据可视化看板' : Setting.titleSuffix + '-' + to.meta.title + document.title = to.path === '/screenShow' || to.path === '/screenShowPro' ? '安农大数据可视化看板' : Setting.titleSuffix + '-' + to.meta.title const role = util.local.get(Setting.tokenKey); if (!role && !whiteList.includes(to.path)) { next('/login') diff --git a/src/setting.js b/src/setting.js index 728ce58..8923f26 100644 --- a/src/setting.js +++ b/src/setting.js @@ -71,7 +71,7 @@ const Setting = { /** * 路由白名单 * */ - whiteList: ['/login', '/index/list', '/index/zxy', '/product', '/cityPartner/list', '/devPlatform/list', '/log/list', '/touristMatch/list', '/touristMatch/details', '/touristMatch/noticeDetail', '/preCourse/list', '/preCourse/details', '/preInfo/list', '/preInfo/details', '/screen', '/screenShow'], + whiteList: ['/login', '/index/list', '/index/zxy', '/product', '/cityPartner/list', '/devPlatform/list', '/log/list', '/touristMatch/list', '/touristMatch/details', '/touristMatch/noticeDetail', '/preCourse/list', '/preCourse/details', '/preInfo/list', '/preInfo/details', '/screen', '/screenShow', '/screenShowPro'], /** * 平台列表 * */ diff --git a/src/styles/page/screenShowPro.scss b/src/styles/page/screenShowPro.scss new file mode 100644 index 0000000..b28bf6e --- /dev/null +++ b/src/styles/page/screenShowPro.scss @@ -0,0 +1,443 @@ +@import '../var.scss'; +// ::-webkit-scrollbar-thumb { +// display: none; +// } +body { + min-width: 1480px; +} +// ::-webkit-scrollbar { +// width: 8px; +// height: 8px; +// } +// ::-webkit-scrollbar-thumb { +// width: 5px; +// border-radius: 6px; +// background: rgba(85, 219, 255, .8); +// } +.video { + position: absolute; + top: 0; + left: -20%; + width: 150%; + // height: 720px; +} +.wrap { + width: 100%; + height: 100vh; + color: #333; + // background: url('../../assets/img/screen/screen1.jpg') no-repeat; + // background-size: 100% 100%; + background-color: #1d360c; + overflow: auto; + .full { + z-index: 10; + position: absolute; + top: 20px; + right: 30px; + cursor: pointer; + transition: 0.5s; + &:hover { + transform: scale(1.2); + } + } + .l_t_line { + width: 5px; + height: 24px; + left: -3px; + top: -3px; + } + .t_l_line { + height: 5px; + width: 26px; + left: -3px; + top: -3px; + } + .t_line_box { + position: absolute; + width: 100%; + height: 100%; + } + .t_line_box i { + background-color: #4788fb; + box-shadow: 0px 0px 10px #4788fb; + position: absolute; + } + .t_r_line { + height: 5px; + width: 26px; + right: -3px; + top: -3px; + } + .r_t_line { + width: 5px; + height: 24px; + right: -3px; + top: -3px; + } + .l_b_line { + width: 5px; + height: 24px; + left: -3px; + bottom: -3px; + } + .b_l_line { + height: 5px; + width: 26px; + left: -3px; + bottom: -3px; + } + .r_b_line { + width: 5px; + height: 24px; + right: -3px; + bottom: -3px; + } + .b_r_line { + height: 5px; + width: 26px; + right: -3px; + bottom: -3px; + } + .pics { + .pic-wrap { + width: 100%; + height: 525px; + overflow: hidden; + } + .pic { + width: 100%; + height: 560px; + background: url(../../assets/img/screenShow/1.jpg) no-repeat; + } + } + .earth { + z-index: 0; + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; + img { + position: absolute; + top: 52%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0.4; + } + .lbx { + z-index: 2; + max-width: 95%; + max-height: 95%; + animation: rotate 15s linear infinite; + } + .jt { + z-index: 3; + max-width: 90%; + max-height: 90%; + opacity: 0.3; + animation: rotate-reverse 15s linear infinite; + } + .map { + z-index: 1; + max-width: 85%; + max-height: 85%; + } + } + @keyframes rotate { + 0% { + transform: translate(-50%, -50%) rotate(0); + } + 50% { + transform: translate(-50%, -50%) rotate(180deg); + } + 100% { + transform: translate(-50%, -50%) rotate(360deg); + } + } + @keyframes rotate-reverse { + 0% { + transform: translate(-50%, -50%) rotate(0360deg); + } + 50% { + transform: translate(-50%, -50%) rotate(180deg); + } + 100% { + transform: translate(-50%, -50%) rotate(0); + } + } +} +.time-switch { + z-index: 2; + position: absolute; + display: flex; + top: 24px; + right: 10px; + li { + padding: 0 14px; + line-height: 24px; + color: #fff; + background-color: #0a111c; + border-radius: 8px; + cursor: pointer; + &.active { + background-color: #00d8ff; + } + } +} +.active-number { + position: absolute; + top: 10px; + left: 10px; + padding: 10px 40px; + background: url(../../assets/img/screen/title-bg.png) 0 0 / cover no-repeat; + .val { + font-size: 50px; + font-family: 'yjsz'; + color: #00f3ff; + text-shadow: 0 0 25px #00d8ff; + text-align: center; + } + .name { + font-size: 16px; + color: #fff; + text-shadow: 0 0 25px #00d8ff; + } +} +.stat-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.65); +} +.stat-wrap { + position: relative; + height: 100%; + background: url(../../assets/img/screen/stat.png) 0 0/100% auto no-repeat; + .num { + position: absolute; + width: 100px; + text-align: center; + font-size: 32px; + font-weight: bold; + color: #00d8ff; + white-space: nowrap; + } + .num1 { + top: 140px; + left: 12px; + } + .num2 { + top: 49px; + right: 187px; + } + .num3 { + top: 260px; + left: 200px; + } + .num4 { + top: 296px; + right: 368px; + } + .num5 { + bottom: 319px; + right: 57px; + } +} +.main_table { + width: 100%; + margin-top: 25px; + table { + width: 100%; + } + tr { + height: 42px; + } + th { + font-size: 12px; + font-weight: 600; + color: #61d2f7; + text-align: center; + } + td { + color: #fff; + font-size: 10px; + text-align: center; + } + tbody tr:nth-child(odd) { + background-color: #072951; + box-shadow: -10px 0px 15px #2c58a6 inset, 10px 0px 15px #2c58a6 inset; + } + .percent { + width: 64px; + margin: 0 auto; + line-height: 24px; + color: #fff; + text-align: center; + background-color: #0faf7d; + border-radius: 2px; + &.fall { + background-color: #db4154; + } + } +} +.header { + z-index: 2; + position: relative; + width: 100%; + height: 80px; + padding: 0 20px; +} +.bg_header { + width: 100%; + height: 80px; + // background: url(../../assets/img/screen/screen2.png) no-repeat; + background-size: 100% 100%; +} +.t_title { + width: 100%; + height: 100%; + text-align: center; + font-size: 2.5em; + font-weight: 600; + line-height: 80px; + color: #fff; +} +$height: 344px; +.content { + display: flex; + padding: 20px; + .left, + .right { + min-width: 300px; + width: 30%; + } + .middle { + min-width: calc((40% - 60px)); + margin: 0 30px; + overflow: hidden; + } + .item { + position: relative; + height: $height; + margin-bottom: 30px; + border: 1px solid #2c58a6; + box-shadow: 0 0 10px #2c58a6; + } +} +.chart { + height: $height; +} +.popular-wrap { + height: 170px; + margin-top: 45px; + overflow: auto; + &::-webkit-scrollbar-thumb { + display: none; + } +} +.list { + padding: 0 15px; + margin-top: 25px; + overflow: auto; + li { + position: relative; + padding: 10px 10px; + &:nth-child(2) { + .index { + background-color: #67a0ff; + } + } + &:nth-child(3) { + .index { + background-color: #2b71ff; + } + } + &:nth-child(4) { + .index { + background-color: #8c2bff; + } + } + &:nth-child(5) { + .index { + background-color: #ff612b; + } + } + &:nth-child(6) { + .index { + background-color: #4152f1; + } + } + &:nth-child(7) { + .index { + background-color: #d14cc9; + } + } + &:nth-child(8) { + .index { + background-color: #f52c8d; + } + } + &:nth-child(9) { + .index { + background-color: #f1561b; + } + } + &:nth-child(10) { + .index { + background-color: #f50000; + } + } + } + &.popular { + margin-top: 0; + li:nth-child(odd) { + background-color: #072951; + box-shadow: -10px 0px 15px #2c58a6 inset, 10px 0px 15px #2c58a6 inset; + } + } + .index { + position: absolute; + width: 20px; + line-height: 20px; + color: #fff; + font-size: 12px; + text-align: center; + border-radius: 50%; + background-color: #2defe2; + } + .text { + width: 60%; + margin: 0 auto; + color: #61d2f7; + text-align: center; + @include ellipsis; + } + .icon { + position: absolute; + top: 10px; + right: 10%; + } +} +.main_title { + display: flex; + align-items: center; + height: 35px; + line-height: 33px; + background-color: rgba(26, 104, 0, 0.9); + border-radius: 18px; + position: absolute; + top: -17px; + left: 50%; + color: #fff; + font-size: 18px; + font-weight: 600; + white-space: nowrap; + padding: 0 20px; + z-index: 1000; + text-align: center; + transform: translateX(-50%); + img { + margin-right: 10px; + } +} diff --git a/vue.config.js b/vue.config.js index 88feeb3..a39e4ee 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,5 +1,6 @@ const Setting = require("./src/setting.env"); +const timeStamp = new Date().getTime(); module.exports = { lintOnSave: true, css: { @@ -18,5 +19,19 @@ module.exports = { // webSocketURL: 'ws://0.0.0.0:8082/notice', // }, port: 8082 // 固定端口 - } + }, + configureWebpack: { + output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 + filename: `[name].${process.env.VUE_APP_VERSION}.${timeStamp}.js`, + chunkFilename: `[name].${process.env.VUE_APP_VERSION}.${timeStamp}.js` + }, + }, + // output: { + // // 把应用打包成umd库格式 + // library:'myLibrary', + // // 输出重构 打包编译后的文件名称 【模块名称.时间戳】 + // filename: `[name].${timeStamp}.js`, + // libraryTarget:'umd', + // globalObject:'this', + // }, }; \ No newline at end of file