增加车辆报文故障状态更改

src/api/vehicle/instance.js

@@ -8,6 +8,20 @@ export function instanceList(params) {
   })
 }
 
+export function instanceData(vin) {
+  return request({
+    url: `/vehicle/instance/data/${vin}`,
+    method: 'GET'
+  })
+}
+
+export function editStatus(vin, statusKey, statusValue) {
+  return request({
+    url: `/vehicle/instance/status/${vin}/${statusKey}/${statusValue}`,
+    method: 'PUT'
+  })
+}
+
 /**
  * 客户端连接
  * @param vin

src/views/vehicle/index.vue

@@ -1,17 +1,23 @@
 <template>
   <div class="app-container">
     <el-row :gutter="10">
-      <el-col :span="24">
+      <el-col :span="10">
         <div class="grid-content bg-purple" :style="{'height': contentHeight+'px'}">
           <el-row :gutter="10">
-            <el-col :span="6" v-for="vehicle in vehicleList" style="margin: 10px 0;">
+            <el-col :span="12" v-for="vehicle in vehicleList" style="margin: 10px 0;">
               <el-card class="box-card">
                 <div slot="header" class="clearfix">
-                  <el-tag :type="!vehicle.online ? 'info' : 'success'" style="padding-left: 0; padding-right: 0">{{vehicle.vin}}</el-tag>
+                  <el-tag :type="!vehicle.online ? 'info' : 'success'" style="padding-left: 0; padding-right: 0">
-                  <el-button style="float: right;" size="mini">选择</el-button>
+                    {{ vehicle.vin }}
+                  </el-tag>
+                  <el-button style="float: right;" @click="checkVin = vehicle.vin" size="mini">选择</el-button>
                   <span style="float: right; color: rgba(255,255,255,0)">|</span>
-                  <el-button v-if="!vehicle.online" style="float: right;" size="mini" @click="clientInit(vehicle.vin)">上线</el-button>
+                  <el-button v-if="!vehicle.online" style="float: right;" size="mini" @click="clientInit(vehicle.vin)">
-                  <el-button v-if="vehicle.online" style="float: right;" size="mini" @click="clientClose(vehicle.vin)">下线</el-button>
+                    上线
+                  </el-button>
+                  <el-button v-if="vehicle.online" style="float: right;" size="mini" @click="clientClose(vehicle.vin)">
+                    下线
+                  </el-button>
                 </div>
                 <el-descriptions class="margin-top" :column="1" size="mini" border>
                   <el-descriptions-item>
@@ -57,20 +63,108 @@
 
         </div>
       </el-col>
-<!--      <el-col :span="14">
+      <el-col :span="14">
         <div class="grid-content bg-purple" :style="{'height': contentHeight+'px'}">
+          <div class="contentMain" :style="{'height': (contentHeight / 2 - 10) + 'px', 'width': '100%'}">
+            <el-row :gutter="10" >
+              <el-form ref="form" labelPosition="top" :model="vehicleData">
+              <el-col :span="12">
+                <div :style="{'height': (contentHeight / 2 - 10) + 'px', 'width': '100%', 'background-color': '#FFFFFF'}">
+                  <el-tabs tab-position="top" type="border-card" :style="{'height': (contentHeight / 2 - 10) + 'px'}">
+                    <el-tab-pane label="基本信息"> <div class="vehicleDataTab" :style="{'height': (contentHeight / 2 - 80) + 'px'}">
+                      <el-row :gutter="10">
+                        <el-col :span="12"> <el-form-item label="车速"> <el-input v-model="vehicleData.speed" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="总电压"> <el-input v-model="vehicleData.voltage" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="总电流"> <el-input v-model="vehicleData.current" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="绝缘电阻"> <el-input v-model="vehicleData.resistance" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="加速踏板行程值"> <el-input v-model="vehicleData.accelerationPedal" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="制动踏板行程值"> <el-input v-model="vehicleData.brakePedal" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="燃料消耗率"> <el-input v-model="vehicleData.fuelConsumptionRate" disabled></el-input></el-form-item> </el-col>
+                      </el-row>
+                    </div> </el-tab-pane>
+                    <el-tab-pane label="电机"> <div class="vehicleDataTab" :style="{'height': (contentHeight / 2 - 80) + 'px'}">
+                      <el-row :gutter="10">
+                        <el-col :span="12"> <el-form-item label="电机控制器温度"> <el-input v-model="vehicleData.motorControllerTemperature" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="电机转速"> <el-input v-model="vehicleData.motorSpeed" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="电机转矩"> <el-input v-model="vehicleData.motorTorque" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="电机温度"> <el-input v-model="vehicleData.motorTemperature" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="电机电压"> <el-input v-model="vehicleData.motorVoltage" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="电机电流"> <el-input v-model="vehicleData.motorCurrent" disabled></el-input></el-form-item> </el-col>
+                      </el-row>
+                    </div> </el-tab-pane>
+                    <el-tab-pane label="动力电池"> <div class="vehicleDataTab" :style="{'height': (contentHeight / 2 - 80) + 'px'}">
+                      <el-row :gutter="10">
+                        <el-col :span="12"> <el-form-item label="动力电池剩余电量SOC"> <el-input v-model="vehicleData.remainingBattery" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="电池总容量"> <el-input v-model="vehicleData.batteryLevel" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="当前状态允许的最大反馈功率"> <el-input v-model="vehicleData.maximumFeedbackPower" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="当前状态允许最大放电功率"> <el-input v-model="vehicleData.maximumDischargePower" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="BMS自检计数器"> <el-input v-model="vehicleData.selfCheckCounter" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="动力电池充放电电流"> <el-input v-model="vehicleData.totalBatteryCurrent" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="动力电池负载端总电压V3"> <el-input v-model="vehicleData.totalBatteryVoltage" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="单次最大电压"> <el-input v-model="vehicleData.singleBatteryMaxVoltage" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="单体电池最低电压"> <el-input v-model="vehicleData.singleBatteryMinVoltage" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="单体电池最高温度"> <el-input v-model="vehicleData.singleBatteryMaxTemperature" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="单体电池最低温度"> <el-input v-model="vehicleData.singleBatteryMinTemperature" disabled></el-input></el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="动力电池可用容量"> <el-input v-model="vehicleData.availableBatteryCapacity" disabled></el-input></el-form-item> </el-col>
+                      </el-row>
+                    </div> </el-tab-pane>
+                  </el-tabs>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div :style="{'height': (contentHeight / 2 - 10) + 'px', 'width': '100%', 'background-color': '#FFFFFF'}">
+                  <el-tabs tab-position="top" type="border-card" :style="{'height': (contentHeight / 2 - 10) + 'px'}">
+                    <el-tab-pane label="基本状态"> <div class="vehicleDataTab" :style="{'height': (contentHeight / 2 - 80) + 'px'}">
+                      <el-row :gutter="10">
+                        <el-col :span="12"> <el-form-item label="车辆状态"> <el-radio-group v-model="vehicleData.vehicleStatus" @input="statusChange('vehicleStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="充电状态"> <el-radio-group v-model="vehicleData.chargingStatus" @input="statusChange('chargingStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="运行状态"> <el-radio-group v-model="vehicleData.operatingStatus" @input="statusChange('operatingStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="SOC状态"> <el-radio-group v-model="vehicleData.socStatus" @input="statusChange('socStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="可充电储能装置工作状态"> <el-radio-group v-model="vehicleData.chargingEnergyStorageStatus" @input="statusChange('chargingEnergyStorageStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="驱动电机状态"> <el-radio-group v-model="vehicleData.driveMotorStatus" @input="statusChange('driveMotorStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="定位是否有效"> <el-radio-group v-model="vehicleData.positionStatus" @input="statusChange('positionStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                      </el-row>
+                    </div> </el-tab-pane>
+                    <el-tab-pane label="组件状态"> <div class="vehicleDataTab" :style="{'height': (contentHeight / 2 - 80) + 'px'}">
+                      <el-row :gutter="10">
+                        <el-col :span="12"> <el-form-item label="EAS(汽车防盗系统)状态"> <el-radio-group v-model="vehicleData.easStatus" @input="statusChange('easStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="PTC(电动加热器)状态"> <el-radio-group v-model="vehicleData.ptcStatus" @input="statusChange('ptcStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="EPS(电动助力系统)状态"> <el-radio-group v-model="vehicleData.epsStatus" @input="statusChange('epsStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="ABS(防抱死)状态"> <el-radio-group v-model="vehicleData.absStatus" @input="statusChange('vehicleStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="MCU(电机/逆变器)状态"> <el-radio-group v-model="vehicleData.mcuStatus" @input="statusChange('vehicleStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                      </el-row>
+                    </div> </el-tab-pane>
+                    <el-tab-pane label="电池状态"> <div class="vehicleDataTab" :style="{'height': (contentHeight / 2 - 80) + 'px'}">
+                      <el-row :gutter="10">
+                        <el-col :span="12"> <el-form-item label="动力电池加热状态"> <el-radio-group v-model="vehicleData.heatingStatus" @input="statusChange('heatingStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="动力电池当前状态"> <el-radio-group v-model="vehicleData.batteryStatus" @input="statusChange('batteryStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="动力电池保温状态"> <el-radio-group v-model="vehicleData.batteryInsulationStatus" @input="statusChange('batteryInsulationStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="DCDC(电力交换系统)状态"> <el-radio-group v-model="vehicleData.dcdcStatus" @input="statusChange('dcdcStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                        <el-col :span="12"> <el-form-item label="CHG(充电机)状态"> <el-radio-group v-model="vehicleData.chgStatus" @input="statusChange('chgStatus')"> <el-radio :label="1">正常</el-radio> <el-radio :label="0">异常</el-radio> </el-radio-group> </el-form-item> </el-col>
+                      </el-row>
+                    </div> </el-tab-pane>
+                  </el-tabs>
+                </div>
+              </el-col>
+              </el-form>
+            </el-row>
+          </div>
+          <div class="contentMain" :style="{'height': (contentHeight / 2 - 10) + 'px', 'width': '100%', 'background-color': '#FFFFFF'}">
 
           </div>
-      </el-col>-->
+        </div>
+      </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
 import {
+  editStatus,
   instanceCheckPosition,
   instanceClientClose,
-  instanceClientInit, instanceGear,
+  instanceClientInit, instanceData,
+  instanceGear,
   instanceList,
   instanceMsg
 } from "@/api/vehicle/instance";
@@ -86,16 +180,44 @@ export default {
       queryParams: {
         vin: null,
       },
-      intervalInstanceList: null
+      intervalInstanceList: null,
+      intervalVehicleDataContinued: null,
+      vehicleData: {}
     }
   },
   created() {
-    this.contentHeight = window.innerHeight - 60
+    this.contentHeight = window.innerHeight - 60;
     this.initInstanceList();
     this.initPositionList();
+    this.intervalVehicleDataContinued = setInterval(this.vehicleDataContinued, 1000);
   },
   methods: {
 
+    /**
+     * 获取车辆数据
+     */
+    vehicleDataContinued(){
+      if (this.checkVin != null){
+        instanceData(this.checkVin).then(response => {
+          this.vehicleData = response.data
+        })
+      }
+    },
+
+    /**
+     * 状态发生改变
+     * @param statusKey 状态Key
+     */
+    statusChange(statusKey){
+      debugger
+      editStatus(this.checkVin, statusKey, this.vehicleData[statusKey]).then(response => {
+        this.$notify({
+          title: '操作提示',
+          message: response.msg,
+          type: response.code === 200 ? 'success' : 'error'
+        })
+      })
+    },
     /**
      * 选中报文上报状态
      * @param vehicle 车辆
@@ -199,6 +321,7 @@ export default {
 <style scoped>
 .app-container {
   padding: 10px 5px 0 10px;
+  background-color: #f4f4f5;
 }
 
 .el-row {
@@ -235,5 +358,35 @@ export default {
   height: 50px;
   margin: 0 0 10px 0
 }
+
+.contentMain {
+  margin-top: 10px;
+}
+
+.vehicleDataTab{
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.vehicleDataTab::-webkit-scrollbar {
+  width: 4px;
+}
+
+.vehicleDataTab::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.vehicleDataTab::-webkit-scrollbar-track {
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
+.el-form-item__label{
+  padding: 0;
+}
+.el-form-item{
+  margin-bottom: 5px;
+}
 </style>