This commit is contained in:
parent
c200b41249
commit
190475cd25
|
|
@ -4,3 +4,13 @@ import axios from "@/utils/axios.js";
|
||||||
export const login = (data) => {
|
export const login = (data) => {
|
||||||
return axios.post('dataview/login', data);
|
return axios.post('dataview/login', data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 区县
|
||||||
|
export const getArea = (data) => {
|
||||||
|
return axios.get('city/get_area', { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 乡镇
|
||||||
|
export const getStreet = (data) => {
|
||||||
|
return axios.get('city/get_street', { params: data });
|
||||||
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1010 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 824 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 632 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
|
|
@ -1,48 +1,67 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { defineProps, defineEmits, ref, nextTick, onMounted, } from "vue"
|
import { defineProps, defineEmits, ref, nextTick, onMounted, onUnmounted, } from "vue"
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useAppStore } from "@/store/app.js";
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const emit = defineEmits(['offAreaList']);
|
const emit = defineEmits(['offAreaList']);
|
||||||
const choseArea = ref(false);
|
const choseArea = ref(false);
|
||||||
import { useAppStore } from "@/store/app.js";
|
|
||||||
|
|
||||||
const list = ref([
|
const props = defineProps({
|
||||||
{
|
list: {
|
||||||
name: '泸县',
|
type: Object,
|
||||||
pinyin: 'luxian',
|
default: () => []
|
||||||
},
|
}
|
||||||
{
|
})
|
||||||
name: '江阳区',
|
|
||||||
pinyin: 'jiangyang',
|
// const list = ref([
|
||||||
},
|
// {
|
||||||
{
|
// name: '泸县',
|
||||||
name: '龙马潭区',
|
// pinyin: 'luxian',
|
||||||
pinyin: 'longma',
|
// },
|
||||||
},
|
// // {
|
||||||
{
|
// // name: '江阳区',
|
||||||
name: '纳溪区',
|
// // pinyin: 'jiangyang',
|
||||||
pinyin: 'naxi',
|
// // },
|
||||||
},
|
// // {
|
||||||
{
|
// // name: '龙马潭区',
|
||||||
name: '合江县',
|
// // pinyin: 'longma',
|
||||||
pinyin: 'hejiang',
|
// // },
|
||||||
},
|
// // {
|
||||||
{
|
// // name: '纳溪区',
|
||||||
name: '叙永县',
|
// // pinyin: 'naxi',
|
||||||
pinyin: 'xuyong',
|
// // },
|
||||||
},
|
// // {
|
||||||
{
|
// // name: '合江县',
|
||||||
name: '古蔺县',
|
// // pinyin: 'hejiang',
|
||||||
pinyin: 'gulin',
|
// // },
|
||||||
},
|
// // {
|
||||||
])
|
// // name: '叙永县',
|
||||||
|
// // pinyin: 'xuyong',
|
||||||
|
// // },
|
||||||
|
// // {
|
||||||
|
// // name: '古蔺县',
|
||||||
|
// // pinyin: 'gulin',
|
||||||
|
// // },
|
||||||
|
// ])
|
||||||
|
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
|
|
||||||
// 选镇
|
// 选镇
|
||||||
const choseTownFn = (item) => {
|
const choseTownFn = (item) => {
|
||||||
|
if (item.code.length == 6) {
|
||||||
|
appStore.setMapInfo('luxian');
|
||||||
|
appStore.setAddress({
|
||||||
|
areaCode: item.code,
|
||||||
|
streetCode: ''
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
appStore.setAddress({
|
||||||
|
areaCode: appStore.address.areaCode,
|
||||||
|
streetCode: item.code
|
||||||
|
})
|
||||||
|
}
|
||||||
emit('offAreaList', item);
|
emit('offAreaList', item);
|
||||||
appStore.setMapInfo(item.pinyin);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const open = () => {
|
const open = () => {
|
||||||
|
|
@ -61,19 +80,28 @@ defineExpose({
|
||||||
open, close, show
|
open, close, show
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const addressRef = ref(null);
|
||||||
|
|
||||||
|
const onClickOutside = (event) => {
|
||||||
|
const componentElement = addressRef.value;
|
||||||
|
if (!componentElement?.contains(event.target)) {
|
||||||
|
choseArea.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
list.value.forEach(item => {
|
document.addEventListener('click', onClickOutside);
|
||||||
if (item.pinyin == appStore.map_info) {
|
})
|
||||||
choseTownFn(item)
|
|
||||||
}
|
onUnmounted(() => {
|
||||||
})
|
document.removeEventListener('click', onClickOutside);
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<transition name="fade">
|
<transition name="fade" mode="out-in">
|
||||||
<div class="address" v-show="choseArea == true">
|
<div ref="addressRef" class="address" v-if="choseArea == true">
|
||||||
<div
|
<div
|
||||||
class="address-li"
|
class="address-li"
|
||||||
@click="choseTownFn(item)"
|
@click="choseTownFn(item)"
|
||||||
|
|
@ -91,8 +119,8 @@ onMounted(() => {
|
||||||
left: 1vw;
|
left: 1vw;
|
||||||
top: 18px;
|
top: 18px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 10vw;
|
width: 8rem;
|
||||||
height: 18vh;
|
height: 15rem;
|
||||||
background-color: #001e32;
|
background-color: #001e32;
|
||||||
color: #c7dbe3;
|
color: #c7dbe3;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
|
|
@ -109,7 +137,7 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.address::-webkit-scrollbar {
|
.address::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 0.63rem;
|
||||||
background-color: #153041;
|
background-color: #153041;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,18 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref, provide, nextTick, onMounted } from "vue";
|
import { reactive, ref, provide, nextTick, onMounted, inject } from "vue";
|
||||||
import areaList from "./areaList.vue";
|
import areaList from "./areaList.vue";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
import mitt from "@/utils/mitt";
|
import mitt from "@/utils/mitt";
|
||||||
import datePicker from "./datePicker.vue";
|
import datePicker from "./datePicker.vue";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
import { getStreet } from "@/api/index.js";
|
||||||
|
import { useAppStore } from "@/store/app.js";
|
||||||
|
import { useUserStore } from "@/store/user.js";
|
||||||
|
|
||||||
|
const appStore = useAppStore();
|
||||||
|
const userSotre = useUserStore();
|
||||||
|
|
||||||
|
const reload = inject('reload');
|
||||||
|
|
||||||
const info = reactive({
|
const info = reactive({
|
||||||
address: '泸县',
|
address: '泸县',
|
||||||
|
|
@ -27,6 +35,7 @@ const offAreaList = (e) => {
|
||||||
})
|
})
|
||||||
info.address = e.name;
|
info.address = e.name;
|
||||||
mitt.emit('map_info', info);
|
mitt.emit('map_info', info);
|
||||||
|
reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
@ -60,6 +69,41 @@ const logout = () => {
|
||||||
router.push('/login')
|
router.push('/login')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const list = ref([])
|
||||||
|
const initList = async () => {
|
||||||
|
let street = appStore.street;
|
||||||
|
if (street?.length == 0) {
|
||||||
|
let { data } = await getStreet({
|
||||||
|
area_code: appStore.address.areaCode
|
||||||
|
})
|
||||||
|
street = data;
|
||||||
|
appStore.setStreet(street);
|
||||||
|
}
|
||||||
|
let area = appStore.area;
|
||||||
|
if (userSotre.userInfo.street_code) {
|
||||||
|
let data = street.find(item => item.code == appStore.address.streetCode);
|
||||||
|
info.address = data?.name;
|
||||||
|
list.value = [];
|
||||||
|
appStore.setAddress({
|
||||||
|
areaCode: appStore.address.areaCode,
|
||||||
|
streetCode: appStore.address.streetCode
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
let data = area.find(item => item.code == appStore.address.areaCode);
|
||||||
|
info.address = data?.name;
|
||||||
|
list.value = [data, ...street];
|
||||||
|
if (appStore.address.streetCode) {
|
||||||
|
data = street.find(item => item.code == appStore.address.streetCode);
|
||||||
|
info.address = data?.name;
|
||||||
|
}
|
||||||
|
appStore.setAddress({
|
||||||
|
areaCode: appStore.address.areaCode,
|
||||||
|
streetCode: appStore.address.streetCode
|
||||||
|
})
|
||||||
|
}
|
||||||
|
mitt.emit('map_info', info);
|
||||||
|
}
|
||||||
|
|
||||||
const weather = ref("暂无天气信息")
|
const weather = ref("暂无天气信息")
|
||||||
const initWeather = (city = 510500) => {
|
const initWeather = (city = 510500) => {
|
||||||
axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=5731d3b4c3f34e09226e084ce556e259`).then((res) => {
|
axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=5731d3b4c3f34e09226e084ce556e259`).then((res) => {
|
||||||
|
|
@ -77,7 +121,7 @@ const changeTime = (e) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
mitt.emit('map_info', info);
|
initList();
|
||||||
|
|
||||||
// 每秒钟更新一次时间
|
// 每秒钟更新一次时间
|
||||||
setInterval(updateClock, 1000);
|
setInterval(updateClock, 1000);
|
||||||
|
|
@ -101,11 +145,12 @@ onMounted(() => {
|
||||||
</div>
|
</div>
|
||||||
<div class="head-title">吟龙养殖溯源系统可视化大屏</div>
|
<div class="head-title">吟龙养殖溯源系统可视化大屏</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="item" @click="open" style="position: relative">
|
<div class="item" @click.stop="open" style="position: relative">
|
||||||
<img src="/src/assets/head_img/location.png" alt="" />
|
<img src="/src/assets/head_img/location.png" alt="" />
|
||||||
{{ info.address }}
|
{{ info.address }}
|
||||||
<areaList
|
<areaList
|
||||||
ref="areaListRef"
|
ref="areaListRef"
|
||||||
|
:list="list"
|
||||||
:choseArea="choseArea"
|
:choseArea="choseArea"
|
||||||
@offAreaList="offAreaList"
|
@offAreaList="offAreaList"
|
||||||
style="position: absolute; top: 100%; left: 0"
|
style="position: absolute; top: 100%; left: 0"
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.body {
|
.body {
|
||||||
background-image: url("/src/assets/img/bg.png");
|
background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/4d392202312131353321159.png);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: rgba($color: #000000, $alpha: 0.8);
|
background-color: rgba($color: #000000, $alpha: 0.8);
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import { defineStore } from "pinia"
|
import { defineStore } from "pinia"
|
||||||
import { ref } from "vue"
|
import { ref } from "vue"
|
||||||
|
import areaList from "@/utils/areaList.js"
|
||||||
|
|
||||||
export const useAppStore = defineStore('app', () => {
|
export const useAppStore = defineStore('app', () => {
|
||||||
const map_info = ref(localStorage.getItem('map_info') || 'luxian');
|
const map_info = ref(localStorage.getItem('map_info') || 'luxian');
|
||||||
|
|
@ -9,8 +10,39 @@ export const useAppStore = defineStore('app', () => {
|
||||||
localStorage.setItem('map_info', e);
|
localStorage.setItem('map_info', e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const address = ref(JSON.parse(localStorage.getItem('address') || '{}'));
|
||||||
|
if (!address.value.areaCode) {
|
||||||
|
address.value = { areaCode: 510524, streetCode: 510524100 };
|
||||||
|
}
|
||||||
|
|
||||||
|
// 测试使用的初始化配置
|
||||||
|
// address.value = { areaCode: 510524, streetCode: 510524100 };
|
||||||
|
|
||||||
|
const setAddress = (e) => {
|
||||||
|
console.log('更新', e);
|
||||||
|
address.value.areaCode = e.areaCode;
|
||||||
|
address.value.streetCode = e.streetCode;
|
||||||
|
localStorage.setItem('address', JSON.stringify(e));
|
||||||
|
}
|
||||||
|
|
||||||
|
const area = ref(areaList);
|
||||||
|
const setArea = (data) => {
|
||||||
|
area.value = data;
|
||||||
|
}
|
||||||
|
|
||||||
|
const street = ref([]);
|
||||||
|
const setStreet = (data) => {
|
||||||
|
street.value = data;
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
map_info,
|
map_info,
|
||||||
setMapInfo
|
address,
|
||||||
|
area,
|
||||||
|
street,
|
||||||
|
setMapInfo,
|
||||||
|
setAddress,
|
||||||
|
setArea,
|
||||||
|
setStreet
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
const areaList = [
|
||||||
|
{
|
||||||
|
"id": 2043,
|
||||||
|
"code": "510502",
|
||||||
|
"name": "江阳区"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2044,
|
||||||
|
"code": "510503",
|
||||||
|
"name": "纳溪区"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2045,
|
||||||
|
"code": "510504",
|
||||||
|
"name": "龙马潭区"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2046,
|
||||||
|
"code": "510521",
|
||||||
|
"name": "泸县"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2047,
|
||||||
|
"code": "510522",
|
||||||
|
"name": "合江县"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2048,
|
||||||
|
"code": "510524",
|
||||||
|
"name": "叙永县"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2049,
|
||||||
|
"code": "510525",
|
||||||
|
"name": "古蔺县"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default areaList;
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -288,7 +288,7 @@ onMounted(() => {
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
bottom: 4%;
|
bottom: 4%;
|
||||||
right: 5%;
|
right: 5%;
|
||||||
background-image: url(../../../assets/index_img/box4.png);
|
background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/b464a202312131352069669.png);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
.btn {
|
.btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -187,7 +187,7 @@ const initMap = () => {
|
||||||
// console.log(params);
|
// console.log(params);
|
||||||
if (params.data) {
|
if (params.data) {
|
||||||
return `<div
|
return `<div
|
||||||
style="background-image: url(\'/src/assets/img/border5.png\');
|
style="background-image: url(\'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/34876202312131355137572.png\');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
@ -276,11 +276,11 @@ const initMap = () => {
|
||||||
|
|
||||||
// 监听标记点的点击事件
|
// 监听标记点的点击事件
|
||||||
chart.on('click', function (params) {
|
chart.on('click', function (params) {
|
||||||
if (params.seriesType === 'scatter') {
|
if (params.seriesType === 'scatter') {
|
||||||
// 处理你的点击事件逻辑
|
// 处理你的点击事件逻辑
|
||||||
console.log('点击了', params.data.name);
|
console.log('点击了', params.data.name);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const filterMap = () => {
|
const filterMap = () => {
|
||||||
|
|
|
||||||
|
|
@ -1,187 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,507 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,438 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,172 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -288,7 +288,7 @@ onMounted(() => {
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
bottom: 4%;
|
bottom: 4%;
|
||||||
right: 5%;
|
right: 5%;
|
||||||
background-image: url(../../../assets/index_img/box4.png);
|
background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/b464a202312131352069669.png);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
.btn {
|
.btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -439,7 +439,7 @@ onMounted(() => {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 96%;
|
width: 96%;
|
||||||
height: calc(65% - 2.4rem);
|
height: calc(65% - 2.4rem);
|
||||||
background-image: url(../../../assets/index_img/box3.png);
|
background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/cefdb20231213135028517.png);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
|
||||||
.vedio {
|
.vedio {
|
||||||
|
|
|
||||||
|
|
@ -1,202 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,236 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,306 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,264 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,181 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,155 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,169 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -2,7 +2,9 @@
|
||||||
import { ref, reactive } from "vue"
|
import { ref, reactive } from "vue"
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import { login } from "@/api/index.js";
|
import { login } from "@/api/index.js";
|
||||||
|
import { getArea, getStreet } from "@/api/index.js"
|
||||||
import { useUserStore } from "@/store/user.js";
|
import { useUserStore } from "@/store/user.js";
|
||||||
|
import { useAppStore } from "@/store/app.js";
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const show = ref(false)
|
const show = ref(false)
|
||||||
const account = ref('叙永镇')
|
const account = ref('叙永镇')
|
||||||
|
|
@ -11,6 +13,7 @@ const isAccount = ref(false)
|
||||||
const isPassword = ref(false)
|
const isPassword = ref(false)
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
const appStore = useAppStore();
|
||||||
|
|
||||||
const submit = () => {
|
const submit = () => {
|
||||||
|
|
||||||
|
|
@ -30,9 +33,17 @@ const submit = () => {
|
||||||
login({
|
login({
|
||||||
account: account.value,
|
account: account.value,
|
||||||
password: password.value
|
password: password.value
|
||||||
}).then((res) => {
|
}).then(async (res) => {
|
||||||
userStore.setUserInfo(res.data.user);
|
userStore.setUserInfo(res.data.user);
|
||||||
userStore.setToken(res.data.token);
|
userStore.setToken(res.data.token);
|
||||||
|
appStore.setAddress({
|
||||||
|
areaCode: res.data.user.area_code,
|
||||||
|
streetCode: res.data.user.street_code
|
||||||
|
});
|
||||||
|
let street = await getStreet({
|
||||||
|
area_code: res.data.user.area_code
|
||||||
|
})
|
||||||
|
appStore.setStreet(street.data);
|
||||||
router.push('/');
|
router.push('/');
|
||||||
}).catch(e => {
|
}).catch(e => {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
|
|
@ -107,7 +118,7 @@ const submit = () => {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.body {
|
.body {
|
||||||
background-image: url("/src/assets/img/bg.png");
|
background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/4d392202312131353321159.png);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: rgba($color: #000000, $alpha: 0.8);
|
background-color: rgba($color: #000000, $alpha: 0.8);
|
||||||
|
|
@ -115,7 +126,7 @@ const submit = () => {
|
||||||
.login-box {
|
.login-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-image: url(../../assets/login_img/bg.png);
|
background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/a0732202312131402421186.png);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue