Skip to content

C
cloud-platform-ui
Commit ea9aa96b authored by denghr's avatar denghr
Browse files
Options

首页

parent fc1a4b96
Hide whitespace changes
Inline Side-by-side
Showing with 119 additions and 135 deletions
src/views/admin/user/index.vue
View file @ ea9aa96b
......@@ -330,7 +330,7 @@
},
// 角色
handleSelect2(item) {
this.form.members = item.id;
this.form.members.push(item.id);
},
/**
* 获取后台用户管理列表数据
......
src/views/index/index.vue
View file @ ea9aa96b
<template>
<div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
<div >
<div class="filter-container" ref="filter-container">
<el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="100px">
<el-row>
<el-col :span="8">
<el-form-item label="车辆状态">
<el-select class="filter-item" v-model="listQuery.status" placeholder="请选择车辆状态">
<el-option :key="undefined" label="无" :value="undefined"></el-option>
<el-option v-for="(val, key, index) in getAllVehicleStatus() " :key="val.code" :label="val.val"
:value="val.code"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="车牌">
<el-input v-model="listQuery.numberPlate" placeholder="请输入车牌"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="所属地区" prop="zoneId">
<el-select class="filter-item" v-model="listQuery.zoneId" placeholder="请选择" @change="getProvinceRegions">
<el-option :key="undefined" label="无" :value="undefined"></el-option>
<el-option v-for="val in getAllZoneList" :key="val.id" :label="val.name" :value="val.id"> </el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="所属分公司" prop="subordinateBranch">
<el-select class="filter-item" v-model="listQuery.subordinateBranch" placeholder="请选择" @change="getAllBranchCompanyChange">
<el-option :key="undefined" label="无" :value="undefined"></el-option>
<el-option v-for="val in allBranchCompany" :key="val.id" :label="val.name" :value="val.id"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="时间">
<el-date-picker
v-model="listQuery.startTime"
type="date"
:editable="true"
format="yyyy-MM-dd"
placeholder="选择日期"
></el-date-picker>~
<el-date-picker
v-model="listQuery.endTime"
type="date"
:editable="true"
format="yyyy-MM-dd"
placeholder="选择日期"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="当前停放公司" prop="parkBranchCompanyId">
<el-autocomplete
class="inline-input"
v-model="listQuery.parkBranchCompanyName"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelectPark"
></el-autocomplete>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
</div>
<el-form label-width="100px" v-if="countTJ" style="margin-bottom:20px">
<el-row :gutter="20">
<el-col :span="2">.</el-col>
<el-col :span="5" v-for="(item, index) in countTJ" :key="item.id" >
<div class="grid-content bg-purple" style="padding:15px 0" v-if="item.travelStatus == 0 || item.travelStatus == 1 || item.travelStatus == 4 || item.travelStatus == 2">
<div class="text" style="font-size:22px;font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;color:#20A0FF;">{{item.total}}</div>
<div class="text" v-if="item.travelStatus == 0">今日收益（不含押金）（元）</div>
<div class="text" v-if="item.travelStatus == 4">订单总额（不含押金）（元）</div>
<div class="text" v-if="item.travelStatus == 1">未退还押金总额（元）</div>
<div class="text" v-if="item.travelStatus == 2">额外（取消损坏违章等）赔款（元）</div>
<div class="statisticsBox">
<div class="statisticsItem">
<div class="colorbg1"></div>
<div class="detail">
<div class="detail-title">今日收益（不含押金）</div>
<div class="detail-money">￥ 6,666,66</div>
</div>
</el-col>
</el-row>
</el-form>
<el-form label-width="100px" v-if="countTJ">
<el-row :gutter="20">
<el-col :span="2"><el-form-item label="车辆概况"></el-form-item></el-col>
<el-col :span="5" v-for="(item, index) in countTJ" :key="item.id">
<div class="grid-content bg-purple" style="padding:15px 0" v-if="item.travelStatus == 0 || item.travelStatus == 1 || item.travelStatus == 4 || item.travelStatus == 2">
<div class="text" style="color: #171413;">{{item.total}}</div>
<div class="text" v-if="item.travelStatus == 0">车辆总额（辆）</div>
<div class="text" v-if="item.travelStatus == 4">出行中车辆（辆）</div>
<div class="text" v-if="item.travelStatus == 1">空闲车辆（辆）</div>
<div class="text" v-if="item.travelStatus == 2">维修中车辆（辆）</div>
</div>
<div class="statisticsItem">
<div class="colorbg2"></div>
<div class="detail">
<div class="detail-title">订单总额（不含押金）</div>
<div class="detail-money">￥ 6,666,66</div>
</div>
</el-col>
</el-row>
</el-form>
<!--车辆预警-->
<div class="marquee_box" v-if="marqueeList.length>0" @mouseenter="handelOver" @mouseleave="handelOut">
<ul class="marquee_list" :class="{marquee_top:animate}">
<li v-for="(item,index) in marqueeList" :class="item.color">{{item.msg}} >>立即处理</li>
</ul>
</div>
<!--车辆排班-->
<!--bookType 1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用-->
<div style="display: flex;margin-bottom: 20px;">
<span class="tip-co bg-1"></span><span>租房车</span>
<span class="tip-co bg-5"></span><span>房车游</span>
<span class="tip-co bg-4"></span><span>展览</span>
<span class="tip-co bg-6"></span><span>保养</span>
<span class="tip-co bg-7"></span><span>预约中</span>
<span class="tip-co bg-8"></span><span>禁用</span>
</div>
<!-- <div style="position: relative;padding: 10px;padding-left: 0;width: 100%;overflow-x:auto;" v-if="currentMonth">
<div style="display: flex;">
<div class="day-title" style="min-width: 200px;max-width:200px;background: #eef1f6;">日期（{{currentMonth}}~{{nextMonth}}月）</div>
<div class="day-title" style="background: #eef1f6;" v-for="item in tempDayList" :key="item.day" ><span>{{item.day}}</span></div>
</div>
<div v-for="item in list" :key="item.id" style="display: flex;">
<div class="v-list" style="display: inline-block;">
<div style="color: #bfcbd9;font-size: 14px;">
现在位置：{{item.parkCompanyName}}
</div>
<div class="statisticsItem">
<div class="colorbg3"></div>
<div class="detail">
<div class="detail-title">未退还押金总额</div>
<div class="detail-money">￥ 6,666,66</div>
</div>
<div>{{item.numberPlate}}<img src="../../assets/images/detail.png" style="width: 15px;margin-left: 10px;"/></div>
<div style="color: #bfcbd9;font-size: 14px;">{{item.vehicleModel?item.vehicleModel.name:''}}</div>
</div>
<div class="day-title flex-jca-fdc" style="padding: 0;" v-for="iitem in item.temp" :key="iitem.day" >
<div v-for="ii in iitem.children" :key="ii.time" class="ii-day" :class="ii.bg" @click="toShowDialog(item, iitem, ii)">
<span v-if="ii.timeEtr=='00'" style="position: absolute;color: rgb(255, 255, 255);left: -18px;top: 60px;">{{ii.timeEtr}}</span>
<span v-else style="position: absolute;color: #fff;top: -17px;right: 0;">{{ii.timeEtr}}</span>
<span style="position: absolute;color: #fff;z-index: 11;">{{ii.timeStr}}</span>
<div class="statisticsItem">
<div class="colorbg4"></div>
<div class="detail">
<div class="detail-title">额外赔款（取消损坏违章等）</div>
<div class="detail-money">￥ 6,666,66</div>
</div>
</div>
</div>
<div class="carDetail">
<div class="carDetailBoxTitle">车辆概况</div>
<div class="carDetailBox">
<div class="carDetailItem" v-for="(item, index) in countTJ" :key="item.id">
<div class="detail-num"><span style="position: relative;">{{item.total}}<span class="unit">辆</span></span></div>
<div class="carDetail-title" v-if="item.travelStatus == 0">车辆总额</div>
<div class="carDetail-title" v-if="item.travelStatus == 4">出行中</div>
<div class="carDetail-title" v-if="item.travelStatus == 1">空闲</div>
<div class="carDetail-title" v-if="item.travelStatus == 5">保养中</div>
<div class="carDetail-title" v-if="item.travelStatus == 2">维修中</div>
</div>
</div>
</div> -->
<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
</div>
<!--车辆预警-->
<div class="carEarlyWarning">
<div class="carEarlyWarningTitle">车辆预警</div>
<div class="marquee_box" v-if="marqueeList.length>0" @mouseenter="handelOver" @mouseleave="handelOut">
<ul class="marquee_list" :class="{marquee_top:animate}">
<li v-for="(item,index) in marqueeList" ><i class="el-icon-warning" :class="item.color" style="padding-left:30px;padding-right:20px"></i>{{item.msg}} <span style="text-decoration:underline">立即处理</span></li>
</ul>
</div>
</div>
<!--车辆排班-->
<div class="carEarlyWarning" style="padding-bottom:30px">
<div class="carEarlyWarningTitle" style="display: flex;justify-content: space-between;margin-bottom:20px">
<div style="flex:1">车辆排班</div>
<!--bookType 1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用-->
<div style="color: rgb(87, 81, 96);font-family: 微软雅黑;font-weight: 400;font-style: normal;font-size: 14px;">
<span class="tip-co bg-1"></span><span>租房车</span>
<span class="tip-co bg-5"></span><span>房车游</span>
<span class="tip-co bg-4"></span><span>展览</span>
<span class="tip-co bg-6"></span><span>保养</span>
<span class="tip-co bg-7"></span><span>预约中</span>
<span class="tip-co bg-8"></span><span>禁用</span>
</div>
</div>
<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
style="width: 100%;cursor: pointer;" class="schedul-tb">
<el-table-column width="220" align="center" :label="firstTime">
<template scope="scope">
......@@ -165,6 +98,33 @@
:current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</div>
</div>
<!-- <div style="position: relative;padding: 10px;padding-left: 0;width: 100%;overflow-x:auto;" v-if="currentMonth">
<div style="display: flex;">
<div class="day-title" style="min-width: 200px;max-width:200px;background: #eef1f6;">日期（{{currentMonth}}~{{nextMonth}}月）</div>
<div class="day-title" style="background: #eef1f6;" v-for="item in tempDayList" :key="item.day" ><span>{{item.day}}</span></div>
</div>
<div v-for="item in list" :key="item.id" style="display: flex;">
<div class="v-list" style="display: inline-block;">
<div style="color: #bfcbd9;font-size: 14px;">
现在位置：{{item.parkCompanyName}}
</div>
<div>{{item.numberPlate}}<img src="../../assets/images/detail.png" style="width: 15px;margin-left: 10px;"/></div>
<div style="color: #bfcbd9;font-size: 14px;">{{item.vehicleModel?item.vehicleModel.name:''}}</div>
</div>
<div class="day-title flex-jca-fdc" style="padding: 0;" v-for="iitem in item.temp" :key="iitem.day" >
<div v-for="ii in iitem.children" :key="ii.time" class="ii-day" :class="ii.bg" @click="toShowDialog(item, iitem, ii)">
<span v-if="ii.timeEtr=='00'" style="position: absolute;color: rgb(255, 255, 255);left: -18px;top: 60px;">{{ii.timeEtr}}</span>
<span v-else style="position: absolute;color: #fff;top: -17px;right: 0;">{{ii.timeEtr}}</span>
<span style="position: absolute;color: #fff;z-index: 11;">{{ii.timeStr}}</span>
</div>
</div>
</div>
</div> -->
</div>
<!--保养弹框-->
<vehicleMaintenanceModal v-if="baoyang" :currentItem="currentItem" v-on:baoyangDialogEvent = "baoyangDialogEvent"></vehicleMaintenanceModal>
......@@ -182,6 +142,26 @@
</div>
</template>
<style>
body{background-color: rgba(245, 245, 245, 1);}
.statisticsBox{width: 100%;display: flex;justify-content: space-between;margin-bottom: 40px;}
.statisticsItem{flex: 1;background-color: #fff;-moz-box-shadow:1px 1px 3px #ccc; -webkit-box-shadow:1px 1px 3px #ccc; box-shadow:1px 1px 3px #ccc;border-radius: 4px;max-width: calc(25% - 40px)}
.colorbg1{width: 100%;height: 6px;border-radius: 4px 4px 0 0;background:-webkit-linear-gradient(left, #1c9fff, #70d1fc);background:-o-linear-gradient(right, #1c9fff, #70d1fc);background:-moz-linear-gradient(right, #1c9fff, #70d1fc);background:linear-gradient(to right, #1c9fff, #70d1fc);}
.colorbg2{width: 100%;height: 6px;border-radius: 4px 4px 0 0;background:-webkit-linear-gradient(left, #1f51fc, #70a0fc);background:-o-linear-gradient(right, #1f51fc, #70a0fc);background:-moz-linear-gradient(right, #1f51fc, #70a0fc);background:linear-gradient(to right, #1f51fc, #70a0fc);}
.colorbg3{width: 100%;height: 6px;border-radius: 4px 4px 0 0;background:-webkit-linear-gradient(left, #fc201f, #fb6b5b);background:-o-linear-gradient(right, #fc201f, #fb6b5b);background:-moz-linear-gradient(right, #fc201f, #fb6b5b);background:linear-gradient(to right, #fc201f, #fb6b5b);}
.colorbg4{width: 100%;height: 6px;border-radius: 4px 4px 0 0;background:-webkit-linear-gradient(left, #ff6a05, #ffc671);background:-o-linear-gradient(right, #ff6a05, #ffc671);background:-moz-linear-gradient(right, #ff6a05, #ffc671);background:linear-gradient(to right, #ff6a05, #ffc671);}
.statisticsItem .detail{width: 100%;background: #fff;padding: 40px;border-radius: 0 0 4px 4px;}
.detail-title{font-size: 16px;color: rgb(107, 107, 107); font-family: 微软雅黑;font-weight: 400;font-style: normal;padding-bottom: 10px}
.detail-money{font-family: 'Arial Normal', 'Arial';font-weight: 400;font-style: normal;font-size: 28px;color: #000000;}
.carDetail{width: 100%;margin-bottom: 40px;padding: 0 20px;-moz-box-shadow:1px 1px 3px #ccc; -webkit-box-shadow:1px 1px 3px #ccc; box-shadow:1px 1px 3px #ccc;border-radius: 4px;background: #fff;}
.carDetailBox{width: 100%;display: flex;justify-content: space-between;padding: 30px 0 15px 0}
.carDetailItem{flex: 1;background-color: #fff;text-align: center;border-right: 1px solid rgba(240, 240, 240, 1);}
.carDetailBox .carDetailItem:last-child{border-right: none;}
.carDetailBoxTitle{display: block;font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑;font-weight: 700;font-style: normal;font-size: 18px;color: rgb(81, 81, 81);padding: 20px 0;border-bottom: 1px solid rgba(240, 240, 240, 1);}
.detail-num{font-family: 'Arial Normal', 'Arial';font-weight: 400;font-style: normal;font-size: 28px;color: #000000;padding-top: 20px;}
.detail-num .unit{position: absolute;font-family: 微软雅黑;font-weight: 400;font-style: normal;color: rgb(107, 107, 107);font-size: 13px;right: -20px;}
.carDetail-title{ font-family: 微软雅黑;font-weight: 400;font-style: normal;font-size: 18px;color: rgb(78, 75, 86);padding: 10px 0 20px 0;}
.carEarlyWarning{width: 100%;margin-bottom: 40px;padding: 0 20px;-moz-box-shadow:1px 1px 3px #ccc; -webkit-box-shadow:1px 1px 3px #ccc; box-shadow:1px 1px 3px #ccc;border-radius: 4px;background: #fff;}
.carEarlyWarningTitle{display: block;font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑;font-weight: 700;font-style: normal;font-size: 18px;color: rgb(81, 81, 81);padding: 20px 0;border-bottom: 1px solid rgba(240, 240, 240, 1);}
.flex-jca-fdc{
display: flex !important;
flex-direction: column;
......@@ -191,7 +171,7 @@
padding: 0;
}
.tip-co{
padding: 10px;
padding: 0 15px;
margin-right: 10px;
margin-left: 20px;
}
......@@ -302,8 +282,6 @@
width: 100%;
height: 145px;
overflow: hidden;
margin: 10px 0;
background: #eef1f6;
}
.marquee_list {
......@@ -314,6 +292,7 @@
top: 0;
left: 0;
padding-left: 0px;
}
.marquee_top {
......@@ -321,19 +300,24 @@
}
.marquee_list li {
height: 30px;
height: 31px;
line-height: 30px;
line-height: 31px;
font-size: 14px;
list-style-type:none;
color: rgb(87, 81, 96);
font-family: 微软雅黑;
font-weight: 400;
font-style: normal;
font-size: 14px;
}
.marquee_list li span {
padding: 0 2px;
}
.warn-1{
color: red;
color: #1c9fff;
}
.warn-2{
color: #20a0ff;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment