This commit is contained in:
weipengfei 2023-12-06 18:01:02 +08:00
parent 15f032da3d
commit 7a72253f8b
23 changed files with 2398 additions and 1090 deletions

BIN
src/assets/img/border3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 581 B

BIN
src/assets/img/border4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
src/assets/img/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/img/shiler.png Normal file

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

View File

@ -1,507 +1,232 @@
<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>`,
]
)
}
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: [
`<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
headerBGC: 'rgba(0, 156, 255, 0.4)',
oddRowBGC: 'rgba(91, 219, 246, 0.10)',
evenRowBGC: '',
align: 'center',
rowNum: 9
})
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
};
// DOMecharts
const chart = echarts.init(echartsRef.value);
// 使
chart.setOption(option);
}
const openList = () => {
mitt.emit('showBusinesses')
}
onMounted(() => {
initEcahrts()
initData();
})
</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 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 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 class="ball1 ball-item">
<div class="count">
<img src="/src/assets/index_img/ball1.png" />
<span>{{ 6 }}</span>
</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>
</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>
<style scoped lang="scss">
.box {
height: 100%;
width: 100%;
padding: 20px 20px;
font-size: 0.8rem;
height: 100%;
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;
align-items: flex-end;
position: relative;
.view {
height: 98%;
box-sizing: border-box !important;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.left {
width: 60%;
height: 100%;
.top {
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;
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 {
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;
div {
width: 1.5rem;
height: 1.8rem;
background-image: url(../../../assets/delivery_img/icon_num.png);
background-size: 100% 100%;
margin: 0.2rem;
}
align-items: center;
font-size: 1.2rem;
font-weight: bold;
}
}
}
.bottom {
height: 70%;
width: 100%;
.ball1 {
top: 10%;
left: 20%;
}
.ball2 {
top: 10%;
right: 20%;
}
.ball3 {
top: 40%;
left: 10%;
}
.ball4 {
top: 40%;
right: 10%;
}
}
.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;
}
}
.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>

View File

