You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
3.9 KiB
117 lines
3.9 KiB
2 months ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="应急车辆" :autoBack="true">
|
||
|
|
|
||
|
|
</u-navbar>
|
||
|
|
<u-sticky bgColor="#fff" style="padding: 20rpx;"><u-search placeholder="请输入车队名称" :clearabled="false" v-model="keyword" :showAction="false"></u-search></u-sticky>
|
||
|
|
<view style="display: flex; flex-direction: column; align-items: center;">
|
||
|
|
<!-- 车队 -->
|
||
|
|
<view class="bgimg" style="width: 704rpx;height: 444rpx;margin-top: 20rpx;" v-for="(item, index) in carList" :key="index">
|
||
|
|
<view style="margin-top: 20rpx;margin-left: 25rpx;">
|
||
|
|
<image style="width: 36rpx; height: 32rpx;" src="../../../static/images/carList/cheduiicon.png"></image>
|
||
|
|
<span style="font-size: 36rpx;color: #333333;font-weight: 600;margin-left: 20rpx;">{{ item.teamName }}</span>
|
||
|
|
</view>
|
||
|
|
<view style="display: flex; justify-content: space-around;margin-top: 10rpx;">
|
||
|
|
<view>
|
||
|
|
<p style="font-weight: 600;font-size: 50rpx;color: #4996FF;">
|
||
|
|
{{ item.allNum }}
|
||
|
|
<span style="font-size: 29rpx;margin-left: 6rpx;">/辆</span>
|
||
|
|
</p>
|
||
|
|
<span style="font-size: 26rpx;color: #999999;">采集二厂车辆总数</span>
|
||
|
|
</view>
|
||
|
|
<image style="width: 283rpx; height: 130rpx;" src="../../../static/images/carList/car.png"></image>
|
||
|
|
</view>
|
||
|
|
<!-- 总数 -->
|
||
|
|
<view style="display: flex;justify-content: space-around;margin-top: 15rpx;">
|
||
|
|
<view style="display: flex;align-items: center;margin-right: 20rpx;">
|
||
|
|
<image style="width: 60rpx; height: 50rpx;" src="../../../static/images/carList/zhengchang.png"></image>
|
||
|
|
<view style="margin-left: 25rpx;">
|
||
|
|
<p style="font-weight: 600;font-size: 40rpx;color: #4996FF;">
|
||
|
|
{{ item.usedNum }}
|
||
|
|
<span style="font-size: 29rpx;margin-left: 6rpx;">/辆</span>
|
||
|
|
</p>
|
||
|
|
<span style="font-size: 26rpx;color: #999999;">可使用车辆</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view style="display: flex;align-items: center;">
|
||
|
|
<image style="width: 60rpx; height: 50rpx;" src="../../../static/images/carList/wai.png"></image>
|
||
|
|
<view style="margin-left: 25rpx;">
|
||
|
|
<p style="font-weight: 600;font-size: 40rpx;color: #4996FF;">
|
||
|
|
{{ item.cjzbNum }}
|
||
|
|
<span style="font-size: 29rpx;margin-left: 6rpx;">/辆</span>
|
||
|
|
</p>
|
||
|
|
<span style="font-size: 26rpx;color: #999999;">长期在外车辆</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 按钮 -->
|
||
|
|
<view style="display: flex;justify-content: flex-end;" @click="seeCar(item.teamName)">
|
||
|
|
<view
|
||
|
|
style="width: 220rpx;height: 60rpx; margin-right: 48rpx;margin-top: 25rpx; background: #4996FF;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;"
|
||
|
|
>
|
||
|
|
<span style=" font-size: 28rpx;color: #FFFFFF;">查看车队车辆</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { listCountByTeamCha } from '@/api/car/car.js';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
carList: [],
|
||
|
|
timer: '',
|
||
|
|
keyword: ''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
keyword(newdata, olddata) {
|
||
|
|
let that = this;
|
||
|
|
//防抖函数
|
||
|
|
clearTimeout(that.timer);
|
||
|
|
that.timer = setTimeout(function() {
|
||
|
|
if (newdata === '') {
|
||
|
|
//发请求 请求全部
|
||
|
|
listCountByTeamCha().then(res => {
|
||
|
|
that.carList = res.data;
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
//发请求 请求车队名字
|
||
|
|
listCountByTeamCha(newdata).then(res => {
|
||
|
|
that.carList = res.data;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, 600);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
seeCar(name) {
|
||
|
|
this.$tab.navigateTo(`/pages/indexpage/Yjcar/carXiangQing/carXiangQing?name=${name}`);
|
||
|
|
},
|
||
|
|
getList() {
|
||
|
|
listCountByTeamCha().then(res => {
|
||
|
|
this.carList = res.data;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
.bgimg {
|
||
|
|
border-radius: 60rpx;
|
||
|
|
background: url('../../../static/images/carList/bg.png');
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|