dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端

Browse Source
This commit is contained in:
xvv 2024-07-04 13:55:13 +08:00
parent 3e7a6abec7
commit 2bb93c7705
2 changed files with 126 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
fuintAdmin/src/views/oilConfig/oilGun/imgs/r-img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

173
fuintAdmin/src/views/oilConfig/oilGun/list.vue
View File

@ -1,41 +1,86 @@
<template>
<div class="app-container">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>油枪管理</span>
<div class="bor-bai" v-for="(item,index) in gunList" :key="index">
<div class="box-top">
<div class="title_">{{item.oilType}} {{item.oilName}}</div>
<div>
<el-button
type="primary"
style="background: linear-gradient( 229deg, #FF8646 0%, #FFA360 100%);"
icon="el-icon-plus"
@click="gunAdd(item.numberId)"
>新增油枪</el-button>
</div>
</div>
<div class="conten-bottom">
<div class="cardbox" :class="{ 'act-cardbox': item.status == '启用' }" v-for="(item,index) in item.oilGunList" :key="index">
<div class="cardbox-top" :class="{ 'actcolor':item.status == '启用' }">
<div>{{item.tankName}}</div>
<div style="cursor: pointer" ><i class="el-icon-edit" @click="gunEdit(item)"></i> <i class="el-icon-delete" @click="delGun(item.id)"></i></div>
</div>
<img class="cardbox-rd" src="./imgs/r-img.png" alt="">
<div class="cardbox-title">
<div>{{item.gunName}}</div>
</div>
<div class="cardbox-bottom" :class="{ 'actcolor':item.status == '启用' }">
<!-- <div>ID:{{ item.id }}</div>-->
</div>
<div class="cardboxb" v-if="item.oilMachineGunNumber != null ">
<div>{{item.oilMachineGunNumber}}</div>
</div>
</div>
</div>
<div class="conten-box" v-for="(item,index) in gunList" :key="index">
<div class="conten-top" style="display: flex; justify-content: space-between;">
<div>{{item.oilType}} {{item.oilName}}</div>
<div>
<el-button
type="primary"
icon="el-icon-plus"
@click="gunAdd(item.numberId)"
>新增油枪</el-button>
</div>
</div>
<div class="conten-bottom">
<div class="cardbox" :class="{ 'act-cardbox': item.status == '启用' }" v-for="(item,index) in item.oilGunList" :key="index">
<div class="cardbox-top" :class="{ 'actcolor':item.status == '启用' }">
<div>{{item.tankName}}</div>
<div style="cursor: pointer" ><i class="el-icon-edit" @click="gunEdit(item)"></i> <i class="el-icon-delete" @click="delGun(item.id)"></i></div>
</div>
<div class="cardbox-title">
<div>{{item.gunName}}</div>
</div>
<div class="cardbox-bottom" :class="{ 'actcolor':item.status == '启用' }">
<!-- <div>ID:{{ item.id }}</div>-->
</div>
<div class="cardboxb" v-if="item.oilMachineGunNumber != null ">
<i class="el-icon-share"></i>
<div>{{item.oilMachineGunNumber}}</div>
</div>
</div>
</div>
</div>
</el-card>
</div>
<!-- <el-card class="box-card">-->
<!-- <div slot="header" class="clearfix">-->
<!-- <span>油枪管理</span>-->
<!-- </div>-->
<!-- <div class="conten-box" v-for="(item,index) in gunList" :key="index">-->
<!-- <div class="conten-top" style="display: flex; justify-content: space-between;">-->
<!-- <div>{{item.oilType}} {{item.oilName}}</div>-->
<!-- <div>-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- icon="el-icon-plus"-->
<!-- @click="gunAdd(item.numberId)"-->
<!-- >新增油枪</el-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="conten-bottom">-->
<!-- <div class="cardbox" :class="{ 'act-cardbox': item.status == '启用' }" v-for="(item,index) in item.oilGunList" :key="index">-->
<!-- <div class="cardbox-top" :class="{ 'actcolor':item.status == '启用' }">-->
<!-- <div>{{item.tankName}}</div>-->
<!-- <div style="cursor: pointer" ><i class="el-icon-edit" @click="gunEdit(item)"></i> <i class="el-icon-delete" @click="delGun(item.id)"></i></div>-->
<!-- </div>-->
<!-- <img class="cardbox-rd" src="./imgs/r-img.png" alt="">-->
<!-- <div class="cardbox-title">-->
<!-- <div>{{item.gunName}}</div>-->
<!-- </div>-->
<!-- <div class="cardbox-bottom" :class="{ 'actcolor':item.status == '启用' }">-->
<!--&lt;!&ndash; <div>ID:{{ item.id }}</div>&ndash;&gt;-->
<!-- </div>-->
<!-- <div class="cardboxb" v-if="item.oilMachineGunNumber != null ">-->
<!-- <div>{{item.oilMachineGunNumber}}</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-card>-->
<el-dialog
:title="title"
:visible.sync="dialogVisible"
@ -289,12 +334,29 @@ import {cleanTankApi} from "@/api/oilConfig/oilTank";
.app-container{
height: 100%;
}
.text {
font-size: 14px;
}
.bor-bai{
width: 100%;
border-radius: 10px ;
box-sizing: border-box;
padding: 20px;
background: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
margin-bottom: 20px;
}
.title_{
font-weight: bold;
font-size: 18px;
color: #333333;
}
.wrap-box{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.oil-box{
.item {
margin-bottom: 18px;
}
.clearfix:before,
@ -332,9 +394,18 @@ import {cleanTankApi} from "@/api/oilConfig/oilTank";
padding: 10px;
border-radius: 4px;
width: 19%;
background: url(../../../assets/images/jybjj.png) center no-repeat;
background-size:40% 70%;
background-color: #f9f9f9;
position: relative;
}
.cardbox-rd{
position: absolute;
right: 5px;
bottom: 0px;
width:50px;
height: 50px;
}
.act-cardbox{
position: relative;
@ -345,10 +416,10 @@ import {cleanTankApi} from "@/api/oilConfig/oilTank";
padding: 10px;
border-radius: 4px;
width: 19%;
background: url(../../../assets/images/jybjj.png) center no-repeat;
//background: url(../../../assets/images/jybjj.png) center no-repeat;
background-size:40% 70%;
background-color: #ecf5ff;
color: #409eff !important;
background-color: #fff9f5;
color: #FF9655 !important;
}
.cardboxb{
position: absolute;
@ -359,15 +430,16 @@ import {cleanTankApi} from "@/api/oilConfig/oilTank";
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
font-size: 12px;
left: 0px;
bottom: 0px;
padding-right: 5px;
background: #409eff;
padding: 5px 10px;
background: linear-gradient( 312deg, #FF8646 0%, #FFA360 100%);
border-radius: 0px 10px 0px 10px;
}
.actcolor{
color: #409eff !important;
color: #FF9655 !important;
}
.cardbox-top{
display: flex;
@ -398,5 +470,12 @@ import {cleanTankApi} from "@/api/oilConfig/oilTank";
display: flex;
align-items: center;
}
.box-top{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
</style>