@ -1,71 +1,242 @@
<script setup>
import { reactive, ref } from "vue"
import border from "@/components/border.vue";
import AMap from "./AMap.vue";
import { onMounted, reactive, ref, inject, nextTick } from "vue";
import * as echarts from 'echarts';
import 'echarts-gl';
import mitt from "@/utils/mitt";
import luxian from "@/assets/json/luxian.json";
import hejiang from "@/assets/json/hejiang.json";
import xuyong from "@/assets/json/xuyong.json";
import gulin from "@/assets/json/gulin.json";
import jiangyang from "@/assets/json/jiangyang.json";
import longma from "@/assets/json/longma.json";
import naxi from "@/assets/json/naxi.json";
import { useAppStore } from "@/store/app.js";
const 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 = () => {
// DOMecharts
if (chart == null) {
chart = echarts.init(echartsRef.value);
}
echarts.registerMap(mapType.name, mapType.json);
let domImg = document.createElement("img");
domImg.style.height = '1000px';
domImg.style.width = "1000px";
domImg.src = 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6b962202311291338462283.png';
let option = {
animation: false,
//geo
geo3D: [
{
map: mapType.name,
zoom: 1.0,
axisLine: {
show: false // false
},
label: {
show: false,
disabled: true,
color: '#fff',
fontSize: 25,
},
//
// emphasis: {
// itemStyle: {
// // color: '#546686', //
// borderColor: '#fff', //线00fcff 516a89
// borderWidth: 1,
// },
// label: {
// color: '#fff'
// }
// },
emphasis: {
disabled: true
},
select: {
disabled: true
},
// aspectScale:0.75, //
// roam: true, //
itemStyle: {
color: '#546686', //
borderColor: '#fff', //线00fcff 516a89
borderWidth: 1,
},
regionHright: 1,
},
],
series: [
{
name: "",
type: "scatter",
coordinateSystem: "geo",
data: dataValue,
symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6eb37202311281655342626.png",
symbolSize: [40, 30],
hoverSymbolSize: [60, 45],
label: {
formatter: "",
position: "center",
show: false
},
// tooltip: {
// formatter (value) {
// console.log(value);
// return "";
// },
// show: true
// },
// encode: {
// value: 2
// },
// itemStyle: {
// color: "#0efacc"
// },
emphasis: {
label: {
show: false
}
}
},
]
}
// 使
chart.setOption(option);
//
chart.dispatchAction({
type: 'updateLayout',
rotation: Math.PI / 4, //
});
// 3D
chart.setOption({
grid3D: {},
xAxis3D: {},
yAxis3D: {},
zAxis3D: {}
});
}
onMounted(() => {
changeType(appStore.map_info);
initDateValue();
initMap();
nextTick(() => {
mitt.on('map_info', e => {
changeType(e.pinyin);
initDateValue();
initMap();
})
})
})
</script>
<template>
<div class="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 class="map">
<div class="echarts" ref="echartsRef"></div>
</div>
</template>
<style scoped lang="scss">
.box {
.map {
width: 100%;
height: 100%;
position: relative;
.border {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
/* background-color: rgba($color: #fff, $alpha: 0.3); */
.echarts {
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>

View File

@ -1,438 +1,327 @@
<script setup>
import { onMounted, reactive, ref } from "vue"
import border from "@/components/border.vue";
import AMapLeft from "./AMapLeft.vue";
import * as echarts from 'echarts';
import { ref, reactive, onMounted } from "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";
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: [
let data = [
{ value: 400, name: '种类: 本地鸡' },
{ value: 435, name: '种类: 鸭' },
{ value: 580, name: '种类: 鹅' },
{ value: 884, name: '种类: 猪' },
]
let option = {
tooltip: {
trigger: 'item',
},
color: color,
legend: {
show: true,
// icon: "rect",
itemWidth: 8,
itemHeight: 8,
bottom: "5%",
textStyle: {
color: "#fff"
},
},
series: [
{
type: 'text',
left: 'center', //
bottom: '50%', //
style: {
fill: '#fff',
text: datas.textValue,
font: '18px Microsoft YaHei'
}
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '40%'], //
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 10,
}
},
labelLine: {
show: false
},
data: data
}
]
},
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]
},
};
echart.setOption(option)
}
const chartRef = ref(null)
const initMap = () => {
const echart = echarts.init(chartRef.value);
const basicColors = [
['#00A8FF', '#2A7FEB'],
['#00A8FF', '#2A7FEB'],
['#00A8FF', '#2A7FEB'],
['#00A8FF', '#2A7FEB'],
['#00A8FF', '#2A7FEB'],
['#00A8FF', '#2A7FEB'],
['#00A8FF', '#2A7FEB'],
['#00A8FF', '#2A7FEB']
]
};
//
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)
const initEcahrts = () => {
// DOMecharts
const chart = echarts.init(echartsRef.value);
// 使
chart.setOption(option);
let option = {
grid: {
left: '12%',
top: '5%',
bottom: '12%',
right: '0%'
},
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(() => {
initEcahrts()
initCircle();
initMap();
})
</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 class="box">
<div class="view box1">
<div class="box-title">
<div class="text">泸县原生态养殖基地</div>
<div class="bg"></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 class="c-box">
<img src="/src/assets/index_img/video.png" />
<div class="name">泸县原生态养殖基地</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>
<style scoped lang="scss">
.box {
height: 100%;
width: 100%;
padding: 20px 20px;
font-size: 0.8rem;
height: 100%;
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%;
align-items: flex-start;
position: relative;
.view {
/* border: 1px solid red; */
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 {
box-sizing: border-box !important;
display: flex;
width: 100%;
height: 20%;
.left {
flex: 1;
height: 100%;
.left-item {
justify-content: space-around;
flex-direction: column;
.box-title {
width: 100%;
position: relative;
.text {
text-align: left;
font-family: "ifonts";
padding: 0.2rem 0.8rem;
font-size: 1.1rem;
}
.bg {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 50%;
display: flex;
align-items: center;
background-image: url(../../../assets/delivery_img/box1.png);
background-image: url(../../../assets/index_img/title1.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 {
}
.box1 {
height: 60%;
.c-box {
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%;
}
}
}
}
.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%
);
.box2 {
height: 38%;
.c-box {
flex: 1;
display: flex;
justify-content: space-between;
align-items: flex-end;
.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>

View File

@ -1,172 +1,90 @@
<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)
}
import { ref, reactive, onMounted } from "vue"
import rightCard from "./rightCard.vue"
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 class="box">
<div class="view box1">
<div class="box-title">
<div class="text">智能监测数据</div>
<div class="bg"></div>
</div>
<div class="c-box">
<rightCard
class="box-card"
v-for="(item, index) in 6"
:key="index"
></rightCard>
</div>
</div>
</border>
<div class="border"></div>
</div>
</template>
<style scoped lang="scss">
.box {
padding: 20px;
font-size: 0.8rem;
width: 100%;
height: 100%;
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;
align-items: flex-end;
position: relative;
.view {
/* border: 1px solid red; */
width: 96%;
box-sizing: border-box !important;
display: flex;
justify-content: center;
align-items: center;
font-family: "ifonts";
font-size: 1.2rem;
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%;
}
}
}
.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;
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>

View File

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

View File

@ -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
};
// DOMecharts
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>

View File

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

View File

@ -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 = () => {
// DOMecharts
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>

View File

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

View File

@ -1,21 +1,23 @@
<script setup>
import leftItem from "./components/left.vue";
import centerItem from "./components/center.vue";
import bottomItem from "./components/bottom.vue";
import rightItem from "./components/right.vue";
import rightItme from "./components/right.vue";
import leftItme from "./components/left.vue";
import centerItme from "./components/center.vue";
import bottomItme from "./components/bottom.vue";
</script>
<template>
<div class="center">
<div class="item">
<leftItem style="height: 98%"></leftItem>
</div>
<div class="item item_c">
<div style="height: 61%; display: flex; justify-content: space-between">
<centerItem style="width: 64%"></centerItem>
<rightItem style="width: 35%"></rightItem>
<leftItme style="width: 35%"></leftItme>
<centerItme style="width: 64%"></centerItme>
</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>
</template>

View File

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

View File

@ -43,10 +43,19 @@ const initMap = () => {
const chart1 = echarts.init(echarts1Ref.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 = {
tooltip: {
trigger: 'item',
},
color: color,
legend: {
show: true,
// icon: "rect",
@ -54,6 +63,7 @@ const initMap = () => {
itemWidth: 8,
itemHeight: 8,
right: "5%",
top: "10%",
// bottom: "center",
textStyle: {
color: "#fff"
@ -79,20 +89,22 @@ const initMap = () => {
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
]
data: data1
}
]
};
let data2 = [
{ value: 500, name: '养殖种类: 本地鸡' },
{ value: 735, name: '养殖种类: 本地鸭' },
{ value: 580, name: '养殖种类: 本地鹅' },
{ value: 484, name: '养殖种类: 本地猪' },
]
let option2 = {
tooltip: {
trigger: 'item',
},
color: color,
legend: {
show: true,
// icon: "rect",
@ -100,6 +112,7 @@ const initMap = () => {
itemWidth: 8,
itemHeight: 8,
right: "5%",
top: "10%",
// bottom: "center",
textStyle: {
color: "#fff"
@ -125,12 +138,7 @@ const initMap = () => {
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
]
data: data2
}
]
};

View File

@ -2,6 +2,7 @@
import leftItme from "./components/left.vue";
import rightItme from "./components/right.vue";
import centerItme from "./components/center.vue";
import bottomItme from "./components/bottom.vue";
import test from "./components/test.vue";
</script>
@ -12,10 +13,12 @@ import test from "./components/test.vue";
</div>
<div class="item item_c">
<div style="height: 61%; display: flex; justify-content: space-between">
<centerItme style="width: 64%; border: 1px solid red"></centerItme>
<centerItme style="width: 64%"></centerItme>
<rightItme style="width: 35%"></rightItme>
</div>
<div style="height: 36%; border: 1px solid red"></div>
<div style="height: 36%">
<bottomItme style="width: 100%"></bottomItme>
</div>
</div>
</div>
</template>