gengx
This commit is contained in:
commit
156d7fd936
|
|
@ -0,0 +1 @@
|
||||||
|
VITE_BASE_URL = 'https://crmeb-test.shop.lihaink.cn/api'
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
VITE_BASE_URL = '/'
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
# Vue 3 + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + Vue</title>
|
||||||
|
<style>
|
||||||
|
html{
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript">
|
||||||
|
window._AMapSecurityConfig = {
|
||||||
|
securityJsCode:'e8b6cb44e8e431d68052c8e10db99264',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "trike-datav",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||||
|
"@jiaminghi/data-view": "^2.10.0",
|
||||||
|
"axios": "^1.6.2",
|
||||||
|
"echarts": "^5.4.3",
|
||||||
|
"echarts-gl": "^2.0.9",
|
||||||
|
"mitt": "^3.0.1",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"vue": "^3.3.8",
|
||||||
|
"vue-router": "^4.2.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^4.5.0",
|
||||||
|
"sass": "^1.69.5",
|
||||||
|
"vite": "^5.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.1 MiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" pointer-events="none" class="leaflet-zoom-animated" width="1519" height="912" viewBox="-127 -76 1519 912" style="transform: translate3d(-127px, -76px, 0px);"><g><path class="leaflet-interactive" stroke="black" stroke-opacity="1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-opacity="0.2" fill-rule="evenodd" d="M589 239L589 241L585 242L577 237L571 230L574 229L572 226L562 236L555 237L552 240L544 239L530 254L522 260L513 276L505 295L497 308L491 314L491 342L489 346L485 349L471 348L466 357L458 358L459 365L472 369L473 371L470 374L470 377L474 377L475 383L467 390L463 396L456 401L447 412L447 416L452 428L450 435L442 442L434 458L416 474L411 487L398 493L389 505L391 521L386 527L388 539L397 542L403 550L412 551L415 553L420 544L431 547L434 541L440 540L443 542L453 544L455 546L449 554L465 557L471 554L472 560L467 569L473 573L471 582L473 587L472 591L469 597L457 604L454 604L454 606L444 615L441 620L444 627L449 631L458 633L464 638L469 638L472 632L471 629L464 624L463 618L465 612L468 609L483 606L486 610L485 619L496 636L497 641L497 644L493 649L484 651L482 656L484 663L487 666L490 666L499 658L505 657L509 663L515 667L537 666L539 652L542 649L538 644L537 640L534 640L534 635L536 635L538 632L532 624L532 611L539 596L540 587L544 581L544 570L558 545L551 542L546 532L546 528L555 526L559 529L569 529L571 524L574 523L572 520L573 518L578 517L576 516L577 514L581 513L583 514L582 516L589 511L586 510L586 507L583 507L583 502L585 499L583 492L584 490L592 495L599 496L609 501L610 504L614 503L616 506L621 506L622 509L625 511L632 510L639 503L642 502L653 502L660 491L663 492L666 505L670 508L671 514L674 518L672 525L674 531L676 532L674 540L674 543L676 545L684 546L694 541L703 528L703 520L711 512L715 513L713 518L715 521L720 522L722 524L724 530L728 534L737 528L739 529L739 534L734 538L733 542L726 542L726 556L733 557L739 555L742 559L752 566L753 570L758 569L766 572L768 574L766 577L772 591L764 595L764 600L761 605L756 609L754 620L754 630L756 635L761 638L768 629L777 623L794 619L810 626L817 634L820 643L827 652L837 659L853 663L862 671L867 668L881 670L886 672L887 677L896 671L898 671L899 675L908 672L910 676L912 670L917 665L915 659L917 657L918 652L916 645L918 642L927 650L933 649L931 646L932 640L935 637L935 634L944 631L942 625L946 620L946 614L952 607L951 603L956 595L958 584L962 582L962 571L973 558L975 553L979 553L980 551L978 551L979 549L972 543L969 539L969 536L967 536L968 532L962 531L965 527L958 525L961 520L964 519L962 517L968 510L972 498L971 497L973 496L975 490L974 487L968 486L962 482L959 476L958 467L946 455L945 452L945 446L949 432L952 427L969 418L969 414L964 409L960 409L953 416L950 417L945 413L947 398L944 397L946 392L944 390L945 388L941 381L938 371L932 366L925 367L919 363L922 356L922 337L920 333L924 327L928 313L925 312L922 308L925 291L909 256L908 242L911 232L932 228L933 226L931 223L921 218L911 222L901 231L897 238L897 247L893 249L884 248L880 245L878 247L878 251L879 254L885 260L885 268L881 273L872 275L862 273L855 267L853 263L858 252L857 248L849 241L845 241L833 251L826 269L823 270L821 270L820 267L823 253L821 248L818 247L808 248L793 253L789 252L783 247L775 246L770 243L767 244L767 249L764 251L758 249L750 249L741 252L734 258L729 259L722 256L719 251L719 247L724 239L723 237L717 234L701 242L692 243L685 242L684 237L673 232L669 232L667 230L669 228L674 227L677 224L674 212L677 210L681 210L683 206L682 204L675 204L676 195L674 190L663 183L662 191L657 197L653 194L644 194L633 199L629 205L627 204L627 201L625 203L620 202L614 204L610 208L602 207L608 213L608 215L604 218L594 219L594 222L602 229L600 232L592 235L591 237zM594 232L593 230L593 232zM592 235L594 233L592 235zM570 225L570 226zM574 233L575 232zM591 237L592 235L589 239L591 237z" id="泸县"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -0,0 +1,42 @@
|
||||||
|
<script setup>
|
||||||
|
import headView from "@/components/headView.vue";
|
||||||
|
import Businesses from "@/components/Businesses.vue";
|
||||||
|
// import { test } from "@/api/index.js";
|
||||||
|
// test().then(res => {
|
||||||
|
// console.log(res);
|
||||||
|
// }).catch(e => {
|
||||||
|
// console.log(e);
|
||||||
|
// })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<dv-full-screen-container class="body">
|
||||||
|
<headView></headView>
|
||||||
|
<div style="height: calc(100% - 60px)">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
<Businesses class="businesses"></Businesses>
|
||||||
|
</dv-full-screen-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
background-image: url("/src/assets/img/bg.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.businesses {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 999999;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import axios from "@/utils/axios.js";
|
||||||
|
|
||||||
|
export const test = () => {
|
||||||
|
return axios.get('/common/home');
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1010 B |
|
|
@ -0,0 +1,7 @@
|
||||||
|
/* src/assets/fonts/dsfont.css */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'ifonts';
|
||||||
|
src: url(./ifonts.ttf);
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 521 B |
Binary file not shown.
|
After Width: | Height: | Size: 812 B |
Binary file not shown.
|
After Width: | Height: | Size: 619 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 611 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 685 B |
Binary file not shown.
|
After Width: | Height: | Size: 956 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.1 MiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
|
|
@ -0,0 +1,173 @@
|
||||||
|
<script setup>
|
||||||
|
// 102B3
|
||||||
|
import { ref, reactive, onMounted } from "vue"
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import paging from "./paging.vue"
|
||||||
|
import mitt from "@/utils/mitt"
|
||||||
|
const route = useRouter()
|
||||||
|
|
||||||
|
const ShwostoreType = ref(false)
|
||||||
|
const test = () => {
|
||||||
|
console.log(6)
|
||||||
|
}
|
||||||
|
|
||||||
|
const isShow = ref(false);
|
||||||
|
|
||||||
|
const hdClick = (e) => {
|
||||||
|
// console.log(e)
|
||||||
|
if (e.columnIndex == 10) {
|
||||||
|
// alert(45)
|
||||||
|
route.replace('/storeLogin')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
const a = (aaa) => {
|
||||||
|
for (let i = 0; i < 100; i++) {
|
||||||
|
if (i % 2 == 0) {
|
||||||
|
aaa.data.push(
|
||||||
|
[
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);' >排sd序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.30);'>排序</div>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
aaa.data.push(
|
||||||
|
[
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排sd序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 156, 255, 0.40);'>排序</div>`,
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const configs = reactive({
|
||||||
|
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||||
|
oddRowBGC: '',
|
||||||
|
evenRowBGC: "",
|
||||||
|
rowNum: 20,
|
||||||
|
header: [
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>订单编号</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人电话</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人地址</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>商品名称</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>店铺名称</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>下单时间</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>订单状态</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>配送人员</div>`,
|
||||||
|
],
|
||||||
|
data: [
|
||||||
|
]
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
a(configs);
|
||||||
|
mitt.on('showBusinesses', () => {
|
||||||
|
isShow.value = !isShow.value;
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<transition name="fade">
|
||||||
|
<div class="bus" v-if="isShow">
|
||||||
|
<div class="c-list-box">
|
||||||
|
<div class="c-l-top">
|
||||||
|
<div class="title">订单列表</div>
|
||||||
|
<div class="close" @click="isShow = false">关闭</div>
|
||||||
|
</div>
|
||||||
|
<dv-scroll-board
|
||||||
|
:config="configs"
|
||||||
|
@click="hdClick"
|
||||||
|
style="width: 100%; height: 92%"
|
||||||
|
/>
|
||||||
|
<div class="c-l-bottom">
|
||||||
|
<paging></paging>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.bus {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.c-list-box {
|
||||||
|
width: 94%;
|
||||||
|
height: 94%;
|
||||||
|
position: relative;
|
||||||
|
background-image: url(../assets/img/list-box.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 3rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.c-l-top {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-family: "ifonts";
|
||||||
|
}
|
||||||
|
.close {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0.1rem 1.5rem;
|
||||||
|
background-color: rgba(0, 156, 255, 0.3);
|
||||||
|
border: 0.07rem solid rgba(91, 219, 246, 1);
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.c-l-bottom {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ceil) {
|
||||||
|
padding: 0 !important;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.header-item) {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity 0.5s;
|
||||||
|
}
|
||||||
|
.fade-enter,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
<script setup>
|
||||||
|
import { defineProps, defineEmits, ref, nextTick, onMounted, } from "vue"
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
const router = useRouter()
|
||||||
|
const emit = defineEmits(['offAreaList']);
|
||||||
|
const choseArea = ref(false);
|
||||||
|
import { useAppStore } from "@/store/app.js";
|
||||||
|
|
||||||
|
const list = ref([
|
||||||
|
{
|
||||||
|
name: '泸县',
|
||||||
|
pinyin: 'luxian',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '江阳区',
|
||||||
|
pinyin: 'jiangyang',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '龙马潭区',
|
||||||
|
pinyin: 'longma',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '纳溪区',
|
||||||
|
pinyin: 'naxi',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '合江县',
|
||||||
|
pinyin: 'hejiang',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '叙永县',
|
||||||
|
pinyin: 'xuyong',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '古蔺县',
|
||||||
|
pinyin: 'gulin',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const appStore = useAppStore();
|
||||||
|
|
||||||
|
// 选镇
|
||||||
|
const choseTownFn = (item) => {
|
||||||
|
emit('offAreaList', item);
|
||||||
|
appStore.setMapInfo(item.pinyin);
|
||||||
|
}
|
||||||
|
|
||||||
|
const open = () => {
|
||||||
|
choseArea.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
choseArea.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const show = () => {
|
||||||
|
choseArea.value = !choseArea.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
open, close, show
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
list.value.forEach(item => {
|
||||||
|
if (item.pinyin == appStore.map_info) {
|
||||||
|
choseTownFn(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<transition name="fade">
|
||||||
|
<div class="address" v-show="choseArea == true">
|
||||||
|
<div
|
||||||
|
class="address-li"
|
||||||
|
@click="choseTownFn(item)"
|
||||||
|
v-for="(item, index) in list"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.address {
|
||||||
|
left: 1vw;
|
||||||
|
top: 18px;
|
||||||
|
position: absolute;
|
||||||
|
width: 10vw;
|
||||||
|
height: 18vh;
|
||||||
|
background-color: #001e32;
|
||||||
|
color: #c7dbe3;
|
||||||
|
z-index: 9999;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
.address-li {
|
||||||
|
padding: 2px 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
border-bottom: 0.1px solid #0e293c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.address::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
background-color: #153041;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address::-webkit-scrollbar-track {
|
||||||
|
background-color: #153041;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #4ab9d0;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity 0.5s;
|
||||||
|
}
|
||||||
|
.fade-enter,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="border-box">
|
||||||
|
<div class="border-top"></div>
|
||||||
|
<div class="border-center">
|
||||||
|
<div class="border-left"></div>
|
||||||
|
<div class="border-slot"><slot></slot></div>
|
||||||
|
<div class="border-left"></div>
|
||||||
|
</div>
|
||||||
|
<div class="border-bottom"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.border-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(0, 156, 255, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
.border-top {
|
||||||
|
height: 2px;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#5bdbf6 12px,
|
||||||
|
transparent 48px,
|
||||||
|
transparent calc(100% - 48px),
|
||||||
|
#5bdbf6 calc(100% - 12px)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.border-bottom {
|
||||||
|
height: 2px;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
#5bdbf6 12px,
|
||||||
|
transparent 120px,
|
||||||
|
transparent calc(100% - 150px),
|
||||||
|
#5bdbf6 calc(100% - 12px)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.border-center {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.border-left {
|
||||||
|
width: 2px;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
#5bdbf6 12px,
|
||||||
|
transparent 36px,
|
||||||
|
transparent calc(100% - 150px),
|
||||||
|
#5bdbf6 calc(100% - 12px)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.border-slot {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,165 @@
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref, provide, nextTick, onMounted } from "vue";
|
||||||
|
import areaList from "./areaList.vue";
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
import mitt from "@/utils/mitt";
|
||||||
|
|
||||||
|
const info = reactive({
|
||||||
|
address: '泸县',
|
||||||
|
pinyin: 'luxian'
|
||||||
|
})
|
||||||
|
|
||||||
|
const areaListRef = ref(null);
|
||||||
|
|
||||||
|
// 选择镇
|
||||||
|
const choseArea = ref(null)
|
||||||
|
const open = () => {
|
||||||
|
areaListRef.value.show();
|
||||||
|
}
|
||||||
|
// 关闭
|
||||||
|
const offAreaList = (e) => {
|
||||||
|
Object.keys(e).forEach(key => {
|
||||||
|
if (e[key]) {
|
||||||
|
info[key] = e[key];
|
||||||
|
}
|
||||||
|
})
|
||||||
|
info.address = e.name;
|
||||||
|
mitt.emit('map_info', info);
|
||||||
|
}
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const navToDelivery = () => {
|
||||||
|
if (route.path == '/') router.push('/delivery');
|
||||||
|
else router.back();
|
||||||
|
}
|
||||||
|
|
||||||
|
let nowTime = ref([]);
|
||||||
|
|
||||||
|
const updateClock = () => {
|
||||||
|
let now = new Date();
|
||||||
|
let hours = now.getHours();
|
||||||
|
let minutes = now.getMinutes();
|
||||||
|
let seconds = now.getSeconds();
|
||||||
|
let y = now.getFullYear();
|
||||||
|
let m = now.getMonth() + 1;
|
||||||
|
let d = now.getDate();
|
||||||
|
|
||||||
|
nowTime.value[0] = y + '.' + m.toString().padStart(2, '0') + '.' + d.toString().padStart(2, '0');
|
||||||
|
|
||||||
|
nowTime.value[1] = hours.toString().padStart(2, '0') + ':' +
|
||||||
|
minutes.toString().padStart(2, '0') + ':' +
|
||||||
|
seconds.toString().padStart(2, '0');
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
mitt.emit('map_info', info);
|
||||||
|
|
||||||
|
// 每秒钟更新一次时间
|
||||||
|
setInterval(updateClock, 1000);
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="header">
|
||||||
|
<div class="left">
|
||||||
|
<img
|
||||||
|
class="logo item"
|
||||||
|
src="/src/assets/head_img/logo.png"
|
||||||
|
@click="navToDelivery"
|
||||||
|
/>
|
||||||
|
<div class="item">{{ nowTime[0] }}</div>
|
||||||
|
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||||
|
<div class="item">{{ nowTime[1] }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="head-title">吟龙养殖溯源系统可视化大屏</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="item" @click="open" style="position: relative">
|
||||||
|
<img src="/src/assets/head_img/location.png" alt="" />
|
||||||
|
{{ info.address }}
|
||||||
|
<areaList
|
||||||
|
ref="areaListRef"
|
||||||
|
:choseArea="choseArea"
|
||||||
|
@offAreaList="offAreaList"
|
||||||
|
style="position: absolute; top: 100%; left: 0"
|
||||||
|
></areaList>
|
||||||
|
</div>
|
||||||
|
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||||
|
<div class="item">
|
||||||
|
<img src="/src/assets/head_img/weather.png" alt="" />
|
||||||
|
多云
|
||||||
|
</div>
|
||||||
|
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||||
|
<div class="item">
|
||||||
|
<img src="/src/assets/head_img/close.png" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img class="img" src="/src/assets/img/shiler.png" alt="" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-image: url("../assets/img/header.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-color: rgba($color: #000000, $alpha: 0.8);
|
||||||
|
height: 60px;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
.img {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -10%;
|
||||||
|
left: 50%;
|
||||||
|
z-index: 9999999;
|
||||||
|
width: 50vw;
|
||||||
|
height: 100%;
|
||||||
|
transform: translate(-50%, 50%);
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
width: 0.8rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
.head-title {
|
||||||
|
/* font-weight: bold; */
|
||||||
|
font-family: "ifonts", sans-serif;
|
||||||
|
font-size: 2rem;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
.logo {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
margin-left: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
justify-content: right;
|
||||||
|
.item {
|
||||||
|
margin-right: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
img {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,128 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const pages = ref({
|
||||||
|
page: 1,
|
||||||
|
total: 63,
|
||||||
|
pageSize: 30,
|
||||||
|
pageAll: 7
|
||||||
|
})
|
||||||
|
|
||||||
|
const prev = () => {
|
||||||
|
if (pages.value.page > 1) pages.value.page--;
|
||||||
|
}
|
||||||
|
const next = () => {
|
||||||
|
if (pages.value.page < pages.value.pageAll) pages.value.page++;
|
||||||
|
}
|
||||||
|
const setPage = (page = 1) => {
|
||||||
|
pages.value.page = page;
|
||||||
|
}
|
||||||
|
const getPage = () => {
|
||||||
|
console.log(pages.value.page);
|
||||||
|
if (pages.value.page < 0) pages.value.page = 1;
|
||||||
|
if (pages.value.page > pages.value.pageAll) pages.value.page = pages.value.pageAll;
|
||||||
|
}
|
||||||
|
const input = (e) => {
|
||||||
|
if (e.data >= 0 && e.data <= 9) return getPage();
|
||||||
|
pages.value.page = 1;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="pad-box">
|
||||||
|
<div class="total">共 {{ pages.total }} 条</div>
|
||||||
|
<div class="num" @click="prev">{{ "<" }}</div>
|
||||||
|
<div class="num" :class="{ c_num: pages.page == 1 }" @click="setPage(1)">
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="num"
|
||||||
|
:class="{ c_num: pages.page == 2 }"
|
||||||
|
v-if="pages.pageAll > 1"
|
||||||
|
@click="setPage(2)"
|
||||||
|
>
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="num"
|
||||||
|
:class="{ c_num: pages.page == 3 }"
|
||||||
|
v-if="pages.pageAll > 2"
|
||||||
|
@click="setPage(3)"
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="num"
|
||||||
|
:class="{ c_num: pages.page == '' }"
|
||||||
|
v-if="pages.pageAll - 3 > 3"
|
||||||
|
>
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="num"
|
||||||
|
:class="{ c_num: pages.page == pages.pageAll - 2 }"
|
||||||
|
v-if="pages.pageAll - 2 > 3"
|
||||||
|
@click="setPage(pages.pageAll - 2)"
|
||||||
|
>
|
||||||
|
{{ pages.pageAll - 2 }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="num"
|
||||||
|
:class="{ c_num: pages.page == pages.pageAll - 1 }"
|
||||||
|
v-if="pages.pageAll - 1 > 3"
|
||||||
|
@click="setPage(pages.pageAll - 1)"
|
||||||
|
>
|
||||||
|
{{ pages.pageAll - 1 }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="num"
|
||||||
|
:class="{ c_num: pages.page == pages.pageAll }"
|
||||||
|
v-if="pages.pageAll > 3"
|
||||||
|
@click="setPage(pages.pageAll)"
|
||||||
|
>
|
||||||
|
{{ pages.pageAll }}
|
||||||
|
</div>
|
||||||
|
<div class="num" @click="next">{{ ">" }}</div>
|
||||||
|
<div class="btn">
|
||||||
|
<div>前往</div>
|
||||||
|
<input v-model="pages.page" @input="input" />
|
||||||
|
<div>页</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.pad-box {
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
div {
|
||||||
|
user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
}
|
||||||
|
.total {
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
}
|
||||||
|
.c_num {
|
||||||
|
color: rgba(91, 219, 246, 1);
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
align-items: center;
|
||||||
|
input {
|
||||||
|
background-color: rgba(0, 156, 255, 0.2);
|
||||||
|
border: 1px solid rgba(91, 219, 246, 0.4);
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
width: 2rem;
|
||||||
|
margin: 0 1rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
<template>
|
||||||
|
<div class="scroll-list">
|
||||||
|
<transition-group name="list-transition" tag="div">
|
||||||
|
<div v-for="(item, index) in items" :key="index" class="list-item">
|
||||||
|
{{ item }}
|
||||||
|
</div>
|
||||||
|
</transition-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from 'vue';
|
||||||
|
const items = reactive(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'])
|
||||||
|
const currentIndex = ref(0)// 当前显示的索引
|
||||||
|
const scrollSpeed = ref(1000) // 滚动速度，单位为毫秒
|
||||||
|
|
||||||
|
const startAutoScroll = () => {
|
||||||
|
setInterval(() => {
|
||||||
|
currentIndex.value = (currentIndex.value + 1) % items.length; // 更新当前索引
|
||||||
|
}, scrollSpeed.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
startAutoScroll()
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.list-transition-enter-active,
|
||||||
|
.list-transition-leave-active {
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-transition-enter,
|
||||||
|
.list-transition-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-list {
|
||||||
|
height: 100px; /* 设置滚动列表容器的高度 */
|
||||||
|
overflow: hidden; /* 隐藏溢出部分 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
height: 40px; /* 每个列表项的高度 */
|
||||||
|
line-height: 40px; /* 垂直居中文本 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import dataV from '@jiaminghi/data-view'
|
||||||
|
import './assets/font/fonts.css';
|
||||||
|
import router from "./router";
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
|
||||||
|
const pinia = createPinia();
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
app.use(dataV)
|
||||||
|
app.use(pinia)
|
||||||
|
app.use(router)
|
||||||
|
app.mount('#app')
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { createRouter, createWebHistory } from "vue-router"
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'index',
|
||||||
|
component: () => import('../view/index/index.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/delivery',
|
||||||
|
name: 'delivery',
|
||||||
|
component: () => import('../view/delivery/index.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory('/'),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router;
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { defineStore } from "pinia"
|
||||||
|
import { ref } from "vue"
|
||||||
|
|
||||||
|
export const useAppStore = defineStore('app', () => {
|
||||||
|
const map_info = ref(localStorage.getItem('map_info') || 'luxian');
|
||||||
|
|
||||||
|
const setMapInfo = (e) => {
|
||||||
|
map_info.value = e;
|
||||||
|
localStorage.setItem('map_info', e);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
map_info,
|
||||||
|
setMapInfo
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const request = axios.create({
|
||||||
|
baseURL: import.meta.env.VITE_BASE_URL,
|
||||||
|
timeout: 5000
|
||||||
|
})
|
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
request.interceptors.request.use(
|
||||||
|
config => {
|
||||||
|
// 在发送请求之前做些什么，例如添加token、修改请求头等
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
// 处理请求错误
|
||||||
|
console.error(error);
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 响应拦截器
|
||||||
|
request.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
// 对响应数据做些什么，例如解析数据、统一处理错误等
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
// 处理响应错误
|
||||||
|
console.error(error);
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export default request;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import mitt from "mitt"
|
||||||
|
|
||||||
|
const m = mitt();
|
||||||
|
|
||||||
|
export default m;
|
||||||
|
|
@ -0,0 +1,187 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, onUnmounted, ref } from "vue";
|
||||||
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
|
|
||||||
|
let map = null;
|
||||||
|
|
||||||
|
const loading = ref(true);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
AMapLoader.load({
|
||||||
|
key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
|
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||||
|
Loca: {
|
||||||
|
version: '2.0.0'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((AMap) => {
|
||||||
|
map = new AMap.Map("container", {
|
||||||
|
// 设置地图容器id
|
||||||
|
viewMode: "3D", // 是否为3D地图模式
|
||||||
|
zoom: 15, // 初始化地图级别
|
||||||
|
center: [105.441866, 28.87098], // 初始化地图中心点位置
|
||||||
|
mapStyle: "amap://styles/darkblue",
|
||||||
|
});
|
||||||
|
// 监听地图加载完成事件
|
||||||
|
map.on('complete', () => {
|
||||||
|
// 地图加载完成后执行的操作
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
}, 500)
|
||||||
|
});
|
||||||
|
map.setPitch(30);
|
||||||
|
|
||||||
|
// 创建 AMap.Icon 实例：
|
||||||
|
const icon = new AMap.Icon({
|
||||||
|
size: new AMap.Size(50, 60), // 图标尺寸
|
||||||
|
// vue3/vite 需要用特定的本地图片引入方式，不可require引入
|
||||||
|
image: new URL('/src/assets/delivery_img/icon10.png', import.meta.url).href, // Icon的图像
|
||||||
|
imageSize: new AMap.Size(50, 60), // 根据所设置的大小拉伸或压缩图片
|
||||||
|
imageOffset: new AMap.Pixel(0, 0)
|
||||||
|
});
|
||||||
|
// 创建一个 Marker 实例：
|
||||||
|
const marker = new AMap.Marker({
|
||||||
|
position: new AMap.LngLat(105.441866, 28.87098), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
||||||
|
icon: icon,
|
||||||
|
offset: new AMap.Pixel(-25, -60), // 图标相对于标记点的位置偏移量
|
||||||
|
});
|
||||||
|
|
||||||
|
// 将创建的点标记添加到已有的地图实例：
|
||||||
|
map.add(marker);
|
||||||
|
|
||||||
|
// 创建 Loca 实例
|
||||||
|
var loca = new Loca.Container({
|
||||||
|
map: map
|
||||||
|
});
|
||||||
|
|
||||||
|
// 创建数据源
|
||||||
|
var dataSource = new Loca.GeoJSONSource({
|
||||||
|
// url: 'xxx.geojson', 或者使用 data 字段
|
||||||
|
data: {
|
||||||
|
"type": "FeatureCollection",
|
||||||
|
"features": [
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {},
|
||||||
|
"geometry": {
|
||||||
|
"type": "LineString",
|
||||||
|
"coordinates": [
|
||||||
|
[105.441866, 28.87098],
|
||||||
|
[105.449866, 28.87998]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {},
|
||||||
|
"geometry": {
|
||||||
|
"type": "LineString",
|
||||||
|
"coordinates": [
|
||||||
|
[105.441866, 28.87098],
|
||||||
|
[105.440866, 28.87658]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {},
|
||||||
|
"geometry": {
|
||||||
|
"type": "LineString",
|
||||||
|
"coordinates": [
|
||||||
|
[105.441866, 28.87098],
|
||||||
|
[105.435866, 28.87658]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "Feature",
|
||||||
|
"properties": {},
|
||||||
|
"geometry": {
|
||||||
|
"type": "LineString",
|
||||||
|
"coordinates": [
|
||||||
|
[105.441866, 28.87098],
|
||||||
|
[105.43, 28.87]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 弧线
|
||||||
|
var pulseLink = new Loca.PulseLinkLayer({
|
||||||
|
// loca,
|
||||||
|
zIndex: 30,
|
||||||
|
opacity: 1,
|
||||||
|
visible: true,
|
||||||
|
zooms: [6, 22],
|
||||||
|
depth: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
pulseLink.setSource(dataSource)
|
||||||
|
pulseLink.setStyle({
|
||||||
|
unit: 'meter',
|
||||||
|
dash: [80, 0, 80, 0],
|
||||||
|
lineWidth: function () {
|
||||||
|
return [30, 5];
|
||||||
|
},
|
||||||
|
height: function (index, feat) {
|
||||||
|
return feat.distance / 3 + 10;
|
||||||
|
},
|
||||||
|
// altitude: 1000,
|
||||||
|
smoothSteps: 30,
|
||||||
|
speed: function (index, prop) {
|
||||||
|
// return 1 + Math.random() * 200;
|
||||||
|
return 200;
|
||||||
|
},
|
||||||
|
flowLength: 300,
|
||||||
|
lineColors: function (index, feat) {
|
||||||
|
return ['rgba(47, 194, 250, 0.20)', 'rgba(91, 219, 246, 0.70)', 'rgba(0, 156, 255, 0.20)'];
|
||||||
|
},
|
||||||
|
maxHeightScale: 0.4, // 弧顶位置比例
|
||||||
|
headColor: 'rgba(91, 219, 246, 1)',
|
||||||
|
trailColor: 'rgba(255, 255,0,0)',
|
||||||
|
});
|
||||||
|
loca.add(pulseLink);
|
||||||
|
loca.animate.start();
|
||||||
|
// 添加到地图上
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
map?.destroy();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="c-box">
|
||||||
|
<div id="container"></div>
|
||||||
|
<div class="loading" v-if="loading">
|
||||||
|
<dv-loading>加载中...</dv-loading>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang ="scss">
|
||||||
|
.c-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
#container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.loading {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: #05273d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, onUnmounted, ref } from "vue";
|
||||||
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
|
|
||||||
|
let map = null;
|
||||||
|
|
||||||
|
const loading = ref(true);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
AMapLoader.load({
|
||||||
|
key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
|
plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||||
|
})
|
||||||
|
.then((AMap) => {
|
||||||
|
map = new AMap.Map("container-left", {
|
||||||
|
// 设置地图容器id
|
||||||
|
viewMode: "2D", // 是否为3D地图模式
|
||||||
|
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
|
zoom: 15, // 初始化地图级别
|
||||||
|
center: [105.441866, 28.87098], // 初始化地图中心点位置
|
||||||
|
mapStyle: "amap://styles/darkblue",
|
||||||
|
});
|
||||||
|
// 监听地图加载完成事件
|
||||||
|
map.on('complete', () => {
|
||||||
|
// 地图加载完成后执行的操作
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
}, 500)
|
||||||
|
});
|
||||||
|
const driving = new AMap.Driving({
|
||||||
|
map: map,
|
||||||
|
// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
policy: 'panel',
|
||||||
|
isOutline: false, //描边
|
||||||
|
showTraffic: false, //路况
|
||||||
|
// autoFitView: false //自动调整
|
||||||
|
})
|
||||||
|
const points = [
|
||||||
|
{ keyword: '莲花池街道里海科技', city: '泸州' },
|
||||||
|
{ keyword: '万象汇', city: '泸州' }
|
||||||
|
]
|
||||||
|
|
||||||
|
driving.search(points, (status, result) => {
|
||||||
|
// 未出错时，result即是对应的路线规划方案
|
||||||
|
console.log('status=', status)
|
||||||
|
console.log('result=', result)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
map?.destroy();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="c-box">
|
||||||
|
<div id="container-left"></div>
|
||||||
|
<div class="loading" v-if="loading">
|
||||||
|
<dv-loading>加载中...</dv-loading>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang ="scss">
|
||||||
|
.c-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
#container-left {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.loading {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: #05273d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,507 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from "vue"
|
||||||
|
import border from "@/components/border.vue";
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import mitt from "@/utils/mitt"
|
||||||
|
|
||||||
|
const initData = (aaa) => {
|
||||||
|
for (let i = 0; i < 20; i++) {
|
||||||
|
if (i % 2 == 0) {
|
||||||
|
aaa.data.push(
|
||||||
|
[
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)' >排sd序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
aaa.data.push(
|
||||||
|
[
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)' >排sd序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const list = reactive({
|
||||||
|
header: [
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>ID</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人电话</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>商品名称</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人地址</div>`,
|
||||||
|
],
|
||||||
|
data: [],
|
||||||
|
// index: true,
|
||||||
|
// headerBGC: 'rgba(0, 168, 255, 0.76)',
|
||||||
|
// oddRowBGC: 'rgba(91, 219, 246, 0.20)',
|
||||||
|
// evenRowBGC: 'rgba(0, 168, 255, 0.16)',
|
||||||
|
oddRowBGC: '',
|
||||||
|
evenRowBGC: "",
|
||||||
|
// columnWidth: [50],
|
||||||
|
align: ['center'],
|
||||||
|
rowNum: 7
|
||||||
|
})
|
||||||
|
|
||||||
|
initData(list);
|
||||||
|
|
||||||
|
const orderList = reactive([
|
||||||
|
{
|
||||||
|
name: '今日订单',
|
||||||
|
value: '988'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '已取货订单',
|
||||||
|
value: '1523'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '未配送订单',
|
||||||
|
value: '55'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '已完成订单',
|
||||||
|
value: '3'
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const cOrderValue = (e) => {
|
||||||
|
let str = e;
|
||||||
|
if (str > 9999) str = 9999 + '';
|
||||||
|
else str = str + '';
|
||||||
|
str = str.split('');
|
||||||
|
if (str.length < 4) {
|
||||||
|
let t = 4 - str.length;
|
||||||
|
for (let i = 0; i < t; i++) {
|
||||||
|
str.unshift('0');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
str.splice(-3, 0, ',');
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const echartsRef = ref(null)
|
||||||
|
|
||||||
|
const initEcahrts = () => {
|
||||||
|
|
||||||
|
let xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
|
||||||
|
yData1 = [400, 410, 350, 320, 280, 340, 360, 400, 420, 410],
|
||||||
|
yData2 = [350, 320, 260, 240, 220, 280, 300, 360, 340, 340],
|
||||||
|
yData3 = [200, 260, 200, 190, 180, 220, 260, 300, 280, 300],
|
||||||
|
yData4 = [120, 300, 230, 240, 190, 290, 103, 456, 230, 270],
|
||||||
|
borderData = [],
|
||||||
|
legend = ["已取货订单", "未配送订单", "已完成订单", "小时订单数"],
|
||||||
|
colorArr = [{
|
||||||
|
start: "rgba(0, 168, 255,",
|
||||||
|
end: "rgba(0, 168, 255, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: "rgba(91, 219, 246,",
|
||||||
|
end: "rgba(91, 219, 246, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: "rgba(75, 95, 219,",
|
||||||
|
end: "rgba(75, 95, 219, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgba(91, 219, 246, 1)"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
let normalColor = "#DEEBFF";
|
||||||
|
// let fontSize = 20;
|
||||||
|
let seriesData = [];
|
||||||
|
let borderHeight = 4;
|
||||||
|
xData.forEach(element => {
|
||||||
|
borderData.push(borderHeight);
|
||||||
|
});
|
||||||
|
[yData1, yData2, yData3, yData4].forEach((item, index) => {
|
||||||
|
let obj1 = {};
|
||||||
|
if (index < 3) {
|
||||||
|
obj1 = {
|
||||||
|
name: legend[index],
|
||||||
|
type: "bar",
|
||||||
|
stack: legend[index],
|
||||||
|
data: item,
|
||||||
|
barWidth: "15%",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: colorArr[index].start + "0.3)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: colorArr[index].start + "0.4)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: colorArr[index].end
|
||||||
|
}
|
||||||
|
],
|
||||||
|
globalCoord: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
seriesData.push(obj1);
|
||||||
|
} else {
|
||||||
|
let obj3 = {
|
||||||
|
name: legend[index],
|
||||||
|
type: "line",
|
||||||
|
yAxisIndex: 1,
|
||||||
|
smooth: false,
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: 'rgba(255,255,255, 0.8)'
|
||||||
|
},
|
||||||
|
symbol: "circle",
|
||||||
|
symbolSize: 16,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: colorArr[index].color,
|
||||||
|
borderColor: "#fff",
|
||||||
|
borderWidth: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: item,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
seriesData.push(obj3);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log(seriesData);
|
||||||
|
const option = {
|
||||||
|
backgroundColor: "rgba(0,0,0,0)",
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
top: "12%",
|
||||||
|
right: "12%",
|
||||||
|
bottom: '2%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
// icon: "rect",
|
||||||
|
orient: 'vertical', // 将图例竖直布局
|
||||||
|
|
||||||
|
itemWidth: 16,
|
||||||
|
itemHeight: 10,
|
||||||
|
right: "right",
|
||||||
|
bottom: "center",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff"
|
||||||
|
},
|
||||||
|
data: legend
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
borderColor: "rgba(18, 57, 60, .8)",
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
shadowStyle: {
|
||||||
|
color: 'rgba(0, 11, 34, .4)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatter: function (params) {
|
||||||
|
let str = "";
|
||||||
|
for (let i = 0; i < params.length; i++) {
|
||||||
|
if (params[i].seriesName !== "") {
|
||||||
|
str +=
|
||||||
|
params[i].name +
|
||||||
|
':' +
|
||||||
|
params[i].seriesName +
|
||||||
|
'-' +
|
||||||
|
params[i].value +
|
||||||
|
"<br/>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: "category",
|
||||||
|
data: xData,
|
||||||
|
name: '小时(工作时间)',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow"
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
align: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: normalColor,
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#1C82C5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxis: [{
|
||||||
|
type: "value",
|
||||||
|
// name: "亿千瓦时",
|
||||||
|
// nameTextStyle: {
|
||||||
|
// color: normalColor,
|
||||||
|
// fontSize: 12
|
||||||
|
// },
|
||||||
|
// "min": 0,
|
||||||
|
// "max": 50,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}",
|
||||||
|
textStyle: {
|
||||||
|
color: normalColor,
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#1C82C5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: "solid",
|
||||||
|
color: 'rgba(28, 130, 197, .3)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
// name: "%",
|
||||||
|
// nameTextStyle: {
|
||||||
|
// color: normalColor,
|
||||||
|
// fontSize: 12
|
||||||
|
// },
|
||||||
|
// min: -100,
|
||||||
|
// max: 100,
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
formatter: "{value}",
|
||||||
|
textStyle: {
|
||||||
|
color: normalColor,
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#1C82C5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed",
|
||||||
|
color: "rgba(255,255,255,0.2)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: seriesData
|
||||||
|
};
|
||||||
|
|
||||||
|
// 基于DOM元素初始化echarts实例
|
||||||
|
const chart = echarts.init(echartsRef.value);
|
||||||
|
|
||||||
|
// 使用配置项显示图表
|
||||||
|
chart.setOption(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
const openList = () => {
|
||||||
|
mitt.emit('showBusinesses')
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initEcahrts()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<border>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">配送详情</div>
|
||||||
|
<div class="body-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="top">
|
||||||
|
<div class="view" v-for="(item, index) in orderList" :key="index">
|
||||||
|
<div class="num">
|
||||||
|
<div v-for="(t, i) in cOrderValue(item.value)" :key="i">
|
||||||
|
{{ t }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom echarts" ref="echartsRef"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="top">
|
||||||
|
<div class="t-right">
|
||||||
|
<img src="/src/assets/img/item.png" />
|
||||||
|
<div>今日订单</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex" @click="openList">
|
||||||
|
<div>查看更多</div>
|
||||||
|
<div>{{ "〉" }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<dv-scroll-board :config="list" style="width: 100%; height: 90%" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</border>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 20px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/img/title3.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: "ifonts";
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.body-box {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
.left {
|
||||||
|
width: 60%;
|
||||||
|
height: 100%;
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
height: 25%;
|
||||||
|
margin-top: 1rem;
|
||||||
|
.view {
|
||||||
|
width: 21%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url(../../../assets/delivery_img/box4.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-family: "ifonts";
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
.num {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
div {
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.8rem;
|
||||||
|
background-image: url(../../../assets/delivery_img/icon_num.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
height: 70%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 38%;
|
||||||
|
height: 95%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
.top {
|
||||||
|
height: 10%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.t-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
div {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ceil) {
|
||||||
|
padding: 0 !important;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.header-item) {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref } from "vue"
|
||||||
|
import border from "@/components/border.vue";
|
||||||
|
import AMap from "./AMap.vue";
|
||||||
|
|
||||||
|
const test = () => {
|
||||||
|
console.log('ss');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="map">
|
||||||
|
<AMap></AMap>
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
<div class="btn">
|
||||||
|
<div class="c-b" @click.stop="test">
|
||||||
|
<div class="text">已取货(100)单</div>
|
||||||
|
</div>
|
||||||
|
<div class="c-b" @click.stop="test">
|
||||||
|
<div class="text">已配送(100)单</div>
|
||||||
|
</div>
|
||||||
|
<div class="c-b" @click.stop="test">
|
||||||
|
<div class="text">已完成(100)单</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
.border {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid rgba(91, 219, 246, 1);
|
||||||
|
box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.map {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
left: 2rem;
|
||||||
|
.c-b {
|
||||||
|
cursor: pointer;
|
||||||
|
background-image: url(../../../assets/delivery_img/icon9.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 4rem;
|
||||||
|
width: 11.5rem;
|
||||||
|
margin-bottom: 1.4rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.text {
|
||||||
|
margin-left: 4.5rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,438 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from "vue"
|
||||||
|
import border from "@/components/border.vue";
|
||||||
|
import AMapLeft from "./AMapLeft.vue";
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
|
||||||
|
var fontColor = "#000";
|
||||||
|
var seriesName = "";
|
||||||
|
let noramlSize = 16;
|
||||||
|
var datas = {
|
||||||
|
textValue: "100%",
|
||||||
|
colors: ["#31829d", "#009cff", "#4b5fdb"],
|
||||||
|
legendArr: ["待取货", "待配送", "已送达"],
|
||||||
|
dataArr: [
|
||||||
|
{ value: 335, name: "待取货" },
|
||||||
|
{ value: 210, name: "待配送" },
|
||||||
|
{ value: 410, name: "已送达" },
|
||||||
|
],
|
||||||
|
company: "个"
|
||||||
|
};
|
||||||
|
const option = {
|
||||||
|
backgroundColor: "rgba(0,0,0,0)",
|
||||||
|
color: datas.colors,
|
||||||
|
grid: {
|
||||||
|
left: "0%",
|
||||||
|
right: "0%",
|
||||||
|
bottom: "0%",
|
||||||
|
top: "0%"
|
||||||
|
},
|
||||||
|
graphic: {
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
left: 'center', // 相对父元素居中
|
||||||
|
bottom: '50%', // 相对父元素居中
|
||||||
|
style: {
|
||||||
|
fill: '#fff',
|
||||||
|
text: datas.textValue,
|
||||||
|
font: '18px Microsoft YaHei'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
backgroundColor: "#f6f6f6",
|
||||||
|
textStyle: {
|
||||||
|
color: "#000"
|
||||||
|
},
|
||||||
|
formatter: "{b}: {c}" + datas.company + " ({d}%)"
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
icon: "rect",
|
||||||
|
bottom: "5%",
|
||||||
|
left: "center",
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 12,
|
||||||
|
// itemGap: 50, //图例间隙
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: noramlSize
|
||||||
|
},
|
||||||
|
data: datas.legendArr
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["45%", "60%"],
|
||||||
|
center: ["50%", "45%"],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderWidth: 10,
|
||||||
|
borderColor: "#092846"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'bottom'
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#138af4"
|
||||||
|
},
|
||||||
|
length: 20,
|
||||||
|
length2: 50,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: datas.dataArr
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: "40%",
|
||||||
|
center: ["50%", "45%"],
|
||||||
|
z: -2,
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.2)'
|
||||||
|
},
|
||||||
|
data: [100]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const echartsRef = ref(null)
|
||||||
|
|
||||||
|
const initEcahrts = () => {
|
||||||
|
// 基于DOM元素初始化echarts实例
|
||||||
|
const chart = echarts.init(echartsRef.value);
|
||||||
|
|
||||||
|
// 使用配置项显示图表
|
||||||
|
chart.setOption(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initEcahrts()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<border>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">配送详情</div>
|
||||||
|
<div class="head-box b-box">商品信息</div>
|
||||||
|
<div class="order_h">
|
||||||
|
<div class="top">
|
||||||
|
<div>
|
||||||
|
订单编号
|
||||||
|
<span style="margin-left: 1rem"
|
||||||
|
>bzj20230923163643650ea39ba256c</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div>23-11-20</div>
|
||||||
|
</div>
|
||||||
|
<div class="line">
|
||||||
|
<div class="c"></div>
|
||||||
|
<div class="l"></div>
|
||||||
|
<div class="c"></div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div>
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon1.png" />
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="name1 b-box">
|
||||||
|
<div>商户名称</div>
|
||||||
|
</div>
|
||||||
|
<div class="name2">
|
||||||
|
<div>天天超市</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="name1 b-box">
|
||||||
|
<div>商品名称</div>
|
||||||
|
</div>
|
||||||
|
<div class="name2">
|
||||||
|
<div>山花纯牛奶100ml</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon2.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="head-box b-box">收件人信息</div>
|
||||||
|
<div class="order">
|
||||||
|
<div class="bottom">
|
||||||
|
<div>
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon4.png" />
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="name1 b-box">
|
||||||
|
<div>收件人</div>
|
||||||
|
</div>
|
||||||
|
<div class="name2">
|
||||||
|
<div>王**</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="name1 b-box">
|
||||||
|
<div>收件人电话</div>
|
||||||
|
</div>
|
||||||
|
<div class="name2">
|
||||||
|
<div>159****3366</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon8.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="order">
|
||||||
|
<div class="bottom">
|
||||||
|
<div>
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon6.png" />
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="name1 b-box">
|
||||||
|
<div>收件地址</div>
|
||||||
|
</div>
|
||||||
|
<div class="name2">
|
||||||
|
<div>泸县草芥幸福小区一号楼10-22</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="name1 b-box">
|
||||||
|
<div>当前状态</div>
|
||||||
|
</div>
|
||||||
|
<div class="name2">
|
||||||
|
<div>订单已完成</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon5.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="map">
|
||||||
|
<AMapLeft></AMapLeft>
|
||||||
|
<div class="border"></div>
|
||||||
|
</div>
|
||||||
|
<div class="head-box b-box">物流信息</div>
|
||||||
|
<div class="delivery">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-item">
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon7.png" />
|
||||||
|
<div>配送人员<span>里斯</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="left-item">
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon3.png" />
|
||||||
|
<div>配送车辆<span>川E G856Z</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right echarts" ref="echartsRef"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</border>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 20px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/img/title.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: "ifonts";
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.head-box {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-family: "ifonts";
|
||||||
|
width: calc(100% - 1rem);
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
.order {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/delivery_img/box2.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 10%;
|
||||||
|
.bottom {
|
||||||
|
width: 90%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
.img {
|
||||||
|
height: 4rem;
|
||||||
|
width: 3.5rem;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
height: 60%;
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.2rem 1.2rem;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
.name2 {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_h {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/delivery_img/box3.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 15%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
.top {
|
||||||
|
width: 90%;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
padding-top: 1rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
display: flex;
|
||||||
|
width: 90%;
|
||||||
|
align-items: center;
|
||||||
|
.c {
|
||||||
|
width: 0.2rem;
|
||||||
|
height: 0.2rem;
|
||||||
|
background-color: #5bdbf6;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.l {
|
||||||
|
flex: 1;
|
||||||
|
height: 0.1rem;
|
||||||
|
background-color: #5bdbf6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
.img {
|
||||||
|
height: 4rem;
|
||||||
|
width: 3.5rem;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
height: 80%;
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.2rem 1.2rem;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
.name2 {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.map {
|
||||||
|
height: 16%;
|
||||||
|
width: 96%;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
border: 1px solid rgba(91, 219, 246, 1);
|
||||||
|
position: relative;
|
||||||
|
.border {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.delivery {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 20%;
|
||||||
|
.left {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
.left-item {
|
||||||
|
height: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-image: url(../../../assets/delivery_img/box1.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 10%;
|
||||||
|
.img {
|
||||||
|
height: 4rem;
|
||||||
|
width: 3.5rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.b-box {
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(59, 74, 104, 0) 0%,
|
||||||
|
rgba(59, 74, 104, 0.27) 50%,
|
||||||
|
rgba(0, 168, 255, 0.4) 94%,
|
||||||
|
rgba(0, 156, 255, 0.8) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,172 @@
|
||||||
|
<script setup>
|
||||||
|
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
||||||
|
import border from "../../../components/border.vue"
|
||||||
|
const items = reactive([
|
||||||
|
{ id: 1, text: '莲花池 1' },
|
||||||
|
{ id: 2, text: '莲花池 2' },
|
||||||
|
{ id: 3, text: '莲花池 3' },
|
||||||
|
{ id: 3, text: '莲花池 4' },
|
||||||
|
{ id: 3, text: '莲花池 5' },
|
||||||
|
{ id: 3, text: '莲花池 6' },
|
||||||
|
{ id: 3, text: '莲花池 7' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
])
|
||||||
|
const scrollContainerRef = ref(null);
|
||||||
|
let timer = null;
|
||||||
|
const autoScroll = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
timer = setInterval(() => {
|
||||||
|
if (scrollContainerRef.value) {
|
||||||
|
scrollContainerRef.value.scrollTop += 1;
|
||||||
|
if (scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >= scrollContainerRef.value.scrollHeight - 1) {
|
||||||
|
scrollContainerRef.value.scrollTop = 0;
|
||||||
|
clearInterval(timer);
|
||||||
|
autoScroll();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 50)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
autoScroll();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer);
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<border>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">配送商品排行榜</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="scroll-container" ref="scrollContainerRef">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in items"
|
||||||
|
:key="item.id"
|
||||||
|
class="b-list-item"
|
||||||
|
>
|
||||||
|
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
||||||
|
{{ index + 1 }}
|
||||||
|
</div>
|
||||||
|
<div class="name">{{ item.text }}</div>
|
||||||
|
<div class="line">
|
||||||
|
<div
|
||||||
|
class="line-body"
|
||||||
|
:style="{ width: '80%' }"
|
||||||
|
:class="{ 'line-body2': index >= 3 }"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="count">6000</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</border>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/img/title.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: "ifonts";
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.scroll-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.b-list-item {
|
||||||
|
height: 3rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
.rank {
|
||||||
|
width: 50px;
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
.rank1 {
|
||||||
|
background-image: url(../../../assets/img/ranking1.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.rank2 {
|
||||||
|
background-image: url(../../../assets/img/ranking2.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
flex: 5;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
width: 50%;
|
||||||
|
height: 0.8rem;
|
||||||
|
background-color: #0a385b;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
.line-body {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
width: 0%;
|
||||||
|
background: linear-gradient(270deg, #00c0fe 0%, #0f87fa 100%);
|
||||||
|
}
|
||||||
|
.line-body2 {
|
||||||
|
background: linear-gradient(270deg, #5bdbf6 0%, #5bdbf6 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.count {
|
||||||
|
flex: 2;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: "ifonts";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<script setup>
|
||||||
|
import leftItem from "./components/left.vue";
|
||||||
|
import centerItem from "./components/center.vue";
|
||||||
|
import bottomItem from "./components/bottom.vue";
|
||||||
|
import rightItem from "./components/right.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="center">
|
||||||
|
<div class="item">
|
||||||
|
<leftItem style="height: 98%"></leftItem>
|
||||||
|
</div>
|
||||||
|
<div class="item item_c">
|
||||||
|
<div style="height: 61%; display: flex; justify-content: space-between">
|
||||||
|
<centerItem style="width: 64%"></centerItem>
|
||||||
|
<rightItem style="width: 35%"></rightItem>
|
||||||
|
</div>
|
||||||
|
<bottomItem style="height: 36%"></bottomItem>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.center {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
.item {
|
||||||
|
width: 26%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-content: center;
|
||||||
|
/* border: 1px solid red; */
|
||||||
|
& > .div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_c {
|
||||||
|
width: 72%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,242 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref, inject, nextTick } from "vue";
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import 'echarts-gl';
|
||||||
|
import mitt from "@/utils/mitt";
|
||||||
|
import luxian from "@/assets/json/luxian.json";
|
||||||
|
import hejiang from "@/assets/json/hejiang.json";
|
||||||
|
import xuyong from "@/assets/json/xuyong.json";
|
||||||
|
import gulin from "@/assets/json/gulin.json";
|
||||||
|
import jiangyang from "@/assets/json/jiangyang.json";
|
||||||
|
import longma from "@/assets/json/longma.json";
|
||||||
|
import naxi from "@/assets/json/naxi.json";
|
||||||
|
import { useAppStore } from "@/store/app.js";
|
||||||
|
|
||||||
|
|
||||||
|
const appStore = useAppStore();
|
||||||
|
|
||||||
|
const mapType = reactive({
|
||||||
|
name: '',
|
||||||
|
json: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const changeType = (name = 'luxian') => {
|
||||||
|
mapType.name = name;
|
||||||
|
if (name == 'luxian') mapType.json = luxian;
|
||||||
|
if (name == 'hejiang') mapType.json = hejiang;
|
||||||
|
if (name == 'xuyong') mapType.json = xuyong;
|
||||||
|
if (name == 'gulin') mapType.json = gulin;
|
||||||
|
if (name == 'jiangyang') mapType.json = jiangyang;
|
||||||
|
if (name == 'longma') mapType.json = longma;
|
||||||
|
if (name == 'naxi') mapType.json = naxi;
|
||||||
|
}
|
||||||
|
|
||||||
|
let dataValue = [
|
||||||
|
{
|
||||||
|
name: '测试一', value: [105.38, 29.15, 0],
|
||||||
|
store: 2065, team: 33,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试二', value: [105.62, 29.05, 0],
|
||||||
|
store: 665, team: 895,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试三', value: [105.55, 29.10, 0],
|
||||||
|
store: 66, team: 5422,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试四', value: [105.70, 29.23, 0],
|
||||||
|
store: 9887, team: 1562,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '泸县', value: [105.372029, 29.141426, 0],
|
||||||
|
store: 9999, team: 1000,
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
const customFormatter = (params) => {
|
||||||
|
// console.log(params.data);
|
||||||
|
return `{img|${params.data.name}}\n{t|店铺${params.data.store}个, 团队${params.data.team}个}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const initDateValue = () => {
|
||||||
|
dataValue.forEach(item => {
|
||||||
|
item.label = {
|
||||||
|
show: true, // 显示标签
|
||||||
|
formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
|
||||||
|
fontSize: 12, // 字体大小
|
||||||
|
fontWeight: 'bold', // 字体粗细
|
||||||
|
color: '#fff', // 字体颜色
|
||||||
|
offset: [-50, -40], // 标签偏移量，可根据需要调整
|
||||||
|
rich: {
|
||||||
|
img: {
|
||||||
|
backgroundColor: {
|
||||||
|
image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
|
||||||
|
},
|
||||||
|
height: 40,
|
||||||
|
width: 140,
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 14,
|
||||||
|
fontFamily: 'ifonts',
|
||||||
|
align: 'center',
|
||||||
|
padding: [0, 0, 20, 0]
|
||||||
|
},
|
||||||
|
t: {
|
||||||
|
fontSize: 10,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const echartsRef = ref(null);
|
||||||
|
let chart = null;
|
||||||
|
|
||||||
|
const initMap = () => {
|
||||||
|
// 基于DOM元素初始化echarts实例
|
||||||
|
if (chart == null) {
|
||||||
|
chart = echarts.init(echartsRef.value);
|
||||||
|
}
|
||||||
|
echarts.registerMap(mapType.name, mapType.json);
|
||||||
|
|
||||||
|
let domImg = document.createElement("img");
|
||||||
|
domImg.style.height = '1000px';
|
||||||
|
domImg.style.width = "1000px";
|
||||||
|
domImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6b962202311291338462283.png';
|
||||||
|
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
animation: false,
|
||||||
|
//geo方式地理坐标系组件。
|
||||||
|
geo3D: [
|
||||||
|
{
|
||||||
|
map: mapType.name,
|
||||||
|
zoom: 1.0,
|
||||||
|
axisLine: {
|
||||||
|
show: false // 设置为false隐藏坐标轴
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
disabled: true,
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 25,
|
||||||
|
|
||||||
|
},
|
||||||
|
// 选中状态下的多边形和标签样式
|
||||||
|
// emphasis: {
|
||||||
|
// itemStyle: {
|
||||||
|
// // color: '#546686', //地图背景色
|
||||||
|
// borderColor: '#fff', //省市边界线00fcff 516a89
|
||||||
|
// borderWidth: 1,
|
||||||
|
// },
|
||||||
|
// label: {
|
||||||
|
// color: '#fff'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
emphasis: {
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
// aspectScale:0.75, //长宽比
|
||||||
|
// roam: true, //是否允许缩放
|
||||||
|
itemStyle: {
|
||||||
|
color: '#546686', //地图背景色
|
||||||
|
borderColor: '#fff', //省市边界线00fcff 516a89
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
regionHright: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "scatter",
|
||||||
|
coordinateSystem: "geo",
|
||||||
|
data: dataValue,
|
||||||
|
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
|
||||||
|
symbolSize: [40, 30],
|
||||||
|
hoverSymbolSize: [60, 45],
|
||||||
|
label: {
|
||||||
|
formatter: "",
|
||||||
|
position: "center",
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
// tooltip: {
|
||||||
|
// formatter (value) {
|
||||||
|
// console.log(value);
|
||||||
|
// return "";
|
||||||
|
// },
|
||||||
|
// show: true
|
||||||
|
// },
|
||||||
|
// encode: {
|
||||||
|
// value: 2
|
||||||
|
// },
|
||||||
|
// itemStyle: {
|
||||||
|
// color: "#0efacc"
|
||||||
|
// },
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
// 使用配置项显示图表
|
||||||
|
chart.setOption(option);
|
||||||
|
|
||||||
|
// 添加自定义图形，实现地图倾斜效果
|
||||||
|
chart.dispatchAction({
|
||||||
|
type: 'updateLayout',
|
||||||
|
rotation: Math.PI / 4, // 设置旋转角度
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置3D效果，实现地图立体效果
|
||||||
|
chart.setOption({
|
||||||
|
grid3D: {},
|
||||||
|
xAxis3D: {},
|
||||||
|
yAxis3D: {},
|
||||||
|
zAxis3D: {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
changeType(appStore.map_info);
|
||||||
|
initDateValue();
|
||||||
|
initMap();
|
||||||
|
nextTick(() => {
|
||||||
|
mitt.on('map_info', e => {
|
||||||
|
changeType(e.pinyin);
|
||||||
|
initDateValue();
|
||||||
|
initMap();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="map">
|
||||||
|
<div class="echarts" ref="echartsRef"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
/* background-color: rgba($color: #fff, $alpha: 0.3); */
|
||||||
|
.echarts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,380 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from "vue"
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const initData = (data) => {
|
||||||
|
let arr = [];
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
arr.push(
|
||||||
|
[
|
||||||
|
`${i + 1}`,
|
||||||
|
`-`,
|
||||||
|
`-`,
|
||||||
|
`-`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
list.data = arr;
|
||||||
|
scrollBoardRef.value.updateRows(list.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
const scrollBoardRef = ref(null);
|
||||||
|
const list = reactive({
|
||||||
|
header: [
|
||||||
|
`序号`,
|
||||||
|
`基地名称`,
|
||||||
|
`养殖种类`,
|
||||||
|
`养殖数量`,
|
||||||
|
],
|
||||||
|
data: [],
|
||||||
|
// index: true,
|
||||||
|
headerBGC: '#0d599c',
|
||||||
|
oddRowBGC: 'rgba(91, 219, 246, 0.10)',
|
||||||
|
evenRowBGC: '',
|
||||||
|
columnWidth: [50],
|
||||||
|
align: 'center',
|
||||||
|
rowNum: 7
|
||||||
|
})
|
||||||
|
|
||||||
|
const echarts1Ref = ref(null);
|
||||||
|
const echarts2Ref = ref(null);
|
||||||
|
const initMap = () => {
|
||||||
|
// 基于DOM元素初始化echarts实例
|
||||||
|
const chart1 = echarts.init(echarts1Ref.value);
|
||||||
|
const chart2 = echarts.init(echarts2Ref.value);
|
||||||
|
|
||||||
|
let option1 = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
// icon: "rect",
|
||||||
|
orient: 'vertical', // 将图例竖直布局
|
||||||
|
itemWidth: 8,
|
||||||
|
itemHeight: 8,
|
||||||
|
right: "5%",
|
||||||
|
// bottom: "center",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
center: ['30%', '50%'], // 设置左半部分饼图的位置
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
fontSize: 10,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: 'Search Engine' },
|
||||||
|
{ value: 735, name: 'Direct' },
|
||||||
|
{ value: 580, name: 'Email' },
|
||||||
|
{ value: 484, name: 'Union Ads' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
let option2 = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
// icon: "rect",
|
||||||
|
orient: 'vertical', // 将图例竖直布局
|
||||||
|
itemWidth: 8,
|
||||||
|
itemHeight: 8,
|
||||||
|
right: "5%",
|
||||||
|
// bottom: "center",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
center: ['30%', '50%'], // 设置左半部分饼图的位置
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
fontSize: 10,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: 'Search Engine' },
|
||||||
|
{ value: 735, name: 'Direct' },
|
||||||
|
{ value: 580, name: 'Email' },
|
||||||
|
{ value: 484, name: 'Union Ads' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
chart1.setOption(option1);
|
||||||
|
chart2.setOption(option2);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initData();
|
||||||
|
initMap();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="view box1">
|
||||||
|
<div class="box-title">
|
||||||
|
<div class="text">养殖基地总数</div>
|
||||||
|
<div class="bg"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tab">
|
||||||
|
<div class="tab-item">
|
||||||
|
<img src="/src/assets/index_img/icon1.png" />
|
||||||
|
<div>基地总数</div>
|
||||||
|
<div class="count">{{ 50 }}个</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-item">
|
||||||
|
<img src="/src/assets/index_img/icon1.png" />
|
||||||
|
<div>基地总数</div>
|
||||||
|
<div class="count">{{ 200 }}亩</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<dv-scroll-board
|
||||||
|
ref="scrollBoardRef"
|
||||||
|
:config="list"
|
||||||
|
style="width: 100%; height: 68%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="view box2">
|
||||||
|
<div class="box-title">
|
||||||
|
<div class="text">养殖基地视频监控</div>
|
||||||
|
<div class="bg"></div>
|
||||||
|
</div>
|
||||||
|
<div class="video">
|
||||||
|
<div class="left">
|
||||||
|
<img src="/src/assets/index_img/video.png" />
|
||||||
|
<div class="title">泸县原生态养殖基地</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="item">
|
||||||
|
<img src="/src/assets/index_img/video.png" />
|
||||||
|
<div class="title">泸县原生态养殖基地</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="/src/assets/index_img/video.png" />
|
||||||
|
<div class="title">泸县原生态养殖基地</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="/src/assets/index_img/video.png" />
|
||||||
|
<div class="title">泸县原生态养殖基地</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="/src/assets/index_img/video.png" />
|
||||||
|
<div class="title">泸县原生态养殖基地</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="view box3">
|
||||||
|
<div class="box-title">
|
||||||
|
<div class="text">养殖产品溯源</div>
|
||||||
|
<div class="bg"></div>
|
||||||
|
</div>
|
||||||
|
<div class="chart">
|
||||||
|
<div ref="echarts1Ref"></div>
|
||||||
|
<div ref="echarts2Ref"></div>
|
||||||
|
</div>
|
||||||
|
<div class="qr">
|
||||||
|
<div class="qr_card" v-for="(item, index) in 6" :key="index">
|
||||||
|
<div class="name">
|
||||||
|
<div>品类名称: 黑山羊</div>
|
||||||
|
<div>溯源编码: 02457487544</div>
|
||||||
|
</div>
|
||||||
|
<img src="/src/assets/index_img/icon1.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
.view {
|
||||||
|
/* border: 1px solid red; */
|
||||||
|
width: 96%;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-direction: column;
|
||||||
|
.box-title {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
.text {
|
||||||
|
text-align: left;
|
||||||
|
font-family: "ifonts";
|
||||||
|
padding: 0.2rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
.bg {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
background-image: url(../../../assets/index_img/title1.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box1 {
|
||||||
|
height: 34%;
|
||||||
|
.tab {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
.tab-item {
|
||||||
|
width: 40%;
|
||||||
|
height: 3rem;
|
||||||
|
background-image: url(../../../assets/index_img/box1.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
img {
|
||||||
|
height: 1.8rem;
|
||||||
|
width: 1.8rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
.count {
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box2 {
|
||||||
|
height: 24%;
|
||||||
|
.video {
|
||||||
|
height: 80%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.left {
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
width: 48%;
|
||||||
|
height: 46%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box3 {
|
||||||
|
height: 40%;
|
||||||
|
.chart {
|
||||||
|
height: 25%;
|
||||||
|
display: flex;
|
||||||
|
div {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.qr {
|
||||||
|
height: 66%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.qr_card {
|
||||||
|
width: 50%;
|
||||||
|
height: 33%;
|
||||||
|
background-image: url(../../../assets/index_img/box2.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
img {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: auto;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
text-align: left;
|
||||||
|
div {
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
div:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.border {
|
||||||
|
background-image: url(../../../assets/img/border2.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 100%;
|
||||||
|
width: 0.4rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,243 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref, inject, nextTick } from "vue";
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import 'echarts-gl';
|
||||||
|
import axios from "axios";
|
||||||
|
import mitt from "@/utils/mitt";
|
||||||
|
import luxian from "@/assets/json/luxian.json";
|
||||||
|
import hejiang from "@/assets/json/hejiang.json";
|
||||||
|
import xuyong from "@/assets/json/xuyong.json";
|
||||||
|
import gulin from "@/assets/json/gulin.json";
|
||||||
|
import jiangyang from "@/assets/json/jiangyang.json";
|
||||||
|
import longma from "@/assets/json/longma.json";
|
||||||
|
import naxi from "@/assets/json/naxi.json";
|
||||||
|
import { useAppStore } from "@/store/app.js";
|
||||||
|
|
||||||
|
const appStore = useAppStore();
|
||||||
|
|
||||||
|
const mapType = reactive({
|
||||||
|
name: '',
|
||||||
|
json: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const changeType = (name = 'luxian') => {
|
||||||
|
mapType.name = name;
|
||||||
|
if (name == 'luxian') mapType.json = luxian;
|
||||||
|
if (name == 'hejiang') mapType.json = hejiang;
|
||||||
|
if (name == 'xuyong') mapType.json = xuyong;
|
||||||
|
if (name == 'gulin') mapType.json = gulin;
|
||||||
|
if (name == 'jiangyang') mapType.json = jiangyang;
|
||||||
|
if (name == 'longma') mapType.json = longma;
|
||||||
|
if (name == 'naxi') mapType.json = naxi;
|
||||||
|
}
|
||||||
|
|
||||||
|
let dataValue = [
|
||||||
|
{
|
||||||
|
name: '测试一', value: [105.38, 29.15, 0],
|
||||||
|
store: 2065, team: 33,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试二', value: [105.62, 29.05, 0],
|
||||||
|
store: 665, team: 895,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试三', value: [105.55, 29.10, 0],
|
||||||
|
store: 66, team: 5422,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试四', value: [105.70, 29.23, 0],
|
||||||
|
store: 9887, team: 1562,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '泸县', value: [105.372029, 29.141426, 0],
|
||||||
|
store: 9999, team: 1000,
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
const customFormatter = (params) => {
|
||||||
|
// console.log(params.data);
|
||||||
|
return `{img|${params.data.name}}\n{t|店铺${params.data.store}个, 团队${params.data.team}个}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const initDateValue = () => {
|
||||||
|
dataValue.forEach(item => {
|
||||||
|
item.label = {
|
||||||
|
show: true, // 显示标签
|
||||||
|
formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
|
||||||
|
fontSize: 12, // 字体大小
|
||||||
|
fontWeight: 'bold', // 字体粗细
|
||||||
|
color: '#fff', // 字体颜色
|
||||||
|
offset: [-50, -40], // 标签偏移量，可根据需要调整
|
||||||
|
rich: {
|
||||||
|
img: {
|
||||||
|
backgroundColor: {
|
||||||
|
image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
|
||||||
|
},
|
||||||
|
height: 40,
|
||||||
|
width: 140,
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 14,
|
||||||
|
fontFamily: 'ifonts',
|
||||||
|
align: 'center',
|
||||||
|
padding: [0, 0, 20, 0]
|
||||||
|
},
|
||||||
|
t: {
|
||||||
|
fontSize: 10,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const echartsRef = ref(null);
|
||||||
|
let chart = null;
|
||||||
|
|
||||||
|
const initMap = async () => {
|
||||||
|
// 基于DOM元素初始化echarts实例
|
||||||
|
if (chart == null) {
|
||||||
|
chart = echarts.init(echartsRef.value);
|
||||||
|
}
|
||||||
|
// echarts.registerMap(mapType.name, mapType.json);
|
||||||
|
|
||||||
|
var uploadedDataURL = "http://img.isqqw.com/profile/upload/2023/09/27/f99fb3b0-8d57-4f85-a15c-958cd18fda15.svg";
|
||||||
|
|
||||||
|
// let {data} = await axios.get('http://img.isqqw.com/profile/upload/2023/09/27/f99fb3b0-8d57-4f85-a15c-958cd18fda15.svg', { responseType: 'text' });
|
||||||
|
let {data} = await axios.get('/public/luxian.svg', { responseType: 'text' });
|
||||||
|
|
||||||
|
echarts.registerMap('organ_diagram', { svg: data });
|
||||||
|
let datas = {};
|
||||||
|
let option = {
|
||||||
|
backgroundColor: 'rgba(0,0,0,0)',
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
trigger: 'item',
|
||||||
|
backgroundColor: 'rgba(166, 200, 76, 0.82)',
|
||||||
|
borderColor: '#FFFFCC',
|
||||||
|
showDelay: 0,
|
||||||
|
hideDelay: 0,
|
||||||
|
enterable: true,
|
||||||
|
transitionDuration: 0,
|
||||||
|
extraCssText: 'z-index:100',
|
||||||
|
formatter: function (params, ticket, callback) {
|
||||||
|
console.log(params);
|
||||||
|
//根据业务自己拓展要显示的内容
|
||||||
|
var res = '';
|
||||||
|
var name = params.name;
|
||||||
|
var value = params.value[params.seriesIndex + 1] || params.value;
|
||||||
|
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value;
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
//图例值控制
|
||||||
|
min: 1,
|
||||||
|
max: 10,
|
||||||
|
calculable: true,
|
||||||
|
show: false,
|
||||||
|
color: ['#f44336', '#00eaff'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
geo: {
|
||||||
|
map: 'organ_diagram',
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 0,
|
||||||
|
},
|
||||||
|
// boundingCoords: [
|
||||||
|
// [105.372029, 29.141426],
|
||||||
|
// [105.70, 29.23]
|
||||||
|
// ],
|
||||||
|
emphasis: {
|
||||||
|
focus: 'none',
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: '#ffffff',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
// {
|
||||||
|
// type: 'map',
|
||||||
|
// map: 'organ_diagram',
|
||||||
|
// data: luxian
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "scatter",
|
||||||
|
coordinateSystem: "geo",
|
||||||
|
data: dataValue,
|
||||||
|
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
|
||||||
|
symbolSize: [40, 30],
|
||||||
|
hoverSymbolSize: [60, 45],
|
||||||
|
label: {
|
||||||
|
formatter: "",
|
||||||
|
position: "center",
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
// tooltip: {
|
||||||
|
// formatter (value) {
|
||||||
|
// console.log(value);
|
||||||
|
// return "";
|
||||||
|
// },
|
||||||
|
// show: true
|
||||||
|
// },
|
||||||
|
// encode: {
|
||||||
|
// value: 2
|
||||||
|
// },
|
||||||
|
// itemStyle: {
|
||||||
|
// color: "#0efacc"
|
||||||
|
// },
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
// 使用配置项显示图表
|
||||||
|
chart.setOption(option);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
changeType(appStore.map_info);
|
||||||
|
initDateValue();
|
||||||
|
initMap();
|
||||||
|
// nextTick(() => {
|
||||||
|
// mitt.on('map_info', e => {
|
||||||
|
// changeType(e.pinyin);
|
||||||
|
// initDateValue();
|
||||||
|
// initMap();
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="map">
|
||||||
|
<div class="echarts" ref="echartsRef"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
/* background-color: rgba($color: #fff, $alpha: 0.3); */
|
||||||
|
.echarts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,202 @@
|
||||||
|
<template>
|
||||||
|
<div class="box-a">
|
||||||
|
<div class="star">
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
<div class="starline"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.box-a {
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
height: 100%;
|
||||||
|
height: 100%;
|
||||||
|
transform: rotateX(70deg) rotateY(-20deg);
|
||||||
|
}
|
||||||
|
.star {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
width: 50vh;
|
||||||
|
height: 50vh;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
/*border: 1px solid #fff;*/
|
||||||
|
animation: starrotate 10s linear;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
.starline {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid #3870b4;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.starline:nth-child(1) {
|
||||||
|
transform: rotateY(10deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(2) {
|
||||||
|
transform: rotateY(20deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(3) {
|
||||||
|
transform: rotateY(30deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(4) {
|
||||||
|
transform: rotateY(40deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(5) {
|
||||||
|
transform: rotateY(500deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(6) {
|
||||||
|
transform: rotateY(60deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(7) {
|
||||||
|
transform: rotateY(70deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(8) {
|
||||||
|
transform: rotateY(80deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(9) {
|
||||||
|
transform: rotateY(90deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(10) {
|
||||||
|
transform: rotateY(100deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(11) {
|
||||||
|
transform: rotateY(110deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(12) {
|
||||||
|
transform: rotateY(120deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(13) {
|
||||||
|
transform: rotateY(130deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(14) {
|
||||||
|
transform: rotateY(140deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(15) {
|
||||||
|
transform: rotateY(150deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(16) {
|
||||||
|
transform: rotateY(160deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(17) {
|
||||||
|
transform: rotateY(170deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(18) {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(19) {
|
||||||
|
transform: rotateX(10deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(20) {
|
||||||
|
transform: rotateX(20deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(21) {
|
||||||
|
transform: rotateX(30deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(22) {
|
||||||
|
transform: rotateX(40deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(23) {
|
||||||
|
transform: rotateX(50deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(24) {
|
||||||
|
transform: rotateX(60deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(25) {
|
||||||
|
transform: rotateX(70deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(26) {
|
||||||
|
transform: rotateX(80deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(27) {
|
||||||
|
transform: rotateX(90deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(28) {
|
||||||
|
transform: rotateX(100deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(29) {
|
||||||
|
transform: rotateX(110deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(30) {
|
||||||
|
transform: rotateX(120deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(31) {
|
||||||
|
transform: rotateX(130deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(32) {
|
||||||
|
transform: rotateX(140deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(33) {
|
||||||
|
transform: rotateX(150deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(34) {
|
||||||
|
transform: rotateX(160deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(35) {
|
||||||
|
transform: rotateX(170deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(36) {
|
||||||
|
transform: rotateX(180deg);
|
||||||
|
}
|
||||||
|
.starline:nth-child(36) {
|
||||||
|
transform: rotateX(180deg);
|
||||||
|
}
|
||||||
|
@keyframes starrotate {
|
||||||
|
from {
|
||||||
|
transform: rotateZ(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotateZ(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<script setup>
|
||||||
|
import ball from "./ball.vue";
|
||||||
|
import centerMap from "./centerMap.vue";
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="ball">
|
||||||
|
<ball class="ball1"></ball>
|
||||||
|
</div>
|
||||||
|
<centerMap class="c-map"></centerMap>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
.ball {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.c-map {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,236 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from "vue";
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import border from "../../../components/border.vue"
|
||||||
|
const xData2 = reactive(["福集镇", "嘉明镇", "喻寺镇", "得胜镇", "牛滩镇", "兆雅镇",
|
||||||
|
"太伏镇", "云龙镇", "石桥镇", "毗卢镇", "奇峰镇", "潮河镇", "云锦镇"]);
|
||||||
|
const data1 = reactive([200, 100, 200, 200, 100, 120, 150, 164, 153, 140, 255, 284, 230]);
|
||||||
|
const data_bottom = reactive([]);
|
||||||
|
|
||||||
|
const option = reactive({
|
||||||
|
backgroundColor: 'rgba(0,0,0,0)',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
backgroundColor: 'rgba(91, 219, 246, 0.7)',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 60,
|
||||||
|
bottom: 50
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: xData2,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
margin: 20, //刻度标签与轴线之间的距离。
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(0, 156, 255, 0.10)' // 设置分隔线颜色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{//三个最低下的圆片
|
||||||
|
"name": "",
|
||||||
|
"type": "pictorialBar",
|
||||||
|
"symbolSize": [10, 4],
|
||||||
|
"symbolOffset": [0, 2],
|
||||||
|
"z": 12,
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 1,
|
||||||
|
color: function (params) {
|
||||||
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#0E60B2' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#5BDBF6'// 100% 处的颜色
|
||||||
|
}], false)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"data": data_bottom
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
//下半截柱状图
|
||||||
|
{
|
||||||
|
name: '2020',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 10,
|
||||||
|
barGap: '-100%',
|
||||||
|
itemStyle: {//lenged文本
|
||||||
|
opacity: .7,
|
||||||
|
color: function (params) {
|
||||||
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#0E60B2' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#5BDBF6'// 100% 处的颜色
|
||||||
|
}], false)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data: data1
|
||||||
|
},
|
||||||
|
|
||||||
|
{ // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 10,
|
||||||
|
barGap: '-100%',
|
||||||
|
stack: '广告',
|
||||||
|
itemStyle: {
|
||||||
|
color: 'transparent'
|
||||||
|
},
|
||||||
|
data: data1
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"name": "",
|
||||||
|
"type": "pictorialBar",
|
||||||
|
"symbolSize": [10, 4],
|
||||||
|
"symbolOffset": [0, -2],
|
||||||
|
"z": 12,
|
||||||
|
itemStyle: {
|
||||||
|
opacity: 1,
|
||||||
|
color: function (params) {
|
||||||
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#0E60B2' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#5BDBF6'// 100% 处的颜色
|
||||||
|
}], false)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"symbolPosition": "end",
|
||||||
|
"data": data1
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
const echartsRef = ref(null);
|
||||||
|
const initMap = () => {
|
||||||
|
|
||||||
|
// 基于DOM元素初始化echarts实例
|
||||||
|
const chart = echarts.init(echartsRef.value);
|
||||||
|
|
||||||
|
data1.forEach(item => {
|
||||||
|
data_bottom.push(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 使用配置项显示图表
|
||||||
|
chart.setOption(option);
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
initMap()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<border>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">订单总数</div>
|
||||||
|
<div class="box-c">
|
||||||
|
<div class="left">
|
||||||
|
<div class="img">
|
||||||
|
<div class="text">61258</div>
|
||||||
|
</div>
|
||||||
|
<div>订单总数</div>
|
||||||
|
</div>
|
||||||
|
<div class="map" ref="echartsRef"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</border>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
height: 88%;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/img/title2.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: "ifonts";
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.box-c {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 80px);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.left {
|
||||||
|
width: 11rem;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
.img {
|
||||||
|
color: #5bdbf6;
|
||||||
|
font-family: "ifonts";
|
||||||
|
width: 10.2rem;
|
||||||
|
height: 10.5rem;
|
||||||
|
background-image: url(../../../assets/img/order_ball.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 2rem;
|
||||||
|
.text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.map {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,306 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref, inject, nextTick } from "vue";
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import 'echarts-gl';
|
||||||
|
import mitt from "@/utils/mitt";
|
||||||
|
import luxian from "@/assets/json/luxian.json";
|
||||||
|
import hejiang from "@/assets/json/hejiang.json";
|
||||||
|
import xuyong from "@/assets/json/xuyong.json";
|
||||||
|
import gulin from "@/assets/json/gulin.json";
|
||||||
|
import jiangyang from "@/assets/json/jiangyang.json";
|
||||||
|
import longma from "@/assets/json/longma.json";
|
||||||
|
import naxi from "@/assets/json/naxi.json";
|
||||||
|
import { useAppStore } from "@/store/app.js";
|
||||||
|
|
||||||
|
|
||||||
|
const appStore = useAppStore();
|
||||||
|
|
||||||
|
const mapType = reactive({
|
||||||
|
name: '',
|
||||||
|
json: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const changeType = (name = 'luxian') => {
|
||||||
|
mapType.name = name;
|
||||||
|
if (name == 'luxian') mapType.json = luxian;
|
||||||
|
if (name == 'hejiang') mapType.json = hejiang;
|
||||||
|
if (name == 'xuyong') mapType.json = xuyong;
|
||||||
|
if (name == 'gulin') mapType.json = gulin;
|
||||||
|
if (name == 'jiangyang') mapType.json = jiangyang;
|
||||||
|
if (name == 'longma') mapType.json = longma;
|
||||||
|
if (name == 'naxi') mapType.json = naxi;
|
||||||
|
}
|
||||||
|
|
||||||
|
let dataValue = [
|
||||||
|
{
|
||||||
|
name: '测试一', value: [105.38, 29.15],
|
||||||
|
store: 2065, team: 33,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试二', value: [105.62, 29.05],
|
||||||
|
store: 665, team: 895,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试三', value: [105.55, 29.10],
|
||||||
|
store: 66, team: 5422,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试四', value: [105.70, 29.23],
|
||||||
|
store: 9887, team: 1562,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '泸县', value: [105.372029, 29.141426],
|
||||||
|
store: 9999, team: 1000,
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
const customFormatter = (params) => {
|
||||||
|
// console.log(params.data);
|
||||||
|
return `{img|${params.data.name}}\n{t|店铺${params.data.store}个, 团队${params.data.team}个}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const initDateValue = () => {
|
||||||
|
dataValue.forEach(item => {
|
||||||
|
item.label = {
|
||||||
|
show: true, // 显示标签
|
||||||
|
formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
|
||||||
|
fontSize: 12, // 字体大小
|
||||||
|
fontWeight: 'bold', // 字体粗细
|
||||||
|
color: '#fff', // 字体颜色
|
||||||
|
offset: [-50, -40], // 标签偏移量，可根据需要调整
|
||||||
|
rich: {
|
||||||
|
img: {
|
||||||
|
backgroundColor: {
|
||||||
|
image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
|
||||||
|
},
|
||||||
|
height: 40,
|
||||||
|
width: 140,
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 14,
|
||||||
|
fontFamily: 'ifonts',
|
||||||
|
align: 'center',
|
||||||
|
padding: [0, 0, 20, 0]
|
||||||
|
},
|
||||||
|
t: {
|
||||||
|
fontSize: 10,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const echartsRef = ref(null);
|
||||||
|
let chart = null;
|
||||||
|
|
||||||
|
const initMap = () => {
|
||||||
|
// 基于DOM元素初始化echarts实例
|
||||||
|
if (chart == null) {
|
||||||
|
chart = echarts.init(echartsRef.value);
|
||||||
|
}
|
||||||
|
echarts.registerMap(mapType.name, mapType.json);
|
||||||
|
|
||||||
|
let domImg = document.createElement("img");
|
||||||
|
domImg.style.height = '1000px';
|
||||||
|
domImg.style.width = "1000px";
|
||||||
|
domImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6b962202311291338462283.png';
|
||||||
|
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
animation: false,
|
||||||
|
//geo方式地理坐标系组件。
|
||||||
|
geo: [
|
||||||
|
{
|
||||||
|
map: mapType.name,
|
||||||
|
zoom: 1.0,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
disabled: true,
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 25,
|
||||||
|
// 高亮状态下的多边形和标签样式。
|
||||||
|
|
||||||
|
},
|
||||||
|
// 选中状态下的多边形和标签样式
|
||||||
|
// emphasis: {
|
||||||
|
// itemStyle: {
|
||||||
|
// // color: '#546686', //地图背景色
|
||||||
|
// borderColor: '#fff', //省市边界线00fcff 516a89
|
||||||
|
// borderWidth: 1,
|
||||||
|
// },
|
||||||
|
// label: {
|
||||||
|
// color: '#fff'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
emphasis: {
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
// aspectScale:0.75, //长宽比
|
||||||
|
// roam: true, //是否允许缩放
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
// color: '#546686', //地图背景色
|
||||||
|
borderColor: '#fff', //省市边界线00fcff 516a89
|
||||||
|
borderWidth: 1,
|
||||||
|
areaColor: "#3f5171",
|
||||||
|
shadowColor: "#5bdbf6",
|
||||||
|
shadowOffsetX: 5,
|
||||||
|
shadowOffsetY: 10,
|
||||||
|
// shadowBlur: 2
|
||||||
|
shadowBlur: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
//第一层投影
|
||||||
|
{
|
||||||
|
map: mapType.name,
|
||||||
|
zlevel: -1,
|
||||||
|
zoom: 1.01, //当前视角的缩放比例
|
||||||
|
roam: false, //是否开启平游或缩放
|
||||||
|
show: true,
|
||||||
|
emphasis: {
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderJoin: "round",
|
||||||
|
borderColor: "rgba(176,228,252,1)",
|
||||||
|
borderWidth: 3,
|
||||||
|
areaColor: "rgba(133,188,232,1)",
|
||||||
|
shadowColor: "rgba(133,188,232,.7)",
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 0,
|
||||||
|
shadowBlur: 25,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "map",
|
||||||
|
map: mapType.name,
|
||||||
|
emphasis: {
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
areaColor: "#3f5171",
|
||||||
|
borderColor: "#fff",
|
||||||
|
borderWidth: 1,
|
||||||
|
// shadowColor: "#5bdbf6",
|
||||||
|
// shadowOffsetX: 5,
|
||||||
|
// shadowOffsetY: 10,
|
||||||
|
// shadowBlur: 30,
|
||||||
|
// areaColor: {
|
||||||
|
// image: domImg,
|
||||||
|
// repeat: 'no-repeat',
|
||||||
|
// },
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// viewControl: { // 用于控制地图的倾斜和旋转
|
||||||
|
// distance: 120, // 地图与相机的距离
|
||||||
|
// alpha: 35, // 地图的倾斜角度
|
||||||
|
// beta: 0 // 地图的旋转角度
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "scatter",
|
||||||
|
coordinateSystem: "geo",
|
||||||
|
data: dataValue,
|
||||||
|
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
|
||||||
|
symbolSize: [40, 30],
|
||||||
|
hoverSymbolSize: [60, 45],
|
||||||
|
label: {
|
||||||
|
formatter: "",
|
||||||
|
position: "center",
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
// tooltip: {
|
||||||
|
// formatter (value) {
|
||||||
|
// console.log(value);
|
||||||
|
// return "";
|
||||||
|
// },
|
||||||
|
// show: true
|
||||||
|
// },
|
||||||
|
// encode: {
|
||||||
|
// value: 2
|
||||||
|
// },
|
||||||
|
// itemStyle: {
|
||||||
|
// color: "#0efacc"
|
||||||
|
// },
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
// 使用配置项显示图表
|
||||||
|
chart.setOption(option);
|
||||||
|
|
||||||
|
// 添加自定义图形，实现地图倾斜效果
|
||||||
|
chart.dispatchAction({
|
||||||
|
type: 'updateLayout',
|
||||||
|
rotation: Math.PI / 4, // 设置旋转角度
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置3D效果，实现地图立体效果
|
||||||
|
chart.setOption({
|
||||||
|
grid3D: {},
|
||||||
|
xAxis3D: {},
|
||||||
|
yAxis3D: {},
|
||||||
|
zAxis3D: {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
changeType(appStore.map_info);
|
||||||
|
initDateValue();
|
||||||
|
initMap();
|
||||||
|
nextTick(() => {
|
||||||
|
mitt.on('map_info', e => {
|
||||||
|
changeType(e.pinyin);
|
||||||
|
initDateValue();
|
||||||
|
initMap();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="map">
|
||||||
|
<div class="echarts" ref="echartsRef"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
/* background-color: rgba($color: #fff, $alpha: 0.3); */
|
||||||
|
.echarts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,264 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from "vue"
|
||||||
|
import border from "@/components/border.vue"
|
||||||
|
import mitt from "@/utils/mitt"
|
||||||
|
|
||||||
|
const initData = (aaa) => {
|
||||||
|
for (let i = 0; i < 20; i++) {
|
||||||
|
if (i % 2 == 0) {
|
||||||
|
aaa.data.push(
|
||||||
|
[
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)' >排sd序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
aaa.data.push(
|
||||||
|
[
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)' >排sd序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const list = reactive({
|
||||||
|
header: [
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>ID</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人电话</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>商品名称</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人地址</div>`,
|
||||||
|
],
|
||||||
|
data: [],
|
||||||
|
// index: true,
|
||||||
|
// headerBGC: 'rgba(0, 168, 255, 0.76)',
|
||||||
|
// oddRowBGC: 'rgba(91, 219, 246, 0.20)',
|
||||||
|
// evenRowBGC: 'rgba(0, 168, 255, 0.16)',
|
||||||
|
oddRowBGC: '',
|
||||||
|
evenRowBGC: "",
|
||||||
|
// columnWidth: [50],
|
||||||
|
align: ['center'],
|
||||||
|
rowNum: 7
|
||||||
|
})
|
||||||
|
const cell1 = reactive({
|
||||||
|
value: 66,
|
||||||
|
label: '66.66%',
|
||||||
|
count: 66542,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderGap: 1,
|
||||||
|
borderRadius: 3,
|
||||||
|
colors: ['#66FFFF', '#FEDB65']
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const openList = () => {
|
||||||
|
mitt.emit('showBusinesses')
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initData(list);
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<border>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">今日订单数</div>
|
||||||
|
<div class="my-day-num">
|
||||||
|
<div class="my-num-item">0</div>
|
||||||
|
<div class="my-num-item">0</div>
|
||||||
|
<div class="my-num-item">5</div>
|
||||||
|
<div class="my-num-item">2</div>
|
||||||
|
<div class="my-num-item">4</div>
|
||||||
|
<div class="my-num-item">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="order-list">
|
||||||
|
<div class="top">
|
||||||
|
<div class="t-right">
|
||||||
|
<img src="/src/assets/img/item.png" />
|
||||||
|
<div>今日订单</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex" @click="openList">
|
||||||
|
<div>查看更多</div>
|
||||||
|
<div>{{ "〉" }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<dv-scroll-board :config="list" style="width: 100%; height: 90%" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cylinder">
|
||||||
|
<div class="cy">
|
||||||
|
<div class="text">
|
||||||
|
<div class="top">
|
||||||
|
已完成<span class="sapn">{{ cell1.label }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="num">{{ cell1.count }}</div>
|
||||||
|
</div>
|
||||||
|
<dv-percent-pond :config="cell1" class="cell" />
|
||||||
|
<div class="type">待取货订单数</div>
|
||||||
|
</div>
|
||||||
|
<div class="cy">
|
||||||
|
<div class="text">
|
||||||
|
<div>
|
||||||
|
已完成<span class="sapn">{{ cell1.label }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="num">{{ cell1.count }}</div>
|
||||||
|
</div>
|
||||||
|
<dv-percent-pond :config="cell1" class="cell" />
|
||||||
|
<div class="type">未配送订单数</div>
|
||||||
|
</div>
|
||||||
|
<div class="cy">
|
||||||
|
<div class="text">
|
||||||
|
<div>
|
||||||
|
已完成<span class="sapn">{{ cell1.label }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="num">{{ cell1.count }}</div>
|
||||||
|
</div>
|
||||||
|
<dv-percent-pond :config="cell1" class="cell" />
|
||||||
|
<div class="type">已完成订单数</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</border>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20px 20px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/img/title.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: "ifonts";
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.my-day-num {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
margin-top: 10px;
|
||||||
|
.my-num-item {
|
||||||
|
margin-right: 10px;
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
background-image: url(../../../assets/img/day_num.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 2.2rem;
|
||||||
|
font-family: "ifonts";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order-list {
|
||||||
|
height: 55%;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 10px;
|
||||||
|
.top {
|
||||||
|
height: 10%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.t-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
div {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ceil) {
|
||||||
|
padding: 0 !important;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.header-item) {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cylinder {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 20%;
|
||||||
|
.cy {
|
||||||
|
width: 30%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url(../../../assets/img/cylinder.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
.text {
|
||||||
|
height: 70%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.top {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-family: "ifonts";
|
||||||
|
}
|
||||||
|
.sapn {
|
||||||
|
color: #fee165;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.type {
|
||||||
|
height: 30%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.cell {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
width: 3rem;
|
||||||
|
height: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
right: -0.5rem;
|
||||||
|
top: 2rem;
|
||||||
|
}
|
||||||
|
::v-deep .dv-percent-pond text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,181 @@
|
||||||
|
<script setup>
|
||||||
|
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
||||||
|
import border from "../../../components/border.vue"
|
||||||
|
const list = reactive({
|
||||||
|
data: [
|
||||||
|
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||||
|
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||||
|
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||||
|
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||||
|
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||||
|
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||||
|
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||||
|
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||||
|
[`<span class="list-span1">1</span>`, '张某某', '15566667777', '南瓜饼', '莲花池街道实打实打算'],
|
||||||
|
],
|
||||||
|
// index: true,
|
||||||
|
headerBGC: 'rgba(0, 168, 255, 0)',
|
||||||
|
oddRowBGC: 'rgba(91, 219, 246, 0)',
|
||||||
|
evenRowBGC: 'rgba(0, 168, 255, 0)',
|
||||||
|
// columnWidth: [50],
|
||||||
|
align: ['center']
|
||||||
|
})
|
||||||
|
const items = reactive([
|
||||||
|
{ id: 1, text: '莲花池 1' },
|
||||||
|
{ id: 2, text: '莲花池 2' },
|
||||||
|
{ id: 3, text: '莲花池 3' },
|
||||||
|
{ id: 3, text: '莲花池 4' },
|
||||||
|
{ id: 3, text: '莲花池 5' },
|
||||||
|
{ id: 3, text: '莲花池 6' },
|
||||||
|
{ id: 3, text: '莲花池 7' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
])
|
||||||
|
const scrollContainerRef = ref(null);
|
||||||
|
let timer = null;
|
||||||
|
const autoScroll = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
timer = setInterval(() => {
|
||||||
|
if (scrollContainerRef.value) {
|
||||||
|
scrollContainerRef.value.scrollTop += 1;
|
||||||
|
if (scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >= scrollContainerRef.value.scrollHeight - 1) {
|
||||||
|
scrollContainerRef.value.scrollTop = 0;
|
||||||
|
clearInterval(timer);
|
||||||
|
autoScroll();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 50)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
autoScroll();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer);
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<border>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">订单排行榜</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="scroll-container" ref="scrollContainerRef">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in items"
|
||||||
|
:key="item.id"
|
||||||
|
class="b-list-item"
|
||||||
|
>
|
||||||
|
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
||||||
|
{{ index + 1 }}
|
||||||
|
</div>
|
||||||
|
<div class="name">{{ item.text }}</div>
|
||||||
|
<div class="line">
|
||||||
|
<div
|
||||||
|
class="line-body"
|
||||||
|
:style="{ width: '80%' }"
|
||||||
|
:class="{ 'line-body2': index >= 3 }"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="count">6000</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</border>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/img/title.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: "ifonts";
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.scroll-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.b-list-item {
|
||||||
|
height: 3rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
.rank {
|
||||||
|
width: 50px;
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
.rank1 {
|
||||||
|
background-image: url(../../../assets/img/ranking1.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.rank2 {
|
||||||
|
background-image: url(../../../assets/img/ranking2.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
flex: 5;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
width: 50%;
|
||||||
|
height: 0.8rem;
|
||||||
|
background-color: #0a385b;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
.line-body {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
width: 0%;
|
||||||
|
background: linear-gradient(270deg, #00c0fe 0%, #0f87fa 100%);
|
||||||
|
}
|
||||||
|
.line-body2 {
|
||||||
|
background: linear-gradient(270deg, #5bdbf6 0%, #5bdbf6 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.count {
|
||||||
|
flex: 2;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: "ifonts";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
<script setup>
|
||||||
|
import border from "../../../components/border.vue"
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<border>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">三轮车列表</div>
|
||||||
|
<div class="car-box">
|
||||||
|
<div class="car">
|
||||||
|
<div class="count">13</div>
|
||||||
|
<div class="name">三轮车总数</div>
|
||||||
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<div class="head">
|
||||||
|
<img class="img" src="/src/assets/img/item.png" />
|
||||||
|
<div>三轮车投放</div>
|
||||||
|
</div>
|
||||||
|
<div class="car-list">
|
||||||
|
<div
|
||||||
|
class="car-item"
|
||||||
|
:class="{ 'car-item2': index > 1 }"
|
||||||
|
v-for="(item, index) in 4"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<img class="img" src="/src/assets/img/icon-car.png" />
|
||||||
|
<div>川A E792P</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="car-box">
|
||||||
|
<div class="car-list2">
|
||||||
|
<div
|
||||||
|
class="car-item"
|
||||||
|
:class="{ 'car-item2': index > 2 && index < 5 }"
|
||||||
|
v-for="(item, index) in 9"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<img class="img" src="/src/assets/img/icon-car.png" />
|
||||||
|
<div>川A E792P</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</border>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/img/title.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: "ifonts";
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.car-box {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
.car {
|
||||||
|
flex: 1;
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 1rem;
|
||||||
|
.count {
|
||||||
|
flex: 1;
|
||||||
|
background-image: url(../../../assets/img/car.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
flex: 2;
|
||||||
|
height: 100%;
|
||||||
|
.head {
|
||||||
|
height: 33%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
.img {
|
||||||
|
height: 1rem;
|
||||||
|
width: 1rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.car-list {
|
||||||
|
height: 66%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
.car-item {
|
||||||
|
height: 50%;
|
||||||
|
width: 50%;
|
||||||
|
background-image: url(../../../assets/img/car-item.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.car-list2 {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
.car-item {
|
||||||
|
height: 33%;
|
||||||
|
width: 33.33%;
|
||||||
|
background-image: url(../../../assets/img/car-item.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.car-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.img {
|
||||||
|
width: 1.3rem;
|
||||||
|
height: 1.3rem;
|
||||||
|
margin-right: 0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.car-item2 {
|
||||||
|
background-image: url(../../../assets/img/car-item2.png);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,169 @@
|
||||||
|
<script setup>
|
||||||
|
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
||||||
|
import border from "../../../components/border.vue"
|
||||||
|
const items = reactive([
|
||||||
|
{ id: 1, text: '莲花池 1' },
|
||||||
|
{ id: 2, text: '莲花池 2' },
|
||||||
|
{ id: 3, text: '莲花池 3' },
|
||||||
|
{ id: 3, text: '莲花池 4' },
|
||||||
|
{ id: 3, text: '莲花池 5' },
|
||||||
|
{ id: 3, text: '莲花池 6' },
|
||||||
|
{ id: 3, text: '莲花池 7' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
])
|
||||||
|
const scrollContainerRef = ref(null);
|
||||||
|
let timer = null;
|
||||||
|
const autoScroll = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
timer = setInterval(() => {
|
||||||
|
if (scrollContainerRef.value) {
|
||||||
|
scrollContainerRef.value.scrollTop += 1;
|
||||||
|
if (scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >= scrollContainerRef.value.scrollHeight - 1) {
|
||||||
|
scrollContainerRef.value.scrollTop = 0;
|
||||||
|
clearInterval(timer);
|
||||||
|
autoScroll();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 50)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
autoScroll();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer);
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<border>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">配送商品排行榜</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="scroll-container" ref="scrollContainerRef">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in items"
|
||||||
|
:key="item.id"
|
||||||
|
class="b-list-item"
|
||||||
|
>
|
||||||
|
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
||||||
|
{{ index + 1 }}
|
||||||
|
</div>
|
||||||
|
<div class="name">{{ item.text }}</div>
|
||||||
|
<div class="line">
|
||||||
|
<div
|
||||||
|
class="line-body"
|
||||||
|
:style="{ width: '80%' }"
|
||||||
|
:class="{ 'line-body2': index >= 3 }"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="count">6000</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</border>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/img/title.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: "ifonts";
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.scroll-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.b-list-item {
|
||||||
|
height: 3rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
.rank {
|
||||||
|
width: 50px;
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
.rank1 {
|
||||||
|
background-image: url(../../../assets/img/ranking1.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.rank2 {
|
||||||
|
background-image: url(../../../assets/img/ranking2.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
flex: 5;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
width: 50%;
|
||||||
|
height: 0.8rem;
|
||||||
|
background-color: #0a385b;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
.line-body {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
width: 0%;
|
||||||
|
background: linear-gradient(270deg, #00c0fe 0%, #0f87fa 100%);
|
||||||
|
}
|
||||||
|
.line-body2 {
|
||||||
|
background: linear-gradient(270deg, #5bdbf6 0%, #5bdbf6 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.count {
|
||||||
|
flex: 2;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: "ifonts";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<script setup>
|
||||||
|
import leftItme from "./components/left.vue";
|
||||||
|
import centerItme from "./components/center.vue";
|
||||||
|
import test from "./components/test.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="center">
|
||||||
|
<div class="item">
|
||||||
|
<leftItme style="height: 98%"></leftItme>
|
||||||
|
</div>
|
||||||
|
<div class="item item_c">
|
||||||
|
<div style="height: 61%; display: flex; justify-content: space-between">
|
||||||
|
<centerItme style="width: 64%; border: 1px solid red"></centerItme>
|
||||||
|
<div style="width: 35%; border: 1px solid red"></div>
|
||||||
|
</div>
|
||||||
|
<div style="height: 36%; border: 1px solid red"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.center {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
.item {
|
||||||
|
width: 26%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-content: center;
|
||||||
|
/* border: 1px solid red; */
|
||||||
|
& > .div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_c {
|
||||||
|
width: 72%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
server: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
},
|
||||||
|
optimizeDeps: {
|
||||||
|
// 开发时 解决这些commonjs包转成esm包
|
||||||
|
include: [
|
||||||
|
"@jiaminghi/c-render",
|
||||||
|
"@jiaminghi/c-render/lib/plugin/util",
|
||||||
|
"@jiaminghi/charts/lib/util/index",
|
||||||
|
"@jiaminghi/charts/lib/util",
|
||||||
|
"@jiaminghi/charts/lib/extend/index",
|
||||||
|
"@jiaminghi/charts",
|
||||||
|
"@jiaminghi/color",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
// 打包时需要另外处理的commonjs规范的包
|
||||||
|
commonjsOptions: {
|
||||||
|
include: [
|
||||||
|
/node_modules/, // 必须包含
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, 'src')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
Loading…
Reference in New Issue