ak/zn-admin-vue3-wcs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备看板

Browse Source
This commit is contained in:
yyy 2025-02-11 17:51:08 +08:00
parent 44aae99612
commit 66150c708d
2 changed files with 126 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local
View File

@ -4,7 +4,7 @@ NODE_ENV=development
VITE_DEV=true VITE_DEV=true
# 请求路径 # 请求路径
VITE_BASE_URL='http://192.168.0.74:48080' VITE_BASE_URL='http://192.168.0.66:48080'
# VITE_BASE_URL='http://192.168.0.189:48080' # VITE_BASE_URL='http://192.168.0.189:48080'
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务

207
src/views/board/device/index.vue
View File

@ -1,72 +1,42 @@
<template> <template>
<ContentWrap> <ContentWrap>
<div> <div>
<div class="new-top-box"> <el-row :gutter="24">
<div class="new-top-box-left"> <el-col :span="2">
<div class="new-top-box-left-title"> 设备看板 </div> <div class="new-top-box-left-title"> 设备看板 </div>
</el-col>
<!-- <el-divider direction="vertical" /> --> <el-col :span="16">
<div class="new-top-box-left-statistics-box"> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane :label="'总数' + carStatistics.total || 0" name="first1" />
<div class="new-top-box-left-statistics-box-inner" v-if="carStatistics"> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first2" />
<div class="new-top-box-left-statistics"> 总数 {{ carStatistics.total || 0 }} </div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first3" />
<div class="grey-line"> </div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first4" />
<div class="new-top-box-left-item"> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first5" />
<div class="new-top-box-left-item-name">充电桩</div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="new-top-box-left-item-value">{{ carStatistics.inTask || 0 }}</div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="grey-line" style="margin-left: 8px"> </div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
</div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="new-top-box-left-item"> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="new-top-box-left-item-name">输送线</div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="new-top-box-left-item-value">{{ carStatistics.charge || 0 }}</div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="grey-line" style="margin-left: 8px"> </div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
</div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="new-top-box-left-item"> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="new-top-box-left-item-name">码垛机</div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="grey-line" style="margin-left: 8px"> </div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
</div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="new-top-box-left-item"> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="new-top-box-left-item-name">自动门</div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="grey-line" style="margin-left: 8px"> </div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
</div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="new-top-box-left-item"> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="new-top-box-left-item-name">提升机</div> <el-tab-pane :label="'总数' + carStatistics.total || 0" name="first" />
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div> </el-tabs>
<div class="grey-line" style="margin-left: 8px"> </div> </el-col>
</div> <el-col :span="6">
<div class="new-top-box-left-item"> <!-- <div class="new-top-box-right">
<div class="new-top-box-left-item-name">信号灯</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">按钮盒</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">拆垛机</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
</div>
</div>
</div>
<div class="new-top-box-right">
<!-- <el-input
v-model="queryParams.robotNo"
style="width: 240px"
placeholder="请输入关键字"
clearable
>
<template #append>
<el-button><Icon icon="ep:search" @click="getCarList" /></el-button
></template>
</el-input>
<el-button type="primary" @click="openForm('create')">新增车辆</el-button> -->
<div class="new-top-box-right-input-box"> <div class="new-top-box-right-input-box">
<input <input
type="text" type="text"
@ -84,10 +54,69 @@
class="new-top-box-right-input-icon" class="new-top-box-right-input-icon"
/> />
</div> </div>
<el-button>Default</el-button>
<div class="new-top-box-right-button" @click="openForm('create')"> 新增设备 </div> <div class="new-top-box-right-button" @click="openForm('create')"> 新增设备 </div>
</div> </div> -->
</div> <div style="display: flex">
<el-input
style="height: 40px"
v-model="queryParams.robotNo"
placeholder="Please Input"
:suffix-icon="Search"
/>
<el-button style="height: 40px">Default</el-button>
</div>
</el-col>
</el-row>
</div> </div>
<!-- <div class="new-top-box-left-statistics-box">
<div class="new-top-box-left-statistics-box-inner" v-if="carStatistics">
<div class="new-top-box-left-statistics"> 总数 {{ carStatistics.total || 0 }} </div>
<div class="grey-line"> </div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">充电桩</div>
<div class="new-top-box-left-item-value">{{ carStatistics.inTask || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">输送线</div>
<div class="new-top-box-left-item-value">{{ carStatistics.charge || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">码垛机</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">自动门</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">提升机</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">信号灯</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">按钮盒</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
<div class="new-top-box-left-item">
<div class="new-top-box-left-item-name">拆垛机</div>
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
<div class="grey-line" style="margin-left: 8px"> </div>
</div>
</div>
</div> -->
</ContentWrap> </ContentWrap>
<div class="new-list-box-all"> <div class="new-list-box-all">
<div class="new-list-box"> <div class="new-list-box">
@ -157,7 +186,6 @@
</div> </div>
</div> </div>
<createEditDialog ref="createEditDialogRef" @success="getCarList" /> <createEditDialog ref="createEditDialogRef" @success="getCarList" />
</template> </template>
<script setup> <script setup>
@ -230,32 +258,32 @@ const topList = ref([
{ {
name: '总数', name: '总数',
count: 0, count: 0,
id:-1 id: -1
}, },
{ {
name: '充电桩', name: '充电桩',
count: 0, count: 0,
id:1 id: 1
}, },
{ {
name: '输送线', name: '输送线',
count: 0, count: 0,
id:2 id: 2
}, },
{ {
name: '码垛机', name: '码垛机',
count: 0, count: 0,
id:3 id: 3
}, },
{ {
name: '自动门', name: '自动门',
count: 0, count: 0,
id:4 id: 4
}, },
{ {
name: '提升机', name: '提升机',
count: 0 count: 0
}, },
{ {
name: '信号灯', name: '信号灯',
count: 0 count: 0
@ -403,7 +431,17 @@ onBeforeRouteLeave((to, from, next) => {
}) })
</script> </script>
<style scoped> <style scoped lang="scss">
:deep(.el-tabs__nav-wrap::after) {
position: static !important;
}
:deep(.el-tabs__header) {
margin: 0px;
}
:deep(.is-active) {
background-color: #1677ff;
}
.swiper-container { .swiper-container {
width: calc(100% - 60px); width: calc(100% - 60px);
padding: 0 30px; padding: 0 30px;
@ -526,12 +564,18 @@ onBeforeRouteLeave((to, from, next) => {
margin-right: 10px; margin-right: 10px;
} }
.new-top-box-left-title { .new-top-box-left-title {
flex-shrink: 0;
width: 72px;
height: 40px;
line-height: 40px;
font-family: font-family:
PingFangSC, PingFangSC,
PingFang SC; PingFang SC;
font-weight: 600; font-weight: 500;
font-size: 18px; font-size: 18px;
color: #0d162a; color: #0d162a;
text-align: center;
font-style: normal;
} }
.new-top-box-left-statistics { .new-top-box-left-statistics {
padding: 5px 7px; padding: 5px 7px;
@ -584,7 +628,7 @@ onBeforeRouteLeave((to, from, next) => {
height: 36px; height: 36px;
} }
.new-top-box-right-input { .new-top-box-right-input {
width: 225px; /* width: 225px; */
height: 15px; height: 15px;
border: none; border: none;
font-size: 13px; font-size: 13px;
@ -610,13 +654,12 @@ input::-webkit-input-placeholder {
color: #536387; color: #536387;
cursor: pointer; cursor: pointer;
} }
.new-top-box-left-statistics-box{ .new-top-box-left-statistics-box {
flex: 1; flex: 1;
margin-left: 10px; margin-left: 10px;
/* background: red; */ /* background: red; */
} }
.new-top-box-left-statistics-box-inner{ .new-top-box-left-statistics-box-inner {
display: flex; display: flex;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;