chart
This commit is contained in:
1
src/assets/icons/svg/alarm_clock.svg
Normal file
1
src/assets/icons/svg/alarm_clock.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1684200255704" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3469" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M821.333333 951.466667l-85.333333-85.333334 44.8-44.8 85.333333 85.333334c12.8 12.8 12.8 32 0 44.8-10.666667 10.666667-32 10.666667-44.8 0zM202.666667 951.466667l85.333333-85.333334-44.8-44.8-85.333333 85.333334c-12.8 12.8-12.8 32 0 44.8 10.666667 10.666667 32 10.666667 44.8 0z" fill="#37474F" p-id="3470"></path><path d="M512 512m-426.666667 0a426.666667 426.666667 0 1 0 853.333334 0 426.666667 426.666667 0 1 0-853.333334 0Z" fill="#C62828" p-id="3471"></path><path d="M512 512m-341.333333 0a341.333333 341.333333 0 1 0 682.666666 0 341.333333 341.333333 0 1 0-682.666666 0Z" fill="#EEEEEE" p-id="3472"></path><path d="M322.048 714.24l-12.074667-12.074667 196.074667-196.074666 12.074667 12.053333z" fill="#E53935" p-id="3473"></path><path d="M490.666667 234.666667h42.666666v277.333333h-42.666666z" p-id="3474"></path><path d="M667.413333 632.618667L632.746667 667.306667l-138.752-138.752 34.688-34.709334z" p-id="3475"></path><path d="M512 512m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" p-id="3476"></path><path d="M512 512m-21.333333 0a21.333333 21.333333 0 1 0 42.666666 0 21.333333 21.333333 0 1 0-42.666666 0Z" fill="#C62828" p-id="3477"></path><path d="M469.333333 21.333333h85.333334v64h-85.333334z" fill="#37474F" p-id="3478"></path><path d="M947.2 345.6c53.333333-74.666667 44.8-179.2-21.333333-245.333333-66.133333-66.133333-170.666667-74.666667-245.333334-21.333334l266.666667 266.666667zM76.8 345.6c-53.333333-74.666667-44.8-179.2 21.333333-245.333333 66.133333-66.133333 170.666667-74.666667 245.333334-21.333334L76.8 345.6z" fill="#37474F" p-id="3479"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
1
src/assets/icons/svg/area_chart.svg
Normal file
1
src/assets/icons/svg/area_chart.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1684200333165" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3630" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M896 789.333333H128V533.333333l213.333333-320 298.666667 149.333334L896 128z" fill="#3F51B5" p-id="3631"></path><path d="M896 896H128V682.666667l213.333333-170.666667 298.666667 42.666667 256-192z" fill="#00BCD4" p-id="3632"></path></svg>
|
||||
|
After Width: | Height: | Size: 571 B |
1
src/assets/icons/svg/multiple_devices.svg
Normal file
1
src/assets/icons/svg/multiple_devices.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1684200129873" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2292" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M85.333333 597.333333V170.666667c0-46.933333 38.4-85.333333 85.333334-85.333334h597.333333c46.933333 0 85.333333 38.4 85.333333 85.333334v426.666666c0 46.933333-38.4 85.333333-85.333333 85.333334H170.666667c-46.933333 0-85.333333-38.4-85.333334-85.333334z" fill="#546E7A" p-id="2293"></path><path d="M768 149.333333H170.666667c-12.8 0-21.333333 8.533333-21.333334 21.333334v426.666666c0 12.8 8.533333 21.333333 21.333334 21.333334h597.333333c12.8 0 21.333333-8.533333 21.333333-21.333334V170.666667c0-12.8-8.533333-21.333333-21.333333-21.333334z" fill="#BBDEFB" p-id="2294"></path><path d="M810.666667 704H128c-46.933333 0-85.333333-38.4-85.333333-85.333333h853.333333c0 46.933333-38.4 85.333333-85.333333 85.333333z" fill="#37474F" p-id="2295"></path><path d="M512 853.333333V341.333333c0-46.933333 38.4-85.333333 85.333333-85.333333h256c46.933333 0 85.333333 38.4 85.333334 85.333333v512c0 46.933333-38.4 85.333333-85.333334 85.333334H597.333333c-46.933333 0-85.333333-38.4-85.333333-85.333334z" fill="#E38939" p-id="2296"></path><path d="M853.333333 320H597.333333c-12.8 0-21.333333 8.533333-21.333333 21.333333v469.333334c0 12.8 8.533333 21.333333 21.333333 21.333333h256c12.8 0 21.333333-8.533333 21.333334-21.333333V341.333333c0-12.8-8.533333-21.333333-21.333334-21.333333z" fill="#FFF3E0" p-id="2297"></path><path d="M725.333333 885.333333m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#A6642A" p-id="2298"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -61,8 +61,16 @@ const handleResultClick = (ev) => {
|
||||
// 鼠标悬停搜索结果标记
|
||||
const handleResultHover = (ev) => {
|
||||
infoWindow.value.setContent(`
|
||||
<div>
|
||||
<div style="display: ${ev.target.getExtData().serialNumber ? "block" : "none"}">
|
||||
设备编号 : ${ev.target.getExtData().serialNumber}</div>
|
||||
<div style="display: ${
|
||||
ev.target.getExtData().deviceName ? "block" : "none"
|
||||
}">
|
||||
设备名称 : ${ev.target.getExtData().deviceName}</div>
|
||||
<div style="display: ${
|
||||
ev.target.getExtData().networkAddress ? "block" : "none"
|
||||
}">
|
||||
设备地址: ${ev.target.getExtData().networkAddress}</div>
|
||||
`);
|
||||
infoWindow.value.open(map.value, [ev.lnglat.lng, ev.lnglat.lat]);
|
||||
};
|
||||
|
||||
@ -2,85 +2,117 @@
|
||||
<div class="app-container">
|
||||
<el-row :gutter="20" justify="space-between">
|
||||
<el-col :span="6">
|
||||
<el-card class="count-card-item">
|
||||
<template #header>产品</template>
|
||||
<div></div>
|
||||
<div>数量 : 12</div>
|
||||
<el-card class="count-card-item" style="background-color: #31b48d">
|
||||
<div class="card-body">
|
||||
<div class="count">
|
||||
<div class="title">产品数量</div>
|
||||
<div class="num">{{ 11 }}</div>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<svg-icon icon-class="product" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card class="count-card-item">
|
||||
<template #header>产品</template>
|
||||
<div></div>
|
||||
<div>数量 : 12</div>
|
||||
<el-card class="count-card-item" style="background-color: #38a1f2">
|
||||
<div class="card-body">
|
||||
<div class="count">
|
||||
<div class="title">设备数量</div>
|
||||
<div class="num">{{ 103 }}</div>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<svg-icon icon-class="multiple_devices" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card class="count-card-item">
|
||||
<template #header>设备</template>
|
||||
<div></div>
|
||||
<div>数量 : 12</div>
|
||||
<el-card class="count-card-item" style="background-color: #7538c7">
|
||||
<div class="card-body">
|
||||
<div class="count">
|
||||
<div class="title">告警数量</div>
|
||||
<div class="num">{{ 25 }}</div>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<svg-icon icon-class="alarm_clock" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card class="count-card-item">
|
||||
<template #header>产品</template>
|
||||
<div></div>
|
||||
<div>数量 : 12</div>
|
||||
<el-card class="count-card-item" style="background-color: #3b67a4">
|
||||
<div class="card-body">
|
||||
<div class="count">
|
||||
<div class="title">在线设备数量</div>
|
||||
<div class="num">{{ 88 }}</div>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<svg-icon icon-class="area_chart" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card class="chart-card">
|
||||
<template #header>设备</template>
|
||||
<Line
|
||||
id="line-chart-id"
|
||||
:data="deviceChartData"
|
||||
:options="{
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: '日期',
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card class="chart-card">
|
||||
<template #header>在线设备数量</template>
|
||||
<Line
|
||||
id="line-chart-id"
|
||||
:data="deviceChartData"
|
||||
:options="{
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: '日期',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: '数量',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: '数量',
|
||||
}"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="chart-card">
|
||||
<template #header>告警数量</template>
|
||||
<Line
|
||||
:data="noticeChartData"
|
||||
:options="{
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: '日期',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: '数量',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}"
|
||||
/>
|
||||
</el-card>
|
||||
<el-card class="chart-card">
|
||||
<template #header>消息</template>
|
||||
<Line
|
||||
:data="noticeChartData"
|
||||
:options="{
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: '日期',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: '数量',
|
||||
},
|
||||
},
|
||||
},
|
||||
}"
|
||||
/>
|
||||
</el-card>
|
||||
}"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -96,7 +128,8 @@ import {
|
||||
Title,
|
||||
Tooltip,
|
||||
} from "chart.js";
|
||||
import { reactive, toRefs } from "vue";
|
||||
import { reactive, ref, toRefs } from "vue";
|
||||
import SvgIcon from "@/components/SvgIcon/index.vue";
|
||||
|
||||
ChartJS.register(
|
||||
Title,
|
||||
@ -107,16 +140,20 @@ ChartJS.register(
|
||||
LinearScale,
|
||||
PointElement
|
||||
);
|
||||
const productNum = ref(Math.floor(Math.random() * (20 - 5 + 1)) + 5);
|
||||
|
||||
const data = reactive({
|
||||
deviceChartData: {
|
||||
labels: [...Array(30).keys()].map((el) => `${(el + 1).toString()}日`),
|
||||
datasets: [
|
||||
{
|
||||
data: [...Array(30).keys()].map((el) => Math.random() * 100),
|
||||
data: [...Array(30).keys()].map(
|
||||
(el) => Math.floor(Math.random() * (100 - 64 + 1)) + 78
|
||||
),
|
||||
label: "设备",
|
||||
backgroundColor: "#ff6384",
|
||||
borderColor: "#ff6384",
|
||||
tension: 0.4,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -124,10 +161,13 @@ const data = reactive({
|
||||
labels: [...Array(30).keys()].map((el) => `${(el + 1).toString()}日`),
|
||||
datasets: [
|
||||
{
|
||||
data: [...Array(30).keys()].map((el) => Math.random() * 100),
|
||||
data: [...Array(30).keys()].map(
|
||||
(el) => Math.floor(Math.random() * (100 - 36 + 1)) + 1
|
||||
),
|
||||
label: "消息",
|
||||
backgroundColor: "#36a2eb",
|
||||
borderColor: "#36a2eb",
|
||||
tension: 0.4,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -139,4 +179,45 @@ const { deviceChartData, noticeChartData } = toRefs(data);
|
||||
margin-top: 20px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.count-card-item {
|
||||
height: 100px;
|
||||
//border-radius:10px;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 8px !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
align-self: start;
|
||||
|
||||
.svg-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//justify-content: space-between;
|
||||
|
||||
.num {
|
||||
margin-top: 6px;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user