diff --git a/src/assets/icons/svg/alarm_clock.svg b/src/assets/icons/svg/alarm_clock.svg new file mode 100644 index 0000000..0cffd31 --- /dev/null +++ b/src/assets/icons/svg/alarm_clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/area_chart.svg b/src/assets/icons/svg/area_chart.svg new file mode 100644 index 0000000..d87e7b5 --- /dev/null +++ b/src/assets/icons/svg/area_chart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/multiple_devices.svg b/src/assets/icons/svg/multiple_devices.svg new file mode 100644 index 0000000..8df1f52 --- /dev/null +++ b/src/assets/icons/svg/multiple_devices.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/device/deviceMap/index.vue b/src/views/device/deviceMap/index.vue index b397034..f46e5bf 100644 --- a/src/views/device/deviceMap/index.vue +++ b/src/views/device/deviceMap/index.vue @@ -61,8 +61,16 @@ const handleResultClick = (ev) => { // 鼠标悬停搜索结果标记 const handleResultHover = (ev) => { infoWindow.value.setContent(` -
+
+ 设备编号 : ${ev.target.getExtData().serialNumber}
+
设备名称 : ${ev.target.getExtData().deviceName}
+
+ 设备地址: ${ev.target.getExtData().networkAddress}
`); infoWindow.value.open(map.value, [ev.lnglat.lng, ev.lnglat.lat]); }; diff --git a/src/views/index.vue b/src/views/index.vue index cb0d5cc..6dda3c6 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -2,85 +2,117 @@
- - -
-
数量 : 12
+ +
+
+
产品数量
+
{{ 11 }}
+
+
+ +
+
- - -
-
数量 : 12
+ +
+
+
设备数量
+
{{ 103 }}
+
+
+ +
+
- - -
-
数量 : 12
+ +
+
+
告警数量
+
{{ 25 }}
+
+
+ +
+
- - -
-
数量 : 12
+ +
+
+
在线设备数量
+
{{ 88 }}
+
+
+ +
+
- - - + + + + + + + + + + - - - - - + }" + /> + + +
@@ -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; + } + } + } +}