shit
This commit is contained in:
parent
b712808634
commit
41eb587026
|
|
@ -11,3 +11,5 @@
|
|||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=b0c21bc6b220aa882bad8ffb6bce8829"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,12 +10,16 @@
|
|||
"dependencies": {
|
||||
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"amfe-flexible": "^2.2.1",
|
||||
"axios": "^1.6.2",
|
||||
"echarts": "^5.4.3",
|
||||
"postcss-pxtorem": "^5.1.1",
|
||||
"vue": "^3.3.8",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.5.0",
|
||||
"postcss-pxtorem": "^6.0.0",
|
||||
"sass": "^1.69.5",
|
||||
"sass-loader": "^13.3.2",
|
||||
"vite": "^5.0.0"
|
||||
|
|
@ -1066,6 +1070,11 @@
|
|||
"ajv": "^6.9.1"
|
||||
}
|
||||
},
|
||||
"node_modules/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=="
|
||||
},
|
||||
"node_modules/anymatch": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
|
||||
|
|
@ -1079,6 +1088,21 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.2.tgz",
|
||||
"integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
|
|
@ -1169,6 +1193,17 @@
|
|||
"resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
|
||||
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
|
||||
|
|
@ -1181,6 +1216,14 @@
|
|||
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
|
||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
|
||||
|
|
@ -1353,6 +1396,32 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.3",
|
||||
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz",
|
||||
"integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
|
||||
|
|
@ -1517,8 +1586,6 @@
|
|||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
|
|
@ -1527,8 +1594,6 @@
|
|||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
|
|
@ -1596,6 +1661,20 @@
|
|||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-pxtorem": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
|
||||
"integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
|
||||
|
|
@ -2792,6 +2871,11 @@
|
|||
"peer": true,
|
||||
"requires": {}
|
||||
},
|
||||
"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=="
|
||||
},
|
||||
"anymatch": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
|
||||
|
|
@ -2802,6 +2886,21 @@
|
|||
"picomatch": "^2.0.4"
|
||||
}
|
||||
},
|
||||
"asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"axios": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.2.tgz",
|
||||
"integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"binary-extensions": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
|
|
@ -2872,6 +2971,14 @@
|
|||
"resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
|
||||
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
|
||||
},
|
||||
"combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"requires": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
|
||||
|
|
@ -2884,6 +2991,11 @@
|
|||
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
|
||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||
},
|
||||
"delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
|
||||
},
|
||||
"echarts": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
|
||||
|
|
@ -3027,6 +3139,21 @@
|
|||
"to-regex-range": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.15.3",
|
||||
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz",
|
||||
"integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q=="
|
||||
},
|
||||
"form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"requires": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
}
|
||||
},
|
||||
"fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
|
||||
|
|
@ -3156,16 +3283,12 @@
|
|||
"mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"dev": true,
|
||||
"peer": true
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
|
||||
},
|
||||
"mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"mime-db": "1.52.0"
|
||||
}
|
||||
|
|
@ -3215,6 +3338,18 @@
|
|||
"source-map-js": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"postcss-pxtorem": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
|
||||
"integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
|
||||
|
|
|
|||
|
|
@ -11,12 +11,16 @@
|
|||
"dependencies": {
|
||||
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"amfe-flexible": "^2.2.1",
|
||||
"axios": "^1.6.2",
|
||||
"echarts": "^5.4.3",
|
||||
"postcss-pxtorem": "^5.1.1",
|
||||
"vue": "^3.3.8",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.5.0",
|
||||
"postcss-pxtorem": "^6.0.0",
|
||||
"sass": "^1.69.5",
|
||||
"sass-loader": "^13.3.2",
|
||||
"vite": "^5.0.0"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 496 B After Width: | Height: | Size: 496 B |
|
|
@ -1,6 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
// @ts-ignore
|
||||
import Header from "@/components/Header.vue"
|
||||
const zz3 = 565
|
||||
|
||||
|
||||
|
||||
|
|
@ -13,6 +14,8 @@ import Header from "@/components/Header.vue"
|
|||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import '/static/font/font.css';
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
|
||||
import axios from "axios";
|
||||
// 创建axios 实例
|
||||
const instacne = axios.create({
|
||||
baseURL: "https://crmeb-test.shop.lihaink.cn/",
|
||||
timeout: 30000,
|
||||
});
|
||||
|
||||
// 请求拦截
|
||||
instacne.interceptors.request.use(
|
||||
(config) => {
|
||||
// 在发送请求之前做什么
|
||||
|
||||
return config;
|
||||
},
|
||||
(err) => {
|
||||
return Promise.reject(err);
|
||||
}
|
||||
);
|
||||
|
||||
// 响应拦截
|
||||
instacne.interceptors.response.use(
|
||||
(res) => {
|
||||
// 对响应的数据做什么
|
||||
return res.data;
|
||||
},
|
||||
(err) => {
|
||||
return Promise.reject(err);
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
export function getUserNumApi(params) {
|
||||
return instacne.get('/api/dataview/user_merchat_count', { params })
|
||||
}
|
||||
|
||||
|
||||
export function getOrderNumApi(params) {
|
||||
return instacne.get('/api/dataview/order_statistics', { params })
|
||||
}
|
||||
export function getSalesRankApi(params) {
|
||||
return instacne.get('/api/dataview/sales_ranking', { params })
|
||||
}
|
||||
|
||||
|
||||
export function getTodayOrderAmountApi(params) {
|
||||
return instacne.get('/api/dataview/curr_day_order_amount', { params })
|
||||
}
|
||||
|
||||
|
||||
export function getProductCountApi(params) {
|
||||
return instacne.get('/api/dataview/product_count', { params })
|
||||
}
|
||||
|
||||
export function getViewCountApi(params) {
|
||||
return instacne.get('/api/dataview/view_count', { params })
|
||||
}
|
||||
|
||||
export function getUserTradeCountApi(params) {
|
||||
return instacne.get('/api/dataview/user_trade_count', { params })
|
||||
}
|
||||
|
||||
export function getProductCategoryListApi(params) {
|
||||
return instacne.get('/api/dataview/product_category_list', { params })
|
||||
}
|
||||
// api/dataview/view_count?areaCode=510524&streetCode=510524100
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div style="position: relative;margin-right: 21px; margin-top: 20px">
|
||||
<img src="/static/a/bg.png" style="width: ;position: absolute;height: 50px;width: 100%;" alt="">
|
||||
<img src="/static/a/Y.png" style="position: absolute;" alt="">
|
||||
<img :src="`/static/a/${data.icon}.png`" style="position: absolute;top: 50%;transform: translate(15px,-30%);"
|
||||
alt="">
|
||||
<div style="position: relative;padding: 0 10px;top: 5px;margin-left: 45px;">
|
||||
<div style="font-size: 16px;font-family: FZCYJ;color: #A9EDFC;">{{ data.num }}
|
||||
</div>
|
||||
<div style="font-size: 12px;color: #8395A4;margin-top: 5px;">{{ data.text }} </div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import { defineProps } from "vue"
|
||||
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div class="chartNum" style="margin: 0 20px;">
|
||||
|
||||
<div class="box-item">
|
||||
<li :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }" v-for="(item, index) in orderNum"
|
||||
:key="index">
|
||||
|
|
@ -13,6 +14,7 @@
|
|||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['num'],
|
||||
data() {
|
||||
return {
|
||||
orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // 默认订单总数
|
||||
|
|
@ -21,7 +23,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.toOrderNum(656656) // 这里输入数字即可调用
|
||||
this.toOrderNum(this.num) // 这里输入数字即可调用
|
||||
}, 500);
|
||||
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,26 +1,53 @@
|
|||
<template>
|
||||
<Transition>
|
||||
<div class="address" v-if="props.choseArea">
|
||||
<div class="address-li" @click="choseTownFn(1)" v-for="( item, index ) in 10 ">泸县</div>
|
||||
<div class="address-li" @click="choseTownFn(item.code, item.name)" v-for="( item, index ) in areaList ">{{
|
||||
item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from "vue"
|
||||
import { defineProps, defineEmits, onMounted, reactive } from "vue"
|
||||
import { useRouter } from 'vue-router'
|
||||
import axios from "axios"
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['offAreaList'])
|
||||
const props = defineProps({
|
||||
choseArea: Boolean,
|
||||
})
|
||||
|
||||
let areaList = reactive([])
|
||||
// 选额镇
|
||||
const choseTownFn = (id) => {
|
||||
const choseTownFn = (id, name) => {
|
||||
props.choseArea = false
|
||||
emit('offAreaList')
|
||||
router.replace('/townDetail?id=' + id)
|
||||
emit('offAreaList', name)
|
||||
|
||||
router.go(0)
|
||||
|
||||
// router.replace('/townDetail?code=' + id)
|
||||
|
||||
}
|
||||
onMounted(() => {
|
||||
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=510524`)
|
||||
.then(function (response) {
|
||||
response.data.data.forEach(item => {
|
||||
areaList.push(item)
|
||||
})
|
||||
|
||||
})
|
||||
.catch(function (error) {
|
||||
// 处理错误情况
|
||||
console.log(error);
|
||||
})
|
||||
.finally(function () {
|
||||
// 总是会执行
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -35,10 +35,15 @@
|
|||
alt="">
|
||||
|
||||
</div>
|
||||
<div class="tab-li" v-if="route.path == '/storeLogin'" @click="router.replace('/Businesses')">
|
||||
<img @click="showFn(4, '/finance')" class="tab-img" v-if="show[4]" style="width: 6vw;height:2vh;"
|
||||
:src="u('FH')" alt="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rigth-li" @click="choseArea = true"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
||||
:src="u('DW')" alt=""> 泸县
|
||||
:src="u('DW')" alt=""> {{ area }}
|
||||
</div>
|
||||
<areaList :choseArea="choseArea" @offAreaList="offAreaList"></areaList>
|
||||
<div class="right-line">
|
||||
|
|
@ -69,13 +74,30 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { ref, reactive, onMounted, watch } from "vue"
|
||||
import areaList from "./areaList.vue";
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import MapLoader from "@/view/utils/position.js"
|
||||
|
||||
|
||||
|
||||
|
||||
let area = ref('')
|
||||
|
||||
const u = (name) => {
|
||||
return `/static/index/${name}.png`
|
||||
}
|
||||
const route = useRouter()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
|
||||
const changeTownFn = (name) => {
|
||||
area.value = name
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 标题
|
||||
const show = reactive([false, true, true, true, true])
|
||||
|
||||
|
|
@ -84,25 +106,56 @@ const showFn = (index, src) => {
|
|||
show[i] = true
|
||||
})
|
||||
show[index] = !show[index]
|
||||
route.replace(src)
|
||||
if (src) {
|
||||
router.replace(src)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const backUrl = ref('/')
|
||||
// alert(zz3)
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(value, oldValue) => {
|
||||
if (value == '/') {
|
||||
showFn(0)
|
||||
area.value = '龙马潭区'
|
||||
}
|
||||
if (value == '/commodity') {
|
||||
showFn(1)
|
||||
}
|
||||
if (value == '/Businesses') {
|
||||
showFn(2)
|
||||
}
|
||||
|
||||
if (value == '/order') {
|
||||
showFn(3)
|
||||
}
|
||||
if (value == '/finance') {
|
||||
showFn(4)
|
||||
}
|
||||
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 选额镇
|
||||
const choseArea = ref(false)
|
||||
// 关闭
|
||||
const offAreaList = () => {
|
||||
const offAreaList = (name) => {
|
||||
choseArea.value = false
|
||||
area.value = name
|
||||
}
|
||||
|
||||
const out = () => {
|
||||
//@ts-ignore
|
||||
window.open("about:blank", "_top").close()
|
||||
|
||||
//@ts-ignore
|
||||
// window.open('file:///C:\WINDOWS\system32\Shutdown.exe-r', 'File')
|
||||
}
|
||||
|
||||
|
||||
const updateTime = () => {
|
||||
var date = new Date();
|
||||
var hours = date.getHours();
|
||||
|
|
@ -121,20 +174,20 @@ const updateTime = () => {
|
|||
seconds = (seconds < 10 ? "0" : "") + seconds;
|
||||
|
||||
var currentTime = hours + ":" + minutes + ":" + seconds;
|
||||
var currentDays = years + '-' + (month >= 10 ? month + 1 : "0" + (month + 1)) + "-" + days
|
||||
var currentDays = years + '-' + (month >= 10 ? month + 1 : "0" + (month + 1)) + "-" + (days >= 10 ? days : "0" + days)
|
||||
// alert(days)
|
||||
|
||||
// 将时间显示在指定的DOM元素中
|
||||
document.getElementById("time").innerHTML = currentTime;
|
||||
document.getElementById("days").innerHTML = currentDays;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
setInterval(updateTime, 1000)
|
||||
MapLoader().then(res => {
|
||||
area.value = res.addressComponent.district
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<img src="/static/index/CJYHTJ.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
||||
|
||||
<div style="height:5vh;"></div>
|
||||
<div class="towns">
|
||||
<div class="town-li act">{{ area.area_name }} </div>
|
||||
<div class="town-li" v-for="(item, index) in streetList">{{ item.street_name }}</div>
|
||||
<div id="transactionUsers" style="width: 100%;height: 30vh;"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, defineProps } from "vue"
|
||||
import * as echarts from 'echarts';
|
||||
import { getUserTradeCountApi } from "@/api.js"
|
||||
import { notEndWith } from "postcss-pxtorem/lib/filter-prop-list";
|
||||
|
||||
const props = defineProps({
|
||||
areaCodes: Object,
|
||||
})
|
||||
|
||||
const streetList = reactive([])
|
||||
const area = reactive({
|
||||
"area_code": "",
|
||||
"area_name": ""
|
||||
})
|
||||
|
||||
getUserTradeCountApi(props.areaCodes).then(res => {
|
||||
res.data.streetList.forEach(item => {
|
||||
streetList.push(item)
|
||||
})
|
||||
area.area_name = res.data.area.area_name
|
||||
res.data.userTradeCountList.forEach(item => {
|
||||
|
||||
option.xAxis[0].data.push(item.date.slice(5, item.date.length))
|
||||
option.series[0].data.push(item.visitUser)
|
||||
|
||||
option.series[1].data.push(item.orderUser)
|
||||
option.series[2].data.push(item.payOrderUser)
|
||||
|
||||
})
|
||||
|
||||
initCharts('transactionUsers', option)
|
||||
|
||||
})
|
||||
|
||||
const initCharts = (tag, option) => {
|
||||
var chartDom = document.getElementById(tag);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
|
||||
|
||||
let option = {
|
||||
color: ['#015989', '#583936', '#416979'],
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: "#1F3948",
|
||||
borderColor: "#1F3948",
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
},
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['访客人数', '下单人数', '支付人数',],
|
||||
textStyle: {
|
||||
color: "white"
|
||||
}
|
||||
// data: ['访客人数','下单人数','支付人数']
|
||||
|
||||
},
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// saveAsImage: {}
|
||||
// }
|
||||
// },
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#d1f9fb',
|
||||
rotate: 40, // 文本旋转角度
|
||||
},
|
||||
|
||||
|
||||
data: []
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',//背景色为虚线,
|
||||
color: '#256980'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '访客人数',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#18394A'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#2885A4'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '下单人数',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#2752A6'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#005886'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '支付人数',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#005685'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#355969'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: []
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.towns {
|
||||
width: 50vw;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 1vh 1vw;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.town-li {
|
||||
margin-top: 10px;
|
||||
color: #A0C7D5;
|
||||
padding: 5px 10px;
|
||||
border-radius: 7px 10px;
|
||||
font-size: 12px;
|
||||
border: 1px solid #3A91A5;
|
||||
// margin-left: 2vw;
|
||||
justify-content: fl;
|
||||
margin-left: 2vw;
|
||||
}
|
||||
|
||||
.act {
|
||||
background-color: #072C3E;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<img src="/static/index/DDSJ.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
||||
|
||||
<div style="height: 5vh;"></div>
|
||||
<div v-if="configs.data?.length">
|
||||
<dv-scroll-board :config="configs" style="width:96%;height:40vh;margin-left: 2%;" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
|
||||
import { ref, reactive, defineProps } from "vue"
|
||||
import { getOrderNumApi } from "@/api.js"
|
||||
|
||||
const props = defineProps({
|
||||
areaCodes: Object,
|
||||
})
|
||||
|
||||
const configs = reactive(
|
||||
{
|
||||
header: ['所属地区', '日订单数', '日订单金额', '月订单数', '月订单金额'],
|
||||
headerSize: '11px',
|
||||
align: ['center', 'center', 'center', 'center', 'center'],
|
||||
headerBGC: '#223B7E',
|
||||
rowNum: 10,
|
||||
data: [
|
||||
// ['行1列1', '行1列2', '行1列3', 'sad', 'asdsa'],
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
)
|
||||
|
||||
getOrderNumApi(props.areaCodes).then(res => {
|
||||
res.data.list.forEach(item => {
|
||||
configs.data.push(
|
||||
[item.street_name, item.dayOrderCount, item.dayOrderAmount, item.monthOrderCount, item.monthOrderAmount]
|
||||
)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<img src="/static/index/DRDD.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
||||
|
||||
<div style="height: 5vh;"></div>
|
||||
<div v-if="configs2.data.length">
|
||||
<dv-scroll-board :config="configs2" style="width:96%;height:40vh;margin-left: 2%;" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, defineProps } from "vue"
|
||||
import { getTodayOrderAmountApi } from "@/api.js"
|
||||
const props = defineProps({
|
||||
areaCodes: Object,
|
||||
})
|
||||
|
||||
getTodayOrderAmountApi(props.areaCodes).then(res => {
|
||||
|
||||
|
||||
let list = res.data.geoStreetList
|
||||
list.forEach(item => {
|
||||
configs2.data.push([
|
||||
item.street_name,
|
||||
item.today_order_amount,
|
||||
item.yesterday_order_amount
|
||||
])
|
||||
})
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
const configs2 = reactive(
|
||||
{
|
||||
header: ['所属片区', '当日订单金额', '昨日订单金额'],
|
||||
headerBGC: '#223B7E',
|
||||
// align: [''],
|
||||
align: ['center', 'center', 'center'],
|
||||
rowNum: 10,
|
||||
data: []
|
||||
}
|
||||
|
||||
)
|
||||
</script>
|
||||
|
|
@ -0,0 +1,373 @@
|
|||
<template>
|
||||
<div class="product-list">
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div style="margin-top: 14vh;position: relative;">商 品 总 数</div>
|
||||
<div style="font-size: 10px;">NUMBER OF COMMODITIES</div>
|
||||
<img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
||||
<div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
|
||||
data?.totalProductCounInfo.todayProductCount }}</span>
|
||||
件</div>
|
||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;padding: 0 1vw;">
|
||||
<div style="font-size: 12px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
昨日数据： {{ data?.totalProductCounInfo.yestertodayProductCount }}
|
||||
</div>
|
||||
<div style="font-size: 12px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
周环比: {{ percent(data?.totalProductCounInfo.weeklyProductTotalGrowthRate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div style="margin-top: 14vh;position: relative;">新 商 品 总 数</div>
|
||||
<div style="font-size: 10px;">NUMBER OF NEW SHOPS</div>
|
||||
<img src="/static/index/JRC.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
||||
|
||||
<div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
|
||||
data?.newProductCountInfo?.todayNewProductCount }}</span>
|
||||
件</div>
|
||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;padding: 0 1vw;">
|
||||
<div style="font-size: 12px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
昨日数据： {{ data?.newProductCountInfo?.yestertodayNewProductCount }}
|
||||
</div>
|
||||
<div style="font-size: 12px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
周环比: {{ percent(data?.newProductCountInfo?.weeklyNewProductTotalGrowthRate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div style="margin-top: 14vh;position: relative;">累 计 店 铺 总 数</div>
|
||||
<div style="font-size: 10px;">ACCUMULATED NUMBERS OF SHOPS</div>
|
||||
<img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
||||
<div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
|
||||
data?.merchantCountInfo?.todayMerchantCount }}</span>
|
||||
件</div>
|
||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;padding: 0 1vw;">
|
||||
<div style="font-size: 12px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
昨日数据： {{ data?.merchantCountInfo?.yestertodayMerchantCount }}
|
||||
</div>
|
||||
<div style="font-size: 12px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
周环比: {{ percent(data?.merchantCountInfo?.weeklyMerchantGrowthRate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Views">
|
||||
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<div class="view-content">
|
||||
<div>昨日数据：{{ viewData.yesterday }}</div>
|
||||
<div style="display: flex;align-items: center;">当前浏览量：
|
||||
<Remake :num="viewData.today" /> 人正在浏览
|
||||
</div>
|
||||
<div>周环比：{{ percent(viewData.lastWeekRate) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, defineProps, onMounted } from "vue"
|
||||
import Remake from "@/components/Remake.vue"
|
||||
import { getProductCountApi, getViewCountApi } from "@/api.js"
|
||||
|
||||
const props = defineProps({
|
||||
areaCodes: Object,
|
||||
})
|
||||
|
||||
|
||||
|
||||
let data = reactive({
|
||||
|
||||
"totalProductCounInfo": {
|
||||
"todayProductCount": 20,
|
||||
"yestertodayProductCount": 292,
|
||||
"weeklyProductTotalGrowthRate": "9.42"
|
||||
},
|
||||
"newProductCountInfo": {
|
||||
"todayNewProductCount": 0,
|
||||
"yestertodayNewProductCount": 0,
|
||||
"weeklyNewProductTotalGrowthRate": "-1.00"
|
||||
},
|
||||
"merchantCountInfo": {
|
||||
"todayMerchantCount": 22,
|
||||
"yestertodayMerchantCount": 22,
|
||||
"weeklyMerchantGrowthRate": "-0.04"
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
let viewData = reactive(
|
||||
{
|
||||
"today": 0,
|
||||
"yesterday": 0,
|
||||
"lastWeekRate": 0
|
||||
}
|
||||
|
||||
)
|
||||
|
||||
const clone = (data1, data2) => {
|
||||
for (let key in data1) {
|
||||
data2[key] = data1[key]
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getProductCountApi(props.areaCodes).then(res => {
|
||||
data = reactive(res.data)
|
||||
clone(res.data, data)
|
||||
})
|
||||
|
||||
getViewCountApi(props.areaCodes).then(res => {
|
||||
clone(res.data, viewData)
|
||||
})
|
||||
|
||||
const percent = (num) => {
|
||||
|
||||
|
||||
|
||||
return (num) + "%"
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.product-list {
|
||||
height: 70%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.product {
|
||||
height: 100%;
|
||||
width: 32%;
|
||||
position: relative;
|
||||
|
||||
.bg {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 12PX;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.product-icon {
|
||||
width: 2vw;
|
||||
height: 2vw;
|
||||
position: absolute;
|
||||
animation: jump 1s infinite;
|
||||
top: 2vh;
|
||||
}
|
||||
}
|
||||
|
||||
.Views {
|
||||
margin-top: 2%;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
|
||||
.view-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bubble1 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
left: 6.5vw;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1.5s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bubble2 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
left: 8.5vw;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1.25s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes bubbleAnimation {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbleAnimation1 {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbleAnimation2 {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,401 @@
|
|||
<template>
|
||||
<img src="/static/index/PTYHL.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
||||
<div class="user" id="user"></div>
|
||||
<div class="storeNum">
|
||||
<div class="tit"></div>
|
||||
<div class="townList" style="color: white;height: 14.4vh;">
|
||||
<div class="storebox" v-for="(item, index) in (storeData.length || [1, 1, 1, 1, 1, 1, 1, 1])" :key="index">
|
||||
<div class="store" :id="'store' + index"></div>
|
||||
<div class="toenName">
|
||||
<div>{{ storeData[index]?.name }}</div>
|
||||
<div>{{ storeData[index]?.num }}个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color: white;display: flex; justify-content: center;
|
||||
">
|
||||
<div class="page-num" v-for="(item, index) in pageNum" @click="pageFN(index + 1)"> {{ index + 1 }}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { ref, reactive, defineProps } from "vue"
|
||||
import { getUserNumApi } from "@/api.js"
|
||||
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
areaCodes: Object,
|
||||
})
|
||||
|
||||
|
||||
const getFiveDaysFn = () => {
|
||||
var today = new Date();
|
||||
var dateArray = new Array();
|
||||
|
||||
for (var i = 0; i < 5; i++) {
|
||||
var date = new Date(today);
|
||||
date.setDate(today.getDate() - i);
|
||||
var month = date.getMonth() + 1;
|
||||
var day = Number(date.getDate());
|
||||
day = day >= 10 ? day : '0' + day
|
||||
var formattedDate = month + "." + day;
|
||||
dateArray.unshift(formattedDate);
|
||||
}
|
||||
|
||||
return dateArray
|
||||
}
|
||||
// 图表
|
||||
const initCharts = (tag, option) => {
|
||||
var chartDom = document.getElementById(tag);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 平台用户总量统计option
|
||||
let Option = {
|
||||
color: [
|
||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 1, color: 'transparent' },
|
||||
{ offset: 0, color: '#0081C3' },
|
||||
])
|
||||
, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 1, color: 'transparent' },
|
||||
{ offset: 0, color: '#3E54BF' },
|
||||
]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ offset: 1, color: 'transparent' },
|
||||
{ offset: 0, color: '#4DBFD9' },
|
||||
]),
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
},
|
||||
// color: transparent;
|
||||
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: "white"
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: getFiveDaysFn()
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',//背景色为虚线,
|
||||
color: '#256980'
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '新增用户数量',
|
||||
type: 'bar',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [],
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#384FB4",
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
{
|
||||
name: '访问用户数量',
|
||||
type: 'bar',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [],
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#3E54BF",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '累计用户数量',
|
||||
type: 'bar',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [],
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#4EC1DB",
|
||||
},
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
// 地方店铺数量统计option
|
||||
let angle = 0;//角度，用来做简单的动画效果的
|
||||
|
||||
let getRange = (Num) => {
|
||||
return {
|
||||
backgroundColor: "#061740",
|
||||
title: {
|
||||
text: '{a|' + Num + '}{c|%}',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 10,
|
||||
color: '#ffffff',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
c: {
|
||||
fontSize: 10,
|
||||
color: '#ffffff',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
//内环
|
||||
{
|
||||
name: "",
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
|
||||
startAngle: (0 + -angle) * Math.PI / 180,
|
||||
endAngle: (360 + -angle) * Math.PI / 180
|
||||
},
|
||||
style: {
|
||||
stroke: "#0CD3DB",
|
||||
fill: "transparent",
|
||||
lineWidth: 0.5
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
//外环
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: ['85%', '70%'],
|
||||
silent: true,
|
||||
clockwise: true,
|
||||
startAngle: 90,
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
label: {
|
||||
normal: {
|
||||
position: "center",
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: Num,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//外环发光
|
||||
borderWidth: 0.5,
|
||||
shadowBlur: 20,
|
||||
borderColor: '#4bf3f9',
|
||||
shadowColor: '#9bfeff',
|
||||
color: { // 圆环的颜色
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#4bf3f9', // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#4bf3f9', // 100% 处的颜色
|
||||
}]
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - Num,
|
||||
name: "",
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#173164"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const storeData = reactive([])
|
||||
const initStoreOption = (pageData, total) => {
|
||||
storeData.splice(0, storeData.length);
|
||||
pageData.forEach(item => {
|
||||
let range = ((item.merchant_count / total).toFixed(2) * 100)
|
||||
storeData.push({
|
||||
name: item.street_name,
|
||||
num: item.merchant_count,
|
||||
option: getRange(range)
|
||||
})
|
||||
})
|
||||
storeData.forEach((item, index) => {
|
||||
initCharts(`store${index}`, item.option)
|
||||
})
|
||||
}
|
||||
|
||||
let pageNum = ref(0)
|
||||
let merchatCountList = []
|
||||
let merchantTotalCount = []
|
||||
|
||||
getUserNumApi(
|
||||
props.areaCodes
|
||||
|
||||
).then(res => {
|
||||
merchatCountList = res.data.merchatCountList
|
||||
merchantTotalCount = res.data.merchantTotalCount
|
||||
let { userCountlist } = res.data
|
||||
userCountlist.forEach(item => {
|
||||
Option.series[0].data.push(item.newUserCount)
|
||||
Option.series[1].data.push(item.viewUserCount)
|
||||
Option.series[2].data.push(item.totalUserCount)
|
||||
});
|
||||
pageNum.value = Math.ceil(merchatCountList.length / 8)
|
||||
initCharts('user', Option)
|
||||
|
||||
initStoreOption(merchatCountList.slice(0, 8), merchantTotalCount)
|
||||
})
|
||||
|
||||
|
||||
const pageFN = (Num) => {
|
||||
|
||||
switch (Num) {
|
||||
case 1:
|
||||
initStoreOption(merchatCountList.slice(0, 8), merchantTotalCount)
|
||||
break;
|
||||
case 2:
|
||||
initStoreOption(merchatCountList.slice(8, 16), merchantTotalCount)
|
||||
break;
|
||||
case 3:
|
||||
initStoreOption(merchatCountList.slice(16, 24), merchantTotalCount)
|
||||
break;
|
||||
case 4:
|
||||
initStoreOption(merchatCountList.slice(24, 32), merchantTotalCount)
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.user {
|
||||
box-sizing: border-box;
|
||||
padding-top: 5vh;
|
||||
width: 100%;
|
||||
height: 58%;
|
||||
|
||||
.btn {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.storeNum {
|
||||
width: 100%;
|
||||
height: 42%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.tit {
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
.townList {
|
||||
height: 5vh;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
|
||||
|
||||
.storebox {
|
||||
width: 22%;
|
||||
height: 40%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
|
||||
.store {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.toenName {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
|
||||
border-radius: 0 15px 15px 0;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
padding: 7px 2px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-num {
|
||||
padding: 0 5px;
|
||||
margin-right: 5px;
|
||||
border: #2A538D 1px solid;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,344 @@
|
|||
<template>
|
||||
<img src="/static/index/PTSP.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
||||
|
||||
<div class="user" style="width: 98%; " v-if="config3.data.length">
|
||||
<div class="btns">
|
||||
<span class="btn" :class="{ actbtn: showGoods }" @click="showGoods = true">商品销售排行</span>
|
||||
<span class="btn" :class="{ actbtn: !showGoods }" @click="showGoods = false">店铺销量排行</span>
|
||||
</div>
|
||||
<dv-scroll-board v-show="showGoods" :config="config3" style="height: 17vh;margin-left: 1%;" />
|
||||
<dv-scroll-board v-show="!showGoods" :config="config" style="height: 17vh;margin-left: 1%;" />
|
||||
</div>
|
||||
|
||||
<div class="storeNum">
|
||||
<div class="tit">
|
||||
</div>
|
||||
<div class="townList" style="color: white;">
|
||||
<div class="storebox" v-for="(item, index) in (storeData.length || [1, 1, 1, 1, 1, 1, 1, 1])" :key="index">
|
||||
<div class="store" :id="'stores' + index"></div>
|
||||
<div class="toenName">
|
||||
<div>{{ storeData[index]?.name }}</div>
|
||||
<div>{{ storeData[index]?.num }}个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color: white;display: flex; justify-content: center;">
|
||||
<div class="page-num" v-for="(item, index) in pageNum" @click="pageFN(index + 1)"> {{ index + 1 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, defineProps } from "vue"
|
||||
import { getSalesRankApi } from "@/api.js"
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
areaCodes: Object,
|
||||
})
|
||||
const showGoods = ref(true)
|
||||
|
||||
let merchantRankingList = reactive([])
|
||||
let productRankingList = reactive([])
|
||||
let townProductCountList = reactive([])
|
||||
let merchantRankingTotal = ref(0)
|
||||
let productRankingTotal = ref(0)
|
||||
let townProductCount = ref(0)
|
||||
|
||||
|
||||
|
||||
const addFn = (data) => {
|
||||
let list = []
|
||||
data.forEach((item, i) => {
|
||||
list.push(
|
||||
[
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||
`<div style='background:red;position:relative'><img src="${item.image || item.mini_banner}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name || item.mer_name}</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: ${item.store_name ? (item.total_sales / productRankingTotal.value).toFixed(2) * 100 : (item.total_sales / townProductCount.value).toFixed(2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style=' position: relative;line-height:30px;text-align:center' >${item.total_sales} <span style='font-size:10px'>单</span>
|
||||
<img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
|
||||
</div>`,
|
||||
|
||||
],
|
||||
|
||||
|
||||
)
|
||||
})
|
||||
return list
|
||||
}
|
||||
|
||||
const config3 = reactive({
|
||||
oddRowBGC: "#001C2E",
|
||||
evenRowBGC: "#001C2E",
|
||||
columnWidth: [50, 50, 150, 150, 100],
|
||||
rowNum: 4,
|
||||
data: []
|
||||
|
||||
}
|
||||
|
||||
)
|
||||
const config = reactive({
|
||||
oddRowBGC: "#001C2E",
|
||||
evenRowBGC: "#001C2E",
|
||||
columnWidth: [50, 50, 150, 150, 100],
|
||||
rowNum: 4,
|
||||
data: []
|
||||
|
||||
}
|
||||
|
||||
)
|
||||
// 地方商品数量统计
|
||||
let angle = 0;//角度，用来做简单的动画效果的
|
||||
|
||||
let getRange = (Num) => {
|
||||
return {
|
||||
backgroundColor: "#061740",
|
||||
title: {
|
||||
text: '{a|' + Num + '}{c|%}',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 10,
|
||||
color: '#ffffff',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
c: {
|
||||
fontSize: 10,
|
||||
color: '#ffffff',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
//内环
|
||||
{
|
||||
name: "",
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
|
||||
startAngle: (0 + -angle) * Math.PI / 180,
|
||||
endAngle: (360 + -angle) * Math.PI / 180
|
||||
},
|
||||
style: {
|
||||
stroke: "#0CD3DB",
|
||||
fill: "transparent",
|
||||
lineWidth: 0.5
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
//外环
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: ['85%', '70%'],
|
||||
silent: true,
|
||||
clockwise: true,
|
||||
startAngle: 90,
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
label: {
|
||||
normal: {
|
||||
position: "center",
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: Num,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//外环发光
|
||||
borderWidth: 0.5,
|
||||
shadowBlur: 20,
|
||||
borderColor: '#4bf3f9',
|
||||
shadowColor: '#9bfeff',
|
||||
color: { // 圆环的颜色
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#4bf3f9', // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#4bf3f9', // 100% 处的颜色
|
||||
}]
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - Num,
|
||||
name: "",
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#173164"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
const initCharts = (tag, option) => {
|
||||
var chartDom = document.getElementById(tag);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(option);
|
||||
|
||||
|
||||
}
|
||||
const storeData = reactive([])
|
||||
const initStoreOption = (pageData, total) => {
|
||||
storeData.splice(0, storeData.length);
|
||||
pageData.forEach(item => {
|
||||
let range = ((item.product_count / total).toFixed(2) * 100)
|
||||
storeData.push({
|
||||
name: item.street_name,
|
||||
num: item.product_count,
|
||||
option: getRange(range)
|
||||
})
|
||||
})
|
||||
storeData.forEach((item, index) => {
|
||||
initCharts(`stores${index}`, item.option)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let pageNum = ref(0)
|
||||
|
||||
|
||||
getSalesRankApi(props.areaCodes).then(res => {
|
||||
productRankingList = res.data.productRankingList
|
||||
merchantRankingList = res.data.merchantRankingList
|
||||
townProductCountList = res.data.townProductCountList
|
||||
productRankingTotal.value = res.data.productRankingTotal
|
||||
townProductCount.value = res.data.townProductCount
|
||||
merchantRankingTotal.value = res.data.merchantRankingTotal
|
||||
config3.data = addFn(productRankingList)
|
||||
config.data = addFn(merchantRankingList)
|
||||
pageNum.value = Math.ceil(townProductCountList.length / 8)
|
||||
initStoreOption(townProductCountList.slice(0, 8), townProductCount.value)
|
||||
})
|
||||
const pageFN = (Num) => {
|
||||
|
||||
switch (Num) {
|
||||
case 1:
|
||||
initStoreOption(townProductCountList.slice(0, 8), townProductCount.value)
|
||||
break;
|
||||
case 2:
|
||||
initStoreOption(townProductCountList.slice(8, 16), townProductCount.value)
|
||||
break;
|
||||
case 3:
|
||||
initStoreOption(townProductCountList.slice(16, 24), townProductCount.value)
|
||||
break;
|
||||
case 4:
|
||||
initStoreOption(townProductCountList.slice(24, 32), townProductCount.value)
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.user {
|
||||
box-sizing: border-box;
|
||||
padding-top: 5vh;
|
||||
width: 100%;
|
||||
height: 57%;
|
||||
|
||||
.btns {
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.btn {
|
||||
margin-right: 1vw;
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
background-image: url('/static/index/btn2.png');
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.actbtn {
|
||||
background-image: url('/static/index/actbg2.png');
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.storeNum {
|
||||
width: 100%;
|
||||
height: 43%;
|
||||
|
||||
.tit {
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
.townList {
|
||||
height: 75%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
// background-color: #fff;
|
||||
// padding: 10px;
|
||||
|
||||
|
||||
.storebox {
|
||||
width: 22%;
|
||||
height: 40%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
|
||||
.store {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.toenName {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
|
||||
border-radius: 0 15px 15px 0;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
padding: 7px 2px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-num {
|
||||
padding: 0 5px;
|
||||
margin-right: 5px;
|
||||
border: #2A538D 1px solid;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,472 @@
|
|||
<template>
|
||||
<div class="dv-scroll-board" :ref="ref">
|
||||
<div class="header" v-if="header.length && mergedConfig" :style="mergedConfig.headerStyle">
|
||||
<div class="header-item" v-for="(headerItem, i) in header" :key="`${headerItem}${i}`" :style="`
|
||||
height: ${mergedConfig.headerHeight}px;
|
||||
${headerStyle}
|
||||
line-height: ${mergedConfig.headerHeight}px;
|
||||
width: ${widths[i]}px;
|
||||
|
||||
`" :align="aligns[i]" v-html="headerItem" />
|
||||
</div>
|
||||
|
||||
<div v-if="mergedConfig" class="rows" :style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)
|
||||
}px;`">
|
||||
<div class="row-item" v-for="(row, ri) in rows" :key="`${row.toString()}${row.scroll}`" :style="`
|
||||
height: ${heights[ri]}px;
|
||||
line-height: ${heights[ri]}px;
|
||||
background-color: ${mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']
|
||||
};
|
||||
`">
|
||||
<div class="ceil" v-for="(ceil, ci) in row.ceils" :key="`${ceil}${ri}${ci}`" :style="`width: ${widths[ci]}px;`"
|
||||
:align="aligns[ci]" v-html="ceil" @click="emitEvent('click', ri, ci, row, ceil)"
|
||||
@mouseenter="handleHover(true, ri, ci, row, ceil)" @mouseleave="handleHover(false)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from "@jiaminghi/data-view/lib/mixin/autoResize";
|
||||
|
||||
import { deepMerge } from "@jiaminghi/charts/lib/util/index";
|
||||
|
||||
import { deepClone } from "@jiaminghi/c-render/lib/plugin/util";
|
||||
|
||||
export default {
|
||||
name: "DvScrollBoard",
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ref: "scroll-board",
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Board header
|
||||
* @type {Array<String>}
|
||||
* @default header = []
|
||||
* @example header = ['column1', 'column2', 'column3']
|
||||
*/
|
||||
headerStyle: "",
|
||||
|
||||
header: [],
|
||||
/**
|
||||
* @description Board data
|
||||
* @type {Array<Array>}
|
||||
* @default data = []
|
||||
*/
|
||||
data: [],
|
||||
/**
|
||||
* @description Row num
|
||||
* @type {Number}
|
||||
* @default rowNum = 5
|
||||
*/
|
||||
rowNum: 5,
|
||||
/**
|
||||
* @description Header background color
|
||||
* @type {String}
|
||||
* @default headerBGC = '#00BAFF'
|
||||
*/
|
||||
headerBGC: "#00BAFF",
|
||||
/**
|
||||
* @description Odd row background color
|
||||
* @type {String}
|
||||
* @default oddRowBGC = '#003B51'
|
||||
*/
|
||||
oddRowBGC: "#003B51",
|
||||
/**
|
||||
* @description Even row background color
|
||||
* @type {String}
|
||||
* @default evenRowBGC = '#003B51'
|
||||
*/
|
||||
evenRowBGC: "#0A2732",
|
||||
/**
|
||||
* @description Scroll wait time
|
||||
* @type {Number}
|
||||
* @default waitTime = 2000
|
||||
*/
|
||||
waitTime: 2000,
|
||||
/**
|
||||
* @description Header height
|
||||
* @type {Number}
|
||||
* @default headerHeight = 35
|
||||
*/
|
||||
headerHeight: 35,
|
||||
/**
|
||||
* @description Column width
|
||||
* @type {Array<Number>}
|
||||
* @default columnWidth = []
|
||||
*/
|
||||
columnWidth: [],
|
||||
/**
|
||||
* @description Column align
|
||||
* @type {Array<String>}
|
||||
* @default align = []
|
||||
* @example align = ['left', 'center', 'right']
|
||||
*/
|
||||
align: [],
|
||||
/**
|
||||
* @description Show index
|
||||
* @type {Boolean}
|
||||
* @default index = false
|
||||
*/
|
||||
index: false,
|
||||
/**
|
||||
* @description index Header
|
||||
* @type {String}
|
||||
* @default indexHeader = '#'
|
||||
*/
|
||||
indexHeader: "#",
|
||||
/**
|
||||
* @description Carousel type
|
||||
* @type {String}
|
||||
* @default carousel = 'single'
|
||||
* @example carousel = 'single' | 'page'
|
||||
*/
|
||||
carousel: "single",
|
||||
/**
|
||||
* @description Pause scroll when mouse hovered
|
||||
* @type {Boolean}
|
||||
* @default hoverPause = true
|
||||
* @example hoverPause = true | false
|
||||
*/
|
||||
hoverPause: true,
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
||||
header: [],
|
||||
|
||||
headerStyle: "",
|
||||
|
||||
rowsData: [],
|
||||
|
||||
rows: [],
|
||||
|
||||
widths: [],
|
||||
|
||||
heights: [],
|
||||
|
||||
avgHeight: 0,
|
||||
|
||||
aligns: [],
|
||||
|
||||
animationIndex: 0,
|
||||
|
||||
animationHandler: "",
|
||||
|
||||
updater: 0,
|
||||
|
||||
needCalc: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
config() {
|
||||
const { stopAnimation, calcData } = this;
|
||||
|
||||
stopAnimation();
|
||||
|
||||
this.animationIndex = 0;
|
||||
|
||||
calcData();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleHover(enter, ri, ci, row, ceil) {
|
||||
const { mergedConfig, emitEvent, stopAnimation, animation } = this;
|
||||
|
||||
if (enter) emitEvent("mouseover", ri, ci, row, ceil);
|
||||
if (!mergedConfig.hoverPause) return;
|
||||
|
||||
if (enter) {
|
||||
stopAnimation();
|
||||
} else {
|
||||
animation(true);
|
||||
}
|
||||
},
|
||||
afterAutoResizeMixinInit() {
|
||||
const { calcData } = this;
|
||||
|
||||
calcData();
|
||||
},
|
||||
onResize() {
|
||||
const { mergedConfig, calcWidths, calcHeights } = this;
|
||||
|
||||
if (!mergedConfig) return;
|
||||
|
||||
calcWidths();
|
||||
|
||||
calcHeights();
|
||||
},
|
||||
calcData() {
|
||||
const { mergeConfig, calcHeaderData, calcRowsData } = this;
|
||||
|
||||
mergeConfig();
|
||||
|
||||
calcHeaderData();
|
||||
|
||||
calcRowsData();
|
||||
|
||||
const { calcWidths, calcHeights, calcAligns } = this;
|
||||
|
||||
calcWidths();
|
||||
|
||||
calcHeights();
|
||||
|
||||
calcAligns();
|
||||
|
||||
const { animation } = this;
|
||||
|
||||
animation(true);
|
||||
},
|
||||
mergeConfig() {
|
||||
let { config, defaultConfig } = this;
|
||||
|
||||
this.mergedConfig = deepMerge(
|
||||
deepClone(defaultConfig, true),
|
||||
config || {}
|
||||
);
|
||||
},
|
||||
calcHeaderData() {
|
||||
let { header, index, indexHeader } = this.mergedConfig;
|
||||
|
||||
if (!header.length) {
|
||||
this.header = [];
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
header = [...header];
|
||||
|
||||
if (index) header.unshift(indexHeader);
|
||||
|
||||
this.header = header;
|
||||
},
|
||||
calcRowsData() {
|
||||
let { data, index, headerBGC, rowNum } = this.mergedConfig;
|
||||
|
||||
if (index) {
|
||||
data = data.map((row, i) => {
|
||||
row = [...row];
|
||||
|
||||
const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1
|
||||
}</span>`;
|
||||
|
||||
row.unshift(indexTag);
|
||||
|
||||
return row;
|
||||
});
|
||||
}
|
||||
|
||||
data = data.map((ceils, i) => ({ ceils, rowIndex: i }));
|
||||
|
||||
const rowLength = data.length;
|
||||
|
||||
if (rowLength > rowNum && rowLength < 2 * rowNum) {
|
||||
data = [...data, ...data];
|
||||
}
|
||||
|
||||
data = data.map((d, i) => ({ ...d, scroll: i }));
|
||||
|
||||
this.rowsData = data;
|
||||
this.rows = data;
|
||||
},
|
||||
calcWidths() {
|
||||
const { width, mergedConfig, rowsData } = this;
|
||||
|
||||
const { columnWidth, header } = mergedConfig;
|
||||
|
||||
const usedWidth = columnWidth.reduce((all, w) => all + w, 0);
|
||||
|
||||
let columnNum = 0;
|
||||
if (rowsData[0]) {
|
||||
columnNum = rowsData[0].ceils.length;
|
||||
} else if (header.length) {
|
||||
columnNum = header.length;
|
||||
}
|
||||
|
||||
const avgWidth = (width - usedWidth) / (columnNum - columnWidth.length);
|
||||
|
||||
const widths = new Array(columnNum).fill(avgWidth);
|
||||
|
||||
this.widths = deepMerge(widths, columnWidth);
|
||||
},
|
||||
calcHeights(onresize = false) {
|
||||
const { height, mergedConfig, header } = this;
|
||||
|
||||
const { headerHeight, rowNum, data } = mergedConfig;
|
||||
|
||||
let allHeight = height;
|
||||
|
||||
if (header.length) allHeight -= headerHeight;
|
||||
|
||||
const avgHeight = allHeight / rowNum;
|
||||
|
||||
this.avgHeight = avgHeight;
|
||||
|
||||
if (!onresize) this.heights = new Array(data.length).fill(avgHeight);
|
||||
},
|
||||
calcAligns() {
|
||||
const { header, mergedConfig } = this;
|
||||
|
||||
const columnNum = header.length;
|
||||
|
||||
let aligns = new Array(columnNum).fill("left");
|
||||
|
||||
const { align } = mergedConfig;
|
||||
|
||||
this.aligns = deepMerge(aligns, align);
|
||||
},
|
||||
async animation(start = false) {
|
||||
const { needCalc, calcHeights, calcRowsData } = this;
|
||||
|
||||
if (needCalc) {
|
||||
calcRowsData();
|
||||
calcHeights();
|
||||
this.needCalc = false;
|
||||
}
|
||||
|
||||
let {
|
||||
avgHeight,
|
||||
animationIndex,
|
||||
mergedConfig,
|
||||
rowsData,
|
||||
animation,
|
||||
updater,
|
||||
} = this;
|
||||
|
||||
const { waitTime, carousel, rowNum } = mergedConfig;
|
||||
|
||||
const rowLength = rowsData.length;
|
||||
|
||||
if (rowNum >= rowLength) return;
|
||||
|
||||
if (start) {
|
||||
await new Promise((resolve) => setTimeout(resolve, waitTime));
|
||||
if (updater !== this.updater) return;
|
||||
}
|
||||
|
||||
const animationNum = carousel === "single" ? 1 : rowNum;
|
||||
|
||||
let rows = rowsData.slice(animationIndex);
|
||||
rows.push(...rowsData.slice(0, animationIndex));
|
||||
|
||||
this.rows = rows.slice(0, carousel === "page" ? rowNum * 2 : rowNum + 1);
|
||||
this.heights = new Array(rowLength).fill(avgHeight);
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
if (updater !== this.updater) return;
|
||||
|
||||
this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0));
|
||||
|
||||
animationIndex += animationNum;
|
||||
|
||||
const back = animationIndex - rowLength;
|
||||
if (back >= 0) animationIndex = back;
|
||||
|
||||
this.animationIndex = animationIndex;
|
||||
this.animationHandler = setTimeout(animation, waitTime - 300);
|
||||
},
|
||||
stopAnimation() {
|
||||
const { animationHandler, updater } = this;
|
||||
|
||||
this.updater = (updater + 1) % 999999;
|
||||
|
||||
if (!animationHandler) return;
|
||||
|
||||
clearTimeout(animationHandler);
|
||||
},
|
||||
emitEvent(type, ri, ci, row, ceil) {
|
||||
const { ceils, rowIndex } = row;
|
||||
|
||||
this.$emit(type, {
|
||||
row: ceils,
|
||||
ceil,
|
||||
rowIndex,
|
||||
columnIndex: ci,
|
||||
});
|
||||
},
|
||||
updateRows(rows, animationIndex) {
|
||||
const { mergedConfig, animationHandler, animation } = this;
|
||||
|
||||
this.mergedConfig = {
|
||||
...mergedConfig,
|
||||
data: [...rows],
|
||||
};
|
||||
|
||||
this.needCalc = true;
|
||||
|
||||
if (typeof animationIndex === "number")
|
||||
this.animationIndex = animationIndex;
|
||||
if (!animationHandler) animation(true);
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
const { stopAnimation } = this;
|
||||
|
||||
stopAnimation();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.dv-scroll-board {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dv-scroll-board .text {
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dv-scroll-board .header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 14px;
|
||||
/* background-color: red; */
|
||||
}
|
||||
|
||||
.dv-scroll-board .header .header-item {
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.dv-scroll-board .rows {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dv-scroll-board .rows .row-item {
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
transition: all 0.3s;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.dv-scroll-board .rows .ceil {
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dv-scroll-board .rows .index {
|
||||
border-radius: 3px;
|
||||
padding: 0px 3px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<img class="img-cls" src="/static/town/PHBSJ.png" alt="">
|
||||
<div class="users">
|
||||
<div class="btnss">
|
||||
<span class="btn-s">店铺销量排行</span>
|
||||
<span class="btn-s">店铺销量排行</span>
|
||||
|
||||
</div>
|
||||
|
||||
<dv-scroll-board v-if="config3.data" :config="config3" class="list" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue"
|
||||
import { getSalesRankApi } from "@/api.js"
|
||||
|
||||
const addFn = (data) => {
|
||||
let list = []
|
||||
data.forEach((item, i) => {
|
||||
list.push(
|
||||
[
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||
`<div style='background:red;position:relative'><img src="${item.image || item.mini_banner}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name || item.mer_name}</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: ${item.store_name ? (item.total_sales / productRankingTotal.value).toFixed(2) * 100 : (item.total_sales / townProductCount.value).toFixed(2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style=' position: relative;line-height:30px;text-align:center' >${item.total_sales} <span style='font-size:10px'>单</span>
|
||||
<img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
|
||||
</div>`,
|
||||
|
||||
],
|
||||
|
||||
|
||||
)
|
||||
})
|
||||
return list
|
||||
}
|
||||
|
||||
let townProductCount = ''
|
||||
// getSalesRankApi({
|
||||
// areaCode: 510524, streetCode: 510524100
|
||||
|
||||
// }).then(res => {
|
||||
// townProductCount = res.data.townProductCount
|
||||
// // config3.data = addFn(res.data.merchantRankingList)
|
||||
// })
|
||||
const aa = () => {
|
||||
let list = []
|
||||
|
||||
for (let i = 0; i < 20; i++) {
|
||||
|
||||
list.push([
|
||||
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||
`<div style='background:red;position:relative'><img src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231207/202312071156236a5de0601.png" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>$item.store_name || item.mer_name}</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: {item.store_name ? (item.total_sales / productRankingTotal.value).toFixed(2) * 100 : (item.total_sales / townProductCount.value).toFixed(2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style=' position: relative;line-height:30px;text-align:center' >item <span style='font-size:10px'>单</span>
|
||||
<img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
|
||||
</div>`,])
|
||||
}
|
||||
return list
|
||||
|
||||
}
|
||||
|
||||
const config3 = reactive({
|
||||
oddRowBGC: "#001C2E",
|
||||
evenRowBGC: "#001C2E",
|
||||
// columnWidth: [
|
||||
// 2, 3, 4, 10, 3
|
||||
// ],
|
||||
columnWidth: [50, 50, 150, 150, 100],
|
||||
data: aa()
|
||||
}
|
||||
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.img-cls {
|
||||
width: 98%;
|
||||
height: 45vh;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.users {
|
||||
box-sizing: border-box;
|
||||
// padding-top: 5vh;
|
||||
width: 100%;
|
||||
// height: 46vh;
|
||||
margin-top: 7vh;
|
||||
height: 38vh;
|
||||
|
||||
.btnss {
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 2vh;
|
||||
|
||||
.btn-s {
|
||||
margin-right: 1vw;
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid #2A538D;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
|
||||
// background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1vw 50px 1vw;
|
||||
height: 34vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,476 @@
|
|||
<template>
|
||||
<div class="root">
|
||||
<div class="container-shell">
|
||||
<div class="container-shell-title">jessibuca demo player <span class="tag-version" v-if="version">({{
|
||||
version
|
||||
}})</span></div>
|
||||
<div id="container" style="width: 200px;height: 200px;" ref="container"></div>
|
||||
<div class="input">
|
||||
<span>缓冲(秒):</span>
|
||||
<input style="width: 50px" type="number" ref="buffer" value="0.2" @change="changeBuffer" />
|
||||
<input type="checkbox" v-model="isDebug" ref="isDebug" @change="restartPlay" /><span>开启日志</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="input">
|
||||
<div>
|
||||
<input type="checkbox" v-model="isFlv" @change="restartPlay()" /><span>设置Flv格式</span>
|
||||
<input type="checkbox" v-model="controlAutoHide" @change="restartPlay()" /><span>控制栏自动隐藏(移动端不支持)</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="input">
|
||||
<span>解码器：</span>
|
||||
<input type="checkbox" v-model="useMSE" ref="vod" @change="restartPlay('mse')" /><span>MediaSource</span>
|
||||
<input type="checkbox" v-model="useWCS" ref="vod" @change="restartPlay('wcs')" /><span>webcodecs</span>
|
||||
<input type="checkbox" v-model="useWasm" ref="vod" @change="restartPlay('wasm')" /><span>wasm</span>
|
||||
</div>
|
||||
<div class="input">
|
||||
<div>输入URL：</div>
|
||||
<input placeholder="支持ws-raw/ws-flv/http-flv协议" type="input" autocomplete="on" ref="playUrl" value="" />
|
||||
<button v-if="!playing" @click="play">播放</button>
|
||||
<button v-else @click="pause">停止</button>
|
||||
</div>
|
||||
<div class="input" v-if="loaded" style="line-height: 30px">
|
||||
<button @click="destroy">销毁</button>
|
||||
<button v-if="quieting" @click="cancelMute">取消静音</button>
|
||||
<template v-else>
|
||||
<button @click="mute">静音</button>
|
||||
音量
|
||||
<select v-model="volume" @change="volumeChange">
|
||||
<option value="1">100</option>
|
||||
<option value="0.75">75</option>
|
||||
<option value="0.5">50</option>
|
||||
<option value="0.25">25</option>
|
||||
</select>
|
||||
</template>
|
||||
<span>旋转</span>
|
||||
<select v-model="rotate" @change="rotateChange">
|
||||
<option value="0">0</option>
|
||||
<option value="90">90</option>
|
||||
<option value="270">270</option>
|
||||
</select>
|
||||
|
||||
<button @click="fullscreen">全屏</button>
|
||||
<button @click="screenShot">截图</button>
|
||||
<div style="line-height: 30px">
|
||||
<input type="checkbox" ref="operateBtns" v-model="showOperateBtns"
|
||||
@change="restartPlay" /><span>操作按钮</span>
|
||||
<input type="checkbox" ref="operateBtns" v-model="showBandwidth" @change="restartPlay" /><span>网速</span>
|
||||
<span v-if="fps" style="margin-left: 10px">FPS：{{ fps }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input" v-if="loaded">
|
||||
<input type="checkbox" ref="offscreen" v-model="useOffscreen"
|
||||
@change="restartPlay('offscreen')" /><span>离屏渲染</span>
|
||||
|
||||
<select v-model="scale" @change="scaleChange">
|
||||
<option value="0">完全填充(拉伸)</option>
|
||||
<option value="1">等比缩放</option>
|
||||
<option value="2">完全填充(未拉伸)</option>
|
||||
</select>
|
||||
<button v-if="!playing" @click="clearView">清屏</button>
|
||||
<template v-if="playing">
|
||||
<select v-model="recordType">
|
||||
<option value="webm">webm</option>
|
||||
<option value="mp4">mp4</option>
|
||||
</select>
|
||||
<button v-if="!recording" @click="startRecord">录制</button>
|
||||
<button v-if="!recording" @click="stopAndSaveRecord">暂停录制</button>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { VERSION } from "./version";
|
||||
|
||||
function isMobile() {
|
||||
return (/iphone|ipad|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase()));
|
||||
}
|
||||
|
||||
function isPad() {
|
||||
return (/ipad|android(?!.*mobile)|tablet|kindle|silk/i.test(window.navigator.userAgent.toLowerCase()));
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "DemoPlayer",
|
||||
jessibuca: null,
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
version: '',
|
||||
wasm: false,
|
||||
playing: false,
|
||||
quieting: true,
|
||||
loaded: false, // mute
|
||||
showOperateBtns: true,
|
||||
showBandwidth: true,
|
||||
hotKey: true,
|
||||
err: "",
|
||||
speed: 0,
|
||||
performance: "",
|
||||
fps: '',
|
||||
volume: 1,
|
||||
rotate: 0,
|
||||
useWCS: false,
|
||||
useMSE: false,
|
||||
useWasm: true,
|
||||
useOffscreen: false,
|
||||
recording: false,
|
||||
isDebug: true,
|
||||
recordType: 'webm',
|
||||
scale: 0,
|
||||
vConsole: null,
|
||||
controlAutoHide: true,
|
||||
isFlv: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if ((isMobile() || isPad()) && window.VConsole) {
|
||||
this.vConsole = new window.VConsole();
|
||||
}
|
||||
this.version = VERSION === '#VERSION#' ? '' : VERSION;
|
||||
this.create();
|
||||
window.onerror = (msg) => (this.err = msg);
|
||||
},
|
||||
unmounted() {
|
||||
if (this.$options && this.$options.jessibuca) {
|
||||
this.$options.jessibuca.destroy();
|
||||
}
|
||||
this.vConsole.destroy();
|
||||
},
|
||||
methods: {
|
||||
create(options) {
|
||||
options = options || {};
|
||||
const jessibuca = new window.Jessibuca(
|
||||
Object.assign(
|
||||
{
|
||||
container: this.$refs.container,
|
||||
// videoBuffer: Number(this.$refs.buffer.value), // 缓存时长
|
||||
isResize: false,
|
||||
useWCS: this.useWCS,
|
||||
useMSE: this.useMSE,
|
||||
wcsUseVideoRender: this.useWCS,
|
||||
text: "",
|
||||
// background: "bg.jpg",
|
||||
loadingText: "疯狂加载中...",
|
||||
// hasAudio:false,
|
||||
debug: this.isDebug,
|
||||
hotKey: true,
|
||||
// hasAudio:false,
|
||||
controlAutoHide: this.controlAutoHide,
|
||||
supportDblclickFullscreen: true,
|
||||
showBandwidth: this.showBandwidth, // 显示网速
|
||||
operateBtns: {
|
||||
fullscreen: this.showOperateBtns,
|
||||
screenshot: this.showOperateBtns,
|
||||
record: this.showOperateBtns,
|
||||
play: this.showOperateBtns,
|
||||
audio: this.showOperateBtns,
|
||||
},
|
||||
forceNoOffscreen: !this.useOffscreen,
|
||||
isNotMute: true,
|
||||
timeout: 10,
|
||||
recordType: 'mp4',
|
||||
isFlv: this.isFlv,
|
||||
},
|
||||
options
|
||||
)
|
||||
);
|
||||
|
||||
this.$options.jessibuca = jessibuca;
|
||||
var _this = this;
|
||||
jessibuca.on("load", function () {
|
||||
console.log("on load");
|
||||
});
|
||||
|
||||
jessibuca.on("log", function (msg) {
|
||||
console.log("on log", msg);
|
||||
});
|
||||
jessibuca.on("record", function (msg) {
|
||||
console.log("on record:", msg);
|
||||
});
|
||||
jessibuca.on("pause", function () {
|
||||
console.log("on pause");
|
||||
_this.playing = false;
|
||||
});
|
||||
jessibuca.on("play", function () {
|
||||
console.log("on play");
|
||||
_this.playing = true;
|
||||
});
|
||||
jessibuca.on("fullscreen", function (msg) {
|
||||
console.log("on fullscreen", msg);
|
||||
});
|
||||
|
||||
jessibuca.on("mute", function (msg) {
|
||||
console.log("on mute", msg);
|
||||
_this.quieting = msg;
|
||||
});
|
||||
|
||||
jessibuca.on("mute", function (msg) {
|
||||
console.log("on mute2", msg);
|
||||
});
|
||||
|
||||
jessibuca.on("audioInfo", function (msg) {
|
||||
console.log("audioInfo", msg);
|
||||
});
|
||||
|
||||
jessibuca.on("bps", function (bps) {
|
||||
// console.log('bps', bps);
|
||||
});
|
||||
// let _ts = 0;
|
||||
// this.jessibuca.on("timeUpdate", function (ts) {
|
||||
// console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
|
||||
// _ts = ts;
|
||||
// });
|
||||
|
||||
jessibuca.on("videoInfo", function (info) {
|
||||
console.log("videoInfo", info);
|
||||
});
|
||||
|
||||
jessibuca.on("error", function (error) {
|
||||
console.log("error", error);
|
||||
});
|
||||
|
||||
jessibuca.on("timeout", function () {
|
||||
console.log("timeout");
|
||||
});
|
||||
|
||||
jessibuca.on('start', function () {
|
||||
console.log('frame start');
|
||||
})
|
||||
|
||||
jessibuca.on("performance", function (performance) {
|
||||
var show = "卡顿";
|
||||
if (performance === 2) {
|
||||
show = "非常流畅";
|
||||
} else if (performance === 1) {
|
||||
show = "流畅";
|
||||
}
|
||||
_this.performance = show;
|
||||
});
|
||||
jessibuca.on('buffer', function (buffer) {
|
||||
console.log('buffer', buffer);
|
||||
})
|
||||
|
||||
jessibuca.on('stats', function (stats) {
|
||||
console.log('stats', stats);
|
||||
_this.fps = stats.fps;
|
||||
})
|
||||
|
||||
jessibuca.on('kBps', function (kBps) {
|
||||
console.log('kBps', kBps);
|
||||
});
|
||||
|
||||
// jessibuca.on("play", () => {
|
||||
// this.playing = true;
|
||||
// this.loaded = true;
|
||||
// this.quieting = jessibuca.isMute();
|
||||
// });
|
||||
|
||||
jessibuca.on('recordingTimestamp', (ts) => {
|
||||
console.log('recordingTimestamp', ts);
|
||||
})
|
||||
|
||||
jessibuca.on('playToRenderTimes', (times) => {
|
||||
console.log(times);
|
||||
})
|
||||
|
||||
// this.play();
|
||||
// console.log(this.jessibuca);
|
||||
},
|
||||
play() {
|
||||
// this.jessibuca.onPlay = () => (this.playing = true);
|
||||
|
||||
|
||||
if (this.$refs.playUrl.value) {
|
||||
this.$options.jessibuca.play(this.$refs.playUrl.value).then(() => {
|
||||
console.log('play success');
|
||||
this.playing = true;
|
||||
this.loaded = true;
|
||||
this.quieting = jessibuca.isMute();
|
||||
}).catch((err) => {
|
||||
console.log('play error', err);
|
||||
});
|
||||
}
|
||||
},
|
||||
mute() {
|
||||
this.$options.jessibuca.mute();
|
||||
},
|
||||
cancelMute() {
|
||||
this.$options.jessibuca.cancelMute();
|
||||
},
|
||||
|
||||
pause() {
|
||||
this.$options.jessibuca.pause().then(() => {
|
||||
console.log('pause success');
|
||||
this.playing = false;
|
||||
this.err = "";
|
||||
this.performance = "";
|
||||
}).catch((err) => {
|
||||
console.log('pause error', err);
|
||||
});
|
||||
|
||||
},
|
||||
volumeChange() {
|
||||
this.$options.jessibuca.setVolume(this.volume);
|
||||
},
|
||||
rotateChange() {
|
||||
this.$options.jessibuca.setRotate(this.rotate);
|
||||
},
|
||||
destroy() {
|
||||
if (this.$options.jessibuca) {
|
||||
this.$options.jessibuca.destroy();
|
||||
}
|
||||
this.create();
|
||||
this.playing = false;
|
||||
this.loaded = false;
|
||||
this.performance = "";
|
||||
},
|
||||
|
||||
fullscreen() {
|
||||
this.$options.jessibuca.setFullscreen(true);
|
||||
},
|
||||
|
||||
clearView() {
|
||||
this.$options.jessibuca.clearView();
|
||||
},
|
||||
|
||||
startRecord() {
|
||||
const time = new Date().getTime();
|
||||
this.$options.jessibuca.startRecord(time, this.recordType);
|
||||
},
|
||||
|
||||
stopAndSaveRecord() {
|
||||
this.$options.jessibuca.stopRecordAndSave();
|
||||
},
|
||||
|
||||
|
||||
screenShot() {
|
||||
this.$options.jessibuca.screenshot();
|
||||
},
|
||||
|
||||
|
||||
restartPlay(type) {
|
||||
|
||||
if (type === 'mse') {
|
||||
this.useWCS = false;
|
||||
this.useOffscreen = false;
|
||||
this.useWasm = false;
|
||||
} else if (type === 'wcs') {
|
||||
this.useMSE = false
|
||||
this.useWasm = false;
|
||||
} else if (type === 'offscreen') {
|
||||
this.useMSE = false
|
||||
} else if (type === 'wasm') {
|
||||
this.useWCS = false;
|
||||
this.useMSE = false;
|
||||
this.useOffscreen = false;
|
||||
}
|
||||
|
||||
this.destroy();
|
||||
setTimeout(() => {
|
||||
this.play();
|
||||
}, 100)
|
||||
},
|
||||
|
||||
changeBuffer() {
|
||||
// this.$options.jessibuca.setBufferTime(Number(this.$refs.buffer.value));
|
||||
},
|
||||
|
||||
scaleChange() {
|
||||
this.$options.jessibuca.setScaleMode(this.scale);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
background: url(/bg.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.root {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.container-shell {
|
||||
position: relative;
|
||||
backdrop-filter: blur(5px);
|
||||
background: hsla(0, 0%, 50%, 0.5);
|
||||
padding: 30px 4px 10px 4px;
|
||||
/* border: 2px solid black; */
|
||||
width: auto;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 10px 20px;
|
||||
}
|
||||
|
||||
.container-shell-title {
|
||||
position: absolute;
|
||||
color: darkgray;
|
||||
top: 4px;
|
||||
left: 10px;
|
||||
text-shadow: 1px 1px black;
|
||||
}
|
||||
|
||||
.tag-version {}
|
||||
|
||||
#container {
|
||||
background: rgba(13, 14, 27, 0.7);
|
||||
width: 640px;
|
||||
height: 398px;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
color: white;
|
||||
place-content: stretch;
|
||||
}
|
||||
|
||||
.input2 {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.input input[type='input'] {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.err {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 10px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.option {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
place-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.option span {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 720px) {
|
||||
#container {
|
||||
width: 90vw;
|
||||
height: 52.7vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,360 @@
|
|||
<template>
|
||||
<div class="product-list">
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div style="margin-top: 14vh;position: relative;">商 品 总 数</div>
|
||||
<div style="font-size: 10px;">NUMBER OF COMMODITIES</div>
|
||||
<img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
||||
<div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
|
||||
data.totalProductCounInfo.todayProductCount }}</span>
|
||||
件</div>
|
||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
昨日数据： {{ data.totalProductCounInfo.yestertodayProductCount }}
|
||||
</div>
|
||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
周环比: {{ data.totalProductCounInfo.weeklyProductTotalGrowthRate }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div style="margin-top: 14vh;position: relative;">新 商 品 总 数</div>
|
||||
<div style="font-size: 10px;">NUMBER OF NEW SHOPS</div>
|
||||
<img src="/static/index/JRC.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
||||
|
||||
<div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
|
||||
data.newProductCountInfo.todayNewProductCount }}</span>
|
||||
件</div>
|
||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
昨日数据： {{ data.newProductCountInfo.yestertodayNewProductCount }}
|
||||
</div>
|
||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
周环比: {{ data.newProductCountInfo.weeklyNewProductTotalGrowthRate }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div style="margin-top: 14vh;position: relative;">累 计 店 铺 总 数</div>
|
||||
<div style="font-size: 10px;">ACCUMULATED NUMBERS OF SHOPS</div>
|
||||
<img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
||||
<div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">
|
||||
|
||||
{{ data.merchantCountInfo.todayMerchantCount }}
|
||||
|
||||
|
||||
</span>
|
||||
件</div>
|
||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
昨日数据：
|
||||
{{ data.merchantCountInfo.yestertodayMerchantCount }}
|
||||
</div>
|
||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
周环比: {{ data.merchantCountInfo.weeklyMerchantGrowthRate }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Views">
|
||||
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<div class="view-content">
|
||||
<div>昨日数据：3333</div>
|
||||
<div style="display: flex;align-items: center;">当前浏览量：
|
||||
<Remake :num="517854" /> 人正在浏览
|
||||
</div>
|
||||
<div>周环比：32%</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.product-list {
|
||||
height: 70%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.product {
|
||||
height: 100%;
|
||||
width: 32%;
|
||||
position: relative;
|
||||
|
||||
.bg {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 12PX;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.product-icon {
|
||||
width: 2vw;
|
||||
height: 2vw;
|
||||
position: absolute;
|
||||
animation: jump 1s infinite;
|
||||
top: 2vh;
|
||||
}
|
||||
}
|
||||
|
||||
.Views {
|
||||
margin-top: 2%;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
|
||||
.view-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bubble1 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
left: 6.5vw;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1.5s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bubble2 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
left: 8.5vw;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1.25s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
@keyframes bubbleAnimation {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbleAnimation1 {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbleAnimation2 {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
import { getProductCountApi } from "@/api.js"
|
||||
import { ref, reactive, defineProps } from "vue"
|
||||
|
||||
const props = defineProps({
|
||||
code: Object,
|
||||
})
|
||||
|
||||
const data = reactive(
|
||||
{
|
||||
"totalProductCounInfo": {
|
||||
"todayProductCount": 0,
|
||||
"yestertodayProductCount": 0,
|
||||
"weeklyProductTotalGrowthRate": 6.6842
|
||||
},
|
||||
"newProductCountInfo": {
|
||||
"todayNewProductCount": 0,
|
||||
"yestertodayNewProductCount": 0,
|
||||
"weeklyNewProductTotalGrowthRate": -270
|
||||
},
|
||||
"merchantCountInfo": {
|
||||
"todayMerchantCount": 22,
|
||||
"yestertodayMerchantCount": 22,
|
||||
"weeklyMerchantGrowthRate": 0.0476
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
)
|
||||
|
||||
getProductCountApi({
|
||||
areaCode: 510524,
|
||||
streetCode: props.code
|
||||
}).then(res => {
|
||||
|
||||
for (let key in res.data) {
|
||||
|
||||
data[key] = res.data[key]
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1 @@
|
|||
export const VERSION = '#VERSION#'
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
import { createApp } from 'vue'
|
||||
// import './style.css'
|
||||
import App from './App.vue'
|
||||
import dataV from '@jiaminghi/data-view'
|
||||
|
||||
// import DataV, { setClassNamePrefix } from '@dataview/datav-vue3';
|
||||
import router from "./router";
|
||||
// import '@/components/townDetail/test.js'
|
||||
|
||||
const app=createApp(App)
|
||||
import 'amfe-flexible'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
app.use(dataV)
|
||||
app.mount('#app')
|
||||
|
|
@ -4,11 +4,9 @@
|
|||
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<div class="content">
|
||||
<div class="btns">
|
||||
<div class="btn" @click="test">正常开启的商户</div>
|
||||
<div class="btn" @click="test">已关闭的商户</div>
|
||||
<div class="btn " :class="ShwostoreType ? 'act-btn' : ''" @click="ShwostoreType = true">正常开启的商户</div>
|
||||
<div class="btn" :class="!ShwostoreType ? 'act-btn' : ''" @click="ShwostoreType = false">已关闭的商户</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table">
|
||||
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
|
||||
</div>
|
||||
|
|
@ -25,7 +23,7 @@ import { ref, reactive, onMounted } from "vue"
|
|||
import { useRouter } from 'vue-router'
|
||||
const route = useRouter()
|
||||
|
||||
const ShwostoreType = ref(false)
|
||||
const ShwostoreType = ref(true)
|
||||
const test = () => {
|
||||
console.log(6)
|
||||
}
|
||||
|
|
@ -135,13 +133,28 @@ onMounted(() => {
|
|||
|
||||
.btns {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
color: white;
|
||||
border: 1px solid #BF6D5D;
|
||||
padding: 3px 10px;
|
||||
// border: 1px solid #BF6D5D;
|
||||
background-image: url('static/index/btn.png');
|
||||
background-size: 100% 100%;
|
||||
padding: 1vh 1vw;
|
||||
border-radius: 20px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.act-btn {
|
||||
|
||||
background-image: url('/static/index/actbg.png');
|
||||
background-size: 100% 100%;
|
||||
border: none;
|
||||
// border-bottom: 6px solid #BF6D5D
|
||||
// border-bottom: 6px solid #BF6D5D;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,35 +3,19 @@
|
|||
<div class="img-cls">
|
||||
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;z-index: -10000;" alt="">
|
||||
<div class="content">
|
||||
<div class="btns" style="position: absolute;">
|
||||
<!-- <div class="btn" @click="ShwostoreType = true">商品分类</div>
|
||||
<div class="btn" @click="ShwostoreType = false">商品管理
|
||||
</div> -->
|
||||
<!-- <div class="btn">啊实打实</div> -->
|
||||
<img src="/static/a/btn.png" style="width: 8vw;height: 4vh;" alt="">
|
||||
<img src="/static/a/btn2.png" style="width: 8vw;height: 4vh;" alt="">
|
||||
|
||||
|
||||
<div style="position: relative;color: white;">
|
||||
<img src="/static/a/bg.png" style="width: 8vw;height: 4vh;position: absolute;" alt="">
|
||||
|
||||
|
||||
<div style="position: relative;">aniu</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="btn " :class="ShwostoreType ? 'act-btn' : ''" @click="ShwostoreType = true">商品分类</div>
|
||||
<div class="btn" :class="!ShwostoreType ? 'act-btn' : ''" @click="ShwostoreType = false">商品管理</div>
|
||||
<!-- <img src="/static/index/actbg.png" alt=""> -->
|
||||
</div>
|
||||
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
|
||||
v-if="!ShwostoreType">
|
||||
<div class="manageBtn">出售中商品</div>
|
||||
<div class="manageBtn actmanageBtn">出售中商品</div>
|
||||
<div class="manageBtn">仓库中商品</div>
|
||||
<div class="manageBtn">待审核商品</div>
|
||||
<div class="manageBtn">审核未通过商品</div>
|
||||
</div>
|
||||
<div class="table" v-if="ShwostoreType">
|
||||
<div class="table" v-if="ShwostoreType && configs.data.length">
|
||||
<dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
|
||||
</div>
|
||||
<div class="table" v-else>
|
||||
|
|
@ -46,11 +30,25 @@
|
|||
<script setup>
|
||||
// 102B3
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { getProductCategoryListApi } from "@/api.js"
|
||||
|
||||
|
||||
getProductCategoryListApi(
|
||||
{
|
||||
areaCode: 510524,
|
||||
streetCode: 510524100
|
||||
|
||||
|
||||
}
|
||||
).then(res => {
|
||||
a(configs, res.data)
|
||||
|
||||
console.log(res.data)
|
||||
})
|
||||
|
||||
|
||||
|
||||
const tableClick = (e) => {
|
||||
|
||||
// console.log(i)
|
||||
|
||||
if (e.ceil) {
|
||||
if (e.columnIndex == 1) {
|
||||
|
||||
|
|
@ -78,9 +76,9 @@ const hdClick = (b) => {
|
|||
console.log(b)
|
||||
}
|
||||
|
||||
const a = (aaa) => {
|
||||
const a = (aaa, data) => {
|
||||
if (aaa == configs2) {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
data.forEach((item, i) => {
|
||||
if (i % 2 == 0) {
|
||||
aaa.data.push(
|
||||
[
|
||||
|
|
@ -112,48 +110,45 @@ const a = (aaa) => {
|
|||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
]
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
else {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
data.forEach((item, i) => {
|
||||
if (i % 2 == 0) {
|
||||
aaa.data.push(
|
||||
[
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' > <div id='zmj${i}' class='zmj'> 排序${i}</div> <div id='lj${i}' class='lj' style="width: 16vw;height: 5vh;background-color: #fff;z-index: 99999;position: absolute;display:none"></div> </div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.cate_name}</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;dislay:flex;align-items:center'>
|
||||
<img src='${item.pic}' style='width:25px;height:25px;margin-top:5px'>
|
||||
</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.is_show ? '显示' : '不显示'}</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.is_hot ? '推荐' : '不推荐'}</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
|
||||
|
||||
]
|
||||
)
|
||||
} else {
|
||||
aaa.data.push(
|
||||
[
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;' > <div id='zmj${i}' class='zmj'> 排序${i}</div> <div class='lj' id='lj${i}' style="width: 16vw;height: 5vh;background-color: #fff;z-index: 99999;position: absolute;display:none"></div> </div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${i + 1}</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.cate_name}</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;dislay:flex;align-items:center'>
|
||||
<img src='${item.pic}' style='width:25px;height:25px;margin-top:5px'>
|
||||
</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.is_show ? '显示' : '不显示'}</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.is_hot ? '推荐' : '不推荐'}</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -164,12 +159,15 @@ const configs = reactive({
|
|||
evenRowBGC: "",
|
||||
rowNum: 20,
|
||||
header: [
|
||||
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>分类名称</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>分类图标</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>是否显示</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>是否推荐</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>创建时间</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>创建时间</div>`
|
||||
|
||||
|
||||
],
|
||||
data: [
|
||||
]
|
||||
|
|
@ -181,6 +179,7 @@ const configs2 = reactive({
|
|||
evenRowBGC: "",
|
||||
rowNum: 20,
|
||||
header: [
|
||||
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>ID</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品图</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品名称</div>`,
|
||||
|
|
@ -194,11 +193,14 @@ const configs2 = reactive({
|
|||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>更新时间</div>`,
|
||||
],
|
||||
data: [
|
||||
|
||||
|
||||
|
||||
]
|
||||
})
|
||||
onMounted(() => {
|
||||
a(configs2)
|
||||
a(configs)
|
||||
// a(configs2)
|
||||
// a(configs)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -219,6 +221,7 @@ onMounted(() => {
|
|||
transform: translate(-50%, -50%);
|
||||
// background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
// position: absolute;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
|
|
@ -235,29 +238,51 @@ onMounted(() => {
|
|||
.btn {
|
||||
color: white;
|
||||
// border: 1px solid #BF6D5D;
|
||||
padding: 3px 10px;
|
||||
background-image: url('static/index/btn.png');
|
||||
background-size: 100% 100%;
|
||||
padding: 1vh 1vw;
|
||||
border-radius: 20px;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
// background-image: url('');
|
||||
// background-size: cover;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.act-btn {
|
||||
|
||||
background-image: url('/static/index/actbg.png');
|
||||
background-size: 100% 100%;
|
||||
border: none;
|
||||
// border-bottom: 6px solid #BF6D5D
|
||||
// border-bottom: 6px solid #BF6D5D;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 75vh;
|
||||
margin-top: 5vh;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
}
|
||||
|
||||
.manageBtn {
|
||||
padding: 2px 10px;
|
||||
border: 1px solid #6377C8;
|
||||
padding: 0.75vh 0.75vw;
|
||||
border-radius: 20px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
// line-height: 10px;
|
||||
background-image: url('/static/index/btn2.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.actmanageBtn {
|
||||
background-image: url('/static/index/actbg2.png');
|
||||
// background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
:deep(.ceil) {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 5px;
|
||||
|
|
|
|||
|
|
@ -4,11 +4,23 @@
|
|||
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<div class="content">
|
||||
<div class="btns">
|
||||
<div class="btn" @click="changeTable(0)">提现记录</div>
|
||||
<div class="btn" @click="changeTable(1)">资金记录</div>
|
||||
<div class="btn" @click="changeTable(2)">账单管理</div>
|
||||
<div style="display: flex;">
|
||||
<div class="btn" :class="headerIndex == 0 ? 'act-btn' : ''" @click="changeTable(0)">提现记录</div>
|
||||
<div class="btn" :class="headerIndex == 1 ? 'act-btn' : ''" @click="changeTable(1)">资金记录</div>
|
||||
<div class="btn" :class="headerIndex == 2 ? 'act-btn' : ''" @click="changeTable(2)">账单管理</div>
|
||||
</div>
|
||||
<div style="margin-right: 0vw;">
|
||||
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
|
||||
v-if="headerIndex == 2">
|
||||
<div class="manageBtn actmanageBtn ">日账单</div>
|
||||
<div class="manageBtn">月账单</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bill" v-if="headerIndex == 2">
|
||||
<Bill v-for="(item, key) in billList" :key="index" :data="item"></Bill>
|
||||
</div>
|
||||
|
||||
<div class="table" v-if="true">
|
||||
<dv-scroll-board :config="configs" v-if="headerIndex == 0" @click='hdClick'
|
||||
|
|
@ -19,7 +31,6 @@
|
|||
</div>
|
||||
|
||||
<Transition>
|
||||
|
||||
<div class="pop" v-if="showPop">
|
||||
<img src="/static/finance/TC.png" alt=""
|
||||
style="width: 35vw;height: 40vh;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
|
||||
|
|
@ -107,7 +118,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Transition>
|
||||
|
||||
|
||||
|
|
@ -121,6 +131,85 @@
|
|||
// 102B3
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { useRouter } from 'vue-router'
|
||||
import Bill from "@/components/Bill.vue"
|
||||
|
||||
|
||||
const billList = reactive([
|
||||
{
|
||||
icon: "DD",
|
||||
text: "订单总金额收入",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "CZ",
|
||||
text: "退款支出金额",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "YJ",
|
||||
text: "佣金支出金额",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "PT",
|
||||
text: "平台手续费",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "CZ",
|
||||
text: "充值金额",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "CZXF",
|
||||
text: "充值消费金额",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "CS",
|
||||
text: "产生交易的商户数",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "YH",
|
||||
text: "优惠券",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "CS",
|
||||
text: "入口商户金额",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "YC",
|
||||
text: "云仓库佣金",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "XZ",
|
||||
text: "小组服务佣金",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "CY",
|
||||
text: "村佣金",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "ZY",
|
||||
text: "镇佣金",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "PT",
|
||||
text: "平台剩余手续费",
|
||||
num: 1245
|
||||
},
|
||||
])
|
||||
|
||||
|
||||
|
||||
|
||||
const route = useRouter()
|
||||
const ShwostoreType = ref(false)
|
||||
const changeTable = (type) => {
|
||||
|
|
@ -316,30 +405,64 @@ onMounted(() => {
|
|||
z-index: 999999;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
|
||||
.btn {
|
||||
color: white;
|
||||
border: 1px solid #BF6D5D;
|
||||
padding: 3px 10px;
|
||||
// border: 1px solid #BF6D5D;
|
||||
background-image: url('static/index/btn.png');
|
||||
background-size: 100% 100%;
|
||||
padding: 1vh 1vw;
|
||||
border-radius: 20px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.act-btn {
|
||||
|
||||
background-image: url('/static/index/actbg.png');
|
||||
background-size: 100% 100%;
|
||||
border: none;
|
||||
// border-bottom: 6px solid #BF6D5D
|
||||
// border-bottom: 6px solid #BF6D5D;
|
||||
}
|
||||
}
|
||||
|
||||
.bill {
|
||||
width: 95vw;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// justify-content: space-between;
|
||||
// background-color: #fff;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 79vh;
|
||||
height: 60vh;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
}
|
||||
|
||||
.manageBtn {
|
||||
padding: 2px 10px;
|
||||
border: 1px solid #6377C8;
|
||||
padding: 0.75vh 0.75vw;
|
||||
border-radius: 20px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
// line-height: 10px;
|
||||
background-image: url('/static/index/btn2.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.actmanageBtn {
|
||||
background-image: url('/static/index/actbg2.png');
|
||||
// background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
:deep(.ceil) {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 5px;
|
||||
|
|
|
|||
|
|
@ -1,185 +1,25 @@
|
|||
<template>
|
||||
<div v-show="loading" style="position: relative;top: 50%;left: 50%;transform: translate(-50%,-50%);">
|
||||
<dv-loading style="color: white;">Loading...</dv-loading>
|
||||
</div>
|
||||
<div class="box" :style="{ opacity: loading ? 0 : 1 }">
|
||||
<div class="body">
|
||||
<div class="l">
|
||||
<img src="/static/index/PTYHL.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
||||
<div class="user" id="user"></div>
|
||||
<div class="storeNum">
|
||||
<div class="tit"></div>
|
||||
<div class="townList">
|
||||
<div class="storebox" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1]">
|
||||
<div class="store" :id="'store' + index"></div>
|
||||
<div class="toenName">
|
||||
<div>同谈镇</div>
|
||||
<div>123个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<topLeft :areaCodes="areaCodes" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="c" id="">
|
||||
<div class="product-list">
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div style="margin-top: 14vh;position: relative;">商 品 总 数</div>
|
||||
<div style="font-size: 10px;">NUMBER OF COMMODITIES</div>
|
||||
<div style="position: relative; text-align: center;margin-top: 3vh;">今日</div>
|
||||
<div style="margin-top: 2vh;position: relative;"> <span
|
||||
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
昨日数据： 0.0
|
||||
</div>
|
||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
周环比: 10%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SPBGZ.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div style="margin-top: 14vh;position: relative;">新 商 品 总 数</div>
|
||||
<div style="font-size: 10px;">NUMBER OF NEW SHOPS</div>
|
||||
<div style="position: relative; text-align: center;margin-top: 3vh;">今日</div>
|
||||
<div style="margin-top: 2vh;position: relative;"> <span
|
||||
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
昨日数据： 0.0
|
||||
</div>
|
||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
周环比: 10%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SPBGR.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SDTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
<div class="bubble2"></div>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div style="margin-top: 14vh;position: relative;">累 计 店 铺 总 数</div>
|
||||
<div style="font-size: 10px;">ACCUMULATED NUMBERS OF SHOPS</div>
|
||||
<div style="position: relative; text-align: center;margin-top: 3vh;">今日</div>
|
||||
<div style="margin-top: 2vh;position: relative;"> <span
|
||||
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
昨日数据： 0.0
|
||||
</div>
|
||||
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
|
||||
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
|
||||
|
||||
周环比: 10%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Views">
|
||||
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<div class="view-content">
|
||||
<div>昨日数据：3333</div>
|
||||
<div style="display: flex;align-items: center;">当前浏览量：
|
||||
<Remake /> 人正在浏览
|
||||
</div>
|
||||
<div>周环比：32%</div>
|
||||
</div>
|
||||
</div>
|
||||
<topCenter :areaCodes="areaCodes"></topCenter>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="r">
|
||||
<img src="/static/index/PTSP.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
||||
|
||||
<div class="user" style="width: 98%; ">
|
||||
<div class="btns">
|
||||
<span class="btn">店铺销量排行</span>
|
||||
<span class="btn">店铺销量排行</span>
|
||||
</div>
|
||||
<dv-scroll-board :config="config3" style="height: 17vh;margin-left: 1%;" />
|
||||
</div>
|
||||
<div class="storeNum">
|
||||
<div class="tit">
|
||||
</div>
|
||||
<div class="townList">
|
||||
<div class="storebox" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1]">
|
||||
<div class="store" :id="'store' + (index + 8)"></div>
|
||||
<div class="toenName">
|
||||
<div>同谈镇</div>
|
||||
<div>123个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<topRight :areaCodes="areaCodes"></topRight>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot">
|
||||
|
||||
|
||||
<div class="foot-l">
|
||||
<img src="/static/index/DDSJ.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
||||
|
||||
<div style="height: 5vh;"></div>
|
||||
<div>
|
||||
<dv-scroll-board :config="configs" style="width:96%;height:40vh;margin-left: 2%;" />
|
||||
</div>
|
||||
<bottomLeft :areaCodes="areaCodes"></bottomLeft>
|
||||
</div>
|
||||
<div class="c">
|
||||
|
||||
<img src="/static/index/CJYHTJ.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
||||
|
||||
<div style="height:5vh;"></div>
|
||||
<div class="towns">
|
||||
<div class="town-li" v-for="(item, index) in [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]">泸县</div>
|
||||
<div id="transactionUsers" style="width: 100%;height: 30vh;"></div>
|
||||
</div>
|
||||
<bottomCenter :areaCodes="areaCodes"></bottomCenter>
|
||||
</div>
|
||||
<div class="r">
|
||||
<img src="/static/index/DRDD.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
||||
|
||||
<div style="height: 5vh;"></div>
|
||||
<div>
|
||||
<dv-scroll-board :config="configs2" style="width:96%;height:40vh;margin-left: 2%;" />
|
||||
</div>
|
||||
|
||||
<bottomRight :areaCodes="areaCodes"></bottomRight>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -189,141 +29,35 @@
|
|||
import { onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import option from "./option"
|
||||
import Remake from "@/components/Remake.vue"
|
||||
import { ref, reactive } from "vue"
|
||||
const loading = ref(true)
|
||||
import topLeft from "@/components/index/topLeft.vue"
|
||||
import topCenter from "@/components/index/topCenter.vue"
|
||||
import topRight from "@/components/index/topRight.vue"
|
||||
import bottomLeft from "@/components/index/bottomLeft.vue"
|
||||
import bottomCenter from "@/components/index/bottomCenter.vue"
|
||||
import bottomRight from "@/components/index/bottomRight.vue"
|
||||
|
||||
const i = 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231123//20231123190555159fa2259.jpg'
|
||||
const areaCodes = reactive({
|
||||
areaCode: 510524,
|
||||
streetCode: 510524100
|
||||
})
|
||||
|
||||
|
||||
const configs = reactive(
|
||||
{
|
||||
header: ['所属地区', '日订单数', '日订单金额', '月订单数', '月订单金额'],
|
||||
headerBGC: '#223B7E',
|
||||
rowNum: 10,
|
||||
data: [
|
||||
['行1列1', '行1列2', '行1列3', 'sad', 'asdsa'],
|
||||
['行2列1', '行2列2', '行2列3', 'sad', 'asdsa'],
|
||||
['行3列1', '行3列2', '行3列3', 'sad', 'asdsa'],
|
||||
['行4列1', '行4列2', '行4列3', 'sad', 'asdsa'],
|
||||
['行5列1', '行5列2', '行5列3', 'sad', 'asdsa'],
|
||||
['行6列1', '行6列2', '行6列3', 'sad', 'asdsa'],
|
||||
['行7列1', '行7列2', '行7列3', 'sad', 'asdsa'],
|
||||
['行8列1', '行8列2', '行8列3', 'sad', 'asdsa'],
|
||||
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
|
||||
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
|
||||
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
|
||||
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
|
||||
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
|
||||
['行9列1', '行9列2', '行9列3', 'sad', 'asdsa'],
|
||||
]
|
||||
}
|
||||
|
||||
)
|
||||
const configs2 = reactive(
|
||||
{
|
||||
header: ['所属片区', '当日订单金额', '昨日订单金额'],
|
||||
headerBGC: '#223B7E',
|
||||
align: ['center'],
|
||||
rowNum: 10,
|
||||
data: [
|
||||
['行1列1', '行1列2', '行1列3'],
|
||||
['行2列1', '行2列2', '行2列3'],
|
||||
['行3列1', '行3列2', '行3列3'],
|
||||
['行4列1', '行4列2', '行4列3'],
|
||||
['行5列1', '行5列2', '行5列3'],
|
||||
['行6列1', '行6列2', '行6列3'],
|
||||
['行7列1', '行7列2', '行7列3'],
|
||||
['行8列1', '行8列2', '行8列3'],
|
||||
['行9列1', '行9列2', '行9列3'],
|
||||
['行9列1', '行9列2', '行9列3'],
|
||||
['行9列1', '行9列2', '行9列3'],
|
||||
['行9列1', '行9列2', '行9列3'],
|
||||
['行9列1', '行9列2', '行9列3'],
|
||||
['行10列1', '行10列2', '行10列3']
|
||||
]
|
||||
}
|
||||
|
||||
)
|
||||
const config3 = reactive({
|
||||
oddRowBGC: "#001C2E",
|
||||
evenRowBGC: "#001C2E",
|
||||
columnWidth: [
|
||||
3, 3, 4, 10, 4
|
||||
],
|
||||
data: [
|
||||
[
|
||||
`<div style=" text-align: center;background-image: url('/static/index/PM1.png');width: 30px;height: 30px;background-size: cover;">1</div> `,
|
||||
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||
`<div>商品名称</div>`,
|
||||
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
],
|
||||
[` <div style=" text-align: center;background-image: url('/static/index/PM2.png');width: 30px;height: 30px;background-size: cover;"> 2</div> `,
|
||||
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||
`<div>商品名称</div>`,
|
||||
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
|
||||
],
|
||||
[` <div style=" text-align: center;background-image: url('/static/index/PM3.png');width: 30px;height: 30px;background-size: cover;">3</div> `,
|
||||
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||
`<div>商品名称</div>`,
|
||||
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
],
|
||||
[` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">4</div> `,
|
||||
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||
`<div>商品名称</div>`,
|
||||
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
],
|
||||
[` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">5</div> `,
|
||||
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||
`<div>商品名称</div>`,
|
||||
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
],
|
||||
[` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">6</div> `,
|
||||
`<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
|
||||
`<div>商品名称</div>`,
|
||||
`<div class="progress-bar"> <div class="progress"></div> </div>`,
|
||||
`<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
],
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
)
|
||||
const loading = ref(false)
|
||||
|
||||
|
||||
// 图表
|
||||
const initCharts = (tag, option) => {
|
||||
var chartDom = document.getElementById(tag);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// const initCharts = (tag, option) => {
|
||||
// var chartDom = document.getElementById(tag);
|
||||
// var myChart = echarts.init(chartDom);
|
||||
// myChart.setOption(option);
|
||||
// }
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
initCharts('user', option.userChartOption)
|
||||
// console.log(option.transactionUsers)
|
||||
|
||||
for (let i = 0; i < 16; i++) {
|
||||
initCharts('store' + i, option.storeNum)
|
||||
// initCharts('transactionUsers', option.transactionUsers)
|
||||
|
||||
}
|
||||
initCharts('transactionUsers', option.transactionUsers)
|
||||
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
// initCharts('user', option.userChartOption)
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
|
@ -353,66 +87,7 @@ onMounted(() => {
|
|||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.user {
|
||||
box-sizing: border-box;
|
||||
padding-top: 5vh;
|
||||
width: 100%;
|
||||
height: 58%;
|
||||
// background-color: #fff;
|
||||
|
||||
.btn {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.storeNum {
|
||||
width: 100%;
|
||||
height: 42%;
|
||||
// background-color: red;
|
||||
|
||||
.tit {
|
||||
height: 15%;
|
||||
// background-color: red;
|
||||
}
|
||||
|
||||
.townList {
|
||||
height: 75%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
|
||||
|
||||
.storebox {
|
||||
width: 22%;
|
||||
height: 40%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
|
||||
.store {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.toenName {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
|
||||
border-radius: 0 15px 15px 0;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
padding: 7px 2px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c {
|
||||
|
|
@ -423,59 +98,6 @@ onMounted(() => {
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.product-list {
|
||||
height: 70%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.product {
|
||||
height: 100%;
|
||||
width: 32%;
|
||||
position: relative;
|
||||
|
||||
.bg {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 12PX;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.product-icon {
|
||||
width: 2vw;
|
||||
height: 2vw;
|
||||
position: absolute;
|
||||
animation: jump 1s infinite;
|
||||
top: 2vh;
|
||||
}
|
||||
}
|
||||
|
||||
.Views {
|
||||
margin-top: 2%;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
|
||||
.view-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -484,74 +106,7 @@ onMounted(() => {
|
|||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.user {
|
||||
box-sizing: border-box;
|
||||
padding-top: 5vh;
|
||||
width: 100%;
|
||||
height: 57%;
|
||||
|
||||
.btns {
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.btn {
|
||||
margin-right: 1vw;
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid #2A538D;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.storeNum {
|
||||
width: 100%;
|
||||
height: 43%;
|
||||
|
||||
.tit {
|
||||
height: 15%;
|
||||
// background-color: red;
|
||||
}
|
||||
|
||||
.townList {
|
||||
height: 75%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
// padding: 10px;
|
||||
|
||||
|
||||
.storebox {
|
||||
width: 22%;
|
||||
height: 40%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
|
||||
.store {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.toenName {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
|
||||
border-radius: 0 15px 15px 0;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
padding: 7px 2px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -566,9 +121,6 @@ onMounted(() => {
|
|||
width: 25vw;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.c {
|
||||
|
|
@ -576,204 +128,12 @@ onMounted(() => {
|
|||
position: relative;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
// background: url('');
|
||||
|
||||
|
||||
.towns {
|
||||
width: 50vw;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 1vh 1vw;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.town-li {
|
||||
margin-top: 10px;
|
||||
color: #A0C7D5;
|
||||
padding: 5px 10px;
|
||||
border-radius: 7px 10px;
|
||||
font-size: 12px;
|
||||
border: 1px solid #3A91A5;
|
||||
background-color: #072C3E;
|
||||
// margin-left: 2vw;
|
||||
justify-content: fl;
|
||||
margin-left: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.r {
|
||||
width: 25vw;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
// background: url('');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.progress-bar {
|
||||
transform: translateY(12px);
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background-color: #122E3F;
|
||||
// border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #455CCC, #51C2E0);
|
||||
transition: width 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bubble1 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
left: 6.5vw;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1.5s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bubble2 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
left: 8.5vw;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1.25s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
@keyframes bubbleAnimation {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbleAnimation1 {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbleAnimation2 {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,18 +4,22 @@
|
|||
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<div class="content">
|
||||
<div class="btns">
|
||||
<div class="btn" @click="test">订单列表</div>
|
||||
<div class="btn" @click="test">退款单</div>
|
||||
<div class="btn" @click="test">核销订单</div>
|
||||
|
||||
|
||||
<div class="btn" :class="btnFlag[0] ? 'act-btn' : ''" @click="hdClick(0)">订单列表</div>
|
||||
<div class="btn" :class="btnFlag[1] ? 'act-btn' : ''" @click="hdClick(1)">退款单</div>
|
||||
<div class="btn" :class="btnFlag[2] ? 'act-btn' : ''" @click="hdClick(2)">核销订单</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="btn" @click="test">订单列表</div>
|
||||
<div class="btn" @click="test">退款单</div>
|
||||
<div class="btn" @click="test">核销订单</div>
|
||||
|
||||
<div v-show="btnFlag[0] || btnFlag[2]">
|
||||
<div style="color: white;display: flex;">
|
||||
<Bill v-for="(item, key) in billList" :key="index" :data="item"></Bill>
|
||||
|
||||
<div style="display: flex;margin-left: 5VW;" v-show="btnFlag[2]">
|
||||
<Bill v-for="(item, key) in billList1" :key="index" :data="item"></Bill>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table">
|
||||
<dv-scroll-board :config="configs" @click='tableHdClick' style="width:95vw;height:100%" />
|
||||
</div>
|
||||
|
|
@ -29,17 +33,58 @@
|
|||
<script setup>
|
||||
// 102B3
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { useRouter } from 'vue-router'
|
||||
const route = useRouter()
|
||||
import Bill from "@/components/Bill.vue"
|
||||
|
||||
const billList = reactive([
|
||||
{
|
||||
icon: "DD",
|
||||
text: "已支付订单数",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "JE",
|
||||
text: "实际支付金额",
|
||||
num: 1245
|
||||
}, {
|
||||
icon: "JE",
|
||||
text: "已退款金额",
|
||||
num: 1245
|
||||
},
|
||||
|
||||
])
|
||||
|
||||
const billList1 = reactive([
|
||||
{
|
||||
icon: "WX",
|
||||
text: "微信支付金额",
|
||||
num: 1245
|
||||
},
|
||||
{
|
||||
icon: "YE",
|
||||
text: "余额支付金额",
|
||||
num: 1245
|
||||
}, {
|
||||
icon: "ZFB",
|
||||
text: "支付宝支付金额",
|
||||
num: 1245
|
||||
},
|
||||
|
||||
])
|
||||
|
||||
|
||||
|
||||
|
||||
const btnFlag = reactive([true, false, false])
|
||||
const hdClick = (i) => {
|
||||
btnFlag.forEach((item, index) => {
|
||||
btnFlag[index] = false
|
||||
})
|
||||
btnFlag[i] = true
|
||||
|
||||
|
||||
const ShwostoreType = ref(false)
|
||||
const test = () => {
|
||||
console.log(6)
|
||||
}
|
||||
|
||||
const tableHdClick = (e) => {
|
||||
|
||||
|
||||
if (e.ceil) {
|
||||
if (e.columnIndex == 0) {
|
||||
// console.log(e.rowIndex)
|
||||
|
|
@ -275,30 +320,38 @@ onMounted(() => {
|
|||
|
||||
.btns {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
color: white;
|
||||
border: 1px solid #BF6D5D;
|
||||
padding: 3px 10px;
|
||||
// border: 1px solid #BF6D5D;
|
||||
background-image: url('static/index/btn.png');
|
||||
background-size: 100% 100%;
|
||||
padding: 1vh 1vw;
|
||||
border-radius: 20px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.act-btn {
|
||||
|
||||
background-image: url('/static/index/actbg.png');
|
||||
background-size: 100% 100%;
|
||||
border: none;
|
||||
// border-bottom: 6px solid #BF6D5D
|
||||
// border-bottom: 6px solid #BF6D5D;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 75vh;
|
||||
margin-top: 2vh;
|
||||
height: 70vh;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
}
|
||||
|
||||
.manageBtn {
|
||||
padding: 2px 10px;
|
||||
border: 1px solid #6377C8;
|
||||
border-radius: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
:deep(.ceil) {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -312,5 +365,6 @@ onMounted(() => {
|
|||
|
||||
|
||||
|
||||
|
||||
.row {}
|
||||
</style>
|
||||
|
|
@ -2,72 +2,118 @@
|
|||
<div class="top">
|
||||
|
||||
<div class="top-li">
|
||||
|
||||
<div class="top-bg">
|
||||
<img src="/static/storeLogin/top1.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<img src="/static/storeLogin/DCBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<img src="/static/storeLogin/icon1.png" class="product-icon" alt="">
|
||||
</div>
|
||||
<div class="top-content">
|
||||
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div>
|
||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;">
|
||||
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据：0.0</div>
|
||||
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比：0.0</div>
|
||||
<div style="margin-top: 13vh;font-size: 20px;">商 品 数 量</div>
|
||||
<div style="margin-top: 0.5vh;color: #5C7A88;">NUMBER OF COMMODITIES</div>
|
||||
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
||||
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">1234 <span style="font-size: 12px;">件</span>
|
||||
</div>
|
||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
||||
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：0.0</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
||||
<div style="color: #B7CED5;font-size: 10px; ">周环比：0.0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="top-li">
|
||||
<div class="top-bg">
|
||||
<img src="/static/storeLogin/top2.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<img src="/static/storeLogin/DCBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<img src="/static/storeLogin/icon2.png" class="product-icon" alt="">
|
||||
</div>
|
||||
<div class="top-content">
|
||||
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div>
|
||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;">
|
||||
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据：0.0</div>
|
||||
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比：0.0</div>
|
||||
<div style="margin-top: 13vh;font-size: 20px;">累 计 支 付 金 额</div>
|
||||
<div style="margin-top: 0.5vh;color: #5C7A88;">ACCOMULATED PAYMENT AMOUNT</div>
|
||||
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
||||
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">1234 <span style="font-size: 12px;">元</span>
|
||||
</div>
|
||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
||||
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：0.0</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
||||
<div style="color: #B7CED5;font-size: 10px; ">周环比：0.0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="top-li">
|
||||
<div class="top-bg">
|
||||
<img src="/static/storeLogin/top3.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<img src="/static/storeLogin/DCBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<img src="/static/storeLogin/icon2.png" class="product-icon" alt="">
|
||||
</div>
|
||||
<div class="top-content">
|
||||
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div>
|
||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;">
|
||||
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据：0.0</div>
|
||||
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比：0.0</div>
|
||||
<div style="margin-top: 13vh;font-size: 20px;">累 计 支 付 人 数</div>
|
||||
<div style="margin-top: 0.5vh;color: #5C7A88;">ACCOMULATED NUMBER OF PAYMENTS</div>
|
||||
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
||||
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">1234 <span style="font-size: 12px;">人</span>
|
||||
</div>
|
||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
||||
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：0.0</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
||||
<div style="color: #B7CED5;font-size: 10px; ">周环比：0.0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-li">
|
||||
<div class="top-bg">
|
||||
<img src="/static/storeLogin/top4.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<img src="/static/storeLogin/icon3.png" class="product-icon" alt="">
|
||||
<img src="/static/storeLogin/DCBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<img src="/static/storeLogin/icon3.png" class="product-icon" style="width: 40px;height: 25px;" alt="">
|
||||
</div>
|
||||
<div class="top-content">
|
||||
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div>
|
||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;">
|
||||
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据：0.0</div>
|
||||
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比：0.0</div>
|
||||
<div style="margin-top: 13vh;font-size: 20px;">累 计 访 客 人 数</div>
|
||||
<div style="margin-top: 0.5vh;color: #5C7A88;">ACCOMULATED NUMBER OF VISITORS</div>
|
||||
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
||||
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">1234 <span style="font-size: 12px;">人</span>
|
||||
</div>
|
||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
||||
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：0.0</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
||||
<div style="color: #B7CED5;font-size: 10px; ">周环比：0.0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-li">
|
||||
<div class="top-bg">
|
||||
|
||||
<img src="/static/storeLogin/top5.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<img src="/static/storeLogin/DCBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<img src="/static/storeLogin/icon4.png" class="product-icon" alt="">
|
||||
</div>
|
||||
<div class="top-content">
|
||||
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div>
|
||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;">
|
||||
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据：0.0</div>
|
||||
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比：0.0</div>
|
||||
<div style="margin-top: 13vh;font-size: 20px;">关 注 店 铺 数 量</div>
|
||||
<div style="margin-top: 0.5vh;color: #5C7A88;">NUMBER OF FOLLOWING SHOPS</div>
|
||||
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
||||
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">1234 <span style="font-size: 12px;">个</span>
|
||||
</div>
|
||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
||||
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：0.0</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
||||
<div style="color: #B7CED5;font-size: 10px; ">周环比：0.0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -105,7 +151,7 @@ const config1 = reactive({
|
|||
rowNum: 9,
|
||||
|
||||
columnWidth: [
|
||||
3, 3, 5, 20, 5
|
||||
50, 50, 200, 200, 115
|
||||
],
|
||||
data: []
|
||||
}
|
||||
|
|
@ -114,9 +160,8 @@ const config2 = reactive({
|
|||
oddRowBGC: "#001C2E",
|
||||
evenRowBGC: "#001C2E",
|
||||
rowNum: 9,
|
||||
|
||||
columnWidth: [
|
||||
3, 3, 5, 20, 5
|
||||
50, 50, 200, 200, 115
|
||||
],
|
||||
data: []
|
||||
}
|
||||
|
|
@ -127,7 +172,7 @@ const config3 = reactive({
|
|||
rowNum: 9,
|
||||
|
||||
columnWidth: [
|
||||
3, 3, 5, 20, 5
|
||||
50, 50, 200, 200, 115
|
||||
],
|
||||
data: []
|
||||
}
|
||||
|
|
@ -144,11 +189,13 @@ onMounted(() => {
|
|||
for (let i = 0; i < 20; i++) {
|
||||
config3.data.push(
|
||||
[
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) < 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>商asdasdasdssadasdasdasd品名称</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
`<div style=' position: relative;line-height:30px;text-align:center;' >5495 <span style='font-size:10px'>单</span>
|
||||
<img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
|
||||
</div>`,
|
||||
|
||||
],
|
||||
|
||||
|
|
@ -158,11 +205,13 @@ onMounted(() => {
|
|||
for (let i = 0; i < 20; i++) {
|
||||
config1.data.push(
|
||||
[
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) < 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #0292EB, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
`<div style=' position: relative;line-height:30px;text-align:center' >5495 <span style='font-size:10px'>单</span>
|
||||
<img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
|
||||
</div>`,
|
||||
|
||||
],
|
||||
|
||||
|
|
@ -171,11 +220,13 @@ onMounted(() => {
|
|||
} for (let i = 0; i < 20; i++) {
|
||||
config2.data.push(
|
||||
[
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) < 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #B15641, #52C8E1);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
`<div style=' position: relative;line-height:30px;text-align:center' >5495 <span style='font-size:10px'>单</span>
|
||||
<img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
|
||||
</div>`,
|
||||
|
||||
],
|
||||
|
||||
|
|
@ -216,6 +267,7 @@ onMounted(() => {
|
|||
align-items: center;
|
||||
// color: red;
|
||||
|
||||
|
||||
.top-li {
|
||||
width: 20%;
|
||||
height: 37vh;
|
||||
|
|
@ -230,6 +282,7 @@ onMounted(() => {
|
|||
.top-content {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.product-icon {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
<template>
|
||||
<div class="top box">
|
||||
|
||||
|
||||
<div class="l">
|
||||
<img class="img-cls" src="/static/town/YHSJ.png" alt="">
|
||||
<div class="user center" id="user"></div>
|
||||
</div>
|
||||
<div class="c" id="">
|
||||
<div class="product-list">
|
||||
|
||||
<topCenter :code="route.query.code"></topCenter>
|
||||
|
||||
<!-- <div class="product-list">
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
|
|
@ -18,7 +22,7 @@
|
|||
<div class="product-content">
|
||||
<div style="margin-top: 14vh;position: relative;">商 品 总 数</div>
|
||||
<div style="font-size: 10px;">NUMBER OF COMMODITIES</div>
|
||||
<div style="position: relative; text-align: center;margin-top: 3.5vh;">今日</div>
|
||||
<img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
||||
<div style="margin-top: 2vh;position: relative;"> <span
|
||||
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||
|
|
@ -37,7 +41,7 @@
|
|||
</div>
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SPBGZ.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
|
|
@ -46,7 +50,8 @@
|
|||
<div class="product-content">
|
||||
<div style="margin-top: 14vh;position: relative;">新 商 品 总 数</div>
|
||||
<div style="font-size: 10px;">NUMBER OF NEW SHOPS</div>
|
||||
<div style="position: relative; text-align: center;margin-top: 3.5vh;">今日</div>
|
||||
<img src="/static/index/JRC.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
||||
|
||||
<div style="margin-top: 2vh;position: relative;"> <span
|
||||
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||
|
|
@ -65,7 +70,7 @@
|
|||
</div>
|
||||
<div class="product" style="">
|
||||
<div class="bg">
|
||||
<img src="/static/index/SPBGR.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
|
||||
<img src="/static/index/SPTB.png" class="product-icon" alt="">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble1"></div>
|
||||
|
|
@ -74,7 +79,7 @@
|
|||
<div class="product-content">
|
||||
<div style="margin-top: 14vh;position: relative;">累 计 店 铺 总 数</div>
|
||||
<div style="font-size: 10px;">ACCUMULATED NUMBERS OF SHOPS</div>
|
||||
<div style="position: relative; text-align: center;margin-top: 3.5vh;">今日</div>
|
||||
<img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
|
||||
<div style="margin-top: 2vh;position: relative;"> <span
|
||||
style="color: #9DD2E0;font-size: 16px;">1234</span> 件</div>
|
||||
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
|
||||
|
|
@ -98,11 +103,11 @@
|
|||
<div class="view-content">
|
||||
<div>昨日数据：3333</div>
|
||||
<div style="display: flex;align-items: center;">当前浏览量：
|
||||
<Remake /> 人正在浏览
|
||||
<Remake :num="517854" /> 人正在浏览
|
||||
</div>
|
||||
<div>周环比：32%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="r">
|
||||
|
|
@ -134,24 +139,14 @@
|
|||
<div class="l">
|
||||
<div class="user center" id="orderAmount"></div>
|
||||
<img class="img-cls" src="/static/town/DRDDJE.png" alt="">
|
||||
<!-- <bottomleft></bottomleft> -->
|
||||
</div>
|
||||
<div class="c">
|
||||
<img class="img-cls" src="/static/town/CJYH.png" alt="">
|
||||
<div id="transactionUsers" class="transactionUsers"></div>
|
||||
</div>
|
||||
<div class="r">
|
||||
|
||||
<img class="img-cls" src="/static/town/PHBSJ.png" alt="">
|
||||
<div class="user">
|
||||
<div class="btns">
|
||||
<span class="btn">店铺销量排行</span>
|
||||
<span class="btn">店铺销量排行</span>
|
||||
|
||||
</div>
|
||||
|
||||
<dv-scroll-board :config="config3" class="list" />
|
||||
</div>
|
||||
|
||||
<bottomRight></bottomRight>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -162,81 +157,44 @@ import * as echarts from 'echarts';
|
|||
import option from "./option"
|
||||
import { ref, reactive } from "vue"
|
||||
import Remake from "@/components/Remake.vue"
|
||||
const config3 = reactive({
|
||||
oddRowBGC: "#001C2E",
|
||||
evenRowBGC: "#001C2E",
|
||||
columnWidth: [
|
||||
2, 3, 4, 10, 3
|
||||
],
|
||||
data: [
|
||||
[
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM1.png');width: 30px;height: 30px;background-size: cover;" >1</div> `,
|
||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
import bottomRight from "@/components/townDetail/bottomRight.vue"
|
||||
import bottomleft from "@/components/townDetail/bottomleft.vue"
|
||||
import { getProductCountApi } from "@/api.js"
|
||||
import { useRoute } from 'vue-router';
|
||||
import topCenter from "@/components/townDetail/topCenter.vue"
|
||||
|
||||
],
|
||||
[
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM2.png');width: 30px;height: 30px;background-size: cover;" >2</div> `,
|
||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
],
|
||||
[
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM3.png');width: 30px;height: 30px;background-size: cover;" >3</div> `,
|
||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
],
|
||||
[
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >4</div> `,
|
||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
const route = useRoute()
|
||||
|
||||
],
|
||||
[
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >5</div> `,
|
||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
],
|
||||
[
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >6</div> `,
|
||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
], [
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >7</div> `,
|
||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
], [
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;" >8</div> `,
|
||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
|
||||
|
||||
],
|
||||
|
||||
]
|
||||
|
||||
|
||||
const addFn = (data) => {
|
||||
let list = []
|
||||
data.forEach((item, i) => {
|
||||
list.push(
|
||||
[
|
||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||
`<div style='background:red;position:relative'><img src="${item.image || item.mini_banner}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name || item.mer_name}</div>`,
|
||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: ${item.store_name ? (item.total_sales / productRankingTotal.value).toFixed(2) * 100 : (item.total_sales / townProductCount.value).toFixed(2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||
`<div style=' position: relative;line-height:30px;text-align:center' >${item.total_sales} <span style='font-size:10px'>单</span>
|
||||
<img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
|
||||
</div>`,
|
||||
|
||||
],
|
||||
|
||||
|
||||
)
|
||||
})
|
||||
return list
|
||||
}
|
||||
|
||||
)
|
||||
|
||||
// 图表
|
||||
const initCharts = (tag, option) => {
|
||||
var chartDom = document.getElementById(tag);
|
||||
|
|
@ -301,6 +259,7 @@ onMounted(() => {
|
|||
width: 98%;
|
||||
height: 35vh;
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -409,9 +368,11 @@ onMounted(() => {
|
|||
// background-color: green;
|
||||
display: flex;
|
||||
padding-top: 1vh;
|
||||
justify-content: space-between;
|
||||
|
||||
.l {
|
||||
flex: 1;
|
||||
// flex: 1;
|
||||
width: 25VW;
|
||||
height: 46vh;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -428,7 +389,8 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.c {
|
||||
flex: 2;
|
||||
width: 48VW;
|
||||
|
||||
height: 46vh;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -443,41 +405,11 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.r {
|
||||
flex: 1;
|
||||
width: 25VW;
|
||||
|
||||
height: 46vh;
|
||||
position: relative;
|
||||
|
||||
.user {
|
||||
box-sizing: border-box;
|
||||
// padding-top: 5vh;
|
||||
width: 100%;
|
||||
// height: 46vh;
|
||||
margin-top: 7vh;
|
||||
height: 38vh;
|
||||
|
||||
.btns {
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 2vh;
|
||||
|
||||
.btn {
|
||||
margin-right: 1vw;
|
||||
font-size: 12px;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid #2A538D;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
|
||||
// background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1vw 50px 1vw;
|
||||
height: 34vh;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -513,151 +445,4 @@ onMounted(() => {
|
|||
background: linear-gradient(to right, #455CCC, #51C2E0);
|
||||
transition: width 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bubble1 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
left: 6.5vw;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1.5s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bubble2 {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 7vh;
|
||||
left: 8.5vw;
|
||||
animation-name: bubbleAnimation;
|
||||
animation-duration: 1.25s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
@keyframes bubbleAnimation {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbleAnimation1 {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbleAnimation2 {
|
||||
0% {
|
||||
top: 7vh;
|
||||
// opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 6.5vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.55);
|
||||
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 6vh;
|
||||
opacity: 1;
|
||||
transform: scale(0.5);
|
||||
|
||||
// left: 5vw;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
top: 5vh;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
top: 4vh;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
|
||||
import axios from 'axios'
|
||||
|
||||
export default function MapLoader() {
|
||||
let aMapScript = document.createElement('script')
|
||||
aMapScript.setAttribute('src', 'https://webapi.amap.com/maps?v=1.4.11&key=03b97ed9755be7c6b9842840dc6ddc88&plugin=AMap.CitySearch')
|
||||
document.head.appendChild(aMapScript)
|
||||
|
||||
// return new Promise((reslove, reject) => {
|
||||
return new Promise((reslove, reject) => {
|
||||
aMapScript.onload = function () {
|
||||
AMap.plugin('AMap.Geolocation', function () {
|
||||
var geolocation = new AMap.Geolocation({
|
||||
// 是否使用高精度定位，默认：true
|
||||
enableHighAccuracy: true,
|
||||
// 设置定位超时时间，默认：无穷大
|
||||
timeout: 10000,
|
||||
// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
|
||||
buttonOffset: new AMap.Pixel(10, 20),
|
||||
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
|
||||
zoomToAccuracy: true,
|
||||
// 定位按钮的排放位置, RB表示右下
|
||||
buttonPosition: 'RB'
|
||||
})
|
||||
|
||||
geolocation.getCurrentPosition()
|
||||
AMap.event.addListener(geolocation, 'complete', onComplete)
|
||||
AMap.event.addListener(geolocation, 'error', onError)
|
||||
|
||||
function onComplete(data) {
|
||||
|
||||
// data是具体的定位信息
|
||||
let lat = data.position.lat
|
||||
let lng = data.position.lng
|
||||
axios.get(`https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${lng},${lat}&key=b0c21bc6b220aa882bad8ffb6bce8829&radius=1000&extensions=all`)
|
||||
.then(function (response) {
|
||||
reslove(response.data.regeocode);
|
||||
|
||||
})
|
||||
.catch(function (error) {
|
||||
// 处理错误情况
|
||||
console.log(error);
|
||||
})
|
||||
.finally(function () {
|
||||
// 总是会执行
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function onError(data) {
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
// 基准大小
|
||||
const baseSize = 37.5
|
||||
// 设置 rem 函数
|
||||
function setRem() {
|
||||
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
|
||||
const scale = document.documentElement.clientWidth / 750
|
||||
// 设置页面根节点字体大小
|
||||
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
|
||||
}
|
||||
// 初始化
|
||||
setRem()
|
||||
// 改变窗口大小时重新设置 rem
|
||||
window.onresize = function () {
|
||||
setRem()
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 623 B |
Binary file not shown.
|
After Width: | Height: | Size: 567 B |
Binary file not shown.
|
After Width: | Height: | Size: 582 B |
Binary file not shown.
|
After Width: | Height: | Size: 709 B |
Binary file not shown.
|
After Width: | Height: | Size: 560 B |
Binary file not shown.
|
After Width: | Height: | Size: 709 B |
Binary file not shown.
|
After Width: | Height: | Size: 359 B |
Binary file not shown.
|
After Width: | Height: | Size: 364 B |
Binary file not shown.
|
After Width: | Height: | Size: 796 B |
Binary file not shown.
|
After Width: | Height: | Size: 762 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 488 B |
Binary file not shown.
|
After Width: | Height: | Size: 442 B |
Binary file not shown.
|
After Width: | Height: | Size: 628 B |
Binary file not shown.
|
After Width: | Height: | Size: 709 B |
Binary file not shown.
|
After Width: | Height: | Size: 816 B |
Binary file not shown.
|
After Width: | Height: | Size: 649 B |
BIN
static/a/bg.png
BIN
static/a/bg.png
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 225 B |
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 941 B |
Binary file not shown.
|
After Width: | Height: | Size: 680 B |
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
|
|
@ -1,19 +1,30 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import path from 'path'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
import postCssPxToRem from 'postcss-pxtorem'
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: { // ← ← ← ← ← ←
|
||||
host: '0.0.0.0' // ← 新增内容 ←
|
||||
},
|
||||
resolve:{
|
||||
resolve: {
|
||||
//别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src')
|
||||
},
|
||||
},
|
||||
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
postCssPxToRem({
|
||||
rootValue: 192,
|
||||
propList: ['*'],
|
||||
})
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
optimizeDeps: {
|
||||
// 开发时 解决这些commonjs包转成esm包
|
||||
include: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue