From 0d7a2bc4f49d94cd9deccca4647ea50023cc5caa Mon Sep 17 00:00:00 2001
From: hwh <332078369@qq.com>
Date: 星期五, 30 八月 2024 16:00:07 +0800
Subject: [PATCH] 设备监控样式
---
Web/src/views/device/deviceMonitor/index.vue | 384 ++++++++++++++++++++++++++++--------------------------
1 files changed, 199 insertions(+), 185 deletions(-)
diff --git a/Web/src/views/device/deviceMonitor/index.vue b/Web/src/views/device/deviceMonitor/index.vue
index 46d40cf..fa6d26f 100644
--- a/Web/src/views/device/deviceMonitor/index.vue
+++ b/Web/src/views/device/deviceMonitor/index.vue
@@ -8,23 +8,17 @@
</div>
<div class="choosefix">
<el-select v-model="lineValue" placeholder="璇烽�夋嫨">
- <el-option
- v-for="item in lineOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value">
+ <el-option v-for="item in lineOptions" :key="item.value" :label="item.label"
+ :value="item.value">
</el-option>
</el-select>
<el-select v-model="stationValue" placeholder="璇烽�夋嫨" style="margin-top: 10px;">
- <el-option
- v-for="item in stationOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value">
+ <el-option v-for="item in stationOptions" :key="item.value" :label="item.label"
+ :value="item.value">
</el-option>
</el-select>
</div>
- <div class="lineValuefix" >
+ <div class="lineValuefix">
<el-form label-position="left" label-width="60px">
<el-form-item label="浠诲姟鍙�">
<el-input></el-input>
@@ -49,7 +43,7 @@
<div class="lineButtonfix">
<el-form label-position="left" label-width="60px">
<el-form-item>
- <el-button type="primary">鍐欏叆</el-button>
+ <el-button>鍐欏叆</el-button>
<el-button>璁剧疆</el-button>
</el-form-item>
</el-form>
@@ -61,9 +55,11 @@
<el-card class="other-box-card" v-for="deviceInfo in deviceList" :key="deviceInfo.id">
<div slot="header" class="linefix">
<span>{{ deviceInfo.name }}</span>
- <div :class="['lineStatus', { 'device-status-0': deviceInfo.status === 0 }, { 'device-status-1': deviceInfo.status === 1 }]"></div>
+ <div
+ :class="['lineStatus', { 'device-status-0': deviceInfo.status === 0 }, { 'device-status-1': deviceInfo.status === 1 }]">
+ </div>
</div>
- <div class="otherValuefix" >
+ <div class="otherValuefix">
<el-form label-position="left" label-width="60px">
<el-form-item label="浠诲姟鍙�">
<el-input v-model="deviceInfo.taskNumber"></el-input>
@@ -85,7 +81,7 @@
<div class="otherButtonfix">
<el-form label-position="left">
<el-form-item>
- <el-button type="primary">鍐欏叆</el-button>
+ <el-button>鍐欏叆</el-button>
<el-button>璁剧疆</el-button>
</el-form-item>
</el-form>
@@ -93,185 +89,203 @@
</el-card>
</div>
</el-main>
- </el-container>
+ </el-container>
</template>
-
- <script lang="ts" setup>
- import { ref, reactive } from 'vue';
- const lineOptions=[{
- value: '001',
- label: '涓�妤艰緭閫佺嚎'
- }, {
- value: '002',
- label: '浜屾ゼ杈撻�佺嚎'
- }, {
- value: '003',
- label: '涓夋ゼ杈撻�佺嚎'
- }];
- const lineValue='001';
+<script lang="ts" setup>
+import { ref, reactive } from 'vue';
- const stationOptions=[{
- value: '200',
- label: '200'
- }, {
- value: '202',
- label: '202'
- }, {
- value: '300',
- label: '300'
- }];
- const stationValue='200';
+const lineOptions = [{
+ value: '001',
+ label: '涓�妤艰緭閫佺嚎'
+}, {
+ value: '002',
+ label: '浜屾ゼ杈撻�佺嚎'
+}, {
+ value: '003',
+ label: '涓夋ゼ杈撻�佺嚎'
+}];
+const lineValue = '001';
+
+const stationOptions = [{
+ value: '200',
+ label: '200'
+}, {
+ value: '202',
+ label: '202'
+}, {
+ value: '300',
+ label: '300'
+}];
+const stationValue = '200';
- const deviceList=[
- {
- id: 1,
- name: '1鍙风爜鍨涙満鍣ㄤ汉',
- taskNumber: 'T000001',
- taskType: '',
- plc: '',
- wcs: '',
- status: 0
- },
- {
- id: 2,
- name: '2鍙风爜鍨涙満鍣ㄤ汉',
- taskNumber: '',
- taskType: '',
- plc: '',
- wcs: '',
- status: 1
- },
- {
- id: 3,
- name: '3鍙风爜鍨涙満鍣ㄤ汉',
- taskNumber: '',
- taskType: '',
- plc: '',
- wcs: '',
- status: 0
- },{
- id: 4,
- name: '4鍙风爜鍨涙満鍣ㄤ汉',
- taskNumber: '',
- taskType: '',
- plc: '',
- wcs: '',
- status: 1
- },{
- id: 5,
- name: '5鍙风爜鍨涙満鍣ㄤ汉',
- taskNumber: '',
- taskType: '',
- plc: '',
- wcs: '',
- status: 0
- },{
- id: 6,
- name: '6鍙风爜鍨涙満鍣ㄤ汉',
- taskNumber: '',
- taskType: '',
- plc: '',
- wcs: '',
- status: 0
- },{
- id: 7,
- name: '7鍙风爜鍨涙満鍣ㄤ汉',
- taskNumber: '',
- taskType: '',
- plc: '',
- wcs: '',
- status: ''
- },{
- id: 8,
- name: '8鍙风爜鍨涙満鍣ㄤ汉',
- taskNumber: '',
- taskType: '',
- plc: '',
- wcs: '',
- status: 0
- }
- ]
- </script>
-
- <style scoped>
- .text {
- font-size: 14px;
+const deviceList = [
+ {
+ id: 1,
+ name: '1鍙风爜鍨涙満鍣ㄤ汉',
+ taskNumber: 'T000001',
+ taskType: '',
+ plc: '',
+ wcs: '',
+ status: 0
+ },
+ {
+ id: 2,
+ name: '2鍙风爜鍨涙満鍣ㄤ汉',
+ taskNumber: '',
+ taskType: '',
+ plc: '',
+ wcs: '',
+ status: 1
+ },
+ {
+ id: 3,
+ name: '3鍙风爜鍨涙満鍣ㄤ汉',
+ taskNumber: '',
+ taskType: '',
+ plc: '',
+ wcs: '',
+ status: 0
+ }, {
+ id: 4,
+ name: '4鍙风爜鍨涙満鍣ㄤ汉',
+ taskNumber: '',
+ taskType: '',
+ plc: '',
+ wcs: '',
+ status: 1
+ }, {
+ id: 5,
+ name: '5鍙风爜鍨涙満鍣ㄤ汉',
+ taskNumber: '',
+ taskType: '',
+ plc: '',
+ wcs: '',
+ status: 0
+ }, {
+ id: 6,
+ name: '6鍙风爜鍨涙満鍣ㄤ汉',
+ taskNumber: '',
+ taskType: '',
+ plc: '',
+ wcs: '',
+ status: 0
+ }, {
+ id: 7,
+ name: '7鍙风爜鍨涙満鍣ㄤ汉',
+ taskNumber: '',
+ taskType: '',
+ plc: '',
+ wcs: '',
+ status: ''
+ }, {
+ id: 8,
+ name: '8鍙风爜鍨涙満鍣ㄤ汉',
+ taskNumber: '',
+ taskType: '',
+ plc: '',
+ wcs: '',
+ status: 0
}
+]
+</script>
- .item {
- margin-bottom: 18px;
- }
+<style scoped>
+.text {
+ font-size: 14px;
+}
- .linefix{
- border-bottom: 1px solid rgb(197, 195, 195);
- display: flex;
- align-items: center;
- height: 40px;
- position: relative;
- }
- .lineStatus{
- position: absolute;
- right: 0;
- float: right;
- height: 20px;
- width: 20px;
- border-radius: 20px;
- background-color: #67C23A;
- }
+.item {
+ margin-bottom: 18px;
+}
- .choosefix{
- width: 100%;
- height: auto;
- padding: 10px;
- border-bottom: 1px solid rgb(197, 195, 195);
- }
- .box-card {
- width: 280px;
- }
- .lineValuefix{
- width: 100%;
- height: 500px;
- padding: 10px;
- border-bottom: 1px solid rgb(197, 195, 195);
- }
- .lineButtonfix{
- width: 100%;
- height: 50px;
- display: flex;
- align-items: center;
- }
+.linefix {
+ border-bottom: 1px solid rgb(197, 195, 195);
+ display: flex;
+ align-items: center;
+ height: 40px;
+ position: relative;
+}
- .otherValuefix{
- width: 100%;
- height: 220px;
- padding: 10px;
- border-bottom: 1px solid rgb(197, 195, 195);
- }
+.lineStatus {
+ position: absolute;
+ right: 0;
+ float: right;
+ height: 20px;
+ width: 20px;
+ border-radius: 20px;
+ background-color: #67C23A;
+}
- .card-container {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 10px;
- }
+.choosefix {
+ width: 100%;
+ height: auto;
+ padding: 10px;
+ border-bottom: 1px solid rgb(197, 195, 195);
+}
- .other-box-card {
- box-sizing: border-box;
- }
- .otherButtonfix{
- width: 100%;
- height: 50px;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0;
- }
- .device-status-0{
- background-color: #67C23A;
- }
- .device-status-1{
- background-color: red;
- }
- </style>
-
\ No newline at end of file
+.box-card {
+ width: 280px;
+}
+
+.lineValuefix {
+ width: 100%;
+ height: 500px;
+ padding: 10px;
+ border-bottom: 1px solid rgb(197, 195, 195);
+}
+
+.lineButtonfix {
+ width: 100%;
+ height: 50px;
+ display: flex;
+ align-items: center;
+}
+
+.otherValuefix {
+ width: 100%;
+ height: 220px;
+ padding: 10px;
+ border-bottom: 1px solid rgb(197, 195, 195);
+}
+
+.card-container {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 10px;
+}
+
+.other-box-card {
+ box-sizing: border-box;
+}
+
+.otherButtonfix {
+ width: 100%;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+}
+
+.device-status-0 {
+ background-color: #67C23A;
+}
+
+.device-status-1 {
+ background-color: red;
+}
+
+.box-card,
+.other-box-card {
+ background: linear-gradient(135deg, #66ccff, #3399ff);
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ color: #fff;
+}
+
+.linefix span {
+ color: #fff;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0