This commit is contained in:
parent
15f032da3d
commit
7a72253f8b
Binary file not shown.
|
After Width: | Height: | Size: 581 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -1,507 +1,232 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, reactive, ref } from "vue"
|
import { ref, reactive, onMounted } 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 initData = (data) => {
|
||||||
|
let arr = [];
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
arr.push(
|
||||||
|
[
|
||||||
|
`${i + 1}`,
|
||||||
|
`-`,
|
||||||
|
`-`,
|
||||||
|
`-`,
|
||||||
|
`-`,
|
||||||
|
`-`,
|
||||||
|
`查看详情>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
list.data = arr;
|
||||||
|
scrollBoardRef.value.updateRows(list.data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const scrollBoardRef = ref(null);
|
||||||
const list = reactive({
|
const list = reactive({
|
||||||
header: [
|
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: [],
|
data: [],
|
||||||
// index: true,
|
// index: true,
|
||||||
// headerBGC: 'rgba(0, 168, 255, 0.76)',
|
headerBGC: 'rgba(0, 156, 255, 0.4)',
|
||||||
// oddRowBGC: 'rgba(91, 219, 246, 0.20)',
|
oddRowBGC: 'rgba(91, 219, 246, 0.10)',
|
||||||
// evenRowBGC: 'rgba(0, 168, 255, 0.16)',
|
evenRowBGC: '',
|
||||||
oddRowBGC: '',
|
align: 'center',
|
||||||
evenRowBGC: "",
|
rowNum: 9
|
||||||
// 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(() => {
|
onMounted(() => {
|
||||||
initEcahrts()
|
initData();
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<border>
|
<div class="box">
|
||||||
<div class="box">
|
<div class="view box1">
|
||||||
<div class="title">配送详情</div>
|
<div class="box-title">
|
||||||
<div class="body-box">
|
<div class="text">监测设备</div>
|
||||||
<div class="left">
|
<div class="bg"></div>
|
||||||
<div class="top">
|
</div>
|
||||||
<div class="view" v-for="(item, index) in orderList" :key="index">
|
<div class="c-box">
|
||||||
<div class="num">
|
<div class="ball">
|
||||||
<div v-for="(t, i) in cOrderValue(item.value)" :key="i">
|
<img src="/src/assets/index_img/ball.png" />
|
||||||
{{ t }}
|
<div class="count">
|
||||||
</div>
|
<div>设备总数</div>
|
||||||
</div>
|
<div>12</div>
|
||||||
<div>{{ item.name }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom echarts" ref="echartsRef"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="ball1 ball-item">
|
||||||
<div class="top">
|
<div class="count">
|
||||||
<div class="t-right">
|
<img src="/src/assets/index_img/ball1.png" />
|
||||||
<img src="/src/assets/img/item.png" />
|
<span>{{ 6 }}</span>
|
||||||
<div>今日订单</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex" @click="openList">
|
|
||||||
<div>查看更多</div>
|
|
||||||
<div>{{ "〉" }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<dv-scroll-board :config="list" style="width: 100%; height: 90%" />
|
离线设备
|
||||||
|
</div>
|
||||||
|
<div class="ball2 ball-item">
|
||||||
|
<div class="count">
|
||||||
|
<img src="/src/assets/index_img/ball2.png" />
|
||||||
|
<span>{{ 6 }}</span>
|
||||||
|
</div>
|
||||||
|
今日警告数
|
||||||
|
</div>
|
||||||
|
<div class="ball3 ball-item">
|
||||||
|
<div class="count">
|
||||||
|
<img src="/src/assets/index_img/ball1.png" />
|
||||||
|
<span>{{ 6 }}</span>
|
||||||
|
</div>
|
||||||
|
在线设备
|
||||||
|
</div>
|
||||||
|
<div class="ball4 ball-item">
|
||||||
|
<div class="count">
|
||||||
|
<img src="/src/assets/index_img/ball2.png" />
|
||||||
|
<span>{{ 6 }}</span>
|
||||||
|
</div>
|
||||||
|
警告总数
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</border>
|
<div class="view box2">
|
||||||
|
<div class="box-title">
|
||||||
|
<div class="text">养殖基地视频监控</div>
|
||||||
|
<div class="bg"></div>
|
||||||
|
</div>
|
||||||
|
<div class="c-box">
|
||||||
|
<dv-scroll-board
|
||||||
|
ref="scrollBoardRef"
|
||||||
|
:config="list"
|
||||||
|
style="width: 100%; height: 100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.box {
|
.box {
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 20px 20px;
|
height: 100%;
|
||||||
font-size: 0.8rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: flex-end;
|
||||||
box-sizing: border-box;
|
position: relative;
|
||||||
.title {
|
.view {
|
||||||
width: 100%;
|
height: 98%;
|
||||||
background-image: url(../../../assets/img/title3.png);
|
box-sizing: border-box !important;
|
||||||
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;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
width: 100%;
|
.box-title {
|
||||||
.left {
|
width: 100%;
|
||||||
width: 60%;
|
position: relative;
|
||||||
height: 100%;
|
.text {
|
||||||
.top {
|
text-align: left;
|
||||||
|
font-family: "ifonts";
|
||||||
|
padding: 0.2rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
.bg {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
background-image: url(../../../assets/index_img/title1.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box1 {
|
||||||
|
width: 34%;
|
||||||
|
.c-box {
|
||||||
|
height: 90%;
|
||||||
|
position: relative;
|
||||||
|
.ball {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
left: 50%;
|
||||||
|
height: 70%;
|
||||||
|
width: auto;
|
||||||
|
transform: translate(-50%);
|
||||||
|
}
|
||||||
|
.count {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 40%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ball-item {
|
||||||
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
flex-direction: column;
|
||||||
height: 25%;
|
align-items: center;
|
||||||
margin-top: 1rem;
|
.count {
|
||||||
.view {
|
position: relative;
|
||||||
width: 21%;
|
img {
|
||||||
height: 100%;
|
height: 20%;
|
||||||
background-image: url(../../../assets/delivery_img/box4.png);
|
width: auto;
|
||||||
background-size: 100% 100%;
|
}
|
||||||
font-size: 1.2rem;
|
span {
|
||||||
font-family: "ifonts";
|
position: absolute;
|
||||||
display: flex;
|
top: 0;
|
||||||
flex-direction: column;
|
left: 0;
|
||||||
justify-content: space-evenly;
|
right: 0;
|
||||||
.num {
|
bottom: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
div {
|
align-items: center;
|
||||||
width: 1.5rem;
|
font-size: 1.2rem;
|
||||||
height: 1.8rem;
|
font-weight: bold;
|
||||||
background-image: url(../../../assets/delivery_img/icon_num.png);
|
|
||||||
background-size: 100% 100%;
|
|
||||||
margin: 0.2rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.bottom {
|
.ball1 {
|
||||||
height: 70%;
|
top: 10%;
|
||||||
width: 100%;
|
left: 20%;
|
||||||
|
}
|
||||||
|
.ball2 {
|
||||||
|
top: 10%;
|
||||||
|
right: 20%;
|
||||||
|
}
|
||||||
|
.ball3 {
|
||||||
|
top: 40%;
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
.ball4 {
|
||||||
|
top: 40%;
|
||||||
|
right: 10%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.right {
|
}
|
||||||
width: 38%;
|
.box2 {
|
||||||
height: 95%;
|
width: 64%;
|
||||||
display: flex;
|
.box-title > .bg {
|
||||||
flex-direction: column;
|
background-image: url(../../../assets/index_img/title2.png);
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.c-box {
|
||||||
|
height: 88%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.border {
|
||||||
|
background-image: url(../../../assets/img/border3.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 0.4rem;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,71 +1,242 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref } from "vue"
|
import { onMounted, reactive, ref, inject, nextTick } from "vue";
|
||||||
import border from "@/components/border.vue";
|
import * as echarts from 'echarts';
|
||||||
import AMap from "./AMap.vue";
|
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 test = () => {
|
|
||||||
console.log('ss');
|
const appStore = useAppStore();
|
||||||
|
|
||||||
|
const mapType = reactive({
|
||||||
|
name: '',
|
||||||
|
json: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const changeType = (name = 'luxian') => {
|
||||||
|
mapType.name = name;
|
||||||
|
if (name == 'luxian') mapType.json = luxian;
|
||||||
|
if (name == 'hejiang') mapType.json = hejiang;
|
||||||
|
if (name == 'xuyong') mapType.json = xuyong;
|
||||||
|
if (name == 'gulin') mapType.json = gulin;
|
||||||
|
if (name == 'jiangyang') mapType.json = jiangyang;
|
||||||
|
if (name == 'longma') mapType.json = longma;
|
||||||
|
if (name == 'naxi') mapType.json = naxi;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let dataValue = [
|
||||||
|
{
|
||||||
|
name: '测试一', value: [105.38, 29.15, 0],
|
||||||
|
store: 2065, team: 33,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试二', value: [105.62, 29.05, 0],
|
||||||
|
store: 665, team: 895,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试三', value: [105.55, 29.10, 0],
|
||||||
|
store: 66, team: 5422,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试四', value: [105.70, 29.23, 0],
|
||||||
|
store: 9887, team: 1562,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '泸县', value: [105.372029, 29.141426, 0],
|
||||||
|
store: 9999, team: 1000,
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
const customFormatter = (params) => {
|
||||||
|
// console.log(params.data);
|
||||||
|
return `{img|${params.data.name}}\n{t|店铺${params.data.store}个, 团队${params.data.team}个}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const initDateValue = () => {
|
||||||
|
dataValue.forEach(item => {
|
||||||
|
item.label = {
|
||||||
|
show: true, // 显示标签
|
||||||
|
formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
|
||||||
|
fontSize: 12, // 字体大小
|
||||||
|
fontWeight: 'bold', // 字体粗细
|
||||||
|
color: '#fff', // 字体颜色
|
||||||
|
offset: [-50, -40], // 标签偏移量，可根据需要调整
|
||||||
|
rich: {
|
||||||
|
img: {
|
||||||
|
backgroundColor: {
|
||||||
|
image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
|
||||||
|
},
|
||||||
|
height: 40,
|
||||||
|
width: 140,
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 14,
|
||||||
|
fontFamily: 'ifonts',
|
||||||
|
align: 'center',
|
||||||
|
padding: [0, 0, 20, 0]
|
||||||
|
},
|
||||||
|
t: {
|
||||||
|
fontSize: 10,
|
||||||
|
align: 'center'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const echartsRef = ref(null);
|
||||||
|
let chart = null;
|
||||||
|
|
||||||
|
const initMap = () => {
|
||||||
|
// 基于DOM元素初始化echarts实例
|
||||||
|
if (chart == null) {
|
||||||
|
chart = echarts.init(echartsRef.value);
|
||||||
|
}
|
||||||
|
echarts.registerMap(mapType.name, mapType.json);
|
||||||
|
|
||||||
|
let domImg = document.createElement("img");
|
||||||
|
domImg.style.height = '1000px';
|
||||||
|
domImg.style.width = "1000px";
|
||||||
|
domImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6b962202311291338462283.png';
|
||||||
|
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
animation: false,
|
||||||
|
//geo方式地理坐标系组件。
|
||||||
|
geo3D: [
|
||||||
|
{
|
||||||
|
map: mapType.name,
|
||||||
|
zoom: 1.0,
|
||||||
|
axisLine: {
|
||||||
|
show: false // 设置为false隐藏坐标轴
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
disabled: true,
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 25,
|
||||||
|
|
||||||
|
},
|
||||||
|
// 选中状态下的多边形和标签样式
|
||||||
|
// emphasis: {
|
||||||
|
// itemStyle: {
|
||||||
|
// // color: '#546686', //地图背景色
|
||||||
|
// borderColor: '#fff', //省市边界线00fcff 516a89
|
||||||
|
// borderWidth: 1,
|
||||||
|
// },
|
||||||
|
// label: {
|
||||||
|
// color: '#fff'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
emphasis: {
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
// aspectScale:0.75, //长宽比
|
||||||
|
// roam: true, //是否允许缩放
|
||||||
|
itemStyle: {
|
||||||
|
color: '#546686', //地图背景色
|
||||||
|
borderColor: '#fff', //省市边界线00fcff 516a89
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
regionHright: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "scatter",
|
||||||
|
coordinateSystem: "geo",
|
||||||
|
data: dataValue,
|
||||||
|
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
|
||||||
|
symbolSize: [40, 30],
|
||||||
|
hoverSymbolSize: [60, 45],
|
||||||
|
label: {
|
||||||
|
formatter: "",
|
||||||
|
position: "center",
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
// tooltip: {
|
||||||
|
// formatter (value) {
|
||||||
|
// console.log(value);
|
||||||
|
// return "";
|
||||||
|
// },
|
||||||
|
// show: true
|
||||||
|
// },
|
||||||
|
// encode: {
|
||||||
|
// value: 2
|
||||||
|
// },
|
||||||
|
// itemStyle: {
|
||||||
|
// color: "#0efacc"
|
||||||
|
// },
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
// 使用配置项显示图表
|
||||||
|
chart.setOption(option);
|
||||||
|
|
||||||
|
// 添加自定义图形，实现地图倾斜效果
|
||||||
|
chart.dispatchAction({
|
||||||
|
type: 'updateLayout',
|
||||||
|
rotation: Math.PI / 4, // 设置旋转角度
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置3D效果，实现地图立体效果
|
||||||
|
chart.setOption({
|
||||||
|
grid3D: {},
|
||||||
|
xAxis3D: {},
|
||||||
|
yAxis3D: {},
|
||||||
|
zAxis3D: {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
changeType(appStore.map_info);
|
||||||
|
initDateValue();
|
||||||
|
initMap();
|
||||||
|
nextTick(() => {
|
||||||
|
mitt.on('map_info', e => {
|
||||||
|
changeType(e.pinyin);
|
||||||
|
initDateValue();
|
||||||
|
initMap();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="map">
|
||||||
<div class="map">
|
<div class="echarts" ref="echartsRef"></div>
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.box {
|
.map {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
display: flex;
|
||||||
.border {
|
justify-content: center;
|
||||||
position: absolute;
|
align-items: center;
|
||||||
top: 0;
|
/* background-color: rgba($color: #fff, $alpha: 0.3); */
|
||||||
left: 0;
|
.echarts {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,438 +1,327 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, reactive, ref } from "vue"
|
import { ref, reactive, onMounted } from "vue"
|
||||||
import border from "@/components/border.vue";
|
import * as echarts from "echarts"
|
||||||
import AMapLeft from "./AMapLeft.vue";
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
|
const circleRef = ref(null);
|
||||||
|
const initCircle = () => {
|
||||||
|
const echart = echarts.init(circleRef.value);
|
||||||
|
let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
|
||||||
|
|
||||||
var fontColor = "#000";
|
let data = [
|
||||||
var seriesName = "";
|
{ value: 400, name: '种类: 本地鸡' },
|
||||||
let noramlSize = 16;
|
{ value: 435, name: '种类: 鸭' },
|
||||||
var datas = {
|
{ value: 580, name: '种类: 鹅' },
|
||||||
textValue: "100%",
|
{ value: 884, name: '种类: 猪' },
|
||||||
colors: ["#31829d", "#009cff", "#4b5fdb"],
|
]
|
||||||
legendArr: ["待取货", "待配送", "已送达"],
|
let option = {
|
||||||
dataArr: [
|
tooltip: {
|
||||||
{ value: 335, name: "待取货" },
|
trigger: 'item',
|
||||||
{ value: 210, name: "待配送" },
|
},
|
||||||
{ value: 410, name: "已送达" },
|
color: color,
|
||||||
],
|
legend: {
|
||||||
company: "个"
|
show: true,
|
||||||
};
|
// icon: "rect",
|
||||||
const option = {
|
itemWidth: 8,
|
||||||
backgroundColor: "rgba(0,0,0,0)",
|
itemHeight: 8,
|
||||||
color: datas.colors,
|
bottom: "5%",
|
||||||
grid: {
|
textStyle: {
|
||||||
left: "0%",
|
color: "#fff"
|
||||||
right: "0%",
|
},
|
||||||
bottom: "0%",
|
},
|
||||||
top: "0%"
|
series: [
|
||||||
},
|
|
||||||
graphic: {
|
|
||||||
elements: [
|
|
||||||
{
|
{
|
||||||
type: 'text',
|
name: 'Access From',
|
||||||
left: 'center', // 相对父元素居中
|
type: 'pie',
|
||||||
bottom: '50%', // 相对父元素居中
|
radius: ['40%', '70%'],
|
||||||
style: {
|
center: ['50%', '40%'], // 设置左半部分饼图的位置
|
||||||
fill: '#fff',
|
avoidLabelOverlap: false,
|
||||||
text: datas.textValue,
|
label: {
|
||||||
font: '18px Microsoft YaHei'
|
show: false,
|
||||||
}
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
fontSize: 10,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: data
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
};
|
||||||
tooltip: {
|
|
||||||
trigger: "item",
|
echart.setOption(option)
|
||||||
backgroundColor: "#f6f6f6",
|
}
|
||||||
textStyle: {
|
|
||||||
color: "#000"
|
const chartRef = ref(null)
|
||||||
},
|
const initMap = () => {
|
||||||
formatter: "{b}: {c}" + datas.company + " ({d}%)"
|
const echart = echarts.init(chartRef.value);
|
||||||
},
|
const basicColors = [
|
||||||
legend: {
|
['#00A8FF', '#2A7FEB'],
|
||||||
icon: "rect",
|
['#00A8FF', '#2A7FEB'],
|
||||||
bottom: "5%",
|
['#00A8FF', '#2A7FEB'],
|
||||||
left: "center",
|
['#00A8FF', '#2A7FEB'],
|
||||||
itemWidth: 12,
|
['#00A8FF', '#2A7FEB'],
|
||||||
itemHeight: 12,
|
['#00A8FF', '#2A7FEB'],
|
||||||
// itemGap: 50, //图例间隙
|
['#00A8FF', '#2A7FEB'],
|
||||||
textStyle: {
|
['#00A8FF', '#2A7FEB']
|
||||||
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]
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
};
|
// 生成渐变色
|
||||||
|
function genLinearGradient (colors) {
|
||||||
|
const color = {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 1,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: colors[0] // 0%处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: colors[1] // 100%处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false
|
||||||
|
}
|
||||||
|
return color
|
||||||
|
}
|
||||||
|
|
||||||
const echartsRef = ref(null)
|
let option = {
|
||||||
|
grid: {
|
||||||
const initEcahrts = () => {
|
left: '12%',
|
||||||
// 基于DOM元素初始化echarts实例
|
top: '5%',
|
||||||
const chart = echarts.init(echartsRef.value);
|
bottom: '12%',
|
||||||
|
right: '0%'
|
||||||
// 使用配置项显示图表
|
},
|
||||||
chart.setOption(option);
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: 'rgba(0, 156, 255, 0.6)', //设置背景颜色
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
borderColor: "rgba(0, 156, 255, 1)",
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
shadowStyle: {
|
||||||
|
color: 'rgba(255,255,255, .2)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatter: function (params) {
|
||||||
|
let str = "";
|
||||||
|
for (let i = 0; i < params.length; i++) {
|
||||||
|
if (params[i].seriesName !== "") {
|
||||||
|
str +=
|
||||||
|
params[i].name +
|
||||||
|
': ' +
|
||||||
|
params[i].value +
|
||||||
|
"<br/>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: ['鸡', '鸭', '鹅', '猪'],
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.3)',
|
||||||
|
width: 1 // 这里是为了突出显示加上的
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [{
|
||||||
|
splitNumber: 2,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.3)',
|
||||||
|
width: 1 // 这里是为了突出显示加上的
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
areaStyle: {
|
||||||
|
color: 'rgba(255,255,255,.5)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(255,255,255, 0.5)',
|
||||||
|
width: 0.5,
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'hill',
|
||||||
|
type: 'pictorialBar',
|
||||||
|
barCategoryGap: '0%',
|
||||||
|
symbol: 'path://M0,10 L10,10 C5.5,8 5.5,5 5,0 C4.5,5 4.5,8 0,10 z',
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'top',
|
||||||
|
distance: 15,
|
||||||
|
color: '#FFF6B7',
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function (params) {
|
||||||
|
return genLinearGradient(basicColors[params.dataIndex])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [726, 622, 820, 454],
|
||||||
|
z: 10
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
echart.setOption(option)
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initEcahrts()
|
initCircle();
|
||||||
|
initMap();
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<border>
|
<div class="box">
|
||||||
<div class="box">
|
<div class="view box1">
|
||||||
<div class="title">配送详情</div>
|
<div class="box-title">
|
||||||
<div class="head-box b-box">商品信息</div>
|
<div class="text">泸县原生态养殖基地</div>
|
||||||
<div class="order_h">
|
<div class="bg"></div>
|
||||||
<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>
|
||||||
<div class="head-box b-box">收件人信息</div>
|
<div class="c-box">
|
||||||
<div class="order">
|
<img src="/src/assets/index_img/video.png" />
|
||||||
<div class="bottom">
|
<div class="name">泸县原生态养殖基地</div>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</border>
|
<div class="view box2">
|
||||||
|
<div class="box-title">
|
||||||
|
<div class="text">基地养殖数据</div>
|
||||||
|
<div class="bg"></div>
|
||||||
|
</div>
|
||||||
|
<div class="c-box">
|
||||||
|
<div class="echarts1" ref="circleRef"></div>
|
||||||
|
<div class="echarts2" ref="chartRef"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.box {
|
.box {
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 20px 20px;
|
height: 100%;
|
||||||
font-size: 0.8rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
box-sizing: border-box;
|
position: relative;
|
||||||
.title {
|
.view {
|
||||||
width: 100%;
|
/* border: 1px solid red; */
|
||||||
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%;
|
width: 96%;
|
||||||
margin: 0.5rem 0;
|
box-sizing: border-box !important;
|
||||||
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;
|
display: flex;
|
||||||
width: 100%;
|
justify-content: space-around;
|
||||||
height: 20%;
|
flex-direction: column;
|
||||||
.left {
|
.box-title {
|
||||||
flex: 1;
|
width: 100%;
|
||||||
height: 100%;
|
position: relative;
|
||||||
.left-item {
|
.text {
|
||||||
|
text-align: left;
|
||||||
|
font-family: "ifonts";
|
||||||
|
padding: 0.2rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
.bg {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 100%;
|
||||||
height: 50%;
|
height: 50%;
|
||||||
display: flex;
|
background-image: url(../../../assets/index_img/title1.png);
|
||||||
align-items: center;
|
|
||||||
background-image: url(../../../assets/delivery_img/box1.png);
|
|
||||||
background-size: 100% 100%;
|
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 {
|
}
|
||||||
|
.box1 {
|
||||||
|
height: 60%;
|
||||||
|
.c-box {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 100%;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
height: 76%;
|
||||||
|
width: 96%;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
width: 80%;
|
||||||
|
height: 14%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-image: url(../../../assets/img/border4.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.box2 {
|
||||||
.b-box {
|
height: 38%;
|
||||||
background: linear-gradient(
|
.c-box {
|
||||||
180deg,
|
flex: 1;
|
||||||
rgba(59, 74, 104, 0) 0%,
|
display: flex;
|
||||||
rgba(59, 74, 104, 0.27) 50%,
|
justify-content: space-between;
|
||||||
rgba(0, 168, 255, 0.4) 94%,
|
align-items: flex-end;
|
||||||
rgba(0, 156, 255, 0.8) 100%
|
.echarts1 {
|
||||||
);
|
height: 100%;
|
||||||
|
width: 38%;
|
||||||
|
}
|
||||||
|
.echarts2 {
|
||||||
|
height: 98%;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.border {
|
||||||
|
background-image: url(../../../assets/img/border1.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 100%;
|
||||||
|
width: 0.4rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,172 +1,90 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
import { ref, reactive, onMounted } from "vue"
|
||||||
import border from "../../../components/border.vue"
|
|
||||||
const items = reactive([
|
import rightCard from "./rightCard.vue"
|
||||||
{ 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(() => {
|
onMounted(() => {
|
||||||
nextTick(() => {
|
|
||||||
autoScroll();
|
|
||||||
})
|
|
||||||
})
|
|
||||||
onUnmounted(() => {
|
|
||||||
clearInterval(timer);
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<border>
|
<div class="box">
|
||||||
<div class="box">
|
<div class="view box1">
|
||||||
<div class="title">配送商品排行榜</div>
|
<div class="box-title">
|
||||||
<div
|
<div class="text">智能监测数据</div>
|
||||||
style="
|
<div class="bg"></div>
|
||||||
height: calc(100% - 60px);
|
</div>
|
||||||
width: 100%;
|
<div class="c-box">
|
||||||
overflow: hidden;
|
<rightCard
|
||||||
position: relative;
|
class="box-card"
|
||||||
"
|
v-for="(item, index) in 6"
|
||||||
>
|
:key="index"
|
||||||
<div class="scroll-container" ref="scrollContainerRef">
|
></rightCard>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</border>
|
<div class="border"></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.box {
|
.box {
|
||||||
padding: 20px;
|
width: 100%;
|
||||||
font-size: 0.8rem;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: flex-end;
|
||||||
height: 100%;
|
position: relative;
|
||||||
width: 100%;
|
.view {
|
||||||
box-sizing: border-box;
|
/* border: 1px solid red; */
|
||||||
overflow: hidden;
|
width: 96%;
|
||||||
.title {
|
box-sizing: border-box !important;
|
||||||
width: 100%;
|
|
||||||
background-image: url(../../../assets/img/title.png);
|
|
||||||
background-size: 100% 100%;
|
|
||||||
height: 40px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
font-family: "ifonts";
|
.box-title {
|
||||||
font-size: 1.2rem;
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
.text {
|
||||||
|
text-align: left;
|
||||||
|
font-family: "ifonts";
|
||||||
|
padding: 0.2rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
.bg {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
background-image: url(../../../assets/index_img/title1.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.scroll-container {
|
.box1 {
|
||||||
|
height: 100%;
|
||||||
|
.c-box {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
.box-card {
|
||||||
|
width: 100%;
|
||||||
|
height: 15%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.border {
|
||||||
|
background-image: url(../../../assets/img/border2.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 100%;
|
||||||
|
width: 0.4rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,172 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from "vue"
|
||||||
|
import * as echarts from "echarts"
|
||||||
|
|
||||||
|
const chartsRef = ref(null)
|
||||||
|
const initMap = () => {
|
||||||
|
const charts = echarts.init(chartsRef.value);
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
show: true,
|
||||||
|
text: '甲烷',
|
||||||
|
top: "10%",
|
||||||
|
left: "12%",
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: [
|
||||||
|
'rgba(0, 168, 255, 1)',
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: 'rgba(0, 156, 255, 0.6)', //设置背景颜色
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
borderColor: "rgba(0, 156, 255, 1)",
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
shadowStyle: {
|
||||||
|
color: 'rgba(255,255,255, .2)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatter: function (params) {
|
||||||
|
let str = "";
|
||||||
|
for (let i = 0; i < params.length; i++) {
|
||||||
|
if (params[i].seriesName !== "") {
|
||||||
|
str +=
|
||||||
|
params[i].name +
|
||||||
|
'甲烷: ' +
|
||||||
|
params[i].value +
|
||||||
|
"<br/>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '20%',
|
||||||
|
left: '4%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '10%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: ['12.01', '12.02', '12.03', '12.04', '12.05', '12.06', '12.07'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#666',
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 40,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '工厂1',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
// showSymbol: false,/
|
||||||
|
symbolSize: 8,
|
||||||
|
zlevel: 3,
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(0, 168, 255, 0.7)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: 'rgba(0, 168, 255, 0.4)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(0, 168, 255, 0.2)',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false,
|
||||||
|
),
|
||||||
|
shadowColor: 'rgba(0, 168, 255, 1)',
|
||||||
|
shadowBlur: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [100, 138, 350, 173, 180, 150, 180],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
charts.setOption(option)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initMap()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="c-card">
|
||||||
|
<div class="left">
|
||||||
|
<div>监测正常</div>
|
||||||
|
<img src="/src/assets/img/icon.png" />
|
||||||
|
<div>甲烷监测设备</div>
|
||||||
|
</div>
|
||||||
|
<div class="right" ref="chartsRef"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.c-card {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
.left {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
height: 4.6rem;
|
||||||
|
width: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,507 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from "vue"
|
||||||
|
import border from "@/components/border.vue";
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import mitt from "@/utils/mitt"
|
||||||
|
|
||||||
|
const initData = (aaa) => {
|
||||||
|
for (let i = 0; i < 20; i++) {
|
||||||
|
if (i % 2 == 0) {
|
||||||
|
aaa.data.push(
|
||||||
|
[
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)' >排sd序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(91, 219, 246, 0.20)'>排序</div>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
aaa.data.push(
|
||||||
|
[
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)' >排sd序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: rgba(0, 168, 255, 0.16)'>排序</div>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const list = reactive({
|
||||||
|
header: [
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>ID</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人电话</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>商品名称</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(rgba(0, 168, 255, 0.76), rgba(0, 84, 128, 0.73));'>收货人地址</div>`,
|
||||||
|
],
|
||||||
|
data: [],
|
||||||
|
// index: true,
|
||||||
|
// headerBGC: 'rgba(0, 168, 255, 0.76)',
|
||||||
|
// oddRowBGC: 'rgba(91, 219, 246, 0.20)',
|
||||||
|
// evenRowBGC: 'rgba(0, 168, 255, 0.16)',
|
||||||
|
oddRowBGC: '',
|
||||||
|
evenRowBGC: "",
|
||||||
|
// columnWidth: [50],
|
||||||
|
align: ['center'],
|
||||||
|
rowNum: 7
|
||||||
|
})
|
||||||
|
|
||||||
|
initData(list);
|
||||||
|
|
||||||
|
const orderList = reactive([
|
||||||
|
{
|
||||||
|
name: '今日订单',
|
||||||
|
value: '988'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '已取货订单',
|
||||||
|
value: '1523'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '未配送订单',
|
||||||
|
value: '55'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '已完成订单',
|
||||||
|
value: '3'
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const cOrderValue = (e) => {
|
||||||
|
let str = e;
|
||||||
|
if (str > 9999) str = 9999 + '';
|
||||||
|
else str = str + '';
|
||||||
|
str = str.split('');
|
||||||
|
if (str.length < 4) {
|
||||||
|
let t = 4 - str.length;
|
||||||
|
for (let i = 0; i < t; i++) {
|
||||||
|
str.unshift('0');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
str.splice(-3, 0, ',');
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const echartsRef = ref(null)
|
||||||
|
|
||||||
|
const initEcahrts = () => {
|
||||||
|
|
||||||
|
let xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
|
||||||
|
yData1 = [400, 410, 350, 320, 280, 340, 360, 400, 420, 410],
|
||||||
|
yData2 = [350, 320, 260, 240, 220, 280, 300, 360, 340, 340],
|
||||||
|
yData3 = [200, 260, 200, 190, 180, 220, 260, 300, 280, 300],
|
||||||
|
yData4 = [120, 300, 230, 240, 190, 290, 103, 456, 230, 270],
|
||||||
|
borderData = [],
|
||||||
|
legend = ["已取货订单", "未配送订单", "已完成订单", "小时订单数"],
|
||||||
|
colorArr = [{
|
||||||
|
start: "rgba(0, 168, 255,",
|
||||||
|
end: "rgba(0, 168, 255, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: "rgba(91, 219, 246,",
|
||||||
|
end: "rgba(91, 219, 246, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: "rgba(75, 95, 219,",
|
||||||
|
end: "rgba(75, 95, 219, 1)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "rgba(91, 219, 246, 1)"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
let normalColor = "#DEEBFF";
|
||||||
|
// let fontSize = 20;
|
||||||
|
let seriesData = [];
|
||||||
|
let borderHeight = 4;
|
||||||
|
xData.forEach(element => {
|
||||||
|
borderData.push(borderHeight);
|
||||||
|
});
|
||||||
|
[yData1, yData2, yData3, yData4].forEach((item, index) => {
|
||||||
|
let obj1 = {};
|
||||||
|
if (index < 3) {
|
||||||
|
obj1 = {
|
||||||
|
name: legend[index],
|
||||||
|
type: "bar",
|
||||||
|
stack: legend[index],
|
||||||
|
data: item,
|
||||||
|
barWidth: "15%",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: colorArr[index].start + "0.3)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: colorArr[index].start + "0.4)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: colorArr[index].end
|
||||||
|
}
|
||||||
|
],
|
||||||
|
globalCoord: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
seriesData.push(obj1);
|
||||||
|
} else {
|
||||||
|
let obj3 = {
|
||||||
|
name: legend[index],
|
||||||
|
type: "line",
|
||||||
|
yAxisIndex: 1,
|
||||||
|
smooth: false,
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: 'rgba(255,255,255, 0.8)'
|
||||||
|
},
|
||||||
|
symbol: "circle",
|
||||||
|
symbolSize: 16,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: colorArr[index].color,
|
||||||
|
borderColor: "#fff",
|
||||||
|
borderWidth: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: item,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
seriesData.push(obj3);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log(seriesData);
|
||||||
|
const option = {
|
||||||
|
backgroundColor: "rgba(0,0,0,0)",
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
top: "12%",
|
||||||
|
right: "12%",
|
||||||
|
bottom: '2%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
// icon: "rect",
|
||||||
|
orient: 'vertical', // 将图例竖直布局
|
||||||
|
|
||||||
|
itemWidth: 16,
|
||||||
|
itemHeight: 10,
|
||||||
|
right: "right",
|
||||||
|
bottom: "center",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff"
|
||||||
|
},
|
||||||
|
data: legend
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
borderColor: "rgba(18, 57, 60, .8)",
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
shadowStyle: {
|
||||||
|
color: 'rgba(0, 11, 34, .4)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatter: function (params) {
|
||||||
|
let str = "";
|
||||||
|
for (let i = 0; i < params.length; i++) {
|
||||||
|
if (params[i].seriesName !== "") {
|
||||||
|
str +=
|
||||||
|
params[i].name +
|
||||||
|
':' +
|
||||||
|
params[i].seriesName +
|
||||||
|
'-' +
|
||||||
|
params[i].value +
|
||||||
|
"<br/>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: "category",
|
||||||
|
data: xData,
|
||||||
|
name: '小时(工作时间)',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow"
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
align: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: normalColor,
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#1C82C5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxis: [{
|
||||||
|
type: "value",
|
||||||
|
// name: "亿千瓦时",
|
||||||
|
// nameTextStyle: {
|
||||||
|
// color: normalColor,
|
||||||
|
// fontSize: 12
|
||||||
|
// },
|
||||||
|
// "min": 0,
|
||||||
|
// "max": 50,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}",
|
||||||
|
textStyle: {
|
||||||
|
color: normalColor,
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#1C82C5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: "solid",
|
||||||
|
color: 'rgba(28, 130, 197, .3)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
// name: "%",
|
||||||
|
// nameTextStyle: {
|
||||||
|
// color: normalColor,
|
||||||
|
// fontSize: 12
|
||||||
|
// },
|
||||||
|
// min: -100,
|
||||||
|
// max: 100,
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
formatter: "{value}",
|
||||||
|
textStyle: {
|
||||||
|
color: normalColor,
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#1C82C5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed",
|
||||||
|
color: "rgba(255,255,255,0.2)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: seriesData
|
||||||
|
};
|
||||||
|
|
||||||
|
// 基于DOM元素初始化echarts实例
|
||||||
|
const chart = echarts.init(echartsRef.value);
|
||||||
|
|
||||||
|
// 使用配置项显示图表
|
||||||
|
chart.setOption(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
const openList = () => {
|
||||||
|
mitt.emit('showBusinesses')
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initEcahrts()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<border>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">配送详情</div>
|
||||||
|
<div class="body-box">
|
||||||
|
<div class="left">
|
||||||
|
<div class="top">
|
||||||
|
<div class="view" v-for="(item, index) in orderList" :key="index">
|
||||||
|
<div class="num">
|
||||||
|
<div v-for="(t, i) in cOrderValue(item.value)" :key="i">
|
||||||
|
{{ t }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom echarts" ref="echartsRef"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="top">
|
||||||
|
<div class="t-right">
|
||||||
|
<img src="/src/assets/img/item.png" />
|
||||||
|
<div>今日订单</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex" @click="openList">
|
||||||
|
<div>查看更多</div>
|
||||||
|
<div>{{ "〉" }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<dv-scroll-board :config="list" style="width: 100%; height: 90%" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</border>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 20px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/img/title3.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: "ifonts";
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.body-box {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
.left {
|
||||||
|
width: 60%;
|
||||||
|
height: 100%;
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
height: 25%;
|
||||||
|
margin-top: 1rem;
|
||||||
|
.view {
|
||||||
|
width: 21%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url(../../../assets/delivery_img/box4.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-family: "ifonts";
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
.num {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
div {
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.8rem;
|
||||||
|
background-image: url(../../../assets/delivery_img/icon_num.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin: 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
height: 70%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 38%;
|
||||||
|
height: 95%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
.top {
|
||||||
|
height: 10%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.t-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
div {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ceil) {
|
||||||
|
padding: 0 !important;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.header-item) {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref } from "vue"
|
||||||
|
import border from "@/components/border.vue";
|
||||||
|
import AMap from "./AMap.vue";
|
||||||
|
|
||||||
|
const test = () => {
|
||||||
|
console.log('ss');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="map">
|
||||||
|
<AMap></AMap>
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
<div class="btn">
|
||||||
|
<div class="c-b" @click.stop="test">
|
||||||
|
<div class="text">已取货(100)单</div>
|
||||||
|
</div>
|
||||||
|
<div class="c-b" @click.stop="test">
|
||||||
|
<div class="text">已配送(100)单</div>
|
||||||
|
</div>
|
||||||
|
<div class="c-b" @click.stop="test">
|
||||||
|
<div class="text">已完成(100)单</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
.border {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid rgba(91, 219, 246, 1);
|
||||||
|
box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.map {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 30%;
|
||||||
|
left: 2rem;
|
||||||
|
.c-b {
|
||||||
|
cursor: pointer;
|
||||||
|
background-image: url(../../../assets/delivery_img/icon9.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 4rem;
|
||||||
|
width: 11.5rem;
|
||||||
|
margin-bottom: 1.4rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.text {
|
||||||
|
margin-left: 4.5rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,438 @@
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, reactive, ref } from "vue"
|
||||||
|
import border from "@/components/border.vue";
|
||||||
|
import AMapLeft from "./AMapLeft.vue";
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
|
||||||
|
var fontColor = "#000";
|
||||||
|
var seriesName = "";
|
||||||
|
let noramlSize = 16;
|
||||||
|
var datas = {
|
||||||
|
textValue: "100%",
|
||||||
|
colors: ["#31829d", "#009cff", "#4b5fdb"],
|
||||||
|
legendArr: ["待取货", "待配送", "已送达"],
|
||||||
|
dataArr: [
|
||||||
|
{ value: 335, name: "待取货" },
|
||||||
|
{ value: 210, name: "待配送" },
|
||||||
|
{ value: 410, name: "已送达" },
|
||||||
|
],
|
||||||
|
company: "个"
|
||||||
|
};
|
||||||
|
const option = {
|
||||||
|
backgroundColor: "rgba(0,0,0,0)",
|
||||||
|
color: datas.colors,
|
||||||
|
grid: {
|
||||||
|
left: "0%",
|
||||||
|
right: "0%",
|
||||||
|
bottom: "0%",
|
||||||
|
top: "0%"
|
||||||
|
},
|
||||||
|
graphic: {
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
left: 'center', // 相对父元素居中
|
||||||
|
bottom: '50%', // 相对父元素居中
|
||||||
|
style: {
|
||||||
|
fill: '#fff',
|
||||||
|
text: datas.textValue,
|
||||||
|
font: '18px Microsoft YaHei'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
backgroundColor: "#f6f6f6",
|
||||||
|
textStyle: {
|
||||||
|
color: "#000"
|
||||||
|
},
|
||||||
|
formatter: "{b}: {c}" + datas.company + " ({d}%)"
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
icon: "rect",
|
||||||
|
bottom: "5%",
|
||||||
|
left: "center",
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 12,
|
||||||
|
// itemGap: 50, //图例间隙
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: noramlSize
|
||||||
|
},
|
||||||
|
data: datas.legendArr
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["45%", "60%"],
|
||||||
|
center: ["50%", "45%"],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
borderWidth: 10,
|
||||||
|
borderColor: "#092846"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'bottom'
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#138af4"
|
||||||
|
},
|
||||||
|
length: 20,
|
||||||
|
length2: 50,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: datas.dataArr
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: "40%",
|
||||||
|
center: ["50%", "45%"],
|
||||||
|
z: -2,
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.2)'
|
||||||
|
},
|
||||||
|
data: [100]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const echartsRef = ref(null)
|
||||||
|
|
||||||
|
const initEcahrts = () => {
|
||||||
|
// 基于DOM元素初始化echarts实例
|
||||||
|
const chart = echarts.init(echartsRef.value);
|
||||||
|
|
||||||
|
// 使用配置项显示图表
|
||||||
|
chart.setOption(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initEcahrts()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<border>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">配送详情</div>
|
||||||
|
<div class="head-box b-box">商品信息</div>
|
||||||
|
<div class="order_h">
|
||||||
|
<div class="top">
|
||||||
|
<div>
|
||||||
|
订单编号
|
||||||
|
<span style="margin-left: 1rem"
|
||||||
|
>bzj20230923163643650ea39ba256c</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div>23-11-20</div>
|
||||||
|
</div>
|
||||||
|
<div class="line">
|
||||||
|
<div class="c"></div>
|
||||||
|
<div class="l"></div>
|
||||||
|
<div class="c"></div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div>
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon1.png" />
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="name1 b-box">
|
||||||
|
<div>商户名称</div>
|
||||||
|
</div>
|
||||||
|
<div class="name2">
|
||||||
|
<div>天天超市</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="name1 b-box">
|
||||||
|
<div>商品名称</div>
|
||||||
|
</div>
|
||||||
|
<div class="name2">
|
||||||
|
<div>山花纯牛奶100ml</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon2.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="head-box b-box">收件人信息</div>
|
||||||
|
<div class="order">
|
||||||
|
<div class="bottom">
|
||||||
|
<div>
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon4.png" />
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="name1 b-box">
|
||||||
|
<div>收件人</div>
|
||||||
|
</div>
|
||||||
|
<div class="name2">
|
||||||
|
<div>王**</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="name1 b-box">
|
||||||
|
<div>收件人电话</div>
|
||||||
|
</div>
|
||||||
|
<div class="name2">
|
||||||
|
<div>159****3366</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon8.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="order">
|
||||||
|
<div class="bottom">
|
||||||
|
<div>
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon6.png" />
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="name1 b-box">
|
||||||
|
<div>收件地址</div>
|
||||||
|
</div>
|
||||||
|
<div class="name2">
|
||||||
|
<div>泸县草芥幸福小区一号楼10-22</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="name1 b-box">
|
||||||
|
<div>当前状态</div>
|
||||||
|
</div>
|
||||||
|
<div class="name2">
|
||||||
|
<div>订单已完成</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon5.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="map">
|
||||||
|
<AMapLeft></AMapLeft>
|
||||||
|
<div class="border"></div>
|
||||||
|
</div>
|
||||||
|
<div class="head-box b-box">物流信息</div>
|
||||||
|
<div class="delivery">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-item">
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon7.png" />
|
||||||
|
<div>配送人员<span>里斯</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="left-item">
|
||||||
|
<img class="img" src="/src/assets/delivery_img/icon3.png" />
|
||||||
|
<div>配送车辆<span>川E G856Z</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right echarts" ref="echartsRef"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</border>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 20px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/img/title.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: "ifonts";
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.head-box {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-family: "ifonts";
|
||||||
|
width: calc(100% - 1rem);
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
.order {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/delivery_img/box2.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 10%;
|
||||||
|
.bottom {
|
||||||
|
width: 90%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
.img {
|
||||||
|
height: 4rem;
|
||||||
|
width: 3.5rem;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
height: 60%;
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.2rem 1.2rem;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
.name2 {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_h {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/delivery_img/box3.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 15%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
.top {
|
||||||
|
width: 90%;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
padding-top: 1rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
display: flex;
|
||||||
|
width: 90%;
|
||||||
|
align-items: center;
|
||||||
|
.c {
|
||||||
|
width: 0.2rem;
|
||||||
|
height: 0.2rem;
|
||||||
|
background-color: #5bdbf6;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.l {
|
||||||
|
flex: 1;
|
||||||
|
height: 0.1rem;
|
||||||
|
background-color: #5bdbf6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
.img {
|
||||||
|
height: 4rem;
|
||||||
|
width: 3.5rem;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
height: 80%;
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.2rem 1.2rem;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
.name2 {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.map {
|
||||||
|
height: 16%;
|
||||||
|
width: 96%;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
border: 1px solid rgba(91, 219, 246, 1);
|
||||||
|
position: relative;
|
||||||
|
.border {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: inset 1px 1px 40px rgba(91, 219, 246, 0.5);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.delivery {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 20%;
|
||||||
|
.left {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
.left-item {
|
||||||
|
height: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-image: url(../../../assets/delivery_img/box1.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 10%;
|
||||||
|
.img {
|
||||||
|
height: 4rem;
|
||||||
|
width: 3.5rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.b-box {
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(59, 74, 104, 0) 0%,
|
||||||
|
rgba(59, 74, 104, 0.27) 50%,
|
||||||
|
rgba(0, 168, 255, 0.4) 94%,
|
||||||
|
rgba(0, 156, 255, 0.8) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,172 @@
|
||||||
|
<script setup>
|
||||||
|
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
||||||
|
import border from "../../../components/border.vue"
|
||||||
|
const items = reactive([
|
||||||
|
{ id: 1, text: '莲花池 1' },
|
||||||
|
{ id: 2, text: '莲花池 2' },
|
||||||
|
{ id: 3, text: '莲花池 3' },
|
||||||
|
{ id: 3, text: '莲花池 4' },
|
||||||
|
{ id: 3, text: '莲花池 5' },
|
||||||
|
{ id: 3, text: '莲花池 6' },
|
||||||
|
{ id: 3, text: '莲花池 7' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
{ id: 3, text: '莲花池 8' },
|
||||||
|
])
|
||||||
|
const scrollContainerRef = ref(null);
|
||||||
|
let timer = null;
|
||||||
|
const autoScroll = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
timer = setInterval(() => {
|
||||||
|
if (scrollContainerRef.value) {
|
||||||
|
scrollContainerRef.value.scrollTop += 1;
|
||||||
|
if (scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >= scrollContainerRef.value.scrollHeight - 1) {
|
||||||
|
scrollContainerRef.value.scrollTop = 0;
|
||||||
|
clearInterval(timer);
|
||||||
|
autoScroll();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 50)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
autoScroll();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer);
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<border>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">配送商品排行榜</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="scroll-container" ref="scrollContainerRef">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in items"
|
||||||
|
:key="item.id"
|
||||||
|
class="b-list-item"
|
||||||
|
>
|
||||||
|
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
||||||
|
{{ index + 1 }}
|
||||||
|
</div>
|
||||||
|
<div class="name">{{ item.text }}</div>
|
||||||
|
<div class="line">
|
||||||
|
<div
|
||||||
|
class="line-body"
|
||||||
|
:style="{ width: '80%' }"
|
||||||
|
:class="{ 'line-body2': index >= 3 }"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="count">6000</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</border>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(../../../assets/img/title.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: "ifonts";
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.scroll-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
/* 隐藏滚动条 */
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.b-list-item {
|
||||||
|
height: 3rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
.rank {
|
||||||
|
width: 50px;
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
.rank1 {
|
||||||
|
background-image: url(../../../assets/img/ranking1.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.rank2 {
|
||||||
|
background-image: url(../../../assets/img/ranking2.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
flex: 5;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
width: 50%;
|
||||||
|
height: 0.8rem;
|
||||||
|
background-color: #0a385b;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
.line-body {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
width: 0%;
|
||||||
|
background: linear-gradient(270deg, #00c0fe 0%, #0f87fa 100%);
|
||||||
|
}
|
||||||
|
.line-body2 {
|
||||||
|
background: linear-gradient(270deg, #5bdbf6 0%, #5bdbf6 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.count {
|
||||||
|
flex: 2;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: "ifonts";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,21 +1,23 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import leftItem from "./components/left.vue";
|
import rightItme from "./components/right.vue";
|
||||||
import centerItem from "./components/center.vue";
|
import leftItme from "./components/left.vue";
|
||||||
import bottomItem from "./components/bottom.vue";
|
import centerItme from "./components/center.vue";
|
||||||
import rightItem from "./components/right.vue";
|
import bottomItme from "./components/bottom.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<div class="item">
|
|
||||||
<leftItem style="height: 98%"></leftItem>
|
|
||||||
</div>
|
|
||||||
<div class="item item_c">
|
<div class="item item_c">
|
||||||
<div style="height: 61%; display: flex; justify-content: space-between">
|
<div style="height: 61%; display: flex; justify-content: space-between">
|
||||||
<centerItem style="width: 64%"></centerItem>
|
<leftItme style="width: 35%"></leftItme>
|
||||||
<rightItem style="width: 35%"></rightItem>
|
<centerItme style="width: 64%"></centerItme>
|
||||||
</div>
|
</div>
|
||||||
<bottomItem style="height: 36%"></bottomItem>
|
<div style="height: 36%">
|
||||||
|
<bottomItme style="width: 100%"></bottomItme>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<rightItme style="height: 98%"></rightItme>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,232 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from "vue"
|
||||||
|
|
||||||
|
const initData = (data) => {
|
||||||
|
let arr = [];
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
arr.push(
|
||||||
|
[
|
||||||
|
`${i + 1}`,
|
||||||
|
`-`,
|
||||||
|
`-`,
|
||||||
|
`-`,
|
||||||
|
`-`,
|
||||||
|
`-`,
|
||||||
|
`查看详情>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
list.data = arr;
|
||||||
|
scrollBoardRef.value.updateRows(list.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
const scrollBoardRef = ref(null);
|
||||||
|
const list = reactive({
|
||||||
|
header: [
|
||||||
|
`设备编号`,
|
||||||
|
`设备名称`,
|
||||||
|
`警告时间`,
|
||||||
|
`警告数据`,
|
||||||
|
`设备图片`,
|
||||||
|
`警告原因`,
|
||||||
|
`解决方案`,
|
||||||
|
],
|
||||||
|
data: [],
|
||||||
|
// index: true,
|
||||||
|
headerBGC: 'rgba(0, 156, 255, 0.4)',
|
||||||
|
oddRowBGC: 'rgba(91, 219, 246, 0.10)',
|
||||||
|
evenRowBGC: '',
|
||||||
|
align: 'center',
|
||||||
|
rowNum: 9
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initData();
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="view box1">
|
||||||
|
<div class="box-title">
|
||||||
|
<div class="text">监测设备</div>
|
||||||
|
<div class="bg"></div>
|
||||||
|
</div>
|
||||||
|
<div class="c-box">
|
||||||
|
<div class="ball">
|
||||||
|
<img src="/src/assets/index_img/ball.png" />
|
||||||
|
<div class="count">
|
||||||
|
<div>设备总数</div>
|
||||||
|
<div>12</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ball1 ball-item">
|
||||||
|
<div class="count">
|
||||||
|
<img src="/src/assets/index_img/ball1.png" />
|
||||||
|
<span>{{ 6 }}</span>
|
||||||
|
</div>
|
||||||
|
离线设备
|
||||||
|
</div>
|
||||||
|
<div class="ball2 ball-item">
|
||||||
|
<div class="count">
|
||||||
|
<img src="/src/assets/index_img/ball2.png" />
|
||||||
|
<span>{{ 6 }}</span>
|
||||||
|
</div>
|
||||||
|
今日警告数
|
||||||
|
</div>
|
||||||
|
<div class="ball3 ball-item">
|
||||||
|
<div class="count">
|
||||||
|
<img src="/src/assets/index_img/ball1.png" />
|
||||||
|
<span>{{ 6 }}</span>
|
||||||
|
</div>
|
||||||
|
在线设备
|
||||||
|
</div>
|
||||||
|
<div class="ball4 ball-item">
|
||||||
|
<div class="count">
|
||||||
|
<img src="/src/assets/index_img/ball2.png" />
|
||||||
|
<span>{{ 6 }}</span>
|
||||||
|
</div>
|
||||||
|
警告总数
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="view box2">
|
||||||
|
<div class="box-title">
|
||||||
|
<div class="text">养殖基地视频监控</div>
|
||||||
|
<div class="bg"></div>
|
||||||
|
</div>
|
||||||
|
<div class="c-box">
|
||||||
|
<dv-scroll-board
|
||||||
|
ref="scrollBoardRef"
|
||||||
|
:config="list"
|
||||||
|
style="width: 100%; height: 100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
position: relative;
|
||||||
|
.view {
|
||||||
|
height: 98%;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
.box-title {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
.text {
|
||||||
|
text-align: left;
|
||||||
|
font-family: "ifonts";
|
||||||
|
padding: 0.2rem 0.8rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
.bg {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
background-image: url(../../../assets/index_img/title1.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box1 {
|
||||||
|
width: 34%;
|
||||||
|
.c-box {
|
||||||
|
height: 90%;
|
||||||
|
position: relative;
|
||||||
|
.ball {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
left: 50%;
|
||||||
|
height: 70%;
|
||||||
|
width: auto;
|
||||||
|
transform: translate(-50%);
|
||||||
|
}
|
||||||
|
.count {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 40%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ball-item {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.count {
|
||||||
|
position: relative;
|
||||||
|
img {
|
||||||
|
height: 20%;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ball1 {
|
||||||
|
top: 10%;
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
.ball2 {
|
||||||
|
top: 10%;
|
||||||
|
right: 20%;
|
||||||
|
}
|
||||||
|
.ball3 {
|
||||||
|
top: 40%;
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
.ball4 {
|
||||||
|
top: 40%;
|
||||||
|
right: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box2 {
|
||||||
|
width: 64%;
|
||||||
|
.box-title > .bg {
|
||||||
|
background-image: url(../../../assets/index_img/title2.png);
|
||||||
|
}
|
||||||
|
.c-box {
|
||||||
|
height: 88%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.border {
|
||||||
|
background-image: url(../../../assets/img/border3.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 0.4rem;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -43,10 +43,19 @@ const initMap = () => {
|
||||||
const chart1 = echarts.init(echarts1Ref.value);
|
const chart1 = echarts.init(echarts1Ref.value);
|
||||||
const chart2 = echarts.init(echarts2Ref.value);
|
const chart2 = echarts.init(echarts2Ref.value);
|
||||||
|
|
||||||
|
let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
|
||||||
|
|
||||||
|
let data1 = [
|
||||||
|
{ value: 400, name: '养殖种类: 本地鸡' },
|
||||||
|
{ value: 435, name: '养殖种类: 本地鸭' },
|
||||||
|
{ value: 580, name: '养殖种类: 本地鹅' },
|
||||||
|
{ value: 884, name: '养殖种类: 本地猪' },
|
||||||
|
]
|
||||||
let option1 = {
|
let option1 = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
|
color: color,
|
||||||
legend: {
|
legend: {
|
||||||
show: true,
|
show: true,
|
||||||
// icon: "rect",
|
// icon: "rect",
|
||||||
|
|
@ -54,6 +63,7 @@ const initMap = () => {
|
||||||
itemWidth: 8,
|
itemWidth: 8,
|
||||||
itemHeight: 8,
|
itemHeight: 8,
|
||||||
right: "5%",
|
right: "5%",
|
||||||
|
top: "10%",
|
||||||
// bottom: "center",
|
// bottom: "center",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: "#fff"
|
||||||
|
|
@ -79,20 +89,22 @@ const initMap = () => {
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
data: [
|
data: data1
|
||||||
{ value: 1048, name: 'Search Engine' },
|
|
||||||
{ value: 735, name: 'Direct' },
|
|
||||||
{ value: 580, name: 'Email' },
|
|
||||||
{ value: 484, name: 'Union Ads' },
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let data2 = [
|
||||||
|
{ value: 500, name: '养殖种类: 本地鸡' },
|
||||||
|
{ value: 735, name: '养殖种类: 本地鸭' },
|
||||||
|
{ value: 580, name: '养殖种类: 本地鹅' },
|
||||||
|
{ value: 484, name: '养殖种类: 本地猪' },
|
||||||
|
]
|
||||||
let option2 = {
|
let option2 = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
|
color: color,
|
||||||
legend: {
|
legend: {
|
||||||
show: true,
|
show: true,
|
||||||
// icon: "rect",
|
// icon: "rect",
|
||||||
|
|
@ -100,6 +112,7 @@ const initMap = () => {
|
||||||
itemWidth: 8,
|
itemWidth: 8,
|
||||||
itemHeight: 8,
|
itemHeight: 8,
|
||||||
right: "5%",
|
right: "5%",
|
||||||
|
top: "10%",
|
||||||
// bottom: "center",
|
// bottom: "center",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff"
|
color: "#fff"
|
||||||
|
|
@ -125,12 +138,7 @@ const initMap = () => {
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
data: [
|
data: data2
|
||||||
{ value: 1048, name: 'Search Engine' },
|
|
||||||
{ value: 735, name: 'Direct' },
|
|
||||||
{ value: 580, name: 'Email' },
|
|
||||||
{ value: 484, name: 'Union Ads' },
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
import leftItme from "./components/left.vue";
|
import leftItme from "./components/left.vue";
|
||||||
import rightItme from "./components/right.vue";
|
import rightItme from "./components/right.vue";
|
||||||
import centerItme from "./components/center.vue";
|
import centerItme from "./components/center.vue";
|
||||||
|
import bottomItme from "./components/bottom.vue";
|
||||||
import test from "./components/test.vue";
|
import test from "./components/test.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -12,10 +13,12 @@ import test from "./components/test.vue";
|
||||||
</div>
|
</div>
|
||||||
<div class="item item_c">
|
<div class="item item_c">
|
||||||
<div style="height: 61%; display: flex; justify-content: space-between">
|
<div style="height: 61%; display: flex; justify-content: space-between">
|
||||||
<centerItme style="width: 64%; border: 1px solid red"></centerItme>
|
<centerItme style="width: 64%"></centerItme>
|
||||||
<rightItme style="width: 35%"></rightItme>
|
<rightItme style="width: 35%"></rightItme>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 36%; border: 1px solid red"></div>
|
<div style="height: 36%">
|
||||||
|
<bottomItme style="width: 100%"></bottomItme>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue