610 lines
14 KiB
Vue
610 lines
14 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="text-area">
|
||
<view class="carDetection">
|
||
<view class="header">
|
||
</view>
|
||
<view class="title">
|
||
<span>车辆信息</span>
|
||
<span class="smallTitle">CHE LIANG XIN XI</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"><span class="unit">{{item.value}}</span></span>
|
||
</view>
|
||
</view>
|
||
<view class="title">
|
||
<span>均衡信息</span>
|
||
<span class="smallTitle">JUN HENG XIN XI</span>
|
||
</view>
|
||
<view class="visualInspection">
|
||
<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}}</span>
|
||
<!-- <span v-else class="cdValue">{{item.value}}min</span> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="title">
|
||
<span>均衡对比</span>
|
||
<span class="smallTitle">JUN HENG DUI BI</span>
|
||
</view>
|
||
<view class="visualInspection"
|
||
style="display: flex;justify-content: space-between;padding:10% 10px 3% 10px">
|
||
<view class="item" v-for="(item,index) in balancedComparison" :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">{{item.detail}}：<span class="unit">{{item.value}}</span></span>
|
||
</view>
|
||
</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 ip from '../../static/config.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
detectionReportId: '',
|
||
apiData: {},
|
||
carStatus: '',
|
||
chargeData: [{
|
||
value: '3.37V',
|
||
name: '最高电压'
|
||
},
|
||
{
|
||
value: '13V',
|
||
name: '最低电压'
|
||
},
|
||
{
|
||
value: '',
|
||
name: '最高电压位'
|
||
},
|
||
{
|
||
value: '15℃',
|
||
name: '最高温度'
|
||
},
|
||
{
|
||
value: '13℃',
|
||
name: '最低温度'
|
||
},
|
||
{
|
||
value: '',
|
||
name: '最高温度位'
|
||
},
|
||
{
|
||
value: '',
|
||
name: '最低温度位'
|
||
},
|
||
],
|
||
chargingKey: [{
|
||
name: '车牌号',
|
||
value: ''
|
||
},
|
||
{
|
||
name: '车架号',
|
||
value: ''
|
||
},
|
||
{
|
||
name: '电池类型',
|
||
value: ''
|
||
},
|
||
{
|
||
name: '电池容量',
|
||
value: ''
|
||
},
|
||
{
|
||
name: '检测时间',
|
||
value: ''
|
||
}, {
|
||
name: '检测站点',
|
||
value: ''
|
||
},
|
||
],
|
||
//均衡对比
|
||
balancedComparison: [{
|
||
name: '均衡前后对比',
|
||
detail: '均衡前压差',
|
||
value: ''
|
||
},
|
||
{
|
||
name: '均衡前后对比',
|
||
detail: '均衡后压差',
|
||
value: ''
|
||
}
|
||
]
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.detectionReportId = options.DetectionReportId
|
||
//获取接口数据
|
||
this.getData()
|
||
},
|
||
components: {
|
||
circular,
|
||
radarVue,
|
||
barVue,
|
||
lineVue
|
||
},
|
||
methods: {
|
||
getData() {
|
||
uni.request({
|
||
url: window.g.API_IP + '/api/GetDetectionReport?DetectionReportId=' + this.detectionReportId,
|
||
// url: window.g.API_IP +
|
||
// '/api/GetDetectionReport?DetectionReportId=21ad44647c8a4b9c871af5bae82d160a', // 接口地址
|
||
method: 'GET',
|
||
success: (res) => {
|
||
// 请求成功时执行的回调函数
|
||
console.log('Data received:', res.data.data);
|
||
if (res.data.code == 0) {
|
||
this.apiData = res.data.data; // 将获取的数据存储到data中
|
||
//车辆信息
|
||
this.chargingKey[0].value = this.apiData.plateNo
|
||
this.chargingKey[1].value = this.apiData.vin
|
||
this.chargingKey[2].value = this.apiData.batteryType
|
||
this.chargingKey[3].value = this.apiData.ratedEnergy
|
||
this.chargingKey[4].value = new Date(this.apiData.evalDate)
|
||
.toLocaleString();
|
||
//均衡信息
|
||
this.chargeData[0].value = this.apiData.voltMax + 'kWh'
|
||
this.chargeData[1].value = this.apiData.voltMin + 'kWh'
|
||
this.chargeData[3].value = this.apiData.tempMax + '℃'
|
||
this.chargeData[4].value = this.apiData.tempMax - this.apiData.tempDiff + '℃'
|
||
|
||
}
|
||
},
|
||
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: 500px;
|
||
background: url(@/static/img/bg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.title {
|
||
background: url(@/static/img/titleBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 68%;
|
||
height: 60px;
|
||
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: 16%;
|
||
/* margin-top: 8px; */
|
||
background: url(@/static/img/detailBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -2.1%;
|
||
padding: 10% 0 3% 0;
|
||
box-sizing: border-box;
|
||
color: #96DBFF;
|
||
font-family: 'SourceHanSansCN-Regular';
|
||
|
||
.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;
|
||
/* 点和文字之间的间距 */
|
||
}
|
||
}
|
||
}
|
||
|
||
.visualInspection1 {
|
||
width: 100%;
|
||
height: 8%;
|
||
background: url(@/static/img/detailBg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
top: -0.7%;
|
||
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: 40%;
|
||
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 {
|
||
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;
|
||
flex-wrap: wrap;
|
||
|
||
.chartCard {
|
||
width: 31%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: 5px;
|
||
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 {
|
||
background: rgb(45, 55, 66);
|
||
margin-top: 5px;
|
||
|
||
.list {
|
||
list-style-type: none;
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
color: rgb(173, 184, 212);
|
||
|
||
li {
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.comment {
|
||
background: rgb(45, 55, 66);
|
||
margin-top: 5px;
|
||
color: rgb(173, 184, 212);
|
||
padding: 8px;
|
||
font-size: 25rpx;
|
||
}
|
||
|
||
.twoTitle {
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
width: 100%;
|
||
margin: 10px 0
|
||
}
|
||
|
||
.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: -2.1%;
|
||
|
||
.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: rgba(58, 153, 212, 0.5);
|
||
border: 1px solid rgb(58, 153, 212);
|
||
border-radius: 5px;
|
||
padding: 5px 15px;
|
||
box-sizing: border-box;
|
||
|
||
.twoTitle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.comStatus {
|
||
color: #000;
|
||
background: rgb(0, 220, 255);
|
||
border-radius: 20px;
|
||
display: flex;
|
||
width: 15%;
|
||
justify-content: center;
|
||
padding: 5px;
|
||
}
|
||
}
|
||
|
||
.remind {
|
||
color: rgb(173, 184, 212);
|
||
}
|
||
}
|
||
</style> |