This commit is contained in:
zmj 2023-12-07 19:05:27 +08:00
parent b712808634
commit 41eb587026
72 changed files with 30209 additions and 1116 deletions

View File

@ -11,3 +11,5 @@
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=b0c21bc6b220aa882bad8ffb6bce8829"></script>

153
package-lock.json generated
View File

@ -10,12 +10,16 @@
"dependencies": { "dependencies": {
"@dataview/datav-vue3": "^0.0.0-test.1672506674342", "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
"@jiaminghi/data-view": "^2.10.0", "@jiaminghi/data-view": "^2.10.0",
"amfe-flexible": "^2.2.1",
"axios": "^1.6.2",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"postcss-pxtorem": "^5.1.1",
"vue": "^3.3.8", "vue": "^3.3.8",
"vue-router": "^4.2.5" "vue-router": "^4.2.5"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^4.5.0", "@vitejs/plugin-vue": "^4.5.0",
"postcss-pxtorem": "^6.0.0",
"sass": "^1.69.5", "sass": "^1.69.5",
"sass-loader": "^13.3.2", "sass-loader": "^13.3.2",
"vite": "^5.0.0" "vite": "^5.0.0"
@ -1066,6 +1070,11 @@
"ajv": "^6.9.1" "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": { "node_modules/anymatch": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz", "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
@ -1079,6 +1088,21 @@
"node": ">= 8" "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": { "node_modules/binary-extensions": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz", "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", "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" "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": { "node_modules/commander": {
"version": "2.20.3", "version": "2.20.3",
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz", "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", "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" "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": { "node_modules/echarts": {
"version": "5.4.3", "version": "5.4.3",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz", "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
@ -1353,6 +1396,32 @@
"node": ">=8" "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": { "node_modules/fsevents": {
"version": "2.3.3", "version": "2.3.3",
"resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz", "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
@ -1517,8 +1586,6 @@
"version": "1.52.0", "version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz", "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true,
"peer": true,
"engines": { "engines": {
"node": ">= 0.6" "node": ">= 0.6"
} }
@ -1527,8 +1594,6 @@
"version": "2.1.35", "version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz", "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"peer": true,
"dependencies": { "dependencies": {
"mime-db": "1.52.0" "mime-db": "1.52.0"
}, },
@ -1596,6 +1661,20 @@
"node": "^10 || ^12 || >=14" "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": { "node_modules/punycode": {
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz", "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
@ -2792,6 +2871,11 @@
"peer": true, "peer": true,
"requires": {} "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": { "anymatch": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz", "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
@ -2802,6 +2886,21 @@
"picomatch": "^2.0.4" "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": { "binary-extensions": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz", "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", "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" "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": { "commander": {
"version": "2.20.3", "version": "2.20.3",
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz", "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", "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" "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": { "echarts": {
"version": "5.4.3", "version": "5.4.3",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz", "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
@ -3027,6 +3139,21 @@
"to-regex-range": "^5.0.1" "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": { "fsevents": {
"version": "2.3.3", "version": "2.3.3",
"resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz", "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
@ -3156,16 +3283,12 @@
"mime-db": { "mime-db": {
"version": "1.52.0", "version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz", "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
"dev": true,
"peer": true
}, },
"mime-types": { "mime-types": {
"version": "2.1.35", "version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz", "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"peer": true,
"requires": { "requires": {
"mime-db": "1.52.0" "mime-db": "1.52.0"
} }
@ -3215,6 +3338,18 @@
"source-map-js": "^1.0.2" "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": { "punycode": {
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz", "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",

View File

@ -11,12 +11,16 @@
"dependencies": { "dependencies": {
"@dataview/datav-vue3": "^0.0.0-test.1672506674342", "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
"@jiaminghi/data-view": "^2.10.0", "@jiaminghi/data-view": "^2.10.0",
"amfe-flexible": "^2.2.1",
"axios": "^1.6.2",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"postcss-pxtorem": "^5.1.1",
"vue": "^3.3.8", "vue": "^3.3.8",
"vue-router": "^4.2.5" "vue-router": "^4.2.5"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^4.5.0", "@vitejs/plugin-vue": "^4.5.0",
"postcss-pxtorem": "^6.0.0",
"sass": "^1.69.5", "sass": "^1.69.5",
"sass-loader": "^13.3.2", "sass-loader": "^13.3.2",
"vite": "^5.0.0" "vite": "^5.0.0"

View File

Before

Width:  |  Height:  |  Size: 496 B

After

Width:  |  Height:  |  Size: 496 B

View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
// @ts-ignore // @ts-ignore
import Header from "@/components/Header.vue" import Header from "@/components/Header.vue"
const zz3 = 565
@ -13,6 +14,8 @@ import Header from "@/components/Header.vue"
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
@import '/static/font/font.css'; @import '/static/font/font.css';

69
src/api.js Normal file
View File

@ -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

25
src/components/Bill.vue Normal file
View File

@ -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>

View File

@ -1,5 +1,6 @@
<template> <template>
<div class="chartNum" style="margin: 0 20px;"> <div class="chartNum" style="margin: 0 20px;">
<div class="box-item"> <div class="box-item">
<li :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }" v-for="(item, index) in orderNum" <li :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }" v-for="(item, index) in orderNum"
:key="index"> :key="index">
@ -13,6 +14,7 @@
</template> </template>
<script> <script>
export default { export default {
props: ['num'],
data() { data() {
return { return {
orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], //
@ -21,7 +23,7 @@ export default {
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.toOrderNum(656656) // this.toOrderNum(this.num) //
}, 500); }, 500);
}, },

View File

@ -1,26 +1,53 @@
<template> <template>
<Transition> <Transition>
<div class="address" v-if="props.choseArea"> <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> </div>
</Transition> </Transition>
</template> </template>
<script setup> <script setup>
import { defineProps, defineEmits } from "vue" import { defineProps, defineEmits, onMounted, reactive } from "vue"
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import axios from "axios"
const router = useRouter() const router = useRouter()
const emit = defineEmits(['offAreaList']) const emit = defineEmits(['offAreaList'])
const props = defineProps({ const props = defineProps({
choseArea: Boolean, choseArea: Boolean,
}) })
let areaList = reactive([])
// //
const choseTownFn = (id) => { const choseTownFn = (id, name) => {
props.choseArea = false props.choseArea = false
emit('offAreaList') emit('offAreaList', name)
router.replace('/townDetail?id=' + id)
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> </script>

View File

@ -35,10 +35,15 @@
alt=""> alt="">
</div> </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>
<div class="right"> <div class="right">
<div class="rigth-li" @click="choseArea = true"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;" <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> </div>
<areaList :choseArea="choseArea" @offAreaList="offAreaList"></areaList> <areaList :choseArea="choseArea" @offAreaList="offAreaList"></areaList>
<div class="right-line"> <div class="right-line">
@ -69,13 +74,30 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted } from "vue" import { ref, reactive, onMounted, watch } from "vue"
import areaList from "./areaList.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) => { const u = (name) => {
return `/static/index/${name}.png` 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]) const show = reactive([false, true, true, true, true])
@ -84,25 +106,56 @@ const showFn = (index, src) => {
show[i] = true show[i] = true
}) })
show[index] = !show[index] 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 choseArea = ref(false)
// //
const offAreaList = () => { const offAreaList = (name) => {
choseArea.value = false choseArea.value = false
area.value = name
} }
const out = () => { const out = () => {
//@ts-ignore //@ts-ignore
window.open("about:blank", "_top").close() window.open("about:blank", "_top").close()
//@ts-ignore
// window.open('file:///C:\WINDOWS\system32\Shutdown.exe-r', 'File')
} }
const updateTime = () => { const updateTime = () => {
var date = new Date(); var date = new Date();
var hours = date.getHours(); var hours = date.getHours();
@ -121,20 +174,20 @@ const updateTime = () => {
seconds = (seconds < 10 ? "0" : "") + seconds; seconds = (seconds < 10 ? "0" : "") + seconds;
var currentTime = hours + ":" + minutes + ":" + 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) // alert(days)
// DOM // DOM
document.getElementById("time").innerHTML = currentTime; document.getElementById("time").innerHTML = currentTime;
document.getElementById("days").innerHTML = currentDays; document.getElementById("days").innerHTML = currentDays;
} }
onMounted(() => { onMounted(() => {
setInterval(updateTime, 1000) setInterval(updateTime, 1000)
MapLoader().then(res => {
area.value = res.addressComponent.district
})
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -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>

View File

@ -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: [
// ['11', '12', '13', '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>

View File

@ -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>

View File

@ -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="">
&nbsp;
昨日数据 {{ 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="">
&nbsp;
周环比: {{ 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="">
&nbsp;
昨日数据 {{ 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="">
&nbsp;
周环比: {{ 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="">
&nbsp;
昨日数据 {{ 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="">
&nbsp;
周环比: {{ 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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

@ -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="">
&nbsp;
昨日数据 {{ 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="">
&nbsp;
周环比: {{ 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="">
&nbsp;
昨日数据 {{ 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="">
&nbsp;
周环比: {{ 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="">
&nbsp;
昨日数据
{{ 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="">
&nbsp;
周环比: {{ 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>

View File

@ -0,0 +1 @@
export const VERSION = '#VERSION#'

View File

@ -1,10 +1,10 @@
import { createApp } from 'vue' import { createApp } from 'vue'
// import './style.css'
import App from './App.vue' import App from './App.vue'
import dataV from '@jiaminghi/data-view' import dataV from '@jiaminghi/data-view'
// import DataV, { setClassNamePrefix } from '@dataview/datav-vue3';
import router from "./router"; import router from "./router";
// import '@/components/townDetail/test.js'
import 'amfe-flexible'
const app = createApp(App) const app = createApp(App)
app.use(router) app.use(router)

View File

@ -4,11 +4,9 @@
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt=""> <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<div class="content"> <div class="content">
<div class="btns"> <div class="btns">
<div class="btn" @click="test">正常开启的商户</div> <div class="btn " :class="ShwostoreType ? 'act-btn' : ''" @click="ShwostoreType = true">正常开启的商户</div>
<div class="btn" @click="test">已关闭的商户</div> <div class="btn" :class="!ShwostoreType ? 'act-btn' : ''" @click="ShwostoreType = false">已关闭的商户</div>
</div> </div>
<div class="table"> <div class="table">
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" /> <dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
</div> </div>
@ -25,7 +23,7 @@ import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const route = useRouter() const route = useRouter()
const ShwostoreType = ref(false) const ShwostoreType = ref(true)
const test = () => { const test = () => {
console.log(6) console.log(6)
} }
@ -135,13 +133,28 @@ onMounted(() => {
.btns { .btns {
display: flex; display: flex;
position: relative;
.btn { .btn {
color: white; color: white;
border: 1px solid #BF6D5D; // border: 1px solid #BF6D5D;
padding: 3px 10px; background-image: url('static/index/btn.png');
background-size: 100% 100%;
padding: 1vh 1vw;
border-radius: 20px; border-radius: 20px;
margin-right: 10px; 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;
} }
} }

View File

@ -3,35 +3,19 @@
<div class="img-cls"> <div class="img-cls">
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;z-index: -10000;" alt=""> <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;z-index: -10000;" alt="">
<div class="content"> <div class="content">
<div class="btns" style="position: absolute;"> <div class="btns">
<!-- <div class="btn" @click="ShwostoreType = true">商品分类</div> <div class="btn " :class="ShwostoreType ? 'act-btn' : ''" @click="ShwostoreType = true">商品分类</div>
<div class="btn" @click="ShwostoreType = false">商品管理 <div class="btn" :class="!ShwostoreType ? 'act-btn' : ''" @click="ShwostoreType = false">商品管理</div>
</div> --> <!-- <img src="/static/index/actbg.png" alt=""> -->
<!-- <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> </div>
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;" <div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
v-if="!ShwostoreType"> 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 class="manageBtn">待审核商品</div>
<div class="manageBtn">审核未通过商品</div> <div class="manageBtn">审核未通过商品</div>
</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%" /> <dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
</div> </div>
<div class="table" v-else> <div class="table" v-else>
@ -46,11 +30,25 @@
<script setup> <script setup>
// 102B3 // 102B3
import { ref, reactive, onMounted } from "vue" 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) => { const tableClick = (e) => {
// console.log(i)
if (e.ceil) { if (e.ceil) {
if (e.columnIndex == 1) { if (e.columnIndex == 1) {
@ -78,9 +76,9 @@ const hdClick = (b) => {
console.log(b) console.log(b)
} }
const a = (aaa) => { const a = (aaa, data) => {
if (aaa == configs2) { if (aaa == configs2) {
for (let i = 0; i < 10; i++) { data.forEach((item, i) => {
if (i % 2 == 0) { if (i % 2 == 0) {
aaa.data.push( 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>`,
`<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 { else {
for (let i = 0; i < 10; i++) { data.forEach((item, i) => {
if (i % 2 == 0) { if (i % 2 == 0) {
aaa.data.push( 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;'>${i + 1}</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;' >${item.cate_name}</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;dislay:flex;align-items:center'>
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`, <img src='${item.pic}' style='width:25px;height:25px;margin-top:5px'>
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</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;'>${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 { } else {
aaa.data.push( 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;'>${i + 1}</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;'>${item.cate_name}</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;dislay:flex;align-items:center'>
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`, <img src='${item.pic}' style='width:25px;height:25px;margin-top:5px'>
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</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;'>${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: "", evenRowBGC: "",
rowNum: 20, rowNum: 20,
header: [ 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>`, `<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: [ data: [
] ]
@ -181,6 +179,7 @@ const configs2 = reactive({
evenRowBGC: "", evenRowBGC: "",
rowNum: 20, rowNum: 20,
header: [ 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);'>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>`,
`<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>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>更新时间</div>`,
], ],
data: [ data: [
] ]
}) })
onMounted(() => { onMounted(() => {
a(configs2) // a(configs2)
a(configs) // a(configs)
}) })
</script> </script>
@ -219,6 +221,7 @@ onMounted(() => {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
// background-color: #fff; // background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
// position: absolute;
.content { .content {
width: 100%; width: 100%;
@ -235,29 +238,51 @@ onMounted(() => {
.btn { .btn {
color: white; color: white;
// border: 1px solid #BF6D5D; // border: 1px solid #BF6D5D;
padding: 3px 10px; background-image: url('static/index/btn.png');
background-size: 100% 100%;
padding: 1vh 1vw;
border-radius: 20px; border-radius: 20px;
margin-right: 10px; margin-right: 10px;
position: relative; cursor: pointer;
// background-image: url(''); font-size: 14px;
// background-size: cover; }
.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 { .table {
width: 100%; width: 100%;
height: 75vh; height: 75vh;
margin-top: 5vh; margin-top: 2vh;
} }
} }
.manageBtn { .manageBtn {
padding: 2px 10px; padding: 0.75vh 0.75vw;
border: 1px solid #6377C8;
border-radius: 20px; border-radius: 20px;
margin-right: 10px; 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) { :deep(.ceil) {
padding: 0 !important; padding: 0 !important;
margin-bottom: 5px; margin-bottom: 5px;

View File

@ -4,11 +4,23 @@
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt=""> <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<div class="content"> <div class="content">
<div class="btns"> <div class="btns">
<div class="btn" @click="changeTable(0)">提现记录</div> <div style="display: flex;">
<div class="btn" @click="changeTable(1)">资金记录</div> <div class="btn" :class="headerIndex == 0 ? 'act-btn' : ''" @click="changeTable(0)">提现记录</div>
<div class="btn" @click="changeTable(2)">账单管理</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>
<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"> <div class="table" v-if="true">
<dv-scroll-board :config="configs" v-if="headerIndex == 0" @click='hdClick' <dv-scroll-board :config="configs" v-if="headerIndex == 0" @click='hdClick'
@ -19,7 +31,6 @@
</div> </div>
<Transition> <Transition>
<div class="pop" v-if="showPop"> <div class="pop" v-if="showPop">
<img src="/static/finance/TC.png" alt="" <img src="/static/finance/TC.png" alt=""
style="width: 35vw;height: 40vh;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"> style="width: 35vw;height: 40vh;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
@ -107,7 +118,6 @@
</div> </div>
</div> </div>
</div> </div>
</Transition> </Transition>
@ -121,6 +131,85 @@
// 102B3 // 102B3
import { ref, reactive, onMounted } from "vue" import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router' 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 route = useRouter()
const ShwostoreType = ref(false) const ShwostoreType = ref(false)
const changeTable = (type) => { const changeTable = (type) => {
@ -316,30 +405,64 @@ onMounted(() => {
z-index: 999999; z-index: 999999;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
justify-content: space-between;
.btn { .btn {
color: white; color: white;
border: 1px solid #BF6D5D; // border: 1px solid #BF6D5D;
padding: 3px 10px; background-image: url('static/index/btn.png');
background-size: 100% 100%;
padding: 1vh 1vw;
border-radius: 20px; border-radius: 20px;
margin-right: 10px; 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 { .table {
width: 100%; width: 100%;
height: 79vh; height: 60vh;
margin-top: 2vh; margin-top: 2vh;
} }
} }
.manageBtn { .manageBtn {
padding: 2px 10px; padding: 0.75vh 0.75vw;
border: 1px solid #6377C8;
border-radius: 20px; border-radius: 20px;
margin-right: 10px; 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) { :deep(.ceil) {
padding: 0 !important; padding: 0 !important;
margin-bottom: 5px; margin-bottom: 5px;

View File

@ -1,185 +1,25 @@
<template> <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="box" :style="{ opacity: loading ? 0 : 1 }">
<div class="body"> <div class="body">
<div class="l"> <div class="l">
<img src="/static/index/PTYHL.png" style="position: absolute;width: 100%;height: 100%; " alt=""> <topLeft :areaCodes="areaCodes" />
<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>
</div>
</div>
<div class="c" id=""> <div class="c" id="">
<div class="product-list"> <topCenter :areaCodes="areaCodes"></topCenter>
<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>
<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="">
&nbsp;
昨日数据 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="">
&nbsp;
周环比: 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="">
&nbsp;
昨日数据 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="">
&nbsp;
周环比: 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="">
&nbsp;
昨日数据 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="">
&nbsp;
周环比: 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>
</div>
<div class="r"> <div class="r">
<img src="/static/index/PTSP.png" style="position: absolute;width: 100%;height: 100%; " alt=""> <topRight :areaCodes="areaCodes"></topRight>
<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>
</div> </div>
</div> </div>
<div class="foot"> <div class="foot">
<div class="foot-l"> <div class="foot-l">
<img src="/static/index/DDSJ.png" style="position: absolute;width: 100%;height: 100%; " alt=""> <bottomLeft :areaCodes="areaCodes"></bottomLeft>
<div style="height: 5vh;"></div>
<div>
<dv-scroll-board :config="configs" style="width:96%;height:40vh;margin-left: 2%;" />
</div>
</div> </div>
<div class="c"> <div class="c">
<bottomCenter :areaCodes="areaCodes"></bottomCenter>
<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>
</div> </div>
<div class="r"> <div class="r">
<img src="/static/index/DRDD.png" style="position: absolute;width: 100%;height: 100%; " alt=""> <bottomRight :areaCodes="areaCodes"></bottomRight>
<div style="height: 5vh;"></div>
<div>
<dv-scroll-board :config="configs2" style="width:96%;height:40vh;margin-left: 2%;" />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -189,141 +29,35 @@
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import option from "./option" import option from "./option"
import Remake from "@/components/Remake.vue"
import { ref, reactive } from "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 loading = ref(false)
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 initCharts = (tag, option) => { // const initCharts = (tag, option) => {
var chartDom = document.getElementById(tag); // var chartDom = document.getElementById(tag);
var myChart = echarts.init(chartDom); // var myChart = echarts.init(chartDom);
myChart.setOption(option); // myChart.setOption(option);
} // }
onMounted(() => { onMounted(() => {
initCharts('user', option.userChartOption) // console.log(option.transactionUsers)
for (let i = 0; i < 16; i++) { // initCharts('transactionUsers', option.transactionUsers)
initCharts('store' + i, option.storeNum)
}
initCharts('transactionUsers', option.transactionUsers)
setTimeout(() => {
loading.value = false
}, 1000)
// initCharts('user', option.userChartOption)
}) })
</script> </script>
<style lang="scss"> <style lang="scss">
@ -353,66 +87,7 @@ onMounted(() => {
height: 100%; height: 100%;
position: relative; 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 { .c {
@ -423,59 +98,6 @@ onMounted(() => {
flex-direction: column; flex-direction: column;
justify-content: space-between; 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%; height: 100%;
position: relative; 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; width: 25vw;
height: 100%; height: 100%;
position: relative; position: relative;
} }
.c { .c {
@ -576,204 +128,12 @@ onMounted(() => {
position: relative; position: relative;
height: 100%; height: 100%;
box-sizing: border-box; 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 { .r {
width: 25vw; width: 25vw;
height: 100%; height: 100%;
position: relative; 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> </style>

View File

@ -4,17 +4,21 @@
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt=""> <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<div class="content"> <div class="content">
<div class="btns"> <div class="btns">
<div class="btn" @click="test">订单列表</div> <div class="btn" :class="btnFlag[0] ? 'act-btn' : ''" @click="hdClick(0)">订单列表</div>
<div class="btn" @click="test">退款单</div> <div class="btn" :class="btnFlag[1] ? 'act-btn' : ''" @click="hdClick(1)">退款单</div>
<div class="btn" @click="test">核销订单</div> <div class="btn" :class="btnFlag[2] ? 'act-btn' : ''" @click="hdClick(2)">核销订单</div>
</div> </div>
<div class="btns">
<div class="btn" @click="test">订单列表</div> <div v-show="btnFlag[0] || btnFlag[2]">
<div class="btn" @click="test">退款单</div> <div style="color: white;display: flex;">
<div class="btn" @click="test">核销订单</div> <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>
<div class="table"> <div class="table">
<dv-scroll-board :config="configs" @click='tableHdClick' style="width:95vw;height:100%" /> <dv-scroll-board :config="configs" @click='tableHdClick' style="width:95vw;height:100%" />
@ -29,17 +33,58 @@
<script setup> <script setup>
// 102B3 // 102B3
import { ref, reactive, onMounted } from "vue" import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router' import Bill from "@/components/Bill.vue"
const route = useRouter()
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) => { const tableHdClick = (e) => {
if (e.ceil) { if (e.ceil) {
if (e.columnIndex == 0) { if (e.columnIndex == 0) {
// console.log(e.rowIndex) // console.log(e.rowIndex)
@ -275,30 +320,38 @@ onMounted(() => {
.btns { .btns {
display: flex; display: flex;
font-size: 16px;
position: relative;
.btn { .btn {
color: white; color: white;
border: 1px solid #BF6D5D; // border: 1px solid #BF6D5D;
padding: 3px 10px; background-image: url('static/index/btn.png');
background-size: 100% 100%;
padding: 1vh 1vw;
border-radius: 20px; border-radius: 20px;
margin-right: 10px; 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 { .table {
width: 100%; width: 100%;
height: 75vh; height: 70vh;
margin-top: 2vh; margin-top: 3vh;
} }
} }
.manageBtn {
padding: 2px 10px;
border: 1px solid #6377C8;
border-radius: 20px;
margin-right: 10px;
}
:deep(.ceil) { :deep(.ceil) {
padding: 0 !important; padding: 0 !important;
margin-bottom: 5px; margin-bottom: 5px;
@ -312,5 +365,6 @@ onMounted(() => {
.row {} .row {}
</style> </style>

View File

@ -2,72 +2,118 @@
<div class="top"> <div class="top">
<div class="top-li"> <div class="top-li">
<div class="top-bg"> <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=""> <img src="/static/storeLogin/icon1.png" class="product-icon" alt="">
</div> </div>
<div class="top-content"> <div class="top-content">
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div> <div style="margin-top: 13vh;font-size: 20px;"> </div>
<div style="margin-top: 4vh;font-size: 10px;display: flex;"> <div style="margin-top: 0.5vh;color: #5C7A88;">NUMBER OF COMMODITIES</div>
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据0.0</div> <img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比0.0</div> <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>
</div> </div>
<div class="top-li"> <div class="top-li">
<div class="top-bg"> <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=""> <img src="/static/storeLogin/icon2.png" class="product-icon" alt="">
</div> </div>
<div class="top-content"> <div class="top-content">
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div> <div style="margin-top: 13vh;font-size: 20px;"> </div>
<div style="margin-top: 4vh;font-size: 10px;display: flex;"> <div style="margin-top: 0.5vh;color: #5C7A88;">ACCOMULATED PAYMENT AMOUNT</div>
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据0.0</div> <img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比0.0</div> <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>
</div> </div>
<div class="top-li"> <div class="top-li">
<div class="top-bg"> <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=""> <img src="/static/storeLogin/icon2.png" class="product-icon" alt="">
</div> </div>
<div class="top-content"> <div class="top-content">
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div> <div style="margin-top: 13vh;font-size: 20px;"> </div>
<div style="margin-top: 4vh;font-size: 10px;display: flex;"> <div style="margin-top: 0.5vh;color: #5C7A88;">ACCOMULATED NUMBER OF PAYMENTS</div>
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据0.0</div> <img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比0.0</div> <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>
</div> </div>
<div class="top-li"> <div class="top-li">
<div class="top-bg"> <div class="top-bg">
<img src="/static/storeLogin/top4.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/icon3.png" class="product-icon" alt=""> <img src="/static/storeLogin/icon3.png" class="product-icon" style="width: 40px;height: 25px;" alt="">
</div> </div>
<div class="top-content"> <div class="top-content">
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div> <div style="margin-top: 13vh;font-size: 20px;"> 访 </div>
<div style="margin-top: 4vh;font-size: 10px;display: flex;"> <div style="margin-top: 0.5vh;color: #5C7A88;">ACCOMULATED NUMBER OF VISITORS</div>
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据0.0</div> <img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比0.0</div> <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>
</div> </div>
<div class="top-li"> <div class="top-li">
<div class="top-bg"> <div class="top-bg">
<img src="/static/storeLogin/DCBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<img src="/static/storeLogin/top5.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<img src="/static/storeLogin/icon4.png" class="product-icon" alt=""> <img src="/static/storeLogin/icon4.png" class="product-icon" alt="">
</div> </div>
<div class="top-content"> <div class="top-content">
<div style="margin-top: 24vh;color: #B1E4F0;">1234</div> <div style="margin-top: 13vh;font-size: 20px;"> </div>
<div style="margin-top: 4vh;font-size: 10px;display: flex;"> <div style="margin-top: 0.5vh;color: #5C7A88;">NUMBER OF FOLLOWING SHOPS</div>
<div style="margin-left: 5.5vw;color: #B7CED5; ">昨日数据0.0</div> <img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
<div style="margin-left: 2.5vw;color: #B7CED5; ">周环比0.0</div> <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>
</div> </div>
@ -105,7 +151,7 @@ const config1 = reactive({
rowNum: 9, rowNum: 9,
columnWidth: [ columnWidth: [
3, 3, 5, 20, 5 50, 50, 200, 200, 115
], ],
data: [] data: []
} }
@ -114,9 +160,8 @@ const config2 = reactive({
oddRowBGC: "#001C2E", oddRowBGC: "#001C2E",
evenRowBGC: "#001C2E", evenRowBGC: "#001C2E",
rowNum: 9, rowNum: 9,
columnWidth: [ columnWidth: [
3, 3, 5, 20, 5 50, 50, 200, 200, 115
], ],
data: [] data: []
} }
@ -127,7 +172,7 @@ const config3 = reactive({
rowNum: 9, rowNum: 9,
columnWidth: [ columnWidth: [
3, 3, 5, 20, 5 50, 50, 200, 200, 115
], ],
data: [] data: []
} }
@ -144,11 +189,13 @@ onMounted(() => {
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
config3.data.push( 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='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=' 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++) { for (let i = 0; i < 20; i++) {
config1.data.push( 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='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'>商品名称</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=' 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++) { } for (let i = 0; i < 20; i++) {
config2.data.push( 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='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'>商品名称</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=' 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; align-items: center;
// color: red; // color: red;
.top-li { .top-li {
width: 20%; width: 20%;
height: 37vh; height: 37vh;
@ -230,6 +282,7 @@ onMounted(() => {
.top-content { .top-content {
text-align: center; text-align: center;
position: relative; position: relative;
color: white;
} }
.product-icon { .product-icon {

View File

@ -1,15 +1,19 @@
<template> <template>
<div class="top box"> <div class="top box">
<div class="l"> <div class="l">
<img class="img-cls" src="/static/town/YHSJ.png" alt=""> <img class="img-cls" src="/static/town/YHSJ.png" alt="">
<div class="user center" id="user"></div> <div class="user center" id="user"></div>
</div> </div>
<div class="c" id=""> <div class="c" id="">
<div class="product-list">
<topCenter :code="route.query.code"></topCenter>
<!-- <div class="product-list">
<div class="product" style=""> <div class="product" style="">
<div class="bg"> <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=""> <img src="/static/index/SPTB.png" class="product-icon" alt="">
<div class="bubble"></div> <div class="bubble"></div>
<div class="bubble1"></div> <div class="bubble1"></div>
@ -18,7 +22,7 @@
<div class="product-content"> <div class="product-content">
<div style="margin-top: 14vh;position: relative;"> </div> <div style="margin-top: 14vh;position: relative;"> </div>
<div style="font-size: 10px;">NUMBER OF COMMODITIES</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 <div style="margin-top: 2vh;position: relative;"> <span
style="color: #9DD2E0;font-size: 16px;">1234</span> </div> style="color: #9DD2E0;font-size: 16px;">1234</span> </div>
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;"> <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
@ -37,7 +41,7 @@
</div> </div>
<div class="product" style=""> <div class="product" style="">
<div class="bg"> <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=""> <img src="/static/index/SPTB.png" class="product-icon" alt="">
<div class="bubble"></div> <div class="bubble"></div>
<div class="bubble1"></div> <div class="bubble1"></div>
@ -46,7 +50,8 @@
<div class="product-content"> <div class="product-content">
<div style="margin-top: 14vh;position: relative;"> </div> <div style="margin-top: 14vh;position: relative;"> </div>
<div style="font-size: 10px;">NUMBER OF NEW SHOPS</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 <div style="margin-top: 2vh;position: relative;"> <span
style="color: #9DD2E0;font-size: 16px;">1234</span> </div> style="color: #9DD2E0;font-size: 16px;">1234</span> </div>
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;"> <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
@ -65,7 +70,7 @@
</div> </div>
<div class="product" style=""> <div class="product" style="">
<div class="bg"> <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=""> <img src="/static/index/SPTB.png" class="product-icon" alt="">
<div class="bubble"></div> <div class="bubble"></div>
<div class="bubble1"></div> <div class="bubble1"></div>
@ -74,7 +79,7 @@
<div class="product-content"> <div class="product-content">
<div style="margin-top: 14vh;position: relative;"> </div> <div style="margin-top: 14vh;position: relative;"> </div>
<div style="font-size: 10px;">ACCUMULATED NUMBERS OF SHOPS</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 <div style="margin-top: 2vh;position: relative;"> <span
style="color: #9DD2E0;font-size: 16px;">1234</span> </div> style="color: #9DD2E0;font-size: 16px;">1234</span> </div>
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;"> <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
@ -98,11 +103,11 @@
<div class="view-content"> <div class="view-content">
<div>昨日数据3333</div> <div>昨日数据3333</div>
<div style="display: flex;align-items: center;">当前浏览量 <div style="display: flex;align-items: center;">当前浏览量
<Remake /> 人正在浏览 <Remake :num="517854" /> 人正在浏览
</div> </div>
<div>周环比32%</div> <div>周环比32%</div>
</div> </div>
</div> </div> -->
</div> </div>
<div class="r"> <div class="r">
@ -134,24 +139,14 @@
<div class="l"> <div class="l">
<div class="user center" id="orderAmount"></div> <div class="user center" id="orderAmount"></div>
<img class="img-cls" src="/static/town/DRDDJE.png" alt=""> <img class="img-cls" src="/static/town/DRDDJE.png" alt="">
<!-- <bottomleft></bottomleft> -->
</div> </div>
<div class="c"> <div class="c">
<img class="img-cls" src="/static/town/CJYH.png" alt=""> <img class="img-cls" src="/static/town/CJYH.png" alt="">
<div id="transactionUsers" class="transactionUsers"></div> <div id="transactionUsers" class="transactionUsers"></div>
</div> </div>
<div class="r"> <div class="r">
<bottomRight></bottomRight>
<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>
</div> </div>
</div> </div>
@ -162,80 +157,43 @@ import * as echarts from 'echarts';
import option from "./option" import option from "./option"
import { ref, reactive } from "vue" import { ref, reactive } from "vue"
import Remake from "@/components/Remake.vue" import Remake from "@/components/Remake.vue"
const config3 = reactive({ import bottomRight from "@/components/townDetail/bottomRight.vue"
oddRowBGC: "#001C2E", import bottomleft from "@/components/townDetail/bottomleft.vue"
evenRowBGC: "#001C2E", import { getProductCountApi } from "@/api.js"
columnWidth: [ import { useRoute } from 'vue-router';
2, 3, 4, 10, 3 import topCenter from "@/components/townDetail/topCenter.vue"
],
data: [
const route = useRoute()
const addFn = (data) => {
let list = []
data.forEach((item, i) => {
list.push(
[ [
`<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="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='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'>商品名称</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: 40%;height: 100%; background: linear-gradient(to right, #455CCC, #51C2E0);transition: width 0.5s ease-in-out;'></div> </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='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </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>`,
[
`<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>`,
],
[
`<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>`,
], ],
]
}
) )
})
return list
}
// //
const initCharts = (tag, option) => { const initCharts = (tag, option) => {
@ -301,6 +259,7 @@ onMounted(() => {
width: 98%; width: 98%;
height: 35vh; height: 35vh;
} }
} }
@ -409,9 +368,11 @@ onMounted(() => {
// background-color: green; // background-color: green;
display: flex; display: flex;
padding-top: 1vh; padding-top: 1vh;
justify-content: space-between;
.l { .l {
flex: 1; // flex: 1;
width: 25VW;
height: 46vh; height: 46vh;
position: relative; position: relative;
@ -428,7 +389,8 @@ onMounted(() => {
} }
.c { .c {
flex: 2; width: 48VW;
height: 46vh; height: 46vh;
position: relative; position: relative;
@ -443,41 +405,11 @@ onMounted(() => {
} }
.r { .r {
flex: 1; width: 25VW;
height: 46vh; height: 46vh;
position: relative; 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); background: linear-gradient(to right, #455CCC, #51C2E0);
transition: width 0.5s ease-in-out; 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> </style>

View File

@ -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) {
}
})
}
})
}

16
src/view/utils/rem.js Normal file
View File

@ -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()
}

BIN
static/a/CS.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 623 B

BIN
static/a/CY.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 567 B

BIN
static/a/CZ.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 582 B

BIN
static/a/CZXF.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 709 B

BIN
static/a/DD.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 560 B

BIN
static/a/JE.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 709 B

BIN
static/a/PT.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 359 B

BIN
static/a/PT1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 364 B

BIN
static/a/WX.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 796 B

BIN
static/a/XZ.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 762 B

BIN
static/a/Y.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/a/YC.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 488 B

BIN
static/a/YE.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 442 B

BIN
static/a/YH.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 628 B

BIN
static/a/YJ.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 709 B

BIN
static/a/ZFB.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 816 B

BIN
static/a/ZY.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 649 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Binary file not shown.

BIN
static/index/FH.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/index/JR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
static/index/JRC.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
static/index/JS.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
static/index/MC.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/index/PHBBG.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 B

BIN
static/index/SYBG.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

BIN
static/index/actbg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/index/actbg2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/index/btn.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 941 B

BIN
static/index/btn2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 680 B

BIN
static/storeLogin/DCBG.png Normal file

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

View File

@ -1,8 +1,7 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import path from 'path' import path from 'path'
import postCssPxToRem from 'postcss-pxtorem'
// https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
server: { // ← ← ← ← ← ← server: { // ← ← ← ← ← ←
@ -12,8 +11,20 @@ export default defineConfig({
//别名配置引用src路径下的东西可以通过@如import Layout from '@/layout/index.vue' //别名配置引用src路径下的东西可以通过@如import Layout from '@/layout/index.vue'
alias: { alias: {
'@': path.resolve(__dirname, 'src') '@': path.resolve(__dirname, 'src')
},
},
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 192,
propList: ['*'],
})
]
} }
}, },
optimizeDeps: { optimizeDeps: {
// 开发时 解决这些commonjs包转成esm包 // 开发时 解决这些commonjs包转成esm包
include: [ include: [