From 2b6951892777086c274d0d06a48c4c525173aa62 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期三, 01 十一月 2023 18:18:27 +0800
Subject: [PATCH] feat:添加警灯svg图标组件;添加标题组件
---
src/components/icons/AlertLightIcon.vue | 36 ++++++++++++
src/views/dashboard/index.vue | 5 +
src/stores/devices.ts | 23 +++++++
src/components.d.ts | 1
src/api/device.ts | 9 +++
src/api/index.ts | 11 +++
src/views/dashboard/components/DashboardTitle.vue | 51 +++++++++++++++++
7 files changed, 135 insertions(+), 1 deletions(-)
diff --git a/src/api/device.ts b/src/api/device.ts
new file mode 100644
index 0000000..ceaaec2
--- /dev/null
+++ b/src/api/device.ts
@@ -0,0 +1,9 @@
+export interface Devices {
+ systemDeviceID: string
+ currentDeviceID: string
+ systemDeviceStatus: number
+ clusterStatus: string
+ clusterNodeQuantity: number
+ systemDeviceRunSince: number
+ deviceIDList: string[]
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 19d30d9..c8e30e9 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,6 +1,7 @@
import { request } from '@/common/utils'
import type { CraftParamsResponse, TasksGroupByChannel } from './task'
import type { PLCResponse } from './plc'
+import type { Devices } from './device'
export interface BaseResponse<T = any> {
code: number
@@ -94,3 +95,13 @@
data: params
})
}
+
+/**
+ * 鑾峰彇褰撳墠闈㈡澘缁戝畾鐨勮澶囧垪琛�
+ */
+export function getDeviceList() {
+ return request<BaseResponse<Devices>>({
+ url: `/v1/device/list`,
+ method: 'get'
+ })
+}
diff --git a/src/components.d.ts b/src/components.d.ts
index cfba2f9..c544730 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,6 +7,7 @@
declare module 'vue' {
export interface GlobalComponents {
+ AlertLightIcon: typeof import('./components/icons/AlertLightIcon.vue')['default']
BaseModal: typeof import('./components/BaseModal.vue')['default']
DashboardLayout: typeof import('./components/DashboardLayout.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
diff --git a/src/components/icons/AlertLightIcon.vue b/src/components/icons/AlertLightIcon.vue
new file mode 100644
index 0000000..3a70684
--- /dev/null
+++ b/src/components/icons/AlertLightIcon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts"></script>
+
+<template>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ version="1.1"
+ width="200px"
+ height="200px"
+ viewBox="0 0 200 200"
+ style="
+ shape-rendering: geometricPrecision;
+ text-rendering: geometricPrecision;
+ image-rendering: optimizeQuality;
+ fill-rule: evenodd;
+ clip-rule: evenodd;
+ "
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ >
+ <g>
+ <path
+ style="opacity: 0.988"
+ fill="#d71d05"
+ d="M 87.5,-0.5 C 95.1667,-0.5 102.833,-0.5 110.5,-0.5C 146.888,7.72465 167.388,30.3913 172,67.5C 172.5,101.165 172.667,134.832 172.5,168.5C 123.833,168.5 75.1667,168.5 26.5,168.5C 26.3333,132.498 26.5,96.4985 27,60.5C 33.9986,27.0017 54.1653,6.66837 87.5,-0.5 Z M 101.5,40.5 C 103.678,52.6006 105.011,64.9339 105.5,77.5C 116.858,77.4139 128.191,77.9139 139.5,79C 123.945,100.223 108.778,121.723 94,143.5C 93.167,128.176 92.667,112.842 92.5,97.5C 80.4954,97.6665 68.4954,97.4999 56.5,97C 71.8692,78.4097 86.8692,59.5764 101.5,40.5 Z"
+ />
+ </g>
+ <g>
+ <path
+ style="opacity: 0.995"
+ fill="#d81d05"
+ d="M 199.5,183.5 C 199.5,186.833 199.5,190.167 199.5,193.5C 197.167,195.167 195.167,197.167 193.5,199.5C 130.833,199.5 68.1667,199.5 5.5,199.5C 3.83333,197.167 1.83333,195.167 -0.5,193.5C -0.5,190.167 -0.5,186.833 -0.5,183.5C 1.67098,181.5 4.00432,179.666 6.5,178C 68.5,177.333 130.5,177.333 192.5,178C 194.996,179.666 197.329,181.5 199.5,183.5 Z"
+ />
+ </g>
+ </svg>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/stores/devices.ts b/src/stores/devices.ts
new file mode 100644
index 0000000..a961994
--- /dev/null
+++ b/src/stores/devices.ts
@@ -0,0 +1,23 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+import type { Devices } from '@/api/device'
+import { getDeviceList } from '@/api'
+
+export const useDevicesStore = defineStore('counter', () => {
+ const devices = ref<Devices>()
+ const deviceIDList = computed(() => devices?.value?.deviceIDList ?? [])
+
+ function getDevicesInfo() {
+ getDeviceList().then(
+ (res) => {
+ devices.value = res?.data
+ },
+ (err) => {
+ console.error(err)
+ devices.value = undefined
+ }
+ )
+ }
+
+ return { devices, deviceIDList, getDevicesInfo }
+})
diff --git a/src/views/dashboard/components/DashboardTitle.vue b/src/views/dashboard/components/DashboardTitle.vue
new file mode 100644
index 0000000..ed14226
--- /dev/null
+++ b/src/views/dashboard/components/DashboardTitle.vue
@@ -0,0 +1,51 @@
+<template>
+ <div class="dashboard-title">
+ <div class="title-text">鏅鸿兘宸ヤ綔鍙� 鈥� {{ props?.deviceInfo?.currentDeviceID ?? '' }}</div>
+ <div class="title-status">
+ <div class="connection-info" @click="openSelectDeviceModal">
+ <el-icon size="30" color="red">
+ <AlertLightIcon></AlertLightIcon>
+ </el-icon>
+ </div>
+ <div class="connection-status"></div>
+ </div>
+ </div>
+</template>
+<script setup lang="ts">
+import type { Devices } from '@/api/device'
+import AlertLightIcon from '@/components/icons/AlertLightIcon.vue'
+import { ref } from 'vue'
+
+export interface DashBoardTitleProps {
+ deviceInfo: Devices
+}
+
+const props = defineProps<DashBoardTitleProps>()
+
+const showModal = ref(false)
+
+function openSelectDeviceModal() {
+ showModal.value = true
+}
+</script>
+
+<style scoped lang="scss">
+.dashboard-title {
+ position: relative;
+}
+.title-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 40px;
+ font-weight: 700;
+}
+.title-status {
+ position: absolute;
+ top: 16px;
+ right: 40px;
+}
+.connection-info {
+ cursor: pointer;
+}
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 0705bd2..fb32de0 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -6,7 +6,9 @@
<template #leftBlock2>
<ChannelCollapse :channels="channels"></ChannelCollapse>
</template>
- <template #middleBlock1>鏍囬</template>
+ <template #middleBlock1>
+ <DashboardTitle></DashboardTitle>
+ </template>
<template #middleBlock2>
<el-tabs v-model="activeMainTabName" class="main-info-tabs">
<el-tab-pane label="鍔犲伐淇℃伅" name="鍔犲伐淇℃伅">
@@ -61,6 +63,7 @@
import ProcessingInfo from '@/views/dashboard/components/ProcessingInfo.vue'
import TaskControl from '@/views/dashboard/components/TaskControl.vue'
import SubTitle from '@/views/dashboard/components/SubTitle.vue'
+import DashboardTitle from '@/views/dashboard/components/DashboardTitle.vue'
defineOptions({
name: 'DashboardView'
--
Gitblit v1.8.0