From 57d37b58c2d9e8edbafbad28a6a326fa3eb33721 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期三, 01 十一月 2023 19:40:04 +0800
Subject: [PATCH] Merge branch 'wn' of http://192.168.5.5:10010/r/web/bulletin-board-style1 into dev
---
src/views/dashboard/components/DeviceStatusInfo.vue | 23 ++++-
/dev/null | 0
src/assets/images/voice.png | 0
src/assets/images/leaf.png | 0
src/views/dashboard/components/DeviceNumberInfo.vue | 85 +++++++++++++++++++++
src/views/dashboard/components/KnowledgeInfo.vue | 94 +++++++++++++++++++++++
src/views/dashboard/index.vue | 10 ++
src/assets/images/nodeNumber.png | 0
8 files changed, 207 insertions(+), 5 deletions(-)
diff --git a/src/assets/images/leaf.png b/src/assets/images/leaf.png
new file mode 100644
index 0000000..898c7ad
--- /dev/null
+++ b/src/assets/images/leaf.png
Binary files differ
diff --git a/src/assets/images/nodeNumber.png b/src/assets/images/nodeNumber.png
new file mode 100644
index 0000000..cd84bca
--- /dev/null
+++ b/src/assets/images/nodeNumber.png
Binary files differ
diff --git a/src/assets/images/number.png b/src/assets/images/number.png
deleted file mode 100644
index dcfa631..0000000
--- a/src/assets/images/number.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/images/voice.png b/src/assets/images/voice.png
new file mode 100644
index 0000000..611e474
--- /dev/null
+++ b/src/assets/images/voice.png
Binary files differ
diff --git a/src/views/dashboard/components/DeviceNumberInfo.vue b/src/views/dashboard/components/DeviceNumberInfo.vue
new file mode 100644
index 0000000..989f9f2
--- /dev/null
+++ b/src/views/dashboard/components/DeviceNumberInfo.vue
@@ -0,0 +1,85 @@
+<template>
+ <div class="device-number-info">
+ <div class="device-l">
+ <div class="device-t">鏈満璁惧缂栫爜</div>
+ <div class="device-b">
+ <div class="device-info">
+ {{ deviceCurrent }}
+ </div>
+ </div>
+ </div>
+ <div class="device-r">
+ <div class="device-t">浜戠璁惧缂栫爜</div>
+ <div class="device-b">
+ <div v-for="(item, index) in deviceList" :key="index" class="device-info">
+ {{ item.value }}
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<script setup lang="ts">
+import { toRefs } from 'vue'
+const deviceList = [
+ {
+ value: '123454'
+ },
+ {
+ value: '54321'
+ }
+]
+const deviceCurrent = '456789'
+</script>
+
+<style scoped lang="scss">
+$status-default: #2c5dbb82;
+$status-running: #00ff00f0;
+$status-ready: #0059ffd0;
+$status-border: #ffffff21;
+$status-dark-font: #efefef;
+$status-off: red;
+.device-number-info {
+ width: 100%;
+ height: 180px;
+ margin-top: 20px;
+ color: #fff;
+ overflow: hidden;
+ float: left;
+ text-align: center;
+ font-size: 12px;
+ background: $status-default;
+ border: 1px solid $status-border;
+ box-sizing: border-box;
+ border-radius: 4px;
+ padding: 5px 20px;
+ .device-l {
+ width: 120px;
+ float: left;
+ }
+ .device-r {
+ width: calc(100% - 130px);
+ float: right;
+ }
+ .device-t {
+ text-align: left;
+ height: 25px;
+ line-height: 25px;
+ }
+ .device-b {
+ width: 100%;
+ height: calc(100% - 35px);
+ overflow: hidden;
+ }
+ .device-info {
+ padding: 0px 6px;
+ font-size: 12px;
+ line-height: 20px;
+ background: $status-ready;
+ color: #fff;
+ border-radius: 4px;
+ float: left;
+ margin-right: 5px;
+ margin-top: 5px;
+ }
+}
+</style>
diff --git a/src/views/dashboard/components/DeviceStatusInfo.vue b/src/views/dashboard/components/DeviceStatusInfo.vue
index 1593dc7..146ff75 100644
--- a/src/views/dashboard/components/DeviceStatusInfo.vue
+++ b/src/views/dashboard/components/DeviceStatusInfo.vue
@@ -71,7 +71,10 @@
</span>
</span>
<div class="device-info">涓昏妭鐐�</div>
- <div class="device-b title-bng"><span>鑺傜偣鏁�</span> <i>120</i></div>
+ <div class="device-b title-bng">
+ <img src="~@/assets/images/leaf.png" />
+ <span>鑺傜偣鏁�</span> <i>120</i>
+ </div>
</div>
</div>
</template>
@@ -164,20 +167,30 @@
border-radius: 8px;
}
.title-bng {
- height: 32px;
- line-height: 32px;
- background: url('../../../assets/images/number.png') no-repeat center center / cover;
+ width: calc(90% - 1px);
+ margin: 10px auto 0;
+ height: 29px;
+ line-height: 29px;
+ font-size: 14px;
+ background: url('../../../assets/images/nodeNumber.png') no-repeat center center / cover;
+ img {
+ height: 16px;
+ display: inline-block;
+ float: left;
+ margin: 8px 5px 0 5px;
+ }
span {
height: 32px;
display: inline-block;
text-align: center;
display: inline-block;
float: left;
- margin-left: 35%;
+ font-weight: bold;
}
i {
float: right;
margin-right: 15px;
+ font-weight: bold;
}
}
}
diff --git a/src/views/dashboard/components/KnowledgeInfo.vue b/src/views/dashboard/components/KnowledgeInfo.vue
new file mode 100644
index 0000000..1768889
--- /dev/null
+++ b/src/views/dashboard/components/KnowledgeInfo.vue
@@ -0,0 +1,94 @@
+<template>
+ <div class="knowledge-info">
+ <svg width="100%" height="100%">
+ <text
+ class="text-item"
+ x="60"
+ y="80"
+ style="
+ fill: rgb(211 211 211);
+ font-weight: bold;
+ padding: 5px;
+ font-size: 14px;
+ display: inline-block;
+ border-radius: 8px;
+ cursor: pointer;
+ postion: absolute;
+ left: 200;
+ top: 40;
+ "
+ >
+ 璇姤璀�
+ </text>
+ <text
+ class="text-item"
+ x="50"
+ y="170"
+ text-anchor="middle"
+ style="padding: 5px; font-size: 14px; display: inline-block; border-radius: 8px; fill: rgb(211 211 211)"
+ >
+ 绠¤矾鏁村姩
+ </text>
+ <text
+ class="text-item"
+ x="245"
+ y="250"
+ text-anchor="middle"
+ font-size="20px"
+ style="padding: 5px; font-size: 14px; display: inline-block; border-radius: 8px; fill: rgb(211 211 211)"
+ >
+ 鍐峰嵈娌瑰害楂�
+ </text>
+ <text
+ x="50"
+ y="270"
+ class="text-item"
+ style="padding: 5px; font-size: 14px; display: inline-block; border-radius: 8px; fill: rgb(211 211 211)"
+ text-anchor="middle"
+ >
+ 娓呮磥搴﹁秴宸�
+ </text>
+ <text
+ x="220"
+ class="text-item"
+ y="60"
+ text-anchor="middle"
+ font-size="20px"
+ style="padding: 5px; font-size: 14px; display: inline-block; border-radius: 8px; fill: rgb(211 211 211)"
+ >
+ 娓呮磥搴﹁秴宸�
+ </text>
+ <text
+ x="280"
+ class="text-item"
+ y="110"
+ text-anchor="middle"
+ font-size="20px"
+ style="padding: 5px; font-size: 14px; display: inline-block; border-radius: 8px"
+ >
+ 淇濇姢鍣ㄦ姤璀�
+ </text>
+ <image xlink:href="~@/assets/images/voice.png" x="105" y="100" width="110" height="110" />
+ </svg>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue'
+</script>
+<style scoped lang="scss">
+.knowledge-info {
+ height: calc(100% - 90px - 32px);
+ margin-top: 10px;
+ .text-item {
+ width: 100px;
+ padding: 5px;
+ font-size: 14px;
+ display: inline-block;
+ border-radius: 8px;
+ fill: #fff;
+ color: #fff;
+ cursor: pointer;
+ }
+}
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fb32de0..fbbaf4b 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -40,9 +40,12 @@
<template #rightBlock2>
<DeviceStatusInfo :device="device" :type="1"></DeviceStatusInfo>
<DeviceStatusInfo :device="device" :type="2"></DeviceStatusInfo>
+ <DeviceNumberInfo></DeviceNumberInfo>
</template>
<template #rightBlock3>
<SubTitle>鐭ヨ瘑搴�</SubTitle>
+ <KnowledgeInfo></KnowledgeInfo>
+ <BigButton class="btn" bg-color="red">绾㈢伅鍛煎彨</BigButton>
</template>
</DashboardLayout>
</template>
@@ -55,6 +58,9 @@
import ProcessInfo from '@/views/dashboard/components/ProcessInfo.vue'
import ColorInfo from '@/views/dashboard/components/ColorInfo.vue'
import DeviceStatusInfo from '@/views/dashboard/components/DeviceStatusInfo.vue'
+import DeviceNumberInfo from '@/views/dashboard/components/DeviceNumberInfo.vue'
+import KnowledgeInfo from '@/views/dashboard/components/KnowledgeInfo.vue'
+import BigButton from '@/views/dashboard/components/BigButton.vue'
import type { LabelValue } from '@/views/dashboard/components/TaskTabs.vue'
import TaskTabs from '@/views/dashboard/components/TaskTabs.vue'
import CurrentDateTime from '@/views/dashboard/components/CurrentDateTime.vue'
@@ -157,4 +163,8 @@
:deep(.el-tabs__nav-wrap::after) {
height: 1px;
}
+.btn {
+ width: 100%;
+ font-size: 20px;
+}
</style>
--
Gitblit v1.8.0