From 778c10923ce7adf233f8a6b820d5824aa2402843 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期二, 31 十月 2023 20:28:01 +0800
Subject: [PATCH] 加工数+目标数的组件+设备状态的组件
---
src/views/dashboard/components/DeviceStatusInfo.vue | 155 +++++++++++++++++++++++++++++++
src/views/dashboard/components/ProcessInfo.vue | 23 ++--
src/views/dashboard/index.vue | 28 +++++
src/api/task.ts | 1
src/components.d.ts | 1
src/api/plc.ts | 4
src/views/dashboard/components/ColorInfo.vue | 72 ++++++++++++++
7 files changed, 268 insertions(+), 16 deletions(-)
diff --git a/src/api/plc.ts b/src/api/plc.ts
index 686879e..973f0e5 100644
--- a/src/api/plc.ts
+++ b/src/api/plc.ts
@@ -2,5 +2,7 @@
finishNumber: number
totalNumber: number
/** 1鏂紑 2鐢熶骇涓� 3寰呮満*/
- plcStatus: 1 | 2 | 3
+ // plcStatus: 1 | 2 | 3,
+ plcStatus: 1
+ plcNotConnected: String
}
diff --git a/src/api/task.ts b/src/api/task.ts
index 405d0b4..cd886f0 100644
--- a/src/api/task.ts
+++ b/src/api/task.ts
@@ -16,6 +16,7 @@
startTime: number
endTime: number
Status: number
+ finishNumber: number
}
export interface Procedure {
diff --git a/src/components.d.ts b/src/components.d.ts
index 4e375f9..490aadf 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -12,6 +12,7 @@
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
+ ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElStep: typeof import('element-plus/es')['ElStep']
diff --git a/src/views/dashboard/components/ColorInfo.vue b/src/views/dashboard/components/ColorInfo.vue
new file mode 100644
index 0000000..6816e55
--- /dev/null
+++ b/src/views/dashboard/components/ColorInfo.vue
@@ -0,0 +1,72 @@
+<template>
+ <div class="color-info">
+ <div v-if="type == 1" class="color-one">
+ 鍔犲伐鏁�({{ order.unit }})
+ <span>{{ order.finishNumber || 0 }}</span>
+ </div>
+ <div v-else class="color-two">
+ 鐩爣({{ order.unit }})
+ <span> {{ order.amount || 0 }}</span>
+ </div>
+ </div>
+</template>
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import type { Order } from '@/api/task'
+
+export interface ColorInfoProps {
+ order: Order
+ type?: Number
+}
+
+const props = defineProps<ColorInfoProps>()
+const { order, type } = toRefs(props)
+</script>
+
+<style scoped lang="scss">
+$status-default: #13235a;
+$status-running: #f76c0f;
+$status-ready: #13235a;
+$status-done: #0059ffd0;
+$status-star: yellow;
+
+.color-info {
+ width: calc(50% - 5px);
+ height: 120px;
+ line-height: 40px;
+ margin-top: 10px;
+ border-radius: 4px;
+ color: #fff;
+ overflow: hidden;
+ float: left;
+ text-align: center;
+ font-size: 15px;
+
+ .color-one {
+ background: $status-running;
+ height: 100%;
+ width: 100%;
+ margin-right: 10px;
+ span {
+ width: 100%;
+ display: inline-block;
+ font-weight: 600;
+ font-size: 30px;
+ margin-top: 15px;
+ }
+ }
+ .color-two {
+ background: $status-done;
+ margin-left: 10px;
+ height: 100%;
+ width: 100%;
+ span {
+ width: 100%;
+ display: inline-block;
+ font-weight: 600;
+ font-size: 30px;
+ margin-top: 15px;
+ }
+ }
+}
+</style>
diff --git a/src/views/dashboard/components/DeviceStatusInfo.vue b/src/views/dashboard/components/DeviceStatusInfo.vue
new file mode 100644
index 0000000..3bef1ae
--- /dev/null
+++ b/src/views/dashboard/components/DeviceStatusInfo.vue
@@ -0,0 +1,155 @@
+<template>
+ <div class="device-status-info">
+ <div v-if="type == 1" class="color-one">
+ 璁惧鐘舵��
+ <!-- 1鏂紑2鐢熶骇3寰呮満 -->
+ <span v-if="device.plcStatus" class="device-m">
+ <el-popover
+ v-if="device.plcStatus == 1 && device.plcNotConnected"
+ :width="180"
+ placement="top-end"
+ trigger="click"
+ >
+ <template #reference>
+ <el-icon class="duan">
+ <Link />
+ </el-icon>
+ 鏂紑
+ </template>
+ {{ device.plcNotConnected }}
+ </el-popover>
+ <span v-else>
+ <el-icon v-if="device.plcStatus == 1 && !device.plcNotConnected" class="duan">
+ <Link />
+ </el-icon>
+ <el-icon v-else class="lian">
+ <Link />
+ </el-icon>
+ <!-- :class="{
+ 'status-running': device.plcStatus == 2,
+ 'status-off': device.plcStatus != 2,
+ }" -->
+ <span class="status-running">
+ {{ device.plcStatus == 1 ? '鏂紑' : device.plcStatus == 2 ? '鐢熶骇涓�' : '寰呮満' }}
+ </span>
+ </span>
+ </span>
+ <div class="device-b">杩愯鏃堕棿锛�1澶�1灏忔椂23鍒�12绉�</div>
+ </div>
+ <div v-if="type == 2" class="color-two">
+ 闆嗙兢鐘舵��
+ <!-- 1鏂紑2鐢熶骇3寰呮満 -->
+ <span v-if="device.plcStatus" class="device-m">
+ <el-popover
+ v-if="device.plcStatus == 1 && device.plcNotConnected"
+ :width="180"
+ placement="top-end"
+ trigger="click"
+ >
+ <template #reference>
+ <el-icon class="duan">
+ <CircleCloseFilled />
+ </el-icon>
+ 鏂紑
+ </template>
+ {{ device.plcNotConnected }}
+ </el-popover>
+ <span v-else>
+ <el-icon v-if="device.plcStatus == 1 && !device.plcNotConnected" class="duan">
+ <CircleCloseFilled />
+ </el-icon>
+ <el-icon v-else class="lian">
+ <SuccessFilled />
+ </el-icon>
+ <!-- :class="{
+ 'status-running': device.plcStatus == 2,
+ 'status-off': device.plcStatus != 2,
+ }" -->
+ <span class="status-running">
+ {{ device.plcStatus == 1 ? '鏂紑' : device.plcStatus == 2 ? '鍦ㄧ嚎' : '寰呮満' }}
+ </span>
+ </span>
+ </span>
+ <div class="device-b">杩愯鏃堕棿锛�1澶�1灏忔椂23鍒�12绉�</div>
+ </div>
+ </div>
+</template>
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import { Link, CircleCloseFilled, SuccessFilled } from '@element-plus/icons-vue'
+import type { PLCResponse } from '@/api/plc'
+
+export interface DeviceStatusInfoProps {
+ device: PLCResponse
+ type?: Number
+}
+
+const props = defineProps<DeviceStatusInfoProps>()
+const { device, type } = toRefs(props)
+</script>
+
+<style scoped lang="scss">
+$status-default: #13235a;
+$status-running: #00ff00f0;
+$status-ready: #13235a;
+$status-done: #2c5dbb82;
+$status-border: #ffffff21;
+$status-dark-font: #efefef;
+$status-off: red;
+.device-status-info {
+ width: calc(50% - 5px);
+ height: 150px;
+ line-height: 40px;
+ background: $status-done;
+ margin-top: 10px;
+ border-radius: 4px;
+ color: #fff;
+ border: 1px solid $status-border;
+ box-sizing: border-box;
+ overflow: hidden;
+ float: left;
+ text-align: center;
+ font-size: 15px;
+
+ .duan {
+ color: $status-off;
+ font-size: 26px;
+ margin-right: 5px;
+ margin-top: 2px;
+ float: left;
+ }
+ .lian {
+ color: $status-running;
+ font-size: 26px;
+ margin-right: 5px;
+ float: left;
+ margin-top: 2px;
+ }
+ .color-one,
+ .color-two {
+ height: 100%;
+ width: 100%;
+ margin-right: 10px;
+ .device-m {
+ width: 100%;
+ display: inline-block;
+ font-size: 15px;
+ line-height: 25px;
+ span {
+ display: inline-block;
+ line-height: 30px;
+ }
+ }
+ .device-b {
+ font-size: 12px;
+ margin-top: 10px;
+ width: 100%;
+ line-height: 25px;
+ color: $status-dark-font;
+ }
+ }
+ .color-two {
+ margin-left: 10px;
+ }
+}
+</style>
diff --git a/src/views/dashboard/components/ProcessInfo.vue b/src/views/dashboard/components/ProcessInfo.vue
index 18d6995..39bc74d 100644
--- a/src/views/dashboard/components/ProcessInfo.vue
+++ b/src/views/dashboard/components/ProcessInfo.vue
@@ -5,31 +5,30 @@
</div>
<div class="item-r">
<div class="item-r-t font_weight">{{ process.number }}</div>
- <div class="item-r-b">{{ process.name }}</div>
- <div class="item-r-b">{{ process.name }}</div>
+ <div class="item-r-b">{{ process.product }}</div>
+ <div class="item-r-b">{{ process.procedure }}</div>
</div>
- <div class="tip-r">
+ <div v-if="process.isUpdate" class="tip-r">
<img src="~@/assets/images/process-tip.png" />
</div>
- <div class="tip-current">褰撳墠浣跨敤</div>
+ <div v-if="process.isUpdate" class="tip-current">褰撳墠浣跨敤</div>
<div class="btn">
- <el-button type="primary" class="color_organge"> 鏇存柊宸ヨ壓</el-button>
+ <el-button type="primary" class="color_organge"> 鏇存柊宸ヨ壓 </el-button>
</div>
</div>
</template>
<script setup lang="ts">
-import { computed, toRefs } from 'vue'
-export interface ProcessInfoProps {
- process?: process
-}
-
-const props = defineProps<ProcessInfoProps>()
+import { toRefs } from 'vue'
+const props = defineProps<{
+ process: { product: '浜у搧鍚嶇О'; number: '111'; procedure: '宸ヨ壓鍚嶇О'; isUpdate: true }
+}>()
const { process } = toRefs(props)
</script>
<style scoped lang="scss">
$status-running: #f76c0f;
$status-done: #2c5dbb82;
+$status-ready: #00ff00f0;
.font_weight {
font-weight: 600;
}
@@ -88,7 +87,7 @@
}
.tip-current {
- background: green;
+ background: $status-ready;
color: #fff;
position: absolute;
top: 0px;
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index e086940..7ece016 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -23,6 +23,8 @@
<div class="task-detail">
<TaskControl :task="activeTask"></TaskControl>
</div>
+ <ColorInfo :order="order" :type="1"></ColorInfo>
+ <ColorInfo :order="order" :type="2"></ColorInfo>
</template>
<template #middleBlock4>
<SubTitle>浜哄憳淇℃伅</SubTitle>
@@ -33,7 +35,10 @@
<CurrentDateTime></CurrentDateTime>
</div>
</template>
- <template #rightBlock2>鐘舵�侀潰鏉�</template>
+ <template #rightBlock2>
+ <DeviceStatusInfo :device="device" :type="1"></DeviceStatusInfo>
+ <DeviceStatusInfo :device="device" :type="2"></DeviceStatusInfo>
+ </template>
<template #rightBlock3>
<SubTitle>鐭ヨ瘑搴�</SubTitle>
</template>
@@ -42,9 +47,12 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue'
-import type { Worker } from '@/api/task'
+import type { Worker, Order } from '@/api/task'
+import type { PLCResponse } from '@/api/plc'
import PersonInfo from '@/views/dashboard/components/PersonInfo.vue'
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 type { LabelValue } from '@/views/dashboard/components/TaskTabs.vue'
import TaskTabs from '@/views/dashboard/components/TaskTabs.vue'
import CurrentDateTime from '@/views/dashboard/components/CurrentDateTime.vue'
@@ -65,7 +73,21 @@
} as unknown as Worker
})
const process = computed(() => {
- return { name: '宸ヨ壓鍚嶇О', number: '111' }
+ return { product: '浜у搧鍚嶇О', number: '111', procedure: '宸ヨ壓鍚嶇О', isUpdate: true }
+})
+
+const order = computed(() => {
+ return {
+ finishNumber: 0,
+ unit: '涓�',
+ amount: '10'
+ } as unknown as Order
+})
+const device = computed(() => {
+ return {
+ plcStatus: 1,
+ plcNotConnected: false
+ } as unknown as PLCResponse
})
const taskTabsList = [
{
--
Gitblit v1.8.0