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