8 Commits

8 changed files with 189 additions and 101 deletions

View File

@ -23,7 +23,8 @@
"vue-router": "^3.0.7", "vue-router": "^3.0.7",
"vuex": "^3.6.2", "vuex": "^3.6.2",
"element-ui": "^2.15.9", "element-ui": "^2.15.9",
"dayjs": "^1.8.14" "dayjs": "^1.8.14",
"decimal.js": "^10.4.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.16", "@babel/core": "^7.12.16",

View File

@ -15,7 +15,7 @@ let token = urlParams.get('token') ;
localStorage.setItem('token', token); localStorage.setItem('token', token);
service.interceptors.request.use( service.interceptors.request.use(
config => { config => {
// let reqUrl=config.url let reqUrl=config.url
// console.log("reqUrl",reqUrl) // console.log("reqUrl",reqUrl)
config.data = config.contentType ? config.data : qs.stringify(config.data) config.data = config.contentType ? config.data : qs.stringify(config.data)
if (config.testFlag) { if (config.testFlag) {
@ -25,8 +25,11 @@ service.interceptors.request.use(
let token = localStorage.getItem('token'); let token = localStorage.getItem('token');
// let token='4099761587129c46b03c9316c9e866c9' // let token='4099761587129c46b03c9316c9e866c9'
// let token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzb25nIiwiYXVkIjpbInN1cHBsaWVyLWFwcCJdLCJuYmYiOjE3MTI0NTQ5NTMsInVzZXJfaW5mbyI6eyJ1c2VySWQiOjU0NjU0LCJwaG9uZSI6IjE3NjMwMDM1NjU4IiwibmFtZSI6InNvbmciLCJzdXBwbGllck5hbWUiOiJDLeS4iua1t-a1i-ivleacjeWKoeWVhiIsInN1cHBsaWVySWQiOjMzMDQxLCJzdXBwbGllclR5cGUiOjIsInVzZXJuYW1lIjoic29uZyIsInVzZXJUeXBlIjoicmVzY3VlQXBwIiwiZGV2aWNlSWQiOiIyMmI0OWNhMjBmOWI4MzMwZDk4NzIxNzNmMzllYTY4YmMiLCJhdXRob3JpdGllcyI6W119LCJzY29wZSI6WyJhbGwiXSwiaXNzIjoiaHR0cHM6Ly9zaW5vYXNzaXN0LmNvbSIsImV4cCI6MTcxMjU0MTM1MywiaWF0IjoxNzEyNDU0OTUzfQ.sPU9_OD_TOWcTwqmlawEGyo4mCPrEaRYw2R02gnvYJw' // let token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzb25nIiwiYXVkIjpbInN1cHBsaWVyLWFwcCJdLCJuYmYiOjE3MTI0NTQ5NTMsInVzZXJfaW5mbyI6eyJ1c2VySWQiOjU0NjU0LCJwaG9uZSI6IjE3NjMwMDM1NjU4IiwibmFtZSI6InNvbmciLCJzdXBwbGllck5hbWUiOiJDLeS4iua1t-a1i-ivleacjeWKoeWVhiIsInN1cHBsaWVySWQiOjMzMDQxLCJzdXBwbGllclR5cGUiOjIsInVzZXJuYW1lIjoic29uZyIsInVzZXJUeXBlIjoicmVzY3VlQXBwIiwiZGV2aWNlSWQiOiIyMmI0OWNhMjBmOWI4MzMwZDk4NzIxNzNmMzllYTY4YmMiLCJhdXRob3JpdGllcyI6W119LCJzY29wZSI6WyJhbGwiXSwiaXNzIjoiaHR0cHM6Ly9zaW5vYXNzaXN0LmNvbSIsImV4cCI6MTcxMjU0MTM1MywiaWF0IjoxNzEyNDU0OTUzfQ.sPU9_OD_TOWcTwqmlawEGyo4mCPrEaRYw2R02gnvYJw'
config.headers['token'] = `${token}`; if(!(reqUrl=='/supplier/supplierTraining/trainingTask' || reqUrl=='/supplier/supplierTraining/normalList' || reqUrl=='/supplier/supplierTraining/trainingList')){
config.headers['Authorization'] = `${token}`; config.headers['Authorization'] = `${token}`;
config.headers['token'] = `${token}`;
}
/* if (reqUrl.includes("/driverApp")) { /* if (reqUrl.includes("/driverApp")) {
// console.log("司机app") // console.log("司机app")
config.headers['token'] = `${token}`; config.headers['token'] = `${token}`;

View File

@ -101,6 +101,7 @@ export default {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
this.driverId = urlParams.get('driverId'); this.driverId = urlParams.get('driverId');
this.time=timeFormat(Date.now()) this.time=timeFormat(Date.now())
this.keyword=urlParams.get('keyWord') || ''
this.getTrainingList(); this.getTrainingList();
document.addEventListener('visibilitychange', async ( ) => { document.addEventListener('visibilitychange', async ( ) => {
let state = document.visibilityState let state = document.visibilityState

View File

@ -103,6 +103,9 @@ export default {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
this.supplierId = urlParams.get('supplierId'); this.supplierId = urlParams.get('supplierId');
this.driverId = urlParams.get('driverId'); this.driverId = urlParams.get('driverId');
if(this.driverId){
this.keyword=urlParams.get('keyWord') || ''
}
this.getNormalList() this.getNormalList()
}, },
methods:{ methods:{

View File

@ -86,6 +86,7 @@
</template> </template>
<script> <script>
import { Decimal } from 'decimal.js';
import {myMixins} from "@/utils/myMixins" import {myMixins} from "@/utils/myMixins"
import {notifyInvoiceList} from "@/api/mine" import {notifyInvoiceList} from "@/api/mine"
export default { export default {
@ -110,12 +111,23 @@ export default {
} }
}, },
computed: { computed: {
totalCount () { /* totalCount () {
let total = 0; let total = 0;
this.checkList.map(item => { this.checkList.map(item => {
total += item.invoiceMoney total += item.invoiceMoney
}) })
return total return total
},*/
totalCount() {
// 使用 Decimal 来计算总金额
let total = new Decimal(0);
this.checkList.forEach(item => {
total = total.plus(new Decimal(item.invoiceMoney));
});
// 返回总金额,保留两位小数
return total.toNumber()
}, },
}, },
mounted() { mounted() {

View File

@ -2,14 +2,21 @@
<div class="wrap"> <div class="wrap">
<div v-if="isMobile" class="headWrap"> <div v-if="isMobile" class="headWrap">
<div class="title">KPI.数据看板</div> <div class="title">KPI.数据看板</div>
<div class="titleName">{{ current }}-{{supplierName}}</div> <div class="titleName">{{ current }}-{{supplierName}}</div>
</div> </div>
<div v-else class="webHeadWrap" :style="'justify-content:'+(isZd==1 ? 'space-between':'center')"> <div v-else class="webHeadWrap" :style="'justify-content:'+(isZd==1 ? 'space-between':'center')">
<div class="empty" v-if="isZd==1"></div> <div class="empty" v-if="isZd==1"></div>
<div class="title">KPI.数据看板<span v-if="isZd==1">--中道救援</span><span v-if="isZd!=1">--{{ current }}</span></div> <div class="title">KPI.数据看板<span v-if="isZd==1">--中道救援</span><span v-if="isZd!=1">--{{ current }}</span></div>
<!-- 只有中道账号才显示搜索框 --> <!-- 只有中道账号才显示搜索框 -->
<div class="searchWrap" v-if="isZd==1"> <div class="searchWrap" v-if="isZd==1">
<span class="month">{{ current }}</span> <el-date-picker
v-model="current"
type="month"
:clearable="false"
class="month custom-date-picker"
@change="monthChangeHandle"
placeholder="选择月">
</el-date-picker>
<el-select <el-select
v-model="supplierId" v-model="supplierId"
filterable filterable
@ -18,7 +25,7 @@
clearable clearable
placeholder="请输入后选择" placeholder="请输入后选择"
:remote-method="remoteMethod" :remote-method="remoteMethod"
@change="selectSupplierNameHanldle" @change="selectSupplierNameHandle"
:loading="selectLoading"> :loading="selectLoading">
<el-option <el-option
v-for="item in selectOption" v-for="item in selectOption"
@ -29,7 +36,7 @@
</el-select> </el-select>
</div> </div>
</div> </div>
<van-tabs v-model="active" sticky @click="onClick"> <van-tabs v-model="active" sticky @click="tabClickHandle">
<van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name"></van-tab> <van-tab v-for="(item,index) in tabArr" :key="index" :title="item.name"></van-tab>
<div v-if="isMobile && !([0,1,2,3].includes(active))" class="tipArrow left">{{ leftArr }}</div> <div v-if="isMobile && !([0,1,2,3].includes(active))" class="tipArrow left">{{ leftArr }}</div>
<div v-if="isMobile && !([8,9].includes(active))" class="tipArrow right">>>></div> <div v-if="isMobile && !([8,9].includes(active))" class="tipArrow right">>>></div>
@ -103,8 +110,8 @@
<i class="el-icon-question" @click.prevent="showScoreChart = !showScoreChart"></i> <i class="el-icon-question" @click.prevent="showScoreChart = !showScoreChart"></i>
</div> </div>
<div class="storeWrap" v-if="indexData"> <div class="storeWrap" v-if="indexData">
<circle-char v-if="showScoreChart" ref="Doughnut7" :data="indexData && indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char> <circle-char v-show="showScoreChart" ref="Doughnut7" :data="indexData && indexData.score" :bg-color="'#00D273'" :is-store="true"></circle-char>
<div v-else class="detailScore"> <div v-show="!showScoreChart" class="detailScore">
<div class="left"> <div class="left">
<div> <div>
<span class="defen">接单得分:</span> <span class="defen">接单得分:</span>
@ -242,15 +249,6 @@
<noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList" <noFit-table :active='active' :is-mobile='isMobile' :table-data="detailList" :label-list="labelList"
></noFit-table> ></noFit-table>
</div> </div>
<!-- <el-pagination
small
:current-page.sync="pageNum"
:page-size.sync="pageSize"
@current-change="getKpiData"
@size-change="getKpiData"
layout="prev, pager, next"
:total="total">
</el-pagination>-->
<el-pagination <el-pagination
v-if="active !== 9" v-if="active !== 9"
small small
@ -316,7 +314,8 @@ export default {
xAxisArr: [], xAxisArr: [],
isMobile: false, isMobile: false,
isZd: '', isZd: '',
current: dayjs(new Date()).format('M'), current:'',
// current: dayjs(new Date()).format('M'),
supplierName:'', supplierName:'',
value: '1', value: '1',
options: [ options: [
@ -350,15 +349,13 @@ export default {
async mounted() { async mounted() {
await this.checkMobile(); await this.checkMobile();
await this.initDate(); await this.initDate();
await this.getData(); await this.selectSupplierNameHandle();
// await this.allDataChart()
}, },
methods: { methods: {
applicateHandle() { applicateHandle() {
if (window.parent) { if (window.parent) {
const hasListener = window.parent.dispatchEvent(new Event('checkCloseDialog')); const hasListener = window.parent.dispatchEvent(new Event('checkCloseDialog'));
if (hasListener) { if (hasListener) {
console.log("this.supplierId",this.supplierId)
const data = { const data = {
action: 'closeDialog', action: 'closeDialog',
message: this.supplierId, message: this.supplierId,
@ -371,9 +368,31 @@ export default {
} }
} }
}, },
async selectSupplierNameHanldle(){ monthChangeHandle(value){
if (value) {
const year = value.getFullYear();
const month = value.getMonth() + 1; // 月份从 0 开始,需要加 1
const yearAndMonth = year + '-' + (month > 9 ? month : '0' + month);
this.current = dayjs(new Date(yearAndMonth)).format('YYYY-MM')
this.startTime = `${year}-${this.padZero(month)}-01 00:00:00`;
const lastDay = new Date(year, month, 0).getDate(); // 获取该月的最后一天
this.endTime = `${year}-${this.padZero(month)}-${this.padZero(lastDay)} 23:59:59`;
this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
console.log(" this.startMonthTime", this.startMonthTime)
this.selectSupplierNameHandle();
if(this.active===1){
this.tabClickHandle()
}
}
},
padZero(num) {
return num < 10 ? `0${num}` : num;
},
async selectSupplierNameHandle(){
await this.getData() await this.getData()
setTimeout(()=>{ if(this.active !== 0){
return
}
this.$refs.Doughnut1.initCircle() this.$refs.Doughnut1.initCircle()
this.$refs.Doughnut2.initCircle() this.$refs.Doughnut2.initCircle()
this.$refs.Doughnut3.initCircle() this.$refs.Doughnut3.initCircle()
@ -381,7 +400,6 @@ export default {
this.$refs.Doughnut5.initCircle() this.$refs.Doughnut5.initCircle()
this.$refs.Doughnut6.initCircle() this.$refs.Doughnut6.initCircle()
this.$refs.Doughnut7.initCircle() this.$refs.Doughnut7.initCircle()
},1500)
}, },
async remoteMethod(query) { async remoteMethod(query) {
if (query !== '') { if (query !== '') {
@ -449,21 +467,21 @@ export default {
async clickJumpHandle(type) { async clickJumpHandle(type) {
this.loading = true this.loading = true
this.active = type; this.active = type;
await this.onClick(); await this.tabClickHandle();
}, },
onClick() { tabClickHandle() {
this.activeIndex = 0; this.activeIndex = 0;
this.detailList = []; this.detailList = [];
this.labelList = []; this.labelList = [];
this.driverName='' this.driverName=''
this.getData(); this.selectSupplierNameHandle();
if (this.active === 1) { if (this.active === 1) {
setTimeout(() => { setTimeout(() => {
this.drawLine() this.drawLine()
if (!this.isMobile && this.activeIndex === 3) { if (!this.isMobile && this.activeIndex === 3) {
this.drawLine1() this.drawLine1()
} }
}, 500) }, 1000)
} }
}, },
drawLine() { // 基于准备好的dom初始化echarts实例 drawLine() { // 基于准备好的dom初始化echarts实例
@ -872,14 +890,15 @@ export default {
driverId: this.driverId, driverId: this.driverId,
driverName:this.driverName, driverName:this.driverName,
}); });
console.log("res",res)
this.continueMonthKpi=res.data; this.continueMonthKpi=res.data;
let v1=[] // 初始化 v1 ,v2数组长度为 12初始值为 0
let v2=[] let v1 = new Array(12).fill(0);
let v2 = new Array(12).fill(0);
if( this.continueMonthKpi.length>0){ if( this.continueMonthKpi.length>0){
this.continueMonthKpi.forEach(item=>{ this.continueMonthKpi.forEach(item=>{
v1.push(item.dispatchOrderCount) let month = parseInt(item.statisticsDate?.split('-')[1], 10) - 1; // 获取月份,并转换为数组索引
v2.push(item.orderScore) v1[month] = item.dispatchOrderCount;
v2[month] = item.orderScore;
}) })
} }
let myChart = echarts.init(document.getElementById('allDataChart')) let myChart = echarts.init(document.getElementById('allDataChart'))
@ -936,6 +955,14 @@ export default {
}; };
option && myChart.setOption(option, true); option && myChart.setOption(option, true);
}, },
// 通用函数,用于处理百分比数据
processPercentage(value) {
value *= 100;
if (value % 1 !== 0) {
value = value.toFixed(2);
}
return value;
},
async getKpiData() { async getKpiData() {
try { try {
this.loading = true this.loading = true
@ -952,37 +979,21 @@ export default {
} }
this.indexData = res.data; this.indexData = res.data;
this.supplierName=res.data?.supplierName this.supplierName=res.data?.supplierName
this.indexData.refuseOrderRate=this.indexData.refuseOrderRate*100 // 需要处理的属性名数组
if (this.indexData.refuseOrderRate % 1 !== 0) { const propertiesToProcess = [
this.indexData.refuseOrderRate = this.indexData.refuseOrderRate.toFixed(2); 'refuseOrderRate',
'timeoutOrderRate',
'complainOrderRate',
'customerSatisfaction',
'threeMinutesContactRate',
'urgeRate',
'appRate',
'polymerizationSuccessRate'
];
for (let key in this.indexData){
if (propertiesToProcess.includes(key)) {
this.indexData[key] = this.processPercentage(this.indexData[key]);
} }
this.indexData.timeoutOrderRate=this.indexData.timeoutOrderRate*100
if (this.indexData.timeoutOrderRate % 1 !== 0) {
this.indexData.timeoutOrderRate = this.indexData.timeoutOrderRate.toFixed(2);
}
this.indexData.complainOrderRate=this.indexData.complainOrderRate*100
if (this.indexData.complainOrderRate % 1 !== 0) {
this.indexData.complainOrderRate = this.indexData.complainOrderRate.toFixed(2);
}
this.indexData.customerSatisfaction=this.indexData.customerSatisfaction*100
if (this.indexData.customerSatisfaction % 1 !== 0) {
this.indexData.customerSatisfaction = this.indexData.customerSatisfaction.toFixed(2);
}
this.indexData.threeMinutesContactRate=this.indexData.threeMinutesContactRate*100
if (this.indexData.threeMinutesContactRate % 1 !== 0) {
this.indexData.threeMinutesContactRate = this.indexData.threeMinutesContactRate.toFixed(2);
}
this.indexData.urgeRate=this.indexData.urgeRate*100
if (this.indexData.urgeRate % 1 !== 0) {
this.indexData.urgeRate = this.indexData.urgeRate.toFixed(2);
}
this.indexData.appRate=this.indexData.appRate*100
if (this.indexData.appRate % 1 !== 0) {
this.indexData.appRate = this.indexData.appRate.toFixed(2);
}
this.indexData.polymerizationSuccessRate=this.indexData.polymerizationSuccessRate*100
if (this.indexData.polymerizationSuccessRate % 1 !== 0) {
this.indexData.polymerizationSuccessRate = this.indexData.polymerizationSuccessRate.toFixed(2);
} }
} else if ([1, 2].includes(this.active)) { } else if ([1, 2].includes(this.active)) {
let res = await getStatisticsKpi({ let res = await getStatisticsKpi({
@ -1011,13 +1022,16 @@ export default {
item.minorFortyMinutesArrivalRate=this.formatPercentage(item.minorFortyMinutesArrivalRate) ; item.minorFortyMinutesArrivalRate=this.formatPercentage(item.minorFortyMinutesArrivalRate) ;
let formatVal = dayjs(item.statisticsDate).format('DD'); let formatVal = dayjs(item.statisticsDate).format('DD');
let formatVal1 = dayjs(item.statisticsDate).format('M'); let formatVal1 = dayjs(item.statisticsDate).format('M');
return {...item, date: formatVal, month: (formatVal1 == this.current) ? '本月' : (formatVal1 + '月')}; // console.log("formatVal1",formatVal1)
// return {...item, date: formatVal, month: (formatVal1 == this.current) ? '本月' : (formatVal1 + '月')};
return {...item, date: formatVal, month: formatVal1 + '月'};
}); });
this.loading = false this.loading = false
this.detailList?.map(item => { this.detailList?.map(item => {
this.xAxisArr.push(item.month) this.xAxisArr.push(item.month)
}) })
this.xAxisArr[this.xAxisArr.length - 1] = '本月' // console.log(" this.xAxisArr", this.xAxisArr)
// this.xAxisArr[this.xAxisArr.length - 1] = '本月'
await this.twoTabHanldeData() await this.twoTabHanldeData()
} else if ([3, 4].includes(this.active)) { } else if ([3, 4].includes(this.active)) {
let res = await getDriverStatisticsKpi({ let res = await getDriverStatisticsKpi({
@ -1030,13 +1044,11 @@ export default {
pageNum: this.pageNum, pageNum: this.pageNum,
pageSize: this.pageSize pageSize: this.pageSize
}) })
// this.detailList = res.data
this.total = res.total this.total = res.total
this.detailList = res.data?.map(item => { this.detailList = res.data?.map(item => {
item.refuseOrderRate=this.formatPercentage(item.refuseOrderRate) ; item.refuseOrderRate=this.formatPercentage(item.refuseOrderRate) ;
item.timeoutOrderRate=this.formatPercentage(item.timeoutOrderRate) ; item.timeoutOrderRate=this.formatPercentage(item.timeoutOrderRate) ;
item.cancelRate=this.formatPercentage(item.cancelRate) ; item.cancelRate=this.formatPercentage(item.cancelRate) ;
// item.urgeRate=this.formatPercentage(item.urgeRate) ;
item.complainOrderRate=this.formatPercentage(item.complainOrderRate) ; item.complainOrderRate=this.formatPercentage(item.complainOrderRate) ;
item.customerEvaluateRate=this.formatPercentage(item.customerEvaluateRate) ; item.customerEvaluateRate=this.formatPercentage(item.customerEvaluateRate) ;
item.appRate=this.formatPercentage(item.appRate) ; item.appRate=this.formatPercentage(item.appRate) ;
@ -1051,7 +1063,6 @@ export default {
let formatVal = dayjs(item.statisticsDate).format('DD'); let formatVal = dayjs(item.statisticsDate).format('DD');
return {...item, date: formatVal}; return {...item, date: formatVal};
}); });
console.log("this.detailList",this.detailList)
this.loading = false; this.loading = false;
if(this.active===4 && !this.driverName){ if(this.active===4 && !this.driverName){
this.detailList=[] this.detailList=[]
@ -1138,15 +1149,23 @@ export default {
return result.toFixed(2) + '%'; return result.toFixed(2) + '%';
} }
}, },
checkMobile() {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
},
// 初始化获取当月日期 // 初始化获取当月日期
initDate() { initDate() {
let year=''
let month=''
if( this.current ) {
year = new Date(this.current).getFullYear();
month = new Date(this.current).getMonth() + 1;
} else {
year = new Date().getFullYear();
month = new Date().getMonth() + 1;
}
let yearAndMonth = year + '-' + (month > 9 ? month : '0' + month);
this.current = dayjs(new Date(yearAndMonth)).format('YYYY-MM')
this.startTime = dayjs(new Date()).format('YYYY-MM') + '-01 00:00:00' this.startTime = dayjs(new Date()).format('YYYY-MM') + '-01 00:00:00'
this.endTime = dayjs(new Date()).format('YYYY-MM') + '-' + this.getDayLen()+' 23:59:59' this.endTime = dayjs(new Date()).format('YYYY-MM') + '-' + this.getDayLen()+' 23:59:59'
this.startMonthTime=this.getStartTimeFromEndTime(this.endTime) this.startMonthTime=this.getStartTimeFromEndTime(this.endTime)
console.log(" this.startMonthTime", this.startMonthTime,this.startTime)
}, },
// 获取当月天数 // 获取当月天数
getDayLen() { getDayLen() {
@ -1386,7 +1405,6 @@ export default {
} }
} else if (this.active === 3) { } else if (this.active === 3) {
if (this.activeIndex === 0) { if (this.activeIndex === 0) {
this.labelList = [ this.labelList = [
{label: '师傅姓名', prop: 'driverName'}, {label: '师傅姓名', prop: 'driverName'},
{label: '总分', prop: 'score'}, {label: '总分', prop: 'score'},
@ -1504,6 +1522,10 @@ export default {
} }
} }
}, },
checkMobile() {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
},
setType(type) { setType(type) {
switch (type) { switch (type) {
case 5: case 5:
@ -1582,7 +1604,7 @@ export default {
align-items: center; align-items: center;
position: relative; position: relative;
.month { /* .month {
display: inline-block; display: inline-block;
width: 45px; width: 45px;
height: 30px; height: 30px;
@ -1592,7 +1614,7 @@ export default {
border: 1px solid #4C81F5; border: 1px solid #4C81F5;
font-size: 14px; font-size: 14px;
color: #FFFFFF; color: #FFFFFF;
} }*/
.el-icon-search { .el-icon-search {
font-size: 15px; font-size: 15px;
@ -1938,4 +1960,47 @@ export default {
::v-deep .el-switch__label * { ::v-deep .el-switch__label * {
font-size: 12px; font-size: 12px;
} }
/* 自定义样式 */
.custom-date-picker ::v-deep .el-input__prefix{
display: none;
}
.month {
display: inline-block;
width: 75px;
//height: 30px;
//line-height: 30px;
text-align: center;
border-radius: 20px 0px 0px 20px;
//border-radius: 0px 20px 20px 0px;
//border: 1px solid #4C81F5;
font-size: 14px;
color: #FFFFFF;
::v-deep .el-input--suffix .el-input__inner{
}
::v-deep .el-input__inner{
padding-left: 0 !important;
padding-right: 0 !important;
border-radius: 20px 0px 0px 20px !important;
text-align: center !important;
font-size: 14px !important;
color: #FFFFFF !important;
border: 1px solid #4C81F5 !important;
background-color: transparent !important;
}
/* 自定义清除按钮样式 */
.custom-date-picker ::v-deep .el-input__suffix {
right: 0 !important;
padding-right: 10px !important;
}
.custom-date-picker ::v-deep .el-input__suffix-inner {
display: flex;
align-items: center;
}
.custom-date-picker ::v-deep .el-input__icon {
line-height: 1 !important;
}
}
</style> </style>

View File

@ -73,51 +73,51 @@
<div class="titleContent"> <div class="titleContent">
<div class="flex-between" v-show="abState"> <div class="flex-between" v-show="abState">
<div> 到事发地距离:</div> <div> 到事发地距离:</div>
<div class="halfOpcity"><input @input="validateIntegerInput" type="number" v-model="form.supplierSettleMileageAb"/>公里</div> <div class="halfOpcity"><input @input="validateIntegerInput" class="ipt" type="number" v-model="form.supplierSettleMileageAb"/>公里</div>
</div> </div>
<div class="flex-between" v-show="bcState"> <div class="flex-between" v-show="bcState">
<div> 拖车里程:</div> <div> 拖车里程:</div>
<div class="halfOpcity"><input type="number" v-model="form.supplierSettleMileageBc"/>公里</div> <div class="halfOpcity"><input class="ipt" type="number" v-model="form.supplierSettleMileageBc"/>公里</div>
</div> </div>
<div class="flex-between" v-show="caState"> <div class="flex-between" v-show="caState">
<div>返程里程:</div> <div>返程里程:</div>
<div class="halfOpcity"><input type="number" v-model="form.supplierSettleMileageCa"/>公里</div> <div class="halfOpcity"><input class="ipt" type="number" v-model="form.supplierSettleMileageCa"/>公里</div>
</div> </div>
<div class="flex-between" v-show="bridgeAbState"> <div class="flex-between" v-show="bridgeAbState">
<div>ab路桥费:</div> <div>ab路桥费:</div>
<div class="halfOpcity"><input @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierBridgeAmountAb"/></div> <div class="halfOpcity"><input class="ipt" @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierBridgeAmountAb"/></div>
</div> </div>
<div class="flex-between" v-show="bridgeBcState"> <div class="flex-between" v-show="bridgeBcState">
<div>bc路桥费:</div> <div>bc路桥费:</div>
<div class="halfOpcity"><input @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierBridgeAmountBc"/></div> <div class="halfOpcity"><input class="ipt" @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierBridgeAmountBc"/></div>
</div> </div>
<div class="flex-between" v-show="bridgeCaState"> <div class="flex-between" v-show="bridgeCaState">
<div>ca路桥费:</div> <div>ca路桥费:</div>
<div class="halfOpcity"><input @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierBridgeAmountCa"/></div> <div class="halfOpcity"><input class="ipt" @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierBridgeAmountCa"/></div>
</div> </div>
<div class="flex-between" v-show="waitAmountState"> <div class="flex-between" v-show="waitAmountState">
<div>等候费:</div> <div>等候费:</div>
<div class="halfOpcity inputContent"><input @input="validateIntegerInput" type="number" v-model="form.supplierWaitAmount"/></div> <div class="halfOpcity inputContent"><input class="ipt" @input="validateIntegerInput" type="number" v-model="form.supplierWaitAmount"/></div>
</div> </div>
<div class="flex-between" v-show="tyreAmountState"> <div class="flex-between" v-show="tyreAmountState">
<div>小轮个数:</div> <div>小轮个数:</div>
<div class="halfOpcity inputContent"><input @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.tyreNumber"/></div> <div class="halfOpcity inputContent"><input class="ipt" @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.tyreNumber"/></div>
</div> </div>
<div class="flex-between" v-show="tyreAmountState"> <div class="flex-between" v-show="tyreAmountState">
<div>小轮费:</div> <div>小轮费:</div>
<div class="halfOpcity inputContent"><input @input="validateIntegerInput" :disabled="isUnsuccessfulSettle" type="number" v-model="form.supplierTyreAmount"/></div> <div class="halfOpcity inputContent"><input @input="validateIntegerInput" disabled type="number" v-model="form.supplierTyreAmount"/></div>
</div> </div>
<div class="flex-between" v-show="dilemmaAmountState && basePriceDisabled"> <div class="flex-between" v-show="dilemmaAmountState && basePriceDisabled">
<div>困境费:</div> <div>困境费:</div>
<div class="halfOpcity inputContent"><input @input="validateIntegerInput" type="number" v-model="form.supplierDilemmaAmount"/></div> <div class="halfOpcity inputContent"><input class="ipt" @input="validateIntegerInput" type="number" v-model="form.supplierDilemmaAmount"/></div>
</div> </div>
<div class="flex-between" v-show="basementFeeState"> <div class="flex-between" v-show="basementFeeState">
<div>地库费:</div> <div>地库费:</div>
<div class="halfOpcity inputContent"><input @input="validateIntegerInput" type="number" v-model="form.supplierBasementFee" :disabled="!isBasementSettle || isUnsuccessfulSettle" /></div> <div class="halfOpcity inputContent"><input @input="validateIntegerInput" class="ipt" type="number" v-model="form.supplierBasementFee" :disabled="!isBasementSettle || isUnsuccessfulSettle" /></div>
</div> </div>
<div class="flex-between"> <div class="flex-between">
<div>收取客户金额:</div> <div>收取客户金额:</div>
<div class="halfOpcity inputContent"><input type="number" v-model="form.supplierCustomerAmount"/></div> <div class="halfOpcity inputContent"><input type="number" class="ipt" v-model="form.supplierCustomerAmount"/></div>
</div> </div>
<div class="flex-between bgDisable" :class=" { 'flex-between': true, 'bgDisable' : basePriceDisabled } "> <div class="flex-between bgDisable" :class=" { 'flex-between': true, 'bgDisable' : basePriceDisabled } ">
<div>基本费用:</div> <div>基本费用:</div>
@ -973,6 +973,9 @@ img {
.halfOpcity { .halfOpcity {
opacity: .5; opacity: .5;
.ipt{
border: 1px solid #cccccc !important;
}
} }
.inputContent { .inputContent {

View File

@ -82,7 +82,7 @@
<span class="content">{{orderInfo.bridgeAmountBc + ' 元' }}</span> <span class="content">{{orderInfo.bridgeAmountBc + ' 元' }}</span>
</div> </div>
<div class="item" v-show="bridgeCaState"> <div class="item" v-show="bridgeCaState">
<span class="titleLeft">va路桥费</span> <span class="titleLeft">ca路桥费</span>
<span class="content">{{orderInfo.bridgeAmountCa + ' 元' }}</span> <span class="content">{{orderInfo.bridgeAmountCa + ' 元' }}</span>
</div> </div>
<div class="item" v-show="tyreAmountState"> <div class="item" v-show="tyreAmountState">