1002 lines
30 KiB
Vue
1002 lines
30 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="text-area">
|
||
<view class="carDetection">
|
||
<view class="header">
|
||
<image src="/static/img/aqjcTitle.png"></image>
|
||
</view>
|
||
<view class="title">
|
||
<span>电池健康综合评分</span>
|
||
<span class="smallTitle">DIAN CHI JIAN KANG ZONG HE PING FEN</span>
|
||
</view>
|
||
<view class="visualInspection1">
|
||
<circular :apiData='apiData' class="cularBg"></circular>
|
||
<view class="plateNumber">
|
||
<span class="number">{{apiData.plateNo}}</span>
|
||
<span class="carStatus">{{carStatus}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="title">
|
||
<span>电池充电信息</span>
|
||
<span class="smallTitle">DIAN CHI CHONG DIAN XIN XI</span>
|
||
</view>
|
||
<view class="cdxx">
|
||
<view class="chargeInfo">
|
||
<view v-for="(item,index) in chargeData" :key="index" class="chartCard">
|
||
<span>
|
||
<image src="/static/img/jx.png"></image>
|
||
{{item.name}}
|
||
</span>
|
||
<span v-if="item.name != '充电时长'" class="cdValue">{{item.value}}kWh</span>
|
||
<span v-else class="cdValue">{{item.value}}min</span>
|
||
</view>
|
||
</view>
|
||
<view class="batteryInfo">
|
||
<ul class="list">
|
||
<!-- <li class="type">{{apiData.batteryType}}</li> -->
|
||
<li>VIN：{{apiData.vin}}</li>
|
||
<li>开始SOC：{{apiData.chargingStartSOC}}%</li>
|
||
<li>结束SOC：{{apiData.chargingEndSOC}}%</li>
|
||
|
||
<!-- <li>
|
||
<image src="/static/img/charging.png"
|
||
style="width: 26px;height: 26px;margin-right: 5px;"></image>
|
||
充电场站：{{apiData.stationName}}
|
||
</li>
|
||
<li>
|
||
<image src="/static/img/station.png"
|
||
style="width: 26px;height: 26px;margin-right: 5px;"></image>
|
||
充电桩：{{apiData.pileName}}
|
||
</li> -->
|
||
<li>
|
||
<image src="/static/img/time.png" style="width: 26px;height: 26px;margin-right: 5px;">
|
||
</image>
|
||
充电开始时间：{{apiData.chargingStartTime}}
|
||
</li>
|
||
<li>
|
||
<image src="/static/img/time.png" style="width: 26px;height: 26px;margin-right: 5px;">
|
||
</image>
|
||
充电结束时间：{{apiData.chargingEndTime}}
|
||
</li>
|
||
</ul>
|
||
<!-- <barVue :apiData='apiData'></barVue> -->
|
||
</view>
|
||
<view class="comment">
|
||
<view class="pgjl">
|
||
<text class="twoTitle">评估结论</text>
|
||
<p>{{evalConclusion.reason}}</p>
|
||
<p>{{evalConclusion.status}}</p>
|
||
</view>
|
||
<!-- <view class="ycjy">
|
||
<text class="twoTitle">用车建议</text>
|
||
<text class="carSuggestions">为了保障您的安全以及电动车的最佳性能，我们为您提供以下建议:\n
|
||
<view class="xh">1</view>
|
||
<span>规律的维护检査:请定期检査电动车的电池、刹车系统、轮胎等关键部位，确保它们处于良好工作状态。<br></span>
|
||
<view class="xh">2</view>
|
||
<span>保持充电习惯:为了延长电池寿命，建议您尽量保持规律的充电习惯，避免电池电量过低或过高。通常建议保持电池电量在30%-80%之间。<br></span>
|
||
<view class="xh">3</view>
|
||
<span>注意天气变化:春秋季节天气变化无常，雨水可能会对电动车造成一定影响。在预期有雨的日子，请尽量避免在雨中充电，并确保电动车在干燥的地方停放。<br></span>
|
||
<view class="xh">4</view>
|
||
<span>避免过度使用:过度使用电动车可能导致电池过热或者电池性能下降。请适当地使用电动车，避免连续长时间的高速驾驶。<br></span>
|
||
<view class="xh">5</view>
|
||
<span>注意车辆异常:如果在行驶或充电过程中发现车辆有异常情况，比如电量突然降低或电池不能正常充电等，建议立即停车检查，如有必要，请联系专业维修人员进行维护。</span>
|
||
</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="title">
|
||
<span>充电关键指标</span>
|
||
<span class="smallTitle">CHONG DIAN GUAN JIAN ZHI BIAO</span>
|
||
</view>
|
||
<view class="chargeDataList">
|
||
<view class="item" v-for="(item,index) in chargingKey" :key="index">
|
||
<span>
|
||
<text class="name">{{item.name}}</text>
|
||
<text class="status" v-if="item.status == 'normal'">正常</text>
|
||
<text class="status1" v-else></text>
|
||
</span>
|
||
<span class="value" :style="{'fontSize':item.name == '极值温度' ?'2.5vw':''}">{{item.details}}：<span
|
||
class="unit">{{item.value}}</span></span>
|
||
<span class="value" v-if="item.details1"
|
||
:style="{'fontSize':item.name == '极值温度' ?'2.5vw':''}">{{item.details1}}：<span
|
||
class="unit">{{item.value1}}</span></span>
|
||
<!-- <span class="value" v-if="item.details2"
|
||
:style="{'fontSize':item.name == '极值温度' ?'2.2vw':''}">{{item.details2}}：<span
|
||
class="unit">{{item.value2}}</span></span> -->
|
||
</view>
|
||
</view>
|
||
<view class="title">
|
||
<span>告警</span>
|
||
<span class="smallTitle">GAO JING</span>
|
||
</view>
|
||
<view class="visualInspection4">
|
||
<view class="textBg">
|
||
<p v-for="(item,index) in alarmInfo" :key="index">{{item}}</p>
|
||
</view>
|
||
</view>
|
||
<!-- 充电温差曲线 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>充电温差曲线</span>
|
||
<span class="smallTitle">CHONG DIAN WEN CHA QU XIAN</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电压与需求电压的关系,实际充电电压不应高于需求电压</text> -->
|
||
<view class="visualInspection2">
|
||
<lineOneVue :apiData='apiData' :lineType="'充电温差'" :id="'chartRef1'"></lineOneVue>
|
||
<view class="chatResult">
|
||
<view class="twoTitle">
|
||
<span>评估结果</span>
|
||
<!-- <text class="comStatus">正常</text> -->
|
||
<!-- <text class="comStatus" v-if="apiData.tempDiffState =='normal'">正常</text>
|
||
<text v-else>异常</text> -->
|
||
</view>
|
||
<text class="remind">暂无数据</text>
|
||
</view>
|
||
</view>
|
||
<!-- 最高温度历史曲线 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>最高温度历史曲线</span>
|
||
<span class="smallTitle">ZUI GAO WEN DU LI SHI QU XIAN</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||
<view class="visualInspection3">
|
||
<lineOneVue :apiData='apiData' :lineType="'最高温度历史'" :id="'chartRef2'"></lineOneVue>
|
||
<view class="chatResult">
|
||
<view class="twoTitle">
|
||
<span>评估结果</span>
|
||
<!-- <text class="comStatus">正常</text> -->
|
||
</view>
|
||
<text class="remind">{{apiData.hstTempMaxConclusion}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 温差历史曲线 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>温差历史曲线</span>
|
||
<span class="smallTitle">WEN CHA LI SHI QU XIAN</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||
<view class="visualInspection2">
|
||
<lineOneVue :apiData='apiData' :id="'chartRef3'" :lineType="'温差历史'"></lineOneVue>
|
||
<view class="chatResult">
|
||
<view class="twoTitle">
|
||
<span>评估结果</span>
|
||
<!-- <text class="comStatus">正常</text> -->
|
||
<!-- <text class="comStatus" v-if="apiData.bmsAccuracyState =='normal'">正常</text>
|
||
<text v-else>异常</text> -->
|
||
</view>
|
||
<text class="remind">{{apiData.hstTempDiffConclusion}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 最高单体电压历史曲线 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>最高单体电压历史曲线</span>
|
||
<span class="smallTitle">ZUI GAO DAN TI DIAN YA LI SHI QU XIAN</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||
<view class="visualInspection2">
|
||
<lineOneVue :apiData='apiData' :id="'chartRef4'" :lineType="'最高单体电压历史'"></lineOneVue>
|
||
<view class="chatResult">
|
||
<view class="twoTitle">
|
||
<span>评估结果</span>
|
||
<text>本次最高单体电压:{{apiData.voltMax}}V</text>
|
||
<!-- <text v-else>异常</text> -->
|
||
</view>
|
||
<text class="remind">{{apiData.hstVoltMaxConclusion}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 压差历史曲线 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>压差历史曲线</span>
|
||
<span class="smallTitle">YA CHA LI SHI QU XIAN</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||
<view class="visualInspection2">
|
||
<lineOneVue :apiData='apiData' :id="'chartRef5'" :lineType="'压差历史'"></lineOneVue>
|
||
<view class="chatResult">
|
||
<view class="twoTitle">
|
||
<span>评估结果</span>
|
||
<text >本次压差:{{apiData.voltDiff}}V</text>
|
||
<!-- <text v-else>异常</text> -->
|
||
</view>
|
||
<text class="remind">{{apiData.hstVoltDiffConclusion}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 温度一致性历史曲线 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>温度一致性历史曲线</span>
|
||
<span class="smallTitle">WEN DU YI ZHI XING LI SHI QU XIAN</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||
<view class="visualInspection2">
|
||
<lineOneVue :apiData='apiData' :id="'chartRef6'" :lineType="'温度一致性历史'"></lineOneVue>
|
||
<view class="chatResult">
|
||
<view class="twoTitle">
|
||
<span>评估结果</span>
|
||
<text >本次温度一致性:{{apiData.tempConsistency}}分</text>
|
||
<!-- <text class="comStatus" v-if="apiData.tempDiffState =='normal'">正常</text>
|
||
<text v-else>异常</text> -->
|
||
</view>
|
||
<text class="remind">{{apiData.hstTempConsistencyConclusion}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 开路电压一致性历史曲线 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>开路电压一致性历史曲线</span>
|
||
<span class="smallTitle">KAI LU DIAN YA YI ZHI XING LI SHI QU XIAN</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||
<view class="visualInspection2">
|
||
<lineOneVue :apiData='apiData' :id="'chartRef7'" :lineType="'开路电压一致性历史'"></lineOneVue>
|
||
<view class="chatResult">
|
||
<view class="twoTitle">
|
||
<span>评估结果</span>
|
||
<text >本次开路电压一致性:{{apiData.voltConsistency}}分</text>
|
||
<!-- <text class="comStatus" v-if="apiData.tempDiffState =='normal'">正常</text>
|
||
<text v-else>异常</text> -->
|
||
</view>
|
||
<text class="remind">{{apiData.hstVoltConsistencyConclusion}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 健康度历史曲线 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>健康度历史曲线</span>
|
||
<span class="smallTitle">JIAN KANG DU LI SHI QU XIAN</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||
<view class="visualInspection2">
|
||
<lineOneVue :apiData='apiData' :id="'chartRef8'" :lineType="'健康度历史'"></lineOneVue>
|
||
<view class="chatResult">
|
||
<view class="twoTitle">
|
||
<span>评估结果</span>
|
||
<text >本次健康度:{{apiData.soh}}分</text>
|
||
<!-- text class="comStatus" v-if="apiData.tempDiffState =='normal'">正常</text>
|
||
<text v-else>异常</text> -->
|
||
</view>
|
||
<text class="remind">{{apiData.hstSohConclusion}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 充电功率 -->
|
||
<view class="title" style="margin-bottom: 0px;">
|
||
<span>充电功率</span>
|
||
<span class="smallTitle">CHONG DIAN GONG LV</span>
|
||
</view>
|
||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||
<view class="visualInspection">
|
||
<lineOneVue :apiData='apiData' :id="'chartRef9'" :lineType="'充电功率'"></lineOneVue>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import circular from '../../components/circular.vue'
|
||
import radarVue from '../../components/radar.vue'
|
||
import barVue from '../../components/bar.vue'
|
||
import lineVue from '../../components/lineChart.vue'
|
||
import lineOneVue from '../../components/lineOne.vue'
|
||
import ip from '../../static/config.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
detectionReportId: '',
|
||
apiData: {},
|
||
carStatus: '',
|
||
chargeData: [{
|
||
value: '',
|
||
name: '充电度数'
|
||
},
|
||
{
|
||
value: '',
|
||
name: '充电时长'
|
||
},
|
||
{
|
||
value: '',
|
||
name: '标称总能量'
|
||
},
|
||
],
|
||
evalConclusion: {
|
||
reason: '',
|
||
status: ''
|
||
}, //评语结论
|
||
chargingKey: [{
|
||
name: '电池健康度',
|
||
status: 'normal',
|
||
details: '电池健康度',
|
||
value: ''
|
||
},
|
||
{
|
||
name: '告警',
|
||
status: 'normal',
|
||
details: '告警信息',
|
||
value: ''
|
||
},
|
||
{
|
||
name: '电压一致性',
|
||
status: 'normal',
|
||
details: '电压一致性',
|
||
value: '',
|
||
},
|
||
{
|
||
name: '温度一致性',
|
||
status: 'normal',
|
||
details: '温度一致性',
|
||
value: '',
|
||
},
|
||
{
|
||
name: '电压差',
|
||
status: 'normal',
|
||
details: '电压差',
|
||
value: ''
|
||
},
|
||
|
||
{
|
||
name: '极值电压',
|
||
status: 'normal',
|
||
details: '单体最高电压',
|
||
value: '',
|
||
details1: '单体最低电压',
|
||
value1: ''
|
||
},
|
||
{
|
||
name: '温度差',
|
||
status: 'normal',
|
||
details: '温度差',
|
||
value: ''
|
||
},
|
||
{
|
||
name: '极值温度',
|
||
status: 'normal',
|
||
details: '最高温差时单体最高温度',
|
||
value: '',
|
||
details1: '最高温差时单体最低温度',
|
||
value1: ''
|
||
}
|
||
],
|
||
alarmInfo: [], //告警信息
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.detectionReportId = options.DetectionReportId
|
||
//获取接口数据
|
||
this.getData()
|
||
},
|
||
components: {
|
||
circular,
|
||
radarVue,
|
||
barVue,
|
||
lineVue,
|
||
lineOneVue
|
||
},
|
||
methods: {
|
||
getData() {
|
||
uni.request({
|
||
url: window.g.API_IP + '/api/GetDetectionReport?DetectionReportId=' + this
|
||
.detectionReportId, // 接口地址
|
||
// url: window.g.API_IP +
|
||
// '/api/GetDetectionReport?DetectionReportId=e7f9b3d015f64c1a92c8e5d3a0b4c7f2', // 接口地址
|
||
method: 'GET',
|
||
success: (res) => {
|
||
// 请求成功时执行的回调函数
|
||
console.log('Data received:', res.data.data);
|
||
if (res.data.code == 0) {
|
||
this.apiData = res.data.data; // 将获取的数据存储到data中
|
||
this.carStatus = this.apiData.evalConclusion[1].split('，')[1]
|
||
this.chargeData[0].value = this.apiData.chargingEnergy
|
||
this.chargeData[1].value = this.apiData.chargingDuration
|
||
this.chargeData[2].value = this.apiData.ratedEnergy
|
||
//时间
|
||
this.apiData.chargingStartTime = new Date(this.apiData.chargingStartTime)
|
||
.toLocaleString();
|
||
this.apiData.chargingEndTime = new Date(this.apiData.chargingEndTime)
|
||
.toLocaleString();
|
||
//结论评语
|
||
this.evalConclusion.reason = this.apiData.evalConclusion[0]
|
||
this.evalConclusion.status = this.apiData.evalConclusion[1]
|
||
//充电关键数据
|
||
this.chargingKey[0].value = this.apiData.soh + '%'
|
||
this.chargingKey[0].status = this.apiData.sohState
|
||
this.chargingKey[1].value = this.apiData.alarmNumber + '条'
|
||
this.chargingKey[1].status = this.apiData.alarmState
|
||
this.chargingKey[2].value = this.apiData.voltConsistency + '分'
|
||
this.chargingKey[2].status = this.apiData.voltConsistencyState
|
||
this.chargingKey[3].value = this.apiData.tempConsistency + '分'
|
||
this.chargingKey[3].status = this.apiData.tempConsistencyState
|
||
this.chargingKey[4].value = this.apiData.voltDiff + 'V'
|
||
this.chargingKey[4].status = this.apiData.voltDiffState
|
||
this.chargingKey[5].value = this.apiData.voltMax + 'V'
|
||
this.chargingKey[5].value1 = this.apiData.voltMin + 'V'
|
||
// this.chargingKey[5].status = this.apiData.voltDiffState
|
||
this.chargingKey[6].value = this.apiData.tempDiff + '℃'
|
||
this.chargingKey[6].status = this.apiData.tempDiffState
|
||
this.chargingKey[7].value = this.apiData.tempDiffMax + '℃'
|
||
this.chargingKey[7].value1 = this.apiData.tempDiffMin + '℃'
|
||
// this.chargingKey[7].status = this.apiData.tempDiffState
|
||
|
||
//告警
|
||
this.alarmInfo = this.apiData.alarmInfo
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
// 请求失败时执行的回调函数
|
||
console.error('Request failed:', err);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.text-area {
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
background: rgb(21, 21, 33);
|
||
|
||
.carDetection {
|
||
height: auto;
|
||
width: 100%;
|
||
padding: 0 10px;
|
||
}
|
||
}
|
||
|
||
.header {
|
||
width: 100%;
|
||
height: 12%;
|
||
background: url(@/static/img/jkBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 60%;
|
||
height: 9%;
|
||
top: 80%;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
background: url(@/static/img/titleBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 68%;
|
||
height: 1.2%;
|
||
font-size: 5vw;
|
||
font-weight: 550;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: start;
|
||
/* margin-bottom: 10px; */
|
||
margin-top: 10px;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding-left: 10px;
|
||
|
||
span:first-child {
|
||
font-family: 'SourceHanSansCN-Heavy';
|
||
font-size: 5vw;
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
|
||
.smallTitle {
|
||
font-size: 1.7vw;
|
||
color: #8195AA;
|
||
}
|
||
|
||
}
|
||
|
||
.visualInspection {
|
||
width: 100%;
|
||
height: 5%;
|
||
/* margin-top: 8px; */
|
||
background: url(@/static/img/detailBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -0.47%;
|
||
padding: 10% 3% 3% 3%;
|
||
box-sizing: border-box;
|
||
color: #96DBFF;
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
|
||
.textBg {
|
||
background: url(@/static/img/plBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
font-size: 3.5vw;
|
||
line-height: 1.8;
|
||
}
|
||
}
|
||
|
||
.visualInspection2 {
|
||
width: 100%;
|
||
height: 8%;
|
||
/* margin-top: 8px; */
|
||
background: url(@/static/img/lineBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -0.47%;
|
||
padding: 10% 3% 3% 3%;
|
||
box-sizing: border-box;
|
||
color: #96DBFF;
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
|
||
.textBg {
|
||
background: url(@/static/img/plBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
font-size: 3.5vw;
|
||
line-height: 1.8;
|
||
}
|
||
}
|
||
|
||
.visualInspection3 {
|
||
width: 100%;
|
||
height: 9%;
|
||
/* margin-top: 8px; */
|
||
background: url(@/static/img/linedlBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -0.47%;
|
||
padding: 10% 3% 3% 3%;
|
||
box-sizing: border-box;
|
||
color: #96DBFF;
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
|
||
.textBg {
|
||
background: url(@/static/img/plBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
font-size: 3.5vw;
|
||
line-height: 1.8;
|
||
}
|
||
}
|
||
|
||
.visualInspection4 {
|
||
width: 100%;
|
||
height: 4%;
|
||
/* margin-top: 8px; */
|
||
background: url(@/static/img/qzyBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -0.47%;
|
||
padding: 10% 3% 3% 3%;
|
||
box-sizing: border-box;
|
||
color: #96DBFF;
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.textBg {
|
||
background: url(@/static/img/plBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
font-size: 3.5vw;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.qzy {
|
||
color: #88A9CD;
|
||
font-size: 3.5vw;
|
||
line-height: 2;
|
||
text-indent: 2em;
|
||
|
||
span {
|
||
color: #28B4FF
|
||
}
|
||
}
|
||
}
|
||
|
||
.cdxx {
|
||
width: 100%;
|
||
/* height: 34%; */
|
||
background: url(@/static/img/linedlBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -0.45%;
|
||
padding: 10% 0;
|
||
box-sizing: border-box;
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
}
|
||
|
||
.visualInspection1 {
|
||
width: 100%;
|
||
height: 5%;
|
||
background: url(@/static/img/detailBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -0.47%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around
|
||
}
|
||
|
||
.cularBg {
|
||
background: url(@/static/img/chartBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.plateNumber {
|
||
background: url(@/static/img/numberBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 50%;
|
||
width: 33%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
|
||
.number {
|
||
font-family: 'SourceHanSansCN-Heavy';
|
||
font-size: 5vw;
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
|
||
.carStatus {
|
||
font-size: 4vw;
|
||
color: #96DBFF;
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
}
|
||
}
|
||
|
||
.chargeInfo {
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
border-bottom: 1px solid rgba(136, 169, 205, 1);
|
||
justify-content: space-between;
|
||
|
||
.chartCard {
|
||
width: 31%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 8px 0;
|
||
box-sizing: border-box;
|
||
align-items: center;
|
||
|
||
image {
|
||
height: 26px;
|
||
width: 22px;
|
||
top: 15%;
|
||
}
|
||
|
||
span:first-child {
|
||
font-size: 4vw;
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
|
||
span:nth-child(2) {
|
||
color: rgb(173, 184, 212);
|
||
font-size: 4vw;
|
||
}
|
||
|
||
.cdValue {
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.batteryInfo {
|
||
/* margin-top: 5px; */
|
||
|
||
.list {
|
||
list-style-type: none;
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
color: rgba(136, 169, 205, 1);
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
|
||
.type {
|
||
font-size: 4vw;
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
|
||
li {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.comment {
|
||
margin-top: 8px;
|
||
color: rgb(173, 184, 212);
|
||
padding: 8px;
|
||
font-size: 3vw;
|
||
height: 65%;
|
||
|
||
.pgjl {
|
||
background: url(@/static/img/plBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
height: 14%;
|
||
font-size: 3.5vw;
|
||
line-height: 1.8;
|
||
|
||
p::before {
|
||
content: "·";
|
||
/* 这里是你要添加的内容 */
|
||
color: rgba(60, 253, 255, 1);
|
||
/* 点的颜色 */
|
||
font-size: 4vw;
|
||
/* 点的尺寸 */
|
||
margin-right: 5px;
|
||
/* 点和文字之间的间距 */
|
||
}
|
||
}
|
||
|
||
.ycjy {
|
||
background: url(@/static/img/ycjybg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
/* height: 14%; */
|
||
font-size: 3.5vw;
|
||
margin-top: 5%;
|
||
}
|
||
}
|
||
|
||
.carSuggestions {
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
font-size: 3.5vw;
|
||
line-height: 1.8;
|
||
letter-spacing: 2px;
|
||
|
||
.xh {
|
||
background: url(@/static/img/xhbg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
font-family: 'SourceHanSansCN-Heavy';
|
||
height: 23px;
|
||
width: 23px;
|
||
display: inline-block;
|
||
text-align: center;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
|
||
.twoTitle {
|
||
font-size: 4.5vw;
|
||
color: #fff;
|
||
width: 100%;
|
||
/* margin: 10px 0; */
|
||
background: url(@/static/img/numberBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
display: block;
|
||
|
||
span {
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.chargeDataList {
|
||
background: url(@/static/img/cdgjsjBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
padding: 10% 3% 6% 3%;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
top: -0.41%;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 48%;
|
||
background: url(@/static/img/cdlistBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 10px 10px 0px 10px;
|
||
box-sizing: border-box;
|
||
height: 120px;
|
||
margin-top: 13px;
|
||
line-height: 1.5;
|
||
|
||
span:first-child {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.name {
|
||
font-size: 4vw;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
|
||
.status {
|
||
background: url(@/static/img/zc.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 15px;
|
||
width: 30%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
span {
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.status1 {
|
||
background: url(@/static/img/yc.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 15px;
|
||
color: #D93E3E;
|
||
width: 30%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.value {
|
||
color: #88A9CD;
|
||
margin-top: 5px;
|
||
font-size: 13px;
|
||
/* white-space: nowrap; */
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.unit {
|
||
color: #3CFDFF;
|
||
font-size: 15px;
|
||
font-weight: 550;
|
||
}
|
||
}
|
||
|
||
.value::before {
|
||
content: "·";
|
||
/* 这里是你要添加的内容 */
|
||
color: #88A9CD;
|
||
/* 点的颜色 */
|
||
font-size: 3vw;
|
||
/* 点的尺寸 */
|
||
margin-right: 5px;
|
||
/* 点和文字之间的间距 */
|
||
}
|
||
}
|
||
}
|
||
|
||
.prompt {
|
||
font-size: 18rpx;
|
||
color: rgb(127, 127, 127);
|
||
}
|
||
|
||
.chatResult {
|
||
background: url(@/static/img/pgjgBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 10px 15px;
|
||
box-sizing: border-box;
|
||
|
||
.twoTitle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.comStatus {
|
||
background: url(@/static/img/zc.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 15px;
|
||
width: 20%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
span {
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.remind {
|
||
color: #88A9CD;
|
||
font-size: 3vw;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
background: url(@/static/img/button.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 1%;
|
||
width: 60%;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 5vw;
|
||
left: 20%;
|
||
position: relative;
|
||
top: 20px;
|
||
|
||
span {
|
||
font-family: 'SourceHanSansCN-Bold';
|
||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||
-webkit-text-stroke: 0px #28b4ff;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
</style> |