This commit is contained in:
parent
38b81da321
commit
6e8853f757
|
|
@ -5,6 +5,11 @@
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + Vue</title>
|
<title>Vite + Vue</title>
|
||||||
|
<style>
|
||||||
|
html{
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
background-image: url("/src/assets/img/bg.png");
|
background-image: url("/src/assets/img/bg.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
|
|
||||||
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 |
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
|
|
@ -0,0 +1,101 @@
|
||||||
|
<script setup>
|
||||||
|
import { defineProps, defineEmits, ref } from "vue"
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
const router = useRouter()
|
||||||
|
const emit = defineEmits(['offAreaList'])
|
||||||
|
const props = defineProps({
|
||||||
|
choseArea: Boolean,
|
||||||
|
})
|
||||||
|
|
||||||
|
const list = ref([
|
||||||
|
{
|
||||||
|
name: '泸县'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '江阳'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '龙马潭'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '通滩'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '纳溪'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '合面'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '叙永'
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
// 选镇
|
||||||
|
const choseTownFn = (item) => {
|
||||||
|
emit('offAreaList', item);
|
||||||
|
props.choseArea = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<transition name="fade">
|
||||||
|
<div class="address" v-if="props.choseArea">
|
||||||
|
<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>
|
||||||
|
|
@ -1,16 +1,50 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { reactive, ref } from "vue";
|
||||||
|
import areaList from "./areaList.vue";
|
||||||
|
|
||||||
|
const info = reactive({
|
||||||
|
address: '泸县'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 选择镇
|
||||||
|
const choseArea = ref(null)
|
||||||
|
const open = () => {
|
||||||
|
choseArea.value = !choseArea.value;
|
||||||
|
}
|
||||||
|
// 关闭
|
||||||
|
const offAreaList = (e) => {
|
||||||
|
info.address = e.name;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
|
<img class="logo item" src="/src/assets/head_img/logo.png" />
|
||||||
<div class="item">2023.11.17</div>
|
<div class="item">2023.11.17</div>
|
||||||
|
<img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
|
||||||
<div class="item">11:30:20</div>
|
<div class="item">11:30:20</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="head-title">吟龙物流信息监控溯源可视化大屏</div>
|
<div class="head-title">吟龙物流信息监控溯源可视化大屏</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="item">泸县</div>
|
<div class="item" @click="open" style="position: relative">
|
||||||
<div class="item">多云</div>
|
<img src="/src/assets/head_img/location.png" alt="" />
|
||||||
|
{{ info.address }}
|
||||||
|
<areaList
|
||||||
|
: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>
|
</div>
|
||||||
<img class="img" src="/src/assets/img/shiler.png" alt="" />
|
<img class="img" src="/src/assets/img/shiler.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -35,6 +69,10 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
transform: translate(-50%, 50%);
|
transform: translate(-50%, 50%);
|
||||||
}
|
}
|
||||||
|
.icon {
|
||||||
|
width: 0.8rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
.head-title {
|
.head-title {
|
||||||
/* font-weight: bold; */
|
/* font-weight: bold; */
|
||||||
font-family: "ifonts", sans-serif;
|
font-family: "ifonts", sans-serif;
|
||||||
|
|
@ -45,9 +83,15 @@
|
||||||
.left {
|
.left {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
|
align-items: center;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
.logo {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
.item {
|
.item {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
|
|
@ -56,6 +100,15 @@
|
||||||
justify-content: right;
|
justify-content: right;
|
||||||
.item {
|
.item {
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
img {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,332 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref } from "vue"
|
import { onMounted, reactive, ref } from "vue"
|
||||||
import border from "@/components/border.vue";
|
import border from "@/components/border.vue";
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const list = reactive({
|
||||||
|
header: ['ID', '收件人', '收件人电话', '商品信息', '收货地址'],
|
||||||
|
data: [
|
||||||
|
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||||
|
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||||
|
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||||
|
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||||
|
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||||
|
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||||
|
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||||
|
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||||
|
['<span>1233</span>', '<span>张某某</span>', '<span>15566667777</span>', '<span>南瓜饼</span>', '<span>莲花池街道实打实打算</span>'],
|
||||||
|
],
|
||||||
|
// index: true,
|
||||||
|
headerBGC: 'rgba(0, 168, 255, 0.56)',
|
||||||
|
oddRowBGC: 'rgba(91, 219, 246, 0.20)',
|
||||||
|
evenRowBGC: 'rgba(0, 168, 255, 0.16)',
|
||||||
|
// columnWidth: [50],
|
||||||
|
align: ['center'],
|
||||||
|
rowNum: 7
|
||||||
|
})
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initEcahrts()
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -11,19 +337,30 @@ import border from "@/components/border.vue";
|
||||||
<div class="body-box">
|
<div class="body-box">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="view" v-for="(item, index) in 4" :key="index">
|
<div class="view" v-for="(item, index) in orderList" :key="index">
|
||||||
<div class="num">
|
<div class="num">
|
||||||
<div>6</div>
|
<div v-for="(t, i) in cOrderValue(item.value)" :key="i">
|
||||||
<div>,</div>
|
{{ t }}
|
||||||
<div>5</div>
|
</div>
|
||||||
<div>8</div>
|
|
||||||
<div>1</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div>今日订单</div>
|
<div>{{ item.name }}</div>
|
||||||
</div>
|
</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">
|
||||||
|
<div>查看更多</div>
|
||||||
|
<div>{{ "〉" }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<dv-scroll-board :config="list" style="width: 100%; height: 90%" />
|
||||||
</div>
|
</div>
|
||||||
<div class="right"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</border>
|
</border>
|
||||||
|
|
@ -56,9 +393,12 @@ import border from "@/components/border.vue";
|
||||||
.body-box {
|
.body-box {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.left {
|
.left {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
|
height: 100%;
|
||||||
.top {
|
.top {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
|
|
@ -87,9 +427,44 @@ import border from "@/components/border.vue";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.bottom {
|
||||||
|
height: 70%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
width: 38%;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .dv-scroll-board .rows .row-item {
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -30,9 +30,8 @@ import AMap from "./AMap.vue";
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.map {
|
.map {
|
||||||
height: 98%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0.5rem 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -132,7 +132,7 @@ onMounted(() => {
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">配送详情</div>
|
<div class="title">配送详情</div>
|
||||||
<div class="head-box b-box">商品信息</div>
|
<div class="head-box b-box">商品信息</div>
|
||||||
<div class="order">
|
<div class="order_h">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div>
|
<div>
|
||||||
订单编号
|
订单编号
|
||||||
|
|
@ -278,23 +278,63 @@ onMounted(() => {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0.5rem 0;
|
padding: 0.5rem 0;
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
}
|
||||||
.order {
|
.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%;
|
width: 100%;
|
||||||
background-image: url(../../../assets/delivery_img/box3.png);
|
background-image: url(../../../assets/delivery_img/box3.png);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
height: 15%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
.top {
|
.top {
|
||||||
width: calc(100% - 40px);
|
width: 90%;
|
||||||
padding: 20px;
|
box-sizing: border-box !important;
|
||||||
padding-bottom: 10px;
|
padding-top: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.line {
|
.line {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: calc(100% - 40px);
|
width: 90%;
|
||||||
padding: 0 20px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.c {
|
.c {
|
||||||
width: 0.2rem;
|
width: 0.2rem;
|
||||||
|
|
@ -309,15 +349,18 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.bottom {
|
.bottom {
|
||||||
width: calc(100% - 60px);
|
width: 90%;
|
||||||
padding: 20px 30px 30px 30px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
padding-bottom: 1rem;
|
||||||
.img {
|
.img {
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
width: 3.5rem;
|
width: 3.5rem;
|
||||||
}
|
}
|
||||||
.name {
|
.name {
|
||||||
|
height: 80%;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0.2rem 1.2rem;
|
padding: 0.2rem 1.2rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
@ -338,8 +381,8 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.map {
|
.map {
|
||||||
height: 12rem;
|
height: 16%;
|
||||||
width: 90%;
|
width: 96%;
|
||||||
margin: 0.5rem 0;
|
margin: 0.5rem 0;
|
||||||
border: 1px solid rgba(91, 219, 246, 1);
|
border: 1px solid rgba(91, 219, 246, 1);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -356,15 +399,18 @@ onMounted(() => {
|
||||||
.delivery {
|
.delivery {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 20%;
|
||||||
.left {
|
.left {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
.left-item {
|
.left-item {
|
||||||
|
height: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 1.2rem 0;
|
|
||||||
padding-left: 1.2rem;
|
|
||||||
background-image: url(../../../assets/delivery_img/box1.png);
|
background-image: url(../../../assets/delivery_img/box1.png);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 10%;
|
||||||
.img {
|
.img {
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
width: 3.5rem;
|
width: 3.5rem;
|
||||||
|
|
|
||||||
|
|
@ -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: 80vh;
|
||||||
|
height: 80vh;
|
||||||
|
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>
|
||||||
|
|
@ -1,10 +1,15 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import ball from "./ball.vue";
|
||||||
|
import centerMap from "./centerMap.vue";
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="ball"></div>
|
<div class="ball">
|
||||||
|
<ball class="ball1"></ball>
|
||||||
|
</div>
|
||||||
|
<centerMap class="c-map"></centerMap>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -15,11 +20,18 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
.ball {
|
.ball {
|
||||||
width: 40rem;
|
height: 100%;
|
||||||
height: 40rem;
|
width: 100%;
|
||||||
background-image: url(../../../assets/img/ball.png);
|
overflow: hidden;
|
||||||
background-size: 100% 100%;
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.c-map {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,156 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from "vue";
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import luxian from "@/assets/json/luxian.json";
|
||||||
|
import hejiang from "@/assets/json/hejiang.json";
|
||||||
|
import xuyong from "@/assets/json/xuyong.json";
|
||||||
|
|
||||||
|
const mapType = reactive({
|
||||||
|
name: '',
|
||||||
|
json: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const changeType = (name) => {
|
||||||
|
mapType.name = name;
|
||||||
|
if (name == 'luxian') mapType.json = luxian;
|
||||||
|
if (name == 'hejiang') mapType.json = hejiang;
|
||||||
|
if (name == 'xuyong') mapType.json = xuyong;
|
||||||
|
}
|
||||||
|
changeType('luxian');
|
||||||
|
|
||||||
|
const dataValue = [
|
||||||
|
{ name: '北京', value: [105.38, 29.15] },
|
||||||
|
{ name: '上海', value: [105.32, 29.15] },
|
||||||
|
]
|
||||||
|
|
||||||
|
const echartsRef = ref(null);
|
||||||
|
const initMap = () => {
|
||||||
|
// 基于DOM元素初始化echarts实例
|
||||||
|
const chart = echarts.init(echartsRef.value);
|
||||||
|
echarts.registerMap(mapType.name, mapType.json);
|
||||||
|
let option = {
|
||||||
|
animation: false,
|
||||||
|
//geo方式地理坐标系组件。
|
||||||
|
geo: {
|
||||||
|
map: mapType.name,
|
||||||
|
zoom: 1.0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 25,
|
||||||
|
// 高亮状态下的多边形和标签样式。
|
||||||
|
|
||||||
|
},
|
||||||
|
// 选中状态下的多边形和标签样式
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: '#546686', //地图背景色
|
||||||
|
borderColor: '#fff', //省市边界线00fcff 516a89
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// aspectScale:0.75, //长宽比
|
||||||
|
// roam: true, //是否允许缩放
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#546686', //地图背景色
|
||||||
|
borderColor: '#fff', //省市边界线00fcff 516a89
|
||||||
|
borderWidth: 1,
|
||||||
|
areaColor: "#3f5171",
|
||||||
|
shadowColor: "#5bdbf6",
|
||||||
|
shadowOffsetX: 4,
|
||||||
|
shadowOffsetY: 8,
|
||||||
|
// shadowBlur: 2
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "scatter",
|
||||||
|
coordinateSystem: "geo",
|
||||||
|
data: dataValue,
|
||||||
|
// symbolSize: function(val) {
|
||||||
|
// return val[2] / 10;
|
||||||
|
// },
|
||||||
|
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
|
||||||
|
symbolSize: [40, 30],
|
||||||
|
hoverSymbolSize: [120, 90],
|
||||||
|
tooltip: {
|
||||||
|
formatter (value) {
|
||||||
|
console.log(value);
|
||||||
|
return "";
|
||||||
|
},
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
encode: {
|
||||||
|
value: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: "{b}",
|
||||||
|
position: "right",
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "#0efacc"
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
// 使用配置项显示图表
|
||||||
|
chart.setOption(option);
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
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>
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref } from "vue"
|
import { reactive, ref } from "vue"
|
||||||
import border from "../../../components/border.vue"
|
import border from "../../../components/border.vue"
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
const list = reactive({
|
const list = reactive({
|
||||||
header: ['ID', '收件人', '收件人电话', '商品信息', '收货地址'],
|
header: ['ID', '收件人', '收件人电话', '商品信息', '收货地址'],
|
||||||
data: [
|
data: [
|
||||||
|
|
@ -31,11 +32,18 @@ const cell1 = reactive({
|
||||||
borderRadius: 3,
|
borderRadius: 3,
|
||||||
colors: ['#66FFFF', '#FEDB65']
|
colors: ['#66FFFF', '#FEDB65']
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const route = useRouter()
|
||||||
|
|
||||||
|
const navToDelivery = () => {
|
||||||
|
route.push('/delivery')
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<border>
|
<border>
|
||||||
<div class="box">
|
<div class="box" @click="navToDelivery">
|
||||||
<div class="title">今日订单数</div>
|
<div class="title">今日订单数</div>
|
||||||
<div class="my-day-num">
|
<div class="my-day-num">
|
||||||
<div class="my-num-item">0</div>
|
<div class="my-num-item">0</div>
|
||||||
|
|
@ -46,14 +54,12 @@ const cell1 = reactive({
|
||||||
<div class="my-num-item">1</div>
|
<div class="my-num-item">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="order-list">
|
<div class="order-list">
|
||||||
<div class="head">
|
<div class="top">
|
||||||
<div class="item">
|
<div class="t-right">
|
||||||
<div class="c-circle">
|
<img src="/src/assets/img/item.png" />
|
||||||
<div class="c"></div>
|
<div>今日订单</div>
|
||||||
</div>
|
|
||||||
<div>订单列表</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="flex">
|
||||||
<div>查看更多</div>
|
<div>查看更多</div>
|
||||||
<div>{{ "〉" }}</div>
|
<div>{{ "〉" }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -99,7 +105,7 @@ const cell1 = reactive({
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.box {
|
.box {
|
||||||
height: 92%;
|
height: calc(100% - 40px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 20px 20px;
|
padding: 20px 20px;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
|
|
@ -125,6 +131,7 @@ const cell1 = reactive({
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
.my-num-item {
|
.my-num-item {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
@ -143,32 +150,26 @@ const cell1 = reactive({
|
||||||
height: 55%;
|
height: 55%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
.head {
|
.top {
|
||||||
/* width: 100%; */
|
height: 10%;
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.item {
|
.t-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
& > div {
|
img {
|
||||||
margin: 5px;
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
.c-circle {
|
}
|
||||||
border: 2px solid #5bdbf6;
|
.flex {
|
||||||
width: 16px;
|
display: flex;
|
||||||
height: 16px;
|
cursor: pointer;
|
||||||
border-radius: 50%;
|
div {
|
||||||
background-color: rgba($color: #5bdbf6, $alpha: 0.1);
|
margin-left: 0.5rem;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
.c {
|
|
||||||
background-color: #5bdbf6;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -60,27 +60,20 @@ onUnmounted(() => {
|
||||||
<border>
|
<border>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">订单排行榜</div>
|
<div class="title">订单排行榜</div>
|
||||||
<div class="list">
|
<div class="scroll-container" ref="scrollContainerRef">
|
||||||
<!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
|
<div v-for="(item, index) in items" :key="item.id" class="b-list-item">
|
||||||
<div class="scroll-container" ref="scrollContainerRef">
|
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
||||||
<div
|
{{ index + 1 }}
|
||||||
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 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -89,13 +82,14 @@ onUnmounted(() => {
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.box {
|
.box {
|
||||||
padding: 20px;
|
height: 100%;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: calc(100% - 40px);
|
padding: 0 20px;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-image: url(../../../assets/img/title.png);
|
background-image: url(../../../assets/img/title.png);
|
||||||
|
|
@ -107,16 +101,9 @@ onUnmounted(() => {
|
||||||
font-family: "ifonts";
|
font-family: "ifonts";
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
.list {
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 100%;
|
|
||||||
height: 80%;
|
|
||||||
.list-span1 {
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.scroll-container {
|
.scroll-container {
|
||||||
height: 300px;
|
height: 80%;
|
||||||
|
width: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
/* 隐藏滚动条 */
|
/* 隐藏滚动条 */
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,7 @@ onUnmounted(() => {
|
||||||
<template>
|
<template>
|
||||||
<border>
|
<border>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">订单排行榜</div>
|
<div class="title">配送商品排行榜</div>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
|
<!-- <dv-scroll-board :config="list" style="width: 100%; height: 300px" /> -->
|
||||||
<div class="scroll-container" ref="scrollContainerRef">
|
<div class="scroll-container" ref="scrollContainerRef">
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@ import centerItme1 from "./components/centerItem1.vue";
|
||||||
import centerItme2 from "./components/centerItem2.vue";
|
import centerItme2 from "./components/centerItem2.vue";
|
||||||
import rightItem1 from "./components/rightItem1.vue";
|
import rightItem1 from "./components/rightItem1.vue";
|
||||||
import rightItem2 from "./components/rightItem2.vue";
|
import rightItem2 from "./components/rightItem2.vue";
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -14,7 +13,7 @@ import rightItem2 from "./components/rightItem2.vue";
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<leftItme1 style="height: 58%"></leftItme1>
|
<leftItme1 style="height: 58%"></leftItme1>
|
||||||
<leftItme2 style="height: 38%"></leftItme2>
|
<leftItme2 style="height: 40%"></leftItme2>
|
||||||
</div>
|
</div>
|
||||||
<div class="item item_c">
|
<div class="item item_c">
|
||||||
<centerItme1 style="height: 66%"></centerItme1>
|
<centerItme1 style="height: 66%"></centerItme1>
|
||||||
|
|
@ -37,7 +36,7 @@ import rightItem2 from "./components/rightItem2.vue";
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
justify-content: space-evenly;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
/* border: 1px solid red; */
|
/* border: 1px solid red; */
|
||||||
& > .div {
|
& > .div {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue